@import 'app.css';
@import 'main_header_and_footer.css';



.form-cont{
    width: 100%;
    padding: 2% 25% 4% 25%;
}

.main-form{
    text-align: right;
    direction: rtl;
}

#form-button{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin-top: 2%;
    width: 100%;
    padding: 2% 2% 2% 2%;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    color: white;
    background: #91c74b;
    display: table;
    cursor: pointer;
    border-radius: 25px 25px 25px 25px;
    border: 0px;
}


#form-button:hover{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    background-color: #079b61;
    text-decoration: none;
    color: white;
}


#result-mess-cont{
    text-align: center;
    font-size: x-large;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-left: 4%;
    margin-right: 4%;
}

.result-loading-cont{
    padding: 2% 0% 0% 0%;
}

.result-loading-cont img{
    position: relative;
    margin: auto;
    width: 10%;
    height: 10%;
}


.result-cont-hide{
    display: none;
    visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 10s, opacity 0.33s linear;
}

.result-cont-show{
    display: block;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}


@media (max-width: 576px){

    .form-cont{
        padding: 4% 4% 4% 4%;
    }
}

@media (max-width: 768px) {

    .form-cont{
        padding: 4% 10% 4% 10%;
    }

}

@media (max-width: 991.98px) {

    .form-cont{
        padding: 4% 4% 4% 4%;
    }

}

@media (min-width: 992px) {
    .par-with-title-cont{
        padding-left: 5%;
        padding-right: 5%;
    }
}