.login-body{

    min-height: 100vh;

    background: url('../media/images/background.png') no-repeat center center fixed;

    background-size: cover;

    background-position: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.login-body .form-group button{
    max-width: 293px;
    width: 100%;
}

.login-body .form-group input

{width: 100%;max-width: 293px;margin: 0 auto 0px;border-radius: 15px;line-height: 2.5rem;}

.login-body .form-group div{

    text-align: center;

}



.login-body .form-group input{

    background-color: transparent;

    border: white solid 1px;

    color: white;

}

.form-control{

    font-family: 'MyriadPro-Regular';

}







.form-group{

    position: relative;

    width: 100%;

    margin-bottom: .5rem;

}





.invalid-feedback,

.back-validation-content,
.back-validation,

.error-msg{

    display: block;

    font-size: 12px;

    line-height: 1;

    margin: auto;
    margin-bottom: .2rem;

    width: 100%;
    text-align: center;

    margin-top: .25rem;

    color: #dc3545;
    max-width: 293px;

}

.main-btn{

    border: 0;

    padding: 0;

    outline: 0;

    box-shadow: none;

    background-color: transparent;

    display: flex;

    justify-content: center;

    align-content: center;

    margin:0 auto;

}

.main-btn:focus,

.main-btn:hover{

    border: 0;

    padding: 0;

    outline: 0;

    box-shadow: none;

    background-color: transparent;

}









/* thank you */



.thank_you{

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background-image: url(../media/images/background.png);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    display: none;

}

.thank_you .thank-con{

    max-width: 100%;

    width: 100%;

    height: 100%;

    display: flex;   

    justify-content: center;

    align-content: center;

}

.thank_you .thank-con img{

    margin: auto;

}



@media only screen and (max-width: 768px) {

    .bodylogo img{

        max-width: 80%;

    }

    .bodylogo{

        display: flex;

        justify-content: center;

    }

    .login-body .form-group button{
        max-width: 250px;
    }

    .login-body .form-group input{

        max-width: 100%;

        margin-bottom: 1rem;

    }

}

@media only screen and (max-width: 768px) {

    .thankyouImg img{

        height: 4rem;

    }

}



@media (max-width: 992px) and (orientation: landscape) {

    .rotatable{

        display: flex;

        

    }

    .bodylogo{

        display: flex;

        justify-content: center;

        width: 40%;

    }

    .bodylogo img{

        max-width: 100%;

    }

    .rotatable form{

        margin-top: 15%;

        width: 60%;

    }

    .login-body .form-group button{
        max-width: 250px;
    }

    .login-body .form-group input{
        margin: 0 auto 0px;

        border-radius: 15px;

        line-height: 1.5rem;

    }
    

}

.thankyouImg img{

    height: 6rem;

    width: 100%;

}



/* start style of the spin  */



.loading-overlay {

    background: rgba(0, 0, 0,  .97);

    color: #fff;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 99999;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.reverse-spinner {

    position: relative;

    height: 150px;

    width: 150px;

    border: 6px solid transparent;

    border-top-color: #154263;

    border-left-color: #154263;

    border-radius: 50%;

    -webkit-animation: spin 1.5s linear infinite;

    animation: spin 1.5s linear infinite;

}



.overlay-hidden {

    display: none !important;

}



.reverse-spinner::before {

    position: absolute;

    top: 15px;

    left: 15px;

    right: 15px;

    bottom: 15px;

    content: "";

    border: 6px solid transparent;

    border-top-color: #fff;

    border-left-color: #fff;

    border-radius: 50%;

    -webkit-animation: spinBack 1s linear infinite;

    animation: spinBack 1s linear infinite;

}



@-webkit-keyframes spin {

    from {

        -webkit-transform: rotate(0);

        transform: rotate(0)

    }

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@keyframes spin {

    from {

        -webkit-transform: rotate(0);

        transform: rotate(0)

    }

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@-webkit-keyframes spinBack {

    from {

        -webkit-transform: rotate(0);

        transform: rotate(0)

    }

    to {

        -webkit-transform: rotate(-720deg);

        transform: rotate(-720deg)

    }

}



@keyframes spinBack {

    from {

        -webkit-transform: rotate(0);

        transform: rotate(0)

    }

    to {

        -webkit-transform: rotate(-720deg);

        transform: rotate(-720deg)

    }

}