*{
    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);
    }
}