/* Styles Here */

.dc-pay-wrapper{
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.dc-pay-fixed-container {
    width: 900px;
    margin: 0 auto;
}

.dc-pay-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
}

.dc-pay-section {
    flex: 1 1 320px;
    min-width: 280px;
}

.dc-pay-heading {
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #111827;
}

.dc-pay-method {
    flex: 1 1 140px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.3s;
}

.dc-pay-logo img {
    height: 42px;
}

.dc-pay-methods {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.dc-pay-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.dc-pay-note {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    font-style: italic;
}

.dc-pay-amount-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.dc-pay-amount-label {
    font-size: 1.1rem;
    color: #6b7280;
}

.dc-pay-amount-value {
    font-size:2.1rem;
    font-weight: 700;
    color: #111827;
}

.dc-pay-method-active {
    border-color: var(--dcui-secondary-color);
}

.dc-pay-icon {
    width: 36px;
    height: 36px;
    color: var(--dcui-primary-color);
    margin-bottom: 0.5rem;
}

.dc-pay-method-label {
    font-weight: 600;
    color: #111827;
}

.dc-pay-invoice-divider {
    border-left: 1px solid #e5e7eb;
    padding-left: 2rem;
}

.dc-pay-invoice-details dt,
.dc-pay-invoice-details dd {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: end;
}

.dc-pay-balance-due {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.dc-pay-line-item {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.95rem;
    color: #374151;
}

.dc-pay-total-summary {
    font-size: 0.95rem;
    color: #374151;
}

.dc-pay-subtotal,
.dc-pay-tax,
.dc-pay-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.dc-pay-total {
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 0.5rem;
    border-top: 2px solid #d1d5db;
    padding-top: 0.5rem;
}

.dc-pay-highlight-instruction {
    background-color: #fff3cd; /* Light yellow background for warning */
    color: #856404; /* Darker text color for contrast */
    padding: 10px;
    border: 1px solid #ffeeba;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.dc-pay-customer-details div {
    line-height: 1.4;
    /* margin-bottom: 0.25rem; */
}

.dc-pay-invalid-container-wrapper{
    height: 520px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dc-pay-invalid-container{
    width: 350px;
}

.dc-pay-method-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dc-pay-notice-wrapper{
    margin-top: 15px;
}

.dc-pay-notice {
    background-color: #e6f4e6;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
}

.dc-pay-cancel-container,.dc-pay-success-container{
    text-align: center;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.dc-pay-cancel-content,.dc-pay-success-content{
    width: 350px;
}
.dc-pay-success-icon{
    background: var(--dcui-success-color);
    color: white;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    font-size: 72px;
}

.dc-pay-cancel-icon{
    background: var(--dcui-danger-color);
    color: white;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    font-size: 72px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}
.dc-pay-cancel-fixed-container,.dc-pay-success-fixed-container{
    width: 800px;
    margin: 0 auto;
}
.dc-pay-cancel-description,.dc-pay-success-description{

}

/***
 Billing Interfaces
****/

.dc-bill-card-header{
    font-size: 30px;
    font-weight: 600;
}

.dc-bill-middle-container-wrapper{
    padding-bottom: 35px;
}

/***
 Billing Customer Interfaces
****/
.dc-bill-customer-form-wrapper{
    width: 100%;
    height: calc(100vh - 266px);
}

/***
 Billing Invoice Interfaces
****/


.dcui-create-new-invoice-container{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.do-bill-invoice-container{
    height: calc(100vh - 166px);
    width: 100%;
    padding-bottom: 35px;
}

/* Create Invoice's send options, under the form and lined up with its card. */
.dc-bill-create-options {
    width: 95%;
    margin: 20px auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
}

.dcui-create-new-invoice-wrapper,.dc-bill-payment-create-wrapper{
    margin: auto;
    display: flex;
    height: 100%;
}

.dc-bill-invoice-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding:0 16px;
}

/* Invoice Meta */
.dc-bill-invoice-meta {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
}

.dc-bill-invoice-title {
    font-size: 24px;
    font-weight: 300;
}

.dc-bill-invoice-number {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-bill-label-small {
    font-size: 14px;
}

.dc-bill-input-number {
    width: 96px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    text-align: right;
}

/* Customer and Status */
.dc-bill-customer-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.dc-bill-customer-field, .dc-bill-status-field, .dc-bill-currency-field {
    flex: 1 1 100%;
}

/* Address Section */
.dc-bill-address-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.dc-bill-address-field {
    flex: 1 1 100%;
}

/* Dates Section */
.dc-bill-dates-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.dc-bill-date-field {
    flex: 1 1 100%;
}

/* Subscription Section */
.dc-bill-subscription-section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 8px;
}

.dc-bill-subscription-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.dc-bill-subscription-field {
    flex: 1 1 100%;
}

.dc-bill-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* Items Section */
.dc-bill-items-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dc-bill-item-header {
    display: flex;
    background-color: #007bff;
    color: white;
    font-weight: 500;
    padding: 8px;
    border-radius: 4px;
}

.dc-bill-item-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 8px;
}

.dc-bill-item-col {
    flex: 1;
}

.dc-bill-item-col.dc-bill-invoice-item {
    flex: 5;
}

.dc-bill-item-col.dc-bill-description {
    flex: 5;
}

.dc-bill-item-col.dc-bill-quantity {
    flex: 2;
}

.dc-bill-item-col.dc-bill-rate {
    flex: 2;
}

.dc-bill-item-col.dc-bill-discount {
    flex: 2;
}

.dc-bill-item-col.dc-bill-tax {
    flex: 2;
}

.dc-bill-item-col.dc-bill-amount {
    flex: 2;
    text-align: right;
}

.dc-bill-item-col.dc-bill-action {
    flex: 1;
    text-align: right;
}

.dc-bill-rate-input {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* A line item that won't pass: its cells are outlined, and the reasons sit under the row. */
.dc-bill-item-col--invalid .dcui-form-control {
    border-color: #d30505;
}

.dc-bill-item-error {
    margin: -4px 0 4px;
}

.dc-bill-remove-button {
    color: #dc3545;
    font-size: 18px;
    background: none;
    border: none;
    cursor: pointer;
}

/* Notes & Terms */
.dc-bill-notes-terms-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 450px;
}

.dc-bill-notes-field {
    flex: 1 1 100%;
}

/* Totals Section */
.dc-bill-totals-section {
    display: flex;
    justify-content: flex-end;
    flex:1;
    padding-top: 25px;
}

.dc-bill-totals-container {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dc-bill-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dc-bill-total-row.dc-bill-total {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    font-size: 18px;
    font-weight: 700;
}

.dc-bill-total-row.dc-bill-balance {
    font-weight: 700;
}

.dc-bill-total-input {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* "+ Adjust total" under an invoice's whole-bill rows: the kit's dropdown with its grouped menu
   (dcui-dropdown-menu-groups). Only what the kit has no style for is here: the link colour, lining
   its text up with the row labels (the padding is the kit's hover area), and a muted note on the
   right of an item (what it is for, or a saved entry's value). */
.dc-bill-adjust-menu {
    align-self: flex-start;
    margin-left: -10px;
}

.dc-bill-adjust-menu .dcui-dt-label {
    color: var(--dcui-primary-color);
}

.dc-bill-adjust-menu .dcui-dm-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
}

.dc-bill-adjust-menu .dc-bill-adjust-note {
    color: #9aa0a6;
    font-size: 12px;
    white-space: nowrap;
}

/* Billing → Settings → Taxes & charges: the two cards of a row are one height, and the four tables
   share their columns, so names, values and actions line up from card to card whatever they hold.
   The kit's table sizes columns to their content and has no width option. */
.dc-bill-preset-grid > [class*="dcui-col-"] {
    display: flex;
    flex-direction: column;
}

.dc-bill-preset-grid .dc-content-card {
    flex: 1;
}

.dc-bill-preset-table table.dcui-t-table {
    table-layout: fixed;
}

.dc-bill-preset-table th:nth-child(1) {
    width: 45%;
}

.dc-bill-preset-table th:nth-child(2) {
    width: 35%;
}

.dc-bill-preset-table th:nth-child(3) {
    width: 20%;
}

.dc-bill-preset-table td {
    overflow-wrap: anywhere;
}

/* Billing → Settings → Templates: a template set's card (DcCard), outlined when it is in use. */
.dc-bill-template-card {
    cursor: pointer;
}

.dc-bill-template-card--active {
    border-color: var(--dcui-primary-color);
}

/* Billing → Settings → Templates: the current logo at the size documents print it (its width and
   height attributes); it narrows with the card on a small screen, keeping its shape. */
.dc-bill-logo-current img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 6px;
}

.dc-bill-logo-size-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.dc-bill-logo-save-status {
    font-size: 12px;
    white-space: nowrap;
}

/* DcRangeSlider (components/shared/DcRangeSlider.js): a slider the dc-ui-kit doesn't have yet.
   This block moves into dc-ui-kit.css with the component. Kit colours only: the native track,
   filled with --dcui-primary-color. */
.dc-range-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dc-range-slider input[type="range"] {
    flex: 1;
    min-width: 0;
    margin: 0;
    accent-color: var(--dcui-primary-color);
    cursor: pointer;
}

.dc-range-slider.disabled input[type="range"] {
    cursor: default;
    opacity: 0.5;
}

.dc-range-slider-value {
    min-width: 52px;
    text-align: right;
    white-space: nowrap;
}

.dc-bill-input-small {
    width: 64px;
}

.dc-bill-input-medium {
    width: 80px;
}

.dc-bill-text-right {
    text-align: right;
}

/* Email Section */
.dc-bill-email-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.dc-bill-email-field {
    flex: 1 1 100%;
}

/* Buttons */
.dc-bill-buttons-section {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    flex-wrap:wrap;
}

.dc-bill-card-header-wrapper{
    gap: 15px;
    display: flex;
    align-items: center;
}

/* Responsive Design */
@media (min-width: 768px) {
    .dc-bill-logo-section {
        flex: 0 0 33.33%;
    }

    .dc-bill-invoice-meta {
        flex: 0 0 66.67%;
    }

    .dc-bill-customer-field, .dc-bill-status-field, .dc-bill-currency-field {
        flex: 1 1 33.33%;
    }

    .dc-bill-address-field {
        flex: 1 1 33.33%;
    }

    .dc-bill-date-field {
        flex: 1 1 25%;
    }

    .dc-bill-subscription-field {
        flex: 1 1 33.33%;
    }

    .dc-bill-email-field {
        flex: 1 1 50%;
    }
}
/***
 Dc Form
****/

:root {
    --dcui-form-border-color: #e2e2e2;
}

.dcui-form-border-container{

}

.dcui-billing-form-wrapper{

}

.docld-form .dcui-form-border-container .dcui-form-container-row{
    display: flex;
    border-bottom: 1px solid var(--dcui-form-border-color);
}

/* Same bordered label/input form as la_vivente_pms (.lv-border-container) and
   lv_inventory: label 30%, input 70%, rows 10px 15px and at least 56px high.
   PMS's 25px right margin spaces its form from a second (gallery) column; this
   form is the only column, so it has none, as in lv_inventory's popups. */
.docld-form .dcui-form-border-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dcui-form-border-color);
    border-radius: 5px;
    flex: 1;
}

/* A form-only create popup, sized like lv_inventory's (.lvi-create-popup). */
.dcui-form-create-new-popup{
    width: 760px;
}

.dcui-form-container-row .right{
    width: 30%;
    border-right: 1px solid var(--dcui-form-border-color);
}

.dcui-form-container-row .left{
    width: 70%;
}

.dcui-form-border-container .dcui-border-container-row{
    padding: 10px 15px;
    display: flex;
    min-height: 56px;
    align-items: center;
}

.docld-required-text{
    color: #c10808;
    padding-left: 5px;
}

.dcui-form-container-header{
    padding: 25px;
    font-weight: 800;
    text-align: left;
    width: 100%;
}

.dcui-form-container-row .dcui-form-group{
    margin: 0;
}

.dcui-icon-control.dc-form-input-filed-no-outline, .dcui-form-control.dc-form-input-filed-no-outline{
        border: 0 !important;
}

.dcui-icon-control.dc-form-input-filed-no-outline, .dcui-form-control.dc-form-input-filed-no-outline:focus {
    border: 0 !important;
    box-shadow: none;
}

.dcui-border-container-row .dcui-select-dropdown, .dcui-border-container-row .dcui-select-dropdown .dcui-dt-label{
    width: 100%;
}


.dcui-form-error-msg-text {
    color: #d30505;
    font-size: 12px;
}

/**
   create payment interface
 */
.dc-bill-payment-container {
    background-color: #f7fafc;
    padding: 1.5rem;
    font-family: sans-serif;
}

.dc-bill-payment-max-width {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.dc-bill-payment-card-plain {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dc-bill-payment-card-header-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dc-bill-payment-card-header {
    font-size: 1.5rem;
    font-weight: bold;
    margin-left: 1rem;
}


.dc-bill-payment-invoice-container {
    overflow-y: auto;
    max-height: 70vh;
}


.dc-bill-payment-card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.dc-bill-payment-invoice-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dc-bill-payment-customer-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dc-bill-payment-customer-field {
    flex: 2;
    min-width: 300px;
}

.dc-bill-payment-currency-field {
    flex: 1;
    text-align: right;
}

.dc-bill-payment-date-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dc-bill-payment-date-field {
    flex: 1;
    min-width: 200px;
}

.dc-bill-payment-date-field .dcui-select-dropdown{
    width: 100%;
}

.dc-bill-payment-date-field .dcui-select-dropdown .dcui-dt-label{
    width: 100%;
}

.dc-bill-payment-date-field .dcui-select-dropdown.open .dcui-dropdown-panel{
    width: 100%;
}


.dc-bill-payment-warning {
    background-color: #fefcbf;
    border-left: 4px solid #facc15;
    color: #d97706;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.dc-bill-payment-warning-text {
    font-size: 0.875rem;
}

.dc-bill-payment-warning-close {
    color: #d97706;
    cursor: pointer;
}

.dc-bill-payment-warning-close:hover {
    color: #b45309;
}

.dc-bill-payment-items-section {
    margin-bottom: 1.5rem;
}

.dc-bill-payment-items-header {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.dc-bill-payment-items-filter {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dc-bill-payment-notes-terms-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.dc-bill-payment-notes-field {
    flex: 3;
    max-width: 300px;
}

.dc-bill-payment-text-right {
    flex: 1;
    text-align: right;
    min-width: 200px;
}

.dc-bill-payment-button-section {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}


.dcui-checkbox.docld-checkbox-no-label {
    margin-top: 0;
}

.dcui-checkbox.docld-checkbox-no-label label {
    padding-left: 0;
    line-height: inherit;
}

.dcui-checkbox.docld-checkbox-no-label label:before {
    position: relative;
    top: 3px;
}

.dcui-checkbox.docld-checkbox-no-label label:after {
    top: 6.5px;
}

/**********************/
/**    Tab Styles    **/
/**********************/

.docld-tabs.dcui-basic-tabs .dcui-bt-tab {
    background-color: transparent;
}

/* The kit's tab pane is a flex item left at min-width: auto, so a table wider than the card grew the
   pane and the panel's overflow: hidden cut it off: on a phone the invoice list ended at "Invoice
   Type" (status, amounts and actions out of reach), and at 1280 px its row menu was. At 0 the pane
   keeps the card's width and the kit's own scroller (.dcui-horizontal-scrollable) scrolls the table. */
.dc-bill-app .dcui-basic-tabs .dcui-bt-tab {
    min-width: 0;
}

.dcui-basic-tabs .dcui-bt-nav {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 5px;
}

.docld-tabs .dcui-bt-nav .dcui-bt-n-item {
    font-size: 20px;
    font-weight: 500;
}

.docld-tabs .dcui-bt-nav .dcui-bt-n-item.active:after {
    background-color: #98ceed;
}


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

.dc-bill-header-xl{
    font-size: 30px;
    font-weight: 700;
    color: black;
}

.do-bill-invoice-activity-container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dc-bill-info-section-container{
    color: rgba(60, 60, 60, 1);
    gap: 15px 25px;
    /* On a phone the facts wrap instead of running off the card. */
    flex-wrap: wrap;
}

.dc-bill-info-section-item{
}

.dc-bill-info-section-label{
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 5px;
}

.dc-bill-info-section-value{
    font-size: 18px;
    font-weight: 600;
}

.dc-bill-subscription-field-wrapper .dc-bill-subscription-field{
    width: 250px;
}

.do-bill-bold-text{
    font-weight: 500;
    font-size: 14px;
}

.dc-bill-invoice-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dc-bill-navigation-drawer-container{
    height: calc(100vh - 175px);
}

.dc-bill-single-container{
    height: calc(100vh - 75px);
}

/*.dc-app-container {*/
/*    max-width: 64rem;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*}*/

.dc-bill-refund-create-wrapper {
    margin: auto;
    display: flex;
    height: 100%;
}

.do-bill-refund-container{
    height: calc(100vh - 166px);
    width: 100%;
    padding-bottom: 35px;
}

/*.do-bill-refund-container {*/
/*    flex: 1;*/
/*    overflow: auto;*/
/*}*/

.dc-sub-card-title{
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.dc-bill-middle-container-wrapper .dcui-select-dropdown .dcui-dropdown-menu li.disabled{
    color: #cccccc;
    cursor: not-allowed;
}

.dc-bill-info-section p {
    margin: 5px 0;
    color: #666;
}

.dc-bill-info-section strong {
    color: #333;
}

/*.dc-bill-buttons-section {*/
/*    display: flex;*/
/*    justify-content: flex-end;*/
/*    gap: 1rem;*/
/*}*/

/*.dc-refund-success-container,*/
/*.dc-refund-cancel-container {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    padding: 1.5rem;*/
/*}*/

/*.dc-refund-success-icon,*/
/*.dc-refund-cancel-icon {*/
/*    font-size: 2.25rem;*/
/*    margin-bottom: 1rem;*/
/*}*/

/*.dc-refund-success-icon i {*/
/*    color: #22c55e;*/
/*}*/

/*.dc-refund-cancel-icon i {*/
/*    color: #ef4444;*/
/*}*/

.dcui-create-refund-container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.dc-refund-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
}

.dc-refund-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dc-refund-logo img {
    height: 3rem;
}

.dc-refund-currency-field {
    text-align: right;
}

/* The refund being made, top right of the form, in the invoice's currency. */
.dc-bill-refund-total {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

/* Refund from: a click anywhere on a payment's row picks it. */
.dc-bill-refund-payments tbody tr {
    cursor: pointer;
}

.dc-bill-refund-pick {
    width: 40px;
}

/* Text kept as written, its line breaks included (bank transfer instructions). */
.dc-bill-pre-line {
    white-space: pre-line;
}

/* The kit's radio sits 10px down for stacked forms; in a table row it lines up with the text. */
.dc-bill-refund-pick .dcui-radio {
    margin-top: 0;
}

.dc-bill-refund-pick .dcui-radio label {
    padding-left: 20px;
    min-height: 20px;
    vertical-align: middle;
}

.dcui-fld-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.dc-refund-line-items-header {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
 * Customer summary — the kit has no stat-tile component, so these are the only
 * app-specific rules here; everything else on that screen uses kit classes.
 * ------------------------------------------------------------------------- */

/* Who the customer is: label above value, so the line stops running together. */
.dc-bill-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    margin: 0;
}

.dc-bill-meta-item dt {
    font-size: 12px;
    color: #7a8290;
    margin-bottom: 2px;
}

.dc-bill-meta-item dd {
    margin: 0;
}

/* Totals as tiles. Balance due leads: it is the number staff are looking for. */
.dc-bill-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.dc-bill-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
}

/* The note under a tile's value ("2 invoices") reads as its label does. */
.dc-bill-stat-label,
.dc-bill-stat-note {
    font-size: 12px;
    color: #7a8290;
}

/* Proportional figures here: a standalone value looks loose with tabular-nums. */
.dc-bill-stat-value {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.dc-bill-stat-lead .dc-bill-stat-value {
    font-size: 22px;
}

.dc-bill-stat-unit {
    font-size: 12px;
    font-weight: 400;
    color: #7a8290;
    margin-left: 4px;
}

/* Tabular figures only in the column, where digits must line up row to row. */
.dc-bill-amount-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Field hint.
 *
 * The UI kit has no help-text component, so this is app-local. Used under the invoice
 * due date to say the value came from the selected term and can be typed over.
 */

/*
 * Invoice type tabs.
 *
 * Sits inside the invoice card under the logo. The kit's tab header carries its own
 * bottom border, so this only supplies the spacing that keeps it off the logo row.
 */
.dc-bill-invoice-type {
    margin: 0 0 20px;
}

/*
 * Period range picker (components/shared/period_range_picker.js).
 *
 * The component reuses the kit's .dcui-calendar-range markup, so it inherits the kit stylesheet
 * and only the length rail needs rules here. These travel with the component if it is promoted
 * into dc_ui_kit — rename the prefix to dcui- at that point and move them into
 * base_components.css.
 */

/*
 * The kit pins its range popover at `width: 270px !important` (base_components.css), which is
 * the calendar's own width. The rail sits beside the calendar, so the popover has to grow to
 * hold both — without this the rail renders outside the white panel and over the page. Matching
 * the kit's specificity plus one class, and !important, is what it takes to win.
 */
.dcui-calendar.dcui-calendar-range__popover.dc-bill-period-popover {
    width: auto !important;
    max-width: calc(100vw - 16px);
}

/* Calendar and rail side by side; the footer stays full width beneath both. */
.dc-bill-period-popover .dc-bill-period-body {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* Keep the calendar at the width the kit designed it for; the rail adds its own. */
.dc-bill-period-popover .calendar {
    width: 270px;
    max-width: 100%;
    flex: 0 0 auto;
}

.dc-bill-period-rail {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    margin-left: 16px;
    border-left: 1px solid var(--dcui-border-color, #e5e7eb);
    min-width: 132px;
}

.dc-bill-period-rail__option {
    appearance: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    padding: 10px 14px;
    font: inherit;
    font-size: 13px;
    color: inherit;
    background: transparent;
    border: 1px solid var(--dcui-border-color, #e5e7eb);
    border-radius: 8px;
}

.dc-bill-period-rail__option:hover:not(:disabled) {
    border-color: var(--dcui-primary-color, #2563eb);
}

/* The length the drafted range currently matches. */
.dc-bill-period-rail__option.is-active {
    border-color: var(--dcui-primary-color, #2563eb);
    color: var(--dcui-primary-color, #2563eb);
    background: var(--dcui-primary-color-light, #eff6ff);
    font-weight: 600;
}

.dc-bill-period-rail__option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Narrow screens: the rail goes under the calendar rather than squeezing it. */
@media (max-width: 640px) {
    .dc-bill-period-popover .dc-bill-period-body {
        flex-direction: column;
    }

    .dc-bill-period-popover .calendar {
        width: auto;
    }

    .dc-bill-period-rail {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
        margin: 12px 0 0;
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px solid var(--dcui-border-color, #e5e7eb);
    }
}

/*
 * Field help marker.
 *
 * The "?" that opens the kit's Tooltip (xp_system/components/helpers.js, globally registered).
 * Inline in a label, so it sits on the text baseline rather than pushing the row taller.
 */
.dc-bill-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    opacity: 0.6;
    vertical-align: middle;
}

.dc-bill-help:hover {
    opacity: 1;
}

/* The tooltip is inline inside a label, so it must not inherit the label's block layout. */
.dcui-fld-label .hsy-tooltip {
    display: inline-block;
    vertical-align: middle;
}


/*
 * Subscription field grid.
 *
 * The base rule gives every date field flex: 1 1 25%, which suits the three single-pay fields
 * but leaves the five subscription fields ragged across two rows. Sizing by content width
 * instead lets them fill the row evenly, with the period — two date inputs and a separator —
 * given room for both.
 */
.dc-bill-dates-section.is-subscription .dc-bill-date-field {
    flex: 1 1 200px;
    min-width: 0;
}

.dc-bill-dates-section.is-subscription .dc-bill-date-field--wide {
    flex: 2 1 320px;
}

/*
 * Field help tooltip (kit Tooltip + the "?" marker).
 *
 * The tooltip's root is a plain div, so inside a label it breaks onto its own line and drops
 * the "?" below the text — hence inline-block here.
 *
 * The panel then needs an explicit width. It is absolutely positioned inside that inline-block,
 * which is only as wide as the "?" itself, so without a width it shrink-wraps to the containing
 * block and renders one word per line. That also makes it hundreds of pixels tall, which throws
 * the component's "place above the outlet" maths far up the page. max-content sizes it to the
 * sentence, capped by max-width.
 */
.dc-bill-tip {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.dc-bill-tip > .outlet {
    display: inline-block;
}

.dc-bill-tip > .tooltip {
    width: max-content;
    max-width: 280px;
    white-space: normal;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
}

/*
 * No-outline date fields.
 *
 * The kit defines `.dc-datepicker-filed-no-outline` for DcDatepicker (base_components.css),
 * which this form uses so date fields sit flat like the dropdowns beside them. The range
 * picker draws its own bordered boxes, so it answered to the same modifier being present on
 * the component and ignored it — leaving one boxed control in a row of flat ones.
 *
 * Honouring the same class here means a caller uses one convention for every date control,
 * and a field added to this row later inherits it rather than reintroducing the mismatch.
 */
.dc-datepicker-filed-no-outline .dcui-calendar-range__field {
    border-color: transparent;
    background: transparent;
}

/* Keep the focused field legible once the resting border is gone. */
.dc-datepicker-filed-no-outline .dcui-calendar-range__field.is-active {
    border-color: var(--dcui-primary-color, #2563eb);
    background: #fff;
}

.dc-datepicker-filed-no-outline .dcui-calendar-range__trigger {
    padding-left: 0;
}

/*
 * One height for the date controls in the invoice header.
 *
 * Measured in a render harness: the datepicker's input is 40px (base_components.css sets it
 * explicitly), while the range picker's field follows --dcui-field-height at 35px, and the
 * datepicker carries p-t-5 on top of that. Side by side they sat at different heights and
 * different baselines. The kit never reconciles the two, so the form does it here.
 *
 * Expressed as "match the datepicker" rather than a magic number, so a date control added to
 * this row lines up by using the same rule.
 */
.dc-bill-dates-section .dc-bill-period-picker {
    padding-top: 3px;
    padding-bottom: 7px;
}

.dc-bill-dates-section .dcui-calendar-range__field {
    box-sizing: border-box;
    min-height: 40px;
}

/* The trigger sits inside the field's 1px borders, so it takes the remainder. */
.dc-bill-dates-section .dcui-calendar-range__trigger {
    min-height: 38px;
}

/*
 * Flat fields: keep the clear button next to its date.
 *
 * The kit lets the trigger grow to fill the field, which puts the × hard against the field's
 * right edge. That reads fine inside a visible box; with the border gone it looks like a
 * stray × floating in the middle of the row, so the trigger shrinks to its content instead.
 */
.dc-datepicker-filed-no-outline .dcui-calendar-range__trigger {
    flex: 0 1 auto;
}

.dc-datepicker-filed-no-outline .dcui-calendar-range__field {
    flex: 0 1 auto;
}

/*
 * Invoice preview popup (create_invoice.js, the heading's Preview button).
 *
 * The invoice renders at its own page width and is scaled down only when the popup is narrower
 * (a phone). The viewport takes the scaled height, set inline, and scrolls past 70% of the window.
 */
.dc-bill-preview__note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.6;
}

.dc-bill-preview__frame {
    display: block;
    border: 0;
    transform-origin: top left;
}

.dc-bill-preview__viewport {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--dcui-border-color, #e5e7eb);
    border-radius: 6px;
    background: #fff;
}

/* The billing shell (components/billing/billing.js) and its card (components/shared/billing_layout.js),
   sized like lv_inventory's shell: on wide screens the menu and the content card fill the window
   and only the content under the heading scrolls. Narrower screens stack the menu above the
   content and scroll the page. */
.dc-bill-app .dc-bill-nav-col {
    margin-bottom: 15px;
}

/* The trail sits above the heading bar, indented to line up with the title (the bar pads 30px,
   20px on phones). */
.dc-bill-app .dc-bill-breadcrumbs {
    padding: 12px 30px;
    border-bottom: 1px solid var(--dcui-border-color, #e5e7eb);
}

@media (max-width: 600px) {
    .dc-bill-app .dc-bill-breadcrumbs {
        padding: 10px 20px;
    }
}

/* The kit's heading never shrinks its buttons, so a record page with four of them squeezed the
   title onto two lines ("PAY-" / "0021"). Here the title keeps its width and the buttons wrap.
   Phones keep the kit's own stacked heading (below 601px). */
@media (min-width: 601px) {
    .dc-bill-app .dcui-page-header {
        gap: 20px;
    }
    .dc-bill-app .dcui-page-header__left {
        flex: 1 0 auto;
    }
    .dc-bill-app .dcui-page-header__actions {
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* A record page with its side panel switched off (SHOW_SIDE_PANEL in invoice_single.js,
   payment_single.js and subscription_single.js). The kit's info panel always draws the side
   column, so the empty grey box and the divider are hidden here. */
.dc-bill-info-panel-no-side .dcui-info-panel-main-container__middle-container__right,
.dc-bill-info-panel-no-side .dcui-info-panel-main-container__middle-container__left::after {
    display: none;
}

@media (min-width: 1025px) {
    .dc-bill-app .dc-bill-shell {
        height: calc(100vh - 2 * var(--dc-app-container-padding));
    }
    .dc-bill-app .dc-bill-nav-col,
    .dc-bill-app .dc-bill-main-col {
        height: 100%;
        margin-bottom: 0;
    }
    /* A window shorter than the menu scrolls the menu, not past the card. */
    .dc-bill-app .dc-bill-nav-col .dcui-navigation-drawer-card {
        display: flex;
        flex-direction: column;
    }
    .dc-bill-app .dc-bill-nav-col .dcui-navigation-drawer-card > .scroll-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    .dc-bill-app .dc-bill-main-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .dc-bill-app .dc-bill-main-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* Absolute loaders and menus inside a screen scroll with its content. */
        position: relative;
    }
    /* The kit's info panel (record pages) sizes its columns to the window (100vh - 266px, at
       least 750px), which overflows the card under the heading bar. Here it fills what is left
       of the content area instead, so its form column scrolls and nothing around it does. */
    .dc-bill-app .dc-bill-main-body:has(> .dcui-info-panel-main-container) {
        display: flex;
        flex-direction: column;
    }
    .dc-bill-app .dc-bill-main-body > .dcui-info-panel-main-container {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .dc-bill-app .dc-bill-main-body .dcui-info-panel-main-container__middle-container {
        flex: 1 1 auto;
        min-height: 0;
    }
    .dc-bill-app .dc-bill-main-body .dcui-info-panel-main-container__middle-container__left,
    .dc-bill-app .dc-bill-main-body .dcui-info-panel-main-container__middle-container__right-container {
        height: 100%;
        overflow-y: auto;
    }
    /* The create pages size their form column to the window (100vh - 166px), which ran past the
       bottom of the card and scrolled twice. Here it fills what is left under the heading and
       scrolls on its own, as the info panel above does. */
    .dc-bill-app .dc-bill-main-body:has(> .dcui-create-new-invoice-wrapper),
    .dc-bill-app .dc-bill-main-body:has(> .dc-bill-payment-create-wrapper),
    .dc-bill-app .dc-bill-main-body:has(> .dc-bill-refund-create-wrapper) {
        display: flex;
        flex-direction: column;
    }
    .dc-bill-app .dc-bill-main-body > .dcui-create-new-invoice-wrapper,
    .dc-bill-app .dc-bill-main-body > .dc-bill-payment-create-wrapper,
    .dc-bill-app .dc-bill-main-body > .dc-bill-refund-create-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }
    .dc-bill-app .dc-bill-main-body .do-bill-invoice-container,
    .dc-bill-app .dc-bill-main-body .do-bill-refund-container {
        height: 100%;
    }
}

/* A list row that opens its record on click (components/shared/row_link.js). Same look as the kit's clickable .dcui-tree-row. */
.dcui-table tbody tr:has(.dc-bill-row-link) { cursor: pointer; }
.dcui-table tbody tr:has(.dc-bill-row-link):hover { background: #f4f7fb; }

/* An action cell's icon slots (w-40) keep their width: beside the invoice list's payment links, which
   stack when the column is tight, they were squeezed, and the icons stopped lining up row to row. */
.dc-bill-app .dcui-table td .w-40 { flex-shrink: 0; }

/* The toolbar above every list, one row (the kit classes beside it wrap it on phones): customer, status,
   method / billing cycle / balance and sort on the left, the number search on the right (m-l-auto), each
   the same width (components/shared/list_filters.js). */
.dc-bill-list-toolbar > * {
    width: 180px;
    max-width: 100%;
}

@media (max-width: 600px) {
    .dc-bill-list-toolbar > * {
        width: 100%;
    }
}

.dc-bill-refund-note {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
}

/* A voided invoice's amounts on the invoices list: kept, but greyed as the tiles' labels are. */
.dc-bill-voided-amount {
    color: #7a8290;
}
 /* Styles Here */

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

/* Widget styles Here */

.hl-widget-background{
    background-color: #cfcfcf;
    color: red;
} .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-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: 0;
    background: transparent;
    display: inline-block !important;
    visibility: visible !important;
    padding: 8px 10px;
    border-radius: 4px;
}

.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; }
@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;
}


/***********************/
/**  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; }

/* 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; }

/*** 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. */


/* 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); }
 :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;
}