@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700,800|Lato:300,400,700,700i');
  
@font-face {
    font-family: 'latosemibold';
    src: url('fonts/lato-semibold-webfont.woff2') format('woff2'),
         url('fonts/lato-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}  
@font-face {
    font-family: 'latosemibold';
    src: url('fonts/lato-semibold-webfont.woff2') format('woff2'),
         url('fonts/lato-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'latomedium';
    src: url('fonts/lato-medium.woff2') format('woff2'),
         url('fonts/lato-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}  
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('fonts/glyphicons-halflings-regular.eot');
  src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('fonts/glyphicons-halflings-regular.woff') format('woff'), url('fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}


/*body {
    background: url(IMAGES/illustration-construction-site.jpg) no-repeat 0 0 / cover;
    background-attachment: fixed;
}*/

body {
    margin: 0px !important;
}


.login-page-inner {
    /*margin-top:150px;*/
    /*margin-top: 100px;*/
    color: #fff;
}

.login-pages {
    /*background-color: rgba(0, 0, 0, 0.7);*/
    width: 90%;
    max-width: 490px;
    margin: 6% auto; /* centers horizontally and gives vertical spacing */
    padding: 1.5rem !important;
    /*border-radius: 25px;*/
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .login-pages {
        margin-top: 5%;
    }
}


.selc{width:60%;height:25px;}
.btnW {
    width: 100% !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px !important;
    padding: 0.5rem 0.85rem;
    border: 2px solid #285e7d !important;
    background-color: #285e7d !important;
    color: white !important;
    cursor: pointer;
}

    .btnW:hover {
        background-color: #1f4c65; /* Darker shade of #285e7d */
    }

.input-group-addon {
color:rgba(0, 0, 0, 0.7);}



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

    .login-pages {
    width:100% !important; 
    padding:20px;

    }


}

@media only screen and (min-width:481px) and (max-width:768px) {
    .login-pages {
    width:60% !important; 
    padding:20px;

    }

}

.form-group {
    margin-bottom: 0.5rem !important;
}

.text_style {
    margin-top: 0.5rem !important;
    color: #6b7280 !important;
    margin-bottom: 1rem !important;
    text-align: center;
}
.checkbox {
    margin-bottom: 0.5rem !important;
    display: flex;
    justify-content: space-between;
}

.aec_style {
    /*color: white;*/
    text-decoration: none !important;
    font-size: 26px !important;
    color: black !important;
}

.form-control {
    /*height: 45px !important;
    font-size: 17px !important;
    width: 100% !important;*/
    /*padding: 14px 10px !important;*/
    /*border-radius: 10px !important;
    border: 1px solid #757575 !important;*/
    color: rgb(17, 24, 39);
    background-color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    height: 38px;
    border-color: rgb(229, 231, 235);
    border-radius: 5px;
    padding: 0.5rem 0.625rem;
    transition: 0.5s;
    width: 100% !important;
}

    .form-control:focus {
        border-color: rgb(229, 231, 235) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .password-wrapper {
        position: relative;
    }

    .password-wrapper input {
        padding-right: 40px; /* Leave space for icon */
    }

    .password-wrapper .toggle-password {
        position: absolute;
        top: 50%;
        right: 2%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #93a2b8 !important;
    }


.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    cursor: pointer;
    color: #6b7280 !important;
}

    .custom-checkbox input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #007bff; /* Use your primary color */
    }

.forgot-password-style {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    cursor: pointer;
    color: blue !important;
}
/*html, body {
    margin: 0;
    padding: 0;
    height: auto;
    overflow-y: auto;*/ /*Enables vertical scroll*/
/*}*/
/* Full page scroll customization (WebKit browsers) */
::-webkit-scrollbar {
    width: 5px !important;
}

::-webkit-scrollbar-track {
    background: #333a40 !important;
}

::-webkit-scrollbar-thumb {
    background-color: #e8e9eb !important;
    /*border-radius: 3px !important;*/
}

::-webkit-scrollbar-button {
    display: none !important;
}

input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
}

/* For disabled input button */
input.btnW:disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    border-color: #757575 !important;
    cursor: auto;
}



.split-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

.left-side {
    /*flex: 1;*/
    width: 60% !important;
    background: url('IMAGES/illustration-construction-site.jpg') no-repeat center center;
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.right-side {
    /*flex: 1;*/
    display: flex;
    align-items: center;
    justify-content: center;
      padding: 40px;
    width: 40% !important;
    margin-left: 55%;
    height: 100vh;
    /*overflow-y: auto;*/
    z-index: 2;
    position: relative;
}

/* Makes login form narrower */
.login-pages {
    width: 100%;
    max-width: 450px;
}

input.form-control,
select.form-control {
    height: 38px;
    font-size: 14px;
    font-weight: 400;
    color: rgb(17, 24, 39);
    background-color: #fff;
    border: 1px solid rgb(229, 231, 235);
    border-radius: 5px;
    padding: 0.5rem 0.625rem;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.6;
    transition: 0.5s;
    appearance: none; /* Remove default arrow on some browsers */
}

.login-page-title {
    margin-bottom: 3rem !important;
    text-align: center;
}

.signin-style {
    margin-bottom: .5rem !important;
    text-align: center;
    color: black !important;
}

@media (max-width: 991px) {
    .split-container {
        flex-direction: column;
    }

    .left-side {
        position: relative;
        width: 100%;
        height: 40vh;
        background-attachment: scroll;
    }

    .right-side {
        margin-left: 0;
        width: 100% !important;
        height: auto;
        padding: 20px;
    }
}