.layout-icon {
    width: 80px;
    height: 40px;
    border-radius: 20px;
    background-color: #3498db;
    position: relative;
    display: inline-block;
    margin: 10px;
}

    .layout-icon.line-horizontal::before {
        content: "";
        position: absolute;
        width: 60%;
        height: 4px;
        background: white;
        top: 50%;
        left: 20%;
        transform: translateY(-50%);
    }

    .layout-icon.line-vertical::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 60%;
        background: white;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
    }

    .layout-icon.line-both::before,
    .layout-icon.line-both::after {
        content: "";
        position: absolute;
        background: white;
        position: absolute;
    }

    .layout-icon.line-both::before {
        width: 60%;
        height: 4px;
        top: 50%;
        left: 20%;
        transform: translateY(-50%);
    }

    .layout-icon.line-both::after {
        width: 4px;
        height: 60%;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
    }

html {
    font-size: 13px;
}

.contract-editor-grid {
    height: 350px;
    min-height: 350px;
}

.contract-editor-window {
    width: 95%;
    max-height: 95%;
    height: auto;
}

.users-editor-window {
    width: 80%;
    min-width: 90%;
    max-height: 95%;
    height: auto;
}

.files-editor-window {
    width: 60%;
    min-width: 60%;
    max-height: 95%;
    height: auto;
}

td.k-table-td.k-detail-cell {
    padding: 0;
}

.no-action-upload .k-actions {
    display: none;
}

/* remove the vertical Grid scrollbars */
/*.align-hierarchy .k-grid-content {
    overflow-y: visible;
}*/
/* remove the empty space above the vertical Grid scrollbar */
/*.align-hierarchy .k-grid-header {
    padding-inline-end: 0;
}*/

/* remove the detail Grid right border */
.align-hierarchy .k-grid {
    border-right-width: 0;
}

.promotion-editor-window {
    width: 80%;
    min-width: 90%;
    max-height: 95%;
    height: auto;
}

.xl-window {
    width: 95%;
    max-height: 95%;
    height: auto;
}

.l-window {
    width: 80%;
    max-height: 90%;
    height: auto;
}

.m-window {
    width: 70%;
    max-height: 80%;
    height: auto;
}

.s-window {
    width: 50%;
    max-height: 60%;
    height: auto;
}

.customer-accounting-editor-window {
    width: 600px;
    min-width: 40%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.app-load {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

    .app-load > div {
        background-color: #333;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    .app-load .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .app-load .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .app-load .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .app-load .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

.ddg-searchbox {
    width: 100%;
}

.ddg-searchbox-container {
    width: 100%;
}

.ddg-toolbar-container {
    width: 100%
}

.ddg-multiselect-checkbox {
    float: left;
    width: 45px
}

    .ddg-multiselect-checkbox .k-checkbox {
        vertical-align: central;
        margin-top: 6px;
        margin-left: 6px;
    }

/* you may want to extract this to a site-wide stylesheet instead of a local style element */
.ddl-mimic .k-grid-header {
    display: none
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1.0);
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

/* Company / branch filters in the sidebar: same look as the user panel (separator above and below) and the menu items. */
.sidebar-filters { padding: 6px 8px 12px; margin: -7px 0 .5rem; border-bottom: 1px solid #4f5962; display: flex; flex-direction: column; gap: 2px; }
.sidebar-filters label { display: flex; align-items: center; gap: .5rem; color: #c2c7d0; font-size: .92rem; font-weight: 400; margin: 6px 4px 2px; }
.sidebar-filters label:first-child { margin-top: 0; }
.sidebar-filters label i { width: 1rem; text-align: center; font-size: .92rem; opacity: .8; }
.sidebar-filters select.form-control { background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; border-radius: .25rem; }
.sidebar-filters select.form-control:hover { background-color: rgba(255, 255, 255, .1); }
.sidebar-filters select.form-control:focus { border-color: #80bdff; box-shadow: none; background-color: rgba(255, 255, 255, .1); color: #fff; }
.sidebar-filters select.form-control option { color: #1b2430; background: #fff; }
.sidebar-collapse .main-sidebar:not(:hover) .sidebar-filters { display: none; }

/* Quick Content (Locations page) */
.quick-content .qc-target { margin: 0 0 10px; font-weight: 600; }
.quick-content .qc-target span { font-weight: 400; color: #6c757d; margin-left: 6px; }
.quick-content .qc-label { font-size: .92rem; font-weight: 600; color: #495057; margin: 12px 0 6px; }
.quick-content .qc-layouts { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-content .qc-layout { padding: 4px; border: 2px solid #dee2e6; border-radius: 6px; background: #fff; line-height: 0; }
.quick-content .qc-layout:hover { border-color: #adb5bd; }
.quick-content .qc-layout.on { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, .15); }
.quick-content .qc-layout:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }
.quick-content .qc-screen { width: 72px; height: 40.5px; display: block; background: #232a33; border-radius: 3px; }
.quick-content .qc-screen rect { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
.quick-content .qc-layout.on .qc-screen rect { fill: rgba(58, 160, 255, .35); stroke: #9fd0ff; }
.quick-content .qc-screen rect.hl { fill: #3aa0ff; stroke: #fff; }
.quick-content .qc-zone { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.quick-content .qc-zone .qc-screen { width: 56px; height: 31.5px; flex: none; margin-bottom: 3px; }
.quick-content .qc-zone-picker { flex: 1; min-width: 0; }
.quick-content .qc-zone-picker label { font-size: .92rem; color: #6c757d; margin-bottom: 2px; }
.quick-content .qc-note { font-size: .92rem; color: #6c757d; margin: 12px 0 0; }
.qc-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.qc-option > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-shared { flex: none; font-size: .85rem; color: #6c757d; border: 1px solid #dee2e6; border-radius: 999px; padding: 0 6px; }
.qc-branch { flex: none; font-size: .85rem; color: #6c757d; margin-left: auto; }
.sidebar-filters select.form-control-sm { font-size: 1rem; }

/* Reseller branding: sidebar and sign-in page (logos may be wide, so no circular crop) */
.cd-brand-link { display: flex !important; align-items: center; gap: 10px; overflow: hidden; }
.cd-brand-link .cd-brand-logo { flex: none; max-height: 33px; max-width: 110px; object-fit: contain; margin-left: .8rem; }
.cd-brand-link .brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-brand-link .cd-brand-logo + .brand-text { margin-left: 0; }
.sidebar-collapse .main-sidebar:not(:hover) .cd-brand-link .cd-brand-logo { max-width: 34px; margin-left: .55rem; }
.cd-login-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cd-login-brand img { max-height: 72px; max-width: 240px; object-fit: contain; }
.cd-login-brand .h1 { margin: 0; font-size: 2rem; }
.cd-brand-preview { width: 250px; border-radius: 6px; overflow: hidden; background: #343a40; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.cd-brand-preview-bar { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid #4b545c; color: rgba(255, 255, 255, .85); font-size: 1.2rem; font-weight: 300; min-height: 57px; }
.cd-brand-preview-bar img { max-height: 33px; max-width: 110px; object-fit: contain; }
.cd-brand-preview-bar img.round { border-radius: 50%; }
.cd-brand-preview-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-brand-preview-menu { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cd-brand-preview-menu i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.cd-brand-preview-menu i:nth-child(2) { width: 70%; }
.cd-brand-preview-menu i:nth-child(3) { width: 50%; }

/* Searchable company/branch pickers in the sidebar (same look as the dropdowns they replace) */
.sidebar-picker { position: relative; }
.sidebar-filters .sidebar-picker-toggle { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; font-size: 1rem; background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; border-radius: .25rem; cursor: pointer; }
.sidebar-filters .sidebar-picker-toggle:hover { background-color: rgba(255, 255, 255, .1); }
.sidebar-filters .sidebar-picker-toggle:focus-visible { outline: none; border-color: #80bdff; }
.sidebar-picker-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-picker-toggle i { font-size: .7rem; opacity: .7; transition: transform .15s ease; }
.sidebar-picker.open .sidebar-picker-toggle i { transform: rotate(180deg); }
.sidebar-picker-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1100; background: #fff; border-radius: .25rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); padding: 6px; }
.sidebar-picker-panel .form-control { font-size: 1rem; margin-bottom: 4px; }
.sidebar-picker-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar-picker-item { border: 0; background: none; text-align: left; padding: 5px 8px; border-radius: .2rem; color: #1b2430; font-size: 1rem; }
.sidebar-picker-item.active { background: #e9f2ff; }
.sidebar-picker-item.selected { font-weight: 600; color: #0b5ed7; }
.sidebar-picker-empty { padding: 6px 8px; color: #6c757d; font-size: .92rem; }

/* sidebar branch filter applied to a list */
.grid-branch-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 4px 10px; border-radius: 4px; background: #e7eefc; color: #1d3f8f; font-size: .9rem; }