﻿.login {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: #1B142C;
    height: 100vh;
}

    .login section {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    /* leftSection */
    .login .leftSection {
        width: 40%;
        padding: 74px 0px 110px;
    }

        .login .leftSection .loginLogo {
        }

            .login .leftSection .loginLogo img {
                width: 314px;
                height: 63px;
            }

        .login .leftSection .copyrights {
            text-align: center;
            color: #FFFFFF;
            font-size: 10px;
            font-weight: 300;
        }

            .login .leftSection .copyrights p {
                margin: 0px;
            }

                .login .leftSection .copyrights p:first-child {
                    margin-bottom: 20px;
                }

    /* rightSection */
    .login .rightSection {
        width: 60%;
        background: rgba(24, 77, 137, 0.54);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        padding: 160px 94px 230px;
    }

        .login .rightSection .title {
            color: #FAFAFA;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 105px;
        }

        .login .rightSection form {
            width: 100%;
        }

            .login .rightSection form .formGrp {
                width: 100%;
                margin-bottom: 32px;
            }

                .login .rightSection form .formGrp:last-child {
                    margin-bottom: 25px;
                }

                .login .rightSection form .formGrp label {
                    display: block;
                    color: #F5F5F5;
                    font-size: 11px;
                    font-weight: 300;
                    margin: 0px;
                }

[dir=rtl] .login .rightSection form .formGrp label{
    text-align: right !important;
}

[dir=ltr] .login .rightSection form .formGrp label {
    text-align: left !important;
}

.input-change-password-openIcon-login {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(../../images/UserProfile/openedEyeIcon.svg);
    position: absolute;
    z-index: 20000;
    bottom: 0;
    inset-inline-end: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

.input-change-password-closeIcon-login {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(../../images/UserProfile/closedEyeIcon.svg);
    position: absolute;
    z-index: 20000;
    bottom: 0;
    inset-inline-end: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

.login .rightSection form .formGrp label .required {
    color: #EC1B1B;
    font-size: 13px;
    font-weight: 800;
    padding-inline-start: 5px;
}

                .login .rightSection form .formGrp input {
                    display: block;
                    width: 100%;
                    height: 22px;
                    background: transparent;
                    border: none;
                    border-bottom: 1px solid #E9E9EC;
                    outline: none;
                    color: #E9E9EC;
                    font-size: 11px;
                    font-weight: 300;
                }

            .login .rightSection form .forgetPassword {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 80px;
            }

                /* Customize the label (the checkboxLabel) */
                .login .rightSection form .forgetPassword .checkboxLabel {
                    display: block;
                    position: relative;
                    padding-inline-start: 22px;
                    margin-bottom: 0px;
                    cursor: pointer;
                    font-size: 11px;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    color: #F5F5F5;
                }

                    /* Hide the browser's default checkbox */
                    .login .rightSection form .forgetPassword .checkboxLabel input {
                        position: absolute;
                        opacity: 0;
                        cursor: pointer;
                        height: 0;
                        width: 0;
                    }

                    /* Create a custom checkbox */
                    .login .rightSection form .forgetPassword .checkboxLabel .checkmark {
                        position: absolute;
                        top: 0;
                        inset-inline-start: 0;
                        height: 14px;
                        width: 14px;
                        background-color: transparent;
                        border: 1px solid #F5F5F5;
                        border-radius: 4px;
                        overflow: hidden;
                    }

                    /* On mouse-over, add a grey background color */
                    .login .rightSection form .forgetPassword .checkboxLabel:hover input ~ .checkmark {
                        background-color: #E9E9EC;
                    }

                    /* When the checkbox is checked, add a blue background */
                    .login .rightSection form .forgetPassword .checkboxLabel input:checked ~ .checkmark {
                        background-color: #2196F3;
                    }

                    /* Create the checkmark/indicator (hidden when not checked) */
                    .login .rightSection form .forgetPassword .checkboxLabel .checkmark:after {
                        content: "";
                        position: absolute;
                        display: none;
                    }

                    /* Show the checkmark when checked */
                    .login .rightSection form .forgetPassword .checkboxLabel input:checked ~ .checkmark:after {
                        display: block;
                    }

                    /* Style the checkmark/indicator */
                    .login .rightSection form .forgetPassword .checkboxLabel .checkmark:after {
                        inset-inline-start: 4px;
                        top: 1px;
                        width: 4px;
                        height: 9px;
                        border: solid white;
                        border-width: 0 3px 3px 0;
                        -webkit-transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        transform: rotate(45deg);
                    }

                .login .rightSection form .forgetPassword button {
                    margin: 0px;
                    padding: 0px;
                    border: none;
                    background: none;
                    font-size: 11px;
                    font-weight: 300;
                    color: #F5F5F5;
                }

            .login .rightSection form .submitBtn {
                width: 418px;
                height: 44px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: none;
                outline: none;
                background-color: #2EB969;
                border-radius: 17px;
                font-size: 13px;
                font-weight: 400;
                margin: auto;
                color: #FFFFFF;
            }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background: transparent !important;
}
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        /* transition: background-color 5000s ease-in-out 0s;
        -webkit-box-shadow: 0 0 0px 1000px white inset;*/
        -webkit-background-clip: text;
    }