
.technical-database { margin-inline: 11%; }
.technical-database > .technical-database-selection { position: relative; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 60px; margin-top: 200px; height: fit-content; }
.technical-database > div > a { background: url('/wp-content/uploads/2024/03/shutterstock_1571126896-scaled.jpg'); border: 2px solid #add8ff; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; border-radius: 15px; color: black; width: 25%; min-width: 350px; text-align: center; }
.technical-database > div > a:hover { border: 2px solid #0155c4; color: black; cursor: pointer; }
.technical-database > div > a > h1 { padding: 5px; margin-block: auto; font-weight: bold; font-size: 18px; text-align: center; margin-block: auto; }
.technical-database > div > a > img { width: 100%; height: 300px; object-fit: cover; border-top-left-radius: 15px; border-top-right-radius: 15px; }

.title { position: relative; top: 240px; padding-left: 11%; color: white; text-shadow: 1px 1px 2px black; }
.technical-database-content > div > div { position: relative; padding: 30px; color: black; background: url('/wp-content/uploads/2024/03/shutterstock_1571126896-scaled.jpg'); background-size: cover; margin-inline: 22%; margin-top: 150px; }
.technical-database-content > div > h1 { font-weight: bold; font-size: 32px; }
.technical-database-content > div { display: none; padding: 30px; }











/**************************************************************************/
/********************************* CACLULATOR *****************************/
/**************************************************************************/
#quantity_section { display: none; }
input { all: unset; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; }
input { 
	width: 93.5%;
    background-color: var(--wpforms-field-background-color);
    border-radius: var(--wpforms-field-border-radius);
    color: var(--wpforms-field-text-color);
    border: 1px solid var(--wpforms-field-border-color);
    padding-inline: 3%;
    font-size: var(--wpforms-field-size-font-size);
    line-height: 100%;
    box-shadow: rgb(0 0 0) 0px 15px 20px -17px !important;
    padding-block: 5px;
    font-size: 20px;
}
select { font-size: 16px; }
.title-container > h1 { border-radius: 50px;  }
.title-container > h1, button { 
    width: fit-content;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background: black;
    padding-inline: 20px;
    padding-block: 10px;
    box-shadow: rgb(0 0 0) 0px 15px 20px -20px;
    margin-left: 35px;
    text-transform: uppercase;
}
button { border: none; margin-left: 0; }
button:hover { cursor: pointer; }
.calc { text-align: left; margin-top: 30px; display: flex; justify-content: center; column-gap: 30px; flex-wrap: wrap; }
.calc-top { display: flex; justify-content: space-between; }
.calc > div { width: 30%; }
#shape_section { width: 100px; margin-top: 10px; text-align: end; margin-bottom: 30px; }
.calc-right { position: relative; top: -3px; }
#outer-diameter, #thickness, #tolerance, #yield, #safety, .carbon, .manganese, .copper, .nickel, .chrome, .molybdeen { margin-top: 20px; width: unset; }
.calc-left, .calc-right, #safety { width: 35%; }
#safety { width: 35%; }
#wall_section { width: 30%; margin-inline: auto; }
#yield { margin-top: 17px; }
.calc-title { display: flex; justify-content: space-between; }
.calc-title > select { margin-block: auto; }
.calc > div > .calc-title > h1, #quantity_section > h1, .calc-title > label { font-weight: bold; font-size: 20px; }
.weight-title { display: flex; flex-wrap: wrap; justify-content: space-between; }
.result { display: flex; flex-wrap: wrap; justify-content: space-between; min-height: 90px; margin-top: 30px; }
.result > div { width: 45%; margin-block: auto; }
.result-carbon { margin-top: 30px; }
#shape_section > select { padding-block: 5px; width: 100%; }
#quantity_section > h1 { margin-top: 60px; }
#weight_section, #pressure_section, #carbon_section, #cev_section { width: 50%; text-align: left; }
#weight, #pressure, #cev { font-weight: bold; font-size: 26px; color: white; line-height: unset; margin-block: 0; text-align: center; }
.head-title { font-size: 36px; font-weight: bold; }
#diameter_section { margin-bottom: 30px; }
.calc-left, .calc-right { width: unset !important }
/*------------------------------------------------------------------------*/