@font-face {
    font-family: 'Digital';
    src: url('../digital-7.eot'); /* IE9 Compat Modes */
    src: url('../digital-7.woff') format('woff'), /* Modern Browsers */ url('../digital-7.regular.ttf') format('truetype') /* Safari, Android, iOS */
}

body {
    font-family: 'Open Sans', 'Segoe UI', 'Droid Sans', Tahoma, Arial, sans-serif;
    color: #000 !important;
}  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
        main {
    height: 100vh;
    display: flex
;
    align-items: center;
      
        }
            main > div {
                width: 50%;
            }
        .left-img {
        height:100%;
        }
        .left-img img{
            height:100%;
            width:100%;
            object-fit:cover;
        }
        /*.right-data {
        display:flex;
        align-items:center;
        justify-content:center;
        flex-basis:400px;
        border:1px solid red;
        }*/
       .right-data {
    background: #fff;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 0;
}

.content {
width: 600px;
    background: #fff;
    display: flex
;
    flex-direction: column;
    align-items: center;
}
        .content h1 {
            margin-bottom: 3rem;
        }
.logo {

}

.data {
    width: 100%;
    margin-top: 0;
}

.login-title {
    font-weight: 600;
    font-size: 1.92rem;
    color: #232323;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 2rem;
}

.icon-input-control {
position: relative;
    margin-bottom: 2rem;
}
.icon-input-control .form-control {
    width: 100%;
    padding: 12px 14px 12px 31px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 1.13rem;
    transition: border .2s;
    background: #ffff;
}
.icon-input-control .form-control:focus {
    border-color: #eaac2a;
    background: #fff;
    box-shadow:none;
}
.captcha-inputs .form-control:focus {
    border-color: #eaac2a;
    background: #fff;
    box-shadow: none;
}
.icon-input-right {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #7B7B7B;
    font-size: 1.49rem;
    cursor: pointer;
}
.icon-input-right.pswd {
    top: 1.6rem !important;
}
    .icon-input-right i:hover{
    color:red;
    }
    .captcha-inputs {
        margin-bottom: 18px;
        display: flex;
        gap: 1rem;
    }
.captchBoxCustom {
    display: flex;
    align-items: center;
    width: 40%;
    background: #e1e1e18a;
    height: 50.7px;
    border-radius: 8px;
    margin-bottom: 0;
    margin-top: 0;
    border: 1px solid #ddd;
    padding: 12px 14px;
    font-size: 1.2rem;
}
.captchBoxCustom asp\:Label,
.captchBoxCustom label {
    font-size: 1.3rem;
    font-family: monospace;
    letter-spacing: 2px;
    background: #eee;
    padding: 7px 17px;
    border-radius: 6px;
    color: #222;
    user-select: none;
}
.captchBoxCustom a.icon-input-right em.fa-refresh {
    margin-left: 9px;
    color: #667;
    font-size: 1.08rem;
}
.captchaInputBox {
    border-radius: 8px;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 1.13rem;
    border: 1px solid #ddd;
    padding: 12px 14px 12px 31px;
    width: 60%;
}

.form-btns {
    margin: 2rem 0 0rem 0;
}

.login-btn {
    width: 100%;
    padding: 12px 0;
    border-radius: 8px;
    border: none;
    color: #fff;
    font-weight: 550;
    font-size: 1.09rem;
    background: linear-gradient(90deg, #eaac2a 70%, #f7ba46 100%);
}

.login-btn:hover {
    background: linear-gradient(90deg, #e28b00 70%, #f5ba29 100%);
}

.forgot-link {
    font-size: 0.97rem;
    color: #737373;
    text-align: right;
    text-decoration: none;
    margin-top: 3px;
    margin-bottom: 4px;
    align-self: flex-end;
    transition: color .2s;
}

.forgot-link:hover {
    color: #eaac2a;
}

.copyright {
    margin-top: 14px;
    font-size: 0.99rem;
    color: #aaa;
    text-align: center;
    width: 100%;
}
.form-btns.custom-flex {
display:flex;
align-items:center;
justify-content:space-between;
}
    .form-btns.custom-flex .login-btn {
        padding: 1rem;
        text-decoration: none;
    }
    /* Responsive adjust for mobile */
    @media (max-width: 1600px) {
        .content {
            width: 450px;
        }

        .logo {
            height: 60px;
        }

        .content h1 {
            margin-bottom: 2rem;
        }

        .login-title {
            font-size: 1.62rem;
            padding-bottom: 0.7rem;
            margin-bottom: 2rem;
        }

        .icon-input-control .form-control, .captchaInputBox, .captchBoxCustom {
            padding: 10px 14px 10px 26px;
            height: 49px;
        }

        .icon-input-control {
            margin-bottom: 1.6rem;
        }

        .captcha-inputs .icon-input-control {
            margin-bottom: 0;
        }

        .icon-input-right {
            font-size: 1.09rem;
        }
    }

    @media (max-width: 1366px) {
        .content {
            width: 400px;
        }

        .login-title {
            font-size: 1.52rem;
            padding-bottom: 0.9rem;
            margin-bottom: 1.8rem;
        }

        .icon-input-control {
            margin-bottom: 1.5rem;
        }

        .form-btns {
            margin: 1.6rem 0 0rem 0;
        }

        .icon-input-control .form-control, .captchaInputBox, .captchBoxCustom {
            padding: 10px 14px 12px 26px;
            height: 44px;
        }
    }

    @media (max-width: 768px) {
        .left-img {
            display: none;
        }

        main {
            justify-content: center;
        }

        .content {
            width: 550px;
            border-radius: 0.8rem;
            padding: 1.5rem 2.1rem;
            box-shadow: #8786863d 0px 2px 8px 0px;
        }
    }

    @media (max-width: 576px) {
        .content {
            width: 450px;
        }
    }

    @media (max-width: 430px) {
        .captcha-inputs {
            flex-direction: column;
        }

            .captchBoxCustom, .captcha-inputs input {
                width: 100%;
            }

        .content {
            width: 400px;
        }
    }

    @media (max-width: 375px) {
        .content {
            width: 310px;
        }
    }