* {
        box-sizing: border-box;
        --main-color: #192f72;
        --main-color-rgb: 25, 47, 114;
        --second-color: #f4713d;
        --second-color-rgb: 244, 113, 61;
}
    

.main-login {
        display: flex;
        height: 100vh;
        --blue-color: #4660D7;
        --orange-color: #FF5815;
}

form {
        flex: 1;
}

.main-login .background {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #F6F8FE;
}


.main-login .background .circle {
        border-radius: 50%;
        position: absolute;
        display: inline-block;
}


.main-login .background .circle.orange {
        filter: blur(70px);
        opacity: .35;
        background: var(--orange-color);
}

.main-login .background .circle.blue {
        background: var(--blue-color);
        filter: blur(70px);
        opacity: .35;
}

.main-login .background .circle.white {
        background: radial-gradient(circle, #FFFFFF4F, #D4D4EA4F);
        opacity: .32;
        border: 1px solid #fff;

}

.main-login .background .circle.orange.bottom-right {
        width: 200px;
        height: 200px;
        right: 35%;
        bottom: 0;
        transform: translate(30%, 30%);
}

.main-login .background .circle.orange.top-left {
        width: 317px;
        height: 317px;
        left: -50px;
        top: 0;
        transform: translate(-30%) rotate(17deg);
}
.main-login .background .circle.orange.right-top {
        width: 317px;
        height: 317px;
        right: 0px;
        top: 0;
        transform: translate(30%) rotate(17deg);
}


.main-login .background .circle.blue.bottom-left {
        width: 504.05px;
        height: 504.05px;
        left: 0;
        bottom: 0;
        transform: translate(-40%, 60%) rotate(17deg);
        opacity: .65;
}

.main-login .background .circle.blue.top-right {
        width: 948.31px;
        height: 948.31px;
        left: 20%;
        top: 0;
        transform: translateY(-90%) rotate(17deg);
        opacity: .65;
}

.main-login .background .circle.white.bottom-left {
        width: 323px;
        height: 323px;
        left: 0;
        bottom: 0;
        transform: translate(-50%, 50%);
}

.main-login .background .circle.white.top-left {
        width: 213px;
        height: 213px;
        left: 0;
        top: 0;
        transform: translate(-10%, -25%);
}
.main-login .background .circle.white.right-top {
        width: 213px;
        height: 213px;
        right: 0;
        top: 0;
        transform: translate(10%, -25%);
}

.main-login .side-pic {
        position: fixed;
        right: 0;
        height: 100%;
        width: 35%;
        overflow: hidden;
        border-top-left-radius: 52px;
        z-index: 9;
}

.main-login .side-pic::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #111623;
        opacity: .52;
        mix-blend-mode: multiply;
        z-index: -1;
}

.main-login .side-pic .login-pic {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
}

.main-login .side-pic .side-content {
        width: 100%;
        height: 100%;
        background-color: #efeae7;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        padding: 20px;
}

.main-login .side-pic .side-content img {
        width: 300px;
        max-width: 100%;
}

.main-login .side-pic .side-content .msg {
        margin-bottom: 7rem;
        font-weight: 500;
        font-size: 22px;
        color: #002777;
        line-height: normal;
        text-align: center;
}




/* main content */
.main-login .main-side {
        position: relative;
}

@media (max-width: 950px) {
        .main-login .side-pic {
                display: none;
        }

        .main-login .main-side {
                margin-inline-end: 0;
        }

        .main-login .background .circle.orange.bottom-right {
                right: 0;
        }
}
.main-login .main-side::before {
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #F6F8FE;
}



/* form */
.main-login .main-side .main-form {
        display: flex;
        height: 100%;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
        padding: 20px;
}

.main-login .main-side .main-form .form_title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 50px;
}

.main-login .main-side .main-form .form_title .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--second-color);
        width: 40px;
        height: 40px;
        border-radius: 12px;
        padding: 8px;
}

.main-login .main-side .main-form .form_title .icon img {
        width: 100%;
}

.main-login .main-side .main-form .form_title .title {
        font-size: 25px;
        line-height: normal;
        color: #214393;
        font-weight: 600;
}

.main-login .main-side .main-form .field {
        max-width: 400px;
        width: 100%;
        height: 50px;
        min-height: 50px;
        border-radius: 13px;
        box-shadow: none;
        padding: 10px 20px;
        background: #fff;
        display: flex;
        align-items: center;
        gap: 15px;
        box-shadow: 0 4.24px 15.26px 0 rgba(0, 0, 0, 0.071);
}

.main-login .main-side .main-form .field .icon {
        display: flex;
        align-items: center;
        justify-content: center;
}

.main-login .main-side .main-form .field .main-input {
        flex: 1;
        outline: none;
        border: none;
        background: transparent;
        padding: 0;
        font-weight: 500;
        color: #214393;
        font-size: 17px;
        line-height: 20px;
}

.main-login .main-side .main-form .field .main-input::placeholder {
        font-weight: 500;
        color: #D7D7DA;
        font-size: 17px;
        line-height: 20px;
}

.submit-btn{
        display: inline-block;
        max-width: 400px;
        width: 100%;
        height: 50px;
        min-height: 50px;
        padding: 12px 50px;
        background: linear-gradient(45deg, #FF7E22, #FF7E22);
        color: white;
        border: none;
        border-radius: 17px;
        cursor: pointer;
        transition: 1s ease;
        font-weight: 500;
        box-shadow: 0 8.48px 22.26px 0 #FFE3CF;
        text-decoration: none;
        text-align: center;
}
.submit a{
        text-decoration: none;
        color: white;
}
.main-login .main-side .main-form .submit-btn:hover {
        color: #fff !important;
        background: linear-gradient(45deg, #192f72, #355aca);
        box-shadow: 0 8.48px 22.26px 0 #96b0ff;
}

.main-login .main-side .main-form .link {
        font-weight: 600;
        color: var(--main-color);
        font-size: 17px;
        line-height: 20px;
        text-decoration: none;
}
.flex_login {
        display: flex;
        gap: 30px;
        justify-content: normal;
    }
.image_login{
        width: auto;
        border-radius: 35px;
    }

.info_login h6{
        color: #ccc;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 11px;
        margin-top: 5px;
        text-align: left;
}
.info_login h5{
        color: #214393;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 18px;
        margin-top: 5px;
        text-align: left;
}
.main_edit {
        width: 16px;
        height: 16px;
        text-align: right;
        float: right;
        position: RELATIVE;
        right: -70%;
}
.pd-50{
        padding-top: 50px !important;
    padding-bottom: 50px !important;
}