:root {
    /*Colors definition*/
    --color-brand-primary: #0961c7;
    --color-brand-secondary: #074793;
    --color-red: #D7534E;
    --color-green: #168908;
    --color-green-rgba: 22, 137, 8;
    --color-program: #EC4E0A;
    --color-warning: #FF8A08;
    --color-black: #010714;
    --color-gunmetal: #2D323C;
    --color-rich-black: #181e29;
    --color-charcoal: #3e495e;
    --color-paynes-gray: #54617a;
    --color-denim: #7c8ba8;
    --color-powder-blue: #a5b4d1;
    --color-davys-gray: #51565e;
    --color-dim-gray: #67696f;
    --color-gray: #81838a;
    --color-french-gray: #b1b2b8;
    --color-silver: #DBDBDB;
    --color-anti-flash-white: #f2f2f3;
    --color-white: #fff;
    --Interface-Status-Green-rgba: var(--color-green-rgba);
    --Interface-Status-Green: var(--color-green);
    --Brand_Color: var(--color-brand-primary);
    --Interface-Status-Red: #C5322D;    
}

[data-theme="light"] {
    --TX_Primary: var(--color-black);
    --TX-Secondary: var(--color-dim-gray);
    --TX-Disabled: var(--color-french-gray);
    --Icon-Primary: var(--color-davys-gray);
    --Icon-Secondary: var(--color-french-gray);
    --Icon-Disabled: var(--color-french-gray);
    --Str-General: var(--color-silver);
    --Bg-Button-Ghost: var(--color-anti-flash-white);
    --Str-Button-Ghost: var(--color-french-gray);
    --Str-Form-Inputs-Checkbox: var(--color-french-gray);
    --BG-Toogle: var(--color-silver);
    --BG-Header-left-menu: var(--color-white);
    --BG-table-pagination: var(--color-white);
    --BG_Filter: var(--color-white);
    --BG-Drop-Down: var(--color-white);
    --BG-Interface: var(--color-anti-flash-white);
    --BG-Pop-UP: var(--color-white);
    --BG-Pop-UP_Footer: var(--color-anti-flash-white);
    --BG-Scroll-Grey: var(--color-silver);
    --BG-Scroll-Black-Line: var(--color-charcoal);
    --BG-Tooltip: var(--color-white);
    --BG-Login-Page: var(--color-anti-flash-white);
    --BG-Error-Message: var(--color-white);
}

[data-theme="dark"] {
    --TX_Primary: var(--color-powder-blue);
    --TX-Secondary: var(--color-paynes-gray);
    --TX-Disabled: var(--color-paynes-gray);
    --Icon-Primary: var(--color-denim);
    --Icon-Secondary: var(--color-paynes-gray);
    --Icon-Disabled: var(--color-paynes-gray);
    --Str-General: var(--color-charcoal);
    --Bg-Button-Ghost: var(--color-gunmetal);
    --Str-Button-Ghost: var(--color-charcoal);
    --Str-Form-Inputs-Checkbox: var(--color-paynes-gray);
    --BG-Toogle: var(--color-charcoal);
    --BG-Header-left-menu: var(--color-black);
    --BG-table-pagination: var(--color-rich-black);
    --BG_Filter: var(--color-rich-black);
    --BG-Drop-Down: var(--color-rich-black);
    --BG-Interface: var(--color-black);
    --BG-Pop-UP: var(--color-rich-black);
    --BG-Pop-UP_Footer: var(--color-black);
    --BG-Scroll-Grey: var(--color-gunmetal);
    --BG-Scroll-Black-Line: var(--color-paynes-gray);
    --BG-Tooltip: var(--color-gunmetal);
    --BG-Login-Page: var(--color-black);
    --BG-Error-Message: var(--color-davys-gray);
}



@media (prefers-color-scheme: dark) {
    .dark-theme-only {
        display: block;
    }

    .light-theme-only {
        display: none;
    }
}


html {
    font-size: 14px;
    overflow: hidden;
}



@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background: var(--BG-Login-Page, #010714);
}

.required-asterix {
    color: var(--Interface-Status-Red, #C5322D);
}

.header {
    height: 65px;
}

.header-logo {
    background-image: url(../Images/Header/LoginLogo.png)
}

.header-navbar-splitter {
}

#wrapper.collapsed-sidebar .footer {
}


#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    #wrapper.expanded-sidebar {
        padding-left: 260px;
    }

#sidebar-wrapper {
    color: var(--BG-Header-left-menu);
    z-index: 1000;
    position: fixed;
    left: 260px;
    width: 0;
    height: 100%;
    margin-left: -260px;
    overflow-y: auto;
    background: var(--BG-Header-left-menu);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border: solid 1px #D1D1D3
}

#wrapper.expanded-sidebar #sidebar-wrapper {
    width: 260px;
}

#wrapper.collapsed-sidebar #sidebar-wrapper {
    width: 50px;
}

    #wrapper.collapsed-sidebar #sidebar-wrapper:hover {
        width: 260px;
    }

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 0px;
}

#wrapper.expanded-sidebar .navbar-expanded-button {
    position: absolute;
    z-index: 1000;
    left: 242px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.collapsed-sidebar .navbar-expanded-button {
    position: absolute;
    z-index: 1000;
    left: 33px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper:hover + .navbar-expanded-button {
    left: 242px;
}


#wrapper.expanded-sidebar #page-content-wrapper {
    position: absolute;
    margin-right: -220px;
}

.modal-body {
padding-bottom:36px;
}

/*Home page*/
.home-main-img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    margin-left: -345px;
}


/********/

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 260px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sidebar-nav li {
        text-indent: 20px;
        line-height: 40px;
    }

        .sidebar-nav li a {
            display: block;
            text-decoration: none;
            color: #999999;
        }

            .sidebar-nav li a:hover {
                text-decoration: none;
                color: #fff;
                background: rgba(255, 255, 255, 0.2);
            }

            .sidebar-nav li a:active, .sidebar-nav li a:focus {
                text-decoration: none;
            }

    .sidebar-nav > .sidebar-brand {
        height: 65px;
        font-size: 18px;
        line-height: 60px;
    }

        .sidebar-nav > .sidebar-brand a {
            color: #999999;
        }

            .sidebar-nav > .sidebar-brand a:hover {
                color: #fff;
                background: none;
            }

@media(min-width:768px) {
    #wrapper {
        padding-left: 0;
    }

        #wrapper.expanded-sidebar {
            padding-left: 260px;
        }

        #wrapper.collapsed-sidebar {
            padding-left: 50px;
        }

    #sidebar-wrapper {
        width: 0;
        height: calc(100vh - 75px);
        scrollbar-width: none;
    }

    #wrapper.expanded-sidebar #sidebar-wrapper {
        width: 260px;
    }

    #page-content-wrapper {
        padding: 0px;
        position: relative;
    }

    #wrapper.expanded-sidebar #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

.authentication-panel {
    background: var(--BG-Pop-UP, #FFF);
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 75px;
    min-height: 100px;
    width: 522px;
    flex-shrink: 0;
}

.auth-panel {
    padding: 36px;
    width: 100%
}

.auth-main-label {
    color: var(--TX_Primary, #010714);
    /* Header/H2 */
    font-family: "Work Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 8px;
}

.login-or-label {
    padding: 12px 10px 6px 15px;
    color: var(--Text-secondary, #51565E);
    text-align: center;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.auth-main-label-secondary {
    color: var(--Text-secondary, #51565E);
    /* Body Text/Regular/Body text 1 */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
}

.auth-main-label-secondary-tfa {
    color: var(--Text-secondary, #51565E);
    /* Body Text/Regular/Body text 1 */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.auth-tfa-error-div {
    display: flex;
    height: 20px;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
}

.auth-tfa-error-label {
    color: var(--Interface-Status-Red, #C5322D);
    font-family: Work Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}


.login-or-panel {
    padding-top: 24px;
    display: flex
}

    .login-or-panel svg {
        display: inline-block;
    }

.login-warning-section {
    width: 100%;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--Primary-Colors-Red, #D7534E);
}

.login-warning {
    width: 100%;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--Primary-Colors-Red, #D7534E);
    background: rgb(215, 83, 78, 0.1);
}



    .login-warning label {
        color: var(--Primary-Colors-Red, #D7534E);
        font-family: "Work Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding: 12px 6px 22px 0px;
    }


.login-success-section {
    width: 100%;
    height: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--Interface-Status-Green);
}

.login-success {
    width: 100%;
    height: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(var(--Interface-Status-Green-rgba), 0.1);
}

    .login-success label {
        color: var(--Interface-Status-Green, #168908);
        font-family: "Work Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding: 10px 6px 6px 6px;
    }

    .login-success img {
        padding: 0px 6px 2px 9px;
    }

.login-warning img {
    padding: 0px 6px 22px 12px;
}

.password-error-icon {
    top: -35px;
    right: 35px;
    position: relative;
    left: 96.5%;
    height: 16px;
}

.password-eye-icon {
    top: -35px;
    position: relative;
    left: 92%;
    height: 16px;
}

    .password-eye-icon:hover {
        cursor: pointer;
    }

.password-error-textbox {
    border-radius: 6px;
    border: 1.5px solid var(--Interface-Status-Red, #C5322D) !important;
}

.forgot-password-buttons-section {
    padding-top: 38px;
}

.left-margin-button {
    margin-left: 16px
}

.reset-password-buttons-section {
    padding-top: 38px;
}

.textbox-control .reset-password-name-lbl {
    color: var(--TX_Primary, #010714);
    /* Body Text/Medium/Body text 2 */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    bottom: 4px;
}

.passwrd-control {
    padding-bottom: 0px !important;
}

.ac-con-steps-section {
    padding-bottom: 16px
}

.textbox-control {
    padding-bottom: 26px;
}
/***********************/
/*Account Confirmation*/
.ac-con-question-section {
    margin-bottom: 32px
}

.ac-con-buttons-section {
    padding-top: 38px;
}

.ac-con-line {
    width: 24px;
    height: 2px;
    flex-shrink: 0;
    background: var(--Str-Button-Ghost, #CCCCCE);
    display: inline-block;
    margin: 4px 6px 4px 6px;
}

.ac-con-active-step-lbl {
    color: var(--TX_Primary, #010714);
    /* Body Text/Medium/Body text 2 */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/***********************/

/*Fortgot-password link*/

.forgot-password-link {
    color: var(--TX-Secondary, #7C8BA8);
    /* Subtitle 2 */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
}
/********************/
/*TFA*/
.resend-code-button {
    color: var(--TX_Primary, #010714);
    text-align: center;
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    text-transform: capitalize;
}

.tfa-buttons-section {
    padding-top: 54px;
}

.tfa-border-top {
    border-top: 1px solid var(--Str-Button-Ghost, #CCCCCE);
}

.tfa-footer-content {
    padding: 16px 0px 16px 36px
}

/*****************/

/*Answer Question*/
.aq-question-label {
    color: var(--TX_Primary, #010714) !important;
    /* Body Text/Semibold/Body text 1 */
    font-family: "Work Sans" !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
    padding-bottom: 12px;
}
/*****************/

/*SiteSettings*/

.site-settings-panel {
    background: var(--BG-Pop-UP, #FFF);
    display: flex;
    margin-top: 25px;
    min-height: 100px;
    flex-shrink: 0;
}

    .site-settings-panel input {
        margin: 10px
    }

.site-settings-container {
    padding: 20px
}

.settings-main-label {
    color: var(--TX_Primary, #010714);
    /* Header/H2 */
    font-family: "Work Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 8px;
    width: 100%
}

/***********/

.footer-link-container-empty {
    width: 522px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    padding-left: 45px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 24px;
}

::-webkit-scrollbar {
    width: 12px;
    border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--BG-Scroll-Grey);
    border-radius: 100px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--BG-Scroll-Black-Line);
    border-radius: 100px;
    height: 150px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.custom-tooltip {
    --bs-tooltip-bg: var(--BG-Tooltip);
    --bs-tooltip-color: var(--TX_Primary);
    --bs-tooltip-opacity: 1;
    box-shadow: 0px 10px 30px 0px rgba(81, 86, 94, 0.20);
    color: var(--TX_Primary);
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.required-invalid {
    border-color: var(--color-red) !important;
}


/*Expired Link*/

.span-label {
    color: var(--TX-Primary, #010714);
    text-align: center;
    /* H3 */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    justify-content: center;
    display: flex;
    margin-bottom: 48px
}

.expired-btn {
    width: 180px;
    margin-bottom: 114px
}

.expired-img {
    margin-top: 114px;
    margin-bottom: 24px;
}


/*************************/


/*Drop-down*/

.dropdown-item {
    color: var(--TX-Primary, #010714);
    /* Subtitle 1 */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 2px;
}

.dropdown-item:hover {
    cursor:pointer;
}

    .delete-user-group-btn span {
        width: 16px;
        height: 20px;
        background-image: url(/images/dropdown-menu-icon/delete.png);
        display: inline-block;
        background-repeat: no-repeat;
        margin-right: 16px;
        vertical-align: middle;
    }

/*************************/

.confirm-delete-modal-header {
    color: var(--TX-Primary, #010714);
    /* H2 */
    font-family: "Work Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}