﻿.login .login-header-section .container {
    max-width: 100% !important;
}

.login-header {
    background: linear-gradient(to right, #000001 0%, #071a28 41%, #0e3552 100%);
    padding: 15px 0;
}

    .login-header img {
        width: 100%;
        height: auto;
        max-width: 345px;
    }

.login-section {
    background: linear-gradient(to right, #117b3c 10%, #59b246 81%, #59b246 100%);
    padding: 100px;
    align-items: center;
    min-height: calc(100vh - 290px);
    display: flex;
}

.login-img {
    text-align: center;
}

    .login-img img {
        max-width: 600px;
        margin: auto;
    }

.login-form-sec {
    max-width: 410px;
    margin: auto;
    background: white;
    padding: 65px;
}

.login-title h1 {
    font-size: 22px;
    text-align: center;
    color: #24984E;
    font-weight: 600;
    margin-bottom: 40px;
}

.email-input {
    position: relative;
}

    .email-input input:first-of-type {
        margin-bottom: 20px;
    }

.login-form-sec input {
    border-radius: 0 !important;
    Padding: 8px 12px;
    Height: 40px;
    position: relative;
    color: #58595A;
    outline: 1px solid #fff;
    padding-left: 50px;
}

.email-input img {
    position: absolute;
    left: 0;
    width: 25px;
    z-index: 99;
    top: 15%;
    left: 3%;
}

.form-check input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.login-section .form-check-label {
    margin-bottom: 0;
    color: rgb(102, 102, 102);
    font-size: 14px;
    cursor: pointer;
}

.form-check input:checked + label:before {
    background: #24984e;
    border: 1px solid #24984e;
}

.form-check label:before {
    content: '';
    -webkit-appearance: none;
    background-color: white;
    border: 1px solid #ccc;
    padding: 7px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    transform: translateY(-2px);
}

.login-section .form-check-label {
    margin-bottom: 0;
    color: rgb(102, 102, 102);
    font-size: 14px;
    cursor: pointer;
    position: relative;
}

.form-check input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 12px;
    border: 1px solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate( 45deg );
}

.login-check.form-check {
    padding-left: initial;
}

.forgot-pass {
    text-decoration: underline;
    color: rgb(102, 102, 102);
    font-size: 14px;
    font-style: italic;
}

    .forgot-pass:hover {
        text-decoration: underline;
        cursor: pointer;
        color: #24984E;
    }

.login .common-footer {
    margin-top: 0;
}


@media only screen and (max-width: 991px) {
    
    .login-section {
        min-height: calc(65vh);
    }

    .login-form-sec {
        max-width: 600px;
        padding: 45px;
    }
    .login-img {
        display: none;
    }
   
}

@media only screen and (min-width: 991px) and (max-width: 1440px) {
    .login-img img {
        max-width: 100%;
    }

    .login-form-sec {
        max-width: 100%;
        padding: 30px;
    }
}

@media (min-width: 1600px) {
    .login-form-sec {
        max-width: 500px;
    }
}
@media only screen and (max-width: 575px) {
    .login-section {
        padding: 0px;
    }
    .login-header img {
        max-width: 290px;
    }
}
@media only screen and (max-width: 425px) {
    .login-form-sec {
        padding: 20px;
    }

    .login-title h1 {
        margin-bottom: 22px;
    }

    .button-without-icon {
        margin-top: 0px;
    }
}
