#main-navbar-tools a.dropdown-toggle{text-decoration:none;color:#fff}.navbar .dropdown-submenu{position:relative}.navbar .dropdown-menu{margin:0;padding:0}.navbar .dropdown-menu a{font-size:.9em;padding:10px 15px;display:block;min-width:210px;text-align:left;border-radius:.25rem;min-height:44px}.navbar .dropdown-submenu a::after{transform:rotate(-90deg);position:absolute;right:16px;top:18px}.navbar .dropdown-submenu .dropdown-menu{top:0;left:100%}.card-header .btn{padding:2px 6px}.card-header h5{margin:0}.container>.card{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}@media screen and (min-width:768px){.navbar .dropdown:hover>.dropdown-menu{display:block}.navbar .dropdown-submenu:hover>.dropdown-menu{display:block}}.input-validation-error{border-color:#dc3545}.field-validation-error{font-size:.8em}.dataTables_scrollBody{min-height:248px}div.dataTables_wrapper div.dataTables_info{padding-top:11px;white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{padding-top:10px;margin-bottom:0}.rtl .dropdown-menu-right{right:auto;left:0}.rtl .dropdown-menu-right a{text-align:right}.rtl .navbar .dropdown-menu a{text-align:right}.rtl .navbar .dropdown-submenu .dropdown-menu{top:0;left:auto;right:100%}.rtl div.dataTables_wrapper div.dataTables_filter input{margin-left:auto;margin-right:.5em}.rtl div.dataTables_wrapper div.dataTables_filter{text-align:left}.rtl table.dataTable thead th,table.dataTable thead td,table.dataTable tfoot th,table.dataTable tfoot td{text-align:right}.brand-container{text-align:center;margin-top:8rem}.brand-logo{height:50px}.brand-text{color:#292d33;font-family:Lexend;font-size:30px;font-style:normal;font-weight:500;line-height:34px;margin-top:5px;margin-bottom:15px}@font-face {
    font-family: 'HK Grotesk';
    font-weight: 400;
    src: url('../font/HKGrotesk-Regular.woff2') format('woff');
}

@font-face {
    font-family: 'HK Grotesk';
    font-weight: 500;
    src: url('../font/HKGrotesk-Medium.woff2') format('woff');
}

@font-face {
    font-family: 'HK Grotesk';
    font-weight: 600;
    src: url('../font/HKGrotesk-SemiBold.woff2') format('woff');
}

@font-face {
    font-family: 'HK Grotesk';
    font-weight: 700;
    src: url('../font/HKGrotesk-Bold.woff2') format('woff');
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'HK Grotesk';
    font-weight: 400;
}

html {
    font-size: 10px;
}

body {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    color: #161616;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mainLayout {
    padding: 12px;
    height: 100vh;
    background-size: cover;
    width: 100%;
}

.mainLayoutGrid {
    display: flex;
    gap: 12px;
}

.mainLayout .bgIllustration {
    position: relative;
    height: calc(100vh - 24px);
    width: 50%;
    border-radius: 10px;
}

    .mainLayout .bgIllustration .logo {
        padding: 22px;
    }

    .mainLayout .bgIllustration .tagline {
        position: absolute;
        bottom: 126px;
        left: 43px;
        width: 400px;
    }

        .mainLayout .bgIllustration .tagline * {
            color: #FFFFFF;
            font-weight: 400;
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            font-size: 3.6rem;
            line-height: 4rem;
        }

    .mainLayout .bgIllustration .copyright {
        position: absolute;
        left: 15px;
        bottom: 15px;
    }

        .mainLayout .bgIllustration .copyright * {
            color: #FFFFFF;
            font-weight: 400;
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            font-size: 1.2rem;
            line-height: 1.4rem;
        }

.mainLayout .login {
    flex-grow: 1;
    width: 50%;
}

    .mainLayout .login .loginForm {
        width: 388px;
        margin: 0px auto 0 120px;
        height: calc(100vh - 24px - 78px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        /*align-items: center;*/
    }

        .mainLayout .login .loginForm .btnLink {
            color: rgba(56, 77, 214, 0.8);
            font-weight: 400;
        }

        .mainLayout .login .loginForm h1 {
            margin-bottom: 32px;
            color: #384DD6;
            font-weight: 400;
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            font-size: 3.6rem;
            line-height: 4rem;
        }

. /*mainLayout .login .loginForm .error {
    margin-bottom: 18px;
}*/
.mainLayout .login .loginForm .formError {
    border-left: 3px solid #ba2323;
    padding-left: 5px;
    line-height: 12px;
    color: #BA2323;
    font-weight: 400;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin-bottom: 18px;
}

.mainLayout .login .loginForm .dot {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: #969696;
    margin: 0 14px;
}

.mainLayout .login .needHelp {
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(90.44deg, rgba(255, 255, 255, 0.65) 39.11%, #FFFFFF 96.9%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .mainLayout .login .needHelp img {
        margin-right: 12px;
    }

    .mainLayout .login .needHelp span {
        color: #161616;
        font-weight: 400;
        display: flex;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        font-size: 1.4rem;
        line-height: 1.8rem;
    }

.mainLayout .formGroup {
    display: flex;
    justify-content: flex-start;
    align-items: left;
    flex-direction: column;
    position: relative;
    margin-bottom: 18px;
}

    .mainLayout .formGroup label {
        display: block;
        font-weight: 400;
        line-height: 2.2rem;
        margin-bottom: 0.4rem;
        font-size: 1.6rem;
        white-space: nowrap;
    }

    .mainLayout .formGroup p {
        display: block;
        font-weight: 400;
        line-height: 2.2rem;
        margin-bottom: 0.4rem;
        font-size: 1.6rem;
        text-align:justify;
        text-justify:inter-word;
        /*white-space: nowrap;*/
    }

    .mainLayout .formGroup input {
        background-color: #FFFFFF;
        border: 0.1rem solid #D7D7D7;
        border-radius: 0.6rem;
        padding: 1.1rem 1.2rem;
        font-weight: 400;
        font-size: 1.5rem;
        line-height: 1.6rem;
        -webkit-filter: drop-shadow(0rem 0.2rem 0.4rem rgba(207, 207, 207, 0.2));
        filter: drop-shadow(0rem 0.2rem 0.4rem rgba(207, 207, 207, 0.2));
        -webkit-transition: all 0.2s 0s ease;
        transition: all 0.2s 0s ease;
    }

        .mainLayout .formGroup input:hover {
            border: 0.1rem solid #071360;
            outline: none;
        }

.mainLayout .checkboxGroup {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 17px;
    min-width: 2rem;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .mainLayout .checkboxGroup label {
        display: block;
        font-weight: 400;
        line-height: 2.2rem;
        margin-bottom: 0.4rem;
        font-size: 1.6rem;
        white-space: nowrap;
        margin-left: 0.6rem;
        margin-bottom: 0;
        font-weight: 400;
    }

    .mainLayout .checkboxGroup input {
        width: 1px;
        height: 1px;
        -moz-appearance: initial;
    }



.mainLayout input[type='checkbox']::before {
    position: absolute;
    content: '';
    width: 1.8rem;
    height: 1.8rem;
    border: 0.1rem solid #D7D7D7;
    border-radius: 0.4rem;
    background-color: #FFFFFF;
    top: 9px;
    left: 9px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

.mainLayout input[type='checkbox']:checked::after {
    position: absolute;
    content: '\f88b';
    color: #FFFFFF;
    font-size: 1.8rem;
    background-color: #13A83D;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.4rem;
    font-family: 'Material Symbols Outlined';
    font-weight: 900;
    line-height: 1.9rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0px;
    top: 0px;
}


input[type='checkbox']:checked::before {
    border: 0.1rem solid #13A83D;
}



.mainLayout button[type='submit'] {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 2.2rem;
    position: relative;
    border-radius: 0.6rem;
    padding: 1rem 2rem;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    background: #7B53D1;
    color: #FFFFFF;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 1.5rem;
    border: none;
}

    .mainLayout button[type='submit'] > span {
        font-size: 2rem;
        padding-right: 0.4rem;
        font-weight: 300;
    }

    .mainLayout button[type='submit']:not(:disabled):hover {
        box-shadow: 0rem 0.4rem 0.6rem rgb(56 77 214 / 24%);
    }

.mainLayout .linksWrapper {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
}

    .mainLayout .linksWrapper .btnLink {
        font-weight: 500;
        font-size: 1.6rem;
        line-height: 2.2rem;
        position: relative;
        border-radius: 0.6rem;
        padding: 1rem 2rem;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
        color: #384DD6;
        -webkit-text-decoration: underline;
        text-decoration: underline;
        font-size: 1.4rem;
        line-height: 2rem;
        padding: 0;
        font-weight: 700;
        border: none;
        background: none;
        cursor: pointer;
    }

.alert-wrapper {
    position: absolute !important;
    top: 12px !important;
    z-index: 1 !important;
    right: 12px !important;
}

    .alert-wrapper .alert-danger {
        background: #FFE0E0 !important;
        color: #BA2323 !important;
        opacity: 1;
        border: none;
    }

        .alert-wrapper .alert-danger .btn-close {
            color: #BA2323 !important;
        }

.field-validation-error {
    border-left: 3px solid #ba2323 !important;
    padding-left: 5px !important;
    line-height: 12px !important;
    color: #BA2323 !important;
    font-weight: 400 !important;
    -webkit-box-pack: start !important;
    -webkit-justify-content: flex-start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    font-size: 1.4rem !important;
    line-height: 1.8rem !important;
    margin-top: 9px !important;
}

/* otp styling */

.otpWrapper {
    max-width: 484px;
    width: 100%;
    margin: auto auto;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-block: 42px;
    padding-inline: min(30vw, 3.2rem);
    background: #FFFFFF;
    box-shadow: 0px 2px 7px rgba(210, 210, 210, 0.28);
    border-radius: 6px;
}

    .otpWrapper h4 {
        color: #161616;
        font-weight: 400;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        font-size: 2.2rem;
        line-height: 2.5rem;
        margin-bottom: 8px;
    }

    .otpWrapper h6 {
        color: #595959;
        font-weight: 400;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        font-size: 1.6rem;
        line-height: 1.8rem;
    }

    .otpWrapper figure {
        height: 80px;
        width: 80px;
        margin-bottom: 24px;
    }

    .otpWrapper form .otpInputGrid {
        display: flex;
        gap: 7px;
        margin-top: 24px;
    }

    .otpWrapper form input {
        width: 42px !important;
        height: 42px;
        border-radius: 8px;
        background-color: #FFFFFF;
        border: 0.1rem solid #D7D7D7;
        border-radius: 0.6rem;
        padding: 1.1rem 1.2rem;
        font-weight: 400;
        font-size: 1.5rem;
        line-height: 1.6rem;
        -webkit-filter: drop-shadow(0rem 0.2rem 0.4rem rgba(207, 207, 207, 0.2));
        filter: drop-shadow(0rem 0.2rem 0.4rem rgba(207, 207, 207, 0.2));
        -webkit-transition: all 0.2s 0s ease;
        transition: all 0.2s 0s ease;
    }

        .otpWrapper form input:hover,
        .otpWrapper form input:focus {
            border: 0.1rem solid #071360;
            outline: none;
        }

    .otpWrapper form .resendBtn {
        color: #595959;
        font-weight: 400;
    }

.otpButtonWrapper {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: center;
}

    .otpButtonWrapper button {
        font-weight: 500;
        font-size: 1.4rem !important;
        line-height: 1.8rem !important;
        position: relative;
        border-radius: 0.6rem;
        padding: 1rem 2rem;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
        white-space: nowrap;
        font-size: 1.4rem;
        line-height: 1.6rem;
        padding: 0.8rem 1.6rem;
        border: 0.1rem solid transparent;
        min-width: 6.7rem;
        margin: 0 !important;
    }

        .otpButtonWrapper button.btnSecondary {
            background: #7B53D1;
            color: #FFFFFF;
        }

        .otpButtonWrapper button.btnGray {
            background: #F3f3f3;
            color: #161616;
        }

            .otpButtonWrapper button.btnGray:hover {
                box-shadow: none !important;
            }

.otpWrapper .resendWrapper {
    margin-top: 18px;
}

    .otpWrapper .resendWrapper > * {
        display: block;
        font-size: 14px;
        color: #595959;
    }

    .otpWrapper .resendWrapper a {
        margin-top: 5px;
    }

#otpModal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    width: 100vw;
    height: 100vh;
    background-color: RGBA(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}



@font-face {
    font-family: "Mont";
    font-weight: 500;
    src: url("../font/Mont-Book.otf") format("truetype");
}

@font-face {
    font-family: "Mont";
    font-weight: 600;
    src: url("../font/Mont-Regular.otf") format("truetype");
}

@font-face {
    font-family: "Mont";
    font-weight: 700;
    src: url("../font/Mont-SemiBold.otf") format("truetype");
}

*,
**::after,
**::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-family: "Mont";
    font-weight: 500;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
}

.login-wrapper {
    width: 386px;
    margin: 0 auto;
}

.login-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: #071360;
    text-align: center;
    margin-bottom: 14px;
}

.login-box {
    padding-top: 37px;
    border: 1px solid #cccccc;
    border-radius: 3px;
}

    .login-box .login-main {
        padding: 0 43px 22px 43px;
    }

    .login-box label {
        font-weight: 500;
        font-size: 15px;
        line-height: 19px;
        margin-bottom: 8px;
    }

    .login-box .form-control {
        font-weight: 500;
        font-size: 14px;
        line-height: 15px;
        color: #666666;
        padding: 9px 15px;
        background: #ffffff;
        border: 1px solid #a6a6a6;
        border-radius: 3px;
    }

        .login-box .form-control::placeholder {
            color: #cccccc;
        }

        .login-box .form-control:hover,
        .login-box .form-control:focus {
            box-shadow: none;
            outline: none;
            border-color: #071360;
        }

    .login-box a {
        font-weight: 600;
        font-size: 12px;
        line-height: 15px;
        color: #5bbcc9;
        text-decoration: none;
    }

        .login-box a:hover {
            color: #0d96a8;
            text-decoration: underline;
        }

    .login-box .form-check-label {
        font-weight: 500;
        font-size: 12px;
        line-height: 15px;
        color: #333333;
    }

    .login-box .button-wrapper {
        background: #f4f4f5;
        padding: 10px 0 22px 0;
        display: flex;
        justify-content: center;
    }

        .login-box .button-wrapper button {
            background: #071360;
            border: 1px solid #071360;
            color: #ffffff;
            border-radius: 3px;
            padding: 6.5px 29.5px;
            width: 100px;
            font-weight: 700;
            font-size: 12px;
            line-height: 15px;
        }

            .login-box .button-wrapper button:hover {
                background: transparent;
                color: #071360;
            }

    .login-box .password-container {
        position: relative;
    }
/*.icon {
        position: absolute;
        top: 44%;
        right: 4%
    }*/
.tenant-box a {
    background: #071360;
    border: 1px solid #071360;
    color: #ffffff !important;
    border-radius: 3px;
    padding: 6.5px 29.5px;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
}

    .tenant-box a:hover {
        background: transparent !important;
        color: #071360 !important;
    }

.tenant-box span {
    font-weight: 500;
    font-size: 15px;
    line-height: 19px;
    margin-bottom: 8px;
}

.modal-dialog .modal-header {
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: #071360;
    text-align: center;
    margin-bottom: 14px;
}

.modal-dialog .modal-body .form-label {
    font-weight: 500;
    font-size: 15px;
    line-height: 19px;
    margin-bottom: 8px;
}

.modal-dialog .modal-body input {
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    color: #666666;
    padding: 9px 15px;
    background: #ffffff;
    border: 1px solid #a6a6a6;
    border-radius: 3px;
}

    .modal-dialog .modal-body input::placeholder {
        color: #cccccc;
    }

    .modal-dialog .modal-body input:hover,
    .modal-dialog .modal-body input:focus {
        box-shadow: none;
        outline: none;
        border-color: #071360;
    }

.modal-dialog .modal-body .form-text {
    display: none;
}

.modal-dialog .modal-footer button {
    background: #071360;
    border: 1px solid #071360;
    color: #ffffff !important;
    border-radius: 3px;
    padding: 6.5px 29.5px;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
}

    .modal-dialog .modal-footer button:hover {
        background: transparent !important;
        color: #071360 !important;
    }

.swal2-container .swal2-actions button {
    background: #071360;
    border: 1px solid #071360;
    color: #ffffff !important;
    border-radius: 3px;
    padding: 6.5px 29.5px;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
}

.swal2-container .swal2-html-container {
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: #071360;
    text-align: center;
    margin-bottom: 14px;
}

@media (max-width: 512px) {
    .login-wrapper {
        width: 100%;
    }
}


@-webkit-keyframes fadein {
    from {
        right: 0;
        opacity: 0;
    }

    to {
        right: 90px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        right: 0;
        opacity: 0;
    }

    to {
        right: 90px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        right: 90px;
        opacity: 1;
    }

    to {
        right: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        right: 90px;
        opacity: 1;
    }

    to {
        right: 0;
        opacity: 0;
    }
}

@media all and (max-width: 567px) {
    .col {
        padding: 0;
    }

    .mainLayout .bgIllustration {
        display: none;
    }

    .mainLayout .login .loginForm {
        width: auto;
        margin: 0 10px;
        height: calc(100vh - 24px - 115px);
    }
}