*{
box-sizing: border-box;
}
#contact-form{
background-color: #4A7CD21A;
padding: 8% 5% 8% 5%;
border-radius: 20px;
}
#form-heading{
transition: all 0.2s linear;
font-size: 26px;
color: #10244b;
}
#contact-form input, textarea{
background-color: rgba(0,0,0,.025);
color: #93a0af !important;
font-size: 1rem;
}
#contact-form > div div{
margin-bottom: 25px;
}
#contact-form input:focus, #contact-form textarea:focus{
background-color: white;
outline: none;
border: 1px solid blue;
}
.invalid-data {
font-size: 14px;
color: rgb(202, 0, 0);
}
#contact-form-submit-btn{
background-color: #4A7CD2;
font-size: 15px;
width: 160px;
border-radius: 10px;
transition: background-color 0.2s linear;
}
#contact-form-submit-btn:disabled{
background-color: #8aa5d4;
}
#contact-form-submit-btn:not(:disabled):hover{
background-color: #032869;
}
#form-submit-status.failed{
color: rgb(202, 0, 0);
}
#form-submit-status.success{
color: green;
}
#loader.active{
display: inline-block;
height: 20px;
width: 20px;
border-radius: 50%;
margin-bottom: -5px;
border: 2px dotted black;
border-bottom: 2px solid transparent;
animation:  loader 0.5s linear infinite;
}
@keyframes loader{
from{
transform: rotate(0deg);
}
to{
transform:  rotate(360deg);
}
}