/* Styles Here */

.hl-heading{
    font-size: 30px;
    color: #00b6ff;
    font-weight: 600;
}

/* Widget styles Here */

.hl-widget-background{
    background-color: #cfcfcf;
    color: red;
} /* Styles Here */

:root{
    --dcui-ls-dark: #222;
    --dcui-ls-gold: #f5b301;
    --dcui-ls-grey: #767979;
    --dcui-ls-grey-2: #ECECEC;
    --dcui-ls-red: #D64545;
    --dcui-ls-facebook-blue: #3b5998;
    --dcui-ls-facebook-blue-2: #263f73;
    --dcui-ls-purple: #7587CF;
    /* --dcui-field-height: 45px; */
    /* --dcui-field-radius: 6.96px; */
}

.hl-heading{
    font-size: 30px;
    color: #00b6ff;
    font-weight: 600;
}

.f-s-13{ font-size: 13px; }
.f-s-15{ font-size: 15px; }
.f-s-17{ font-size: 17px; }

.p-40 { padding: 40px !important; }
.p-t-25 { padding-top: 25px !important; }
.p-b-25 { padding-bottom: 25px !important; }
.p-l-45 { padding-left: 45px !important; }
.p-r-45 { padding-right: 45px !important; }

.bg-white{ background-color: #fff; }

.br-0{ border-radius: 0px; }
.br-8{ border-radius: 8px; }
.br-bl-0{ border-bottom-left-radius: 0px; }
.br-bl-0{ border-bottom-left-radius: 0px; }
.br-bl-8{ border-bottom-left-radius: 8px; }
.br-br-8{ border-bottom-right-radius: 8px; }
.br-tl-8{ border-top-left-radius: 8px; }
.br-tr-8{ border-top-right-radius: 8px; }

.border-transparent{ border: 1px solid transparent; }

.section-placeholder{
    height: 100px;
    border: 1px solid;
}

.w-25-perc{ width: 25%; }
.w-100-perc{ width: 100%; }

.success-color{ color: var(--success-color); }
.quinary-color{ color: var(--dark-quinary-color); }

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.transit-common{
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.docld-checkbox-no-label:is(.dcui-checkbox,.dcui-radio){
    margin-top: 0;
}

.docld-checkbox-no-label:is(.dcui-checkbox,.dcui-radio) > label{
    width: 20px;
    height: 20px;
    padding-left: 0;
    display: flex;
}

/* Widget styles Here */

.hl-widget-background{
    background-color: #cfcfcf;
    color: red;
}

/* Common utilities */
    .cursor-pointer{
        cursor: pointer;
    }
/* Common utilities */

/* Common dropdown trigger */
    .common-dropdown-trigger-parent .cdt-trigger{
        -webkit-transition: all ease-in-out 0.15s;
        -moz-transition: all ease-in-out 0.15s;
        transition: all ease-in-out 0.15s;
    }
    
    @media (min-width: 1200px) {
        .common-dropdown-trigger-parent .cdt-trigger:not(.open){
            opacity: 0;
            pointer-events: none;
        }
    
        .common-dropdown-trigger-parent:hover .cdt-trigger,
        .common-dropdown-trigger-parent:focus .cdt-trigger{
            opacity: 1;
            pointer-events: all;
        }
    }
/* Common dropdown trigger */

/* Component styles */
    /* Button styles */
        .dcui-button.dc-cw-btn-hov-grey-text:hover,
        .dcui-button.dc-cw-btn-grey-text{
            color: var(--dcui-ls-grey);
        }

        .dcui-button.dc-cw-btn-hov-no-fill:hover{
            background-color: transparent;
        }

        .dcui-button.dc-cw-btn-hov-grey-border:hover{
            border-color: var(--dcui-ls-grey);
        }

        .dcui-button.dc-cw-btn-hov-grey-text:hover{
            color: var(--dcui-body-color);
        }
    /* Button styles */
    
    /* Dropdown styles */
        .dc-cw-c-s-dropdown .dc-dw-d-sin-link{
            font-size: 14px;
            display: flex;
            padding: 8px 10px 7px;
        }
        
        .dc-cw-c-s-dropdown .dc-dw-d-sin-icon{
            margin-right: 13px;
            /* color: var(--dc-dark-primary-color); */
            min-width: 18px;
            text-align: center;
        }

        /* no-toggle-hover-bg-color, the search dropdown (common-search-dropdown)
           and DcMultiSelectDropdown's own rules are in the kit's dc-ui-kit.css */

        /* every Leads dropdown panel is at least as wide as its toggle (user
           rule). the dropdown root is inline-block and as wide as the toggle,
           so 100% is the toggle's width. max() keeps the kit's 150px floor.
           scoped to the Leads pages and popups. panels placed by fixed_panel
           (inline position: fixed) are left out: their 100% would be the
           viewport's */
        .dc-leads-wrapper .dcui-select-dropdown .dcui-dropdown-panel:not([style*="position: fixed"]),
        .dc-lead-app-popup .dcui-select-dropdown .dcui-dropdown-panel:not([style*="position: fixed"]){
            min-width: max(150px, 100%);
        }

        /* an option's text in an open dropdown wraps to 2 lines at most, then
           "…" (user rule, 2026-10-29; every dropdown). a plain option clamps
           its own <a>. a flex row (icon + label, a check, an x) clamps its
           label instead, as a clamped flex box would lose its layout: menus
           (dc-dw-d-sin-link), the sort option, the kit's search and
           multi-select labels, and dc-ls-option-text in Leads' own option
           slots. a flex row without one of these needs its text wrapped in
           a dc-ls-option-text span. rows set nowrap (the group switcher, the
           lead header menu) stay on one line */
        .dc-leads-wrapper .dcui-dropdown-menu > li > a:not(.dcui-search-dropdown__option-row):not(.dc-dw-d-sin-link):not(.dc-lf-sort-option):not(:has(> div)),
        .dc-lead-app-popup .dcui-dropdown-menu > li > a:not(.dcui-search-dropdown__option-row):not(.dc-dw-d-sin-link):not(.dc-lf-sort-option):not(:has(> div)),
        .dc-leads-wrapper .dcui-dropdown-menu .dc-dw-d-sin-link > span:last-child,
        .dc-lead-app-popup .dcui-dropdown-menu .dc-dw-d-sin-link > span:last-child,
        .dc-leads-wrapper .dcui-dropdown-menu .dc-lf-sort-option > span:first-child,
        .dc-lead-app-popup .dcui-dropdown-menu .dc-lf-sort-option > span:first-child,
        .dc-leads-wrapper .dcui-dropdown-menu .dcui-search-dropdown__option-label,
        .dc-lead-app-popup .dcui-dropdown-menu .dcui-search-dropdown__option-label,
        .dc-leads-wrapper .dcui-dropdown-menu .dc-msd-option-label,
        .dc-lead-app-popup .dcui-dropdown-menu .dc-msd-option-label,
        .dc-leads-wrapper .dcui-dropdown-menu .dc-ls-option-text,
        .dc-lead-app-popup .dcui-dropdown-menu .dc-ls-option-text{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
            /* a long word breaks instead of running past the panel */
            overflow-wrap: anywhere;
        }

        /* a clamped label in a flex row may shrink below its text's width */
        .dc-leads-wrapper .dcui-dropdown-menu .dc-dw-d-sin-link > span:last-child,
        .dc-lead-app-popup .dcui-dropdown-menu .dc-dw-d-sin-link > span:last-child,
        .dc-leads-wrapper .dcui-dropdown-menu .dc-lf-sort-option > span:first-child,
        .dc-lead-app-popup .dcui-dropdown-menu .dc-lf-sort-option > span:first-child,
        .dc-leads-wrapper .dcui-dropdown-menu .dc-msd-option-label,
        .dc-lead-app-popup .dcui-dropdown-menu .dc-msd-option-label,
        .dc-leads-wrapper .dcui-dropdown-menu .dc-ls-option-text,
        .dc-lead-app-popup .dcui-dropdown-menu .dc-ls-option-text{
            min-width: 0;
        }

        .dc-leads-wrapper .dcui-dropdown-menu .dc-ls-option-text,
        .dc-lead-app-popup .dcui-dropdown-menu .dc-ls-option-text{
            flex: 1 1 auto;
        }

        /* DcSearchDropdown toggles don't turn grey on hover or while open
           (user rule, overrides the kit's #eeeeee): they keep their resting
           background, white for the field, transparent for flush ones and
           the group switcher. a disabled one keeps the kit's grey. */
        .dc-leads-wrapper .dcui-search-dropdown .dcui-dt-label:hover,
        .dc-leads-wrapper .dcui-search-dropdown.dcui-select-dropdown.open .dcui-dt-label,
        .dc-lead-app-popup .dcui-search-dropdown .dcui-dt-label:hover,
        .dc-lead-app-popup .dcui-search-dropdown.dcui-select-dropdown.open .dcui-dt-label{
            background-color: #fff;
        }

        .dc-leads-wrapper .dcui-search-dropdown--flush .dcui-dt-label:hover,
        .dc-leads-wrapper .dcui-search-dropdown--flush.dcui-select-dropdown.open .dcui-dt-label,
        .dc-lead-app-popup .dcui-search-dropdown--flush .dcui-dt-label:hover,
        .dc-lead-app-popup .dcui-search-dropdown--flush.dcui-select-dropdown.open .dcui-dt-label,
        .dc-leads-wrapper .dcui-search-dropdown.dc-group-switcher .dcui-dt-label:hover,
        .dc-leads-wrapper .dcui-search-dropdown.dc-group-switcher.open .dcui-dt-label{
            background-color: transparent;
        }

        .dc-leads-wrapper .dcui-search-dropdown.disabled .dcui-dt-label:hover,
        .dc-lead-app-popup .dcui-search-dropdown.disabled .dcui-dt-label:hover{
            background-color: #ebebeb;
        }
    /* Dropdown styles */

    /* Table component */
        .dc-leads-wrapper .dcui-t-table tbody tr:not(.table-filler-row):not(.dc-lw-sb-total):hover,
        .dc-lead-app-popup .dcui-t-table tbody tr:not(.table-filler-row):not(.dc-lw-sb-total):hover{
            background-color: var(--dc-skin-light-bg);
        }

        .dc-leads-wrapper .dcui-t-table tr > th:first-child,
        .dc-leads-wrapper .dcui-t-table tr > td:first-child,
        .dc-lead-app-popup .dcui-t-table tr > th:first-child,
        .dc-lead-app-popup .dcui-t-table tr > td:first-child{
            padding-left: 15px;
        }
    /* Table component */

    /* Tab component */
        .dc-leads-wrapper .dcui-basic-tabs .dcui-bt-panel{
            overflow: visible;
        }

        .dcui-basic-tabs.tabs-nav-border-bottom .dcui-bt-nav{
            border-bottom: 1px solid #dedede;
            padding-bottom: 12px;
        }
    /* Tab section */
/* Component styles */

/* Common Grid Card Styles */
    .common-grid-card{
        border-color: rgba(191, 191, 191, 0.5);
        /* box-shadow: 0px 0px 24.2px rgba(0, 0, 0, 0.1); */
        min-height: 145px;
        max-width: 100%;
    }

    .common-grid-card .cgc-title{
        color: var(--dc-dark-primary-color);

    }
    
    .common-grid-card .cgc-title:hover{
        color: var(--dc-dark-secondary-color);
    }

    .common-grid-card .cgc-text{
        /* max-width: calc(100% - 25px); */
    }

    .common-grid-card .cgc-icon{
        margin-right: 10px;
        font-size: 19px;
    }

    @media (max-width: 1439px) {
        .common-grid-card .cgc-icon{
            font-size: 17px;
        }
    }

    @media (max-width: 1199px) {
        .common-grid-card{
            min-height: 130px;
        }

        .common-grid-card .cgc-icon {
            font-size: 15px;
            margin-right: 8px;
        }
    }
/* Common Grid Card Styles */

/* Common popup */
    .dc-leads-wrapper .tb-mmi-label{
        margin-bottom: 25px;
    }

    .dc-leads-wrapper .dc-lap-field-group{
        gap: 55px;
    }

    .dc-leads-wrapper .dc-lap-fg-label{
        min-width: 15%;
    }

    .dc-leads-wrapper .dc-lap-fg-field{
        max-width: calc( 85% - 55px );
    }

    [data-popup-step]{
        max-height: calc(100vh - 100px - 60px);
        /* dvh = the visible height on mobile, where vh runs under the browser toolbar */
        max-height: calc(100dvh - 100px - 60px);
        overflow-y: auto;
        /*
         *  overflow-y alone makes overflow-x auto too, so a turning accordion
         *  arrow (its corners poke past the right edge mid-rotation) flashed a
         *  horizontal scrollbar. steps never scroll sideways.
         */
        overflow-x: hidden;
        /*
         *  room for the kit's 2px button dip (.dcui-button:active), so pressing a
         *  button in the bottom row doesn't flash a scrollbar. the negative margin
         *  takes the 2px back, so no popup gets taller.
         */
        padding-bottom: 2px;
        margin-bottom: -2px;
    }
/* Common popup */

/* Lead group popup */
    .lead-group-popup .popup .algp-c-interface[data-popup-step]{
        display: flex;
        flex-direction: column;
    }

    .lead-group-popup .popup .algp-c-interface[data-popup-step][hidden],
    .lead-group-popup .popup .algp-c-interface[data-popup-step][hidden] *{
        display: none;
    }

    /* the buttons stay at the foot of a short step */
    .lead-group-popup .algp-bottom{
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        justify-content: space-between;
        min-height: 280px;
    }

    .lead-group-popup .algp-source-auth{
        background-color: #efeff0;
        padding: 20px;
        text-align: center;
        border-radius: 5px;
    }

    .lead-group-popup .algp-sa-text{
        margin: 0 auto 10px;
        max-width: 215px;
        font-size: 12px;
    }

    .lead-group-popup .algp-sa-facebook{
        background-color: var(--dcui-ls-facebook-blue);
        border-color: var(--dcui-ls-facebook-blue);
    }

    .lead-group-popup .algp-sa-facebook:focus{
        background-color: var(--dcui-ls-facebook-blue-2);
        border-color: var(--dcui-ls-facebook-blue-2);
    }

    .lead-group-popup .algp-sa-icon{
        margin-right: 12px;
    }

    .lead-group-popup .algp-sa-error{
        margin: 10px 0 0;
        font-size: 12px;
        color: var(--dcui-ls-red);
    }

    /* logged in to Facebook: the Page and Lead Form pickers */
    .lead-group-popup .algp-source-pickers{
        padding: 15px 0 5px;
    }

    .lead-group-popup .algp-sp-field{
        margin-bottom: 15px;
    }

    .lead-group-popup .algp-sp-label{
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
    }

    .lead-group-popup .algp-sp-note{
        margin: 8px 0 0;
        font-size: 12px;
        color: #6f6f6f;
    }

    /* the group's Facebook sources (legacy's list): Page over form, a New tag, a bin */
    .lead-group-popup .algp-source-list{
        margin: 0 0 10px;
        padding: 0;
        list-style: none;
    }

    .lead-group-popup .algp-sl-item{
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #efeff0;
    }

    .lead-group-popup .algp-sl-text{
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .lead-group-popup .algp-sl-page{
        font-weight: 600;
    }

    .lead-group-popup .algp-sl-form{
        font-size: 12px;
        color: #6f6f6f;
    }

    .lead-group-popup :is(.algp-sl-page, .algp-sl-form){
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lead-group-popup .algp-sl-error{
        margin-top: 3px;
        font-size: 12px;
        color: var(--dcui-ls-red);
    }

    /* the source's pull line: "Pulling past leads…" or the Pull past leads link */
    .lead-group-popup .algp-sl-note{
        margin-top: 3px;
        font-size: 12px;
        color: #6f6f6f;
    }

    /* Re-Authenticate / Pull past leads: a link-like button in the source's lines */
    .lead-group-popup .algp-sl-renew{
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        font: inherit;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
    }

    .lead-group-popup .algp-sl-renew:disabled{
        opacity: 0.5;
        cursor: default;
    }

    .lead-group-popup .algp-sl-renew-all{
        margin-bottom: 10px;
    }

    .lead-group-popup .algp-sl-tag{
        padding: 2px 8px;
        border-radius: 10px;
        background-color: #efeff0;
        font-size: 11px;
    }

    .dc-leads-wrapper .dc-cw-cards .table-wrapper .dcui-table table.dcui-t-table th{
        font-size: 16px;
        padding-bottom: 18px;
    }

    .dc-leads-wrapper .dc-cw-cards .table-wrapper .dcui-table table.dcui-t-table th:last-child{
        padding-right: 0;
    }

    .dc-leads-wrapper .dc-cw-cards .table-wrapper .dcui-table table.dcui-t-table :is(th,td):nth-child(n+2){
        text-align: center;
    }
        
    .dc-leads-wrapper .dc-cw-cards .table-wrapper .dcui-table table.dcui-t-table td{
        padding-top: 3px;
        padding-bottom: 1px;
    }

    @media (min-width: 1200px) {
        .lead-group-popup .algp-sa-facebook:hover{
            background-color: var(--dcui-ls-facebook-blue-2);
            border-color: var(--dcui-ls-facebook-blue-2);
        }
    }

    @media (max-width: 1199px) {
        .lead-group-popup .algp-sa-facebook:active{
            background-color: var(--dcui-ls-facebook-blue-2);
            border-color: var(--dcui-ls-facebook-blue-2);
        }
    }
/* Lead group popup */

/* CRM popup */
    .connect-crm-popup .ccrm-p-crm-icon{
        background-color: var(--dcui-ls-purple);
        color: #fff;
        border-radius: 50%;
        min-width: 30px;
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--dc-regular-font-size);
    }

    .connect-crm-popup .ccp-b-field-group{
        border-radius: 5px;
        background-color: var(--dcui-ls-grey-2);
        padding: 20px;
    }

    .connect-crm-popup .ccrm-p-checkboxes{
        margin-top: -10px;
    }

    /* the group's connections, as the group popup's source list */
    .connect-crm-popup .ccp-connection-list{
        margin: 0 0 15px;
        padding: 0;
        list-style: none;
    }

    .connect-crm-popup .ccp-cl-item{
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #e3e3e5;
    }

    .connect-crm-popup .ccp-cl-text{
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .connect-crm-popup .ccp-cl-name{
        font-weight: 600;
    }

    .connect-crm-popup .ccp-cl-detail{
        overflow: hidden;
        font-size: 12px;
        color: #6f6f6f;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .connect-crm-popup .ccp-error{
        margin: 10px 0 0;
        font-size: 12px;
        color: var(--dcui-ls-red);
    }
/* CRM popup */

/* Move leads popup (components/common/move_leads_popup.js) */
    /* the "same step for all" text on the left, its checkbox on the right */
    .move-leads-popup .mlp-same-row{
        justify-content: space-between;
        gap: 15px;
    }

    .move-leads-popup .mlp-same-label{
        font-size: 13px;
        color: #6b6b6b;
        cursor: pointer;
    }

    /* the rows' own scroll box, which DcLoadMore pages in 25 at a time:
       six rows high at most (the popup itself keeps its height while
       batches arrive) */
    .move-leads-popup .mlp-rows-scroll{
        max-height: 340px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* one bordered list; the rows share their borders */
    .move-leads-popup .mlp-rows{
        border: 1px solid #dcdcdc;
        border-radius: 5px;
    }

    .move-leads-popup .mlp-row{
        display: flex;
        align-items: stretch;
        min-height: 56px;
        border: 1px solid transparent;
        border-top-color: #dcdcdc;
        margin: -1px -1px 0;
    }

    .move-leads-popup .mlp-row:first-child{
        border-top-color: transparent;
        border-radius: 5px 5px 0 0;
    }

    .move-leads-popup .mlp-row:last-child{
        margin-bottom: -1px;
        border-radius: 0 0 5px 5px;
    }

    /* the row being worked on gets the blue outline from the design */
    .move-leads-popup .mlp-row:focus-within,
    .move-leads-popup .mlp-row:has(.dcui-select-dropdown.open){
        position: relative;
        border-color: var(--dcui-primary-color);
    }

    .move-leads-popup .mlp-r-lead{
        display: flex;
        align-items: center;
        gap: 10px;
        width: 180px;
        flex-shrink: 0;
        padding: 8px 10px;
        border-right: 1px solid #dcdcdc;
    }

    .move-leads-popup .mlp-r-avatar{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 3px;
        background-color: #4a90d9;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
    }

    .move-leads-popup .mlp-r-info{
        min-width: 0;
    }

    .move-leads-popup .mlp-r-name,
    .move-leads-popup .mlp-r-phone{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .move-leads-popup .mlp-r-phone{
        font-size: 12px;
        color: #6b6b6b;
    }

    .move-leads-popup .mlp-r-step{
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        padding: 0 5px;
    }

    /* the step dropdown fills its cell, label left and arrow right */
    .move-leads-popup .mlp-step-dropdown.dcui-select-dropdown{
        display: block;
        width: 100%;
    }

    .move-leads-popup .mlp-step-dropdown .dcui-dt-label{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--dcui-primary-color);
    }

    /* the blue is for the "Select Funnel Step" prompt; a picked step reads as text */
    .move-leads-popup .mlp-step-dropdown .mlp-sd-label:not(.mlp-sd-placeholder){
        color: var(--dcui-body-color);
    }

    .move-leads-popup .mlp-step-dropdown.disabled .dcui-dt-label,
    .move-leads-popup .mlp-step-dropdown.disabled .mlp-sd-label{
        color: #c4c4c4;
        cursor: default;
    }

    .move-leads-popup .mlp-step-dropdown .dcui-dropdown-menu > li.selected > a{
        font-weight: 600;
    }
/* Move leads popup */

/* Edit group users popup (components/common/edit_group_users_popup.js) */
    .edit-group-users-popup .egup-subtitle{
        margin-bottom: 20px;
        color: var(--dcui-ls-grey);
        font-size: 14px;
    }

    /*
     *  the field plus its open list, so opening it never grows the popup (user
     *  rule). from the kit CSS: the field (--dcui-field-height), a 5px gap, then
     *  the panel's 2px border, 7px top padding, the search field
     *  (--dcui-field-height), the list's 5px top margin, at most 200px of rows
     *  and its 9px bottom margin.
     */
    .edit-group-users-popup .egup-field-area{
        min-height: calc(var(--dcui-field-height) * 2 + 5px + 2px + 7px + 5px + 200px + 9px);
    }
/* Edit group users popup */

/* Funnel change logs popup */
    .funnel-change-logs-popup .fclp-subtitle{
        margin-bottom: 20px;
        color: var(--dcui-ls-grey);
        font-size: 14px;
    }

    /* a fixed height, scrolling inside, so the popup never changes size (user rule) */
    .funnel-change-logs-popup .fclp-feed{
        height: 360px;
    }

    .funnel-change-logs-popup .fclp-feed .dcui-activity-feed{
        padding: 0;
    }

    /*
     *  the feed's list only scrolls down. the kit gives it overflow-y: auto, which
     *  makes overflow-x auto as well, so the timeline dots (nudged sideways with
     *  position: relative, which takes no layout room) made it scroll sideways.
     */
    .funnel-change-logs-popup .fclp-feed .dcui-activity-feed__scroll{
        overflow-x: hidden;
        padding-right: 0;
        margin-right: 0;
    }

    /* each change's icon is its timeline dot (the lead page's technique; codepoints
       from assets/libs/font-awesome/6-pro) */
    .funnel-change-logs-popup .dc-point-list-item:has(.dc-ls-ai-rename)::before{ content: "\f304"; }  /* pen */
    .funnel-change-logs-popup .dc-point-list-item:has(.dc-ls-ai-move)::before{ content: "\f07e"; }    /* arrows-left-right */
    .funnel-change-logs-popup .dc-point-list-item:has(.dc-ls-ai-add)::before{ content: "\2b"; }       /* plus */
    .funnel-change-logs-popup .dc-point-list-item:has(.dc-ls-ai-delete)::before{ content: "\f1f8"; }  /* trash */
/* Funnel change logs popup */

/* Common icon selector */
    .dc-leads-wrapper .icon-picker.dcui-icon-actions .dcui-ic-item{
        border: 1px solid var(--dcui-line-color);
    }
/* Common icon selector */

/* App styles here */
.dc-leads-wrapper .dc-content-wrapper{
    padding-left: 40px;
    padding-right: 40px;
}

.dc-leads-wrapper .dc-cw-1-width{
    width: 89%;
}

.dc-leads-wrapper .dc-lead-single{
    height: calc(100vh - 55px);
    height: calc(100dvh - 55px); /* visible height on mobile; vh is the fallback */
}

.dc-leads-wrapper .dc-header-bar{
    border: none;
    box-shadow: none;
    padding: 40px;
}

.dc-leads-wrapper .dc-hb-leads-header-bar .dcui-blue-container__left-container{
    max-width: 50%;
}

.dc-leads-wrapper .dc-hb-leads-header-bar .dcui-blue-container__right-container{
    max-width: 50%;
}

/* minmax(0, 1fr): a plain 1fr can't shrink below its content, so a long group name widened its column */
.dc-leads-wrapper .grid-wrapper{
    gap: 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dc-hb-leads-header-bar .dc-tl-buttons{
    display: none;
}



.dc-groups .dc-i-img {
    width: 60px;
}

.dc-cw-ab-view-switcher .dcui-ic-item > i {
    position: relative;
    bottom: -3px;
}

.dc-cw-ab-search .dcui-icon-control{
    width: 245px;
}

.dc-cw-ab-search .dcui-form-control,
.dc-cw-ab-search .dcui-icon-control .dcui-ic-icon{
    height: 33px;
}

.dc-cw-ab-search .dcui-form-control{
    padding-top: 7px;
}

.dc-cw-action-bar {
    margin-bottom: 25px;
}

.dc-leads-wrapper .lead-group-menu{
    min-width: 165px;
}

/* the lead page header's ⋮ menu: each item on one line, so the panel widens
   to its longest label ("Remove from Won list") instead of wrapping it */
.dc-leads-wrapper .dc-ls-header-menu .dc-dw-d-sin-link,
.dc-leads-wrapper .dc-gr-header-menu .dc-dw-d-sin-link{
    white-space: nowrap;
}

.dc-leads-wrapper .won-count{
    color: var(--success-color);
}

.dc-leads-wrapper .lost-count{
    color: var(--dcui-ls-red );
}

.dc-leads-wrapper .dc-icon-i{
    font-size: 42px;
}

/* the leads header's group icon: a box one title line tall (it carries the
   heading's classes, so 1lh follows the title's size), the 42px icon centred
   in it, so it sits on the centre of the title's first line */
.dc-leads-wrapper .dc-hb-ll-group-icon .dc-big-heading{
    margin-bottom: 0;
}

.dc-leads-wrapper .dc-hb-ll-group-icon .dc-hb-ll-icon-line{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1lh;
}

.dc-leads-wrapper .dc-hb-ll-group-icon .dc-hb-ll-icon-line i{
    font-size: 42px;
}

@media (min-width: 992px) {
    .dc-leads-wrapper .dc-lw-tr-btn-right{
        margin-left: 15px;
    }
}

@media (max-width: 1919px) {
    .dc-leads-wrapper .dc-tr-stats{
        flex-wrap: wrap;
    }

    .dc-leads-wrapper .dc-tr-stat {
        width: calc(50% - 30px);
    }
}

@media (max-width: 1679px) {
    .dc-leads-wrapper .dc-header-bar{
        padding: 30px;
    }

    .dc-leads-wrapper .dc-content-wrapper{
        padding-left: 30px;
        padding-right: 30px;
    }

    .dc-leads-wrapper .dc-cw-1-width{
        width: 100%;
    }

    .dc-leads-wrapper .grid-wrapper{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1439px) {
    .dc-leads-wrapper .dc-hb-leads-header-bar .dcui-blue-container__left-container,
    .dc-leads-wrapper .dc-hb-leads-header-bar .dcui-blue-container__right-container {
        max-width: unset;
    }

    .dc-leads-wrapper .dc-hb-leads-header-bar > div{
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .dc-leads-wrapper .dc-tr-stats {
        flex-wrap: nowrap;
    }

    /*
     *  the stats on their own line under the title: Add Lead (and the ⋮) at
     *  that line's right end (user, 2026-11-06; until then the title's own
     *  Add Lead, .dc-tl-buttons, showed here instead). the line takes the
     *  header's width and the buttons take the room after the stats
     *  (margin-left: auto; the stats' m-r-30 is !important).
     */
    .dc-leads-wrapper .dc-hb-leads-header-bar .dcui-blue-container__right-container{
        align-self: stretch;
    }

    .dc-leads-wrapper .dc-hb-leads-header-bar .dc-tr-buttons{
        margin-left: auto;
    }
}

@media (max-width: 991px) {
    .dc-groups .dc-i-img {
        width: 45px;
    }

    .dc-leads-wrapper .dcui-blue-container__right-container{
        text-align: right;
    }

    .dc-leads-wrapper .dc-tr-buttons{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .dc-leads-wrapper .grid-wrapper{
        gap: 15px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dc-leads-wrapper .dc-content-wrapper{
        padding-left: 20px;
        padding-right: 20px;
    }

    .dc-leads-wrapper .dc-header-bar{
        padding: 20px;
    }

    .dc-big-heading .dc-bh-heading{
        font-size: 25px;
    }

    .dc-leads-wrapper .dc-hb-ll-group-icon .dc-hb-ll-icon-line i{
        font-size: 35px;
    }

    .dc-big-heading .dc-bh-sub{
        font-size: 13px;
    }

    .dc-leads-wrapper .dc-hb-leads-header-bar > div{
        display: block;
    }
    
    .dc-leads-wrapper .dc-hb-leads-header-bar .dc-tr-s-0{
        justify-content: space-between;
    }

    .dc-leads-wrapper .dc-hb-leads-header-bar .dcui-blue-container__right-container{
        margin-top: 30px;
    }

    .dc-hb-leads-header-bar .dc-tl-buttons{
        display: none;
    }
}

/* Leads group grid view */
    .dc-cw-c-single{
        padding: 15px;
        padding-bottom: 11px;
    }

    .dc-cw-c-single .dc-cc-leads{
        max-width: 160px;
        overflow: hidden;
    }

    .dc-cw-c-single .dc-cc-lead-label,
    .dc-cw-c-single .dc-cc-lead-count {
        overflow: hidden;
        white-space: nowrap;
    }

    .dc-cw-c-single .dc-cc-lead-count {
        font-size: 35px;
        color: var(--body-color);
    }

    .dc-cw-c-single .dc-cc-lead-label{
        color: var(--dc-dark-primary-color);
    }

    .dc-cw-c-single .dc-cc-bottom-section{
        gap: 15px;
    }

    .dc-cw-c-single .dc-cw-c-s-dropdown {
        right: 9px;
        top: 14px;
        position: absolute;
        height: auto;
        width: auto;
        padding: 0;
    }

    .dc-cw-c-single .dc-cw-c-s-dropdown .dcui-dropdown-toggle{
        padding: 0 5px;
        height: auto;
    }

    .dc-cw-c-single .dc-cc-top-section{
        margin-right: 15px;
    }

    /* the name shrinks with the card and is cut off with "…" (line-clamp-1) instead of widening it */
    .dc-cw-c-single,
    .dc-cw-c-single .dc-cc-top-section,
    .dc-cw-c-single .cgc-title,
    .dc-cw-c-single .cgc-text{
        min-width: 0;
    }

    .dc-cw-c-s-dropdown.dcui-select-dropdown .dcui-dt-label.icon-only:hover,
    .dc-cw-c-s-dropdown.dcui-select-dropdown.open .dcui-dt-label.icon-only{
        background-color: transparent;
        color: var(--dcui-ls-grey);
    }

    @media (max-width: 1439px) {
        .dc-cw-c-single .dc-cc-lead-count{
            font-size: 33px;
        }

        .dc-cw-c-single .dc-cc-name{
            font-size: 18px;
        }

        .dc-cw-c-single .dc-cc-location{
            font-size: 16px;
        }
    }

    @media (max-width: 1199px) {
        .dc-cw-c-single .dc-cc-name{
            font-size: 16px;
        }

        .dc-cw-c-single .dc-cc-location {
            font-size: 14px;
        }

        .dc-cw-c-single .dc-cc-lead-count {
            font-size: 25px;
        }
    }
/* Leads group grid view */

/* Leads group table view */
    .dc-leads-wrapper .table-wrapper .dcui-table th:first-child{
        width: 27.34%;
    }

    .dc-leads-wrapper .table-wrapper .dcui-table th:nth-child(7){
        width: 9%;
    }

    .dc-leads-wrapper .table-wrapper .dcui-table th:last-child{
        width: 1.46%;
    }

    .dc-leads-wrapper .table-wrapper .dc-cc-icon {
        min-width: 19px;
        display: inline-block;
        font-size: 17px;
        text-align: center;
        color: var(--dark-quinary-color);
    }

    .dc-leads-wrapper .table-wrapper .dc-cc-name{
        font-size: 15px;
    }

    .dc-leads-wrapper .table-wrapper .dc-cc-location{
        font-size: 14px;
    }

    .dc-leads-wrapper .table-wrapper .dc-cw-c-tw-s-1{
        gap: 6px;
    }

    .dc-leads-wrapper .table-wrapper .dc-cw-c-tw-source-icon {
        min-width: 23px;
        min-height: 23px;
        background-color: rgba(0, 0, 0, 0.75);
        color: #fff;
        border-radius: 50%;
        font-size: 13px;
    }

    @media (min-width: 992px) {
        .dc-leads-wrapper .table-wrapper .table-filler-row {
            display: none;
        }
    }

    @media (max-width: 1199px) {
        .dc-leads-wrapper .table-wrapper .dcui-table th:nth-child(7){
            min-width: 145px;
        }
    }

    @media (max-width: 991px) {
        .dc-leads-wrapper .table-wrapper .dc-cc-n-1{
            min-width: 290px;
        }

        .dc-leads-wrapper .table-wrapper {
            margin-top: -5px;
        }

        /* The filler row absorbs any height the table is given beyond its
        content, so the real rows keep their natural height instead of
        stretching to divide up the extra space. */
        .dc-leads-wrapper .table-wrapper .dcui-t-table {
            height: 100%;
            min-height: 500px;
        }

        .dc-leads-wrapper .table-wrapper .table-filler-row {
            height: 100%;
        }

        .dc-leads-wrapper .table-wrapper .dcui-table .table-filler-row td {
            border-bottom: none;
            padding: 0;
        }
    }
/* Leads group table view */

/* Leads list*/
    .dc-leads-wrapper .dc-tr-stats{
        gap: 30px;
    }

    /* the lead name and the last activity: two lines at most, then "…"
       (user, 2026-11-05) */
    .dc-leads-wrapper .dc-lw-lead-name,
    .dc-leads-wrapper .dc-lw-activity-text{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .dc-leads-wrapper .dc-lw-lead-name{
        position: relative;
        min-width: 0;
    }

    /* the List tab's name cell: a small avatar (picture or initials) by the name.
       at most 300px wide (user, 2026-11-05); on the cell's content, as a td
       ignores max-width */
    .dc-leads-wrapper .dc-lw-lead-cell{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        max-width: 300px;
    }

    .dc-leads-wrapper .dc-lw-lead-avatar{
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    /* unvisited lead: a dot in its own column, the first one, left of the
       checkboxes (DcTable checkbox_column 1). the column is as narrow as the
       dot. its heading cell has no class (DcTable draws it from headers), so
       it's the row's first th. the right padding is the kit's cell gap (the
       checkbox cell has no left padding), so the dot doesn't touch the box. */
    .dc-leads-wrapper .dcui-table table.dcui-t-table td.dc-lw-unvisited-col,
    .dc-leads-wrapper .dc-lw-leads-table table.dcui-t-table .dcui-t-col-heading th:first-child{
        width: 7px;
        padding-right: 20px;
    }

    /* Last Activity: the type's icon left of the text, on its first line.
       the icon is a Font Awesome codepoint from the API, so it's drawn as a
       character in the FA font (light, as the lead page's activity icons;
       brand glyphs in the Brands font). fa-fw width, so the texts line up. */
    .dc-leads-wrapper .dc-lw-activity{
        display: flex;
        align-items: baseline;
        gap: 8px;
        /* the column at most 500px wide (user, 2026-10-26); longer texts
           wrap. on the cell's content, as a td ignores max-width */
        max-width: 500px;
    }

    /* coloured as the lead page's timeline icons (.dc-lead-single
       .dc-point-list-item:has(.dc-ls-activity-iconed)::before): grey, won
       green, lost red */
    .dc-leads-wrapper .dc-lw-activity-type{
        flex: 0 0 auto;
        width: 1.25em;
        text-align: center;
        color: var(--dcui-ls-grey);
        font-family: "Font Awesome 6 Pro";
        font-weight: 300;
        font-style: normal;
    }

    .dc-leads-wrapper .dc-lw-activity-type.dc-lw-activity-brand{
        font-family: "Font Awesome 6 Brands";
        font-weight: 400;
    }

    .dc-leads-wrapper .dc-lw-activity-type.dc-lw-activity-won{
        color: var(--success-color);
    }

    .dc-leads-wrapper .dc-lw-activity-type.dc-lw-activity-lost{
        color: var(--dcui-ls-red);
    }

    .dc-leads-wrapper .dc-lw-unvisited-dot{
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--dcui-primary-color);
    }

    /*
     *  funnel cards' hover / focus background. container_class is on the
     *  board and on the drag clone, so both pick it up.
     */
    .dc-lw-funnel-board{
        --dcui-fb-card-hover-bg: var(--dcui-ls-grey-2);
    }

    /*
     *  no add column (no edit_funnel permission, or a full funnel) and 5+
     *  steps (funnelLanesFill): the lanes share the board's whole width
     *  instead of stopping at the kit's 300px, so no strip is left where the
     *  column would be. fewer steps keep 300px (user, 2026-11-05)
     */
    .dc-lw-funnel-board.dc-lw-fb-fill .dcui-fb-lane{
        max-width: none;
    }

    /* room for the board's Data_Loader on the first load, before the lanes exist */
    .dc-lw-funnel-wrap{
        min-height: 200px;
    }

    /* no board yet (a funnel with no steps): the empty state with Add First Step under it */
    .dc-lw-funnel-empty{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 15px;
    }

    /*
     *  Add Funnel Step (header menu) while the funnel is full, and Delete Step
     *  on a lane with leads: greyed out, a click only says why
     */
    .dc-dw-d-sin-link.dc-lw-blocked{
        opacity: .45;
        cursor: not-allowed;
    }

    /* funnel card menu: a compact toggle, as on the group cards (.dc-cw-c-single) */
    .dc-lw-fb-menu.dc-cw-c-s-dropdown{
        height: auto;
        width: auto;
        padding: 0;
    }

    .dc-lw-fb-menu.dc-cw-c-s-dropdown .dcui-dropdown-toggle{
        padding: 0 5px;
        height: auto;
    }

    /*
     *  a funnel lane's header menu (DcFunnelBoard lane-actions). as the card
     *  menus (.common-dropdown-trigger-parent), from 1200px wide it shows only
     *  while its header is hovered or holds focus, and stays while open.
     */
    .dc-lw-funnel-board .dc-lw-fb-lane-menu{
        transition: opacity ease-in-out .15s;
    }

    @media (min-width: 1200px) {
        .dc-lw-funnel-board .dcui-fb-lane-header .dc-lw-fb-lane-menu:not(.open){
            opacity: 0;
            pointer-events: none;
        }

        .dc-lw-funnel-board .dcui-fb-lane-header:hover .dc-lw-fb-lane-menu,
        .dc-lw-funnel-board .dcui-fb-lane-header:focus-within .dc-lw-fb-lane-menu{
            opacity: 1;
            pointer-events: all;
        }
    }

    /*
     *  funnel view: the same unvisited dot, on the card's avatar. scoped to the
     *  board's container_class, which DcFunnelBoard also puts on the drag clone.
     */
    .dc-lw-funnel-board .dcui-fb-card.dc-lw-unvisited .dcui-fb-avatar:before{
        content: "";
        position: absolute;
        top: -4px;
        left: -4px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: var(--dcui-primary-color);
    }

    .dc-lw-list-view .dcui-table table.dcui-t-table td{
        padding-top: 5px;
        padding-bottom: 1px;
    }

    /* the List tab's table is never narrower than 1080px (user, 2026-10-26).
       on a narrower screen it pokes out of its DcTable root (overflow:
       visible on the leads pages) and its scroll box, #dc-leads-scroll
       (overflow-x: auto), scrolls sideways; the row dropdowns there are
       fixed_panel, so they aren't clipped */
    .dc-leads-wrapper .dc-lw-leads-table.dcui-table{
        min-width: 1080px;
    }

    /* that sideways scrollbar as thick as the vertical one: the kit's
       .dcui-scroll-container sets only the width (8px), which leaves a
       horizontal bar at the browser's own height */
    #dc-leads-scroll::-webkit-scrollbar{
        height: 8px;
    }

    /* group switcher: the header's group name is the dropdown's toggle, so
       the kit's field look (fixed height, grey hover, arrow, press nudge)
       is stripped and the heading keeps its own type and colour. */
    /* as wide as the heading, not the column, so the toggle's edges are the
       heading's (an align="right" panel would end at the chevron) */
    .dcui-select-dropdown.dc-group-switcher{
        display: block;
        width: fit-content;
        max-width: 100%;
    }

    /* DcSearchDropdown sets the fixed panel's width to the toggle's; the
       panel is never narrower than its own content (the 410px list) */
    .dc-leads-wrapper .dcui-select-dropdown.dc-group-switcher .dcui-dropdown-panel{
        min-width: max-content;
        min-width: 410px;
        max-width: 410px;
    }

    /* the kit search dropdown draws its toggle as an outlined white field */
    .dcui-select-dropdown.dc-group-switcher .dcui-dt-label{
        display: block;
        height: auto;
        padding: 0;
        border: 0;
        background-color: transparent;
        line-height: inherit;
        white-space: normal;
        color: inherit;
        cursor: pointer;
    }

    .dcui-select-dropdown.dc-group-switcher .dcui-dt-label:after{
        display: none;
    }

    .dcui-select-dropdown.dc-group-switcher .dcui-dt-label:hover,
    .dcui-select-dropdown.dc-group-switcher.open .dcui-dt-label{
        background-color: transparent;
    }

    .dcui-select-dropdown.dc-group-switcher .dcui-dt-label:active{
        transform: none;
    }

    /* one heading line tall (1lh, at the h1's size), so the chevron centres on the text's first line */
    .dc-group-switcher .dc-gs-chevron-line{
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: 1lh;
    }

    .dc-group-switcher .dc-bh-heading .fa-chevron-down{
        transition: transform 0.2s ease-in-out;
    }

    .dc-group-switcher.open .dc-bh-heading .fa-chevron-down{
        transform: rotate(180deg);
    }

    .dc-group-switcher .dc-gs-icon{
        width: 18px;
        text-align: center;
    }

    /* the search row: common-search-dropdown's look (15px side padding, no
       border, solid magnifier) instead of the kit search dropdown's inset
       field with a focus border */
    .dcui-select-dropdown.dc-group-switcher .dcui-search-dropdown__search,
    .dcui-select-dropdown.dc-group-switcher .dcui-search-dropdown__search:focus-within{
        padding: 0 15px;
        border: none;
        box-shadow: none;
    }

    .dc-group-switcher .dcui-search-dropdown__search .dcui-ic-icon i{
        font-weight: 900;
    }

    /* DcSearchDropdown's scroll box (not the menu, as common-search-dropdown
       has it) is the 200px list, so its paging sees the scroll. loading shows
       the kit's own spinner row (user, 2026-10-22) */
    .dcui-select-dropdown.dc-group-switcher .dcui-search-dropdown__scroll{
        max-height: 200px;
        margin: 5px 0 9px;
    }

    .dcui-select-dropdown.dc-group-switcher .dcui-search-dropdown__scroll .dcui-dropdown-menu{
        max-height: none;
        overflow: visible;
        margin: 0;
    }

    /* one line per group in the row's room after the icon: 60% for the
       name, the rest (" - " included) for the sub-text, each cut with an
       ellipsis; a name without sub-text may use it all. width 0 + flex 1:
       the text fills the row but never widens the panel, so the
       percentages have a fixed width to work from. */
    .dc-group-switcher .dc-gs-option-text{
        display: flex;
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        white-space: nowrap;
    }

    .dc-group-switcher .dc-gs-option-name,
    .dc-group-switcher .dc-gs-option-sub{
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dc-group-switcher .dc-gs-option-name{
        max-width: 60%;
    }

    .dc-group-switcher .dc-gs-option-name:only-child{
        max-width: 100%;
    }

    .dc-group-switcher .dc-gs-option-sub{
        max-width: 40%;
    }

    .dc-group-switcher .dc-gs-location{
        opacity: 0.6;
    }

    .dc-group-switcher .dcui-dropdown-menu > li.selected > a{
        font-weight: 600;
    }
/* Leads list*/

/* Report view */
    .dc-lw-report-view .dc-content-card{
        padding: 30px;
    }

    .dc-lw-report-view .dc-lw-rv-heading{
        margin-bottom: 20px;
    }

    /* top sources and sources over time side by side, above the table.
       minmax(0, …) lets the columns shrink below the charts' drawn width */
    .dc-lw-report-view .dc-lw-rv-charts{
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 30px;
        margin-bottom: 30px;
    }

    .dc-lw-report-view .dc-lw-rv-chart{
        height: 300px;
    }

    /* flex items default to min-width: auto, so the page column and the DcTabs
       panel grew to the table's full width and the panel's overflow: hidden
       cut it off. min-width: 0 keeps them at the page width, so the table's
       own overflow-x: auto (dcui-horizontal-scrollable) scrolls instead */
    .dc-leads-wrapper .dc-cw-1-width,
    .dc-leads-wrapper .dcui-basic-tabs .dcui-bt-tab{
        min-width: 0;
    }

    /* the leads pages set overflow: visible on every DcTable (Table component
       block, top of this file); the source breakdown has no dropdowns to free,
       so it gets its horizontal scroll back */
    .dc-leads-wrapper .dc-lw-source-breakdown.dcui-table.dcui-horizontal-scrollable{
        overflow-x: auto;
    }

    /* source breakdown: a ruled grid. numbers sit right, the source column left */
    .dc-lw-source-breakdown table.dcui-t-table{
        border-collapse: collapse;
    }

    .dc-lw-source-breakdown.dcui-table table.dcui-t-table :is(th,td){
        padding: 10px;
        border: 1px solid #ebebeb;
        text-align: right;
        white-space: nowrap;
    }

    .dc-lw-source-breakdown.dcui-table table.dcui-t-table :is(th,td):first-child{
        text-align: left;
    }

    .dc-lw-source-breakdown.dcui-table table.dcui-t-table th{
        background-color: #f2f2f2;
        font-weight: 400;
    }

    .dc-lw-source-breakdown.dcui-table table.dcui-t-table td{
        color: #9e9e9e;
    }

    .dc-lw-source-breakdown.dcui-table table.dcui-t-table td.dc-lw-sb-lost{
        background-color: #f8c9c9;
    }

    .dc-lw-source-breakdown.dcui-table table.dcui-t-table td.dc-lw-sb-won{
        background-color: #a8e9c4;
    }

    .dc-lw-source-breakdown.dcui-table table.dcui-t-table tr.dc-lw-sb-total td{
        background-color: #fffbea;
        color: inherit;
        font-weight: 600;
    }

    @media (max-width: 1199px) {
        .dc-lw-report-view .dc-lw-rv-charts{
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 1439px) {
        .dc-lw-report-view .dc-lw-rv-charts{
            gap: 20px;
            margin-bottom: 20px;
        }

        .dc-lw-report-view .dc-content-card{
            padding: 20px;
        }
    }
/* Report view */

/* Lead filters (components/common/lead_filters.js) */
    /*
     *  the space between a row's label ("Filter By :", "Sort By:") and its
     *  controls, the same in every row (user, 2026-11-06)
     */
    .dc-lead-filters-wrap{
        --dc-lf-label-gap: 15px;
    }

    .dc-lead-filters{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px var(--dc-lf-label-gap, 15px);
        padding: 0 0 20px;
    }
    
    .dc-lead-filters .dcui-calendar-range__single > span{
        position: relative;
        top: 1px;
    }

    .dc-lead-filters .dc-lf-label{
        margin-right: 0;
        white-space: nowrap;
    }

    /* every control after the label, kept on the label's line. flex: 1 so
       the search box's margin-left: auto still pushes it to the far right */
    .dc-lead-filters .dc-lf-controls{
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px 15px;
        flex: 1;
        min-width: 0;
    }

    /* lead_filters.js controlGroups: only layout boxes, unless the bar's below */
    .dc-lead-filters .dc-lf-group{
        display: contents;
    }

    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-dropdown .dcui-dt-label{
        border: 1px solid var(--dcui-line-color);
    }

    /* each panel at least as wide as its trigger, in the bar and in the Filter By
       popup, whose panels are fixed (a css 100% would be the viewport there).
       lead_filters.js measures the trigger into --dc-lf-trigger-width; the kit's
       150px stays the floor */
    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-dropdown .dcui-dropdown-panel{
        min-width: max(150px, var(--dc-lf-trigger-width, 0px));
    }

    /* every label stacked in one cell: the widest sets the trigger's width */
    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-sizer{
        display: inline-grid;
    }

    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-sizer > span{
        grid-area: 1 / 1;
        visibility: hidden;
    }

    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-sizer > span.dc-lf-sizer-shown{
        visibility: visible;
    }

    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-dropdown .dcui-dt-label:after{
        background-color: transparent;
    }

    /* sort option with asc / desc arrows on its right */
    /* nowrap: the panel then widens to fit the label and its arrows on one line */
    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-sort-option{
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-sort-arrows{
        display: inline-flex;
        gap: 2px;
        margin-left: auto;
        font-size: 10px;
    }

    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-dropdown .dcui-dropdown-menu a .dc-lf-sort-arrows i{
        width: auto;
        margin-right: 0;
    }

    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-dropdown .dcui-dropdown-menu a .dc-lf-sort-arrows i.active{
        color: var(--dcui-primary-color);
    }

    /* trigger labels share the options' icon spacing */
    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-dropdown .dcui-dropdown-menu a i,
    :is(.dc-lead-filters, .dc-lead-sort) .dc-lf-sizer > span i{
        width: 18px;
        margin-right: 6px;
    }

    .dc-lead-filters .dc-lf-dates .dcui-calendar-range__single{
        min-width: 150px;
        padding-left: 15px;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    /* the date filter's calendar (teleported to body, so a global selector
       on its popup_class): its grid fills the popover, which fitDatesPopover
       widens to the trigger, instead of the kit's fixed 270px */
    .dcui-calendar.dc-lf-dates-popover .calendar{
        width: 100%;
    }

    .dc-lead-filters .dc-lf-dates .dcui-calendar-range__single:hover{
        background-color: #eeeeee;
    }

    /* the search box sits at the far right */
    .dc-lead-filters .dc-lf-search{
        margin-left: auto;
        min-width: 220px;
    }

    @media (min-width: 992px) {
        /* the bar's five filters (user, 2026-10-26): at most 62.84% of the row,
        the rest scrolls sideways. overflow-y hidden, as overflow-x alone would
        make it auto too; the dropdown panels are fixed_panel, so not clipped.
        the controls keep their size rather than squeeze */
        .dc-lead-filters--bar .dc-lf-group-scroll{
            display: flex;
            align-items: center;
            gap: 10px 15px;
            flex: 0 1 auto;
            min-width: 0;
            max-width: 62.84%;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 4px 0;
        }

        .dc-lead-filters--bar .dc-lf-group-scroll > *{
            flex-shrink: 0;
        }

        /* a 1px scrollbar (user, 2026-10-26), in the kit's thumb colour. the
        standard properties only where ::-webkit-scrollbar isn't supported:
        Chrome would ignore the webkit rules otherwise. Firefox's thinnest is
        "thin" */
        .dc-lead-filters--bar .dc-lf-group-scroll::-webkit-scrollbar{
            height: 1px;
        }

        .dc-lead-filters--bar .dc-lf-group-scroll::-webkit-scrollbar-thumb{
            background-color: rgba(217, 217, 217, .85);
        }

        @supports not selector(::-webkit-scrollbar){
            .dc-lead-filters--bar .dc-lf-group-scroll{
                scrollbar-width: thin;
                scrollbar-color: rgba(217, 217, 217, .85) transparent;
            }
        }
    }

    @media (min-width: 1440px) {
        .dc-lead-filters .dc-lf-reset .dc-lf-r-icon{
            margin-left: 10px;
        }
    }

    /* the label on its own line, the controls under it; in the sort row too (user, 2026-11-06) */
    @media (max-width: 1919px) {
        /* .dc-lead-sort's own display: flex comes later in this file, hence the wrapper here */
        .dc-lead-filters,
        .dc-lead-filters-wrap > .dc-lead-sort{
            display: block;
        }

        .dc-lead-filters .dc-lf-label,
        .dc-lead-sort .dc-lf-label{
            display: block;
            margin-bottom: 5px;
        }
    }

    @media (max-width: 1439px) {
        .dc-lead-filters .dc-lf-reset .dc-lf-r-text{
            display: none;
        }
    }

    @media (max-width: 991px) {
        .dc-lead-filters .dc-lf-group{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row-reverse;
            width: 100%;
            justify-content: flex-end;
            gap: 10px
        }

        /* three filters a row (user, 2026-10-26): a third each, less the
           group's two 10px gaps */
        .dc-lead-filters .dc-lf-group-scroll > div{
            width: calc((100% - 20px) / 3);
        }

        /* the dropdown and date buttons fill their third (the kit sizes them
           to their text: inline-block / inline-flex) */
        .dc-lead-filters .dc-lf-group-scroll .dc-lf-dropdown .dcui-dt-label,
        .dc-lead-filters .dc-lf-group-scroll .dcui-calendar-range__single{
            width: 100%;
        }

        /* the date filter takes two thirds, the gap between them included,
           and comes first (top left) with rating beside it: the group is
           row-reverse, so the first line's flex order is rating, dates */
        .dc-lead-filters .dc-lf-group-scroll > .dc-lf-c-dates{
            width: calc((100% - 20px) / 3 * 2 + 10px);
            order: -1;
        }

        /* the stars in the middle of their (stretched) box */
        .dc-lead-filters .dc-lf-group-scroll > .dc-lf-c-rating{
            justify-content: center;
            order: -2;
        }

        .dc-lead-filters .dc-lf-controls{
            flex-direction: column;
            align-items: flex-start;
        }

        .dc-lead-filters .dc-lf-search{
            width: calc(80% - 10px);
        }

        .dc-lead-filters .dc-lf-reset{
            width: 20%;
        }
    }

    /* stacked layout (lead_filters_popup.js): two equal columns, outcome |
       rating, source | dates, then sort on the left (the popup's Reset is in
       its footer, not a control here). the controls are placed
       by their dc-lf-c-<key> class, so the order of the controls prop only
       matters within a column */
    .dc-lead-filters.dc-lead-filters--stacked{
        display: block;
        padding: 0;
    }

    .dc-lead-filters--stacked .dc-lf-controls{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .dc-lead-filters--stacked .dc-lf-c-outcome,
    .dc-lead-filters--stacked .dc-lf-c-source,
    .dc-lead-filters--stacked .dc-lf-c-sort{
        grid-column: 1;
    }

    .dc-lead-filters--stacked .dc-lf-c-rating,
    .dc-lead-filters--stacked .dc-lf-c-dates{
        grid-column: 2;
    }

    .dc-lead-filters--stacked .dc-lf-c-search{
        grid-column: 1 / -1;
    }

    .dc-lead-filters--stacked .dc-lf-c-search{
        margin-left: 0;
    }

    /* dropdown triggers fill their cell, the chevron at the right end */
    .dc-lead-filters--stacked .dc-lf-dropdown,
    .dc-lead-filters--stacked .dc-lf-dropdown .dcui-dt-label{
        display: block;
        width: 100%;
    }

    .dc-lead-filters--stacked .dc-lf-dates .dcui-calendar-range__single{
        width: 100%;
        min-width: 0;
    }

    /* the rating's box (from the kit) fills its cell */
    .dc-lead-filters--stacked .dc-lf-c-rating{
        display: flex;
        justify-content: space-between;
    }

    /*
     *  the sort order's own section below the filters (lead_filters.js rows;
     *  user, 2026-11-06: it isn't a filter): "Sort By:" and its dropdown. the
     *  filter row above keeps less space under it, as this one takes its 20px.
     */
    .dc-lead-filters:has(+ .dc-lead-sort){
        padding-bottom: 10px;
    }

    .dc-lead-sort{
        display: flex;
        align-items: center;
        gap: var(--dc-lf-label-gap, 15px);
        padding: 0 0 20px;
    }

    .dc-lead-sort .dc-lf-label{
        white-space: nowrap;
    }

    .dc-lead-sort .dc-lf-controls,
    .dc-lead-sort .dc-lf-group{
        display: contents;
    }

    /*
     *  where the filters' label sits beside them (1920px+; below, it's on its own
     *  line), both rows' controls start on the same vertical line (user,
     *  2026-11-06): the wrapper is a two column grid, labels | controls, and each
     *  row lays out on it (subgrid), so the label column is the wider label's.
     *  only with the bar's rows: the stacked popup keeps its own layout.
     */
    @media (min-width: 1920px) {
        .dc-lead-filters-wrap:has(> .dc-lead-filters--bar){
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
        }

        .dc-lead-filters-wrap > .dc-lead-filters--bar,
        .dc-lead-filters-wrap > .dc-lead-sort{
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
            align-items: center;
            column-gap: var(--dc-lf-label-gap, 15px);
        }

        .dc-lead-filters-wrap > .dc-lead-filters--bar > .dc-lf-label{
            grid-column: 1;
        }

        .dc-lead-filters-wrap > .dc-lead-filters--bar > .dc-lf-controls,
        .dc-lead-filters-wrap > .dc-lead-sort .dc-lf-dropdown{
            grid-column: 2;
        }

        /* the sort dropdown keeps its own width, not the column's */
        .dc-lead-filters-wrap > .dc-lead-sort .dc-lf-dropdown{
            justify-self: start;
        }
    }
/* Lead filters */

/* Lead selection bar (components/common/lead_selection_bar.js) */
    /* fixed to the bottom of the viewport, however short or long the list is.
       left/right 0 + margin auto centres it; transform is left free for the
       fade transition */
    .dc-lead-selection-bar{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 20px;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 10px;
        width: fit-content;
        max-width: calc(100% - 40px);
        margin: 0 auto;
        padding: 6px;
        border-radius: 8px;
        background-color: #3f4550;
        color: #fff;
        font-size: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    }

    .dc-lead-selection-bar .dc-lsb-count{
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 8px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 5px;
        white-space: nowrap;
    }

    .dc-lead-selection-bar .dc-lsb-clear{
        color: inherit;
        line-height: 1;
        cursor: pointer;
    }

    .dc-lead-selection-bar .dc-lsb-clear:hover{
        opacity: 0.75;
    }

    .dc-lead-selection-bar .dc-lsb-actions{
        display: flex;
        align-items: center;
    }

    .dc-lead-selection-bar .dcui-button.dc-lsb-btn{
        height: auto;
        padding: 5px 10px;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    .dc-lead-selection-bar .dcui-button.dc-lsb-btn:hover{
        background-color: rgba(255, 255, 255, 0.12);
    }

    .dc-lead-selection-bar .dc-lsb-btn i{
        font-size: 11px;
    }

    .dc-lead-selection-bar .dc-lsb-divider{
        width: 1px;
        height: 18px;
        margin: 0 4px;
        background-color: rgba(255, 255, 255, 0.35);
    }

    .dc-lsb-fade-enter-active,
    .dc-lsb-fade-leave-active{
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .dc-lsb-fade-enter-from,
    .dc-lsb-fade-leave-to{
        opacity: 0;
        transform: translateY(10px);
    }
/* Lead selection bar */

/* Lead single page (leads-single.js) */
    .dc-lead-single{
        align-items: flex-start;
    }

    /* as tall as the right column, with the lead list scrolling inside it.
       contain: size keeps the list's length out of the row's height, and
       align-self: stretch then gives the column the right column's height
       (height: 100% can't resolve here: the row has no set height) */
    .dc-lead-single .dc-ls-left{
        display: flex;
        flex-direction: column;
        flex: 0 0 19.68%;
        align-self: stretch;
        width: 19.68%;
        margin-right: 35px;
        min-height: 400px;
        contain: size;
    }

    /* min-width: 0 so wide content can't push the column past the page. no
       overflow: hidden, so dropdown panels (assignee) can open past its edge
       without a fixed panel, and stay as wide as their field */
    /* fills the page's height (.dc-lead-single is fitted to the viewport):
       breadcrumb and header at their own height, the body takes the rest,
       so the details can scroll inside it */
    .dc-lead-single .dc-ls-right{
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        align-self: stretch;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    .dc-lead-single .dc-ls-right > .dc-ls-breadcrumbs,
    .dc-lead-single .dc-ls-right > .dc-ls-header{
        flex: 0 0 auto;
    }

    .dc-lead-single .dc-ls-breadcrumbs{
        padding: 18px 10px 16px;
    }

    .dc-lead-single .dc-ls-bc-link{
        color: var(--dcui-primary-color);
    }

    .dc-lead-single .dc-ls-bc-separator{
        margin: 0 3px;
        color: #5b5e63;
    }

    .dc-lead-single .dc-ls-bc-current{
        color: var(--dcui-ls-black);
    }

    .dc-lead-single .dc-ls-outcome-buttons{
        gap: 15px;
    }

    .dc-lead-single .dcui-button.dc-ls-won-btn{
        border-color: var(--success-color);
        color: var(--success-color);
    }

    .dc-lead-single .dcui-button.dc-ls-won-btn:hover{
        background-color: var(--success-color);
        color: #fff;
    }

    .dc-lead-single .dcui-button.dc-ls-lost-btn{
        border-color: var(--dcui-ls-red);
        color: var(--dcui-ls-red);
    }

    .dc-lead-single .dcui-button.dc-ls-lost-btn:hover{
        background-color: var(--dcui-ls-red);
        color: #fff;
    }

    /* left column: search, filter icon and the lead cards */
    .dc-lead-single .dc-ls-left{
        padding: 15px;
    }

    .dc-lead-single .dc-ls-list-head{
        gap: 10px;
        margin-bottom: 15px;
    }

    .dc-lead-single .dc-ls-search{
        flex: 1 1 auto;
        min-width: 0;
    }

    /* it carries dcui-button; these undo the kit's button look (fill, border,
       field height, hover colours, press shift) to keep a bare icon */
    .dc-lead-single .dcui-button.dc-ls-filter-btn{
        position: relative;
        flex: 0 0 auto;
        height: auto;
        padding: 6px;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--dcui-ls-grey);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        transition: none;
    }

    .dc-lead-single .dcui-button.dc-ls-filter-btn:hover{
        background: none;
        color: var(--dcui-ls-black);
    }

    .dc-lead-single .dcui-button.dc-ls-filter-btn:active{
        transform: none;
    }

    .dc-lead-single .dc-ls-filter-badge{
        position: absolute;
        top: -3px;
        right: -5px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background-color: var(--dcui-primary-color);
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        line-height: 16px;
        text-align: center;
    }

    /* the list scrolls on its own, so the search stays in view: the box
       fills the column below the search (relative: its Data_Loader covers
       it), and DcLoadMore inside is the scroll box that pages the list */
    .dc-lead-single .dc-ls-list-box{
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .dc-lead-single .dc-ls-lead-scroll{
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .dc-lead-single .dc-ls-lead-list{
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .dc-lead-single .dc-ls-lead-card{
        border: 1px solid var(--dcui-ls-grey-2);
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .dc-lead-single .dc-ls-lead-card:hover,
    .dc-lead-single .dc-ls-lead-card:focus-visible{
        background-color: #f7fbfe;
        outline: none;
    }

    .dc-lead-single .dc-ls-lead-card.dc-ls-current{
        background-color: #eef6fc;
        cursor: default;
    }

    .dc-lead-single .dc-ls-lc-top{
        align-items: center;
        gap: 10px;
        padding: 12px 15px;
    }

    /* Lead avatar (common/lead_avatar.js): the lead's picture, else its
       initials on a colour; the size of DcFunnelBoard's card avatar (36px),
       which uses can resize */
    .dc-lead-avatar{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border-radius: 4px;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
    }

    .dc-lead-avatar img{
        width: 100%;
        height: 100%;
        border-radius: inherit;
        object-fit: cover;
    }

    /* the lead page header: the picture in the lead icon's place, filling the
       kit DcPhotoUploader around it (its size / radius props set the box) */
    .dc-lead-single .dc-ls-header-photo{
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        font-size: 20px;
    }

    .dc-lead-single .dc-ls-lc-title{
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    .dc-lead-single .dc-ls-lc-name,
    .dc-lead-single .dc-ls-lc-position,
    .dc-lead-single .dc-ls-lc-company{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dc-lead-single .dc-ls-lc-name{
        color: var(--dcui-ls-black);
    }

    .dc-lead-single .dc-ls-lc-position{
        color: var(--dcui-ls-grey);
    }

    .dc-lead-single .dc-ls-lc-meta{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex: 0 0 auto;
    }

    .dc-lead-single .dc-ls-lc-star{
        padding: 0;
        border: 0;
        background: none;
        color: #b5b5b5;
        font-size: 12px;
        line-height: 1.4;
        cursor: pointer;
    }

    .dc-lead-single .dc-ls-lc-star:hover,
    .dc-lead-single .dc-ls-lc-star.dc-ls-starred{
        color: var(--dcui-ls-gold);
    }

    .dc-lead-single .dc-ls-lc-age{
        color: var(--dcui-ls-black);
    }

    .dc-lead-single .dc-ls-lc-bottom{
        justify-content: space-between;
        gap: 10px;
        padding: 8px 15px;
        border-top: 1px solid var(--dcui-ls-grey-2);
    }

    .dc-lead-single .dc-ls-lc-company{
        min-width: 0;
        color: var(--dcui-ls-black);
    }

    .dc-lead-single .dc-ls-lc-phone{
        flex: 0 0 auto;
        color: var(--dcui-ls-grey);
        font-size: 12px;
    }

    .dc-lead-single .dc-ls-no-match{
        padding: 15px;
        color: var(--dcui-ls-grey);
        text-align: center;
    }
    /* body under the blue header: details | comments & activity */
    .dc-lead-single .dc-ls-body{
        flex: 1 1 auto;
        align-items: stretch;
        min-height: 0;
    }

    /* the details scroll on their own; the side panel keeps its height */
    .dc-lead-single .dc-ls-details{
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        padding: 0 25px;
        overflow-y: auto;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    /* comments / activity: the kit's DcCollapsibleSidePanel (320px by
       default) takes 42% of the body, or its 40px rail while folded. the
       panel draws its own left border and the chevron on it */
    .dc-lead-single .dcui-collapsible-side-panel.dc-ls-side{
        flex: 0 0 42%;
        width: auto;
        min-width: 0;
        /* 0, not a fixed floor: the body is fitted to the page, and the
           feeds scroll inside the panel */
        min-height: 0;
        border-left-color: var(--dcui-ls-grey-2);
    }

    .dc-lead-single .dcui-collapsible-side-panel.dc-ls-side.dcui-csp-collapsed{
        flex-basis: 50px;
    }

    /* the folded rail's "COMMENTS/ ACTIVITIES" kept clear of the left border */
    .dc-lead-single .dc-ls-side .dcui-csp-rail{
        padding-left: 10px;
    }

    .dc-lead-single .dc-ls-side .dcui-csp-toggle{
        top: 25px;
    }

    .dc-lead-single .dc-ls-side .dcui-activity-panel{
        padding: 25px;
    }

    /* the gap after an activity's author, which DcActivityFeed's own line loses */
    .dc-lead-single .dc-ls-activity-author,
    .funnel-change-logs-popup .dc-ls-activity-author{
        margin-right: 4px;
    }

    /* an entry's icon is drawn by the timeline dot itself: DcPointList's
       .dc-point-list-item::before gets a Font Awesome glyph as its content
       (user rule). the item has no class of its own, so :has() finds the
       dc-ls-ai-<key> marker on the line inside it. the dot's grey disc gives
       way to the glyph on white, so the dotted line doesn't run through it.
       centred on the line (user rule): the kit's border-box dot is 10px wide
       at left 2px, centred on x 7px, the middle of the 6-8px dotted line, and
       on y 9px. the 16px glyph box at left -1px centres on x 7px too, top -1px
       on y 9px. 16px + 4px gap = the dot's 10px + 10px, so the text lines up.
       codepoints from assets/libs/font-awesome/6-pro */
    .dc-lead-single .dc-point-list-item:has(.dc-ls-activity-iconed)::before,
    .funnel-change-logs-popup .dc-point-list-item:has(.dc-ls-activity-iconed)::before{
        left: -1px;
        top: -1px;
        /* a flex item next to the text: kept from shrinking off-centre */
        flex: 0 0 16px;
        width: 16px;
        height: 20px;
        margin-right: 4px;
        padding: 0;
        border-radius: 0;
        background-color: #fff;
        color: var(--dcui-ls-grey);
        font-family: "Font Awesome 6 Pro";
        font-weight: 300;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        -webkit-font-smoothing: antialiased;
    }

    /* typed activities: their type's glyph (the picker's icons) */
    .dc-lead-single .dc-point-list-item:has(.dc-ls-ai-call)::before{ content: "\f095"; }      /* phone */
    .dc-lead-single .dc-point-list-item:has(.dc-ls-ai-sms)::before{ content: "\f7cd"; }       /* comment-sms */
    .dc-lead-single .dc-point-list-item:has(.dc-ls-ai-email)::before{ content: "\f0e0"; }     /* envelope */
    .dc-lead-single .dc-point-list-item:has(.dc-ls-ai-meet)::before{ content: "\f2b5"; }      /* handshake */
    .dc-lead-single .dc-point-list-item:has(.dc-ls-ai-note)::before{ content: "\f249"; }      /* note-sticky */

    /* a brand glyph: Font Awesome 6 Brands, which has a single weight */
    .dc-lead-single .dc-point-list-item:has(.dc-ls-ai-whatsapp)::before{
        content: "\f232";                                                                          /* whatsapp */
        font-family: "Font Awesome 6 Brands";
        font-weight: 400;
    }

    /* marking the lead won / lost */
    .dc-lead-single .dc-point-list-item:has(.dc-ls-ai-won)::before{
        content: "\f118";                                                                          /* face-smile */
        color: var(--success-color);
    }

    .dc-lead-single .dc-point-list-item:has(.dc-ls-ai-lost)::before{
        content: "\f119";                                                                          /* face-frown */
        color: var(--dcui-ls-red);
    }

    .dc-lead-single .dc-ls-activity-text,
    .funnel-change-logs-popup .dc-ls-activity-text{
        min-width: 0;
    }

    /* "(2026-10-13 at 3:41 PM.)": the date and time don't break across lines */
    .dc-lead-single .dc-ls-activity-stamp,
    .funnel-change-logs-popup .dc-ls-activity-stamp{
        white-space: nowrap;
    }

    /* the activity composer's type picker: a borderless label in front of the text box */
    .dc-lead-single .dc-ls-activity-type{
        display: flex;
        align-items: center;
        align-self: center;
        flex: 0 0 auto;
    }

    .dc-lead-single .dc-ls-activity-type-dropdown .dcui-dt-label{
        height: auto;
        line-height: 1.5;
        padding: 6px 30px 6px 8px;
        border: 0;
        color: var(--dcui-ls-grey);
        /* a resting fill a shade lighter than the kit's #eeeeee hover */
        background-color: #f5f5f5;
    }

    .dc-lead-single .dc-ls-activity-type-dropdown .dcui-dt-label:after{
        right: 6px;
        background-color: transparent;
    }

    /* the resting fill above outranks the kit's hover / open rule, so its
       #eeeeee is restated here */
    .dc-lead-single .dc-ls-activity-type-dropdown .dcui-dt-label:hover,
    .dc-lead-single .dc-ls-activity-type-dropdown.open .dcui-dt-label{
        color: #222;
        background-color: #eeeeee;
    }

    /* the composer sits at the bottom of the panel, so its type menu opens
       upwards: anchored above the toggle, and the kit's opening scale
       (dcuiAnimateSubMenu) grows from the panel's bottom edge */
    .dc-lead-single .dc-ls-activity-type-dropdown .dcui-dropdown-panel{
        top: auto;
        bottom: calc(100% + 5px);
        transform-origin: bottom left;
    }

    /* Lead form (components/common/lead_form.js: the lead page and the Create New Lead
       popup). label | value rows joined into one bordered table */
    .dc-lead-form .dc-ls-fields{
        border: 1px solid var(--dcui-ls-grey-2);
        border-radius: 4px;
    }

    .dc-lead-form .dc-ls-field-row{
        display: flex;
        min-height: 52px;
    }

    .dc-lead-form .dc-ls-field-row + .dc-ls-field-row{
        border-top: 1px solid var(--dcui-ls-grey-2);
    }

    .dc-lead-form .dc-ls-field-label{
        display: flex;
        align-items: center;
        flex: 0 0 35%;
        min-width: 0;
        margin: 0;
        padding: 0 18px;
        border-right: 1px solid var(--dcui-ls-grey-2);
        color: var(--dcui-ls-grey);
        font-weight: normal;
    }

    /* a required row's star (lead_form.js required_marks) */
    .dc-lead-form .dc-ls-required{
        margin-left: 3px;
        color: var(--dcui-ls-red);
    }

    /* email / phone's "(or … is required)" DcTooltip, after the label */
    .dc-lead-form .dc-ls-hint{
        margin-left: 6px;
    }

    .dc-lead-form .dc-ls-field-value{
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* the fields inside a cell drop their own border; the table draws the lines */
    .dc-lead-form .dc-ls-input{
        flex: 1 1 auto;
        margin: 0;
    }

    /* a read-only value (a won / lost lead's Last Funnel Step), lined up with the inputs */
    .dc-lead-form .dc-ls-field-text{
        padding: 0 18px;
        color: var(--dcui-body-color);
    }

    .dc-lead-form .dc-ls-input .dcui-form-control{
        height: 50px;
        padding: 0 18px;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .dc-lead-form .dc-ls-input .dcui-form-control:focus{
        background-color: #f7fbfe;
    }

    .dc-lead-form .dc-ls-field-value .multi-select-dropdown.dc-msd-field .dcui-dropdown-toggle.dcui-dt-label{
        height: 50px;
        padding-left: 18px;
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }

    .dc-lead-form .dc-ls-field-value .multi-select-dropdown.dc-msd-field .dcui-dt-label:after{
        right: 18px;
    }

    .dc-lead-form .dc-ls-rating{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 50px;
        padding: 0 18px;
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }
    /* links and custom questions */
    .dc-lead-form .dc-ls-group-label{
        margin: 25px 0 8px;
        color: #222;
        font-size: 15px;
        font-weight: normal;
    }

    /* the left cell holds a field (type dropdown, question) instead of a label */
    .dc-lead-form .dc-ls-pair-key{
        padding: 0;
    }

    /* link type, group and funnel step: dropdowns that fill their table cell */
    .dc-lead-form .dc-ls-link-type,
    .dc-lead-form .dc-ls-link-type .dcui-dt-label,
    .dc-lead-form .dc-ls-field-dropdown,
    .dc-lead-form .dc-ls-field-dropdown .dcui-dt-label{
        display: block;
        width: 100%;
    }

    .dc-lead-form .dc-ls-link-type .dcui-dt-label,
    .dc-lead-form .dc-ls-field-dropdown .dcui-dt-label{
        height: 50px;
        line-height: 50px;
        padding-left: 18px;
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }

    /* a long pick (group name - sub-text, step) ends in "…" before the chevron */
    .dc-lead-form .dc-ls-field-dropdown .dcui-dt-label{
        padding-right: 44px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* the Group field's name cuts itself, as it may be a DcTooltip (inline-flex in the kit) */
    .dc-lead-form .dc-ls-group-name{
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* the kit centres the chevron with a line-height made for the standard field
       height, so in this taller toggle the glyph sat off its box's centre and the
       open rotation swung it round in an arc. a one-glyph box centred on the
       toggle makes it turn in place (same fix as DcMultiSelectDropdown field mode) */
    .dc-lead-form .dc-ls-link-type .dcui-dt-label:after,
    .dc-lead-form .dc-ls-field-dropdown .dcui-dt-label:after,
    .dc-lead-single .dc-ls-activity-type-dropdown .dcui-dt-label:after{
        top: 50%;
        bottom: auto;
        height: 1em;
        margin-top: -0.5em;
        line-height: 1;
    }

    .dc-lead-form .dc-ls-link-type .dcui-dt-label:after,
    .dc-lead-form .dc-ls-field-dropdown .dcui-dt-label:after{
        right: 18px;
        background-color: transparent;
    }

    .dc-lead-form .dc-ls-placeholder{
        color: var(--dcui-ls-grey);
    }

    /* the row's bin shows on hover or keyboard focus */
    .dc-lead-form .dc-ls-row-remove{
        margin-right: 10px;
        color: var(--dcui-ls-grey);
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .dc-lead-form .dc-ls-pair-row:hover .dc-ls-row-remove,
    .dc-lead-form .dc-ls-pair-row:focus-within .dc-ls-row-remove{
        opacity: 1;
    }

    .dc-lead-form .dc-ls-row-remove:hover{
        color: var(--dcui-ls-red);
    }

    .dc-lead-form .dc-ls-add-row{
        display: flex;
        justify-content: flex-end;
        margin-top: 5px;
    }

    .dc-lead-form .dcui-button.dc-ls-add-btn{
        height: auto;
        padding: 5px 0;
        color: var(--dcui-primary-color);
    }

    .dc-lead-form .dcui-button.dc-ls-add-btn:hover{
        background-color: transparent;
        color: var(--dcui-primary-color);
        text-decoration: underline;
    }

/* Lead single page */

/* Create New Lead popup (components/common/create_lead_popup.js) */
    .dc-create-lead-popup .popup.dc-clp-dialog{
        width: 1000px;
        max-width: calc(100vw - 32px);
    }

    /* the form on the left, a rule, the profile picture on the right */
    /*
     *  the body grows with its rows; past the viewport it's capped and
     *  scrolls, keeping the title and buttons in view (280px = the popup's
     *  margins, padding, title and button row).
     */
    .dc-create-lead-popup .dc-clp-body{
        display: flex;
        align-items: stretch;
        max-height: calc(100vh - 280px);
        /* visible height on mobile; the vh line above is the fallback */
        max-height: calc(100dvh - 280px);
        overflow-y: auto;
    }

    .dc-create-lead-popup .dc-clp-form{
        flex: 0 0 52%;
        min-width: 0;
        padding-right: 25px;
        border-right: 1px solid var(--dcui-ls-grey-2);
    }

    .dc-create-lead-popup .dc-clp-picture{
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 25px;
    }

    .dc-create-lead-popup .dc-clp-picture-label{
        margin: 0 0 15px;
        color: #222;
        font-size: 15px;
        font-weight: normal;
    }

    /*
     *  one height for the drop box and the picked picture's card (≈ 115px), so
     *  picking or removing a picture doesn't resize the popup (user rule)
     */
    .dc-create-lead-popup .dc-clp-dropzone{
        display: flex;
        height: 150px;
        padding: 10px;
        border: 1px solid var(--dcui-ls-grey-2);
        border-radius: 6px;
    }

    /* the kit never shows the picked file's ✕; without it the picture couldn't be swapped */
    .dc-create-lead-popup .preview-card:hover .file-remove-btn,
    .dc-create-lead-popup .preview-card:focus-within .file-remove-btn{
        display: block;
    }

    @media (max-width: 1679px){
        .dc-lead-single .dc-ls-left{
            margin-right: 15px;
        }
    }

    /* ≤ 991px: the picture goes under the form, and both take the full width */
    @media (max-width: 991px){
        .dc-create-lead-popup .dc-clp-body{
            flex-direction: column;
        }

        .dc-create-lead-popup .dc-clp-form,
        .dc-create-lead-popup .dc-clp-picture{
            flex: 0 0 auto;
            width: 100%;
        }

        .dc-create-lead-popup .dc-clp-form{
            padding-right: 0;
            border-right: 0;
        }

        .dc-create-lead-popup .dc-clp-picture{
            padding: 25px 0 0;
        }
    }

/* Assignee bubbles (components/common/assignee_bubbles.js) */
    /* nobody assigned: the bubble at 31px (user, 2026-11-05), not the kit's 35px */
    .dcui-photo-bubble.dc-ab-empty{
        --dcui-photo-bubble-size: 31px;
    }

    /* read-only: the empty bubble and the "+N" bubble greyed, so neither reads as an "add"
       button. the users' own bubbles keep their colours (user, 2026-11-05) */
    .dc-ab-readonly{
        filter: grayscale(1);
        opacity: 0.6;
    }

/* Import leads popup (components/common/import_leads_popup.js) */
    /* one height for the drop box and the picked file's card, as in Create New Lead */
    .import-leads-popup .ilp-dropzone{
        display: flex;
        height: 150px;
        padding: 10px;
        border: 1px solid var(--dcui-ls-grey-2);
        border-radius: 6px;
    }

    /* a sheet has no thumbnail: hide the kit's <img> and draw a file icon in its place */
    .import-leads-popup .preview-img{
        display: none;
    }

    .import-leads-popup .image-container::before{
        content: "\f65b";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 106px;
        height: 92px;
        border-bottom: 1px solid #a2a2a2;
        color: #5f6368;
        font-family: "Font Awesome 6 Pro";
        font-weight: 300;
        font-size: 40px;
    }

    /* a long list scrolls with the popup, past its max-height */
    .import-leads-popup .ilp-failed-list{
        margin: 0;
        padding: 0 10px;
        list-style: none;
        border: 1px solid var(--dcui-ls-grey-2);
        border-radius: 6px;
    }

    .import-leads-popup .ilp-failed-row{
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 0;
        border-bottom: 1px solid var(--dcui-ls-grey-2);
    }

    .import-leads-popup .ilp-failed-row:last-child{
        border-bottom: 0;
    }

    .import-leads-popup .ilp-failed-where{
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .import-leads-popup .ilp-failed-reason{
        color: var(--error-color, #d93025);
    }

    /* the kit never shows the picked file's ✕; without it the file couldn't be swapped */
    .import-leads-popup .preview-card:hover .file-remove-btn,
    .import-leads-popup .preview-card:focus-within .file-remove-btn{
        display: block;
    }

/* Lead outcome effects (components/common/lead_outcome_effects.js) */
    /* teleported to <body>, so these aren't scoped under a page class. it sits
       over everything without catching clicks */
    .dc-lead-outcome-effects{
        position: fixed;
        inset: 0;
        z-index: 100000;
        overflow: hidden;
        pointer-events: none;
    }

    .dc-loe-fade-enter-active,
    .dc-loe-fade-leave-active{
        transition: opacity 0.4s ease;
    }

    .dc-loe-fade-enter-from,
    .dc-loe-fade-leave-to{
        opacity: 0;
    }

    .dc-loe-canvas{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* the trophy / cloud, centred */
    .dc-loe-stage{
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
    }

    @keyframes dc-loe-pop{
        from{ opacity: 0; transform: scale(0.7); }
        to{ opacity: 1; transform: scale(1); }
    }

    /* balloons: the legacy DoLeads shape, string and knot, floating up once */
    .dc-loe-balloons{
        position: absolute;
        inset: 0;
    }

    .dc-loe-balloon{
        position: absolute;
        bottom: 0;
        width: 84px;
        height: 100px;
        border-radius: 75% 75% 70% 70%;
        opacity: 0.85;
        box-shadow: inset -7px -3px 10px rgba(0, 0, 0, 0.15);
        transform: translateY(110%);
        animation-name: dc-loe-float;
        animation-timing-function: ease-in;
        animation-fill-mode: both;
        /* each rises again from below at its own pace, until closed */
        animation-iteration-count: infinite;
    }

    .dc-loe-balloon:before{
        content: "";
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        width: 1px;
        height: 60px;
        margin: auto;
        background-color: rgba(0, 0, 0, 0.35);
    }

    .dc-loe-balloon:after{
        content: "▲";
        position: absolute;
        top: 95px;
        left: 0;
        right: 0;
        margin: auto;
        color: inherit;
        font-size: 10px;
        text-align: center;
    }

    @keyframes dc-loe-float{
        from{ transform: translateY(110%); }
        to{ transform: translateY(calc(-100vh - 200px)); }
    }

    /* trophy: a gold cup in a turning ring of light, with sparkles */
    .dc-loe-trophy{
        position: relative;
        width: 300px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dc-loe-rays{
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: repeating-conic-gradient(rgba(255, 204, 0, 0.28) 0deg 10deg, transparent 10deg 30deg);
        -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
        mask-image: radial-gradient(circle, #000 25%, transparent 70%);
        animation: dc-loe-spin 6s linear infinite, dc-loe-pop 0.5s ease-out both;
    }

    .dc-loe-cup{
        position: relative;
        font-size: 110px;
        color: #f5b301;
        filter: drop-shadow(0 6px 14px rgba(245, 179, 1, 0.45));
        animation: dc-loe-cup 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both;
    }

    .dc-loe-sparkle{
        position: absolute;
        transform: translate(-50%, -50%);
        animation: dc-loe-twinkle 1.2s ease-in-out infinite both;
    }

    @keyframes dc-loe-spin{
        to{ transform: rotate(360deg); }
    }

    @keyframes dc-loe-cup{
        from{ opacity: 0; transform: translateY(40px) scale(0.4) rotate(-12deg); }
        to{ opacity: 1; transform: none; }
    }

    @keyframes dc-loe-twinkle{
        0%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
        50%{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    /* lost: a red "LOST" rubber stamp slams onto the page and stays, tilted
       like a stamp on a file. the stamp drops from 3x size and settles, the
       tilted wrapper gives a short jolt as it lands, and a ring of ink
       spreads and fades once. a see-through white keeps the page readable */
    .dc-loe-stamp-wrap{
        position: relative;
        transform: rotate(-12deg);
        animation: dc-loe-stamp-jolt 0.35s ease-out 0.4s both;
    }

    .dc-loe-stamp{
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 12px 30px;
        border: 6px solid var(--dcui-ls-red);
        border-radius: 14px;
        background-color: rgba(255, 255, 255, 0.6);
        /* the inner line of a double-ruled stamp */
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6), inset 0 0 0 5px rgba(214, 69, 69, 0.45);
        color: var(--dcui-ls-red);
        opacity: 0.9;
        animation: dc-loe-stamp-slam 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
    }

    .dc-loe-stamp-icon{
        font-size: 54px;
    }

    .dc-loe-stamp-text{
        font-size: 64px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .dc-loe-stamp-ink{
        position: absolute;
        inset: -14px;
        border: 3px solid rgba(214, 69, 69, 0.4);
        border-radius: 22px;
        opacity: 0;
        animation: dc-loe-stamp-ink 0.7s ease-out 0.38s both;
    }

    @keyframes dc-loe-stamp-slam{
        0%{ opacity: 0; transform: scale(3); }
        70%{ opacity: 0.9; transform: scale(0.94); }
        100%{ opacity: 0.9; transform: scale(1); }
    }

    @keyframes dc-loe-stamp-jolt{
        0%, 100%{ transform: rotate(-12deg) translate(0, 0); }
        25%{ transform: rotate(-12deg) translate(-4px, 3px); }
        50%{ transform: rotate(-12deg) translate(3px, -2px); }
        75%{ transform: rotate(-12deg) translate(-2px, 1px); }
    }

    @keyframes dc-loe-stamp-ink{
        0%{ opacity: 0.7; transform: scale(0.92); }
        100%{ opacity: 0; transform: scale(1.3); }
    }

    /* "reduce motion": the trophy and the stamp, still; no ink ring */
    @media (prefers-reduced-motion: reduce){
        .dc-loe-rays,
        .dc-loe-cup,
        .dc-loe-sparkle,
        .dc-loe-stamp-wrap,
        .dc-loe-stamp{
            animation: none;
        }

        .dc-loe-sparkle,
        .dc-loe-stamp-ink{
            display: none;
        }
    }
/* Lead outcome effects */
  .docld-notification-container {
    position: relative;
    min-height: 500px;
}

.docld-notification-section {
    padding-top: 30px;
}

.docld-notification-section__section-title {
    font-weight: 500;
    font-size: 15px;
}

.docld-notification-section__section-item__container {
    margin-top: 15px;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 7px;
}

.docld-notification-section__section-item {
    background-color: white;
    border-bottom: 1px solid rgb(226, 226, 226);
    color: #5C5C5C;
}

.docld-notification-section__section-item__content {
    display: flex;
    justify-content: space-between;
    padding: 13px 15px;
    align-items: center;
    height: 45px;
}

.docld-notification-section__section-item__container__icon-container {
    display: flex;
    gap: 10px;
    flex: 0 0 30%;
    padding-left: 3px;
    align-items: center;
}

.docld-notification-section__section-item__container__mark_as_read_btn {
    padding: 8px 10px 9px;
    height: 30px;
    font-size: 14px;
}

.docld-notification-section__section-item__container__icon-container__icon {
    color: var(--dcui-secondary-color);
}

.docld-notification-section__section-item__container__icon-container__title {

}

.docld-notification-section__section-item__container__description-container {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 5px;
}

.docld-notification-section__section-item__container__description-container__user-icon {

}

.docld-notification-section__section-item__container__description-container__description {

}

.docld-notification-section__section-item__container__date-container {

}

.docld-notification-section__section-item__container__date-container__created_date {

}

.docld-notification-section__section-item__container .docld-notification-section__section-item:first-child {
    border-radius: 7px 7px 0 0;
}

.docld-notification-section__section-item__container .docld-notification-section__section-item:last-child {
    border-radius: 0 0 7px 7px;
    border-bottom: 0;
}

.docld-notification-section__section-item__container .docld-notification-section__section-item:only-child {
    border-radius: 7px 7px 7px 7px;
    border-bottom: 0;
}

.docld-notification-section__section-item:hover {
    background-color: color-mix(in srgb, var(--dcui-primary-color) 20%, white 80%);
    cursor: pointer;
}

.docld-notification-section__section-item__container__date-container__unread {
    color: var(--dcui-primary-color);
    width: 15px;
}

.docld-notification-section__section-item__container__date-container__unread__symbol {

}

.docld-notification-section__section-item.unread {
    color: black;
    font-weight: 500;
}

.docld-notification-section__no-notification__container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    gap: 15px;
    flex-direction: column;
}

.docld-notification-section__no-notification__container__image {
    width: 90px;
}

.docld-notification-section__no-notification__container__text {
    font-weight: 700;
    font-size: 26px;
}

@media screen and (max-width: 1025px) {
    .docld-notification-section__section-item__content {
        height: 70px;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {

    .docld-notification-section__section-item__content{
        height: 90px;
        display: grid;
        align-items: center;
    }
    .docld-notification-section__section-item__container__date-container__unread{
        grid-column: 5 / 5;
        grid-row: 2 / 2;
    }
    .docld-notification-section__section-item__container__icon-container{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .docld-notification-section__section-item__container__description-container{
        grid-column: 1 / 5;
        grid-row: 2 / 2;
    }
    .docld-notification-section__section-item__container__date-container{
        grid-column: 4 / 6;
        grid-row: 1 / 2;
        display: flex;
        justify-content: flex-end;
    }
    .docld-notification-section__section-item__container__description-container__description{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 270px;
    }
}
 /**
 * Declarations
 */
:root {
    
    --dark-primary-color: #181818;
    --dark-secondary-color: #242424;
    --dark-tertiary-color: #424242;
    --dark-quaternary-color: #ffffff;
    --dark-quinary-color:#000000;
    --dark-senary-color: #7b7b7b;
    --dark-seven-color: #c7c7c7;
    --dark-eight-color:#3e3e3f;
    --dark-color-text: #ffffff;
    --dark-headings-color: #ffffff;
    --dark-background-color: #515151;
    
    --light-primary-color: #181818;
    --light-secondary-color: #000000;
    --light-tertiary-color: #ffffff;
    --light-quaternary-color: #ffffff;
    --light-quinary-color:#dbdbdb;
    --light-senary-color: #7b7b7b;
    --light-color-text: #000000;
    --body-color: #000000;
    --light-headings-color: #000000;
    --success-color: #06c349;
    --error-color: #dd0707;
    --warning-color: #dd6007;
    --menu-selected-color:  rgba(0, 0, 0, 1);
}

/**
 * Normalization
 */

a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

p {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dc-headings-color);
}


/**
 * Helpers
 */

.validation_errors {
    background-color: rgb(131, 0, 0);
    border-radius: 3px;
    height: auto;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
    max-width: 285px;
    position: absolute;
    text-align: left;
    bottom: 70px;
    width: auto;
    z-index: 99993;
    padding: 10px 0px;
}

.validation_errors:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #700202;
    top: 100%;
    left: 50%;
}

.validation_errors ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 15px;
    list-style-type: none;
}

.validation_errors li {
    padding-right: 12px;
    word-wrap: break-word;
}

.relative {
    position: relative !important;
}

.initial {
    position: initial !important;
}

.center-div {
    margin: 0 auto;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

.f-w-300 {
    font-weight: 300;
}

.f-w-400 {
    font-weight: 400;
}

.f-w-500 {
    font-weight: 500;
}

.f-w-600 {
    font-weight: 600;
}

.f-w-700 {
    font-weight: 700;
}

.f-s-20 {
    font-size: 20px;
}

.f-s-18 {
    font-size: 18px;
}

.f-s-22 {
    font-size: 22px;
}

.f-s-25 {
    font-size: 25px;
}

.f-s-30 {
    font-size: 30px;
}

.f-s-35 {
    font-size: 35px;
}
.l-h-1 {
    line-height: 1;
}

.line-height-1 {
    line-height: 1;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.m-10 {
    margin: 10px !important;
}

.m-t-0 {
    margin-top: 0 !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-20 {
    margin-top: 20px !important;
}

.m-t-25 {
    margin-top: 25px !important;
}

.m-t-40 {
    margin-top: 40px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

.m-b-0 {
    margin-bottom: 0 !important;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-15 {
    margin-bottom: 15px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-25 {
    margin-bottom: 25px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-r-auto {
    margin-right: auto !important;
}

.m-r-0 {
    margin-right: 0px !important;
}

.m-r-5 {
    margin-right: 5px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.m-r-15 {
    margin-right: 15px !important;
}

.m-r-20 {
    margin-right: 20px !important;
}

.m-r-30 {
    margin-right: 30px !important;
}

.m-r-50 {
    margin-right: 50px !important;
}

.m-l-auto {
    margin-left: auto !important;
}

.m-l-0 {
    margin-left: 0px !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-15 {
    margin-left: 15px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.m-l-30 {
    margin-left: 30px !important;
}

.m-lr-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.p-5 {
    padding: 5px !important;
}

.p-10 {
    padding: 10px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-25 {
    padding: 25px !important;
}

.p-30 {
    padding: 30px !important;
}

.p-t-0 {
    padding-top: 0px !important;
}

.p-t-5 {
    padding-top: 5px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

.p-t-15 {
    padding-top: 15px !important;
}

.p-t-35 {
    padding-top: 35px !important;
}

.p-b-0 {
    padding-bottom: 0px !important;
}

.p-b-2 {
    padding-bottom: 2px !important;
}

.p-b-5 {
    padding-bottom: 5px !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

.p-b-15 {
    padding-bottom: 15px !important;
}

.p-b-20 {
    padding-bottom: 20px !important;
}

.p-b-35 {
    padding-bottom: 35px !important;
}

.p-r-0 {
    padding-right: 0px !important;
}

.p-r-5 {
    padding-right: 5px !important;
}

.p-r-10 {
    padding-right: 10px !important;
}

.p-r-15 {
    padding-right: 15px !important;
}

.p-r-20 {
    padding-right: 20px !important;
}

.p-r-35 {
    padding-right: 35px !important;
}

.p-l-0 {
    padding-left: 0px !important;
}

.p-l-5 {
    padding-left: 5px !important;
}

.p-l-10 {
    padding-left: 10px !important;
}

.p-l-15 {
    padding-left: 15px !important;
}

.p-l-20 {
    padding-left: 20px !important;
}

.p-l-35 {
    padding-left: 35px !important;
}

.p-lr-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.color-inherit {
    color: inherit;
}

.text-success {
    color: #69bb67 !important;
}

.text-warning {
    color: #dd992d !important;
}

.text-danger {
    color: #ed1010 !important;
}

.text-notice {
    color: #4e4e4e !important;
}

.text-grey {
    color: #b3b3b3 !important;
}


.line-clamp-8 {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-7 {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-6 {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overflow-wrap-anywhere{
    overflow-wrap: anywhere;
}
.float-right{
    float: right;
}
.float-left{
    float: left;
}
.vertical-align-sub{
    vertical-align: sub
}
.w-20 {
    width: 20px;
}

.w-30 {
    width: 30px;
}

.w-40 {
    width: 40px;
}

.w-50 {
    width: 50px;
}

.w-70 {
    width: 70px;
}

.w-100 {
    width: 100px;
}

.w-150 {
    width: 150px;
}

.w-200 {
    width: 200px;
}

.w-250 {
    width: 250px;
}

.w-300 {
    width: 300px;
}

.w-400 {
    width: 400px;
}

.w-450 {
    width: 450px;
  }
  
.w-500 {
    width: 500px;
}

.w-550 {
    width: 550px;
}


.w-600 {
    width: 600px;
}
.w-900 {
    width: 900px;
}


.w-10p {
    width: 10%;
}

.w-50p {
    width: 50%;
}

.w-60p {
    width: 60%;
}

.w-70p {
    width: 70%;
}

.min-w-50p {
    min-width: 50%;
}

.max-w-50 {
    max-width: 50px !important;
}

.max-w-100 {
    max-width: 100px !important;
}

.max-w-145 {
    max-width: 145px !important;
}

.max-w-200 {
    max-width: 200px !important;
}

.max-w-250 {
    max-width: 250px !important;
}

.max-w-300 {
    max-width: 300px !important;
}

.max-w-360 {
    max-width: 360px !important;
}

.max-w-400 {
    max-width: 400px !important;
}

.max-w-500 {
    max-width: 500px !important;
}

.max-w-600 {
    max-width: 600px !important;
}

.max-w-900 {
    max-width: 900px !important;
}

.max-h-100 {
    max-height: 100px !important;
}

.max-h-150 {
    max-height: 150px !important;
}

.max-h-200 {
    max-height: 200px !important;
}

.max-h-250 {
    max-height: 250px !important;
}

.max-h-270 {
    max-height: 270px !important;
}

.max-h-300 {
    max-height: 300px !important;
}

.max-h-350 {
    max-height: 350px !important;
}

.max-h-400 {
    max-height: 400px !important;
}

.max-h-500 {
    max-height: 500px !important;
}

.max-h-600 {
    max-height: 600px !important;
}

.h-0{
    height: 0 !important;
}

.h-75{
    height: 75px !important;
}

.h-150 {
    height: 150px !important;
}
.h-170 {
    height: 170px !important;
}
.h-200 {
    height: 200px !important;
}

.h-300 {
    height: 300px !important;
}

.h-500 {
    height: 500px !important;
}

.min-w-40 {
    min-width: 40px !important;
}

.min-w-50 {
    min-width: 50px !important;
}

.min-w-70{
    min-width: 70px !important;
}

.min-w-100 {
    min-width: 100px !important;
}

.min-w-200 {
    min-width: 200px !important;
}

.min-w-300 {
    min-width: 300px !important;
}

.min-w-360 {
    min-width: 360px !important;
}

.min-w-400 {
    min-width: 400px !important;
}

.min-w-450{
    min-width: 450px !important;
}

.min-w-500 {
    min-width: 500px !important;
}

.min-w-550 {
    min-width: 550px !important;
}

.min-w-600 {
    min-width: 600px !important;
}

.min-h-50 {
    min-height: 50px !important;
}

.min-h-100 {
    min-height: 100px !important;
}

.min-h-150 {
    min-height: 150px !important;
}

.min-h-200 {
    min-height: 200px !important;
}

.min-h-250 {
    min-height: 250px !important;
}

.min-h-270 {
    min-height: 270px !important;
}

.min-h-300 {
    min-height: 300px !important;
}

.min-h-350 {
    min-height: 350px !important;
}

.min-h-450 {
    min-height: 450px !important;
}

.min-h-500 {
    min-height: 500px !important;
}

.min-h-600 {
    min-height: 600px !important;
}

.min-h-650 {
    min-height: 650px !important;
}

.display-none {
    display: none;
}

.flex-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.display-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-directions-column {
    flex-direction: column;
}

.flex-directions-row {
    flex-direction: row;
}

.gap-5{
    gap: 5px;
}

.gap-10{
    gap: 10px;
}

.gap-15{
    gap: 15px;
}

.inline-block {
    display: inline-block;
}

.inline-flex {
    display: inline-flex;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-baseline {
    align-items: baseline;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-space-around {
    justify-content: space-around;
}

.border-bottom {
    border-bottom: 1px solid #dcdcdc;
}

.red-border {
    border: 1px solid red !important;
}

.box-shadow-none {
    box-shadow: none;
}

.ellipsis {
    text-overflow: ellipsis;
    /* enables ellipsis */
    white-space: nowrap;
    /* keeps the text in a single line */
    overflow: hidden;
    /* keeps the element from overflowing its parent */
}

.text-overflow-ellipsis {
    text-overflow: ellipsis;
}

.white-space-nowrap {
    white-space: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.no-border {
    border: none;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

.r-45 {
    -ms-transform: rotate(45deg);
    /* IE 9 */
    transform: rotate(45deg);
}

.r-222 {
    -ms-transform: rotate(222deg);
    /* IE 9 */
    transform: rotate(222deg);
}


/*
* Image
*/
.object-fit_cover {
    object-fit: cover;
}

/**
 * Form elements
 */

.form-group {
    margin-bottom: 20px;
}

.form-group.horizontal {
    display: table;
    width: 100%;
}

.form-group.horizontal>* {
    display: table-cell;
}

.form-group.horizontal>.fld-label {
    width: 33%;
}

.form-group.horizontal>.fld-label.with-colon {
    position: relative;
}

.form-group.horizontal>.fld-label.with-colon:after {
    content: ':';
    position: absolute;
    right: 5px;
}

.fld-label {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    font-size: 15px;
    color: var(--color-text);
}

.form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 10px 10px;
    font-size: 15px;
    color: #555555;
    outline: 0;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #939393;
    -webkit-transition: border-color ease-in-out 0.15s;
    -moz-transition: border-color ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s;
}

.dark-mode .form-control {
    color: #fdfdfd;
    background-color: var(--dark-secondary-color);
}

textarea.form-control {
    min-height: 110px;
    max-width: 100%;
    max-height: 200px;
    min-width: 100%;
    line-height: 1;
}

textarea.form-control.no-resize {
    resize: none;
}

.form-control:focus {
    border-color: var(--dark-primary-color);
    background-color: #fff;
    outline: 0 !important;

}

.dark-mode .form-control:focus {
    border-color: var(--dark-primary-color);
    border: 1px solid #939393;
    background-color:  var(--dark-secondary-color);
}

.form-control:disabled {
    background-color: #606060;
}

.form-control::-webkit-input-placeholder {
    color: #c8c8c8;
    /* Chrome/Opera/Safari */
    font-weight: 300;
}

.form-control::-moz-placeholder {
    color: #c8c8c8;
    /* Firefox 19+ */
    font-weight: 300;
}

.form-control:-ms-input-placeholder {
    color: #c8c8c8;
    /* IE 10+ */
    font-weight: 300;
}

.form-control:-moz-placeholder {
    color: #c8c8c8;
    /* Firefox 18- */
    font-weight: 300;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

.dark-mode .form-control:-webkit-autofill,
.dark-mode .form-control:-webkit-autofill:hover,
.dark-mode .form-control:-webkit-autofill:focus,
.dark-mode .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgb(77, 77, 77) inset;
    -webkit-text-fill-color: #ffffff;
}

.form-control.has-error {
    border-color: var(--error-color);
}

.icon-control {
    position: relative;
}

.icon-control .ic-icon {
    position: absolute;
    top: 1px;
    right: 1px;
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    -webkit-transition: color ease-in-out 0.15s;
    -moz-transition: color ease-in-out 0.15s;
    transition: color ease-in-out 0.15s;
}

.icon-control .ic-icon:hover {
    color: var(--dark-secondary-color);
}

.dark-mode .icon-control input{
    background-color:var(--dark-secondary-color)
}

.dark-mode .icon-control .ic-icon:hover {
    color: var(--dark-Senary-color);
}

.radio,
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 4px 0 0;
    line-height: normal;
    cursor: pointer;
    box-sizing: border-box;
}

.radio label,
.checkbox label {
    display: inline-block;
    min-height: 20px;
    cursor: pointer;
    position: relative;
    padding-left: 25px !important;
    margin-right: 15px;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 20px;
}

.radio label:before,
.checkbox label:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.radio label:before {
    bottom: 2.5px;
    border-radius: 99px;
    border-color: #c2c2c2;
    -webkit-transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);
    transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);
}

.checkbox label:before {
    top: -0.6px;
    border-radius: 3px;
    border-color: #c2c2c2;
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
}

.radio input[type=radio]:checked+label:before {
    border-width: 5px;
    border-color: var(--light-primary-color);
}

.checkbox input[type=checkbox]:checked+label:before {
    border-width: 8.5px;
    border-color: var(--light-primary-color);
}

.checkbox label {
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
}

.checkbox label:after {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 3px;
    top: -2px;
    font-size: 11px;
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
    border-radius: 3px;
}

.checkbox input[type=checkbox]:checked+label:after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c";
    color: #fff;
    font-weight: 700;
}

.radio input[type="radio"]:disabled+label,
.checkbox input[type="checkbox"]:disabled+label {
    cursor: not-allowed;
}

.button {
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin-bottom: 0;
    height: 40px;
    border: 1px solid var(--quaternary-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: var(--primary-color);
    border-radius: 3px;
    outline: 0;
    white-space: nowrap;
    background-color: var(--quaternary-color);
    text-shadow: none;
    box-shadow: none;
    line-height: 0;
    padding: 9px 20px 8px;
    position: relative;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.dark-mode .button.login {
    background-color: var(--dark-primary-color);
    border: 1px solid #939393 !important;
}

.dark-mode .button {
    background-color: var(--dark-primary-color);
    border: 1px solid #939393 !important;
}

.light-mode .button.login {
    background-color: var(--light-quaternary-color);
    border: 1px solid #939393 !important;
    color: black;
}

.light-mode .button {
    background-color: var(--light-primary-color);
    border: 1px solid #939393 !important;
    color: white;
}

/*
VS Button Style
 */
.button.button-blue {
     border:1px solid #025281 !important;
     color: #fff;
     background-color: #025281 !important;
 }
.button.button-blue:hover {
    background-color: #0079c0 !important;
}
.button.button-white-blue {
    border:1px solid transparent !important;
    color: #0079c0;
    background-color: #fff !important;
}
.button.button-white-blue:hover {
    background-color: #0079c0 !important;
}
.button.button-flat-transparent {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #757575;
}
.button.button-flat-transparent.red-text {
    color: rgb(207 4 4);
}
.button.button-flat-transparent:hover {
    background-color: transparent !important;
    color: inherit;
}
.button.button-flat-transparent:hover.red-text {
    color: rgb(105, 9, 9);
}
.button-negative {
    background-color: #c8c8c8;
    border-color: #c8c8c8;
}

.button-transparent {
    background-color: transparent;
    border-color: #ffffff;
    color: #757575;
}

.button-flat-light {
    background-color: #0079C0;
    border-color: #0079C0;
    border-radius: 0;
}

.button-flat-transparent {
    background-color: transparent;
    border-color: transparent;
    color: #757575;
}

.button-flat-transparent.red-text {
    color: rgb(207 4 4);
}

.button.action-btn {
    padding: 3px 11px 22px 11px !important;
    height: 20px !important;
    text-align: center !important;
}

.button.action-btn:hover {
    background-color: #efefef !important;
}

.button:hover {
    background-color: var(--primary-color) !important;
    color: var(--quaternary-color);
    border-color: var(--primary-color);
}
.dark-mode .button:hover {
    background-color: var(--dark-quinary-color) !important;
    color: var(--dark-quaternary-color);
    border: 1px solid #939393 !important;
}

.light-mode .button:hover {
    background-color: var(--light-secondary-color) !important;
    color: var(--light-quaternary-color);
    border: 1px solid #939393 !important;
}

.button:active {
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
    transform: translateY(2px);
}

.button-transparent:hover {
    background-color: #ededed;
    color: white;
}

.button-flat-transparent:hover {
    background-color: transparent !important;
    color: inherit;
}

.button-flat-transparent:hover.red-text {
    color: rgb(105, 9, 9);
}

.button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.button.doing-ajax {
    pointer-events: none;
    border: 1px solid var(--dark-primary-color);
}

.dark-mode .button.doing-ajax ,
.light-mode .button.doing-ajax {
    pointer-events: none;
    border: 1px solid var(--dark-primary-color);
}

.button-minwidth {
    min-width: 100px;
}

.mini-button {
    min-width: 23px;
    max-width: 23px;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    height: 15px !important;
    line-height: 1 !important;
    padding: 5px 1px 15px !important;
}

.mini-button i {
    background-color: transparent !important;
}

.button .ajax-ellipsis-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-primary-color);
    border:  var(--dark-primary-color);
}

.ajax-ellipsis {
    display: inline-block;
    position: absolute;
    width: 54px;
    height: 9px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ajax-ellipsis div {
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.ajax-ellipsis div:nth-child(1) {
    left: 5px;
    animation: ajax-ellipsis1 0.6s infinite;
}

.ajax-ellipsis div:nth-child(2) {
    left: 5px;
    animation: ajax-ellipsis2 0.6s infinite;
}

.ajax-ellipsis div:nth-child(3) {
    left: 23px;
    animation: ajax-ellipsis2 0.6s infinite;
}

.ajax-ellipsis div:nth-child(4) {
    left: 41px;
    animation: ajax-ellipsis3 0.6s infinite;
}

.button.doing-ajax .ajax-ellipsis-wrap {
    display: block;
}

.dark-mode .button.doing-ajax .ajax-ellipsis-wrap,
.light-mode .button.doing-ajax .ajax-ellipsis-wrap {
    display: block;
}

@keyframes ajax-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ajax-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes ajax-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(18px, 0);
    }
}

/**
Data loader
**/
.data-loader {
    display: inline-block;
    height: 9px;
    width: 54px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    
}

.data-loader div {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: var(--dark-secondary-color);
    border-radius: 50%;
    height: 8px;
    position: absolute;
    top: 0;
    width: 8px;
}

.data-loader div:nth-child(1) {
    animation: data-loader1 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(2) {
    animation: data-loader2 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(3) {
    animation: data-loader2 0.6s infinite;
    left: 23px;
}

.data-loader div:nth-child(4) {
    animation: data-loader3 0.6s infinite;
    left: 41px;
}

.data-loader-wrap {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgb(255, 255, 255);

}

@keyframes data-loader1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes data-loader3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes data-loader2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(18px, 0);
    }
}

/* Select wrapper */
.select-wrapper {
    position: relative;
}

.select-wrapper select {
    min-width: 100px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-wrapper:after,
.search-selection:after {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color: #fff;
}

.dark-mode .select-wrapper:after,
.dark-mode .search-selection:after {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color: var(--secondary-color);
}
.dark-mode .select-wrapper::before,
.dark-mode .search-selection:before {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color:  var(--secondary-color);
}

/*.select-wrapper select:invalid {
    color: #c2c3c5;
}*/
.select-wrapper.with-icon:after {
    width: 25px;
    top: 0;
    bottom: 0;
    border-left: 1px solid #c8c8c8;
    background-color: transparent;
}

.select-wrapper.with-icon select {
    padding-right: 40px;
}

/*.select-wrapper select option,
.select-wrapper select optgroup {
    color: initial;
}*/
.select-wrapper option[value='?'],
.select-wrapper option[value='? undefined:undefined ?'] {
    display: none;
}

/**
 * Media Library
 */
.ml-popup {
    top: 500px !important;
}

/**
 * UI Components
 */
.ajax-notice {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    background-color: var(--secondary-color);
    border-radius: 3px;
    text-align: left;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
    padding: 15px 15px 13px;
    width: 300px;
    max-width: 320px;
    border-left: 5px solid transparent;
    cursor: default;
    color: var(--color-text);
}

.dark-mode .ajax-notice {
    background-color: var(--dark-secondary-color);
    color: var(--dark-color-text);
}


.light-mode .ajax-notice {
    background-color: var(--light-primary-color);
    color: var(--light-quaternary-color);
}

.ajax-notice .an-message {
    padding-right: 30px;
    font-size: 14px;
}

.ajax-notice .an-dismisser {
    position: absolute;
    top: 11px;
    right: 9px;
    width: 22px;
    height: 22px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    background-color: var(--tertiary-color);
    border-radius: 100%;
    font-size: 16px;
    font-weight: 600;
}

.ajax-notice .an-dismisser:hover {
    background-color: #c9c5c5;
}

.ajax-notice.success {
    border-left-color: var(--success-color);
}

.ajax-notice.error {
    border-left-color: var(--error-color);
}

.ajax-notice.warning {
    border-left-color: var(--warning-color);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
}

.dropdown-menu.right {
    left: auto;
    right: 0;
}
.dark-mode .dropdown-menu{
    background-color: #5d5d5d;
}

.dropdown-menu.table-action-left {
    left: 50px !important;
}

.dropdown .dropdown-menu.notification {
    cursor: auto;
    min-width: 410px;
    left: -340px;
    top: 71px;
    bottom: auto;
    padding: 0;
    padding-bottom: 5px;
}

.dropdown-menu.megaSearch {
    cursor: auto;
    min-width: 410px;
    left: -2x;
    top: 51px;
    bottom: auto;
    padding: 0;
    padding-bottom: 5px;
}

.dropdown-menu.bottom-left {
    left: 80px;
    top: auto;
    bottom: 0;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-menu>li {
    display: block;
    position: relative;
}

.dropdown-menu>li>a {
    display: block;
    padding: 13px 20px;
    text-align: left;
    white-space: nowrap;
    line-height: 1;
    color: inherit;
    position: relative;
}

.dropdown-menu>li>a>i {
    width: 16px;
    margin-right: 3px;
}

.dropdown-menu>li>a:hover {
    color: #fff;
    background-color: var(--secondary-color);
}

.dropdown-menu>li>a:hover .notification-icon {
    color: #fff;

}

.dark-mode .dropdown-menu>li>a:hover {
    color: #fff;
    background-color: var(--dark-quinary-color);
}

.dark-mode .dropdown-menu>li>a:hover .notification-icon {
    color: #fff;

}

.light-mode .dropdown-menu>li>a:hover {
    color: var(--light-quaternary-color);
    background-color: var(--light-secondary-color);
}

.light-mode .dropdown-menu>li>a:hover .notification-icon {
    color: var(--light-quaternary-color);
}

.dropdown-menu.light>li>a:hover {
    color: var(--secondary-color);
    background-color: rgba(0, 121, 192, 0.15);
}


.dropdown-menu>li>a.doing-ajax {
    pointer-events: none;
}

.dropdown-menu>li>a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-quinary-color);
}

.dropdown-menu.rounded{
    border-radius: 5px;
}


/* Dropdown search */
.search-selection {
    position: relative;
}

.search-selection .output {
    cursor: default;
    padding-right: 30px;
}

.search-selection .search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 99;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    min-width: 160px;
    margin-bottom: 35px;
}

.search-selection.open .search-dropdown {
    display: block;
}

.search-selection .search-filter {
    padding-left: 6px;
    padding-right: 6px;
    height: 30px;
    font-size: 13px;
}

.search-selection .result-list {
    padding: 0;
    margin: 5px 0 0;
    list-style-type: none;
    max-height: 210px;
}

.search-selection .result-list li label {
    padding: 5px 10px;
    cursor: pointer;
    background-color: #fff;
    font-size: 13px;
    color: inherit;
    display: block;
    width: 100%;
    margin-bottom: 0;
    font-weight: normal;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
    text-align: left;
}

.search-selection .result-list li label .rl-item-additional {
    display: block;
    font-size: 12px;
    color: #b3b3b3;
    margin-top: 2px;
}

.search-selection .result-list li:last-child label {
    border-bottom: none;
}

.search-selection .result-list li label input[type="radio"] {
    visibility: hidden;
    position: absolute;
}

.search-selection .result-list li label:hover,
.search-selection .result-list li label:focus,
.search-selection .result-list li.active label {
    background-color: #e5e5e5;
}

.flip-horizontal {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/**
 * UI Transitions
 */
.fade-up-enter-active,
.fade-up-leave-active {
    transition: all 0.2s ease-out;
}

.fade-up-enter-from,
.fade-up-leave-to {
    transform: translateY(100px);
    opacity: 0;
}

/**
 * Layout
 */
.scroll-container {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.scroll-container::-webkit-scrollbar-track {
    background-color: transparent;
}

.scroll-container::-webkit-scrollbar {
    width: 5px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: #c0bdbd;
    border-radius: 10px;
}

@media screen and (min-width: 768px) {
    .row.mini-gap {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .row.mini-gap [class*="col-"] {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
} /************************
 *    XP LINK STYLES    *
 ************************/

/*********************************
 *    XP FileUploader STYLES     *
 *********************************/


.xp-file-uploader.inputfile{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.xp-file-uploader.inputfile + label{
    max-width: 80%;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

.xp-file-uploader.style-1.inputfile + label {
    color: white;
    background-color: var(--dcui-primary-color);
}

.xp-file-uploader.style-2.inputfile + label {
    border: 1px solid var(--dcui-primary-color);
    background-color: #f1e5e6;
    padding: 0;

}

.xp-file-uploader.style-2.inputfile + label span {
    width: 200px;
    min-height: 2em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    color: var(--dcui-primary-color);
}

.xp-file-uploader.style-2.inputfile + label strong {
    height: 100%;
    color: #f1e5e6;
    background-color: var(--dcui-primary-color);
    display: inline-block;
}

.xp-file-uploader.style-2.inputfile + label span, .xp-file-uploader.style-2.inputfile + label strong {
    padding: 0.625rem 1.25rem;
}

.xp-file-uploader.style-1.inputfile:focus + label,
.xp-file-uploader.style-1.inputfile + label:hover {
    background-color: var(--dcui-secondary-color);
}

.xp-file-uploader.style-1.inputfile + label {
    cursor: pointer; /* "hand" cursor */
}

.xp-file-uploader.style-1.inputfile:focus + label {
    outline: 1px dotted var(--dcui-primary-color);
    outline: -webkit-focus-ring-color auto 5px;
}

.xp-file-uploader.style-2.inputfile:focus + label, .xp-file-uploader.style-2.inputfile.has-focus + label, .xp-file-uploader.style-2.inputfile + label:hover {
    border-color: var(--dcui-primary-color);
}

.xp-file-uploader.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

.xp-file-uploader.inputfile + label.doing-ajax {
    pointer-events: none;
}

.xp-file-uploader.inputfile + label.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dcui-primary-color);
}


.dcui-file-uploader-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.dcui-file-uploader-container.mini {
    flex: none;
    margin: 5px;
}

.dcui-file-uploader-mini-load-container {
    width: 66px;
    height: 66px;
    position: absolute;
}

.dcui-file-uploader-container.mini .mini-container {
    flex-grow: 1;
    border: 1px solid #d1d1d1;
    border-radius: 7px;
    margin: 5px;
}

.dcui-file-uploader-container .center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dcui-file-uploader-container .text-container {
    color: #5f6368;
    margin-top: 5px;
}

.dcui-file-uploader-container .text-browse {
    color: var(--dcui-primary-color);
}

.dcui-file-uploader-container.disable, .dcui-file-uploader-container.mini.disable .text-browse {
    color: #a6a8a9;
}

.dcui-file-uploader-container .upload-icon {
    font-size: 25px;
    color: #cfd1d2;
}

.dcui-file-uploader-container .hidden-input {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.dcui-file-uploader-container .file-label {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dcui-file-uploader-container.disable .file-label {
    cursor: inherit;
}

.dcui-file-uploader-container .preview-card {
    display: flex;
    position: relative;
}

.dcui-file-uploader-container .preview-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.dcui-file-uploader-container .add-media-container{
    width: 112px;
    height: 109px;
    display: flex;
    align-items: center;
}

.dcui-file-uploader-container .hidden-input {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.dcui-file-uploader-container .file-label {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dcui-file-uploader-container .add-media-content {
    flex: 1;
    min-height: 105px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dcui-file-uploader-container .upload-icon {
    font-size: 25px;
    color: #cfd1d2;
}

.dcui-file-uploader-container .text-container {
    color: #5f6368;
    margin-top: 5px;
}

.dcui-file-uploader-container .preview-container .image-container {
    border: 1px solid #a2a2a2;
    border-radius: 5px;
}

.dcui-file-uploader-container .preview-img {
    object-fit: cover;
    object-position: top;
    width: 106px;
    height: 92px;
    border-bottom: 1px solid #a2a2a2;
    background-color: #a2a2a2;
}

.dcui-file-uploader-container .preview-container .file-name-text {
    text-align: center;
}

.preview-container .preview-card .file-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
}

.preview-container .preview-card:hover .file-remove-btn {
    display: block;
}

.dcui-button.dcui-file-uploader-remove-btn {
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: 50px;
}

.dcui-file-uploader-remove-icon-container{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 3px;
}


/**********************
 *   DC Components    *
 **********************/

.dcui-load-more-container__container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* sticky_loading: the "Loading" row sits over the bottom of the visible
   scroll box instead of below the last item, so nothing has to scroll */
.dcui-load-more-container__container--sticky {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 10px 0;
}

/* its Data_Loader is a white sheet over the whole row (normalize.css
   .data-loader-wrap); over the list it would hide the items */
.dcui-load-more-container__container--sticky .data-loader-wrap {
    background: transparent;
}

/* a light shadow on each dot, so they stand out over the items */
.dcui-load-more-container__container--sticky .data-loader div {
    box-shadow: 0 0px 7px rgba(0, 0, 0, 0.3);
}

/***********************************
 *   DC Font Awesome Icon Picker   *
 ***********************************/

.dcui-font-awesome-icon-picker__container {
    width: 100%;
    height: 100%;
    min-height: 450px;
    padding-top: 10px;
}

.dcui-font-awesome-icon-picker__container__search-container{
    margin-bottom: 25px;
}

.dcui-font-awesome-icon-picker__container__search-container__input{
    background-color: transparent;
    color: #0F0F0F;
}

/* The component hardcodes `dark` on the input while the popup card behind it is
   white and the input itself is transparent, so `color: white` made every typed
   character invisible — the search filtered correctly but looked broken. The base
   rule above already sets a readable colour; restore it here rather than dropping
   the class, so a genuinely dark context can still claim this selector. */
.dcui-font-awesome-icon-picker__container__search-container__input.dark{
    color: #0F0F0F;
}

.dcui-font-awesome-icon-picker__container__search-container__input.dark.dcui-form-control:focus{
    background-color: transparent;
}

.dcui-font-awesome-icon-picker__container__search-container .dcui-font-awesome-icon-picker__container__search-container__input--icon{
    background-color: transparent;
}

.dcui-font-awesome-icon-picker__container_icon-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 370px;
    margin-top: 15px;
    justify-content: flex-start;
}

.dcui-font-awesome-icon-picker__container_icon-container__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-evenly;
}

.dcui-font-awesome-icon-picker__container_icon-container__icon-btn {
    width: 80px;
    height: 79px;
    font-family: inherit;
    font-size: 18px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid var(--dcui-primary-color);
    border-radius: var(--dcui-field-radius);
    outline: 0;
    white-space: nowrap;
    color: var(--dcui-primary-color);
    background-color: transparent;
    text-shadow: none;
    box-shadow: none;
    line-height: calc(var(--dcui-field-height) - 20px);
    padding: 9px 10px;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.dcui-font-awesome-picker-popup{
    min-height: 400px;
    width: 890px;
    min-width: 890px;
}

ul.dc-breadcrumbs-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.dc-breadcrumbs-list li.dc-breadcrumb-item {
    display: inline;
}

ul.dc-breadcrumbs-list li.dc-breadcrumb-item .dc-breadcrumb-icon {
    padding: 8px;
    color: #5b5e63;
}

.dcui-icon-btn-img{
    width: 21px;
    height: auto;
    max-height: 18px;
    display: block;
    margin: 0 auto;
}

.dcui-icon-btn-img-container{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
}

.dcui-blue-container{
    padding: 15px;
    background-color: #d6ecf8;
}

.dcui-info-panel-main-container{
    height: 100%;
}

.dcui-info-panel-main-container__middle-container{
    min-height: 750px;
    display: flex;
}

.dcui-info-panel-main-container__middle-container__left{
    width: 60%;
    height: calc(100vh - 266px);
    position: relative;
}

.dcui-info-panel-main-container__middle-container__left::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background-color: #f4f4f4;
}

.dcui-info-panel-main-container__middle-container__right{
    width: 40%;
    margin-left: 25px;
}

.dcui-info-panel-main-container__middle-container__right-container{
    height: calc(100vh - 281px);
    background-color: #fafafa;
    padding: 15px;
    border-radius: 5px;
}

.docld-native-date-picker{
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font-size: var(--dcui-regular-font-size);
    color: var(--dcui-body-color);
    border: 1px solid var(--dcui-line-color);
    background: #fff;
    display: inline-block !important;
    visibility: visible !important;
    box-sizing: border-box;
    height: var(--dcui-field-height);
    padding: 0 10px;
    border-radius: var(--dcui-field-radius);
}


.docld-native-date-picker::-webkit-calendar-picker-indicator {
    filter: invert(40%) sepia(10%) saturate(250%) hue-rotate(173deg) brightness(91%) contrast(87%);
}

.docld-native-date-picker:hover{
    background-color: #eeeeee;
    cursor: pointer;
}

.docld-native-date-picker:focus,
.docld-native-date-picker:focus-visible {
    outline: 0 !important;
    box-shadow: none;
}

/***********************/
/**   Bar loader  **/
/***********************/

.docld-loading-bar-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.docld-loading-bar {
    background-color: #3498db;
}

.docld-loading-bar-container .docld-loading-bar.hidden {
    display: none;
}

.docld-required-text{
    color: #c10808;
    padding-left: 5px;
}

/***********************/
/**   Icon Button     **/
/***********************/

.dcui-icon-actions .docld-icon-button-loading-container.docld-spinner-loader-container{
    width: 35px !important;
}

.dcui-icon-actions .docld-icon-button-loading-container.docld-spinner-loader-container .docld-spinner-loader {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--dcui-primary-color) 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--dcui-primary-color));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
    animation: l13 1s infinite linear;
}

/***********************/
/**   Spinner loader  **/
/***********************/

.docld-spinner-loader-container {
    background-color: white;
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.docld-spinner-loader {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--dcui-primary-color) 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--dcui-primary-color));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: l13 1s infinite linear;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}


/*****************************/
/**  Auto complete field   **/
/****************************/
.autocomplete-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.autocomplete-input-wrapper {
    position: relative;
}

.autocomplete-input-wrapper > ::v-deep(.autocomplete-label) {
    display: block;
    font-size: var(--dcui-regular-font-size);
    color: var(--dcui-body-color);
    margin-bottom: 5px;
}

.autocomplete-input {

}

.autocomplete-input.focused{
    background-color: #eeeeee;
}

.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
}


.autocomplete-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

.autocomplete-dropdown li {
    cursor: pointer;
    display: block;
    padding: 10px 15px 9px;
    text-align: left;
    color: inherit;
    position: relative;
}

.autocomplete-dropdown li.selected {
    background-color: #eee;
}

.autocomplete-dropdown li:hover {
    background-color: #f0f0f0;
}

.dcui-select-dropdown-close{
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(-50%, -50%);
}


/* Date Picker Calendar Start */
/****************************
 *   Dcui Styles Calendar   *
 ****************************/

:root {
    --dcui-calendar-picker-color: #fff;
    --dcui-calendar-input-bg-color: #fff;
    --dcui-calendar-input-bg-disable-color: rgb(245, 245, 245);
    --dcui-calendar-input-text-disable-color: #b8b8b9;
    --dcui-calendar-select-bg-color: #fff;
    --dcui-calendar-border-color: #eaeaeb;
    --dcui-calendar-triangle-color: #eaeaeb;
    --dcui-calendar-shadow: 5px 34px 80px 0px rgba(0, 0, 0, 0.15);
    --dcui-calendar-top-shadow: 5px 34px 80px 0px rgba(0, 0, 0, 0.15);
    --dcui-calendar-text-color: #000000;
    --dcui-calendar-action-color: #7b8187;
    --dcui-calendar-text-disabled-color: #b3b3b3;
    --dcui-calendar-view-button-color: #000000;
    --dcui-calendar-view-button-font-weight: 600;
    --dcui-calendar-view-button-font-size: 1rem;
    --dcui-calendar-datepicker-icon-color: #b2b3b3;
    --dcui-calendar-datepicker-icon-size: 1.1rem;
    --dcui-calendar-active-bg-color: transparent;
    --dcui-calendar-active-text-color: #657ff5;
    --dcui-calendar-active-hover-color:#657ff5;
    --dcui-calendar-active-hover-text-color:#edfff9;
    --dcui-calendar-range-bg-color: #edfff9;
    --dcui-calendar-range-text-color: #7b8187;
    --dcui-calendar-range-radius: 100%;
    --dcui-calendar-day-hover-bg-color: #eaeaeb;
    --dcui-calendar-day-width: 25px;
    --dcui-calendar-day-height: 25px;
    --dcui-calendar-day-font-size: 0.9rem;
    --dcui-calendar-day-font-weight: 650;
    --dcui-calendar-day-name-font-size: 0.9rem;
    --dcui-calendar-day-name-font-weight: 900;
    --dcui-calendar-day-name-color: #b3b3b3;
    --dcui-calendar-input-border: 1px solid #eaeaeb;
    --dcui-calendar-input-text-color: #7b8187;
    --dcui-calendar-input-font-size: 0.9rem;
    --dcui-calendar-input-font-weight: 400;
    --dcui-calendar-content-radius: 20px;
    --dcui-calendar-year-font-size: 1rem;
    --dcui-calendar-year-color: #000000;
    --dcui-calendar-year-font-weight: 450;
    --dcui-calendar-year-disabled-color: #b8b8b9;
    --dcui-calendar-year-disabled-bg-color: transparent;
    --dcui-calendar-year-padding: 10px;
    --dcui-calendar-year-border: none;
    --dcui-calendar-year-border-radius: none;
    --dcui-calendar-month-font-size: 1.1rem;
    --dcui-calendar-month-color: #000000;
    --dcui-calendar-month-font-weight: 450;
    --dcui-calendar-month-disabled-color: #b8b8b9;
    --dcui-calendar-month-disabled-bg-color: transparent;
    --dcui-calendar-month-padding: 8px;
    --dcui-calendar-month-border: none;
    --dcui-calendar-month-border-radius: none;
    --dcui-calendar-year-hover-bg-color:#eaeaeb;
    --dcui-calendar-month-hover-bg-color:#eaeaeb;
}

.dcui-calendar *:focus {
    outline: none;
}

.dcui-calendar * {
    outline: none;
}

.dcui-calendar {
    position: relative;
    width: 100% !important;
    min-width: max-content;
}

.dcui-calendar .content {
    display: flex;
    background: var(--dcui-calendar-picker-color);
    box-shadow: var(--dcui-calendar-shadow);
    position: absolute;
    top: 45px;
    z-index: 99999;
}

/* A popup clips its overflow; while a calendar is open in one, let it hang below the popup instead of being cut off. */
.popup:has(.dcui-calendar .content) {
    overflow: visible;
}

.dcui-calendar .input-field {
    display: flex;
    position: relative;
    min-width: 140px;
    font-weight: var(--dcui-calendar-input-font-weight);
}

.dcui-calendar .input-field .clearButton {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: var(--dcui-calendar-text-color);
    padding: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    display: flex;
}

.dcui-calendar .input-field .clearButton i {
    fill: currentColor;
}

.dcui-calendar .input-field .clearButton,
.dcui-calendar .input-field .clearButton i {
    font-size: 16px;
}

.dcui-calendar .input-field input:disabled ~ i {
    fill: var(--dcui-calendar-text-color);
}

.dcui-calendar .input-field.long {
    min-width: 290px;
}

.dcui-calendar .input-field input {
    padding-left: 35px;
    padding-right: 20px;
    font-size: var(--dcui-calendar-input-font-size);
    min-width: inherit;
    height: 40px;
    border-radius: 6px;
    border: var(--dcui-calendar-input-border);
    background-color: var(--dcui-calendar-input-bg-color);
    color: var(--dcui-calendar-input-text-color);
    font-weight: inherit;
    cursor: pointer;
    width: 100%;
}

.dcui-calendar .input-field:hover input{
    background-color: #eeeeee;
}


.dcui-calendar .input-field input:disabled {
    background-color: var(--dcui-calendar-input-bg-disable-color);
    color: var(--dcui-calendar-input-text-disable-color);
    cursor: default;
}

.dcui-calendar .input-field i {
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

.dcui-calendar .input-field i.datepicker {
    left: 10px;
    width: var(--dcui-calendar-datepicker-icon-size);
    height: var(--dcui-calendar-datepicker-icon-size);
    text-align: center;
    cursor: pointer;
}

/* A locked field's glyph is inert (see DcDatepicker's togglePicker guard), so it
   must not invite the click. Plain arrow, not not-allowed: every other locked
   control in the kit leaves the cursor alone, and the picker was the outlier. */
.dcui-calendar .input-field input:disabled ~ i.datepicker {
    cursor: default;
}

.dcui-calendar .calendar {
    width: 270px;
    min-height: 240px;
}

.dcui-calendar .calendar.range:first-child {
    border-right: 1px solid var(--dcui-calendar-border-color);
}

.dcui-calendar .calendar:first-child::before {
    content: "";
    position: absolute;
    bottom: 100%;
    top: -20px;
}

.dcui-calendar .calendar .selected-field {
    padding-top: 15px;
    background-color: var(--dcui-calendar-select-bg-color);
    border-radius: 20px;
}

.dcui-calendar .calendar .selected-field .selected-date {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgb(228 228 229);
}

.dcui-calendar .calendar .selected-field .viewButton {
    border: 0;
    width: 100%;
    padding: 10px;
    color: var(--dcui-calendar-view-button-color);
    font-size: var(--dcui-calendar-view-button-font-size);
    font-weight: var(--dcui-calendar-view-button-font-weight);
    margin-right: 10px;
    margin-left: 10px;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
}

.dcui-calendar .calendar .selected-field .viewButton:hover {
    background: #ededed;
}

.dcui-calendar .calendar .selected-field .prevDateButton,
.dcui-calendar .calendar .selected-field .nextDateButton {
    position: relative;
    border: 0;
    background: transparent;
}

.dcui-calendar .calendar .selected-field .prevDateButton::after,
.dcui-calendar .calendar .selected-field .nextDateButton::after {
    display: inline-block;
    cursor: pointer;
    padding: 5px;
    width: 28px;
    border-radius: 10px;
    border: 2px solid #e9e9e9;
    font-family: "Font Awesome 5 Pro";
    text-align: center;
    color: #b3b3b3;
}

.dcui-calendar .calendar .selected-field .prevDateButton::after {
    content: "\f053";
}

.dcui-calendar .calendar .selected-field .nextDateButton::after {
    content: "\f054";
}

.dcui-calendar .calendar .selected-field .prevDateButton:hover::after,
.dcui-calendar .calendar .selected-field .nextDateButton:hover::after {
    border: 2px solid #cdcdcd;
    color:  #adacac;
}

.dcui-calendar .calendar .days {
    display: grid;
    grid-template-columns: repeat(7, minmax(max-content, 1fr));
    gap: 5px;
    padding-bottom: 7px;
}

.dcui-calendar .calendar .years,
.dcui-calendar .calendar .months {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    max-width: calc((var(--dcui-calendar-day-width) * 7) + 20px);
}

.dcui-calendar .calendar .years {
    min-height: 180px;
    display: flex;
    flex-wrap: wrap;
    max-width: calc((var(--dcui-calendar-day-width)* 7) + 70px);
    gap: 15px;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    padding-bottom: 10px;
}

.dcui-calendar .calendar .months {
    min-height: 170px;
    max-width: calc((var(--dcui-calendar-day-width)* 7) + 70px);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-around;
}

.dcui-calendar .calendar .selected-field,
.dcui-calendar .calendar .days-selection {
    padding-left: 15px;
    padding-right: 15px;
}

.dcui-calendar .calendar .days-selection .days {
    padding-bottom: 15px;
}

.dcui-calendar .calendar .days .day,
.dcui-calendar .calendar .years .year,
.dcui-calendar .calendar .months .month {
    background: transparent;
    border: 0;
    text-align: center;
    cursor: pointer;
}

.dcui-calendar .calendar .years .year,
.dcui-calendar .calendar .months .month {
    width: max-content;
    height: max-content;
}

.dcui-calendar .calendar .months .month {
    font-size: var(--dcui-calendar-month-font-size);
    font-weight: var(--dcui-calendar-month-font-weight);
    color: var(--dcui-calendar-month-color);
    padding: var(--dcui-calendar-month-padding);
    border: var(--dcui-calendar-month-border);
    width: 70px;
}

.dcui-calendar .calendar .months .month:disabled {
    pointer-events: none;
    color: var(--dcui-calendar-month-disabled-color);
    background-color: var(--dcui-calendar-month-disabled-bg-color);
}

.dcui-calendar .calendar .days .day {
    padding: 0;
    font-size: var(--dcui-calendar-day-font-size);
    font-weight: var(--dcui-calendar-day-font-weight);
    color: var(--dcui-calendar-text-color);
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: left;
}

.dcui-calendar .calendar .days .day .number {
    display: flex;
    width: var(--dcui-calendar-day-width);
    height: var(--dcui-calendar-day-height);
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: inherit;
    border-radius: 7px;
    line-height: normal;
}

.dcui-calendar .calendar .days .day.name {
    pointer-events: none;
    font-size: var(--dcui-calendar-day-name-font-size);
    font-weight: var(--dcui-calendar-day-name-font-weight);
    color: var(--dcui-calendar-day-name-color);
    width: auto;
}

.dcui-calendar .calendar .days .day.selectedDate .number {
    background: var(--dcui-calendar-active-bg-color);
    color: var(--dcui-calendar-active-text-color);
    border: 2px solid #657ff5;
}

.dcui-calendar .calendar .days .day.circle .number {
    border-radius: 100%;
}

.dcui-calendar .calendar .days .day.selectedRange {
    background: var(--dcui-calendar-range-bg-color);
    color: var(--dcui-calendar-range-text-color);
}

.dcui-calendar .calendar:first-child .days .day.selectedDate {
    border-top-left-radius: var(--dcui-calendar-range-radius);
    border-bottom-left-radius: var(--dcui-calendar-range-radius);
}

.dcui-calendar .calendar .days .day.selectedDate:hover .number{
    background: var(--dcui-calendar-active-hover-color);
    color: var(--dcui-calendar-active-hover-text-color);
}

.dcui-calendar .calendar:last-child .days .day.selectedDate {
    border-top-right-radius: var(--dcui-calendar-range-radius);
    border-bottom-right-radius: var(--dcui-calendar-range-radius);
}

.dcui-calendar .calendar .days .day.disabledDate {
    pointer-events: none;
    color: var(--dcui-calendar-text-disabled-color);
    font-weight: 500;
}

.dcui-calendar .calendar .days .day.disabledDate.selectedRange {
    background: var(--dcui-calendar-range-bg-color);
}

.dcui-calendar .calendar .days .day:hover .number{
    background: var(--dcui-calendar-day-hover-bg-color);
}

.dcui-calendar .calendar .years .year {
    font-size: var(--dcui-calendar-year-font-size);
    font-weight: var(--dcui-calendar-year-font-weight);
    color: var(--dcui-calendar-year-color);
    padding: var(--dcui-calendar-year-padding);
    border: var(--dcui-calendar-year-border);
    border-radius: var(--dcui-calendar-year-border-radius);
}

.dcui-calendar .calendar .years .year:hover,
.dcui-calendar .calendar .months .month:hover{
    background-color: var(--dcui-calendar-month-hover-bg-color);
    border-radius: 7px;
}

.dcui-calendar .calendar .years .year:disabled {
    pointer-events: none;
    color: var(--dcui-calendar-year-disabled-color);
    background-color: var(--dcui-calendar-year-disabled-bg-color);
}

.dcui-calendar.left .content {
    left: 0;
    transform: translateY(5px);
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.left .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
    left: 0;
}

.dcui-calendar.right .content {
    right: 0;
    transform: translateY(5px);
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-left-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.right .calendar:first-child::before {
    right: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
}

.dcui-calendar.top .content {
    top: 100%;
    transform: translateY(calc(-100% - 66px));
    box-shadow: var(--dcui-calendar-top-shadow);
    border-top-left-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.top .content .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: var(--dcui-calendar-triangle-color) transparent transparent transparent;
    top: 100%;
    left: 0;
}

.dcui-calendar.bottom .content {
    transform: translateY(5px);
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.bottom .content .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
    left: 0;
}

.dcui-calendar.center .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
    left: 50%;
    transform: translateX(-50%);
}

.dcui-calendar.center .content {
    transform: translateY(5px) translateX(-50%);
    left: 50%;
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
}

.dc-datepicker-filed-no-outline.dcui-calendar .input-field input{
    border: transparent;
}

/* Date Picker Calendar End */
/********************
    Media Viewer
 ********************/

.dcui-media-viewer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px;
    position: relative;
    width: 100%;
    min-height: 124px;
}

.dcui-media-viewer-item {
    border: 1px solid #a2a2a2;
    border-radius: 5px;
    width: 108px;
    height: 112px;
    margin: 5px;
    position: relative;
}

.dcui-media-viewer-text {
    line-height: 13px;
    padding: 0 5px;
    text-align: center;
}

.dcui-media-viewer-image {
    width: 106px;
    height: 92px;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid #a2a2a2;
    background-color: #a2a2a2;
}

.dcui-media-viewer-item .file-remove-btn {
    position: absolute;
    top: 3px;
    right: 5px;
    display: none;
}

.dcui-media-viewer-item:hover .file-remove-btn {
    display: block;
}

.dcui-media-viewer-item .file-featured-btn {
    position: absolute;
    top: 3px;
    left: 5px;
    display: none;
}

.dcui-media-viewer-item:hover .file-featured-btn {
    display: block;
}

.dcui-media-viewer-container .dcui-media-viewer-item.dcui-media-viewer-icon-selected:hover::after {
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: -9px;
    left: -10px;
    color: #ffef00;
    font-weight: 900;
    content: "\f005";
    font-size: 15px;
    line-height: 14px;
    text-align: center;
    margin-right: 10px;
    z-index: 1;
    -webkit-text-stroke: 1px #ff3d00;
}

.dcui-button.dcui-file-uploader-featured-btn {
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: unset;
    color: #ffef00;
    background-color: transparent;
    border: 0;
    -webkit-text-stroke: 1px #ff3d00;
}

.dcui-file-uploader-featured-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 3px;
}

/***********************/
/**  No Styles found  **/
/***********************/

.dcui-media-viewer-no-media-found-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dcui-media-viewer-no-media-found-container img {
    width: 90px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.dcui-media-viewer-no-media-found-container .text-container {
    font-size: medium;
    font-weight: 600;
}


/************************/
/**    Plain Layout     */
/************************/

.dcui-plain-comp-card {
    padding: 0;
    height: 100%;
}

.dcui-plain-top-section {
    padding: 30px;
    background-color: #d6ecf8;
}

.dcui-plain-top-container {
    display: flex;
    justify-content: space-between;
}

.dcui-plain-top-left-container {
    display: flex;
}

.dcui-plain-top-right-container {
    display: flex;
}

.dcui-plain-middle-container {
    padding: 30px;
    padding-bottom: 0;
}

.docld-plain-middle-container {
    position: relative;
    height: calc(100vh - 250px);
    padding-right: 15px;
}

/****************************/
/**    navigation drawer   **/
/***************************/

.dcui-navigation-drawer-card {
    padding: 0;
    height: 100%;
}

.dcui-navigation-drawer-name-container {
    padding: 20px;
    align-items: center;
}

.dcui-navigation-drawer-title {
    font-size: 24px;
    font-weight: 700;
    color: #3f3f3f;
}

.dcui-navigation-drawer-nav-items-container {
    height: calc(100vh - 155px);
}

.dcui-navigation-content {
    position: relative;
}

.dcui-navigation-content .dcui-navigator-text-container {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.dcui-navigation-content.show-line::after {
    content: "";
    position: absolute;
    top: 33px;
    left: 20px;
    height: calc(100% - 53px);
    width: 2px;
    border-left: 2px dotted #ededed;
    z-index: 0;
}

.dcui-navigation-content .item {
    display: flex;
    align-items: center;
    padding: 15px;
    height: 55px;
}

.dcui-navigation-content.show-bullets .item::before {
    position: relative;
    left: 2px;
    top: 1px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
}

.dcui-navigation-content .item:hover {
    background-color: #f3f3f3;
    /*background-color: #e6f5ff;*/
    cursor: pointer;
}

.dcui-navigation-content .item .icon {
    font-size: 20px;
    margin-right: 5px;
    width: 25px;
}

.dcui-navigation-content .item.selected {
    background-color: #f7f7f7;
    /*background-color: #e6f5ff;*/
    color: var(--dcui-primary-color);
    position: relative;
}

.dcui-navigation-content .item.selected::after {
    content: '';
    position: absolute;
    top: 17px;
    right: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--dcui-primary-color);
}

.dcui-navigation-content .item::before {
    font-family: "Font Awesome 6 Pro";
    position: relative;
    left: 2px;
    top: 1px;
    color: white;
    font-weight: 900;
    display: flex; /* Change from block to flex */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 8px;
    height: 8px;
    font-size: 7px;
    line-height: 9px;
    text-align: center;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    margin-right: 10px;
    z-index: 1;
}

/**********************/
/**    Point list   **/
/*********************/

.dc-point-list-container-parent {
    position: relative;
    height: 100%;
}

.dc-point-list-container {
    margin-top: 20px;
    position: relative;
}

.dc-point-list-container.loaded::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 6px;
    height: calc(100% - 40px);
    width: 2px;
    border-left: 2px dotted #ededed;
    z-index: 0;
}

.dc-point-list-container .dc-point-list-item {
    margin-bottom: 15px;
    line-height: 20px;
    display: flex;
    align-items: flex-start;
}

.dc-point-list-container .dc-point-list-item:last-child {
    margin-bottom: 0;
}

.dc-point-list-container .dc-point-list-item::before {
    position: relative;
    left: 2px;
    top: 4px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    padding: 5px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
}
/***********************/
/**    Empty State    **/
/***********************/

.dcui-empty-state {
    text-align: center;
    padding: 24px 4px;
    font-size: 14px;
    color: #7b8187;
}

.dcui-empty-state > i {
    margin-right: 6px;
}

.dcui-empty-state.is-inline {
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
}

/***********************/
/**    Date Range     **/
/***********************/

.dcui-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dcui-date-range__label {
    font-size: 13px;
    color: #7b8187;
    white-space: nowrap;
}

.dcui-date-range__label i {
    margin-right: 4px;
}

.dcui-date-range__field {
    min-width: 130px;
}

.dcui-date-range__sep {
    color: #7b8187;
}

/* DcDatepicker ships a lighter border, a 6px radius, paler text and a 40px
   height, so a From/To pair does not match the fields beside it in a filter bar.
   Pinned to the shared field chrome, and scoped to this component so a
   DcDatepicker used anywhere else is untouched. */
.dcui-date-range__field.dcui-calendar .input-field input {
    height: 35px;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    color: var(--dcui-body-color);
    font-size: 14px;
}

.dcui-date-range__field.dcui-calendar .input-field:hover input {
    background-color: #eee;
}


/***********************/
/**   Calendar Range  **/
/***********************/

/* Field pair layout; the calendar below reuses the original .dcui-calendar rules. */
.dcui-calendar-range { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.dcui-calendar-range__label { font-size: 13px; color: #7b8187; white-space: nowrap; }
.dcui-calendar-range__label i { margin-right: 4px; }
.dcui-calendar-range__fields { display: flex; align-items: center; flex: 1; gap: 8px; min-width: 0; }
.dcui-calendar-range__field { display: flex; flex: 1; min-width: 0; border: 1px solid var(--dcui-line-color); border-radius: var(--dcui-field-radius); background: #fff; }
.dcui-calendar-range__sep { color: #7b8187; }
.dcui-calendar-range__trigger,
.dcui-calendar-range__clear { appearance: none; border: 0; background: transparent; color: var(--dcui-body-color); font: inherit; cursor: pointer; }
.dcui-calendar-range__trigger { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; min-height: calc(var(--dcui-field-height) - 2px); padding: 0 10px; text-align: left; }
.dcui-calendar-range__trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcui-calendar-range__clear { flex: 0 0 30px; padding: 0; font-size: 16px; color: var(--dcui-calendar-text-color); }
.dcui-calendar-range__field.is-active { border-color: var(--dcui-primary-color); }
.dcui-calendar-range__trigger .is-placeholder { color: #7b8187; }

/* Same 270px calendar as DcDatepicker, centred under the complete field pair.
   Teleport avoids clipping by table/card containers; positioning never flips above. */
.dcui-calendar.dcui-calendar-range__popover { position: absolute; z-index: 99999; width: 270px !important; max-width: calc(100vw - 16px); min-width: 0; font-family: var(--dcui-font-family); }
.dcui-calendar-range__popover > .content { position: static; display: block; }
.dcui-calendar-range__popover .calendar { max-width: 100%; }
.dcui-calendar-range__popover .viewButton { text-align: center; }
.dcui-calendar-range__popover .calendar .days .day.is-outside { color: var(--dcui-calendar-text-disabled-color); }
.dcui-calendar-range__popover .calendar .days .day.selectedRange { background: color-mix(in srgb, var(--dcui-primary-color) 12%, white); }
.dcui-calendar-range__popover .calendar .days .day.selectedDate .number { border-color: var(--dcui-calendar-active-text-color); }
.dcui-calendar-range button:focus-visible,
.dcui-calendar-range__popover button:focus-visible { outline: 2px solid var(--dcui-secondary-color); outline-offset: 2px; }
.dcui-calendar-range button:disabled,
.dcui-calendar-range__popover button:disabled { cursor: not-allowed; opacity: .4; }
.dcui-calendar-range__footer { margin: 0 15px; padding: 10px 0 15px; border-top: 1px solid var(--dcui-calendar-border-color); color: var(--dcui-body-color); }
.dcui-calendar-range__summary { display: block; font-size: 12px; margin-bottom: 8px; }
.dcui-calendar-range__actions { display: flex; justify-content: flex-end; gap: 6px; }
.dcui-calendar-range__actions .dcui-button { margin: 0; padding-left: 12px; padding-right: 12px; }
.dcui-calendar-range__actions .dcui-button:first-child { margin-right: auto; }
/* view_switch month / year grids (added for Leads; not upstream) */
.dcui-calendar-range__popover .selected-field .is-hidden { visibility: hidden; }
.dcui-calendar-range__popover { --dcui-calendar-month-font-size: 14px; --dcui-calendar-year-font-size: 14px; }
.dcui-calendar-range__popover .calendar .months,
.dcui-calendar-range__popover .calendar .years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; justify-content: flex-start; }
.dcui-calendar-range__popover .calendar .months .month,
.dcui-calendar-range__popover .calendar .years .year { width: auto; }
.dcui-calendar-range__popover .calendar .months .month.is-current,
.dcui-calendar-range__popover .calendar .years .year.is-current { color: var(--dcui-calendar-active-text-color); box-shadow: inset 0 0 0 2px var(--dcui-calendar-active-text-color); border-radius: 7px; }
.dcui-calendar-range__body,
.dcui-calendar-range__calendars { display: flex; }
.dcui-calendar-range__calendars { flex: 1 1 auto; min-width: 0; }
.dcui-calendar-range__zoom { flex: 1 1 auto; }
/* presets_layout: the legacy DoLeads picker (preset menu + two months; added for Leads; not upstream) */
.dcui-calendar.dcui-calendar-range__popover.dcui-calendar-range__popover--presets { width: auto !important; }
.dcui-calendar-range__popover--presets .dcui-calendar-range__calendars > .calendar:not(.dcui-calendar-range__zoom) { flex: 0 0 270px; }
.dcui-calendar-range__popover--presets .dcui-calendar-range__calendars > .calendar + .calendar { border-left: 1px solid var(--dcui-calendar-border-color); }
.dcui-calendar-range__popover--presets .calendar .days .day.is-outside { visibility: hidden; pointer-events: none; }
.dcui-calendar-range__presets { flex: 0 0 auto; margin: 0; padding: 15px 0; list-style: none; border-right: 1px solid var(--dcui-calendar-border-color); }
.dcui-calendar-range__preset { display: block; width: 100%; padding: 8px 20px; border: 0; background: none; color: var(--dcui-body-color); font: inherit; font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer; }
.dcui-calendar-range__preset:hover { background: var(--dcui-calendar-day-hover-bg-color); }
.dcui-calendar-range__preset.is-active { color: var(--dcui-calendar-active-text-color); font-weight: 600; }
.dcui-calendar-range__popover--presets .dcui-calendar-range__actions .dcui-button:first-child { margin-right: 0; }
/* presets_layout is compact: smaller days, tighter spacing, summary and buttons on one line */
.dcui-calendar-range__popover--presets { --dcui-calendar-day-width: 26px; --dcui-calendar-day-height: 26px; --dcui-calendar-day-font-size: 13px; --dcui-calendar-day-name-font-size: 12px; --dcui-calendar-view-button-font-size: 14px; --dcui-calendar-month-font-size: 13px; --dcui-calendar-year-font-size: 13px; }
.dcui-calendar-range__popover--presets .dcui-calendar-range__calendars > .calendar:not(.dcui-calendar-range__zoom) { flex-basis: 220px; }
.dcui-calendar-range__popover--presets .calendar { min-height: 0; }
.dcui-calendar-range__popover--presets .calendar .selected-field,
.dcui-calendar-range__popover--presets .calendar .days-selection { padding-left: 10px; padding-right: 10px; }
.dcui-calendar-range__popover--presets .calendar .selected-field { padding-top: 10px; }
.dcui-calendar-range__popover--presets .calendar .selected-field .selected-date { margin-bottom: 6px; padding-bottom: 4px; }
.dcui-calendar-range__popover--presets .calendar .selected-field .viewButton { padding: 5px; margin: 0 5px; }
.dcui-calendar-range__popover--presets .calendar .selected-field .prevDateButton::after,
.dcui-calendar-range__popover--presets .calendar .selected-field .nextDateButton::after { width: 24px; padding: 3px; font-size: 12px; }
.dcui-calendar-range__popover--presets .calendar .days { gap: 2px; padding-bottom: 4px; }
.dcui-calendar-range__popover--presets .calendar .days-selection .days { padding-bottom: 8px; }
.dcui-calendar-range__popover--presets .calendar .days .day .number { padding: 0; }
.dcui-calendar-range__popover--presets .calendar .months,
.dcui-calendar-range__popover--presets .calendar .years { min-height: 0; }
.dcui-calendar-range__popover--presets .dcui-calendar-range__presets { padding: 8px 0; }
.dcui-calendar-range__popover--presets .dcui-calendar-range__preset { padding: 6px 14px; font-size: 13px; }
.dcui-calendar-range__popover--presets .dcui-calendar-range__footer { display: flex; align-items: center; gap: 10px; margin: 0 10px; padding: 8px 0; }
.dcui-calendar-range__popover--presets .dcui-calendar-range__summary { flex: 1 1 auto; margin: 0; }
@media (max-width: 719px) {
    .dcui-calendar-range__popover--presets .dcui-calendar-range__body { flex-direction: column; }
    .dcui-calendar-range__presets { display: flex; flex-wrap: wrap; padding: 10px 10px 5px; border-right: 0; border-bottom: 1px solid var(--dcui-calendar-border-color); }
    .dcui-calendar-range__preset { width: auto; padding: 6px 10px; border-radius: 7px; }
}
@media (max-width: 480px) {
    .dcui-calendar-range { display: grid; grid-template-columns: minmax(0, 1fr); }
    .dcui-calendar-range__fields { display: grid; grid-template-columns: minmax(0, 1fr); }
    .dcui-calendar-range__sep { display: none; }
}

/***********************/
/**   Split Button    **/
/***********************/

/* The main half keeps the left corners, the caret half the right, and the caret
   is pulled 1px left so their touching borders read as a single divider rather
   than a 2px seam. */
.dcui-split-button {
    display: inline-flex;
    align-items: stretch;
}

.dcui-split-button__main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* The caret span carries the button skin, so the toggle itself contributes no
   chrome — no padding, no open-state wash, and none of the toggle CSS caret (an
   <i> is rendered instead). */
.dcui-split-button__menu .dcui-dt-label {
    padding: 0;
    height: auto;
    line-height: 1;
    background-color: transparent;
}

.dcui-split-button__menu .dcui-dt-label::after {
    display: none;
}

.dcui-split-button__caret {
    margin-left: -1px;
    padding-left: 12px;
    padding-right: 12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: rgba(255, 255, 255, 0.45);
}

/* The open panel is placed in JS as a fixed popper that drops down, or up when
   down does not fit; the kit own downward placement stays as the fallback. Both
   dc-ui-kit open animations have to go for that: the transition tweens the inline
   top/bottom, so the panel slides in from wherever it last sat, and the submenu
   keyframes read as a jump. The base panel is opacity:0 — the animation forwards
   fill used to hold it visible — so opacity is pinned in their place. */
.dcui-split-button .dcui-dropdown-panel {
    animation: none;
    transition: none;
    opacity: 1;
}

.dcui-split-button__action {
    white-space: nowrap;
    cursor: pointer;
}

/***********************/
/**    Action Menu    **/
/***********************/

/* Same trick as the split button: the trigger span carries the button skin, so the
   dropdown toggle adds no chrome of its own and no CSS caret (an <i> is rendered). */
.dcui-action-menu {
    display: inline-flex;
}

.dcui-action-menu .dcui-dt-label {
    padding: 0;
    height: auto;
    line-height: 1;
    background-color: transparent;
}

.dcui-action-menu .dcui-dt-label::after {
    display: none;
}

.dcui-action-menu .dcui-dropdown-panel {
    animation: none;
    transition: none;
    opacity: 1;
    
}

.dcui-action-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
/* The chevron points down while the menu is closed and flips up while it is open. */
.dcui-action-menu__caret {
    transition: transform 0.15s;
}

.dcui-action-menu .dcui-select-dropdown.open .dcui-action-menu__caret {
    transform: rotate(180deg);
}
/* The kit styles rows as `.dcui-dropdown-menu > li > a { display: block }`, so
   these selectors repeat that chain to win and keep the icon / label gap. */
.dcui-action-menu .dcui-dropdown-menu > li.dcui-action-menu__group-title {
    margin: 0 8px;
    padding: 8px 7px 6px;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
    border-bottom: 1px solid var(--dcui-line-color);
}

.dcui-action-menu .dcui-dropdown-menu > li.dcui-action-menu__group-title:not(:first-child) {
    margin-top: 6px;
}

.dcui-action-menu .dcui-dropdown-menu > li > a.dcui-action-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    cursor: pointer;
}

.dcui-action-menu .dcui-dropdown-menu > li > a.dcui-action-menu__item > i {
    width: 14px;
    text-align: center;
}

.dcui-action-menu .dcui-dropdown-menu > li > a.dcui-action-menu__item.is-danger {
    color: var(--dcui-danger-color);
}

.dcui-action-menu .dcui-dropdown-menu > li > a.dcui-action-menu__item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dcui-action-menu__hint {
    display: block;
    font-size: 11px;
    opacity: 0.8;
}

/***********************/
/**  Search Dropdown  **/
/***********************/

.dcui-search-dropdown,
.dcui-search-dropdown .dcui-dt-label {
    width: 100%;
}

/* Standalone dropdowns render the closed label with no border or background by
   default, so at rest they read as plain text rather than a control. Give them
   the same outlined, white-fill chrome as a text input. A host that supplies its
   own border (a bordered form row) overrides this to stay flush. */
.dcui-search-dropdown .dcui-dt-label {
    border: 1px solid var(--dcui-line-color);
    background-color: #fff;
}

.dcui-search-dropdown .dcui-dt-label:hover,
.dcui-search-dropdown.dcui-select-dropdown.open .dcui-dt-label {
    background-color: #eeeeee;
}

.dcui-search-dropdown.disabled .dcui-dt-label,
.dcui-search-dropdown.disabled .dcui-dt-label:hover {
    background-color: #ebebeb;
}

/* The panel is placed in JS as a fixed popper, so both kit open animations have
   to go: the transition tweens the inline top/bottom and the panel slides in from
   wherever it last sat. The base panel is opacity:0 — the animation forwards fill
   used to hold it visible — so opacity is pinned in their place. */
.dcui-search-dropdown .dcui-dropdown-panel {
    animation: none;
    transition: none;
    opacity: 1;
}

/* Fallback cap so a menu is never unbounded; a host wanting a different height
   wins by specificity. */
.dcui-search-dropdown .dcui-search-dropdown__scroll {
    max-height: 260px;
}

/* An unset dropdown should read as unset — the same grey the kit gives an input's
   ::placeholder. The kit renders the label slot as ordinary text, so a picker
   waiting to be filled in was as black as one already answered. */
.dcui-search-dropdown .dcui-search-dropdown__placeholder {
    color: #bfbfbf;
}

/* The search field is the first row of the open panel, as in lv_inventory: full
   width with a 5px 7px inset. At rest it shows no outline — the panel's edge
   already frames it — and while typing it takes the primary-colour border every
   focused kit input gets. The border is always there, transparent at rest, so
   focusing never shifts the row. No glow: the kit's :focus-within shadow read as
   a stray line under the row. */
.dcui-search-dropdown .dcui-search-dropdown__search {
    margin: 0;
    padding: 5px 7px;
    box-sizing: border-box;
    border: 1px solid transparent;
    box-shadow: none;
}

.dcui-search-dropdown .dcui-search-dropdown__search:focus-within {
    border-color: var(--dcui-primary-color);
}

/* `flush`: the dropdown sits inside a bordered row that already draws the line,
   so neither the field nor its search box adds one (lv_inventory's form rows).
   The hover/open fill still shows it is a control. */
.dcui-search-dropdown--flush .dcui-dt-label {
    border: 0;
    background-color: transparent;
}

.dcui-search-dropdown--flush .dcui-dt-label:hover,
.dcui-search-dropdown--flush.dcui-select-dropdown.open .dcui-dt-label {
    background-color: #eeeeee;
}

.dcui-search-dropdown--flush .dcui-search-dropdown__search:focus-within {
    border-color: transparent;
}

/* A long selected label must not push the caret off the field: the kit's label is
   nowrap, so the text clips with an ellipsis. The flex wrapper needs min-width:0
   to shrink at all; an avatar keeps its size. */
.dcui-search-dropdown .dcui-dt-label > .dcui-flex-item {
    min-width: 0;
}

.dcui-search-dropdown .dcui-dt-label > .dcui-flex-item > div:last-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keyboard highlight (activeIndex). The same wash the kit gives a hovered row, on
   the same element, so arrowing down reads exactly like running the pointer down
   it — and the two can never disagree about which row Enter would take. */
.dcui-search-dropdown .dcui-dropdown-menu > li.is-active > a {
    background-color: #eee;
}

/* overlayLoading: a search's loading row is a white sheet over the whole scroll
   box (positioned against it, from the top: reload() scrolls the list there)
   with the loader in its middle, so the stale rows don't show through. */
.dcui-search-dropdown .dcui-search-dropdown__scroll--overlay {
    position: relative;
}

.dcui-search-dropdown .dcui-dropdown-menu > li.dcui-search-dropdown__loading--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

/* Two-line option (subKey): the label with a muted second line beneath. Rendered
   only for options carrying a subKey value, so single-line lists are unaffected. */
.dcui-search-dropdown .dcui-search-dropdown__option-sub {
    color: #7b8187;
    font-size: 12px;
    margin-top: 2px;
}

/* Two-line CHIP (subInChip): the closed field repeats the selected option's sub
   line, so a scope reading "Rack 1" still says which parent it is in without the
   panel being reopened. The kit sizes .dcui-dt-label as one fixed-height line —
   height, a matching line-height, and a caret centred by a line-height of its own
   — so the variant re-does all three rather than letting the second line run out
   of the box. */
.dcui-search-dropdown--two-line .dcui-dt-label {
    display: flex;
    align-items: center;
    height: auto;
    min-height: var(--dcui-field-height);
    line-height: 1.3;
    padding-top: 6px;
    padding-bottom: 6px;
}

.dcui-search-dropdown--two-line .dcui-dt-label:after {
    top: 50%;
    bottom: auto;
    line-height: 1;
    transform: translateY(-50%);
}

/* The kit flips the caret on open with its own `transform: rotate(180deg)`, which
   would drop the centring shift above; keep both. */
.dcui-search-dropdown--two-line.open .dcui-dt-label:after {
    transform: translateY(-50%) rotate(180deg);
}

.dcui-search-dropdown--two-line .dcui-search-dropdown__chip {
    min-width: 0;
}

.dcui-search-dropdown--two-line .dcui-search-dropdown__chip > * {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dcui-search-dropdown--two-line .dcui-search-dropdown__chip-sub {
    color: #7b8187;
    font-size: 12px;
    margin-top: 2px;
}

/* Keep the deselect (x) off the option's own text. dc-ui-kit positions
   .dcui-select-dropdown-close absolutely over the row, so it reserves no width and
   the label runs underneath it. Lay the row out as a flex line instead and let the
   x sit at its end as a real item. Scoped here, so the kit's plain single-line
   options elsewhere keep their absolute treatment. */
.dcui-search-dropdown .dcui-search-dropdown__option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* min-width:0 — without it the flex item refuses to shrink below its content's
   intrinsic width, pushing the x past the row's right edge instead of wrapping. */
.dcui-search-dropdown .dcui-search-dropdown__option-row > .dcui-flex-item {
    flex: 1 1 auto;
    min-width: 0;
}

.dcui-search-dropdown .dcui-search-dropdown__option-row .dcui-search-dropdown__option {
    min-width: 0;
}

.dcui-search-dropdown .dcui-search-dropdown__option-row .dcui-select-dropdown-close {
    position: static;
    transform: none;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Opt-in "Create New" footer (createLabel): the list scrolls while the footer stays
   pinned to its bottom. The footer sticks to its nearest scrolling ancestor, which
   is the INNER list, so that must be the only scroller — capping the outer panel
   too clipped the footer right out of view. */
.dcui-search-dropdown .dcui-dropdown-panel:has(.dcui-search-dropdown__create) {
    max-height: none;
}

.dcui-search-dropdown .dcui-dropdown-panel:has(.dcui-search-dropdown__create) .dcui-search-dropdown__scroll {
    max-height: 240px;
}

.dcui-search-dropdown .dcui-search-dropdown__create {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

.dcui-search-dropdown .dcui-search-dropdown__create a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: #2563eb;
    cursor: pointer;
}

.dcui-search-dropdown .dcui-search-dropdown__create:hover {
    background: #f3f4f6;
}

/* Avatar mode: lv_inventory's small bubble — 24px, the size the avatar's own
   <img> declares — so a user row stays one text line tall. The <img> must fill
   its circle rather than letter-box inside it. */
.dcui-search-dropdown__avatar {
    --dcui-photo-bubble-size: 24px;
}

.dcui-search-dropdown__avatar img {
    object-fit: cover;
}
/*******************************/
/**    Compact navigation    **/
/*******************************/
/* Opt-in LV navigation density; the original drawer keeps its existing look. */
.dcui-navigation-drawer-compact { display: flex; flex-direction: column; min-height: 0; padding: 20px 12px; }
.dcui-navigation-drawer-compact .dcui-navigation-drawer-name-container { padding: 0; margin-bottom: 16px; }
.dcui-navigation-drawer-compact .dcui-navigation-content { display: flex; flex-direction: column; gap: 2px; }
.dcui-navigation-drawer-compact .dcui-navigation-content::after,
.dcui-navigation-drawer-compact .dcui-navigation-content .item::before,
.dcui-navigation-drawer-compact .dcui-navigation-content .item.selected::after { content: none; display: none; }
.dcui-navigation-drawer-compact .dcui-navigation-content .item {
    display: flex; align-items: center; gap: 9px; height: auto; padding: 10px 12px;
    border-radius: 8px; cursor: pointer; color: #5a6472; font-size: 14px;
}
.dcui-navigation-drawer-compact .dcui-navigation-content .item:hover { background: #e6f5ff; }
.dcui-navigation-drawer-compact .dcui-navigation-content .item.selected { background: #e6f5ff; color: var(--dcui-primary-color); font-weight: 600; }
.dcui-navigation-drawer-compact .dcui-navigation-content .item .icon { width: 22px; text-align: center; font-size: 15px; }
.dcui-navigation-section { margin-top: 18px; border-top: 1px solid #ededed; padding-top: 14px; }
.dcui-navigation-section__title { padding: 4px 14px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8a94a6; }

/*******************************/
/**       Page header       **/
/*******************************/
/* Promoted from LviPageHeader, preserving the existing banner values. */
.dcui-page-header { display: flex; align-items: center; justify-content: space-between; padding: 30px; background-color: #d6ecf8; }
.dcui-page-header__left { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.dcui-page-header__icon { font-size: 40px; margin-right: 15px; flex: 0 0 auto; display: flex; align-items: center; color: #1f2a37; }
.dcui-page-header__titles { display: flex; flex-direction: column; min-width: 0; }
.dcui-page-header__title { margin: 0; font-size: 30px; font-weight: 700; color: #000; overflow-wrap: anywhere; }
.dcui-page-header__description { font-size: 16px; font-weight: 500; color: #1f2a37; overflow-wrap: anywhere; }
.dcui-page-header__actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 600px) {
    .dcui-page-header { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
    .dcui-page-header__icon { font-size: 30px; }
    .dcui-page-header__title { font-size: 24px; }
    .dcui-page-header__actions { width: 100%; flex-wrap: wrap; }
}

/*******************************/
/**     Tree navigation     **/
/*******************************/
/* LV's expandable tree, independent of warehouse or inventory selectors. */
.dcui-tree-navigation { min-width: 0; }
.dcui-tree-row { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.dcui-tree-row:hover { background: #f4f7fb; }
.dcui-tree-row.selected { background: #e8f3ff; color: #0a6cd1; }
.dcui-tree-row.is-disabled { color: #c4cad4; cursor: not-allowed; }
.dcui-tree-caret { width: 14px; flex: 0 0 14px; text-align: center; color: #8a94a6; border: 0; padding: 0; background: transparent; cursor: pointer; font: inherit; }
.dcui-tree-caret:disabled { cursor: not-allowed; }
.dcui-tree-icon { color: #8a94a6; font-size: 15px; }
.dcui-tree-row.selected .dcui-tree-icon { color: #0a6cd1; }
.dcui-tree-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.dcui-tree-actions { display: flex; gap: 10px; flex: 0 0 auto; color: #8a94a6; }
.dcui-tree-children { margin-left: 16px; border-left: 1px solid #eef0f4; padding-left: 4px; }

/*******************************/
/**   Collapsible panel     **/
/*******************************/
/* Previously supplied only by LV; both left and right panels now stand alone. */
.dcui-collapsible-side-panel { position: relative; flex: 0 0 auto; width: 320px; max-width: 100%; min-height: 0; border-left: 1px solid #eef0f4; transition: width .15s ease; }
.dcui-collapsible-side-panel.dcui-csp-collapsed { width: 40px; }
.dcui-csp-toggle { position: absolute; top: 12px; left: -13px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e2e6ec; background: #fff; cursor: pointer; color: #6b7585; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.dcui-csp-body { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.dcui-csp-rail { display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; }
.dcui-csp-rail-title { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: .4px; font-size: 12px; color: #8a94a6; }
.dcui-csp-left { border-left: 0; border-right: 1px solid #eef0f4; }
.dcui-csp-left .dcui-csp-toggle { left: auto; right: -13px; }
.dcui-collapsible-side-panel.dcui-csp-narrow { width: 100%; border-left: 0; border-right: 0; border-top: 1px solid #eef0f4; }
@media (prefers-reduced-motion: reduce) { .dcui-collapsible-side-panel { transition: none; } }

/*******************************/
/**      Activity feed      **/
/*******************************/
/* Timeline appearance comes from the framework's existing DcPointList. */
.dcui-activity-feed { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; padding: 16px; background: #fff; }
.dcui-activity-feed__title { margin: 0 0 8px; }
.dcui-activity-feed__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dcui-activity-feed .dc-point-list-container-parent { height: auto; overflow: visible; }
.dcui-activity-feed__item { min-width: 0; overflow-wrap: anywhere; }
.dcui-activity-feed__time { display: block; font-size: 12px; }

/*******************************/
/**         Dashboard        **/
/*******************************/
/* The framework dashboard page and the kit pieces its widgets are built from
   (DcDashboardWidget, DcAppTiles, DcQuickLinks, DcStatGroup). Apps re-brand it
   by overriding the variables below in their own stylesheet. */
/* Theming variables and their defaults (set as var() fallbacks, not on :root,
   because app stylesheets are concatenated BEFORE xp_system's and a :root
   default here would override the app's value):
   --dcui-dashboard-greeting-color  #1e1e1e
   --dcui-dashboard-heading-color   #3f3f3f
   --dcui-dashboard-avatar-border   #657ff5
   --dcui-dashboard-tile-1/2/3      #544fac / #4686ac / #4dae84
   --dcui-dashboard-backdrop        none (decorative shape behind the page, e.g. a gradient) */
.dcui-dashboard { max-width: 1100px; margin: 40px auto; padding: 0 16px; }
.dcui-dashboard__greeting { margin: 0 0 20px; color: var(--dcui-dashboard-greeting-color, #1e1e1e); font-size: 30px; font-weight: 700; line-height: 1.2; }
.dcui-dashboard__column { display: flex; flex-direction: column; gap: 25px; }
.dcui-dashboard__column + .dcui-dashboard__column { margin-top: 25px; }
@media (min-width: 992px) { .dcui-dashboard__column + .dcui-dashboard__column { margin-top: 0; } }
.dcui-dashboard__full { display: flex; flex-direction: column; gap: 25px; margin-top: 25px; }
.dcui-dashboard__backdrop { position: fixed; z-index: -99; top: 50%; left: 10%; width: 825px; height: 785px; border-radius: 77px; transform-origin: top left; transform: rotate(296deg); background: var(--dcui-dashboard-backdrop, none); pointer-events: none; }

.dcui-dashboard-widget.is-transparent { padding: 0; border: 0; background: transparent; box-shadow: none; }
.dcui-dashboard-widget__title { margin: 0 0 15px; color: var(--dcui-dashboard-heading-color, #3f3f3f); font-size: 20px; font-weight: 700; line-height: 24px; }
.dcui-dashboard-widget__body { position: relative; min-height: 70px; }
.dcui-dashboard-widget .dcui-activity-feed { padding: 0; background: transparent; }

.dcui-photo-bubble.dcui-xl {
    width: calc(var(--dcui-photo-bubble-size) + 15px);
    height: calc(var(--dcui-photo-bubble-size) + 15px);
    min-width: calc(var(--dcui-photo-bubble-size) + 15px);
    min-height: calc(var(--dcui-photo-bubble-size) + 15px);
}
.dcui-dashboard-profile { display: flex; align-items: center; gap: 12px; }
.dcui-dashboard-profile .dcui-photo-bubble { border: 2px solid var(--dcui-dashboard-avatar-border, #657ff5); }
.dcui-dashboard-profile .dcui-photo-bubble > img { object-fit: cover; }
.dcui-dashboard-profile__name { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }

.dcui-app-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dcui-app-tiles__item { width: 70px; }
.dcui-app-tiles__link { display: block; padding: 8px 5px; border-radius: 8px; color: inherit; text-align: center; text-decoration: none; }
.dcui-app-tiles__link:hover, .dcui-app-tiles__link:focus-visible { background: #f3f4f6; }
.dcui-app-tiles__icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 46px; margin: 0 auto; border-radius: 8px; background: var(--dcui-dashboard-tile-1, #544fac); color: #fff; font-size: 20px; }
.dcui-app-tiles__icon.is-tone-2 { background: var(--dcui-dashboard-tile-2, #4686ac); }
.dcui-app-tiles__icon.is-tone-3 { background: var(--dcui-dashboard-tile-3, #4dae84); }
.dcui-app-tiles__icon > img { display: block; width: 26px; height: auto; max-height: 30px; filter: brightness(0) invert(1); }
.dcui-app-tiles__label { display: block; margin-top: 5px; overflow: hidden; color: #1e1e1e; font-size: 11px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

.dcui-quick-links { display: flex; flex-wrap: wrap; gap: 5px 20px; margin: 0; padding: 0; list-style: none; }
.dcui-quick-links__link { display: inline-flex; align-items: center; gap: 8px; min-height: 35px; padding: 0 6px; border-radius: 6px; color: inherit; font-weight: 600; text-decoration: none; }
.dcui-quick-links__link:hover, .dcui-quick-links__link:focus-visible { background: #f3f4f6; }

.dcui-stat-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 15px; }
.dcui-stat-group__item { display: flex; flex-direction: column; min-width: 0; }
.dcui-stat-group__value { color: var(--dcui-dashboard-heading-color, #3f3f3f); font-size: 30px; font-weight: 700; line-height: 1.2; }
.dcui-stat-group__label { overflow-wrap: anywhere; }

/*******************************/
/**       Comment feed        **/
/*******************************/
/* Brought in from the Inventory and PMS apps: the PMS style page's comment thread, which
   Inventory's activity sidebar reuses. */
.dcui-comment-feed { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; height: 100%; }
.dcui-comment-feed__scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 10px; }
.dcui-comment-feed__list { position: relative; display: flex; flex-direction: column; min-height: 50px; margin-top: 20px; }
.dcui-comment-feed__list::after { content: ""; position: absolute; top: 28px; left: 10px; height: calc(100% - 100px); border-left: 2px dotted #dbdbdb; z-index: 0; }
.dcui-comment-feed__item { display: flex; align-items: flex-start; margin-bottom: 15px; }
.dcui-comment-feed__item:last-of-type { margin-bottom: 0; }
.dcui-comment-feed__avatar { position: relative; z-index: 1; margin-right: 5px; }
.dcui-comment-feed__avatar.dcui-photo-bubble { width: calc(var(--dcui-photo-bubble-size) - 10px); height: calc(var(--dcui-photo-bubble-size) - 10px); min-width: calc(var(--dcui-photo-bubble-size) - 10px); min-height: calc(var(--dcui-photo-bubble-size) - 10px); }
.dcui-comment-feed__avatar img { object-position: top; }
.dcui-comment-feed__card { flex: 1; min-width: 0; padding: 10px; border: 1px solid #efefef; border-radius: 5px; background-color: #fff; }
.dcui-comment-feed__author { font-size: 12px; font-weight: 400; }
.dcui-comment-feed__time { font-size: 12px; font-weight: 300; white-space: nowrap; }
.dcui-comment-feed__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.dcui-comment-feed__older { margin: 0 0 15px; font-size: 12px; text-align: center; }
.dcui-comment-feed__error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dcui-comment-feed__composer { margin-top: 15px; padding: 5px; border: 1px solid #efefef; border-radius: 7px; background-color: #fff; }
.dcui-comment-feed__form { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; }
.dcui-comment-feed__input { flex: 1; min-width: 0; }
.dcui-comment-feed__input .dcui-form-group { margin: 0; }
.dcui-comment-feed__input .dcui-fld-label { display: none; }
.dcui-comment-feed__input textarea.dcui-form-control { min-height: unset; border: 0; box-shadow: none; }
.dcui-comment-feed__send.dcui-button { margin: 0 5px; padding: 10px; border: 0; background-color: transparent; color: #000; }
.dcui-comment-feed__send.dcui-button:hover { background-color: transparent; color: var(--dcui-primary-color); }
.dcui-comment-feed__spinner { inset: 0; padding: 8px; border-radius: 5px; }
.dcui-comment-feed__note { margin: 8px 0 0; font-size: 12px; }

/*******************************/
/**      Activity panel       **/
/*******************************/
/* Inventory's activity sidebar layout: fills a DcCollapsibleSidePanel and stretches a DcTabs
   "Comments | Activity" pair to its height, so each feed scrolls inside the panel. */
.dcui-activity-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; padding: 16px; background: #fff; }
.dcui-activity-panel .dcui-basic-tabs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dcui-activity-panel .dcui-bt-nav { border-bottom: 1px solid #dbdbdb; padding-bottom: 5px; }
.dcui-activity-panel .dcui-bt-panel { display: flex; flex: 1 1 auto; min-height: 0; }
.dcui-activity-panel .dcui-bt-tab.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
.dcui-activity-panel .dcui-activity-feed { padding: 0; }


/***********************/
/**    Notice Bar     **/
/***********************/

.dcui-notice-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    background-color: #f8f8f8;
    color: var(--dcui-body-color);
}

.dcui-notice-bar > i {
    flex-shrink: 0;
    font-size: 18px;
}
.dcui-notice-bar--info {
    border-color: color-mix(in srgb, var(--dcui-primary-color) 25%, #fff);
    background-color: color-mix(in srgb, var(--dcui-primary-color) 10%, #fff);
}

.dcui-notice-bar--info > i {
    color: var(--dcui-primary-color);
}

.dcui-notice-bar--warning > i {
    color: var(--dcui-warning-color);
}

.dcui-notice-bar--danger > i {
    color: var(--dcui-danger-color);
}

.dcui-notice-bar--success > i {
    color: var(--dcui-success-color);
}

/***********************/
/**  Contact Picker   **/
/***********************/

.dcui-contact-picker {
    min-width: 230px;
    padding: 6px 10px;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    background-color: #fff;
}

.dcui-contact-picker.disabled {
    opacity: 0.6;
}

.dcui-contact-picker .dcui-select-dropdown {
    display: block;
}

.dcui-contact-picker .dcui-dt-label {
    display: block;
    padding: 0;
    height: auto;
    line-height: 1.6;
    background-color: transparent;
}

.dcui-contact-picker .dcui-dt-label::after {
    display: none;
}

.dcui-contact-picker .dcui-dropdown-panel {
    min-width: 100%;
}

.dcui-contact-picker__select {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
}

.dcui-contact-picker__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dcui-contact-picker__text.is-placeholder {
    opacity: 0.6;
}

.dcui-contact-picker__list {
    max-height: 240px;
    overflow-y: auto;
}
.dcui-contact-picker__list .dcui-dropdown-menu > li.selected {
    background-color: #eee;
}

.dcui-contact-picker__detail {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--dcui-line-color);
    font-size: 13px;
    opacity: 0.85;
}

/* The richer panel (DcContactPicker `searchable` / `addable`): search, two-line rows, the add row, and the
   add form (DcContactAddForm) that takes the list's place. */
/* The panel is moved by script (see mixins/dcPanelPopper.js), so it must not animate from its old spot. */
.dcui-contact-picker.is-rich .dcui-dropdown-panel {
    animation: none;
    transition: none;
    opacity: 1;
}

.dcui-contact-picker.is-adding .dcui-dropdown-panel {
    width: 340px;
    max-width: calc(100vw - 32px);
}

/* The form is not a list: it is as tall as it needs, and the panel scrolls only when the screen is short. */
.dcui-contact-picker.is-adding .dcui-contact-picker__list {
    max-height: none;
    overflow-y: visible;
}

.dcui-contact-picker__search {
    padding: 10px 10px 4px;
}

/* The rows are the plain list's own (an `a` in an `li`, name only), so they look as they always did. */
.dcui-contact-picker .dcui-dropdown-menu > li.dcui-contact-picker__option > a {
    cursor: pointer;
}

.dcui-contact-picker .dcui-dropdown-menu > li.dcui-contact-picker__empty {
    padding: 10px 15px;
    opacity: 0.7;
}

/* Stays in view at the foot of a long list. */
.dcui-contact-picker .dcui-dropdown-menu > li.dcui-contact-picker__add {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px 9px;
    border-top: 1px solid var(--dcui-line-color);
    background-color: #fff;
    color: var(--dcui-primary-color);
    cursor: pointer;
}

.dcui-contact-picker .dcui-dropdown-menu > li.dcui-contact-picker__add:hover {
    background-color: color-mix(in srgb, var(--dcui-primary-color) 8%, #fff);
}

.dcui-contact-picker__form-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--dcui-line-color);
    font-weight: 700;
}

.dcui-contact-picker__back {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: inherit;
}

.dcui-contact-picker .dcui-dropdown-menu > li.dcui-contact-picker__form {
    padding: 12px;
    cursor: default;
}

/***********************/
/** Contact Add Form  **/
/***********************/

.dcui-contact-add {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dcui-contact-add .dcui-form-group {
    margin-bottom: 0;
}

.dcui-contact-add__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dcui-contact-add__error {
    margin-top: 3px;
    font-size: 12px;
}

/* The same look as `.dcui-form-control.error`, set from the field's container because DcInputField reads its own
   `class` only once. */
.dcui-contact-add__field--error .dcui-form-control {
    border-color: var(--dcui-danger-color);
    color: var(--dcui-danger-color);
}

.dcui-contact-add__link {
    color: var(--dcui-primary-color);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.dcui-contact-add__role {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px dashed var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
}

.dcui-contact-add__role-note {
    font-size: 12px;
    opacity: 0.7;
}

.dcui-contact-add__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 480px) {
    .dcui-contact-add__row {
        grid-template-columns: 1fr;
    }
}

/***********************/
/** Tree Check Picker **/
/***********************/

.dcui-tree-check-picker {
    display: inline-flex;
}

/* Disabled: no box, just the label in grey. The explicit background beats the
   `.dcui-select-dropdown.disabled .dcui-dt-label` grey that la_vivente_pms sets on every disabled dropdown. */
.dcui-tree-check-picker.disabled {
    pointer-events: none;
}

.dcui-tree-check-picker .dcui-select-dropdown.disabled .dcui-dt-label {
    background-color: transparent;
}

.dcui-tree-check-picker.disabled .dcui-tree-check-picker__trigger {
    color: #999;
    cursor: default;
}

.dcui-tree-check-picker .dcui-dt-label,
.dcui-tree-check-picker .dcui-select-dropdown.open .dcui-dt-label,
.dcui-tree-check-picker .dcui-dt-label:hover {
    display: flex;
    align-items: center;
    padding: 0;
    height: auto;
    line-height: 1.4;
    background-color: transparent;
}


.dcui-tree-check-picker .dcui-dt-label::after {
    display: none;
}

.dcui-tree-check-picker .dcui-dropdown-panel {
    animation: none;
    transition: none;
    opacity: 1;
    min-width: 320px;
}

.dcui-tree-check-picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dcui-primary-color);
    cursor: pointer;
}
.dcui-tree-check-picker__trigger > i {
    line-height: 1;
    position: relative;
    top: -1px;
}

.dcui-tree-check-picker__search {
    padding: 10px 10px 4px;
}

.dcui-tree-check-picker__list {
    max-height: 280px;
    overflow-y: auto;
}

.dcui-tree-check-picker .dcui-dropdown-menu > li.dcui-tree-check-picker__group-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.dcui-tree-check-picker .dcui-dropdown-menu > li.dcui-tree-check-picker__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 32px;
    border-top: 1px solid var(--dcui-line-color);
    cursor: pointer;
}

.dcui-tree-check-picker .dcui-dropdown-menu > li.dcui-tree-check-picker__item.is-selected {
    background-color: color-mix(in srgb, var(--dcui-primary-color) 8%, #fff);
}

.dcui-tree-check-picker .dcui-dropdown-menu > li.dcui-tree-check-picker__item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dcui-tree-check-picker__meta {
    margin-left: auto;
    font-size: 13px;
    opacity: 0.75;
    white-space: nowrap;
}

.dcui-tree-check-picker .dcui-dropdown-menu > li.dcui-tree-check-picker__empty {
    padding: 12px;
    text-align: center;
    opacity: 0.7;
}

/***********************/
/**   Bordered Row    **/
/***********************/

/* A row outlined like an input, for a picked item in a list (a picked rack and its quantity). */
.dcui-bordered-row {
    padding: 4px 8px;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    background-color: #fff;
}

/***********************/
/**    Record Card    **/
/***********************/

/* A small card for one record (DcRecordCard): icon, title and subtitle, status, labelled details, link. */
.dcui-record-card {
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: var(--dcui-field-radius);
    background-color: #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.dcui-record-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dcui-record-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--dcui-field-radius);
    background-color: #ededed;
    color: #777;
}

.dcui-record-card__titles {
    flex: 1;
    min-width: 0;
}

.dcui-record-card__title {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.dcui-record-card__subtitle {
    font-size: 12px;
    opacity: 0.75;
}

.dcui-record-card__status {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
}

.dcui-record-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-top: 8px;
}

.dcui-record-card__detail-label {
    font-size: 11px;
    opacity: 0.7;
}

.dcui-record-card__detail-value {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.dcui-record-card__link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--dcui-primary-color);
    cursor: pointer;
}

/* DcSpaceBadge */
.dcui-space-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: 8px; background: var(--dcui-dashboard-tile-1, #544fac); color: #fff; font-weight: 600; line-height: 1; text-transform: uppercase; user-select: none; }
.dcui-space-badge.is-tone-2 { background: var(--dcui-dashboard-tile-2, #4686ac); }
.dcui-space-badge.is-tone-3 { background: var(--dcui-dashboard-tile-3, #4dae84); }
.dcui-space-badge.is-all { background: var(--dcui-warning-color, #ffa434); }
.dcui-space-badge.is-small { width: 16px; height: 16px; border-radius: 4px; }
.dcui-space-badge.is-medium { width: 34px; height: 34px; font-size: 13px; }
.dcui-space-badge.is-large { width: 44px; height: 44px; font-size: 16px; }

/* DoLeads additions: DcAccordion and DcCalendarRangePicker single_trigger (see dev/leads/EXTERNAL_CHANGES.md) */
/**********************/
/**    Accordion     **/
/**********************/

.dcui-accordion-item {
    border-bottom: 1px solid #d8d8d8;
}

.dcui-accordion-head {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #4d5156;
    text-align: left;
    cursor: pointer;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.dcui-accordion-static .dcui-accordion-head {
    cursor: default;
}

/* room for the absolute arrow: its 10px gap plus its 13px width */
.dcui-accordion-item:not(.dcui-accordion-static) .dcui-accordion-head {
    position: relative;
    padding-right: 23px;
}

.dcui-accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    margin-right: 16px;
    font-size: 30px;
    line-height: 1;
}

.dcui-accordion-label {
    flex: 1;
    min-width: 0;
}

.dcui-accordion-item:not(.dcui-accordion-static) .dcui-accordion-head:hover,
.dcui-accordion-open .dcui-accordion-head {
    color: var(--dcui-primary-color);
}

/* pinned to the head's right edge, centred vertically in a 1em box so it turns in place */
.dcui-accordion-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1em;
    height: 1em;
    margin: auto 0;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    color: #000;
    transition: transform 0.25s ease;
}

.dcui-accordion-open .dcui-accordion-arrow {
    transform: rotate(180deg);
}

.dcui-accordion-disabled .dcui-accordion-head {
    color: #8d8d8d;
}

.dcui-accordion-disabled .dcui-accordion-icon {
    opacity: 0.35;
    filter: grayscale(1);
}

/* animates to the content's own height; visibility keeps closed content out of the tab order */
.dcui-accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.25s ease, visibility 0.25s;
}

.dcui-accordion-open .dcui-accordion-body {
    grid-template-rows: 1fr;
    visibility: visible;
}

.dcui-accordion-body-inner {
    overflow: hidden;
    min-height: 0;
}

.dcui-accordion-content {
    padding: 0 0 15px;
}
/* single_trigger: one dropdown-style button (chevron as on DcDropdown) instead of the pair. */
.dcui-calendar-range__single { position: relative; display: inline-flex; align-items: center; gap: 9px; height: var(--dcui-field-height); padding: 0 35px 0 10px; border: 1px solid var(--dcui-line-color); border-radius: var(--dcui-field-radius); background: #fff; color: var(--dcui-body-color); font: inherit; white-space: nowrap; cursor: pointer; }
.dcui-calendar-range__single:after { position: absolute; right: 10px; content: '\f107'; font-family: 'Font Awesome 6 Pro'; font-size: 120%; font-weight: 400; pointer-events: none; }
.dcui-calendar-range__single.is-active { border-color: var(--dcui-primary-color); }

/*************************/
/**   Photo uploader    **/
/*************************/
/* DcPhotoUploader (DoLeads addition, see dev/leads/EXTERNAL_CHANGES.md): a picture with a camera
   over it to change it and an x to remove it. The framework's .app-photo-uploader look
   (apps/xp_system/assets/styles.css), carried here so the component needs no other CSS. Its size,
   corner radius and camera size come from the size / radius props (the --dcui-photo-* variables). */
.dcui-photo-uploader { position: relative; display: block; flex: none; width: var(--dcui-photo-size, 90px); height: var(--dcui-photo-size, 90px); border-radius: var(--dcui-photo-radius, 0); text-align: center; }
.dcui-photo-uploader__preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.dcui-photo-uploader__image { display: block; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top; opacity: 0.6; }
.dcui-photo-uploader.is-shown .dcui-photo-uploader__image { opacity: 1; }
.dcui-photo-uploader__input { position: absolute; z-index: -1; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; }
.dcui-photo-uploader__change { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: inherit; background-color: rgba(255, 255, 255, 0.3); color: var(--dark-secondary-color); font-size: var(--dcui-photo-icon-size, 25px); text-shadow: 0 0 11px rgba(255, 255, 255, 0.5), 0 0 2px rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.2s ease-in-out; }
.dcui-photo-uploader:not(.is-shown) .dcui-photo-uploader__change:hover { background-color: rgba(255, 255, 255, 0.6); }
.dcui-photo-uploader.is-shown .dcui-photo-uploader__change { visibility: hidden; opacity: 0; }
.dcui-photo-uploader__remove { position: absolute; top: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 100%; background-color: #e30c0c; color: #fff; font-size: 12px; visibility: hidden; opacity: 0; cursor: pointer; }
.dcui-photo-uploader__remove:hover { background-color: #0097ff; }
/* the camera and the x show on hover (or keyboard focus); the x only exists while there's a picture */
.dcui-photo-uploader.is-shown:hover .dcui-photo-uploader__change,
.dcui-photo-uploader.is-shown:focus-within .dcui-photo-uploader__change,
.dcui-photo-uploader:hover .dcui-photo-uploader__remove,
.dcui-photo-uploader:focus-within .dcui-photo-uploader__remove { visibility: visible; opacity: 1; }
.dcui-photo-uploader.is-loading .dcui-photo-uploader__change { visibility: visible; opacity: 1; cursor: progress; }
.dcui-photo-uploader.is-disabled .dcui-photo-uploader__change { cursor: default; }
.dcui-photo-uploader.is-disabled:hover .dcui-photo-uploader__change { visibility: hidden; opacity: 0; }

/*** END OF KIT COMPONENT SECTIONS ***/
/* A catalog entry's style_sections names the next heading as its `end`. This
   sentinel is the `end` for whichever section is last, so adding a new one
   means inserting its block ABOVE this line — no previous entry needs editing. */
 :root {
    --content-guard: 1920px;
    --topbar-height: 70px;
    --sidebar-width: 90px;
}

html,
body,
#app,
.xp-content-guard {
    height: 100%;
    /* overflow-y: auto !important; */
}

.dark-mode .xp-content-guard {
    max-width: var(--content-guard);
    margin: 0 auto;
    background-color: #FBFBFD;
    overflow: hidden;
    position: relative;
}

.light-mode .xp-content-guard {
    max-width: var(--content-guard);
    margin: 0 auto;
    background-color: var(--light-tertiary-color);
    overflow: hidden;
    position: relative;
}

#xp-default-banner {
    text-align: center;
    margin: 10% auto;
    max-width: 992px;
}

#xp-default-banner .xp-db-text-head {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 35px;
}

#xp-default-banner .xp-db-icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 25px;
    display: inline-block;
    border-radius: 100%;
    background-color: #eee;
    color: #959595;
}

.bg-gradient-blue {
    background: linear-gradient(261.96deg, #00578c 29.34%, #001a30 121.48%);
}

.bg-full-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.bg-full-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(0, 29, 53, 0) 29.44%, #001d35 94.6%);
}

.bg-full-image .graphic-circuit-lines {
    position: absolute;
    width: 200px;
    top: calc(50% - 140px);
    left: 0;
    pointer-events: none;
}

.atc-contianer {
    display: grid;
    margin-top: 0.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.atc-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.atc-label {
    display: flex;
    padding: 2.5rem;
    flex-direction: column;
    border-radius: 0.5rem;
    border-width: 4px;
    border-style: dashed;
    width: 100%;
    text-align: center;
}

.atc-space {
    display: flex;
    margin-top: -2.5rem;
    flex: 1 1 auto;
    width: 40%;
    max-height: 12rem;
    justify-content: center;
    height: 30px;
}

.atc-img {
    object-position: center;
    font-size: 5rem;
}

.atc-select-file {
    color: #2563EB;
}

.atc-text-p {
    color: #6B7280;
}

.atc-txt {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.atc-select-file:hover {
    text-decoration: underline;
}

.atc-img-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;

}

.atc-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    color: #6B7280;
}


.ve-circle-avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.cp-v-card {
    border-bottom: 1px solid #4b4b4b;
    padding: 10px 0;
}

/*
* Loris
*/
.hide-input-file {
    visibility: hidden !important;
    position: absolute !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

.hide-element {
    visibility: hidden !important;
    opacity: 0 !important;
}

select.form-control {
    cursor: pointer;
}

/**
 * Authentication
 */
.ve-full-page-knife-cut {
    height: 100%;
}

.ve-full-page-knife-cut .kc-columns {
    width: 100%;
    height: 100%;
    position: relative;
}

.ve-full-page-knife-cut .kc-columns::after {
    content: "";
    clear: both;
    display: table;
}

.kc-columns .kc-col-left,
.kc-columns .kc-col-right {
    float: left;
    width: calc(50% + 150px);
    height: 100%;
    display: flex;
    align-items: center;
}

.kc-columns .kc-col-left {
    justify-content: flex-start;
    padding-left: 12%;
}

.kc-columns .kc-col-right {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    justify-content: flex-end;
    padding-right: 12%;
}

.kc-columns .kc-col-right .kc-skew {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
}

.kc-columns .kc-col-right .kc-skew::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(261.96deg, #00578c 29.34%, #001a30 121.48%);
    -ms-transform: skew(14deg, 0deg);
    -webkit-transform: skew(14deg, 0deg);
    transform: skew(14deg, 0deg);
    transform-origin: left top;
}

#ve-page-auth .pa-left-content {
    position: inherit;
    max-width: 480px;
    text-align: justify;
}

.pa-left-content .pa-lc-logo {
    max-width: 100%;
    height: auto;
}

.pa-left-content .pa-lc-text {
    color: #fff;
    margin-top: 10px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 25px;
    height: 100%;
}

.auth-logo img {
    width: 100px;
    height: 100px;
}

.auth-card-panel {
    width: 440px;
}

.dark-mode .auth-card-panel .acp-boxer {
    background-color: var(--dark-secondary-color);
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    color: var(--dark-color-text);
}

.dark-mode .auth-card-panel .acp-boxer a {
    color: #faf7f7;
}

.dark-mode .auth-card-panel .acp-boxer a:hover {
    color: #808080;
}

.light-mode .auth-card-panel .acp-boxer a {
    color: #020202;
}

.light-mode .auth-card-panel .acp-boxer a:hover {
    color: #808080;
}

.light-mode .auth-card-panel .acp-boxer {
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    color: var(--light-color-text);
}

.auth-card-panel .acp-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.dark-mode .auth-card-panel .acp-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--dark-color-text);
}

.light-mode .auth-card-panel .acp-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--light-color-text);
}

.auth-card-panel .acp-description {
    line-height: 1.3;
    color: #8d8d8d;
    font-size: 14px;
}

.dark-mode .auth-card-panel .acp-footer {
    color: var(--dark-quaternary-color);
    font-weight: 200;
    font-size: 14px;
    padding-top: 20px;
    line-height: 1;
}

.light-mode .auth-card-panel .acp-footer {
    color: var(--light-secondary-color);
    font-weight: 200;
    font-size: 14px;
    padding-top: 20px;
    line-height: 1;
}

.auth-card-panel .acp-boxer.head-tail-gapped {
    padding-top: 150px;
    padding-bottom: 150px;
}

.text-separator {
    position: relative;
    text-align: center;
    line-height: 1;
}

.text-separator span {
    display: inline-block;
    background-color: #fff;
    padding: 0 15px;
    position: relative;
}

.text-separator::before {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #dedede;
    left: 10px;
    right: 10px;
    top: 48%;
}

/**
 * Top bar
 */
#app-topbar {
    width: 100%;
    height: var(--topbar-height);
    position: fixed;
    max-width: var(--content-guard);
    top: 0;
    left: 50%;
    z-index: 90;
    padding: 0 15px;
    padding-left: calc(var(--sidebar-width) + 15px);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #424242;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.dark-mode #app-topbar {
    background-color: var(--dark-tertiary-color);
}

.light-mode #app-topbar {
    background-color: #c1c1c1;
}

#app-topbar .at-content {
    height: 100%;
    width: 100%;
}

.at-content .at-logo {
    max-width: 280px;
    min-width: 194px;
    height: 30px;
    display: inline-block;
}

.at-content .at-logo img {
    max-height: 100%;
    max-width: 100%;
    min-height: 30px;
}

.at-lu-content > div:not(:last-child) {
    margin-right: 13px;
}

.at-lu-content .at-lu-details span {
    display: block;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-lu-content .at-lu-details .at-lud-sub {
    font-size: 12px;
    font-weight: 200;
}

.dark-mode .at-lu-content .at-lu-details,
.dark-mode .at-lu-content .at-icon-dropdown {
    color: #fff;
}

.light-mode .at-lu-content .at-lu-details,
.light-mode .at-lu-content .at-icon-dropdown {
    color: #000000;
}

.at-content .at-elem-separator {
    width: 1px;
    height: calc(100% - 20px);
    margin: 0 25px;
    background-color: var(--dark-seven-color);
}

.light-mode .at-content .at-elem-separator {
    background-color: #999999;
}


.at-content .at-icon-item {
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 70px;
    text-align: center;
    cursor: pointer;
}

.at-icon-item .at-ii-icon {
    display: inline-block;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    position: relative;
}

.light-mode .at-icon-item .at-ii-icon {
    color: #313131;
}

.light-mode .at-content .at-icon-item:hover {
    color: #d3d3d3;
    background-color: var(--light-senary-color);
}


.at-content .at-icon-item:hover {
    background-color: var(--dark-senary-color);
}

.at-content .at-icon-item:hover .at-ii-icon {
    color: var(--quaternary-color);
}

.icon-bubble {
    position: absolute;
    display: inline-block;
    min-width: 20px;
    height: 20px;
    line-height: 16px;
    border-radius: 100px;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    z-index: 1;
    padding: 3px;
    top: -5px;
    left: 50%;
    background-color: #fff;
    white-space: nowrap;
}

.icon-bubble.bubble-red {
    background-color: #f00;
}

.at-content .at-search {
    width: 412px;
}

.at-search .form-control {
    background-color: transparent;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
    color: #fff;
    padding-right: 50px;
}

.light-mode .at-search .form-control {
    color: #000000;
}

.at-search .icon-control .ic-icon {
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    width: 40px;
}

.light-mode .at-search .icon-control .ic-icon {
    background-color: transparent;
    color: #000000;
    font-size: 20px;
    width: 40px;
}

.light-mode #megaSearch::placeholder {
    color: #000;
}

#tb-mega-menu1 {
    min-height: 265px;
    position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    padding: 40px 8%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#tb-mega-menu1 .tb-mm-wrap {
    flex-wrap: wrap;
}

#tb-mega-menu {
    position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    padding: 40px 8%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#tb-mega-menu .tb-mm-wrap {
    flex-wrap: wrap;
}

.tb-mm-wrap .tb-mm-item {
    width: 20%;
    padding-right: 30px;
    margin-bottom: 20px;
}

.tb-mm-item > a {
    padding: 13px 13px;
}

.tb-mm-item .tb-mmi-icon {
    width: 35px;
    min-width: 35px;
    font-size: 18px;
}

.tb-mm-item .tb-mmi-text {
    color: var(--body-color);
    flex: 1;
}

.tb-mmi-text .tb-mmi-label {
    margin-bottom: 5px;
    line-height: 1;
}

.tb-mmi-text .tb-mmi-desc {
    font-size: 12px;
}

.tb-mm-item > a:hover {
    background-color: rgba(0, 121, 192, 0.15);
}

/**
* View as company top bar
*/
.viewASCompany-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.viewASCompany-container .viewASCompany-logo {
    filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
    border: 0.001em solid #3f3f3f;
    border-radius: 50px;
    height: 2.2rem;
    justify-content: center;
    overflow: hidden;
    margin-right: 10px;
    width: 2.2rem;
    min-width: 2.2rem;
}

.viewASCompany-container .viewASCompany-logo img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.viewASCompany-container .viewAsCompany-text {
    font-size: 15px;
    color: white;
    margin-right: 10px;
}

.light-mode .viewASCompany-container .viewAsCompany-text {
    font-size: 15px;
    color: inherit;
    margin-right: 10px;
}

.viewASCompany-container .viewASCompany-downArrow {
    font-size: 15px;
    color: white;
    margin-right: 10px;
}

.light-mode .viewASCompany-container .viewASCompany-downArrow {
    font-size: 15px;
    color: rgb(0, 0, 0);
    margin-right: 10px;
}

.vw-company-list {
    width: 240px;
}

.vw-container > li > a.doing-ajax {
    pointer-events: none;
}

.vw-container > li > a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-quinary-color);
}

.dark-mode .vw-search-input {
    background-color: #5d5d5d !important;
}

.vwbar.signout {
    cursor: pointer;
    height: 44px;
    line-height: 30px;
    border-top: 1px black solid;
    text-align: center;
    margin-top: 5px;
    font-weight: 300;
}

.vwbar.signout:hover {
    background-color: black;
}

.light-mode .vwbar.signout:hover {
    background-color: #dddddd;
}

.vw-view-container {
    width: 240px;
    padding: 0;
}

.vw-company-list:hover {
    cursor: pointer;
    background-color: var(--dark-quinary-color);
}

.light-mode .vw-company-list:hover {
    cursor: pointer;
    background-color: var(--light-secondary-color);
    color: var(--light-tertiary-color);
}

.vw-search-container {
    padding: 10px 15px;
    border-bottom: 1px solid black;
}

.megasearch {
    height: 35px;
}

#tb-search .ic-icon {
    height: 35px;
    line-height: 36px;
    font-size: 15px;
}

/**
* Field set
*/
.fl-fieldset {
    border-color: #d3d3d3;
    border-width: 1px;
    padding-bottom: 5px;
}

/**
 * Side bar
 */
#app-sidebar {
    width: var(--sidebar-width);
    position: fixed;
    background-color: var(--secondary-color);
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
    color: var(--color-text);
}

.dark-mode #app-sidebar {
    background-color: var(--dark-secondary-color);
    color: var(--dark-color-text);
}

.light-mode #app-sidebar {
    background-color: #999999;
    color: var(--light-color-text);
}

.as-do-logo {
    text-align: center;
    height: var(--topbar-height);
    display: flex;
    justify-content: center;
    align-items: center;
}

.as-nav .as-nav-item {
    text-align: center;
}

.dark-mode .as-nav .as-nav-item.active,
.dark-mode .as-nav .as-nav-item:hover {
    background-color: var(--menu-selected-color);
    color: var(--dark-quaternary-color) !important;
}

.light-mode .as-nav .as-nav-item.active,
.light-mode .as-nav .as-nav-item:hover {
    background-color: var(--menu-selected-color);
    color: var(--light-tertiary-color) !important;
}

.light-mode .as-nav .as-nav-item.active a,
.light-mode .as-nav .as-nav-item:hover a {
    color: var(--light-tertiary-color) !important;
}

.as-nav .as-nav-item > a {
    display: block;
    padding: 13px 5px;
}

.as-nav-item .as-ni-icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 1px;
}

.as-nav-item .as-ni-label {
    font-size: 12px;
    line-height: 1;
    /*white-space: nowrap;*/
}

/**
*Nuwan
*/
.app-qb-thumb {
    width: 250px;
}

.app-qb-thumb.btn:hover {
    cursor: pointer;
}

.ss-app-container {
    width: 280px;
    height: 160px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
    border: 1px solid #ffffff;
}

.dark-mode .ss-app-container {
    background-color: var(--dark-tertiary-color);
    border: 1px solid var(--dark-tertiary-color);
}

.light-mode .ss-app-container {
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
}

.side-box {
    width: auto;
    margin-left: 100px;
    margin-top: 20px;
    margin-right: 6px;
    border: 1px solid #d3cfcf;
    padding: 24px;
}

.no-notification-icon {
    font-size: 100px;
    padding-top: 65px;
    color: var(--secondary-color);
}

/*
*Radio button
*/
/* input[type=radio].vs-Radio {
  padding: 5px;
  margin-right: 5px;
  -webkit-appearance: none;
  outline: 0.1em solid black;
  outline-offset: 0.1rem;
}

input[type=radio]:checked.vs-Radio {
  display: inline-block;
  background-color: var(--secondary-color);
} */

.two-fa {
    border: 1px solid #c8c8c8;
    padding: 10px;
}

.xp_under_construction {
    text-align: center;
}

.text-under-logo {
    display: none;
}

.text-under-logo.show {
    display: block;
    position: absolute;
    right: 0px;
    color: white;
    line-height: 1px;
    font-size: 11px;
    bottom: -7px;
}

.fa-icon {
    font-size: 25px;
    color: var(--secondary-color);
}

/*
*Assign Employees
*/
.ase_no_results {
    position: absolute;
    top: 248px;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
    left: 7px;
}

.ase_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ase_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

.ase_no_results-header {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 500;
}

/*
*Mega Search
*/
.mega_search_no_results {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.mega_search_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mega_search_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

.mega_search_no_results-header {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 500;
}

.megaSearch .megaSearch-main-title {
    padding: 0px 15px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #d2d5d7;
    min-height: 60px;
}

.megaSearch .megaSearch-main-item {
    padding-top: 14px;
    padding-bottom: 9px;
}

.megaSearch-bar-ul li.megaSearch-main-item {
    border-bottom: 1px solid #d2d5d7;
}

.megaSearch-bar-ul li:last-child.megaSearch-main-item {
    border-bottom: 0;
}

.megaSearch-bar-ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.megaSearch-description ul {
    list-style: none;
    padding-left: 0;
}

.megaSearch-sub-list {
    border-bottom: 1px solid #d7d7d7;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    list-style: inside;
}

.megaSearch-sub-list li {
    padding-left: 0 !important;
}

/* .notification-sub-list :hover {
  background-color:#e9f7ff;;
} */
.megaSearch-sub-list li::marker {
    font-size: 20px !important;
}

.sub-megaSearch-title {
    font-size: 15px;
}

.sub-megaSearch-date {
    font-size: 12px;
}

.megaSearch-no-results-text {
    position: absolute;
    left: 120px;
    top: 60px;
    font-size: 20px;
    font-weight: 600;
    list-style: none;
}

.megaSearch-sub-list .unread {
    color: var(--secondary-color);
    font-weight: 600;
    background-color: #f2faff;
    cursor: pointer;
}

.megaSearch-container {
    max-width: 775px;
    margin: 0 auto;
}

.megaSearch-main-date {
    font-size: 12px;
    color: #8d8d8d;
}

.megaSearch-icon-main {
    font-size: 18px;
    max-width: 18px;
    min-width: 18px;
    color: var(--secondary-color);
}

.megaSearch-main-container {
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 30px;
}

.megaSearch-main-title {
    font-size: 20px;
    padding-left: 25px;
}

.megaSearch-icon {
    max-width: 18px;
    min-width: 18px;
    font-size: 18px;
    color: black;
}

.dark-mode .megaSearch-icon {
    color: #f7f7f7;
}

.dark-mode .megaSearch-title {
    color: #f7f7f7;
    font-size: 13px;
}

.dark-mode .megaSearch-title:hover {
    color: #8d8d8d;
}

.megaSearch-title {
    color: #000;
    font-size: 13px;
}

.megaSearch-title:hover {
    color: var(--dark-senary-color);
}

.megaSearch-description {
    font-size: small;
}

.megaSearch-description ul {
    list-style: none;
    padding-left: 0;
}

.megaSearch-description ul :last-child {
    padding-bottom: 0;
}

.megaSearch-description ul li {
    padding-left: 85px !important;
    margin-bottom: 5px;
    cursor: pointer;
}

.megaSearch-description ul li span {
    color: #8d8d8d;
}

.megaSearch-description ul li.highlight {
    color: var(--secondary-color);
    font-weight: 600;
    padding-top: 5px;
}

.dark-mode .megaSearch-description ul li.highlight {
    color: white;
}

.dark-mode .megaSearch-description ul li a {
    color: rgb(226, 226, 226);
}

.megaSearch-description ul li a {
    color: black;
}

.megaSearch-description .megaSearch-bar-ul li {
    padding-left: 15px !important;
}

.megaSearch-description ul li a:hover {
    color: #a8a8a8;
}

.dark-mode .megaSearch-description ul li a:hover {
    color: #c3c3c3;
}

/*
*Registration
*/
.registrations-action-btn {
    font-size: 20px !important;
}

/*
*Notification bar and Notifications
*/

.notification {
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

.notification .notification-main-title {
    padding: 0px 15px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #d2d5d7;
}

.notification .notification-main-item {
    padding-top: 11px;
}

.notification-bar-ul li.notification-main-item {
    border-bottom: 1px solid #d2d5d7;
}

.notification-bar-ul li:last-child.notification-main-item {
    border-bottom: 0;
}

.notification-bar-ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.notification-bar-ul li:nth-of-type(1n + 4) {
    display: none;
}

.notification-description ul {
    list-style: none;
    padding-left: 0;
}

.notification-sub-list {
    border-bottom: 1px solid #d7d7d7;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    list-style: inside;
}

.notification-sub-list li {
    padding-left: 0 !important;
}

/* .notification-sub-list :hover {
  background-color:#e9f7ff;;
} */
.notification-sub-list li::marker {
    font-size: 20px !important;
}

.sub-notification-title {
    font-size: 14px;
}

.sub-notification-date {
    font-size: 12px;
}

.notification-sub-list .unread {
    color: var(--secondary-color);
    font-weight: 600;
    background-color: #f2faff;
    cursor: pointer;
}

.notification-container {
    max-width: 775px;
    margin: 0 auto;
}

.notification-main-date {
    font-size: 12px;
    color: #8d8d8d;
}

.notification-icon-main {
    font-size: 24px;
    width: 70px;
    min-width: 70px;
    text-align: center;
    color: var(--secondary-color);
}

.notification-main-container {
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.notification-main-title {
    font-size: 20px;
}

.notification-icon {
    max-width: 35px;
    min-width: 20px;
    font-size: 20px;
    color: var(--secondary-color);
    text-align: center;
}

.notification-description {
    font-size: small;
}

.notification-description ul {
    list-style: none;
    padding-left: 0;
}

.notification-description ul :last-child {
    padding-bottom: 0;
}

.notification-description ul li {
    padding-left: 5px !important;
    margin-bottom: 5px;
    padding-right: 5px;
    cursor: pointer;
}

.notification-description ul li span {
    color: #8d8d8d;
}

.notification-description ul li.unread {
    background-color: #f2faff;
    color: var(--secondary-color);
    font-weight: 600;
    padding-top: 10px;
}

.notification-description ul li a {
    color: black;
}

.notification-description .notification-bar-ul li {
    padding-left: 5px !important;
    padding-right: 5px;
}

.notification-description ul li a:hover {
    color: rgb(187, 187, 187);
}

.notification .mark-as-read {
    font-size: 15px;
    font-weight: 400;
    color: #2491c7;
    cursor: pointer;
}

.mark-as-read-icon {
    letter-spacing: -5px;
}

.view-all-notifcations {
    text-decoration: none;
}

.image-icon-text:hover {
    color: #e1dede;
}

.viewall-ul {
    padding: 0;
    margin: 0;
    border-top: 1px solid #d3d2d2;
    list-style: none;
}

.dark-mode .action-btns {
    color: var(--dark-quaternary-color);
}

.dark-mode .action-btns:hover {
    color: #9d9c9c;
}

.light-mode .action-btns {
    color: var(--light-primary-color);
}

.light-mode .action-btns:hover {
    color: var(--light-senary-color);
}

#xp-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.xp-loader {
    background-color: var(--dcui-primary-color);
    transition: width 0.5s ease;
    height: 3px;
    display: none;
}

.xp-loader.show {
    width: 0%;
    display: block;
}

.data-loader-container {
    position: relative;
    min-height: 300px;
}

.link-box {
    margin: 0 15px 15px 15px;
    padding: 22px 22px 22px 22px;
    border: 1px solid #d5d5d5;
    width: 96.6%;
}

.link-box-remove {
    position: absolute;
    right: 6px;
    top: 3px;
    font-size: 20px;
}

.link-box-remove.edit-service-link {
    right: 0 !important;
    top: -5px !important;
}

.sub-text {
    color: #8d8d8d;
    font-size: 13px;
}

.bgcolor-light-gray {
    background-color: #f1f1f1;
}

.light-gray {
    color: #787878;
}


.user-image-placeholder {
    position: relative;
    background-color: #fdfdfd;
}

.user-image-placeholder::before {
    display: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f007";
    font-size: 50px;
    color: #c5c5c5;
    text-align: center;
}

.sph-container {
    background-color: #f5f5f5;
}

/*
*No result
*/
.no-results {
    display: flex;
    justify-content: center;
    height: 500px;
    width: 100%;
    align-items: center;
    flex-direction: column;
    padding-bottom: 165px;
}

.no-results .no-results-header {
    font-size: 22px;
    margin-top: 10px;
    font-weight: 500;
}

.no-results .no-results-icon {
    font-size: 50px;
    color: #cbcbcb;
}

.no-results-icon-container {
    background: #ebebeb;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 1px solid #efefef;
}

/*
*No permissions
*/
.no-permission {
    display: flex;
    justify-content: center;
    height: 500px;
    width: 100%;
    align-items: center;
    flex-direction: column;
    padding-bottom: 165px;
}

.no-permission-icon-container {
    background: #ebebeb;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 1px solid #efefef;
}

.no-permission-header {
    font-size: 22px;
    margin-top: 10px;
    font-weight: 500;
}

.no-permission-icon {
    font-size: 50px;
    color: #cbcbcb;
}

/*
*Scroll bar
*/
.side-bar-scroll {
    height: calc(100% - 104px);
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#show_scroll_up_down_btn {
    display: none;
}

/* .side-bar-scroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
} */

.side-bar-scroll::-webkit-scrollbar {
    display: none;
    /* width: 6px;
      background-color: #F5F5F5; */
}

/* .side-bar-scroll::-webkit-scrollbar-thumb
{
	background-color: #1881c6;
} */
.sidebar-bottom {
    height: 65px;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.sidebar-company-logo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    display: inline-block;
    height: 40px;
    overflow: hidden;
    width: 41px;
}

.sidebar-bottom-arrows {
    font-size: 20px;
}

.sidebar-up {
    color: #00578c;
    transition: 0.25s ease;
    transform: rotate(0deg);
}

.sidebar-arrow-animate {
    transform: rotate(180deg);
}

.sb-mega-menu-icon {
    height: 100%;
    font-size: 25px;
    text-align: center;
    line-height: 70px;
}

.sb-mega-menu-icon:hover {
    cursor: pointer;
    background-color: var(--quinary-color);
}

.side-mega-menu {
    background-color: var(--dark-tertiary-color);
    height: 100%;
    width: 100%;
    z-index: 9999999;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

.side-mega-container {
    width: 100%;
    height: 100%;
    padding: 60px 100px 0;
}

.side-mega-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.dark-mode .side-mega-top .close-icon {
    font-size: 30px;
    color: var(--dark-quaternary-color);
}

.dark-mode .side-mega-top .close-icon :hover {
    cursor: pointer;
    color: var(--dark-quinary-color);
}

.light-mode .side-mega-top .close-icon {
    font-size: 30px;
    color: var(--light-secondary-color);
}

.light-mode .side-mega-top .close-icon :hover {
    cursor: pointer;
    color: var(--light-quinary-color);
}

.mode .side-mega-top .close-icon {
    font-size: 30px;
    color: var(--quaternary-color);
}

.mode .side-mega-top .close-icon :hover {
    cursor: pointer;
    color: var(--quinary-color);
}

.side-mega-middle-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.side-mega-middle-boxes {
    background-color: #3e3e3f;
    width: 300px;
    height: 100px;
    flex: 0 0 19%;
    margin-right: 0.85%;
    box-sizing: border-box;
    margin-top: 15px;
}

.dark-mode .side-mega-middle-boxes {
    background-color: var(--dark-eight-color);
    color: white;
}

.light-mode .side-mega-middle-boxes {
    background-color: #e3e3e3;
    color: rgb(0, 0, 0);
}

.side-mega-middle-boxes:hover {
    background-color: var(--dark-quinary-color);
    cursor: pointer;
}

.light-mode .side-mega-middle-boxes:hover {
    background-color: var(--light-secondary-color);
    color: var(--light-tertiary-color);
}

.dark-mode .side-mega-middle-boxes:hover {
    background-color: var(--dark-quinary-color);
    color: var(--dark-color-text);
}

.smm-content {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 15px;
}

.smm-icon {
    font-size: 40px;
}

.slide-fade-right-enter-active {
    transition: all 0.1s ease-out;
}

.slide-fade-right-leave-active {
    transition: all 0.2s ease-out;
}

.slide-fade-right-enter-from,
.slide-fade-right-leave-to {
    transform: translateX(-50px);
    opacity: 0;
}

.slide-fade-top-enter-active {
    transition: all 0.1s ease-out;
}

.slide-fade-top-leave-active {
    transition: all 0.2s ease-out;
}

.slide-fade-top-enter-from,
.slide-fade-top-leave-to {
    transform: translateY(-50px);
    opacity: 0;
}

/*
*Table
*/
.th-40 {
    width: 40%;
}

.th-50 {
    width: 50%;
}

.th-60 {
    width: 60%;
}

/*
company icon
*/
.image-icon-container {
    flex-direction: row;
}

.image-icon {
    filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
    border: 0.001em solid #e4dfdf;
    border-radius: 50px;
    height: 2.2rem;
    justify-content: center;
    overflow: hidden;
    margin-right: 5px;
    width: 2.2rem;
}

.image-icon .company-icon {
    max-width: 100%;
    object-fit: cover;
    height: 100%;
}

.image-icon-nav {
    border: 0.15em solid #e4dfdf;
    border-radius: 50px;
    height: 40px;
    justify-content: center;
    overflow: hidden;
    margin-right: 5px;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
}

.image-icon-nav img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
}

/**
* table-menu
*/
.table-menu-bar {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.table-menu-bar a {
    margin: 25px;
}

/**
*popup open
*/
.pop-card-panel {
    background-color: #fff;
    box-shadow: 1px 2px 9px rgba(0, 121, 192, 0.15);
}

.popup {
    position: relative;
    background-color: #fff;
    min-width: 650px;
    border-radius: var(--dcui-field-radius);
    overflow: hidden;
    z-index: 1000 !important;
    padding: 30px;
    box-shadow: 0px 1px 16px -7px rgba(66, 66, 66, 0.25);
    margin: 50px auto;
    max-width: 95%;
}

.popup-blur-overlay {
    background-color: rgb(65 65 65 / 30%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
}

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;

}


.popup-overlay {
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    overflow-y: auto;
    z-index: 999 !important;
}

.popup-close-container {
    right: 11px;
    position: absolute;
    top: 7px;
    color: #d8d8d8;
    font-size: 23px;
    cursor: pointer;
}


.popup-close-container a {
    color: inherit;
}

.popup-close-container a i {
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.popup-close-container a i:hover {
    transform: rotate(180deg);
}

/**
*Accordion
*/

.accordion {
    box-shadow: 1px 2px 9px rgb(0 121 192 / 15%);
    position: relative;
}

.accordion .head {
    align-items: center;
    background-color: #ffffff;
    color: #4d5156;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    transition: 0.2s ease-in-out;
}

.accordion .arrow {
    color: #4d5156;
    font-size: 20px;
    opacity: 1;
    transition: 0.25s ease;
    transform: rotate(-180deg);
}

.accordion .arrow-animate {
    opacity: 1;
    transform: rotate(0deg);
}

.accordion .content {
    /* opacity: 0; */
    background-color: #ffffff;
    border-top: 0.001em solid #dcdcdc;
    color: #333333;
    /* max-height: 0; */
    /* padding: 0 20px; */
    padding: 5px 20px;
    /* transition: 0.5s ease-in-out;; */
}

.accordion .content p {
    /* opacity: 0; */
    /* transition: 0.4s ease-in-out;; */
}

.accordion .content.show p {
    opacity: 1;
}

.accordion .show {
    opacity: 1;
    max-height: 10000px;
    /* height: auto; */
    padding: 5px 20px;
}

/*
* Contacts
 */
.cc-as-image-icon {
    background-size: cover;
    background-position: center;
}

.cc-as-image-icon {
    filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
    border: 0.001em solid #e4dfdf;
    border-radius: 50px;
    height: 40px;
    justify-content: center;
    overflow: hidden;
    margin-right: 5px;
    width: 40px;
}

/*
*test
*/
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

/*
*Company avatar group
*/
.avatar-group-container {
    display: flex;
    justify-content: flex-start;
}

.avatar-group {
    display: flex;
    overflow: hidden;
    margin-left: -0.5rem;
}

.avatar-group-image {
    border-radius: 9999px;
    width: 2rem;
    height: 2rem;
}

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

.p-avatar {
    align-items: center;
    display: inline-flex;
    font-size: 1rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.p-avatar.p-avatar-image {
    background-color: transparent;
}

.p-avatar-circle img,
.p-avatar.p-avatar-circle {
    border-radius: 50%;
}

.p-avatar .p-avatar-icon {
    font-size: 1rem;
}

.p-avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.p-avatar-group .p-avatar + .p-avatar {
    margin-left: -0.5rem;
}

.p-avatar-group {
    align-items: center;
    display: flex;
}

.p-avatar {
    background-color: #dee2e6;
    border-radius: 6px;
}

.p-avatar.p-avatar-lg {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.8rem;
    margin-left: 0;
    cursor: auto;
}

.p-avatar.p-avatar-lg .p-avatar-icon {
    font-size: 0.8rem;
}

.p-avatar-group .p-avatar {
    border: 2px solid #ffffff;
}

/*
* App version
*/
.app-version {
    position: absolute;
    right: 5px;
    top: -25px;
    font-size: 15px;
    color: #8b8b8b;
}

/*
*view as customers
*/
.viewAsCustomers > li > a.doing-ajax {
    pointer-events: none;
}

.viewAsCustomers > li > a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--primary-color);
}

.viewAsCustomers {
    max-height: 300px;
    overflow-x: auto;
    list-style: none;
    padding: 0;
}

.viewAsCustomers li a {
    display: block;
    padding: 5px 10px;
    text-align: left;
    white-space: nowrap;
    line-height: 1;
    color: inherit;
    position: relative;
}

.viewAsCustomers-selected {
    background-color: #e7e7e7;
    pointer-events: none;
    cursor: default;
}

.viewAsCustomers li a:hover {
    color: var(--secondary-color);
    background-color: rgba(0, 121, 192, 0.15);
}

.viewAsCustomer-Btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin-bottom: 0;
    height: 35px;
    border: 1px solid var(--primary-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    border-radius: 3px;
    outline: 0;
    white-space: nowrap;
    background-color: var(--primary-color);
    text-shadow: none;
    box-shadow: none;
    line-height: 1.6;
    padding: 3.5px 4px 4px;
    position: relative;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.viewAsCustomer-Btn .close {
    font-size: 20px;
}

.viewAsCustomer-Btn .close:hover {
    color: red;
}

.viewAsCustomer-Btn.rounded-long-button {
    border-radius: 50px 50px;
    color: var(--secondary-color);
    background-color: #ffffff;
    font-size: 12px;
}

.viewAsCustomer-logo {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.viewAsCustomers.scroll-container::-webkit-scrollbar {
    position: relative;
    margin-right: 20px;
}

.dashboard-heading .dashboard-edit-dashboard-wrapper {
    opacity: 0;
    font-size: 20px;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.dashboard-heading:hover .dashboard-edit-dashboard-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/**
*Chips
*/
.basic-chip {
    border-radius: 3px;
    display: inline-block;
    padding: 7px 6px 5px;
}

.chip_red {
    background: #f48fb1;
    color: #000000;
}

.chip_yellow {
    background: #fff176;
    color: #000000;
}

.chip_green {
    /* background: #69bb67; */
    background: #81c784;
    color: #000000;
}

.chip_blue {
    background: #4fc3f7;
    color: #000000;
}

.chip_gray {
    background: #f3f3f3;
    color: #000000;
}

/*
* Bar color
*/

.app-theme-employee #app-topbar {
    background: rgb(0, 24, 44);
    background: linear-gradient(0deg,
    rgba(0, 24, 44, 1) 0%,
    rgba(3, 91, 163, 1) 100%);
}

.app-theme-client #app-topbar {
    background: rgb(0, 24, 44);
    background: linear-gradient(0deg,
    rgba(0, 24, 44, 1) 0%,
    rgba(3, 91, 163, 1) 100%);
}

.app-theme-system-admin #app-topbar {
    background-color: #000;
}

/**
*Under maintenance
*/
.under-maintenance {
    height: 530px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.under-maintenance img {
    display: inline-block;
    height: 100%;
    width: auto;
    overflow: hidden;
    position: relative;
}

/* ---------------------------------
    Toggle Button
   --------------------------------- */

.tgl {
    display: none;
}

.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl + .tgl-btn {
    box-sizing: border-box;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl + .tgl-btn::selection {
    background: none;
}

.tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 3em;
    height: 1.6em;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.tgl + .tgl-btn:after,
.tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.tgl + .tgl-btn:after {
    left: 0;
}

.tgl + .tgl-btn:before {
    display: none;
}

.tgl:checked + .tgl-btn:after {
    left: 50%;
}

.tgl-vario + .tgl-btn {
    background: #fbfbfb;
    border-radius: 2em;
    padding: 2px;
    transition: all 0.4s ease;
    border: 1px solid #e8eae9;
}

.tgl-vario + .tgl-btn:after {
    border-radius: 2em;
    background: #fbfbfb;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.tgl-vario + .tgl-btn:hover:after {
    will-change: padding;
}

.tgl-vario + .tgl-btn:active {
    box-shadow: inset 0 0 0 2em #e8eae9;
}

.tgl-vario + .tgl-btn:active:after {
    padding-right: 0.8em;
}

.tgl-vario:checked + .tgl-btn {
    background: var(--secondary-color);
}

.tgl-vario:checked + .tgl-btn:active {
    box-shadow: none;
}

.tgl-vario:checked + .tgl-btn:active:after {
    margin-left: -0.8em;
}

/* ---------------------------------
    Info Tips
   --------------------------------- */
.info-tip {
    display: inline-block;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    pointer-events: all;
}

.info-tip:hover {
}

.info-tip-message {
    position: absolute;
    background-color: var(--dark-primary-color);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    padding: 10px 15px;
    border-radius: 3px;
    text-align: left;
    z-index: 99993;
    width: auto;
    height: auto;
    max-width: 300px;
}

.info-tip-message:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgb(0, 0, 0);
    top: 100%;
    left: 15px;
}

.info-tip-message.from-bottom:after {
    top: -8px;
    border-top: none;
    border-bottom: 8px solid rgb(0, 0, 0);
}

/* 
Table Dropdown
*/
.table-icon-dropdown {
    color: #000000;
}

/*
*Three Dots
*/
.three-dots:before {
    content: "\22EF";
    color: var(--secondary-color);
    font-size: 20px;
}

/*
*Overlay 
*/
.overlay-styles {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0);
    opacity: 1;
    overflow-x: hidden;
    transition: 2s;
}

.overlay-content-styles {
    position: absolute;
    top: 40%;
    left: 25%;
    text-align: center;
    width: 50%;
    transition: 0.2s;
    z-index: 1001;
}

.overlay-content-styles > h1 {
    color: #ccc;
    border: 2px solid #ccc;
    margin: 0;
    border-radius: 20px;
    padding: 0;
}

/*
*Data exchange
*/
.dx-box-m-l {
    margin-left: -10px;
}

/*
right arrow list
*/
.arrow-list {
    color: #0b79c0;
}

/*
*Settings
*/
.settings-border {
    margin-left: -15px;
    margin-right: -35px;
    padding-right: 15px;
    margin-bottom: -30px;
    padding-bottom: 15px;
    padding-top: 15px;
}

.settings-profile-pic {
    width: 12%;
}

/*
*Settings External Apps
*/
.ss-disc-quickbooks {
    background-color: #389e2a;
    height: 40px;
    line-height: 42px;
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
    border-radius: 5px;
}

/*
*Settings Nav
*/
.se-header {
    font-size: 25px;
    font-weight: 600;
}

.se-nav .se-nav-item {
    text-align: left;
    min-width: 130px;
}

.se-nav .se-nav-item.active,
.se-nav .se-nav-item:hover {
    background-color: color-mix(in srgb, var(--dcui-primary-color) 20%, white 80%);;
    color: var(--dcui-primary-color);
}

.se-nav a{
    color: unset;
}

.se-nav .se-nav-item > a {
    display: flex;
    padding: 13px 5px;
    text-align: center;
}

.se-nav-item .se-ni-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 1px;
}

.se-nav-item .se-ni-label {
    font-size: 15px;
    line-height: 1;
}

/*
*Image Uploader
*/
/* Photo uploader */
.app-photo-uploader {
    position: relative;
    width: 90px;
    height: 90px;
    display: block;
    text-align: center;
}

.app-photo-uploader .apu-prev {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    opacity: 0.6;
    overflow: hidden;
}

.app-photo-uploader input[type="file"] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.app-photo-uploader .apu-icon {
    position: absolute;
    font-size: 25px;
    color: var(--dark-secondary-color);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-shadow: 0 0 11px rgba(255, 255, 255, 0.5),
    0 0 2px rgba(255, 255, 255, 0.5);
}

.app-photo-uploader.has-error .apu-icon i:before {
    content: "\f071";
}

.app-photo-uploader .apu-remove {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 2;
    color: #fff;
    background-color: #e30c0c;
    border-radius: 100%;
    top: 0;
    right: 0;
    font-size: 12px;
    display: flex;
    visibility: hidden;
    opacity: 0;
    align-items: center;
    justify-content: center;
}

.app-photo-uploader .apu-remove:hover {
    background-color: #0097ff;
}

.app-photo-uploader:not(.loaded) .apu-icon:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.app-photo-uploader.loaded .apu-prev {
    opacity: 1;
}

.app-photo-uploader.loaded .apu-icon {
    visibility: hidden;
    opacity: 0;
}

.app-photo-uploader.loaded:hover .apu-icon,
.app-photo-uploader.loaded:hover .apu-remove {
    visibility: visible;
    opacity: 1;
}

.app-photo-uploader.boxed {
    width: 100%;
    border-radius: 3px;
    border-width: 1px;
    border-color: #c8c8c8;
}

.app-photo-uploader.boxed .apu-prev {
    border-radius: 0;
    background-size: contain;
    background-position: center;
    width: 95%;
    height: 95%;
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.app-photo-uploader.boxed .apu-icon {
    border-radius: 0;
}

.app-photo-uploader.boxed .apu-remove {
    top: -10px;
    right: -10px;
}

.go-to-parent-arrow {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.go-to-parent-arrow:hover {
    color: var(--dark-senary-color);
}

.go-to-parent-arrow i {
    font-size: 25px;
    margin-right: 10px;
}

/* File selector directive */
.fus1-label {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 8px 10px 5px;
    font-size: 15px;
    line-height: normal;
    color: #555555;
    outline: 0;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #c8c8c8;
    -webkit-transition: border-color ease-in-out 0.15s;
    -moz-transition: border-color ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s;
    cursor: pointer;
}

.fus1-label .fus1-l-icon {
    margin-right: 5px;
    font-size: 16px;
}

.fus1-label .fus1-l-file-remover {
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #e30c0c;
    border-radius: 100%;
    top: -10px;
    right: -10px;
    font-size: 16px;
    line-height: 1.6;
    visibility: hidden;
    opacity: 0;
}

.fus1-label:hover .fus1-l-file-remover {
    visibility: visible;
    opacity: 1;
}

.fus1-label .fus1-l-file-remover:hover {
    background-color: var(--secondary-color);
}

.fus1-label .fus1-l-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*
*button dashboard
*/
.dashboard_menu_btn {
    margin: 0;
    padding: 0;
}

.button-long:hover .dashboard_menu_btn {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(133deg) brightness(110%) contrast(101%);
}

.dash_chart_no_results {
    position: absolute;
    top: 130px;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.dash_chart_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dash_chart_no_results-header {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 500;
}

.dash_chart_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

/*
*button long
*/
.button-long {
    background-color: #fff;
    border: 1px solid transparent;
    box-shadow: none;
    cursor: pointer;
    color: var(--dark-secondary-color);
    display: inline-block;
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    height: 40px;
    letter-spacing: 0.01em;
    line-height: 1.6;
    margin-bottom: 0;
    min-width: 160px;
    outline: 0;
    padding: 9px 14px 22px;
    position: relative;
    text-shadow: none;
    text-align: center;
    transition: all ease-in-out 0.15s;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
}

.button-long:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

.button-long:active {
    transform: translateY(2px);
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
}

.dark-mode .button-long {
    background-color: var(--dark-secondary-color);
    color: #fff;
}

.light-mode .button-long {
    background-color: var(--light-secondary-color);
    color: #fff;
}

/**
*border left
*/
.border-right {
    border-right: 2px solid #d3d4d5;
    height: 70%;
    right: 0px;
    top: 15%;
}

/**
*Color
*/
.text-color-blue {
    color: #0079c0;
}

/**
  *pagination
  */
.pagination {
    display: flex;
    flex-wrap: wrap;
}

.pb-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid transparent;
    color: #00578c;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    height: 2.2rem;
    justify-content: center;
    line-height: 1;
    margin-left: 0.2rem;
    width: 2.2rem;
}

.pb-button:hover {
    background: #cfcfcf;
    color: #1881c6;
}

.pb-button:disabled {
    background-color: #ebebeb;
    opacity: 1;
    cursor: auto;
}

.pagination-item {
    display: inline-block;
}

.pagination-item .active {
    background-color: #1881c6;
    color: #ffffff;
}

.pagination .pagination-item .icons {
    font-size: 1.3rem;
}

/**
 * App elements
 */
.app-card-panel {
    border-radius: 5px;
    position: relative;
    background-color: #fff;
    box-shadow: 1px 2px 9px rgba(0, 121, 192, 0.15);
}

.dark-mode .app-card-panel {
    position: relative;
    background-color: var(--dark-secondary-color);
    box-shadow: 1px 2px 9px rgba(0, 26, 41, 0.15);
}

.light-mode .app-card-panel {
    position: relative;
    background-color: transparent;
    box-shadow: 1px 2px 9px rgba(0, 26, 41, 0.15);
}

.app-table {
    border-radius: 5px;
}

.app-table .at-table {
    width: 100%;
}

.dark-mode .app-table {
    background-color: #242424;
}

.dark-mode .at-table {
    background-color: #242424;
    color: white;
}

.app-table .at-table th,
.app-table .at-table td {
    text-align: left;
    padding: 15px 20px;
    border-bottom: 1px solid #242424;
    font-size: 14px;
}

.light-mode .app-table .at-table th,
.light-mode .app-table .at-table td {
    text-align: left;
    padding: 10px 20px;
    border-bottom: 1px solid #ffffff;
    font-size: 14px;
}

.app-table .at-table th {
    position: relative;
    color: #ffffff;
}

.app-table .at-table th div div i {
    cursor: pointer;
    color: #9d9b9b;
}

.app-table .at-table th div div i:hover {
    cursor: pointer;
    color: #696868;
}

.dark-mode .app-table .at-table th {
    position: relative;
    color: #ffffff;
}

.light-mode .app-table .at-table th {
    position: relative;
    color: var(--light-color-text);
}

.app-table .at-table th:not(:first-child):before {
    position: absolute;
    content: "";
    width: 2px;
    top: 4px;
    bottom: 4px;
    left: 3px;
    background-color: var(--dark-tertiary-color);
}

.light-mode .app-table .at-table th:not(:first-child):before {
    background-color: #dddddd;
}

.dark-mode .at-table tr:nth-child(even) {
    background-color: #2c2c2c;
}

.light-mode .at-table tr:nth-child(even) {
    background-color: #f3f3f3;
}

.dark-mode .at-table tr:not(.at-heading):not(.at-no-results):hover {
    background-color: #494949;
    color: white;
}

.light-mode .at-table tr:not(.at-heading):not(.at-no-results):hover {
    background-color: #d9d9d9;
    color: black;
}

/*
* Styles KD
*/
/* Content Tabs */
.content-tabs .ct-nav {
    margin-bottom: 25px;
    border-bottom: 1px solid var(--dark-senary-color);
}

.ct-nav .ct-nav-item {
    padding: 10px 15px;
    line-height: 1;
    color: inherit;
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #858585;
}

.ct-nav .ct-nav-item:first-child {
    padding-left: 0;
}

.ct-nav .ct-nav-item:not(:last-child):after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 0;
    width: 1px;
    background-color: #ddd;
}

.ct-nav .ct-nav-item:before {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -1px;
    height: 3px;
    background-color: transparent;
}

.ct-nav .ct-nav-item:first-child:before {
    left: 0;
}

.ct-nav .ct-nav-item.active {
    color: var(--dark-quaternary-color);
}

.light-mode .ct-nav .ct-nav-item.active {
    color: var(--dark-quinary-color);
}

.dark-mode .ct-nav .ct-nav-item:hover:before,
.dark-mode .ct-nav .ct-nav-item.active:before {
    background-color: var(--dark-quaternary-color);
}

.light-mode .ct-nav .ct-nav-item:hover:before,
.light-mode .ct-nav .ct-nav-item.active:before {
    background-color: var(--light-secondary-color);
}

.ct-nav-ellipsis {
    display: inline-block;
    width: 145px;
}

.content-tabs .ct-tab {
    display: none;
}

.content-tabs .ct-tab.active {
    display: block;
}

/* Popup Modifications */
.popup .pop-action-bottom {
    margin: 10px -25px -25px;
    padding: 15px 25px;
}

.popup .app-photo-uploader {
    width: 75px;
    height: 75px;
}

.pop-advanced .popup-close-container {
    top: 25px;
    right: 25px;
    font-size: initial;
}

.popup .popup-close-container a:hover,
.popup .popup-close-container a:focus {
    color: var(--primary-color);
}

.dark-mode .popup .popup-close-container a:hover,
.dark-mode .popup .popup-close-container a:focus {
    color: var(--dark-primary-color);
}

.light-mode .popup .popup-close-container a:hover,
.light-mode .popup .popup-close-container a:focus {
    color: var(--dark-primary-color);
}

.pop-advanced .popup-close-container .button {
    width: 25px;
    height: 25px;
    line-height: 1;
    padding: 0;
    font-size: 25px;
}

.pop-action-bottom .button-transparent {
    border-color: transparent;
}

.pop-advanced .popup-close-container .button:hover {
    background-color: transparent !important;
    color: inherit;
}

/* Photo Uploader */
.app-photo-uploader.full-boxed {
    width: 100%;
    height: 200px;
    border-radius: 2px;
    border: 1px solid #c8c8c8;
}

.app-photo-uploader.full-boxed .apu-icon {
    border-radius: 0;
}

.app-photo-uploader.full-boxed .apu-prev {
    opacity: 1;
    background-position: center;
    border-radius: 0;
}

.app-photo-uploader.full-boxed .apu-remove {
    top: -5px;
    right: -5px;
}

/* Editor view card infos */
.card-info-list > div {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.card-info-list .cil-label {
    font-weight: 600;
}

.card-info-list .cil-icon {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 20px;
    text-align: center;
}

/* Quill Editor Overwrites */
.no-padding .ql-editor {
    padding: 0;
}

/* Static Page Layout */
.static-page-layout {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.static-page-header {
    position: relative;
    /* margin-bottom: 30px; */
}

.static-page-header .sph-col-left,
.static-page-header .sph-col-right {
    width: 50%;
    position: relative;
}

.static-page-header .sph-col-left {
    z-index: 1;
    padding: 25px;
}

.static-page-header .sph-col-right:before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: -50%;
    right: 0;
    width: 50%;
    background-color: #f5f5f5;
    z-index: 0;
    box-sizing: border-box;
    transform-origin: bottom left;
    transform: skew(-20deg) !important;
    pointer-events: none;
}

.static-page-header .sph-col-left h1 {
    font-size: 35px;
    line-height: 1.1;
}

.static-page-header .sph-col-left .sub-heading {
    font-size: 14px;
    color: #8d8d8d;
}

.static-page-header .sph-image {
    width: 100%;
    height: 340px;
    overflow: hidden;
}

.static-page-header .sph-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* General Helpers */
.w-500 {
    width: 500px !important;
}

.min-w-90 {
    min-width: 90px !important;
}

.min-w-650 {
    min-width: 650px !important;
}

.min-w-360 {
    min-width: 360px !important;
}

.hori-center {
    margin: 0 auto !important;
}

.no-pointers,
.no-pointers * {
    pointer-events: none !important;
}

.button-negative-actions {
    background-color: #e7e7e7;
    border-color: #e7e7e7;
}

.button-negative-actions:hover {
    color: #fff !important;
}

.top-mega-bar {
    display: none;
}

.app-menus {
    margin-bottom: 10px;
    text-align: right;
}

.light-mode .app-menus a:hover {
    color: var(--light-senary-color);
}

.dark-mode .app-menus a:hover {
    color: #d7d7d7;
}

.ac-title-container {
    justify-content: space-between;
    display: flex;
}

.at-logged-user-logo-only {
    display: none;
}

.at-logged-details {
    display: flex;
    flex-direction: row-reverse;
    color: white;
    margin-top: 25px;
    align-items: center;
}

.light-mode .at-logged-details {
    color: black;
}

.at-logged-details .at-lu-content .at-lu-details span {
    display: block;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-logged-details > div:not(:last-child) {
    margin-left: 13px;
}

.at-logged-details .at-lu-details span {
    display: block;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    font-size: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-logged-details .at-lu-details .at-lud-sub {
    font-size: 13px;
    font-weight: 200;
}

.at-logged-details .ve-circle-avatar {
    display: inline-block;
    width: 53px;
    height: 53px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.cp-single-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cp-single-details {
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 1;
}

.cp-single-details-margin {
    margin-left: 15px;
}

.sc-container {
    display: flex;
    min-height: 650px;
    position: relative;
}

/*
* Error messages
*/
.ep-error-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    margin: 0 auto;
    padding: 20px;
}

.ep-status-code-text {
    font-weight: bolder;
    font-size: 180px;
    color: #acacac;
}

.ep-error-page-background-container {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.ep-error-page-background-img {
    width: 100%;
    object-fit: cover;
}

.ep-error-container {
    flex: 1;
    margin-left: 25px;
}

.ep-error-message {
    font-size: 25px;
    font-weight: 700;
    color: #000000;
}

.ep-error-description {
    margin-top: 15px;
    color: #5c5c5c;
}

@media screen and (max-width: 480px) {
    .ep-status-code-text {
        font-size: 80px;
    }

    .ep-error-message {
        font-size: 18px;
    }

    .ep-error-description {
        font-size: 14px;
    }

    .ep-error-parent-container{
        flex-direction: column;
    }

    .ep-error-page-background-img {
        object-fit: cover;
        height: 250px;
    }

    .ep-error-page-background-container{
        bottom: 55px;
    }

    .ep-error-container-wrapper{
        height: 40vh;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .ep-status-code-text {
        font-size: 120px;
    }

    .ep-error-container-wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
    }

    .ep-error-container {
        margin: 0;
        margin-top: 15px;
    }

    .ep-error-message {
        font-size: 20px;
    }

    .ep-error-description {
        font-size: 16px;
    }

    .ep-error-page-background-img {
        object-fit: cover;
        height: 250px;
    }

    .ep-error-page-background-container{
        bottom: 55px;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
    .ep-error-container-wrapper{
        top: -70px;
        position: relative;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px){

}


.sc-sub-container {
    min-height: 650px;
}

.sc-nav {
    margin-top: 10px;
}

.viewAsCompany-select-text {
    font-size: 15px;
    color: white;
    margin-right: 10px;
}

.light-mode .viewAsCompany-select-text {
    color: var(--light-color-text);
}

.view_as_company_mobile_view {
    display: none;
}

.left-top-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mobile-search-icon-container {
    display: none;
}


/***********************/
/**     Load More     **/
/***********************/

.dc-load-more-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dc-loading {
    position: relative;
    left: 65px;
}

.dc-no-more-items {
    text-align: center;
    padding: 10px;
}

.dc-avatar-cover {
    display: flex;

}

.dc-avatar-cover > img {
    object-fit: cover;
    object-position: top center;
}

/*****************************
 **  LV Data Loader Styles  **
 *****************************/

.data-loader-wrap.data-loader-transparent.dc-data-loader .data-loader div {
    background: var(--dcui-primary-color);
}

.data-loader-wrap.data-loader-transparent.dc-data-loader {
    background: transparent;
}

.data-loader-wrap.dc-data-loader .data-loader div {
    background: var(--dcui-primary-color);
}

.data-loader-wrap.dc-data-loader {
    background: inherit;
}


/*****************************
**     MIsc      **
*******************************/

.dcui-icon-control.xp-input-filed-no-outline, .dcui-form-control.xp-input-filed-no-outline {
    border: 0 !important;
}

.dcui-icon-control.xp-input-filed-no-outline, .dcui-form-control.xp-input-filed-no-outline:focus {
    border: 0 !important;
    box-shadow: none;
}

/***********************/
/**   Global Search  **/
/***********************/

.dc-global-search-close-popup {
    position: absolute;
    background-color: transparent;
    top: 100px;
    left: 50%;
    z-index: 999 !important;
}

.dc-global-search-close-popup .close-text a i {
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.dc-global-search-close-popup .close-text a i:hover {
    transform: rotate(180deg);
}

.dc-global-search-close-popup .close-text {
    font-size: 25px;
    color: rgba(129, 129, 129, 1);
}

.dc-global-search-close-popup .close-text {
    font-size: 25px;
    color: rgba(129, 129, 129, 1);
}

.dc-global-search-container {
    position: absolute;
    background-color: #fff;
    min-width: 780px;
    max-width: 95%;
    top: 150px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 8px;
    box-shadow: 0px 1px 16px -7px rgba(66, 66, 66, 0.25);
    border-radius: var(--dcui-field-radius);
    overflow: hidden;
    z-index: 999 !important;
}

.dc-global-search-control.dcui-icon-control .dcui-ic-icon,
.dc-global-search-control .dcui-form-control,
.dc-global-search-control .dcui-form-control:focus {
    background-color: transparent;
    font-size: 20px;
}

.dc-global-search-icon-container img {
    opacity: 0.3;
}

.dc-global-search-app-icon {
    display: flex;
}

.dc-global-search-result-text-container {
    margin-left: 15px;
    flex: 1;
}

.dc-global-search-app-icon.large img {
    width: 60px;
}

.dc-global-search-app-icon.small img {
    width: 35px;
}

.dc-global-search-app-name {
    font-size: 20px;
    color: black;
}

.dc-global-search-nav-app-name {

}

.dc-global-search-nav-item {
    margin-bottom: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dc-global-search-nav-item.selected {
    background-color: #d7efff;
}

.dc-global-search-nav-app-name-container {
    flex: 1;
    margin-left: 10px;
}

.dc-search-result-container .dc-search-result-content {
    display: flex;
    height: 500px;
}

.dc-search-result-container .dc-global-search-nav-container {
    width: 225px;
    padding-right: 12px;
    border-right: 1px solid #f5f3f3;
}

.dc-search-result-container .dc-global-search-results {
    flex: 1;
    padding: 20px;
}

.dc-search-result-container .dc-search-result-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
}

.dc-search-result-container .dc-search-result-text {
    font-size: 26px;
    font-weight: 500;
    line-height: 31.2px;
    text-align: left;
    color: rgba(0, 0, 0, 1);
}

.dc-global-search-container .dc-search-container {
    height: 45px;
    background-color: rgba(242, 242, 242, 0.5);
    display: flex;
    align-items: center;
    padding-right: 5px;
}

.dc-global-search-container .dc-search-result-container {
    margin-top: 10px;
}

.dc-search-no-result-container-data-loader-container {
    height: 500px;
    position: relative;
}

.dc-global-search-container .dc-search-no-result-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 450px;
    margin: auto;
}

.dc-global-search-no-results-container {
    flex: 1;
    display: flex;
    max-width: 450px;
    flex-wrap: wrap;
    flex-direction: column;
}

.dc-global-search-no-results-container .dc-no-result-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    text-align: left;
}

.dc-global-search-no-results-container .dc-no-result-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    flex: 1;
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensures compatibility with all browsers */
}

.dc-global-search-icon-container {
    min-width: 135px;
}

.dc-search-results-table {
    max-height: 400px;
}

/* A result row leads with a thumbnail when the app supplying it says the record
   is the kind that has one (an `image` key on the result, empty or not). The
   placeholder glyph is always in the box and the picture covers it, so a record
   with no picture — or one whose stored path no longer resolves — still occupies
   the same 28px and the column keeps one left edge. Kinds with no picture at all
   omit the key: those rows stay plain text and reserve no gap. */
.dc-search-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dc-search-result-thumb {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f3f7;
    color: #b6becb;
    font-size: 12px;
}

.dc-search-result-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
* Media Queries
*/
@media screen and (min-width: 1921px) {
    .ve-full-page-knife-cut {
        max-height: 1200px;
    }

    #app-sidebar {
        left: calc((100% - var(--content-guard)) / 2);
    }
}

@media screen and (max-width: 1679px) {
    .kc-columns .kc-col-left {
        padding-left: 8.5%;
    }

    .kc-columns .kc-col-right {
        padding-right: 8.5%;
    }

    #ve-page-auth .pa-left-content {
        max-width: 400px;
    }

    .bg-full-image .graphic-circuit-lines {
        width: 140px;
        top: calc(50% - 160px);
    }

    .auth-card-panel {
        width: 460px;
    }

    .auth-card-panel .acp-boxer {
        padding: 30px;
    }

    #app-container {
        padding: 50px 75px 20px;
    }

    #app-container::before {
        top: 40px;
        left: -150px;
        width: 218px;
        height: 100px;
    }
}

@media screen and (max-width: 1441px) {
    #app-container::before {
        top: 40px;
        left: -150px;
        width: 217px;
        height: 100px;
    }
}

@media screen and (max-width: 1025px) {
    #app-container::before {
        top: 40px;
        left: -150px;
        width: 200px;
        height: 100px;
    }
}

@media screen and (max-width: 991px) {

    .kc-columns .kc-col-left,
    .kc-columns .kc-col-right {
        width: 100%;
    }

    .kc-columns .kc-col-right .kc-skew {
        display: none;
    }

    .dc-global-search-container {
        min-width: 85%;
    }
}


/*
* Mobile View
*/

@media screen and (min-width: 320px) and (max-width: 766px) and (orientation: portrait) {
    .auth-card-panel {
        width: 100%;
    }

    .auth-card-panel .auth-logo {
        text-align: center;
        margin-bottom: 16px;
        height: 100px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .dark-mode .auth-card-panel .acp-boxer,
    .light-mode .auth-card-panel .acp-boxer {
        background-color: transparent;
        padding: 40px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
        color: var(--color-text);
    }

    .light-mode .auth-card-panel .acp-boxer {
        box-shadow: none;
    }

    .dark-mode .auth-card-panel .acp-boxer .form-group {
        background-color: transparent;
    }

    .side-mega-menu {
    }

    .side-mega-menu .side-mega-container {
        padding: 30px 20px 0;
    }

    .side-mega-menu .side-mega-container .side-mega-top {
    }

    .side-mega-menu .side-mega-container .side-mega-middle-container {
        flex-direction: column;
        align-items: center;
        height: 80%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .side-mega-menu .side-mega-container .side-mega-middle-container .side-mega-middle-boxes {
        margin-right: 0;
        flex: 0 0 15%;
        width: 100%;
        height: 100px;
    }

    .side-mega-menu .side-mega-container .side-mega-top {
        align-items: flex-start;
    }

    #app-sidebar {
        display: none;
    }

    #app-container {
        position: relative;
        margin-left: 0;
        margin-top: var(--topbar-height);
        display: block;
        min-height: 100%;
        padding: 25px 25px;
    }

    #app-topbar {
        padding-left: 15px;
        background-color: #181818 !important;
    }

    .top-mega-bar {
        display: block;
        color: white;
        height: 50px;
        width: 50px;
    }

    .tb-mega-menu-icon {
        height: 100%;
        font-size: 30px;
        text-align: center;
        line-height: 58px;
    }

    .app-card-panel .app-table {
        overflow-x: auto;
    }

    .app-menus {
        text-align: left;
    }

    .ac-title-container {
        flex-direction: column;
    }

    .app-menus div {
        margin-top: 10px;
        width: 100%;
    }

    /*.popup {*/
    /*  width: 100%;*/
    /*  height: 100%;*/
    /*  min-width: 0;*/
    /*  top: 50%;*/
    /*  transform: translate(-50%, -50%);*/
    /*}*/
    .at-logged-user {
        display: none;
    }

    .at-logged-user-logo-only {
        display: block;
    }

    .at-profile_menu {
        display: flex;
        flex-direction: column;
        height: 80%;
        color: white;
    }

    .at-profile_sub_menu {
        flex: 1;
    }

    .at-profile_box {
        background-color: #4d4d4d;
        padding: 25px;
        color: white;
        flex-wrap: nowrap;
        display: flex;
        justify-content: space-between;
        font-size: 17px;
        position: relative;
    }

    .at-profile_box:hover {
        background-color: black;
    }

    .app-table .at-table th,
    .app-table .at-table td {
        white-space: nowrap;
    }

    .cp-single-container {
        flex-direction: column;
    }

    .cp-single-details {
        display: flex;
        flex-direction: column;
    }

    .cp-single-status {
        width: fit-content;
    }

    .cp-menu-container {
        margin-top: 15px;
        display: flex;
    }

    .cp-menu-tabs {
        margin-top: 15px;
        overflow-y: hidden;
        overflow-x: auto;
    }

    .cp-single-details-margin {
        margin-top: 10px;
    }

    .cp-single-details-margin h2 {
        overflow-wrap: anywhere;
    }

    .cp-single-wrap .app-photo-uploader {
        width: 70px;
        height: 70px;
        min-width: 70px !important;
    }

    .cp-single-userlist-container {
        height: 278px;
        overflow-y: auto;
    }

    #useraddform {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #useraddform .content-tabs {
        height: 80%;
    }

    #useraddform .pop-action-bottom {
        flex: 0 0 130px;
    }

    #useraddform .content-tabs .ct-tab.active {
        display: block;
        height: 80%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    #usereditform {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #usereditform .content-tabs {
        height: 80%;
    }

    #usereditform .pop-action-bottom {
        flex: 0 0 130px;
    }

    #usereditform .content-tabs .ct-tab.active {
        display: block;
        height: 80%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .app-version {
        position: absolute;
        right: 5px;
        top: -25px;
        font-size: 15px;
        color: #8b8b8b;
    }

    .sc-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .se-nav {
        display: flex;
        width: 100%;
        overflow-y: hidden;
        overflow-x: auto;
    }

    .sc-sub-container {
        min-height: 650px;
        width: 100%;
    }

    .sc-nav {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0 5px;
    }

    .sc-nav-container {
        margin-bottom: 15px;
    }

    .ss-app-container {
        width: 100%;
    }

    .view_as_company_mobile_view {
        display: flex;
    }

    .view_as_company_desktop_view {
        display: none;
    }

    .mobile-drop-down-close {
        display: flex;
        justify-content: flex-end;
    }

    .mobile-drop-down-close .close-icon {
        font-size: 30px;
        color: var(--quaternary-color);
    }

    .mobile-drop-down-close .close-icon :hover {
        cursor: pointer;
        color: var(--quinary-color);
    }

    .mobile-vw-search-container {
        margin-top: 15px;
    }

    .mb-vw-title {
        font-size: 25px;
        font-weight: 400;
        color: white;
    }

    .mobile-vw-container {
        width: 100%;
    }

    .mobile-view-container {
        background-color: #4d4d4d;
        padding: 0 15px;
        margin-top: 10px;
        display: flex;
        height: 60px !important;
        justify-content: space-between;
    }

    .mobile-vw-icon {
        color: white;
    }

    .mb-p-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 90%;
    }

    .mb-switch-container {
        cursor: pointer;
        height: 38px;
        line-height: 30px;
        padding: 5px 15px;
        text-align: center;
        margin-top: 5px;
        font-weight: 300;
        color: white;
        background: #454545;
    }

    .mobile-view-container:hover {
        background-color: #000;
    }

    .sc-nav-container {
        max-width: none !important;
        width: 100% !important;
    }

    .se-nav .se-nav-item > a {
        display: flex;
        padding: 13px 5px;
        text-align: center;
        width: 110px;
        height: 50px;
    }

    .left-top-bar-container {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .search-container {
        display: none;
    }

    .mobile-search-icon-container {
        display: flex;
        font-size: 23px;
        line-height: 3.2;
        position: relative;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 50px;
        text-align: center;
        cursor: pointer;
    }

    .megaSearch-no-results-text {
        left: 88px;
    }

    .megaSearch-main-item {
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .megaSearch-description {
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .at-elem-separator {
        display: none;
    }

    #notification-icon {
        display: none;
    }

    .mark-as-red {
        font-size: 15px;
    }

    .no-notification {
        position: relative;
        top: 15px;
        height: 5vh;
    }

    .notification-container-mobile {
        max-height: 65vh;
    }

    .viewall-ul {
        position: relative;
        top: 10px;
    }

    .view-all-notifcations {
        margin-top: 10px;
        text-decoration: none;
    }
}
/* ---------------------------------------------------------------------------
 * Sidebar: size a font `icon` like an `svg_icon`.
 *
 * A menu item declares either an svg_icon, which dc_sidebar renders as an <img>,
 * or a font `icon`, rendered as a bare <i>. The image is given a 26px box, is
 * centred and is recoloured by a filter; the glyph had no rule at all, so it took
 * whatever font-size it inherited, sat left of centre, and kept its own colour.
 * An app choosing a Font Awesome icon therefore looked nothing like its
 * neighbours. Match the image's box and the label's colour.
 * ------------------------------------------------------------------------- */
.dc-sn-menu-item .dc-sn-mi-icon > i {
    display: block;
    width: 26px;
    margin: 0 auto;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    color: #5F6368;
}

.dc-sn-menu-item .dc-sn-mi-link:hover .dc-sn-mi-icon > i,
.dc-sn-menu-item.active .dc-sn-mi-link .dc-sn-mi-icon > i {
    color: #0F0F0F;
}


/* DoLeads additions: DcPopup centering and multi_step (see dev/leads/EXTERNAL_CHANGES.md) */
.popup-container.dc-p-center-x{
  display: flex;
  justify-content: center;
}
.popup-container.dc-p-center-y{
  display: flex;
  align-items: center;
}

/*
 *  stack_steps dc-popup: every step in one grid cell, so the popup keeps the
 *  tallest step's height. :where() has no specificity, so it only beats the
 *  browser's [hidden] display: none and any display a step's own classes set wins
 */
.popup-steps-stacked {
    display: grid;
}
.popup-steps-stacked > [data-popup-step] {
    grid-area: 1 / 1;
    min-width: 0;
}
:where(.popup-steps-stacked > [data-popup-step]) {
    display: block;
}
/*
 *  descendants too: an open accordion body sets visibility: visible. no
 *  transition: the kit's buttons transition `all`, visibility included, which
 *  kept the old step's buttons up for 0.15s over the new ones
 */
.popup-steps-stacked > [data-popup-step][hidden],
.popup-steps-stacked > [data-popup-step][hidden] * {
    visibility: hidden !important;
    transition: none !important;
}

/* step dots of a multi_step dc-popup: inside the padding corner, centred on a button row */
.popup-step-dots {
    position: absolute;
    left: 30px;
    bottom: 30px;
    height: var(--dcui-field-height);
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}

.popup-step-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #d8d8d8;
    transition: background-color 0.2s ease-in-out;
}

.popup-step-dot.active {
    background-color: var(--dcui-primary-color);
}
 .hsy-tooltip {
    position: relative;
    font-family: inherit;
    font-size: 10px;
  }
  .hsy-tooltip>.outlet,
  .hsy-tooltip>.tooltip {
    font-size: 1.4em;
  }
  .hsy-tooltip>.tooltip {
    display: none;
    position: absolute;
    background-color: var(--dcui-secondary-color);
    color: #fff;
    border-radius: 3px;
    border: 0px;
    outline: none;
    padding: 10px 15px;
    z-index: 100;
  }
  .hsy-tooltip .arrow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
  } 
.user-discard-btn{
    width: 42%;
}
.user-save-btn{
    width: 55%;
}

.popup.pop-card-panel.user-popup{
   width: 450px;
}
.user-info-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.user-icon{
    object-position: top;
}

.popup-overlay.user-remove-overlay{
    z-index: 1000 !important;
}