:root {
    --bs-text-muted: #99A1B7;
    --bs-gray-100: #F9F9F9;
    --bs-gray-100-rgb: 249, 249, 249;
    --bs-gray-200: #F1F1F4;
    --bs-gray-200-rgb: 241, 241, 244;
    --bs-gray-300: #DBDFE9;
    --bs-gray-300-rgb: 219, 223, 233;
    --bs-gray-400: #C4CADA;
    --bs-gray-400-rgb: 196, 202, 218;
    --bs-gray-500: #99A1B7;
    --bs-gray-500-rgb: 153, 161, 183;
    --bs-gray-600: #78829D;
    --bs-gray-600-rgb: 120, 130, 157;
    --bs-gray-700: #4B5675;
    --bs-gray-700-rgb: 75, 86, 117;
    --bs-gray-800: #252F4A;
    --bs-gray-800-rgb: 37, 47, 74;
    --bs-gray-900: #071437;
    --bs-gray-900-rgb: 7, 20, 55;
    --bs-light: #F9F9F9;
    --bs-primary: #019ac6;
    --bs-secondary: #F1F1F4;
    --bs-success: #17C653;
    --bs-info: #7239EA;
    --bs-warning: #F6C000;
    --bs-danger: #F8285A;
    --bs-dark: #1E2129;
    --bs-primary-active: #2fc1d1;
    --bs-secondary-active: #C4CADA;
    --bs-light-active: #F1F1F4;
    --bs-success-active: #04B440;
    --bs-info-active: #5014D0;
    --bs-warning-active: #DEAD00;
    --bs-danger-active: #D81A48;
    --bs-dark-active: #111318;
    --bs-primary-light: #dff8ff;
    --bs-secondary-light: #F9F9F9;
    --bs-success-light: #DFFFEA;
    --bs-info-light: #F8F5FF;
    --bs-warning-light: #FFF8DD;
    --bs-danger-light: #FFEEF3;
    --bs-dark-light: #F9F9F9;
    --bs-light-light: #ffffff;
    --bs-primary-inverse: #ffffff;
    --bs-secondary-inverse: #252F4A;
    --bs-light-inverse: #252F4A;
    --bs-success-inverse: #ffffff;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark-inverse: #ffffff;
    --bs-primary-clarity: rgba(1, 154, 198, 0.2);
    --bs-secondary-clarity: rgba(249, 249, 249, 0.2);
    --bs-success-clarity: rgba(23, 198, 83, 0.2);
    --bs-info-clarity: rgba(114, 57, 234, 0.2);
    --bs-warning-clarity: rgba(246, 192, 0, 0.2);
    --bs-danger-clarity: rgba(248, 40, 90, 0.2);
    --bs-dark-clarity: rgba(30, 33, 41, 0.2);
    --bs-light-clarity: rgba(255, 255, 255, 0.2);
    --bs-light-rgb: 249, 249, 249;
    --bs-primary-rgb: 1, 154, 198;
    --bs-secondary-rgb: 241, 241, 244;
    --bs-success-rgb: 23, 198, 83;
    --bs-info-rgb: 114, 57, 234;
    --bs-warning-rgb: 246, 192, 0;
    --bs-danger-rgb: 248, 40, 90;
    --bs-dark-rgb: 30, 33, 41;
    --bs-text-white: #ffffff;
    --bs-text-primary: #019ac6;
    --bs-text-secondary: #F1F1F4;
    --bs-text-light: #F9F9F9;
    --bs-text-success: #17C653;
    --bs-text-info: #7239EA;
    --bs-text-warning: #F6C000;
    --bs-text-danger: #F8285A;
    --bs-text-dark: #1E2129;
    --bs-text-muted: #99A1B7;
    --bs-text-gray-100: #F9F9F9;
    --bs-text-gray-200: #F1F1F4;
    --bs-text-gray-300: #DBDFE9;
    --bs-text-gray-400: #C4CADA;
    --bs-text-gray-500: #99A1B7;
    --bs-text-gray-600: #78829D;
    --bs-text-gray-700: #4B5675;
    --bs-text-gray-800: #252F4A;
    --bs-text-gray-900: #071437;
    --bs-border-color: #F1F1F4;
    --bs-border-dashed-color: #DBDFE9;
    --bs-component-active-color: #ffffff;
    --bs-component-active-bg: #019ac6;
    --bs-component-hover-color: #019ac6;
    --bs-component-hover-bg: #F9F9F9;
    --bs-component-checked-color: #ffffff;
    --bs-component-checked-bg: #019ac6;
    --bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
    --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
    --bs-input-bg: var(--bs-body-bg);
    --bs-input-color: var(--bs-gray-700);
    --bs-input-solid-color: var(--bs-gray-700);
    --bs-input-solid-bg: var(--bs-gray-100);
    --bs-input-solid-bg-focus: var(--bs-gray-200);
    --bs-input-solid-placeholder-color: var(--bs-gray-500);
    --bs-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    --bs-root-card-border-color: #F1F1F4;
    --bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    --bs-table-striped-bg: rgba(var(--bs-gray-100-rgb), 0.75);
    --bs-table-loading-message-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --bs-code-bg: #f1f3f8;
    --bs-code-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08);
    --bs-code-border-color: transparent;
    --bs-code-color: #b93993;
    --bs-symbol-label-color: var(--bs-gray-800);
    --bs-symbol-label-bg: var(--bs-gray-100);
    --bs-symbol-border-color: rgba(var(--bs-body-bg), 0.5);
    --bs-bullet-bg-color: var(--bs-gray-400);
    --bs-scrolltop-opacity: 0;
    --bs-scrolltop-opacity-on: 0.3;
    --bs-scrolltop-opacity-hover: 1;
    --bs-scrolltop-box-shadow: var(--bs-box-shadow);
    --bs-scrolltop-bg-color: var(--bs-primary);
    --bs-scrolltop-bg-color-hover: var(--bs-primary);
    --bs-scrolltop-icon-color: var(--bs-primary-inverse);
    --bs-scrolltop-icon-color-hover: var(--bs-primary-inverse);
    --bs-drawer-box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.05);
    --bs-drawer-bg-color: #ffffff;
    --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.2);
    --bs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --bs-menu-dropdown-bg-color: var(--bs-body-bg);
    --bs-menu-heading-color: #99A1B7;
    --bs-menu-link-color-hover: #019ac6;
    --bs-menu-link-color-show: #019ac6;
    --bs-menu-link-color-here: #019ac6;
    --bs-menu-link-color-active: #019ac6;
    --bs-menu-link-bg-color-hover: #F9F9F9;
    --bs-menu-link-bg-color-show: #F9F9F9;
    --bs-menu-link-bg-color-here: #F9F9F9;
    --bs-menu-link-bg-color-active: #F9F9F9;
    --bs-scrollbar-color: #F1F1F4;
    --bs-scrollbar-hover-color: #DBDFE9;
    --bs-overlay-bg: rgba(0, 0, 0, 0.05);
    --bs-blockui-overlay-bg: rgba(0, 0, 0, 0.05);
    --bs-rating-color-default: #C4CADA;
    --bs-rating-color-active: #FFAD0F;
    --bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(30, 33, 41, 0.1);
    --bs-ribbon-label-bg: #019ac6;
    --bs-ribbon-label-border-color: #004b61;
    --bs-ribbon-clip-bg: #1E2129;
    --bs-engage-btn-bg: #ffffff;
    --bs-engage-btn-box-shadow: 0px 0px 22px #E0E0E0;
    --bs-engage-btn-border-color: #E8E8E8;
    --bs-engage-btn-color: #252F4A;
    --bs-engage-btn-icon-color: #78829D;
    --bs-engage-btn-color-active: #252F4A;
}

[data-bs-theme=dark] {
    --bs-text-muted: #636674;
    --bs-gray-100: #1B1C22;
    --bs-gray-100-rgb: 27, 28, 34;
    --bs-gray-200: #26272F;
    --bs-gray-200-rgb: 38, 39, 47;
    --bs-gray-300: #363843;
    --bs-gray-300-rgb: 54, 56, 67;
    --bs-gray-400: #464852;
    --bs-gray-400-rgb: 70, 72, 82;
    --bs-gray-500: #636674;
    --bs-gray-500-rgb: 99, 102, 116;
    --bs-gray-600: #808290;
    --bs-gray-600-rgb: 128, 130, 144;
    --bs-gray-700: #9A9CAE;
    --bs-gray-700-rgb: 154, 156, 174;
    --bs-gray-800: #B5B7C8;
    --bs-gray-800-rgb: 181, 183, 200;
    --bs-gray-900: #F5F5F5;
    --bs-gray-900-rgb: 245, 245, 245;
    --bs-light: #1B1C22;
    --bs-primary: #019ac6;
    --bs-secondary: #363843;
    --bs-success: #00A261;
    --bs-info: #883FFF;
    --bs-warning: #C59A00;
    --bs-danger: #E42855;
    --bs-dark: #272A34;
    --bs-primary-active: #2fc1d1;
    --bs-secondary-active: #464852;
    --bs-light-active: #1F212A;
    --bs-success-active: #01BF73;
    --bs-info-active: #9E63FF;
    --bs-warning-active: #D9AA00;
    --bs-danger-active: #FF3767;
    --bs-dark-active: #2D2F39;
    --bs-primary-light: #152d34;
    --bs-secondary-light: #363843;
    --bs-success-light: #1F212A;
    --bs-info-light: #272134;
    --bs-warning-light: #242320;
    --bs-danger-light: #302024;
    --bs-dark-light: #1E2027;
    --bs-light-light: #1F212A;
    --bs-primary-inverse: #ffffff;
    --bs-secondary-inverse: #ffffff;
    --bs-light-inverse: #808290;
    --bs-success-inverse: #ffffff;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark-inverse: #ffffff;
    --bs-primary-clarity: rgba(1, 154, 198, 0.2);
    --bs-secondary-clarity: rgba(54, 56, 67, 0.2);
    --bs-success-clarity: rgba(0, 162, 97, 0.2);
    --bs-info-clarity: rgba(136, 63, 255, 0.2);
    --bs-warning-clarity: rgba(197, 154, 0, 0.2);
    --bs-danger-clarity: rgba(228, 40, 85, 0.2);
    --bs-dark-clarity: rgba(39, 42, 52, 0.2);
    --bs-light-clarity: rgba(31, 33, 42, 0.2);
    --bs-light-rgb: 27, 28, 34;
    --bs-primary-rgb: 1, 154, 198;
    --bs-secondary-rgb: 54, 56, 67;
    --bs-success-rgb: 0, 162, 97;
    --bs-info-rgb: 136, 63, 255;
    --bs-warning-rgb: 197, 154, 0;
    --bs-danger-rgb: 228, 40, 85;
    --bs-dark-rgb: 39, 42, 52;
    --bs-text-white: #ffffff;
    --bs-text-primary: #019ac6;
    --bs-text-secondary: #363843;
    --bs-text-light: #1B1C22;
    --bs-text-success: #00A261;
    --bs-text-info: #883FFF;
    --bs-text-warning: #C59A00;
    --bs-text-danger: #E42855;
    --bs-text-dark: #272A34;
    --bs-text-muted: #636674;
    --bs-text-gray-100: #1B1C22;
    --bs-text-gray-200: #26272F;
    --bs-text-gray-300: #363843;
    --bs-text-gray-400: #464852;
    --bs-text-gray-500: #636674;
    --bs-text-gray-600: #808290;
    --bs-text-gray-700: #9A9CAE;
    --bs-text-gray-800: #B5B7C8;
    --bs-text-gray-900: #F5F5F5;
    --bs-border-color: #26272F;
    --bs-border-dashed-color: #363843;
    --bs-component-active-color: #ffffff;
    --bs-component-active-bg: #019ac6;
    --bs-component-hover-color: #019ac6;
    --bs-component-hover-bg: #1B1C22;
    --bs-component-checked-color: #ffffff;
    --bs-component-checked-bg: #019ac6;
    --bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
    --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
    --bs-input-color: var(--bs-gray-700);
    --bs-input-bg: var(--bs-body-bg);
    --bs-input-solid-color: var(--bs-gray-700);
    --bs-input-solid-bg: var(--bs-gray-100);
    --bs-input-solid-bg-focus: var(--bs-gray-200);
    --bs-input-solid-placeholder-color: var(--bs-gray-500);
    --bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    --bs-root-card-box-shadow: none;
    --bs-root-card-border-color: #1E2027;
    --bs-table-striped-bg: rgba(27, 28, 34, 0.75);
    --bs-table-loading-message-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --bs-dropdown-bg: #1C1D22;
    --bs-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --bs-code-bg: #2b2b40;
    --bs-code-shadow: rgba(0, 0, 0, 0.08) 0px 3px 9px 0px;
    --bs-code-border-color: transparent;
    --bs-code-color: #b93993;
    --bs-symbol-label-color: #B5B7C8;
    --bs-symbol-label-bg: #1B1C22;
    --bs-symbol-border-color: rgba(255, 255, 255, 0.5);
    --bs-bullet-bg-color: #464852;
    --bs-scrolltop-opacity: 0;
    --bs-scrolltop-opacity-on: 0.3;
    --bs-scrolltop-opacity-hover: 1;
    --bs-scrolltop-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --bs-scrolltop-bg-color: #019ac6;
    --bs-scrolltop-bg-color-hover: #019ac6;
    --bs-scrolltop-icon-color: #ffffff;
    --bs-scrolltop-icon-color-hover: #ffffff;
    --bs-drawer-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    --bs-drawer-bg-color: #1C1D22;
    --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.4);
    --bs-menu-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --bs-menu-dropdown-bg-color: #1C1D22;
    --bs-menu-heading-color: #636674;
    --bs-menu-link-color-hover: #019ac6;
    --bs-menu-link-color-show: #019ac6;
    --bs-menu-link-color-here: #019ac6;
    --bs-menu-link-color-active: #019ac6;
    --bs-menu-link-bg-color-hover: #1B1C22;
    --bs-menu-link-bg-color-show: #1B1C22;
    --bs-menu-link-bg-color-here: #1B1C22;
    --bs-menu-link-bg-color-active: #1B1C22;
    --bs-scrollbar-color: #26272F;
    --bs-scrollbar-hover-color: #363843;
    --bs-overlay-bg: rgba(255, 255, 255, 0.05);
    --bs-blockui-overlay-bg: rgba(255, 255, 255, 0.05);
    --bs-rating-color-default: #464852;
    --bs-rating-color-active: #FFAD0F;
    --bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(255, 255, 255, 0.1);
    --bs-ribbon-label-bg: #019ac6;
    --bs-ribbon-label-border-color: #004b61;
    --bs-ribbon-clip-bg: #F9F9F9;
    --bs-engage-btn-bg: #26272F;
    --bs-engage-btn-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --bs-engage-btn-border-color: #26272F;
    --bs-engage-btn-color: #B5B7C8;
    --bs-engage-btn-icon-color: #808290;
    --bs-engage-btn-color-active: #B5B7C8;
}

body {
    margin: 0;
    font-family: "Gilroy", "IBM Plex Sans", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #001737;
    background: transparent;
}


.content-logo {
    font-weight: 400;
    line-height: 1.25;
    color: #001737 !important;
    font-size: 30px;
}

.content-logo span:nth-child(1) {
    color: #001737 !important;
}

.content-logo span:nth-child(2) {
    color: #0168fa;
    font-weight: 500;
    font-size: 35px;
    text-transform: uppercase;
    position: relative;
    left: -7px;
    top: 4px;
}

.content-auth {
    min-height: calc(100vh - 106px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-auth > .container {
    padding: 0;
}

.hero-area .container-content {
    display: table;
    width: 100%; /* optionally set width */
    height: 100vh; /* adjust to your needs */
}

.hero-area .content {
    display: table-cell;
    vertical-align: middle;
}

.content-auth > .container:first-child {
    flex: 1;
}

.content-auth-alt {
    min-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .content-auth-alt .container {
        padding: 0;
    }



.sign-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    justify-content: inherit !important;
    align-items: center;
    width:100%;
    padding:40px 50px;
}


.sign-wrapper .form-group label {
    display: block;
    margin-bottom: 5px;
}


.hero-area::before {
    content: "";
    top: 0;
    left: 0;
    opacity: 0.85;
    right: 0;
    bottom: 0;
    z-index: -1;
    position: absolute;
    background-image: url(/img/signin-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.rtl .hero-area::before {
    content: "";
    top: 0;
    left: 0;
    opacity: 0.85;
    right: 0;
    bottom: 0;
    z-index: -1;
    position: absolute;
    background-image: url(/img/signin-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    transform: scaleX(-1);
}

.hero-area {
    height: 98vh;
    margin: auto;
    
}

.rtl .hero-area {
    height: 98vh;
    margin: auto;
    
}

.hero-area-left {
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}

.btn-brand-02 {
    color: var(--bs-primary-inverse);
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    font-size: 16px;
    border-radius: 10px;
}

.btn-brand-02:hover, .btn-brand-02:focus {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: #fff !important;
}

#btnSignIn-loader {
    position: absolute;
    top: 40%;
    z-index: 100;
    background: #fff;
    padding: 20px;
    border-radius: 50%;
}


.sign-wrapper .form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.sign-wrapper .form-control {
    border: 0px;
    background-color: #efefef;
}



@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {

    .hero-area {
        overflow: hidden;
        height: calc(100vh - 100px);
    }

    .hero-area .container-content {
        height: calc(100vh - 150px);
    }

    .hero-area-right::before {
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        position: absolute;
        background-color: rgb(0 0 0 / 40%) !important;
    }

    .hero-area-right {
        z-index: 1;
        position: relative;
        background-image: url(/img/ded.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .sign-wrapper .form-group label {
        color:#fff;
    }

    .sign-wrapper  {
        color: #fff;
    }

    /*.btn-brand-02:hover, .btn-brand-02:focus {
        background-color: transparent;
        border-color: #fff;
        color: #fff;
    }*/

    .sign-wrapper {
        padding: 0px 0px;
    }

    .nav-line .nav-item + .nav-item {
        margin-left: 0px;
    }

    .form-control-otp {
        padding: 10px 0px !important;
    }
}

@media (max-width: 1139px) {
    .content-auth > .container {
        max-width: none;
        padding: 0 20px;
    }

    .content-auth-alt .container {
        max-width: none;
    }
}

@media only screen and (max-width: 768px) 
{
    .hero-area-right {
        z-index:unset;
        position: relative;
        background-image:none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-color:#fff;
    }

}

.spinner-border-sm {
    width: 4.0rem;
    height: 4.0rem;
    border-width: 0.15em;
    color: var(--bs-primary);
}

.error {
    color: red !important;
    margin-bottom: 0px !important;
}


.form-control {
    height: unset;
}

select.form-control {
    padding: 0.32rem 0.60rem;
}

.sign-wrapper .form-group label {
    color: #333;
}

.sign-wrapper {
    color: #333;
    min-height: 350px;
    background-color: #fff;
    border-radius: 20px;
}

#page-loader {
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: 30%;
    z-index: 100;
}


.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

    .ribbon span {
        font-size: 10px;
        font-weight: bold;
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
        line-height: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        width: 100px;
        display: block;
        background: #79A70A;
        background: linear-gradient(#B6BAC9 0%, #808080 100%);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 19px;
        right: -21px;
    }

        .ribbon span::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid #808080;
            border-right: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #808080;
        }

        .ribbon span::after {
            content: "";
            position: absolute;
            right: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid transparent;
            border-right: 3px solid #808080;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #808080;
        }


.alert-danger {
    color: #721c24 !important;
    background-color: #fff !important;
    border-color: #f5c6cb !important;
    border-left: solid 0px #dc3545 !important;
    box-shadow: unset;
}

.alert-success {
    color: #168a06;
    background-color: transparent;
    box-shadow: unset;
    border-left: solid 0px #6ba26d !important;
    border-color: rgb(26 108 225 / 10%);
}

#tabs-signin ul li {
    text-align: center;
    width: 50%;
}

#tabs-signin .nav-line .nav-item + .nav-item {
    margin-left: 0px;
}