/*@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');*/
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat.ttf");
    font-weight: normal;
    font-style: normal;
}

:root {
    --white: #fff;
    --black: #000;
    --body-font: 1rem;
    --heading-font: 2rem;
    --warning: #e8c14f;
    --login-btn-bg: #1976D2;
    --body-text: color: rgb(0 0 0 / 57%);
    --input-border-radius: .5rem;
    --input-height: 56px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: var(--body-font);
    line-height: 1.5;
    font-family: 'Montserrat', sans-serif !important;
    /* font-family: sans-serif;  */
    color: rgb(0 0 0 / 80%);
    background-image: linear-gradient(to right bottom, #013160, #093e72, #124b85, #1a5998, #2167ac);
    /* background-image: url(../images/loginbg.png); */
}

a {
    text-decoration: none;
}

.back-bt {
    color: #e8c14f;
}

.main-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100vh;
    background-image: url(../images/mails.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 44%;
}


.inner-content {
    flex: 1 1 auto;
    /* padding: 5rem 0 6rem 0;*/
    height: 100%;
}

.login-logo-wrap {
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}

.parent-login-div {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
}
/*
.logo {
    padding-top: 6rem;
}*/
.login-container {
    /* height: 100vh;*/
    /* background-image: url(../images/mails.png);
    position: relative;
    background-position:top right;
    background-repeat: no-repeat;
    background-size: 55%; */
    /*background-image: url(../images/mails.png);*/
    /*height: calc(100vh - 269px);*/

    display: flex;
    justify-content: space-between;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 55%;
}

/*logo {
    position: absolute;
    left: 0rem;
    top: 11rem;
}*/

.logo-part {
    width: 22rem;
}

    .logo-part img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

.mail {
    position: absolute;
    left: 2rem;
    top: 0;
}

.login-body {
    display: flex;
    justify-content: space-between;
    height: 100vh;
    align-items: flex-end;
}

.login-btn:hover {
    transition: 0.2s;
    background: #f4c94a;
    color: white;
}

.login-body-left {
    /*  display: flex;
    align-items: end;*/
    /* padding-bottom: 8rem;
    align-items: center;*/
    /* margin-top: auto;
    margin-bottom: 5rem;*/
}

.login-body-left-section {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    align-items: center;
}

.login-body-left-part {
    height: 2.2rem;
    width: 2.2rem;
    background-color: #1c5388;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
}

.login-body-left-section p {
    color: #6485a4;
    font-size: 1.3rem;
}
.login-body-left {
    margin-bottom: 3rem;
}
.login-body-left-section p a {
    color: var(--white) !important;
    font-weight: bold;
    margin: 0 0.3rem;
}
/* form-design */
.login-body-right {
    /* margin-top: 11rem; */
    margin-bottom: 0;
}

    .login-body-right form {
        width: 415px;
        /*   padding: 2.3rem 2.2rem 5.3rem 2.2rem;*/
        padding: 2.3rem;
        border-radius: 1.7rem;
        background-color: white;
    }

    .login-body-right h3 {
        color: #316aa3;
        margin-bottom: 1.7rem;
        font-weight: 400;
        font-size: 1.5rem;
    }

.back-bt {
    text-decoration: none;
}

.main-container .logo-mob {
    text-align: center
}

.icon-input-control {
    position: relative;
}

    .icon-input-control label {
        position: absolute;
        top: 1.1rem;
        /*top: -0.9rem;*/
        /* left: 0.6rem; */
        left: 0;
        font-size: 1rem;
        color: #141114;
        transition: 0.2s;
    }

    .icon-input-control .form-control {
        border: none;
        border-radius: 0;
        border-bottom: 2px solid #e0e0e0;
        padding: 0.375rem 0.75rem 0.375rem 0rem;
    }

        .icon-input-control .form-control:focus + label, .icon-input-control .form-control:not(:placeholder-shown) + label {
            top: -1.3rem;
        }

.form-group {
    margin-bottom: 1.8rem;
}

.icon-input-control i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: rgb(0 0 0 / 42%);
}

.form-control {
    margin-bottom: 1.5rem;
    height: var( --input-height);
    border-radius: var(--input-border-radius);
    outline: none;
    border: 1px solid #ddd;
    width: 100%;
    padding: 0.5rem 1.5rem;
    font-size: var(--body-font);
    color: rgb(0 0 0 / 57%);
    transition: .3s;
    background: var(--white);
}

.captcha-group {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    column-gap: 2rem;
}

.captcha-inputs {
    display: flex;
}

.form-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    flex-direction: column;
    position: relative;
    z-index: 9;
}

.login-btn {
    background: var(--login-btn-bg);
    border: none;
    outline: none;
    padding: 1.19rem;
    text-align: center;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: var(--input-border-radius);
    color: var(--white);
    font-weight: 500;
    font-size: var(--body-font);
    position: relative;
    overflow: hidden;
    transition: 0.2s;
}

.forgot-link {
    color: inherit;
}

.login-body-right .form-control:disabled {
    background-color: #ffffff;
    opacity: 1;
    border: none;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 600;
    color: #E98559;
    text-decoration: line-through;
}
/*.logo-mob {
display:none;
}*/
/* footer */
footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /*  footer::after {
        content: '';
        position: absolute;
        background-image: url(../images/cloud.png);
        bottom: 0;
        left: 0;
        right: 0;
        height: 243px;
        overflow: hidden;
        background-position: 20% 16%;
    }*/
    /*added-14-07-2023*/
    /*    footer::after {
        content: '';
        position: absolute;
        background-image: url(../images/cloud.png), url(../images/cloud.png);
        bottom:0;
        left: 0;
        right: 0;
        height: 243px;
        background-position: top left, right bottom;
        animation-name: cloud-animation-one;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
        animation-direction: normal;
        animation-timing-function: linear;
    }

@keyframes cloud-animation-one {
    100% {
        background-position: 100% 13%, 0% 0%;
    }
}*/

    /*footer::before {
    content: '';
    position: absolute;
    background-image: url(../images/cloud.png), url(../images/cloud.png);
    bottom: -42px;
    left: 0;
    right: 0;
    height: 243px;
    transform: scaleX(-1);
    background-position: top left, right bottom;
    animation-name: cloud-animation-two;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: normal;
    animation-timing-function: linear;
}*/
    /*    footer::before {
        content: '';
        position: absolute;
        background-image: url(../images/cloud.png),url(../images/cloud.png);
        bottom: -39px;
        left: 0;
        right: 0;
        height: 243px;
        background-position: top left, right bottom;
        animation-name: cloud-animation-two;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
        animation-direction: normal;
        animation-timing-function: linear;
    }*/
    footer::before {
        content: '';
        position: absolute;
        background-image: url(../images/cloud.png);
        bottom: 0px;
        left: 0;
        right: 0;
        height: 218px;
        background-position: 75% 0%;
        background-repeat: no-repeat;
        /*background-size: cover;*/
        /*  animation-name: cloud-animation-two;
        animation-duration: 45s;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
        animation-direction: normal;
        animation-timing-function: linear;
        background-repeat: repeat-x;*/
        /* animation-name: cloud-animation-two;
        animation-duration: 50s;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
        animation-direction: normal;
        animation-timing-function: linear;
        background-repeat: repeat-x;*/
        /*   background-size: 100%;*/
    }


@keyframes cloud-animation-two {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
    /*100% {
               
                background-position:right bottom;
            }*/
}
/*added-14-07-2023*/
footer p {
    position: relative;
    z-index: 1;
    margin-top: -5rem;
    color: #717171;
}
/* rocket-animate */
.rocket-animate {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    left: 0;
    bottom: 0;
}


    .rocket-animate img {
        width: 92%;
        /*aaded*/
        /* animation-name: rocket-animation;
        animation-duration: 3s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        animation-direction: alternate;
        animation-timing-function: linear;*/
    }

@keyframes rocket-animation {
    0% {
        width: 0%;
    }



    100% {
        width: 70%;
        /* right:200px;*/
    }
}

.login-btn {
    background: var(--warning);
    color: black;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.2rem;
    padding: 0.89rem;
    text-transform: uppercase;
}

.forgot-link {
    text-decoration: none;
}

.footer-end {
    position: relative;
    text-align: center;
    border: 1px solid red;
    z-index: 9;
    margin-bottom: 0;
}

.old-site-reference {
position:relative;
}
.old-site {
    position: absolute;
    top: 1rem;
    padding: 0.1rem 0.6rem;
    right: 1rem;
    background: #124b85;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .old-site a {
        color: white;
        font-size: 0.85rem;
    }

    .old-site:hover {
        background: #04203b;
        transition: 0.2s;
    }
/* media-query */
@media only screen and (max-width:1600px) {
    /*    footer::after {
        bottom: -87px;
    }


    footer::before {
        bottom: -42px;
    }

*/
    /*   footer::before {
       
        bottom: -51px;
    }*/
    /* .rocket-animate {
        position: absolute;
        overflow: hidden;
        z-index: -1;
        left: 14px;
        bottom:0;
    }*/
    .login-body-left {
        margin-bottom: 6rem;
    }
}

@media only screen and (max-width:1440px) {
    /* footer::before {
        bottom: -59px;
    }*/
    /* footer::before {
        bottom: -67px;
    }*/

    .espace .form-control {
        margin-bottom: 0.1rem;
    }

    .login-body-right.espace form {
        padding: 2.3rem 2.2rem 3.5rem 2.2rem;
    }

    .logo {
        top: 6rem;
    }
    /* .rocket-animate img {
        width: 78%;
    }*/
    .rocket-animate img {
        width: 79%;
    }


    footer::before {
        height: 169px;
        background-position: 75% 0%;
        background-size: cover;
    }

    .logo-part {
        width: 19rem;
    }
    /*.inner-content {
        padding: 3rem 0 5rem 0;
    }*/


}

@media only screen and (max-width:1366px) {
    .logo-part {
        width: 17rem;
    }
    /* .logo {
        top: 10.8rem;
    } */
    /* .logo {
        top: 3.1rem;
    }*/
    /*
    .login-body-left {
        padding-bottom: 10rem;
    }*/

    /*.login-body-right form {
        width: 406px;
        padding: 1.9rem 2.2rem 5.3rem 2.2rem;
    }*/

    .login-body-left-section p {
        font-size: 1rem;
    }
    /*
    .login-body-right {
        margin-bottom: 3rem;
    }*/

    .login-body-right h3 {
        margin-bottom: 1.5rem;
    }

    .form-control {
        margin-bottom: 0rem;
    }

    .rocket-animate img {
        width: 65%;
    }

    .login-btn {
        padding: 0.59rem;
    }

    /* footer::after {
            height: 195px;
        }*/

    /*  @keyframes rocket-animation {
        0% {
            width: 0%;
        }



        100% {
            width: 62%;
        }
    }
*/
    .espace .form-group {
        margin-bottom: 1.1rem;
    }

    .login-body-right.espace h3 {
        margin-bottom: 0.7rem;
    }

    .login-body-right.espace form {
        padding: 1.5rem 2.2rem 3.5rem 2.2rem;
    }
    /*footer::before {
        bottom: -77px;
    }*/
    footer::before {
        height: 158px;
    }
}

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

    /* footer::before {
        height: 149px;
    }*/
}

@media only screen and (max-width:1152px) {
    .rocket-animate img {
        width: 51%;
    }

    .rocket-animate {
        bottom: 11rem;
    }
    /* 

        @keyframes rocket-animation {
            0% {
                width: 0%;
            }



            100% {
                width: 55%;
            }*/
}
/*
    footer::before {
        bottom: -87px;
    }
    footer::after {
        bottom: -111px;
    }
*/
}

@media only screen and (max-width:1024px) {
    /* .rocket-animate {
      
        bottom: 4rem;} */
    /* .rocket-animate {
            bottom: 5rem;
        }*/

    /*  footer::before {
        bottom: -68px;
    }*/
    /*.logo {
            top: 6.1rem;
        }*/
    /* footer::before {
        bottom: -82px;
    }*/

}

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



    .login-body {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        height: auto;
        margin-top: 5rem;
    }

    .login-body-left {
        padding-bottom: 0rem;
    }

    .login-body-right form {
        padding: 1.9rem 2.2rem 1.9rem 2.2rem;
    }

    /* .logo {
            position: relative;
            left: inherit;
            top: 1.8rem;
        }

        .logo-part {
            margin: 0 auto;
        }
*/
    .rocket-animate {
        display: none;
    }

    .login-container {
        height: auto;
        order: 1;
    }

    /* .main-container {
            overflow: scroll;
        }*/

    /*     footer::before {
            content: '';
            position: absolute;
            background-image: url(../images/cloud.png);
            left: 0;
            right: 0;
            height: 128px;
            bottom: 0;
            background-position: top left;
            animation-name: cloud-animation-two;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-fill-mode: both;
            animation-direction: normal;
            animation-timing-function: linear;
         
            background-size: cover;
        }*/

    .logo-part {
        width: 14rem;
    }

    .logo {
        top: 0.8rem;
        display: none;
    }

    .login-body {
        margin-top: 2rem;
    }

    .login-body-right.espace form {
        padding: 1.5rem 2.2rem 1.5rem 2.2rem;
    }

    .login-logo-wrap {
        flex-direction: column;
        height: auto;
    }

    .parent-login-div {
        order: 2;
        margin-top: 5rem;
    }

    .logo-mob {
        /*  display: flex;
        justify-content: center;*/
        padding: 1.8rem 0;
    }
    /* .logo {
    display:none;
    }*/


}

@media only screen and (max-width:576px) {
    /*  footer::after {
            background-position: 30% 7%;
        }*/
    /*  .main-container {
        height: auto;
    }*/
    .inner-content {
        height: auto;
    }

    .login-body-left {
        display: none;
    }

    .login-body-right h3 {
        margin-bottom: 0.6rem;
        font-size: 1.2rem;
    }

    footer::before {
        height: 61px;
    }

    footer p {
        margin: 0rem;
    }
}

@media only screen and (max-width:480px) {
    .login-body-left-section p {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width:430px) {
    .login-body-right form {
        width: 347px;
    }

    .login-body-right form {
        padding: 1.5rem 1.8rem 1.5rem 1.8rem;
    }
}

@media only screen and (max-width:320px) {
    .login-body-right form {
        padding: 1.1rem 1.5rem 1.1rem 1.5rem;
    }

    .login-body-right form {
        width: 299px;
    }

        .login-body-right form h3 {
            font-size: 1.1rem;
        }

    .captcha-group {
        gap: 0.3rem;
    }

    .login-body-right .form-control:disabled {
        font-size: 1.4rem;
    }

    .login-body-left-section p {
        font-size: 0.8rem;
    }
}


/* form-control */
.form-control:focus, .form-control:not(:placeholder-shown) {
    border-color: #316aa3 !important;
    outline: 0;
    padding: 0.4rem;
    box-shadow: none !important;
    transition: 0.5s ease-in;
}

/* for form-select*/
/*.form-select:focus, .form-select:not(:placeholder-shown) {
    border-color: #316aa3 !important;
    outline: 0;
    box-shadow: none !important;
    transition: 0.5s ease-in;
}
.icon-input-control .form-select {
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #e0e0e0;
    padding: 0.375rem 0.75rem 0.375rem 0rem;
}

    .icon-input-control .form-select:focus + label, .icon-input-control .form-select:not(:placeholder-shown) + label {
        top: -0.9rem;
    }
.form-select {
    margin-bottom: 1.5rem;
    height: var( --input-height);
    border-radius: var(--input-border-radius);
    outline: none;
    border: 1px solid #ddd;
    width: 100%;
    padding: 0.5rem 1.5rem;
    font-size: var(--body-font);
    color: rgb(0 0 0 / 57%);
    transition: .3s;
    background: var(--white);
}*/
.form-select {
    border-bottom: 2px solid #316aa3 !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

    .form-select:focus {
        box-shadow: none !important;
    }

.icon-input-control .new_label {
    position: absolute;
    top: -0.9rem;
    left: 0;
    font-size: 1rem;
    color: #141114;
    transition: 0.2s;
}