.data_div_hidden{display:none}
.metal_label{
position:relative;
font-size:35px;
cursor:pointer;
}
@media(max-width:318px){
.metal_label{
font-size:25px;
}
}
.metal{
display:none;
}
.choose_metal{
display:flex;
justify-content: center;
gap:20px;
margin-top:15px;
}
.metal_label::after{
content:' ';
position:absolute;
bottom:-10px;
left:0;
right:0;
height:2px;
background-color:#606060;
transition:0.1s;
opacity:0;
}
.metal:checked + .metal_label::after{
opacity:1;
}
.hidden_metal{
display:none;
}
.calc_outer{
max-width: 80%!important;
margin:auto;
margin-top:50px;
margin-bottom:50px;
}
.calc{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 20px;
max-width: 100%;
}
input{display: block}
#weight{
width: 400px;
max-width:100%;
border:1px solid #606060;
height:60px;
outline:1px solid #606060;
}
#select{
position: relative;
width: 400px;
max-width: 100%;
min-height: 60px;
border: 1px solid #606060;
background-color: white;
color: #808080;
}
#contents{
display: none;
flex-direction: column;
position: absolute;
left: 0;
right: 0;
max-height: 180px;
overflow-y: auto;
top: 60px;
padding: 0;
z-index: 2;
}
.select_item{
box-sizing: border-box;
padding: 10px;
min-height: 60px;
width: 100%;
border: 0.5px solid #606060;
background-color: white;
color: #606060;
margin: 0;
cursor: pointer;
}
.select_item:hover{
background-color: #F9E800;
color: black;
}
#select_val{
box-sizing: border-box;
padding: 10px;
max-width: 100%;
cursor: pointer;
}
.shown_contents > ul{
display: flex!important;
}
.calc_buttons{
position: relative;
display: flex;
gap: 10px;
width: 400px;
max-width: 100%;
}
label{
padding: 0!important;
}
.max_w{max-width:100%}
.calculate{
width: 100%;
background-color: #F9E800;
color: black;
border: 1px solid #606060;
border-radius:0;
}
@media(max-width: 1035px){
.calc{
flex-direction: column;
justify-content: center;
}
}
#results{
border: 2px solid #F9E800;
background-color: white;
padding: 20px;
text-align: center;
color: black;
text-transform: uppercase;
margin-bottom: 20px;
}