/*#region _____ DESIGN TOKENS _____*/

:root {
    /* Colors */
    --sm-primary: #4ca059;
    --sm-primary-dark: #3f884c;
    --sm-primary-darker: #3b6e44;
    --sm-accent: #4A7FA5;
    --sm-accent-warm: #C9A87A;
    --sm-text: #2D3138;
    --sm-text-light: #444444;
    --sm-text-muted: #6B7280;
    --sm-border: #DFE2E6;
    --sm-border-light: #ECEEF1;
    --sm-surface: #ffffff;
    --sm-surface-hover: #f8f9fa;
    --sm-bg: #F5F6F8;

    /* Management page sidebar */
    --sm-sidebar-bg: #1E3B52;
    --sm-sidebar-border: #325A7A;
    --sm-sidebar-text: #ECEEF1;
    --sm-sidebar-text-secondary: #A8CAE0;
    --sm-sidebar-link: #7AA5C5;

    /* Shadows — 3 elevation levels */
    --sm-shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --sm-shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
    --sm-shadow-lg: 0 4px 12px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.06);

    /* Radii */
    --sm-radius-sm: 4px;
    --sm-radius-md: 8px;
    --sm-radius-lg: 12px;

    /* Focus ring */
    --sm-focus-ring: none;

    /* Spacing scale (4px grid) */
    --sm-space-xs: 4px;
    --sm-space-sm: 8px;
    --sm-space-md: 12px;
    --sm-space-lg: 16px;
    --sm-space-xl: 24px;
    --sm-space-2xl: 32px;
    --sm-space-3xl: 48px;

    /* Layout */
    --sm-toolbar-height: 56px;

    /* Button palette */
    --sm-btn-edit: #4A7FA5;
    --sm-btn-edit-hover: #3A6F95;
    --sm-btn-save: #6B8F71;
    --sm-btn-save-hover: #5A7F61;
    --sm-btn-cancel-border: #6B7280;
    --sm-btn-cancel-text: #6B7280;
    --sm-btn-cancel-hover-bg: rgba(107,114,128,0.12);
}

/*#endregion*/


/*#region _____ BOOTSTRAP BUTTON OVERRIDES _____*/

/* ── Primary (default action — steel blue) ── */
.btn-primary {
    background-color: var(--sm-btn-edit) !important;
    border-color: var(--sm-btn-edit) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--sm-btn-edit-hover) !important;
    border-color: var(--sm-btn-edit-hover) !important;
    color: #fff !important;
}
.btn-primary:active, .btn-primary.active {
    background-color: #2F5F85 !important;
    border-color: #2F5F85 !important;
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(74,127,165,0.35) !important;
}

/* ── Success / Save (sage green) ── */
.btn-success {
    background-color: var(--sm-btn-save) !important;
    border-color: var(--sm-btn-save) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--sm-btn-save-hover) !important;
    border-color: var(--sm-btn-save-hover) !important;
    color: #fff !important;
}
.btn-success:active, .btn-success.active {
    background-color: #4A6F51 !important;
    border-color: #4A6F51 !important;
}
.btn-success:focus {
    box-shadow: 0 0 0 0.2rem rgba(107,143,113,0.35) !important;
}

/* ── Secondary (neutral — warm grey) ── */
.btn-secondary {
    background-color: var(--sm-btn-cancel-border) !important;
    border-color: var(--sm-btn-cancel-border) !important;
    color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #5B6270 !important;
    border-color: #5B6270 !important;
    color: #fff !important;
}

/* ── Outline secondary (ghost cancel style) ── */
.btn-outline-cancel,
.btn-cancel {
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid var(--sm-btn-cancel-border) !important;
    color: var(--sm-btn-cancel-text) !important;
    backdrop-filter: blur(4px);
}
.btn-outline-cancel:hover, .btn-outline-cancel:focus,
.btn-cancel:hover, .btn-cancel:focus {
    background: rgba(255,255,255,0.95) !important;
    color: #3D4450 !important;
}

/* Cancel on dark toolbar backgrounds */
#EditMenuButtons .btn-cancel,
.ToolsHeader .btn-cancel {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.30) !important;
    color: #d0d4da !important;
    backdrop-filter: none !important;
}
#EditMenuButtons .btn-cancel:hover,
.ToolsHeader .btn-cancel:hover {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
}

/* ── Danger state (toggled by JS when form is dirty) ── */
.btn-danger {
    background-color: #C0453A !important;
    border-color: #C0453A !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #A83B31 !important;
    border-color: #A83B31 !important;
}

/* ── Info (password save, misc) ── */
.btn-info {
    background-color: var(--sm-btn-edit) !important;
    border-color: var(--sm-btn-edit) !important;
    color: #fff !important;
}
.btn-info:hover, .btn-info:focus {
    background-color: var(--sm-btn-edit-hover) !important;
    border-color: var(--sm-btn-edit-hover) !important;
}

/* ── Outline secondary buttons (filter chips, export) ── */
.btn-outline-secondary {
    border-color: #5a5a64 !important;
    color: #c8c8d0 !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-secondary.active {
    background-color: var(--sm-btn-edit) !important;
    border-color: var(--sm-btn-edit) !important;
    color: #fff !important;
}

/* ── Outline danger (recycle bin empty) ── */
.btn-outline-danger {
    border-color: #C0453A !important;
    color: #C0453A !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: #C0453A !important;
    border-color: #C0453A !important;
    color: #fff !important;
}

/* ── Outline success (restore buttons) ── */
.btn-outline-success {
    border-color: #2ea043 !important;
    color: #2ea043 !important;
}
.btn-outline-success:hover, .btn-outline-success:focus {
    background-color: #2ea043 !important;
    border-color: #2ea043 !important;
    color: #fff !important;
}

/*#endregion*/


/*#region _____ GLOBAL INPUT FOCUS _____*/

/* Smooth transition for all form controls */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
select,
textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Default focus ring — replaces outline:none with a visible accessible ring */
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: var(--sm-focus-ring);
}

/*#endregion*/


/*#region _____ PROJECT LIST _____*/

th, td {
    padding: 0px;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    outline: 0;
}

.ProjectListIcon {
    width: 32px;
}


    .ProjectListIcon img {
        width: 32px;
        height: 32px;
    }

.ProjectListItem a {
    font-size: 16pt;
    font-family: 'Segoe UI', Arial;
    font-weight: 300;
    color: var(--sm-text);
    text-decoration: none;
}

    .ProjectListItem a:hover {
        color: var(--sm-accent);
    }

.ProjectListSettings {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    opacity: 0.3;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    top: -2px;
    transition: opacity 0.15s;
}

    .ProjectListSettings:hover {
        opacity: 0.8;
    }

/* Project row hover — amber left border accent */
#tblProjectList tbody tr {
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

#tblProjectList tbody tr:hover {
    background-color: #FFFFFF !important;
    border-left-color: var(--sm-accent-warm);
}

#tblProjectList tbody tr:hover td {
    background-color: #FFFFFF !important;
}

/* Softer row borders */
#tblProjectList.row-border tbody tr td,
#tblProjectList.row-border tbody th {
    border-bottom: 1px solid var(--sm-border-light) !important;
}

#tblProjectList thead th {
    border-bottom: 1px solid var(--sm-border) !important;
}

.ProjectListMore {
    width: 20px;
}

    .ProjectListMore img {
        width: 20px;
        height: 20px;
        opacity: 0.4;
    }

        .ProjectListMore img:hover {
            opacity: 1;
        }



/* Project heading — muted label */
#tblProjectList thead th {
    font-size: 11pt;
    font-weight: 600;
    color: var(--sm-text-muted);
}

.ProjectListDetail {
    font-size: 10pt;
    font-family: 'Segoe UI', Arial;
    color: var(--sm-text-light);
}

    .ProjectListDetail span:hover {
        color: cornflowerblue;
        text-decoration: underline;
        cursor: pointer;
    }

.ProjectMenuTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b0c4d4;
    font-family: 'Segoe UI', Arial;
    font-size: 16pt;
    margin-bottom: var(--sm-space-sm);
}

.ProjectMenuEditIcon {
    cursor: pointer;
    opacity: 0.4;
    font-size: 14px;
    transition: opacity 0.15s;
}

    .ProjectMenuEditIcon:hover {
        opacity: 0.8;
    }

.ProjectMenuActionList {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--sm-space-md) 0;
}

.ProjectMenuAction {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--sm-radius-sm);
    cursor: pointer;
    font-family: 'Segoe UI', Arial;
    font-size: 10.5pt;
    color: #e2e2e8;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .ProjectMenuAction:hover {
        background-color: #3a3a40;
        border-left-color: var(--sm-accent-warm);
    }

    .ProjectMenuAction img {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .ProjectMenuAction .pm-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ProjectMenuAction .pm-icon svg {
        width: 16px;
        height: 16px;
        display: block;
    }

    .pm-icon-delete  { background-color: rgba(192, 57, 43, 0.1); }
    .pm-icon-copy    { background-color: rgba(74, 127, 165, 0.1); }
    .pm-icon-backup  { background-color: rgba(39, 174, 96, 0.1); }
    .pm-icon-lock    { background-color: rgba(201, 168, 122, 0.1); }
    .pm-icon-unlock  { background-color: rgba(201, 168, 122, 0.1); }


.ajax-upload-dragdrop {
    display: none;
}
/* Hide the default upload button */

/* Position the upload status window at the top right corner */
.ajax-file-upload-statusbar {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: white;
    font-family: 'Segoe UI', Arial;
}


.ProjectsAddButton {
    border-radius: var(--sm-radius-md);
    border: 1px solid var(--sm-accent);
    color: var(--sm-accent);
    padding-left: var(--sm-space-lg);
    padding-right: var(--sm-space-lg);
    height: 43px;
    line-height: 43px;
    text-align: center;
    font-family: 'Segoe UI', Arial;
    font-size: 13pt;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 6px;
    transition: all 0.15s ease;
}

    .ProjectsAddButton:hover {
        background-color: var(--sm-accent);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: var(--sm-shadow-sm);
    }

/* Empty-state hint shown when no projects exist */
.sm-empty-projects {
    position: relative;
    margin-top: 10px;
    margin-left: 30px;
    padding: 20px 0;
    font-family: 'Segoe UI', Arial;
    animation: sm-empty-fade 0.4s ease-out;
}

.sm-empty-arrow {
    display: block;
    margin-left: -10px;
    animation: sm-empty-bounce 1.8s ease-in-out infinite;
}

.sm-empty-text {
    margin-top: 12px;
    margin-left: 60px;
    color: var(--sm-accent);
    font-size: 14pt;
    font-weight: 400;
    opacity: 0.85;
}

    .sm-empty-text strong {
        font-weight: 600;
    }

@keyframes sm-empty-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sm-empty-bounce {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-4px, -4px); }
}

.ProjectMenuButton {
    float: right;
    margin-left: 10px;
    width: 100px;
}


.ProjectMenuIconLink:focus {
    outline: none !important;
}

.ManageProjectsLink {
    display: block;
    color: var(--sm-sidebar-link);
    font-size: 10pt;
    font-family: 'Segoe UI',Arial;
    line-height: 180%;
}

    .ManageProjectsLink:link {
        text-decoration: none;
    }

    .ManageProjectsLink:hover {
        text-decoration: underline;
        color: var(--sm-sidebar-text-secondary);
    }

.ManageProjectsLink_protect {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(74, 127, 165, 0.12);
    border: 1px solid rgba(74, 127, 165, 0.3);
    border-radius: var(--sm-radius-sm);
    padding: 6px 12px;
    margin-bottom: 8px;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.protect-icon {
    font-size: 14pt;
    flex-shrink: 0;
    line-height: 1;
}

    .ManageProjectsLink_protect:hover {
        background-color: rgba(74, 127, 165, 0.22);
        border-color: rgba(74, 127, 165, 0.5);
        text-decoration: none;
    }

.HostedButton {
    background-color: cornflowerblue;
    color: white;
    width: 175px;
    text-align: center;
    padding-bottom: var(--sm-space-sm);
    padding-top: var(--sm-space-sm);
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: 12pt;
    cursor: pointer;
    display: inline-block;
    border-radius: var(--sm-radius-md);
    transition: all 0.15s ease;
}

    .HostedButton:hover {
        background-color: #5a8fd4;
        transform: translateY(-1px);
        box-shadow: var(--sm-shadow-sm);
    }

/*-------Apply these styles when the browser width is over 700px */
@media screen and (min-width: 700px) {
    #divManageProjectsLinks {
        position: absolute;
        top: 190px;
        left: 20px;
        width: 200px;
        text-align: left;
    }

    #tdsidebar {
        display: table-cell !important
    }
}

/*-------Apply these styles when the browser width is under 700px */
@media screen and (max-width: 700px) {
    #divSigninProfile {
        float: none !important;
        display: block;
        text-align: right;
        margin-bottom: 10px;
    }
    /* change to block so that content is not pinched */
}

/*#endregion*/


/*#region _____ HOSTED _____*/

#divSigninProfile {
    float: right;
    font-family: 'Segoe UI', Arial;
    font-size: 18px;
}

#spanSignOutLink {
    color: Highlight;
    cursor: pointer;
}

.HostedAccountInfo {
    display: inline-block;
    margin-top: 40px;
    font-family: 'Segoe UI', Arial;
    font-size: 16px;
    color: #555555;
}

    .HostedAccountInfo button {
        margin-top: 10px;
    }

.ProjectListHostedStatus {
    color: orange;
    padding-left: 20px;
    padding-right: 8px;
}

.HostedAccountsHeader {
    height: 50px;
    line-height: 50px;
    color: #000000;
    padding-left: var(--sm-space-lg);
    padding-right: var(--sm-space-md);
    font-family: 'Segoe UI', Arial;
    font-size: 18pt;
}

.ProjectsForAccount {
    margin-top: 7px;
    margin-bottom: 7px;
}

    .ProjectsForAccount img {
        cursor: pointer;
        width: 18px;
        height: 18px;
        margin-right: 3px;
        opacity: .3;
    }

        .ProjectsForAccount img:hover {
            opacity: 1;
        }

.ProjectLimitReached {
    font-family: 'Segoe UI', Arial;
    padding: 10px;
    font-size: 10pt;
    color: orange
}

/*#endregion*/


/*#region _____ COMMON _____ */

/* Remove tap highlight on iOS */
li, ul, span, div {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}


/* Heading on most forms */
.ToolsHeader {
    /*height: 50px;*/
    height: 56px;
    padding-left: var(--sm-space-md);
    font-family: 'Segoe UI', Arial;
    font-weight: bold;
    font-size: 14pt;
    color: #e2e2e8;
}

/* Title on most forms */
.HeadingTitle {
    /*padding-top: 7px;*/
    padding-top: 10px;
}

/* Base text colour for all tool/form panel content (BoxHTML wraps every AJAX-loaded panel) */
.BoxHTML {
    color: #e2e2e8;
    height: 100%;
    overflow-y: auto;
}

/* About panel — activation key input */
#txtAbout_ActivationKey {
    background-color: #3D4450;
    color: #e2e2e8;
    border: 1px solid #555D6B;
    border-radius: 3px;
    padding: 0 8px;
}

.HeadingButtons {
    /* right aligned button container on many forms */
    display: inline-block;
    float: right;
    margin-right: 68px;
    margin-top: var(--sm-space-sm);
    padding-top: 0px;
}

.modal-header, .modal-body, .modal-footer {
    /* Increase padding for all bootstrap dialogs */
    padding-left: var(--sm-space-xl) !important;
    padding-right: var(--sm-space-xl) !important;
}

/* ── jquery-confirm dialogs — dark mode ── */
.jconfirm .jconfirm-box {
    background: #2c2c30 !important;
    color: #e2e2e8 !important;
    border: 1px solid #3c3c42 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.jconfirm .jconfirm-box .jconfirm-title-c .jconfirm-title {
    color: #e2e2e8 !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
}
.jconfirm .jconfirm-box .jconfirm-content-pane,
.jconfirm .jconfirm-box .jconfirm-content {
    color: #e2e2e8 !important;
}
.jconfirm .jconfirm-box .jconfirm-content form {
    color: #b0c4d4 !important;
}
.jconfirm .jconfirm-box .jconfirm-content-pane label,
.jconfirm .jconfirm-box .jconfirm-content label {
    color: #e2e2e8 !important;
    font-weight: 600 !important;
}
.jconfirm .jconfirm-box .jconfirm-content-pane .form-control {
    background-color: #38383e !important;
    color: #e2e2e8 !important;
    border: 1px solid #555D6B !important;
}
.jconfirm .jconfirm-box .jconfirm-content-pane .form-control:focus {
    border-color: #4A7FA5 !important;
    box-shadow: none !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons .btn {
    font-family: 'Segoe UI', Arial, sans-serif !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons .btn-default {
    background: #38383e !important;
    color: #e2e2e8 !important;
    border: 1px solid #555D6B !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons .btn-default:hover {
    background: #4a4a54 !important;
}
.jconfirm .jconfirm-box .jconfirm-closeIcon {
    color: #a8b8c8 !important;
}
.jconfirm .jconfirm-box .jconfirm-closeIcon:hover {
    color: #e2e2e8 !important;
}
/* Admin message box inside login */
.jconfirm .jconfirm-box .alert-warning {
    background-color: rgba(193, 152, 74, 0.15) !important;
    border-color: rgba(193, 152, 74, 0.3) !important;
    color: #e2c87a !important;
}
/* SSO and backup code links */
.jconfirm .jconfirm-box a {
    color: #4A7FA5;
}
.jconfirm .jconfirm-box a:hover {
    color: #6AAFDA;
}
/* Backup codes dialog */
.sm-backup-codes-box {
    background: #38383e;
    border: 1px solid #555d6b;
    border-radius: 4px;
    padding: 16px;
    margin: 10px 0;
    display: inline-block;
    text-align: left;
}
.sm-backup-code {
    font-family: monospace;
    font-size: 15px;
    letter-spacing: 2px;
    margin: 4px 0;
    color: #e2e2e8;
}
/* Error/alert dialogs */
.jconfirm .jconfirm-box .jconfirm-content-pane .alert-danger {
    background-color: rgba(192, 57, 43, 0.15) !important;
    border-color: rgba(192, 57, 43, 0.3) !important;
    color: #e8827a !important;
}

/* ── Modal dialogs — dark mode ── */
.modal-content {
    background-color: #2c2c30;
    border: 1px solid #3c3c42;
    color: #e2e2e8;
}

.modal-header {
    border-bottom: 1px solid #3c3c42;
}

.modal-header .modal-title {
    color: #e2e2e8;
}

.modal-header .close {
    color: #a8b8c8;
    text-shadow: none;
    opacity: 0.7;
}

.modal-header .close:hover {
    color: #e2e2e8;
    opacity: 1;
}

.modal-body {
    color: #e2e2e8;
}

.modal-footer {
    border-top: 1px solid #3c3c42;
}

/* Layer list toggle switches — dark mode */
#divLayerList .custom-control.custom-switch {
    padding: 6px 0 6px 2.5rem;
}

#divLayerList .custom-control-label {
    color: #e2e2e8;
}

/* Custom toggle track (the slider background) */
#divLayerList .custom-control-input:not(:checked) ~ .custom-control-label::before {
    background-color: #3c3c42;
    border-color: #555D6B;
}

#divLayerList .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sm-primary);
    border-color: var(--sm-primary);
}

/* Layer detail form — dark mode */
.LayerDetailBody label {
    color: #a8b8c8;
}

.LayerDetailBody .form-control {
    background-color: #38383e;
    color: #e2e2e8;
    border-color: #555D6B;
}

.LayerDetailBody .form-control:focus {
    background-color: #38383e;
    color: #e2e2e8;
    border-color: #6a7aaa;
    box-shadow: none;
}

.LayerDetailBody select.form-control {
    background-color: #38383e;
    color: #e2e2e8;
    border-color: #555D6B;
}

.LayerDetailBody #lblLayerType {
    color: #a8b8c8;
}

.LayerDetailBody #lblOpacityValue {
    color: #a8b8c8;
}

/* Upload progress bar. displayed for all uploads */
#UploadProgressBar {
    position: absolute;
    font-family: 'Segoe UI', Arial;
    font-size: 14px;
    color: #222222;
    padding: 10px;
    background-color: white;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -150px;
    width: 300px;
    height: 50px;
    overflow: hidden;
}



.SessionTesting {
    background-color: yellow;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 20px;
    z-index: 1052;
    cursor: pointer
}

.busydiv {
    background-color: #ffffff;
    opacity: .9;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url(../_engine/images/loading.gif);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    text-align: center;
    vertical-align: middle;
    line-height: 100vh;
    font-family: 'Segoe UI', Arial;
    z-index: 99;
}

.dialogicon {
    background-repeat: no-repeat;
    background-size: 28px;
    width: 28px;
    height: 28px;
    display: inline-block;
}

.dialogicon_upgrade {
    background-image: url(../_engine/images/upgradeproject.png);
}

.dialogicon_error {
    background-image: url(../_engine/images/error.png);
}

.dialogicon_alert {
    background-image: url(../_engine/images/infoyellow.png);
}

.BottomMsg {
    position: fixed;
    z-index: 999;
    left: 0px;
    bottom: 0px;
    /*min-height: 40px;*/
    overflow: hidden;
    display: inline-block;
    transition: all 1s;
    padding-left: 35px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 4px;
    background-color: black;
    color: #bbbbbb;
    background-image: url(../_engine/images/error.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 10px center;
    font-size: 14px;
    font-family: 'Segoe UI', Arial;
    border-top-right-radius: var(--sm-radius-lg);
}

    .BottomMsg .BottomMsgBtn {
        color: #888888;
        font-size: 18px;
        cursor: pointer;
        display: inline-block;
        padding: 3px;
        margin-left: 10px;
    }

    .BottomMsg.HideBottomMsg {
        bottom: -80px;
        /*height: 0;*/
    }

/*#endregion*/


/*#region _____ GENERAL _____ */


body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 300px;
    overflow: hidden;
}


#divBottomTab {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transition: 0.3s;
}

#divBottomTab_content {
    background-color: #7a7a6d;
    color: #FFFFFF;
    /*border-top: 1px solid black;*/
    height: 100%;
    /*padding: 5px;*/
    font-family: 'Segoe UI', Arial;
    font-size: 20px;
    cursor: pointer;
}


#divBottomTab .closebtn {
    position: absolute;
    font-family: 'Segoe UI', Arial;
    top: 0;
    right: 5px;
    font-size: 36px;
    line-height: 35px;
    color: #bbbbbb;
    cursor: pointer;
}

    #divBottomTab .closebtn:hover {
        color: #000000;
    }

.numberbubble {
    /*width:20px;*/
    height:18px;
    border-radius:9px;
    color:white;
    text-align:center;
   line-height:18px;
   font-family:'Segoe UI', Arial;
   font-size:10px;
    background-color: dodgerblue;
    display:inline-block;
    padding-left:6px;
    padding-right:6px;
    margin-left:var(--sm-space-sm);
}

/*#endregion*/


/*#region _____ FLOOR _____ */

#divFloorWindows {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.FloorImage {
    width: 100%;
    height: 100%;
}

.Floor {
    /* Apply styles below to all panels */
    line-height: normal;
    color: #222222;
    font-family: 'Segoe UI', Arial;
    font-size: 9pt;
}


#divZoomButtons {
    position: fixed;
    width: auto;
    border-radius: 2px;
    /*z-index: 10;*/
    z-index: 7;
}

.ZoomButtons_Floorplan {
    bottom: 6px;
    right: 8px;
    background-color: white;
}


.ZoomButtons_Map {
    bottom: 24px;
    right: 60px;
    height: 40px;
    background-color: white;
    box-shadow: var(--sm-shadow-sm);
}

    .ZoomButtons_Map .ZoomButton {
        display: none;
    }

.ZoomButton {
    width: 50px;
    height: 50px;
    opacity: .2;
    cursor: pointer;
    padding: 15px;
    border-radius: 25px;
    vertical-align: middle;
    transition: all 0.15s ease;
}

    .ZoomButton:hover {
        border: 1px solid black;
        opacity: 1;
        transform: scale(1.1);
    }


/*#endregion*/


/*#region _____ BOX _____ */

.smbox {
    top: var(--sm-toolbar-height);
    height: calc(100vh - var(--sm-toolbar-height) - 10px);
    background-color: var(--sm-surface);
    border-radius: var(--sm-radius-lg);
    /*padding: 10px;*/
    margin: 5px;
    position: fixed;
    box-shadow: var(--sm-shadow-lg);
    z-index: 7;
    overflow: hidden;
    /*transition: left 0.25s;*/
}

/* Dark panel background for all content panels (not the nav menu) */
.smbox:not(#box_menu) {
    background-color: #2D3138;
}

.boxnormal {
    left: -350px;
    width: 325px;
}

.boxmenu {
    left: -350px;
    width: 325px;
}

.boxnormal[id='box_menu'] {
    background-color: rgba(50, 90, 122, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.boxfull {
    left: calc(-10px - 100%);
    width: calc(100% - 10px);
}

.boxclose {
    font-size: 18px;
    position: absolute;
    right: 22px;
    top: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.boxclose:hover {
    background: rgba(0, 0, 0, 0.70);
}



#divTabWrapper {
    width: calc(100vh - var(--sm-toolbar-height));
    height: 20px;
    transform: rotate(90deg);
    transform-origin: 10px 10px;
    position: absolute;
    left: 0px;
    top: var(--sm-toolbar-height);
    z-index: 11;
    background: linear-gradient(rgba(255,0,0,0) 0px,rgba(255,0,0,0) 6px,#333333 6px,#333333 20px);
}

#divTabContainer {
    display: inline-block;
    float: right;
    padding-right: 20px;
    line-height: 1;
}

.SideTab {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    background-color: #777777;
    color: #ffffff;
    border-top-left-radius: var(--sm-radius-sm);
    border-top-right-radius: var(--sm-radius-sm);
    margin-left: 2px;
    margin-right: 2px;
    padding-left: var(--sm-space-md);
    padding-right: var(--sm-space-md);
    font-family: 'Segoe UI', Arial;
    font-size: 13px;
    cursor: pointer;
}

.box {
    float: left;
    width: 0px;
    max-width: 100vw;
    height: calc(100vh - var(--sm-toolbar-height));
    background-color: #2D3138;
    color: #e2e2e8;
    z-index: 11;
    overflow: hidden;
    position: relative;
    /*resize:horizontal;*/
}

.box_content {
    font-family: 'Segoe UI', Arial;
    min-width: 325px;
    /*width: calc(100% - 1px);*/
    width: 100%;
    height: calc(100vh - var(--sm-toolbar-height));
    float: right;
    border-right: 1px solid #1a1a1e;
    border-top: 3px solid #555D6B;
}

.CloseForm {
    cursor: pointer;
    width: 32px;
    height: 33px;
    padding-right: 10px;
    padding-left: 4px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.PinIcon {
    width: 14px;
    height: 14px;
    margin-top: 10px;
    margin-right: 5px;
}

#boxmenudots {
    width: 33px;
    height: 33px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 5px;
    opacity: .5;
}

    #boxmenudots:hover {
        opacity: 1;
        cursor: pointer;
    }

.BoxDropdown {
    position: absolute;
    right: 40px;
    display: inline-block;
}

.BoxDropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 90px;
    box-shadow: var(--sm-shadow-md);
    z-index: 1;
    right: -10px;
    border-radius: var(--sm-radius-md);
}

    .BoxDropdown-content a {
        color: black;
        padding-top: var(--sm-space-sm);
        padding-bottom: var(--sm-space-sm);
        padding-right: var(--sm-space-md);
        padding-left: var(--sm-space-lg);
        text-decoration: none;
        display: block;
        font-family: 'Segoe UI', Arial;
        font-size: 14px;
        cursor: pointer;
        border-radius: var(--sm-radius-sm);
    }

        .BoxDropdown-content a:hover {
            background-color: #ddd;
        }

.BoxDropdown:hover .BoxDropdown-content {
    display: block;
}


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



.BoxActions {
    white-space: nowrap;
    display: inline-block;
    position: absolute;
    right: 0px;
    padding-top: var(--sm-space-sm);
    padding-right: 5px;
}


.EmployeeDetailClose {
    margin-right: var(--sm-space-lg);
    margin-top: var(--sm-space-lg);
    position: absolute;
    right: 10px;
    cursor: pointer;
    width: 22px;
    height: 22px;
    opacity: 0.5;
}

    .EmployeeDetailClose:hover {
        opacity: 1;
    }



#imgAssetFormPic {
    width: 100%;
    max-width: 325px;
    display: block;
}

#divLiveAssetFields {
    width: 100%;
    font-size: 14px;
    font-family: 'Segoe UI', Arial;
    font-weight: normal;
    color: #e2e2e8;
}

    #divLiveAssetFields .fieldrow {
        border-top: 1px solid #3D4450;
        padding-top: var(--sm-space-md);
        padding-bottom: var(--sm-space-md);
        margin-left: var(--sm-space-lg);
        margin-right: var(--sm-space-lg);
    }

.AssetFldValue {
    padding-left: 3px;
    display: inline-block;
    width: calc(100% - 110px);
    font-size: 14px;
    color: #e2e2e8;
    font-family: 'Segoe UI', Arial;
}

#divLiveAssetFields .fieldrow div:nth-child(1) {
    width: 105px;
    font-size: 13px;
    color: #8090a4;
    display: inline-block;
    vertical-align: top;
}


.fieldmoreicon {
    float: right;
    width: 20px;
    height: 20px;
    cursor: pointer;
    padding-top: 4px;
    padding-bottom: 3px;
    padding-left: 4px;
}

#divDeptsCanBook {
    font-size: 12px;
    margin-top: 5px;
}

    #divDeptsCanBook input {
        vertical-align: middle;
    }

    #divDeptsCanBook label {
        vertical-align: middle;
        height: 12px;
        margin-left: 7px;
    }


/*#endregion*/


/*#region _____ TOOLBAR _____ */

#divMainToolBar {
    background-color: rgba(76, 160, 89, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    width: 100%;
    height: var(--sm-toolbar-height);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 8;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

#divToolbarButtons {
    z-index: 9;
    position: fixed;
    right: 62px;
    top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Availability heatmap toggle */
#divAvailabilityToggle {
    padding: 6px var(--sm-space-lg);
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
#divAvailabilityToggle:hover {
    background-color: rgba(0, 0, 0, 0.30);
}
#divAvailabilityToggle.heatmap-active {
    background-color: rgba(76, 160, 89, 0.3);
    border-color: rgba(76, 160, 89, 0.6);
}

/* Availability mode — show only available desks */
body.availability-mode .employeepanel {
    opacity: 0 !important;
    pointer-events: none !important;
}
body.availability-mode .bookingpanel {
    opacity: 0.25 !important;
}
body.availability-mode .deskpanel[data-bookable="true"][data-avail="available"] {
    background-color: #6fcf8a !important;
    box-shadow: 0 0 0 2px #3faa5e;
    opacity: 1 !important;
}
body.availability-mode .deskpanel[data-bookable="true"][data-avail="booked"] {
    opacity: 0.3 !important;
}
body.availability-mode .deskpanel[data-bookable="false"] {
    opacity: 0.15 !important;
}
body.availability-mode .assetpanel {
    opacity: 0.15 !important;
}

#divEditFloorButton {
    padding: 6px var(--sm-space-lg);
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

#divEditFloorButton:hover {
    background-color: rgba(0, 0, 0, 0.30);
    border-color: rgba(255, 255, 255, 0.4);
}

#imgProfileIcon {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    /*z-index: 12;*/
    /*position: fixed;*/
    /*right:12px;*/
    /*top:7px;*/
    cursor: pointer;
    /*float: right;*/
    margin-left: 10px;
}

    #imgProfileIcon:hover {
        opacity: .6;
    }

#divBookingFilter {
    vertical-align: top;
}


.BookingRange {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: var(--sm-radius-md);
    background-color: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255,255,255,0.08);
    height: 38px;
    vertical-align: top;
    cursor: pointer;
    transition: all 0.15s ease;
}

.BookingRange:hover {
    background-color: rgba(0, 0, 0, 0.28);
    border-color: rgba(255,255,255,0.15);
}

.BookingRange .brng-icon {
    flex-shrink: 0;
    opacity: 0.7;
    display: block;
}

.BookRngDate {
    color: #ECEEF1;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

.BookingRange .brng-sep {
    color: #a8b8c8;
    font-size: 12px;
}

.BookRngDate .brng-time {
    color: #b0c4d4;
    font-size: 12px;
    font-weight: 400;
}

.BookingRange .brng-chevron {
    opacity: 0.55;
    margin-left: 2px;
    flex-shrink: 0;
    display: block;
}

/* ── Daterangepicker — dark mode ── */
.daterangepicker {
    background-color: #2c2c30;
    border-color: #3c3c42;
    color: #e2e2e8;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.daterangepicker:before { border-bottom-color: #3c3c42; }
.daterangepicker:after { border-bottom-color: #2c2c30; }
.daterangepicker.drop-up:before { border-top-color: #3c3c42; }
.daterangepicker.drop-up:after { border-top-color: #2c2c30; }

.daterangepicker .calendar-table {
    background-color: #2c2c30;
    border-color: #2c2c30;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    color: #e2e2e8;
}
.daterangepicker .calendar-table th.month {
    color: #e2e2e8;
    font-weight: 600;
}
.daterangepicker .calendar-table th.prev span,
.daterangepicker .calendar-table th.next span {
    border-color: #a8b8c8;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #3a3a40;
    color: #e2e2e8;
}
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: #2c2c30;
    color: #555D6B;
}
.daterangepicker td.disabled,
.daterangepicker option.disabled {
    color: #555D6B;
}
.daterangepicker td.in-range {
    background-color: #33404d;
    color: #e2e2e8;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #4A7FA5;
    color: #fff;
}
.daterangepicker td.week,
.daterangepicker th.week {
    color: #555D6B;
}

/* Time picker selects */
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    background: #38383e;
    border-color: #555D6B;
    color: #e2e2e8;
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    background: #38383e;
    border: 1px solid #555D6B;
    color: #e2e2e8;
}
.daterangepicker .calendar-time {
    color: #a8b8c8;
}

/* Buttons bar */
.daterangepicker .drp-buttons {
    border-top-color: #3c3c42;
    color: #a8b8c8;
}
.daterangepicker .drp-selected {
    color: #a8b8c8;
}
.daterangepicker .drp-buttons .btn {
    border-radius: 4px;
    font-weight: 500;
}
.daterangepicker .drp-buttons .cancelBtn {
    background: transparent;
    border: 1px solid #555D6B;
    color: #c8d0da;
}
.daterangepicker .drp-buttons .cancelBtn:hover {
    background: #3a3a40;
    color: #e2e2e8;
}
.daterangepicker .drp-buttons .applyBtn {
    background: #4A7FA5;
    border: 1px solid #4A7FA5;
    color: #fff;
}
.daterangepicker .drp-buttons .applyBtn:hover {
    background: #3b6d90;
}

/* Ranges sidebar */
.daterangepicker .ranges li:hover {
    background-color: #3a3a40;
}
.daterangepicker .ranges li.active {
    background-color: #4A7FA5;
    color: #fff;
}

/* Border between left/right calendars */
.daterangepicker.show-ranges .drp-calendar.left {
    border-left-color: #3c3c42;
}
.daterangepicker.ltr .drp-calendar.left .calendar-table {
    border-right: none;
}


#divLoginProfile {
    display: inline-block;
    z-index: 12;
    position: fixed;
    right:12px;
    top:10px;
}

.ProfileMenu {
    padding: var(--sm-space-md);
    background-color: #2d2d2d;
    border-radius: var(--sm-radius-md);
    /*border: 1px solid black;*/
    font-family: 'Segoe UI', Arial;
    font-size: 16pt;
    color: #EEEEEE;
    position: absolute;
    top: var(--sm-toolbar-height);
    right: 0px;
    z-index: 8;
    margin-top: 2px;
    margin-right: 2px;
    box-shadow: var(--sm-shadow-lg);
}

.ProfileMenu_Details {
    background-repeat: no-repeat;
    background-size: 100px;
    padding-left: 110px;
    padding-right: 30px;
    height: 100px;
    white-space: nowrap;
}

.ProfileMenu_Username {
    font-size: 12pt;
    color: #bdbdbd;
}

.ProfileMenu_Close {
    float: right;
    cursor: pointer;
    color: #888888;
    font-size: 18px;
    line-height: 18px;
    padding: 2px 4px;
    border-radius: var(--sm-radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

    .ProfileMenu_Close:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.15);
    }

/* ── Notification Badge ── */
.NotificationBadge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    padding: 0 4px;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Notification Panel ── */
.NotificationPanel {
    position: absolute;
    top: 52px;
    right: 8px;
    width: 360px;
    max-height: 480px;
    background: #2c2c30;
    border: 1px solid #3c3c42;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 999;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.NotificationPanel_Header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #3c3c42;
}

.NotificationPanel_Title {
    font-size: 14px;
    font-weight: 600;
    color: #e2e2e8;
}

.NotificationPanel_Actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.NotificationPanel_MarkRead {
    font-size: 11px;
    color: #6AAFDA;
    cursor: pointer;
    text-decoration: none;
}
.NotificationPanel_MarkRead:hover { color: #8CC4E8; text-decoration: none; }

.NotificationPanel_Close {
    color: #a8b8c8;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}
.NotificationPanel_Close:hover { color: #fff; background: rgba(255,255,255,0.1); }

.NotificationPanel_User {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #3c3c42;
}
.NotificationPanel_UserPic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.NotificationPanel_UserName {
    font-size: 13px;
    font-weight: 600;
    color: #e2e2e8;
}
.NotificationPanel_UserLogin {
    font-size: 11px;
    color: #8c95a0;
}

.NotificationPanel_List {
    overflow-y: auto;
    flex: 1;
    max-height: 340px;
}

.NotificationPanel_Footer {
    padding: 8px 14px;
    border-top: 1px solid #3c3c42;
    text-align: center;
}
.NotificationPanel_Footer a {
    font-size: 12px;
    color: #6AAFDA;
    text-decoration: none;
}
.NotificationPanel_Footer a:hover { color: #8CC4E8; text-decoration: none; }

/* Notification items */
.NotificationItem {
    padding: 10px 14px;
    border-bottom: 1px solid #3c3c42;
    cursor: pointer;
    transition: background 0.15s;
}
.NotificationItem:hover { background: #38383e; }
.NotificationItem.no-click { cursor: default; }
.NotificationItem.no-click:hover { background: transparent; }
.NotificationItem.unread { border-left: 3px solid #4A7FA5; }
.NotificationItem.read { border-left: 3px solid transparent; opacity: 0.7; }

.NotificationItem_Title {
    font-size: 13px;
    font-weight: 500;
    color: #e2e2e8;
    margin-bottom: 2px;
}
.NotificationItem_Message {
    font-size: 12px;
    color: #b0c4d4;
    line-height: 1.4;
}
.NotificationItem_Time {
    font-size: 10px;
    color: #8c95a0;
    margin-top: 3px;
}

.NotificationPanel_Empty {
    padding: 30px 14px;
    text-align: center;
    color: #8c95a0;
    font-size: 13px;
}


.MoreIcon {
    width: 38px;
    height: 38px;
    padding: 9px;
    box-sizing: border-box;
    margin-top: 9px;
    margin-left: 10px;
    margin-right: 2px;
    float: left;
    cursor: pointer;
    opacity: 1;
    border-radius: 50%;
    transition: background-color 0.2s ease, transform 0.15s ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.MoreIcon:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.MoreIcon:active {
    transform: scale(0.85);
    background-color: rgba(255, 255, 255, 0.3);
}

.SearchBox {
    border: none;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: var(--sm-space-md);
    padding-right: 34px;
    border-radius: var(--sm-radius-md);
    width: 100%;
    font-family: 'Segoe UI', Arial;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    outline: none;
    background-image: url(../_engine/images/searchicon_green.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: transparent;
    transition: color 0.2s ease;
}

.SearchBox::placeholder {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
}

.search-focused .SearchBox {
    color: #e2e2e8;
}

.search-focused .SearchBox::placeholder {
    color: #6b7280;
}


#divFloorlabel {
    /*color: #222222;*/
    color: #FFFFFF;
    line-height: var(--sm-toolbar-height);
    padding-left: var(--sm-space-xl);
    display: inline-block;
    font-size: 16px;
    font-family: 'Segoe UI', Arial;
    cursor: pointer;
}

#divCustomHeaderHTML {
    display: inline-block;
    float: left;
    line-height: var(--sm-toolbar-height);
}

#divSearchContainer {
    display: inline-block;
    border-radius: var(--sm-radius-md);
    padding: 1px;
    background-color: rgba(255, 255, 255, 0.12);
    margin-top: 9px;
    width: 450px;
    margin-left: 7px;
    border-bottom: 2px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    #divSearchContainer:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    #divSearchContainer.search-focused {
        background-color: #2c2c30;
        border-bottom-color: #4A7FA5;
    }




#divQuickSearchIcons {
    padding: var(--sm-space-sm) var(--sm-space-md) var(--sm-space-xs) var(--sm-space-md);
    border-top: 1px solid #3c3c42;
}

#divQuickSearchResults {
    background-color: #2c2c30;
    padding: var(--sm-space-sm);
    font-family: 'Segoe UI', Arial;
    font-size: 14px;
    overflow: auto;
    max-height: calc(100vh - 100px);
    border-top: 1px solid #3c3c42;
}

.quicksearchicon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: 20px;
    background-repeat: no-repeat;
    opacity: 0.6;
    margin-left: var(--sm-space-lg);
    cursor: pointer;
    color: #a8b8c8;
}

    .quicksearchicon:hover {
        opacity: 1;
    }

.qs_disabled {
    background-color: rgba(220, 53, 69, 0.25);
    border-radius: 10px;
}

/* Invert dark quick-search filter icons for dark mode */
.quicksearchicon {
    filter: invert(0.75);
}

.qs_employee {
    background-image: url(../_engine/images/qs_employee.png);
}

.qs_desk {
    background-image: url(../_engine/images/qs_desk.png);
}

.qs_asset {
    background-image: url(../_engine/images/qs_asset.png);
}

.qs_booking {
    background-image: url(../_engine/images/qs_booking.png);
}

#divQuickSearchResults div {
    background-size: 36px;
    background-repeat: no-repeat;
    background-position-y: 8px;
    background-position-x: 8px;
    padding-left: 54px;
    padding-right: var(--sm-space-sm);
    padding-top: var(--sm-space-sm);
    padding-bottom: var(--sm-space-sm);
    font-family: 'Segoe UI', Arial;
    font-size: 14px;
    font-weight: 500;
    color: #e2e2e8;
    border-bottom: 1px solid #3c3c42;
    line-height: 20px;
    transition: background-color 0.15s ease;
}

    #divQuickSearchResults div:hover {
        background-color: #3a3a40;
        cursor: pointer;
    }


    #divQuickSearchResults div span {
        font-family: 'Segoe UI', Arial;
        font-size: 12px;
        font-weight: 400;
        color: #a8b8c8;
        display: inline-block;
        padding-right: 6px;
    }

    #divQuickSearchResults div span + span::before {
        content: "\00b7";
        padding-right: 6px;
        color: #555D6B;
    }

/* Light booking icon for dark mode search results */
#divQuickSearchResults .qs-booking-result {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='4' y='8' width='24' height='20' rx='2' fill='%23a8b8c8' opacity='0.3'/%3E%3Crect x='4' y='8' width='24' height='6' rx='2' fill='%23a8b8c8' opacity='0.5'/%3E%3Crect x='9' y='4' width='2' height='6' rx='1' fill='%23a8b8c8' opacity='0.5'/%3E%3Crect x='21' y='4' width='2' height='6' rx='1' fill='%23a8b8c8' opacity='0.5'/%3E%3C/svg%3E") !important;
}

.QuickSearchSelected {
    background-color: #3a3a40;
}

#divLoginButton {
    height: 35px;
    /*background-color:#eeeeee;*/
    line-height: 34px;
    padding-left: var(--sm-space-lg);
    padding-right: var(--sm-space-sm);
    padding-top: 0px;
    padding-bottom: 0px;
    font-family: 'Segoe UI', Arial;
    font-size: 11pt;
    color: #FFFFFF;
    cursor: pointer;
}

#divLoginAsAdmin {
    padding: 8px 14px;
    background-color: rgba(140, 30, 20, 0.85);
    border: 1px solid rgba(231, 76, 60, 0.6);
    margin-top: 13px;
    margin-right: 5px;
    font-family: 'Segoe UI', Arial;
    font-size: 11pt;
    color: #e2e2e8;
    position: fixed;
    right: 0px;
    border-radius: var(--sm-radius-md);
    transition: all 0.15s ease;
}






.LoginAsAdmin_close {
    float: right;
    padding-left: 10px;
    font-size: 14px;
    cursor: pointer;
    color: #a8b8c8;
}
.LoginAsAdmin_close:hover {
    color: #e2e2e8;
}

.LoginAsAdmin_link {
    color: #6AAFDA;
    cursor: pointer;
    text-decoration: underline;
}
.LoginAsAdmin_link:hover {
    color: #8CC4E8;
}

/*#endregion*/


/*#region _____ IMPORT _____ */

#divImportMsg {
    font-family: 'Segoe UI', Arial;
    font-size: 18px;
    margin-left: var(--sm-space-xl);
    margin-top: 5px;
    color: #0094ff;
    font-weight: normal;
}

#divImportTable {
    width: 100%;
    height: calc(100vh - 200px);
    overflow: auto
}

#tblImport {
    width: 100%;
    border-collapse: collapse;
    color: #444444;
    font-family: 'Segoe UI', Arial;
    font-size: 14px
}

    #tblImport tr td {
        border-bottom: 1px solid #eeeeee;
        padding: 3px;
    }

.ImportFieldList {
    border: 1px solid #cccccc;
    padding: var(--sm-space-xs);
    min-width: 100px;
    color: red;
    font-family: 'Segoe UI', Arial;
}

.ImportCSVPhoto {
    width: 50px;
    height: 50px;
}

#divImportPopupMsg {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: dodgerblue;
    color: white;
    padding: 10px;
    font-size: 16px;
    z-index: 99;
    transition: opacity .7s linear;
}

.importtypeheading {
    font-family: 'Segoe UI', Arial;
    font-size: 20px;
    color: cadetblue;
    padding-top: 20px;
}

.syncfieldchanged {
    color: orange
}

.syncpicturechanged {
    border: 1px solid orange
}

.ImportSettingsTextbox {
    width: 100%;
    padding: 6px;
    margin-top: 2px;
    border: none
}


/* test link on import settings form */
.ImportTestLink {
    display: inline-block;
    cursor: pointer;
    padding-left: 3px;
    padding-right: 3px;
    color: Highlight;
    float: right;
}

    .ImportTestLink:hover {
        background-color: #dddddd;
    }

#divImportSettings {
    height: calc(100vh - 100px);
    overflow: auto;
    font-family: 'Segoe UI', Arial;
    font-size: 14px;
}

.importiframe {
    width: 300px;
    height: 50px;
    bottom: 0px;
    left: 0px;
    position: absolute;
    z-index: 99;
    background-color: #eeeeee;
    border: none;
}

.CloseImport {
    float: right;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-top: 3px;
}

#ImportSuccessMsg {
    font-family: 'Segoe UI', Arial;
    font-size: 15px;
    cursor: pointer;
}

    #ImportSuccessMsg:hover {
        text-decoration: underline;
    }


.body_import {
    margin-top: var(--sm-space-lg);
    margin-left: var(--sm-space-lg);
    margin-right: var(--sm-space-lg);
}

.ImportFormBox {
    border-radius: var(--sm-radius-md);
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 5px;
    height: calc(100vh - 152px);
    overflow: auto;
    background-color: white;
    border: none;
}


.ImportFieldMapTable {
    width: 100%;
}


    .ImportFieldMapTable tr td {
        border-bottom: 1px solid black;
        font-family: 'Segoe UI', Arial;
    }

    .ImportFieldMapTable select {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: var(--sm-space-md);
        padding-right: var(--sm-space-md);
        background-color: #f5f5f5;
        border-color: #f5f5f5; /*set border color because Opera doesn't support border:none*/
        width: 100%;
    }

    .ImportFieldMapTable input {
        width: 100%;
        border: 1px solid #eeeeee;
        padding-left: 10px;
    }

/* ── Import / Sync pages — dark mode ── */

.ImportFormBox {
    background-color: #2D3138;
    color: #e2e2e8;
}

.ImportFormBox h2 {
    color: #e2e2e8;
}

.ImportFormBox label {
    color: #a8b8c8;
}

.ImportFormBox .form-control {
    background-color: #3D4450;
    color: #e2e2e8;
    border-color: #555D6B;
}

.ImportFormBox .form-control:focus {
    background-color: #3D4450;
    color: #e2e2e8;
    border-color: #6a7aaa;
    box-shadow: none;
}

.ImportFormBox .form-control-static {
    color: #e2e2e8;
}

.ImportFormBox .btn-secondary {
    background-color: #555D6B;
    border-color: #555;
    color: #e2e2e8;
}

.ImportFieldMapTable tr td {
    border-bottom: 1px solid #3D4450 !important;
    color: #e2e2e8;
}

.ImportFieldMapTable select {
    background-color: #3D4450 !important;
    color: #e2e2e8;
    border-color: #555D6B !important;
}

.ImportFieldMapTable input {
    background-color: #3D4450;
    color: #e2e2e8;
    border: 1px solid #555D6B !important;
}

.ImportFormBox hr {
    border-color: #3D4450;
}

#divImportOptions {
    font-family: 'Segoe UI', Arial;
}

#divImportOptions a {
    font-family: 'Segoe UI', Arial;
}

/*#endregion*/


/*#region _____ TOOLS _____ */

.ToolDetailFormBody {
    padding: var(--sm-space-xl);
    overflow: auto;
    height: calc(100vh - 135px);
}

/* Security group form — Bootstrap inputs on dark background */
.ToolDetailFormBody .form-control {
    background-color: #3D4450;
    color: #e2e2e8;
    border-color: #555D6B;
}

.ToolDetailFormBody .form-control:focus {
    background-color: #3D4450;
    color: #e2e2e8;
    border-color: #6a7aaa;
    box-shadow: none;
}

/* Hidden pages tree — node title text */
#grouptree .fancytree-title {
    color: #e2e2e8;
}

/* Hint / helper text */
.ToolDetailFormBody .text-muted {
    color: #8090a4 !important;
}

.DeleteGroupButton {
    border-top: 1px solid #555D6B;
    margin-left: var(--sm-space-xl);
    margin-right: var(--sm-space-xl);
    text-align: center;
    color: red;
    cursor: pointer;
    padding-top: 6px;
    transition: all 0.15s ease;
}

    .DeleteGroupButton:hover {
        background-color: #4a2525;
    }

#divSecurityGroupList {
    padding: var(--sm-space-xl);
    height: calc(100vh - 140px);
    overflow: auto;
}

    #divSecurityGroupList div {
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #3D4450;
        width: 100%;
        max-width: 300px;
        font-size: 16pt;
        font-family: 'Segoe UI', Arial;
        color: #e2e2e8;
        cursor: pointer;
    }

        #divSecurityGroupList div:hover {
            background-color: #3D4450;
        }

.SecurityGroupFieldRow {
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #3D4450;
    display: inline-block;
}

#txtStyleSheet {
    width: calc(100% - 10px);
    margin-left: 5px;
    height: calc(100vh - 105px);
    border: none;
    padding: 10px;
}

.EditMapToggleIcons {
    width: 36px;
}

    .EditMapToggleIcons img {
        width: 16px;
        height: 16px;
        opacity: .6;
    }

        .EditMapToggleIcons img:hover {
            opacity: 1;
        }

/*#endregion*/


/*#region _____ PAGE PROPERTIES _____ */
.PagePropertiesTable {
    width: 100%;
    margin-top: 3px;
    font-size: 11pt;
    font-family: 'Segoe UI', Arial;
    font-weight: normal;
    color: #e2e2e8;
    table-layout: fixed;
    background-color: #2D3138;
    border-right: 2px solid #3D4450;
    border-left: 2px solid #3D4450;
}

    .PagePropertiesTable tr {
        height: 30px;
    }

    /*name Column*/
    .PagePropertiesTable td:nth-child(1) {
        width: 100px;
        border-bottom: 1px solid #3D4450;
        border-right: 1px solid #3D4450;
        padding-left: 6px;
        padding-top: 3px;
        vertical-align: top;
        color: #a8b8c8;
    }

    /*value Column*/
    .PagePropertiesTable td:nth-child(2) {
        border-bottom: 1px solid #3D4450;
    }

    /* Buttons don't inherit color — force light text */
    .PagePropertiesTable button {
        color: #e2e2e8;
    }

    /* Textbox */
    .PagePropertiesTable td input[type=text] {
        width: 99%;
        border: none;
        border-bottom: 1px solid transparent;
        padding-left: 5px;
        background-color: transparent;
        color: #e2e2e8;
    }

    .PagePropertiesTable td input[type=text]:hover {
        border-bottom-color: var(--sm-border);
    }

    /* List */
    .PagePropertiesTable td select {
        width: 99%;
        border: none;
        padding-left: 2px;
        background-color: #3D4450;
        color: #e2e2e8;
    }

    /* Textarea */
    .PagePropertiesTable td textarea {
        width: 99%;
        border: none;
        border-bottom: 1px solid transparent;
        padding-left: 5px;
        height: 150px;
        background-color: transparent;
        color: #e2e2e8;
    }

    .PagePropertiesTable td textarea:hover {
        border-bottom-color: var(--sm-border);
    }

/* Readonly Values */
#tdProp_PageID, #tdProp_PageType {
    padding-left: 5px;
    color: #aaaaaa;
}

.pageprop_listicon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.pageprop_AddIcon {
    float: right;
    color: #198827;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 1px;
    cursor: pointer;
}

.pageprop_iconlistlink {
    cursor: pointer;
    display: inline-block !important;
    width: calc(100% - 20px);
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #e2e2e8 !important;
}

#tdProp_PageIcon .dropdown-menu {
    height: calc(100vh - 130px);
    overflow: auto;
    background-color: #3D4450;
    border-color: #3D4450;
}

    #tdProp_PageIcon .dropdown-menu li span {
        font-size: 16px;
    }

    #tdProp_PageIcon .dropdown-menu li:hover {
        background-color: #555D6B;
    }

    #tdProp_PageIcon .dropdown-menu li:hover span {
        display: inline-block !important;
    }

#divContentsButtons {
    padding-right: 60px;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
}

#tdFloorScaleValue:hover #divrangevalue {
    display: inline-block !important;
}

#rngProp_FloorScale {
    padding-left: 5px;
    padding-right: 5px;
}

.prop_rangebubble {
    display: none;
    background-color: #3D4450;
    color: #e2e2e8;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    margin-top: -40px;
    left: 140px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
}

/*#endregion*/


/*#region _____ PROJECT PROPERTIES _____ */

/* Section card grouping */
.settings_section {
    background: #3D4450;
    border: 1px solid #555D6B;
    border-radius: var(--sm-radius-md);
    margin: var(--sm-space-md) var(--sm-space-md) 0 var(--sm-space-md);
    padding: 0 var(--sm-space-md);
}

.settings_section_header {
    font-size: 11px;
    font-family: 'Segoe UI', Arial;
    font-weight: 600;
    color: #c8d4e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--sm-space-md) 0 var(--sm-space-xs) 0;
    cursor: default;
}

.settings_fieldrow {
    border-bottom: 1px solid #555D6B;
    padding: var(--sm-space-xs) 0;
}

.settings_fieldrow:last-child {
    border-bottom: none;
}

    .settings_fieldrow .fldlabel {
        font-size: 10px;
        margin-top: var(--sm-space-xs);
        font-family: 'Segoe UI', Arial;
        color: #b0c4d4;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        cursor: default;
    }

    .settings_fieldrow .fldvalue {
        width: 100%;
        font-family: 'Segoe UI', Arial;
        font-size: 14px;
        color: #e2e2e8;
        margin-bottom: var(--sm-space-xs);
    }

    .settings_fieldrow .fldvalue button {
        color: #e2e2e8;
    }

    .settings_fieldrow .fldvalue input[type=text],
    .settings_fieldrow .fldvalue input[type=password] {
        width: 99%;
        border: none;
        border-bottom: 2px solid transparent;
        padding: var(--sm-space-xs) 0;
        padding-right: 3px;
        padding-left: 0px;
        transition: border-color 0.2s ease;
        outline: none;
        background: transparent;
        color: #e2e2e8;
    }

    .settings_fieldrow .fldvalue input[type=text]:hover,
    .settings_fieldrow .fldvalue input[type=password]:hover {
        border-bottom-color: #5a5a68;
    }

    .settings_fieldrow .fldvalue input[type=text]:focus,
    .settings_fieldrow .fldvalue input[type=password]:focus {
        border-bottom-color: #4285f4;
    }

/* Select dropdowns inside settings panel */
.settings_fieldrow .fldvalue select {
    color: #e2e2e8;
    background: #2D3138;
    border: 1px solid #555D6B;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 13px;
    font-family: 'Segoe UI', Arial;
    max-width: 100%;
}

/* Desk icon visual picker */
.sm-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}
.sm-icon-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 2px solid transparent;
    background: #DFE2E6;    /* match actual desk panel background */
    cursor: pointer;
    min-width: 58px;
    transition: border-color 0.12s, background 0.12s;
}
.sm-icon-picker-item:hover { background: #d4d4d4; }
.sm-icon-picker-sel { border-color: #1a6fcf; background: #d6e8fb; }
.sm-icon-picker-label {
    font-size: 10px;
    color: rgba(0,0,0,0.6);
    white-space: nowrap;
}

/* Toggle switch theming — override Bootstrap defaults */
.settings_section .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #4ca059;
    border-color: #4ca059;
}

.settings_section .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

.settings_section .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #4ca059;
}

/* Consistent action buttons */
/* Helper/description text below settings controls */
.settings_fieldrow .fldvalue span[style*="color:#888"],
.settings_fieldrow .fldvalue span[style*="color: #888"] {
    color: #9aabb8 !important;
}

.settings_hint {
    font-size: 12px;
    color: #9aabb8;
    margin-top: 4px;
    display: block;
}

.settings_action_btn {
    float: right;
    margin-right: 0;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 12px;
    border: 1px solid #555D6B;
    border-radius: var(--sm-radius-sm);
    background: transparent;
    color: #c8d0da;
    cursor: pointer;
    transition: all 0.15s ease;
}

.settings_action_btn:hover {
    background: #555D6B;
    color: #e2e2e8;
    border-color: #5a5a68;
}



.SettingsTable {
    width: calc(100% - 1px);
    margin-top: 3px;
    font-size: 11pt;
    font-family: 'Segoe UI', Arial;
    font-weight: normal;
    color: #e2e2e8;
    table-layout: fixed;
    background-color: #2D3138;
    border-top: 1px solid #3D4450;
}

    /* Height of rows in settings table */
    .SettingsTable tr {
        height: 35px;
    }

    /*Settings name column*/
    .SettingsTable td:nth-child(1) {
        width: 110px;
        border-bottom: 1px solid #3D4450;
        border-right: 1px solid #3D4450;
        padding-left: 6px;
        font-size: 10pt;
        color: #a8b8c8;
    }

    /*value Column*/
    .SettingsTable td:nth-child(2) {
        border-bottom: 1px solid #3D4450;
        padding-left: 5px;
    }

    /* Settings Textbox */
    .SettingsTable td input[type=text] {
        width: 99%;
        border: none;
        border-bottom: 1px solid transparent;
        padding-right: 3px;
        background-color: transparent;
        color: #e2e2e8;
    }

    .SettingsTable td input[type=text]:hover {
        border-bottom-color: var(--sm-border);
    }

    /* Settings List */
    .SettingsTable td select {
        width: 99%;
        border: none;
        background-color: #3D4450;
        color: #e2e2e8;
    }

    /* Do not display x in textbox in IE */
    .SettingsTable td input::-ms-clear {
        display: none;
    }

    /* Focus ring for inputs */
    .SettingsTable select:focus {
        outline: none !important;
        box-shadow: var(--sm-focus-ring);
    }

    .SettingsTable input:focus {
        outline: none !important;
        box-shadow: var(--sm-focus-ring);
    }

    /* Align the dropdown arrow at the right */
    .SettingsTable .dropdown-toggle::after {
        float: right;
        margin-top: 10px;
    }

.ThemeMenuItems img {
    width: 20px;
    height: 20px;
    float: right;
    padding: 3px;
    opacity: .3;
    cursor: pointer;
    filter: invert(1);
}

.settings_fieldrow .dropdown-menu {
    background-color: #3D4450;
    border-color: #3D4450;
}

.settings_fieldrow .dropdown-menu .dropdown-item {
    color: #e2e2e8;
}

.settings_fieldrow .dropdown-menu .dropdown-item:hover,
.settings_fieldrow .dropdown-menu .dropdown-item:focus {
    background-color: #555D6B;
    color: #e2e2e8;
}

.ThemeMenuItems a {
    color: #e2e2e8;
}

.ThemeMenuItems a:hover,
.ThemeListRow:hover {
    background-color: #555D6B;
}

.ThemeMenuItems img:hover {
    opacity: 1;
}

.ThemeAddIcon {
    width: 19px;
    height: 19px;
    margin-left: 7px;
    margin-bottom: 3px;
    /*float:right;*/
    padding: 4px;
    cursor: pointer;
}

.ThemeListRow {
    height: 40px;
    padding-top: 5px;
    font-size: 20px;
    padding-left: var(--sm-space-sm);
    padding-right: 5px;
}

    .ThemeListRow:hover {
        background-color: #555D6B;
        cursor: default;
    }

        .ThemeListRow:hover img {
            display: block;
        }

    .ThemeListRow img {
        width: 28px;
        height: 28px;
        float: right;
        display: none;
        cursor: pointer;
    }

.ThemePanelBox {
    border-radius: var(--sm-radius-md);
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 5px;
    min-height: 250px;
    max-height: 300px;
    overflow: auto;
    background-color: white;
}

.ThemePanelFields {
    border: none;
    width: 100%;
    height: 120px;
    padding-top: 20px;
    padding-left: 3px;
    overflow: auto;
}

.EditThemeCSS {
    width: 100%;
    height: calc(100vh - 510px);
    min-height: 100px;
    padding: 10px;
    border: none;
    border-radius: var(--sm-radius-md);
}

/*#endregion*/


/*#region _____ SIDE MENU _____ */
.ToolsContainer {
    height: calc(100vh - var(--sm-toolbar-height) - 77px);
    width: calc(100% - 1px);
    overflow: auto;
    margin-top: 20px;
}

.ScrollStyle1::-webkit-scrollbar {
    width: 8px;
}

.ScrollStyle1::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 4px;
}

.ScrollStyle1::-webkit-scrollbar-track {
    background: #222222;
    border-radius: 4px;
}


.helpicon {
    z-index: 4;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    opacity: .1;
    cursor: pointer;
}

    .helpicon:hover {
        opacity: 1;
    }


#EditMenuButtons {
    position: relative;
    padding-top: 8px;
    padding-bottom: 8px;
    background: linear-gradient(135deg, #1E3B52 0%, #2a4d68 100%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);
}

#divContentsButtons .sm-add-btn,
#divContentsButtons .sm-delete-btn,
#divContentsButtons .sm-settings-btn {
    width: 24px;
    height: 24px;
}

#btnSaveContents {
    background: #5E9A6F;
    color: #fff;
    border: none;
}

#btnSaveContents:hover {
    background: #4E8A5F;
}

#btnCancelContents {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border: none;
}

#btnCancelContents:hover {
    background: rgba(255,255,255,0.18);
}

#btnEditContents {
    float: right;
    margin-right: 62px;
    margin-top: 8px;
    padding: 5px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background: rgba(0, 0, 0, 0.15) !important;
    color: #e2e2e8 !important;
    font-size: 13px;
    font-weight: 500;
}

.AddPageIcon {
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.MovePageIcon {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#imgShowPageInfo {
    cursor: pointer;
    width: 24px;
    height: 24px;
    /*float:right;*/
    margin-top:10px;
    margin-left:10px;
}

#menutree {
    padding-left: var(--sm-space-lg);
    padding-bottom: var(--sm-space-md);
}

.fancytree-container {
    background-color: transparent !important;
    border: none !important;
    outline: none;
}

ul.fancytree-container li {
    overflow: hidden !important;
}

ul.fancytree-container {
    overflow: hidden !important;
}

    ul.fancytree-container ul {
        padding: 0 0 0 36px !important;
    }

.fancytree-treefocus span.fancytree-focused span.fancytree-title {
    border: 1px solid transparent !important;
}

.fancytree-node {
    height: 35px !important;
    border-radius: var(--sm-radius-sm);
    transition: background-color 0.12s ease;
    border-left: 3px solid transparent;
    padding-top: 6px !important;
}

    .fancytree-node:hover {
        background-color: rgba(255,255,255,0.05);
    }

    .fancytree-node:hover .fancytree-icon {
        opacity: .8;
    }

/*Set font styles for contents text*/
#menutree .fancytree-title {
    font-family: 'Segoe UI', Arial;
    /*color: #222222 !important;*/
    color: #ffffff;
    font-size: 16px;
    margin-left: 7px !important;
    padding-right: 30px !important;
    line-height: 21px;
    /*opacity:.8;*/
}

/*Increase the icon size from 16 to 20*/
.fancytree-icon {
    width: 18px !important;
    height: 18px !important;
    opacity:.55;
    transition: opacity 0.12s ease;
}

/*Set icon to greyscale for menutree */
#menutree .fancytree-icon {
    /*filter: grayscale(100%);*/
    /*opacity: .4;*/
}


#fancytree-drop-marker, span.fancytree-checkbox, span.fancytree-drag-helper-img, span.fancytree-empty, span.fancytree-expander, span.fancytree-icon, span.fancytree-vline {
    background-image: url(../_engine/jquery/icons.gif);
}

.fancytree-node:hover .fancytree-title {
    background: none !important;
    border: 1px solid transparent !important;
    /*color: #4285f4 !important*/
    /*color: #FFFFFF !important*/
    opacity:.8;

}

.fancytree-node:hover .fancytree-icon {
    /*filter: none !important;*/
    /*opacity: 1;*/
}

.fancytree-active .fancytree-title, .fancytree-selected .fancytree-title {
    background: none !important;
    border: 1px solid transparent !important;
    color: #A8CAE0 !important;
}

.fancytree-active, .fancytree-selected {
    background-color: rgba(255,255,255,0.08) !important;
    border-left: 3px solid #7AA5C5;
}

.fancytree-active .fancytree-icon, .fancytree-selected .fancytree-icon {
    /*filter: none !important;*/
    opacity: 1 !important;
}

/* There is a bug that causes two different nodes to be highlighted due to .fancytree-focused and .fancytree-active. To workaround this bug, set the focused style to the same as the normal node style. */
.fancytree-focused .fancytree-title {
    background: none !important;
    border: 1px solid transparent !important;
    color: #666666
}

.fancytree-focused .fancytree-icon {
    /*/*filter: none !important*/*/
}

/*#endregion*/


/*#region _____ MEDIA _____ */

/*-------Apply these styles when the browser width is small*/
@media only screen and (max-width: 700px) {
    /*.ProfileName {
        display: none
    }*/

    /*Position the toolbar buttons below the toolbar*/
    #divToolbarButtons {
        top: calc(var(--sm-toolbar-height) + 2px);
        right:12px;
        z-index:4;
    }

/*    #imgProfileIcon {
        position: fixed;
        top: 7px;
        right: 12px;
    }

    #divLoginButton {
        position: fixed;
        top: 7px;
        right: 12px;
    }*/

    /* Hide the edit panel toggles */
    .EditPanelToggle { display:none!important }

    /* Hide the login as admin message */
    #divLoginAsAdmin {
        display:none;
    }

    #divFloorlabel {
        display: none !important
    }

    #divSearchContainer {
        width: calc(100vw - 110px) !important;
    }

    #divCustomHeaderHTML {
        display: none
    }

    #spanEditPanelHeading {
        display: none;
        background-color: yellow;
    }

    .LoginAsAdmin {
        display: none
    }

    .ShowBookingsForLabel {
        display: none
    }
    .DetailFormPicWrapper img {
        width: 120px!important;
        height: 120px!important;
    }

    #imgAssetFormPic {
        max-width: 120px;
        margin-left: auto;
        margin-right: auto;
    }

    .box_content {
        min-width: 305px;
    }
}

@media screen and (max-height: 700px) {
    #imgAssetFormPic {
        max-width: 120px;
        margin-left: auto;
        margin-right: auto;
    }
    .DetailFormPicWrapper img {
        width: 120px !important;
        height: 120px !important;
    }
}

/* Styles for printing floors */
#divPrintFloorsContainer {
    width: 100%
}

    #divPrintFloorsContainer img {
        width: 200px;
        max-height: 100%;
        max-width: 100%;
        display: block;
        page-break-after: always
    }

/*Hide the toolbar and zoom buttons when printing*/
@media print {
    html, body {
        height: 100%;
    }

    #divPrintFloorsContainer {
        height: 100%;
        width: auto !important;
    }

        #divPrintFloorsContainer div {
            display: none
        }

        #divPrintFloorsContainer img {
            width: auto !important
        }

    #imgProfileIcon {
        display: none
    }

    #divMainToolBar {
        display: none;
    }

    .ZoomButtons_Floorplan {
        display: none
    }
}

/*#endregion*/


/*#region _____ LIST _____ */

/* format the search box for all datatables */
.dataTables_filter label {
    font-family: 'Segoe UI', Arial;
    color: #e2e2e8;
}

    .dataTables_filter label input {
        border: 1px solid #555D6B;
        padding: 6px 10px;
        border-radius: var(--sm-radius-md);
        margin-right: 10px;
        color: #e2e2e8;
        background-color: #3D4450;
        font-size: 14px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .dataTables_filter label input:focus {
        outline: none;
        border-color: var(--sm-primary);
        box-shadow: var(--sm-focus-ring);
    }

/* Any Popup list - hide row count list */
#divPopupDialog_Content .dataTables_wrapper .dataTables_length {
    display: none
}

/* Popup desk list - Hide footer on  */
#tblBookingDeskList_info {
    display: none
}

#tblBookingDeskList_paginate {
    display: none
}

/* Popup Desk List - select floor list */
#lstBookingFloors {
    border: none;
    margin-top: 5px;
    font-size: 20px;
}

/* Popup employee list - Hide footer on  */
#tblBookingEmpList_info,
#tblBookingEmpList_paginate {
    font-family: 'Segoe UI', Arial;
    color: #888888;
}


/* Fix so that line under first column heading extends 100% */
.dataTables_scrollHeadInner {
    width: auto !important
}

    .dataTables_scrollHeadInner .dataTable {
        width: 100% !important
    }

/* List header icon */
.ListHeadingIcon {
    width: 26px;
    height: 26px;
    vertical-align: middle;
}

.StaffmapList {
    font-family: 'Segoe UI', Arial;
}

    /* Option G — Pill-style drag icons with tooltip flyout */
    .StaffmapList tbody tr td .dragpanel {
        height: 20px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        border-radius: 10px;
        opacity: 0.85;
        cursor: grab;
        font-size: 10px;
        font-weight: 600;
        background: #3a8ee8;
        color: #fff;
        position: relative;
    }

    .StaffmapList tbody tr td .dragpanel.onMap {
        background: #2ecc71;
    }

    .StaffmapList tbody tr td .dragpanel.onFloor {
        background: #2ecc71;
    }

    .StaffmapList tbody tr:hover td .dragpanel {
        opacity: 1;
    }
    .StaffmapList tbody tr td .dragpanel::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + 6px);
        right: 0;
        background: #1a1a1e;
        color: #e2e2e8;
        font-size: 11px;
        font-weight: 500;
        padding: 4px 10px;
        border-radius: 6px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.15s, transform 0.15s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        z-index: 100;
    }
    .StaffmapList tbody tr td .dragpanel::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 2px);
        right: 6px;
        border: 4px solid transparent;
        border-top-color: #1a1a1e;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s;
        z-index: 100;
    }
    .StaffmapList tbody tr:hover td .dragpanel::after,
    .StaffmapList tbody tr:hover td .dragpanel::before {
        opacity: 1;
        transform: translateY(0);
    }

/* Set list content to avoid wrapping */
#divListBody {
    white-space: nowrap
}

    #divListBody .dataTables_wrapper .dataTables_length {
        display: none
    }

    #divListBody .dataTables_wrapper .dataTables_filter {
        display: none
    }

    #divListBody .dataTables_wrapper .dataTables_info .select-info {
        display: none
    }

    #divListBody .dataTables_wrapper .dataTables_info {
        font-size: 11px;
        margin-left: 4px;
        float: left !important;
        color: #8090a4;
    }

    #divListBody .dataTables_wrapper .dataTables_paginate {
        font-size: 11px;
        float: right !important;
        margin-top: 0px !important;
        color: #8090a4;
    }

        #divListBody .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding-left: 6px !important;
            padding-right: 6px !important;
            color: #8090a4 !important;
        }

        #divListBody .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            color: #e2e2e8 !important;
            background: #3D4450 !important;
            border-color: #555D6B !important;
        }

    #divListBody .dataTables_wrapper .dataTables_scrollBody {
        border-bottom: 1px solid #3D4450 !important;
        background-color: #2D3138;
    }

    #divListBody .dataTables_wrapper .dataTables_scrollHead {
        background-color: #2D3138;
    }

    #divListBody .dataTable thead th {
        padding-left: 10px !important;
        border-bottom: 1px solid #3D4450 !important;
        background-color: #2D3138;
        font-size: 11px;
        font-family: 'Segoe UI', Arial;
        font-weight: 600 !important;
        color: #8090a4;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* List Row Selection */
    #divListBody .row-border tbody tr.selected {
        color: white;
        font-weight: bold;
    }

    /* Alternating row backgrounds */
    #divListBody .row-border tbody tr td {
        background-color: #2D3138 !important;
        border-top: none !important;
        cursor: pointer;
    }

    #divListBody .row-border tbody tr:nth-child(even) td {
        background-color: #303036 !important;
    }

    #divListBody .row-border tbody tr {
        transition: background-color 0.1s ease;
        color: #e2e2e8;
    }

    #divListBody .row-border tbody tr:hover td {
        background-color: #3D4450 !important;
    }

        #divListBody .row-border tbody tr td:nth-child(1) {
            padding-left: 10px !important;
        }

.ListTextLink:hover {
    color:#0094ff;
}

/* Rightmost list column that shows floor or map icon */
#mapcolumn {
    width: 16px;
    padding-right: 10px !important;
}

/* Map Icon */
.ListStaticIcon {
    height: 18px;
    filter: invert(1);
}

.ListMapIcon {
    height: 18px;
    opacity: .45;
    cursor: pointer;
    filter: invert(1);
}

    .ListMapIcon:hover {
        opacity: 1;
    }

/* Report — dark mode */
#divReportRecords {
    margin-top: var(--sm-space-lg);
}
    #divReportRecords .row-border tbody tr td {
        border-top: 1px solid #3c3c42;
        padding-top: var(--sm-space-xs);
        padding-bottom: var(--sm-space-xs);
        color: #e2e2e8;
    }

    #divReportRecords .row-border tbody tr:hover td {
        background-color: #3a3a40;
    }

    #divReportRecords .row-border th {
        padding-bottom: 10px;
        color: #a8b8c8;
        border-bottom: 1px solid #3c3c42;
    }

    #divReportRecords .dataTables_wrapper .dataTables_filter label {
        color: #a8b8c8;
    }

    #divReportRecords .dataTables_wrapper .dataTables_filter label input {
        background-color: #38383e;
        color: #e2e2e8;
        border: 1px solid #555D6B;
    }

    #divReportRecords .dataTables_wrapper .dataTables_info {
        color: #a8b8c8;
    }

    #divReportRecords .dataTables_wrapper .dataTables_length {
        color: #a8b8c8;
    }

    #divReportRecords .dataTables_wrapper .dataTables_length select {
        background-color: #38383e;
        color: #e2e2e8;
        border: 1px solid #555D6B;
    }

    #divReportRecords .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: #a8b8c8 !important;
    }

    #divReportRecords .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #3a3a40;
        border-color: #555D6B;
        color: #e2e2e8 !important;
    }

    #divReportRecords .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #4A7FA5;
        border-color: #4A7FA5;
        color: #fff !important;
    }

/*#endregion*/


/*#region _____ REPORT _____ */

#spanReportHeader {
    font-size: 30px;
    font-family: 'Segoe UI', Arial;
    color: #e2e2e8;
}

.ReportHeader {
    color: #e2e2e8;
}

#divSystemReportList {
    padding: var(--sm-space-xl);
    overflow: auto;
    height: calc(100vh - 100px)
}

.SystemReportCategory {
    font-family: 'Segoe UI', Arial;
    font-size: 18px !important;
    color: #ECEEF1;
    margin-top: 20px;
}

.SystemReportLink {
    font-family: 'Segoe UI', Arial;
    cursor: pointer;
    color: #7AA5C5;
    padding-top: 3px;
    padding-bottom: 3px;
}

.SystemReportLink:hover {
    color: #A8CAE0;
}

/* Unused Images */
.UnusedImage {
    max-height: 24px;
    max-width: 24px;
    margin-right: 10px;
    margin-left: 10px;
}

.UnusedImageRow {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #3c3c42;
    font-family: 'Segoe UI',Arial;
    font-size: 11pt;
    color: #e2e2e8;
}


/* Activity Log — dark mode */
.LogContainer {
    width: 100%;
    height: calc(100vh - 258px);
    overflow: auto;
}

.LogTable {
    width: 100%;
    font-family: 'Segoe UI Light', 'Segoe UI', Arial;
    font-size: 14px;
    color: #e2e2e8;
}

    .LogTable tr {
        border-bottom: 1px solid #3c3c42;
        height: 35px;
    }

    .LogTable tr:first-child {
        border-bottom: 1px solid #555D6B;
    }

    .LogTable td:nth-child(1) {
        color: #e2e2e8;
    }

    .LogTable td:nth-child(3) input {
        width: 100%;
        border: none;
        padding: 5px;
        background-color: #38383e;
        color: #e2e2e8;
        border: 1px solid #3c3c42;
    }

    .LogTable td:nth-child(3) input:focus {
        border-color: #6a7aaa;
        outline: none;
    }

    .LogTable input[type=checkbox] {
        accent-color: var(--sm-primary);
    }

.LogSMTPSettings {
    width: calc(100% - 10px);
    font-family: 'Segoe UI Light', 'Segoe UI', Arial;
    font-size: 13px;
    color: #a8b8c8;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .LogSMTPSettings input[type=text],
    .LogSMTPSettings input[type=password] {
        width: 100%;
        padding: 4px;
        margin-bottom: 15px;
        margin-top: 3px;
        background-color: #38383e;
        color: #e2e2e8;
        border: 1px solid #555D6B;
    }

    .LogSMTPSettings input[type=text]:focus,
    .LogSMTPSettings input[type=password]:focus {
        border-color: #6a7aaa;
        outline: none;
    }

    .LogSMTPSettings input[type=checkbox] {
        display: block;
        margin-left: 2px;
        accent-color: var(--sm-primary);
    }

.LogTableMsg {
    font-family: 'Segoe UI Light', 'Segoe UI', Arial;
    font-size: 14px;
    color: #a8b8c8;
    margin-top: 10px;
    margin-bottom: 15px;
}


/* Export to PDF & Print Floor */
#divExportFloors .checkbox {
    border-bottom: 1px solid #3D4450;
}

#divExportFloors label {
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 17px;
    line-height: 17px;
    color: #e2e2e8;
}

/* Heading displayed when exporting floorplan to JPG */
.PrintFloorsHeading {
    width: 100%;
    padding: 10px;
    color: #e2e2e8;
    font-family: 'Segoe UI', Arial;
    font-size: 16px;
    border-bottom: 1px solid #3D4450;
}

    .PrintFloorsHeading div {
        margin-right: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }


/*#endregion*/


/*#region _____ DETAIL FORM _____ */

.DetailFormHeading {
    display: inline-block;
    margin-right: var(--sm-space-sm);
    margin-left: 5px;
    font-family: Tahoma, Arial;
    font-weight: bold;
    font-size: 13pt;
   /* max-width:180px;*/
    /*white-space:nowrap;*/
    /*overflow:hidden;*/
    /*text-overflow: ellipsis;*/
    /*vertical-align:middle;*/
    vertical-align:top;
}

/* Scrollable wrapper on Detail form */
#divDetailFormBody {
    height: calc(100vh - var(--sm-toolbar-height));
    overflow: auto;
    background-color: #2D3138;
    color: #e2e2e8;
}

    /* Chrome Detail form Scrollbar  */
    #divDetailFormBody::-webkit-scrollbar {
        background-color: transparent;
        width: 6px;
    }

    #divDetailFormBody::-webkit-scrollbar-thumb {
        background-color: #4c4c56;
    }

/* Detail Form Heading Buttons */
#divDetailFormButtons {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    margin-bottom: 8px;
    margin-left: 10px;
    margin-right: 48px;
}

/* Remove extra margins pill buttons and standard buttons carry — gap handles spacing */
#divDetailFormButtons .sm-pill-btn {
    margin-left: 0;
}

#divDetailFormButtons button {
    margin-right: 0 !important;
}

    /* Detail Form AddPic, DelPic icons */
    #divDetailFormButtons img {
        width: 28px;
        height: 28px;
        cursor: pointer;
    }

/* Shared base for floating action icon circles */
.sm-icon-circle,
.sm-edit-btn,
.sm-delete-btn,
.sm-add-btn,
.sm-autosize-btn,
.sm-align-btn,
.sm-move-btn,
.sm-settings-btn,
.sm-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

/* Dark semi-transparent circle — copy-link etc. */
.sm-icon-circle {
    background: rgba(0, 0, 0, 0.50);
    color: #ffffff;
}

.sm-icon-circle:hover {
    background: rgba(0, 0, 0, 0.70);
}

/* Blue circle — edit button */
.sm-edit-btn {
    background: #1a6fcf;
}

.sm-edit-btn:hover {
    background: #1560b5;
}

/* Danger red circle — delete button */
.sm-delete-btn {
    background: #C0453A;
}

.sm-delete-btn:hover {
    background: #A83B31;
}

/* Sage green circle — add button */
.sm-add-btn {
    background: #5E9A6F;
}

.sm-add-btn:hover {
    background: #4E8A5F;
}

/* Pill-shaped action buttons (icon + label) */
.sm-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin-left: 5px;
    transition: background-color 0.15s ease;
    vertical-align: middle;
}

.sm-pill-add {
    background: #5E9A6F;
}

.sm-pill-add:hover {
    background: #4E8A5F;
}

.sm-pill-delete {
    background: #C0453A;
}

.sm-pill-delete:hover {
    background: #A83B31;
}

/* Grey circle — search button */
.sm-search-btn {
    background: #5a5a64;
}

.sm-search-btn:hover {
    background: #6a6a74;
}

/* Teal circle — auto size button */
.sm-autosize-btn {
    background: #4A9A8A;
}

.sm-autosize-btn:hover {
    background: #3D8878;
}

/* Logo blue circle — picture alignment button */
.sm-align-btn {
    background: #4A7FA5;
}

.sm-align-btn:hover {
    background: #3D6B8E;
}

/* Dark circle — move/arrow buttons (nav d-pad) */
.sm-move-btn {
    background: rgba(0, 0, 0, 0.25);
    width: 18px;
    height: 18px;
}

.sm-move-btn:hover {
    background: rgba(0, 0, 0, 0.40);
}

/* Frosted glass circle — settings/gear button */
.sm-settings-btn {
    background: rgba(255,255,255,0.12);
}

.sm-settings-btn:hover {
    background: rgba(255,255,255,0.22);
}

    .DetailFormPicWrapper img {
        display: block;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

.DetailFormFields_Live, .DetailFormFields_Edit {
    width: 100%;
}

    /* row */
    .fieldrow {
        border-bottom: 1px solid #3D4450;
        margin-left: var(--sm-space-lg);
        margin-right: var(--sm-space-lg);
        padding-top: var(--sm-space-sm);
        padding-bottom: var(--sm-space-sm);
    }

    .DetailFormFields_Edit .deticon .imgdropdown {
        margin-top:10px;
    }


    /* Field Label (edit & live mode)*/
    .fieldrow .fldLabel {
        font-size: 9px;
        font-family: verdana;
        /*color: #6eb579;*/
        color: #8090a4;
        text-transform: uppercase;
        cursor: default;
    }

     /* Field Label Icon (edit & live mode)*/
    .fieldrow .fldLabel_icon {
        width: 32px;
        margin-top: 3px;
        margin-bottom: 3px;
        margin-right: 10px;
    }

    /*Field Value (edit & live mode)*/
.fieldrow .fldValue {
    display: inline-block;
    /*font-family: 'Segoe UI', Arial;*/
    font-family: 'Segoe UI', Arial;
    font-size: 16px;
    color: #e2e2e8;
}

     /*Set field value width to 100% if no icon*/ 
    .fieldrow:not(.deticon) .fldValue {
        width: 100%;
    }

    /*Set field value width to 100% if no icon*/
    .fieldrow.deticon .fldValue {
        width: calc(100% - 42px);
    }

    /* Don't apply width to booking date value because the 'weekly' button would cause wrapping */
    .fieldrow.deticon[row_fieldname='Date'] .fldValue {
        width:auto;
    }


    .bgdropdown {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b8c8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center right 6px;
        background-size: 12px;
        width: 100%;
        min-height: 20px;
        cursor: pointer;
    }

.imgdropdown {
    /* dropdown arrow icon */
    width: 20px;
    height: 20px;
    padding-right: 4px;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: pointer;
    float: right;
    margin-right: 2px;
    vertical-align: middle;
    color: #a8b8c8;
}

#divFieldList .fieldproprow .fieldarrow {
    color: #a8b8c8;
}

/* Textbox */
.DetailFormFields_Edit .fieldrow .fldValue input[type=text] {
    width: 99%;
    border: none;
    border-bottom: 1px solid transparent;
    padding-right: 3px;
    padding-left: 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    color: #e2e2e8;
}

.DetailFormFields_Edit .fieldrow .fldValue input[type=text]:hover {
    border-bottom-color: #5a5a68;
}

/* Textarea */
.DetailFormFields_Edit .fieldrow .fldValue textarea {
    width: 99%;
    border: none;
    border-bottom: 1px solid transparent;
    height: 75px;
    padding-top: 4px;
    background-color: transparent;
    color: #e2e2e8;
}

.DetailFormFields_Edit .fieldrow .fldValue textarea:hover {
    border-bottom-color: #5a5a68;
}

/* Password Textbox */
.DetailFormFields_Edit .fieldrow .fldValue input[type=password] {
    width: 99%;
    border: none;
    border-bottom: 1px solid transparent;
    padding-right: 3px;
    background-color: transparent;
    color: #e2e2e8;
}

.DetailFormFields_Edit .fieldrow .fldValue input[type=password]:hover {
    border-bottom-color: #5a5a68;
}

/* List */
.DetailFormFields_Edit .fieldrow .fldValue select {
    width: 99%;
    border: none;
    margin-left:-3px;
    /*min-width:100px;*/
    background-color: #3D4450;
    color: #e2e2e8;
}

/* Checkbox */
.fieldCheckMark {
    width: 16px;
    height: 16px;
    margin-bottom: 2px;
    filter: invert(1);
}

/* Date */
.DetailFormFields_Edit .fieldrow .fldValue #DetailFormBookingDate {
    cursor: pointer;
    background: #38383e;
    border: 1px solid #555D6B;
    border-radius: 6px;
    padding: 6px 10px;
    display: inline-block;
    transition: border-color 0.15s ease;
}

.DetailFormFields_Edit .fieldrow .fldValue #DetailFormBookingDate:hover {
    border-color: #4A7FA5;
}

/* Field Locked */
.FieldLocked {
    color: #667788;
}

/* Do not display x in textbox in IE */
.DetailFormFields_Edit .fieldrow .fldValue input::-ms-clear {
    display: none;
}

/* Focus ring for inputs */
.DetailFormFields_Edit .fieldrow .fldValue select:focus {
    outline: none !important;
    box-shadow: var(--sm-focus-ring);
}

.DetailFormFields_Edit .fieldrow .fldValue input:focus {
    outline: none !important;
    box-shadow: var(--sm-focus-ring);
}

/* Edit Fields link */
.EditFieldsLink {
    display: inline-block;
    font-size: 15px;
    font-family: 'Segoe UI', Arial;
    float: right;
    cursor: pointer;
    color: cornflowerblue;
    margin-right: var(--sm-space-lg);
    margin-top: 5px;
}

    .EditFieldsLink:hover {
        text-decoration: underline
    }

.CustomHTML {
    font-size: 25px;
    font-family: 'Segoe UI', Arial;
    color: #e2e2e8;
    margin-left: var(--sm-space-lg);
    margin-top: var(--sm-space-md);
    margin-bottom: var(--sm-space-md);
}

.BookingWeekly_False {
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: var(--sm-space-sm);
    padding-right: var(--sm-space-sm);
    color: #a8b8c8;
    font-size: 12px;
    float: right;
    display: inline-block;
    border: 1px solid #555D6B;
    border-radius: var(--sm-radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .BookingWeekly_False:hover {
        background-color: #3a3a40;
    }

.BookingWeekly_True {
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: var(--sm-space-sm);
    padding-right: var(--sm-space-sm);
    color: white;
    font-size: 12px;
    float: right;
    display: inline-block;
    background-color: #3f884c;
    border-radius: var(--sm-radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .BookingWeekly_True:hover {
        background-color: #5ba768;
    }



.BookingRecurWeekdays {
    font-size: 12px;
    color: #a8b8c8;
    font-family: 'Segoe UI', Arial;
    display: inline-block;
}

    .BookingRecurWeekdays div {
        display: inline-block;
        margin-right: 3px;
        width: 24px;
        padding-top: 2px;
        padding-bottom: 2px;
        text-align: center;
        border-radius: 4px;
    }

        .BookingRecurWeekdays div:hover {
            background-color: #555D6B;
            color: #e2e2e8;
            cursor: pointer;
        }

.BookingRecurDay_selected {
    background-color: #4A7FA5 !important;
    color: white !important;
}

/* Recurrence options (pattern type, start/end dates) */
.BookingRecurOptions {
    font-size: 12px;
    color: #a8b8c8;
    font-family: 'Segoe UI', Arial;
    margin-top: 4px;
}
.BookingRecurOptions label {
    font-size: 12px;
    color: #b0c4d4;
    display: inline-block;
    width: 50px;
}
.BookingRecurOptions select {
    background: #38383e;
    color: #e2e2e8;
    border: 1px solid #555D6B;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
}

.branchFloorRow {
    margin-top:4px;
    margin-bottom:7px;
}

/*#endregion*/


/*#region _____ EDIT FIELDS _____ */
.FieldIcons {
    padding-left: var(--sm-space-lg);
    padding-right: var(--sm-space-lg);
    margin-top: var(--sm-space-md);
    cursor: pointer;
}

#lstFieldsCategory {
    background-color: #3D4450;
    color: #e2e2e8;
    border: 1px solid #555D6B;
    border-radius: 3px;
    padding: 2px 4px;
}

.FieldPropIcon {
    width: 22px;
    height: 22px;
    margin-right: 2px;
}

#divFieldListWrapper {
    border-top: 1px solid #3D4450;
    height: calc(100vh - 95px - var(--sm-toolbar-height));
    overflow: auto;
    background-color: #2D3138;
}

#divFieldList {
    margin-bottom: 40px;
}


    #divFieldList .fieldproprow {
        width: 100%;
        border-bottom: 1px solid #3D4450;
        padding-left: var(--sm-space-md);
        padding-right: var(--sm-space-md);
        padding-top: 1px;
        padding-bottom: 1px;
    }

    #divFieldList .FieldListSelected {
        background-color: #3D4450 !important;
    }

    #divFieldList .fieldproprow .propicon {
        width: 15px;
        height: 15px;
        margin-left: 4px;
        opacity: .7;
    }

    #divFieldList .fieldproprow table {
        font-size: 11pt;
        font-family: 'Segoe UI', Arial;
        color: #e2e2e8;
        width: 100%;
    }

    #divFieldList .fieldproprow .fieldprops {
        font-size: 11pt;
        font-family: 'Segoe UI', Arial;
        color: #e2e2e8;
    }

    #divFieldList .fieldproprow .fieldtextbox {
        width: 100%;
        border: none;
        padding-left: 5px;
        text-overflow: ellipsis;
        background-color: transparent;
        color: #e2e2e8;
    }

        #divFieldList .fieldproprow .fieldtextbox:focus {
            outline: 0;
        }

    #divFieldList .fieldproprow .fieldarrow {
        width: 25px;
        height: 28px;
        padding-left: 15px;
        padding-top: 9px;
        padding-bottom: 9px;
        cursor: pointer;
    }

    #divFieldList .fieldproprow .fieldListItems {
        width: 100%;
        height: 100px;
        font-size: 13px;
        padding: 5px;
        background-color: #3D4450;
        color: #e2e2e8;
        border: 1px solid #555D6B;
        border-radius: 3px;
    }

    #divFieldList .fieldproprow .fieldListItems::placeholder { color: #6a7a8a; }

    #divFieldList .fieldproprow .fieldDefault {
        width: 100%;
        margin-top: var(--sm-space-sm);
        margin-bottom: var(--sm-space-sm);
        padding: 4px 6px;
        background-color: #3D4450;
        color: #e2e2e8;
        border: 1px solid #555D6B;
        border-radius: 3px;
    }

    #divFieldList .fieldproprow .fieldDefault::placeholder { color: #6a7a8a; }

    #divFieldList .fieldproprow .fieldAlias {
        width: 100%;
        margin-top: var(--sm-space-sm);
        margin-bottom: var(--sm-space-sm);
        padding: 4px 6px;
        background-color: #3D4450;
        color: #e2e2e8;
        border: 1px solid #555D6B;
        border-radius: 3px;
    }

    #divFieldList .fieldproprow .fieldAlias::placeholder { color: #6a7a8a; }

    #divFieldList .fieldproprow .flddatatype {
        opacity: .7;
        filter: invert(1);
    }

    #divFieldList .fieldproprow .fldnewfieldtype {
        border: 1px solid darkorange;
        border-radius: var(--sm-radius-sm);
        background-color: transparent;
        color: darkorange;
    }

    #divFieldList input::-ms-clear {
        display: none;
    }

.fieldpropcheckbox {
    display: inline-block;
    width: 130px;
}

/* Chrome Scrollbar  */
#divFieldList::-webkit-scrollbar {
    background-color: transparent;
    width: 6px;
}

#divFieldList::-webkit-scrollbar-thumb {
    background-color: #4c4c56;
}

/*#endregion*/


/*#region _____ BOOKING FORM _____ */

.BookingFormDeleteButton {
    display: inline-block;
    font-family: 'Segoe UI', Arial;
    margin-left: var(--sm-space-lg);
    color: #e74c3c;
    font-size: 15px;
    cursor: pointer;
    float: left;
    margin-top: 5px;
}

/* Large Button on New Booking Form */
.BookingFormButton {
    background-color: var(--sm-primary);
    height: 42px;
    line-height: 42px;
    color: white;
    border-radius: var(--sm-radius-md);
    margin-left: var(--sm-space-md);
    margin-right: var(--sm-space-md);
    margin-bottom: var(--sm-space-md);
    text-align: center;
    font-size: 12pt;
    font-weight: 500;
    cursor: pointer;
    margin-top: var(--sm-space-md);
    transition: all 0.15s ease;
}

    .BookingFormButton:hover {
        background-color: var(--sm-primary-dark);
    }

.LiveBookingTime {
    font-size: 12px;
    color: #e2a84b;
    margin-left: 6px;
}

.RequestMoveSubmit {
    display: table;
    margin: 0 auto;
    width: 150px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.BookingListRow {
    font-family: 'Segoe UI', Arial;
    font-size: 13px;
    border-top: 1px solid #3D4450;
    padding: 10px var(--sm-space-lg);
    margin-left: 0;
    margin-right: 0;
    cursor: pointer;
    transition: background 0.15s;
}

    .BookingListRow:hover {
        background: #3D4450;
    }

    .BookingListRow:last-child {
        border-bottom: 1px solid #3D4450;
    }

/* Booking list row sub-elements */
.blr-date {
    font-weight: 600;
    color: #e2e2e8;
    font-size: 13px;
}
.blr-time {
    font-size: 11px;
    color: #a8b8c8;
    margin-top: 1px;
}
.blr-detail {
    color: #c8d8e8;
    margin-top: 2px;
    font-size: 12px;
}
.blr-recurrence {
    font-size: 11px;
    color: #a8b8c8;
    margin-top: 2px;
    font-style: italic;
}
.blr-empty {
    color: #7a8a9a;
    font-size: 12px;
    font-style: italic;
    padding: 12px var(--sm-space-lg);
}

/* ── Recurring booking occurrence dialog ─────────────── */
.recur-dialog {
    font-size: 13px;
    line-height: 1.6;
}
.recur-dialog-date {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #b0c4d4;
}
.recur-dialog-section {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #a8b8c8;
    margin-bottom: 6px;
    margin-top: 2px;
}
.recur-dialog-section-delete {
    margin-top: 14px;
    color: #e8827a;
}
.recur-dialog-btns {
    display: flex;
    gap: 8px;
}
.recur-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #555D6B;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    background: transparent;
    color: #e2e2e8;
}
.recur-btn:hover {
    border-color: #a8b8c8;
}
.recur-btn-edit {
    border-color: #4A90E2;
    color: #6AAFDA;
    background: rgba(26,111,207,0.1);
}
.recur-btn-edit:hover {
    background: rgba(26,111,207,0.2);
    border-color: #6AAFDA;
}
.recur-btn-delete {
    border-color: #e0a030;
    color: #e2a84b;
    background: rgba(243,156,18,0.1);
}
.recur-btn-delete:hover {
    background: rgba(243,156,18,0.2);
    border-color: #e2a84b;
}
.recur-btn-delete-series {
    border-color: #e74c3c;
    color: #e8827a;
    background: rgba(192,57,43,0.1);
}
.recur-btn-delete-series:hover {
    background: rgba(192,57,43,0.2);
    border-color: #e8827a;
}



/*#endregion*/


/*#region _____ POPUP FORM _____ */
#divPopupMsg {
    position: fixed;
    z-index: 1051;
    bottom: 0;
    width: 100%;
}

    #divPopupMsg .alert {
        margin-bottom: 5px !important;
        margin-left: 5px;
        margin-right: 5px;
    }

.PopupFormSearchIcon {
    cursor: pointer;
    width: 26px;
    height: 26px;
    margin-left: 20px;
    margin-top: 5px;
}

/* Popup list rows (employee picker, desk picker, request-for picker) */
#tblPopupEmpList tbody tr,
#tblPopupDeskList tbody tr,
#tblPopupRequestForList tbody tr {
    cursor: pointer;
}
#tblPopupEmpList tbody tr:hover td,
#tblPopupDeskList tbody tr:hover td,
#tblPopupRequestForList tbody tr:hover td {
    background-color: #3a3a40 !important;
}

#lstPopupDeskList_Floors {
    font-size: 20px;
    margin-top: 3px;
    font-family: 'Segoe UI', Arial;
    border: none;
}

/*#endregion*/


/*#region _____ PANEL _____ */

/*.FloorContainer .pnl {*/
.pnl {
    box-sizing: content-box !important;
    border-radius: var(--sm-radius-sm);
    padding: 6px;
    position: absolute;
    color: rgba(255, 255, 255, 0.9); /* required for publish pdf */
    font-family: 'Segoe UI', Arial; /* required for publish pdf */
    font-size: 9pt; /* required for publish pdf */
    line-height: normal; /* required for publish pdf */
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/*.FloorContainer .pnl:hover {*/
    .pnl:hover {
    z-index:49;
    transform: translateY(-2px);
    box-shadow: var(--sm-shadow-md);
}

/* Suppress panel hover lift while in edit mode */
body.floor-edit-mode .pnl:hover {
    transform: none;
    box-shadow: none;
}
body.floor-edit-mode .deskpanel:hover {
    z-index: 7;
}
body.floor-edit-mode .employeepanel:hover {
    z-index: 50;
}

    .pnl span {
        min-width: 6px;
        display: inline-block;
    }

/*.FloorContainer .pnl img {*/
    .pnl img {
        width: 32px;
        height: 32px;
        vertical-align: middle;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
    }

.pnl .PanelEditField:hover,
.pnl .PanelEditField:focus {
    background-color: white;
    color: #222222;
}

.pnl .PanelEditField:focus {
    outline: none;
}


    /* Show request number in panel corner  */
    .pnl[req]:before {
        content: attr(req);
        position: absolute;
        top: -2px;
        left: -2px;
        height: 12px;
        min-width: 12px;
        padding-top: 1px;
        padding-left:3px;
        padding-right:3px;
        background-color:dodgerblue;
        color:white;
        font-family:Arial;
        font-size:9px;
        text-align:center;
        border-radius: 6px;
    }


/* Teams Presence dot on employee panels */
.pnl.employeepanel[data-presence]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.9);
    z-index: 2;
}
.pnl.employeepanel[data-presence="Available"]::after { background: #2ecc71; }
.pnl.employeepanel[data-presence="AvailableIdle"]::after { background: #2ecc71; opacity: 0.7; }
.pnl.employeepanel[data-presence="Busy"]::after { background: #e74c3c; }
.pnl.employeepanel[data-presence="BusyIdle"]::after { background: #e74c3c; opacity: 0.7; }
.pnl.employeepanel[data-presence="DoNotDisturb"]::after { background: #e74c3c; }
.pnl.employeepanel[data-presence="Away"]::after { background: #f39c12; }
.pnl.employeepanel[data-presence="BeRightBack"]::after { background: #f39c12; }
.pnl.employeepanel[data-presence="Offline"]::after { background: #95a5a6; }
.pnl.employeepanel[data-presence="PresenceUnknown"]::after { background: #95a5a6; }

/* Pulse animation for Available */
.pnl.employeepanel[data-presence="Available"]::after {
    animation: presence-pulse 2s ease-in-out infinite;
}
@keyframes presence-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(46, 204, 113, 0); }
}

/* Teams action buttons in detail flyout */
.sm-teams-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    background: #464775;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.sm-teams-btn:hover {
    background: #5b5fc7;
    color: #fff;
    text-decoration: none;
}

.employeepanel img,
.bookingpanel img {
    float: left;
    border-radius: 16px;    /* circular — profile photos */
}

.deskpanel img {
    float: left;
    border-radius: 5px;     /* rounded-square — desk icon, not a face */
}

/* Assigned desk: amber dotted border around the whole panel */
.deskassigned {
    border: 2px dotted #f39c12 !important;
}

.employeepanel_assigned {
    background-image: url(../_engine/images/chair.png);
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: left top;
}

/* Desk drop target indicators during employee drag */
.desk-drop-available {
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.8) !important;
}
.desk-drop-warning {
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.8) !important;
}
.desk-drop-unavailable {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.8) !important;
}

/* Brief green pulse when employee is assigned to a desk via drag-drop */
.desk-assign-flash {
    animation: deskAssignFlash 1.2s ease-out;
}
@keyframes deskAssignFlash {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    30% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.panel_addimage {
    position: absolute;
    top: -4px;
    right: 0px;
    width: 10px;
    height: 10px;
    background-image: url(../_engine/images/image2.png);
    background-size: 10px;
    background-repeat: no-repeat;
    cursor:pointer;
}

.employeepanel_template,
.deskpanel_template,
.assetpanel_template {
    display: none
}

.employeepanel {
    z-index: 9;
}

.deskpanel {
    z-index: 7;
    color: rgba(0, 0, 0, 0.82);
    background: #DFE2E6;
    box-shadow: var(--sm-shadow-sm);
}

    /* Blue dashed border for bookable desks (Option 1 — Color Language) */
    .deskpanel[canbook="true"] {
        border: 1.5px dashed #4a90e2;
    }
    .deskpanel[canbook="true"] img {
        border: none;
    }

    .deskbooked {
        overflow: hidden;       /* clips hatch pattern to the panel's border-radius */
        border: 1.5px solid rgba(39, 174, 96, 0.5);
    }

    /* Diagonal hatch overlay */
    .deskbooked::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            -45deg,
            rgba(39, 174, 96, 0.13) 0px,
            rgba(39, 174, 96, 0.13) 3px,
            transparent 3px,
            transparent 11px
        );
        pointer-events: none;
        border-radius: inherit;
        z-index: 0;
    }

    /* "Booked" corner badge */
    .deskbooked::after {
        content: 'Booked';
        position: absolute;
        top: 3px;
        right: 4px;
        background: #1a4a2a;
        color: #4ade80;
        font-size: 8px;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 3px;
        line-height: 14px;
        pointer-events: none;
        z-index: 1;
    }

    .deskbooked img {
        float: left;            /* same layout as desk panel icon */
        border-radius: 50%;     /* circular for person photos */
        border: none;           /* replaced by panel-level border above */
        object-fit: cover;
    }

    /* Multiple-booking calendar SVG icon */
    .deskbooked .multi-booking-icon {
        float: left;
        border-radius: 50%;
        background: rgba(26,111,207,0.35);
        padding: 3px;
        box-sizing: border-box;
        max-width: 32px;
        max-height: 32px;
    }

    .deskbooked span {
        background: none;
        position: relative;
        z-index: 1;         /* sits above hatch layer */
    }

    /* Text block beside the floated image.
       overflow:hidden creates a BFC that naturally sits next to the float
       without needing a fixed height or manual margin. */
    .deskbooked .booking-text {
        display: block;
        overflow: hidden;
        padding-left: 4px;
    }
    .deskbooked .booking-desk-name {
        display: block;
        font-weight: 600;
        font-size: 0.82em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .deskbooked .booking-emp-name {
        display: block;
        opacity: 0.7;
        font-size: 0.82em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Multi-booked desk — amber colour language ───────────────────── */
    /* Overrides the green .deskbooked rules for desks with 2+ bookings. */
    .deskbooked.deskbookedmulti {
        border-color: rgba(230, 126, 34, 0.6);
    }
    .deskbooked.deskbookedmulti::before {
        background: repeating-linear-gradient(
            -45deg,
            rgba(230, 126, 34, 0.13) 0px,
            rgba(230, 126, 34, 0.13) 3px,
            transparent 3px,
            transparent 11px
        );
    }
    .deskbooked.deskbookedmulti::after {
        content: '2+ Booked';
        background: #4a2800;
        color: #fbbf24;
    }

.bookingpanel {
    z-index: 8;
}

    /* Recurring booking badge (top-right corner, replaces plain "Booked") */
    .bookingpanel[data-bookingtype="recurrence"]::after {
        content: '\21BB  Booked';
        position: absolute;
        top: 3px;
        right: 4px;
        bottom: auto;
        width: auto;
        height: auto;
        background: #1a4a2a;
        color: #4ade80;
        font-size: 8px;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 3px;
        line-height: 14px;
        font-family: inherit;
        text-align: left;
        pointer-events: none;
        z-index: 1;
    }

.assetpanel {
    z-index: 8;
    min-width: 30px;
    min-height: 30px;
    color: rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.PanelChangedFlag:before {
    position: absolute;
    top: 2px;
    left: 2px;
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #dc0909;
}


.Aligntop {
    text-align: center;
    min-height: 50px;
    min-width: 32px
}

    .Aligntop img {
        float: none !important;
    }

    .Aligntop span {
        display: block!important;
    }

.Alignright {
    text-align: right;
    min-width: 32px;
    min-height: 32px;
}

    .Alignright img {
        float: right;
        margin-left: 5px;
    }

.Alignbottom {
    text-align: center;
    min-height: 50px;
    min-width: 32px;
}

    .Alignbottom img {
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        bottom: 5px;
        left: 0px;
        right: 0px;
        float: none !important;
    }

.Alignleft {
    min-width: 32px;
    min-height: 32px;
}

    .Alignleft img {
        margin-right: 5px;
    }

.panelselected {
    background: #c0392b !important;
    box-shadow: var(--sm-shadow-sm);
    color: #ffffff;
    display: block !important;
    z-index: 10;
}

/* Desk panels have an explicit span colour in theme files (dark text on light bg).
   Override it when selected so text stays white against the red background. */
.deskpanel.panelselected span { color: #ffffff; background: none; }

.Requested_Desks img {
    height: 0px;
    width: 0px;
    background-image: url(../_engine/images/RequestedDesk.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 30px;
    padding-top: 30px;
    padding-left: 30px;
}

/* Bounce from top animation */
.bounce-in-top { animation: bounce-in-top 0.8s both; }
@keyframes bounce-in-top {
    0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; }
    38% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; }
    55% { transform: translateY(-40px); animation-timing-function: ease-in; }
    72% { transform: translateY(0); animation-timing-function: ease-out; }
    81% { transform: translateY(-15px); animation-timing-function: ease-in; }
    90% { transform: translateY(0); animation-timing-function: ease-out; }
    95% { transform: translateY(-4px); animation-timing-function: ease-in; }
    100% { transform: translateY(0); animation-timing-function: ease-out; }
}

/*#endregion*/


/*#region _____ FLOOR _____ */

.ContextMenu {
    border: 1px solid #cccccc;
    position: absolute;
}

.ContextItem {
    background-color: White;
    color: #444444;
    padding: var(--sm-space-md);
    font-family: 'Segoe UI',Arial;
}

    .ContextItem:hover {
        background-color: #eeeeee;
        cursor: pointer;
    }



/* Hide the jquery resizable handle image */
.ui-resizable-handle {
    background-image: none;
}

.DeskAssignedIcon {
    width: 12px;
    height: 12px;
    border-radius:6px;
    position: absolute;
    left: 1px;
    top: 1px;
    display: inline-block;
    background-size: 10px;
    /*background-image: url(../_engine/images/deskassignedicon.png);*/
}

#PanelContextMenu {
    position: fixed;
    display: none;
    z-index: 1000;
    background-color: white;
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-md);
    padding: var(--sm-space-sm);
    cursor: pointer;
    font-family:'Segoe UI', Arial;
    font-size: 14px;
    color:#333333;
    box-shadow: var(--sm-shadow-md);
}

    #PanelContextMenu div {
    padding:var(--sm-space-sm);

    }


    #PanelContextMenu div:hover {
        background-color:#eeeeee;
        border-radius: var(--sm-radius-sm);
    }

#divEditFloorToolbar {
    background-color: #1E2228;
    padding-left: var(--sm-space-lg);
    padding-right: var(--sm-space-lg);
    padding-top: 4px;
    padding-bottom: 8px;
    border-radius: var(--sm-radius-md);
    position: fixed;
    right: 55px;
    top: 4px;
    z-index: 16;
    min-height: 42px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}


#spanEditPanelHeading {
    font-family: 'Segoe UI', Arial;
    font-size: 20px;
    color: #008fc7;
    padding-right: 15px;
    vertical-align: top;
    margin-top: 3px;
}

.PanelEdit_Icon {
    width: 30px;
    height: 30px;
    margin-left: 6px;
    margin-right:6px;
    cursor: pointer;
}

.EditPanelDropdown {
    position: relative;
    display: inline-block;
}

.EditPanelDropdown-Content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: var(--sm-shadow-md);
    z-index: 1;
    border-radius: var(--sm-radius-md);
}

    .EditPanelDropdown-Content a {
        color: black;
        padding: var(--sm-space-md) var(--sm-space-lg);
        text-decoration: none;
        display: block;
    }

        .EditPanelDropdown-Content a:hover {
            background-color: #ddd;
        }

.EditPanelDropdown:hover .EditPanelDropdown-Content {
    display: block;
}

.EditPanelToggle {
    width: 60px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    margin-top: 3px;

}

    .EditPanelToggle .custom-switch {
        display: inline-block;
    }

.EditPanelToggleLabel {
    font-family: 'Segoe UI';
    color: #8C939D;
    font-size: 11px;
    padding-right: var(--sm-space-sm);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    line-height:7px;
}

#divClosePanelEdit {
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    vertical-align: middle;
    font-weight: bold;
    transition: color 0.15s;
}

    #divClosePanelEdit:hover {
        color: #ffffff;
    }


#btnSavePanels {
    margin-left: 10px;
    margin-right: 10px;
    background: #5E9A6F;
    border-color: #5E9A6F;
}

#btnSavePanels:hover {
    background: #4E8A5F;
    border-color: #4E8A5F;
}

/* Snap-to-Grid */
#imgGridIcon.GridActive {
    background-color: #4A7FA5;
    border-radius: var(--sm-radius-sm);
}

.GridSizeActive {
    background-color: #ddd;
    font-weight: bold;
}


/*#endregion*/


/*#region _____ MAP _____ */

.GoogleMapWindow {
    width: 100%;
    height: calc(100vh - var(--sm-toolbar-height));
    top: var(--sm-toolbar-height);
    position: absolute;
    z-index: 5;
}

.cluster img {
    width: 40px;
    height: 40px;
    clip: unset;
}

#divGoogleMapWindow img[src$="employee"] {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    padding: 1px !important;
    background-color: #333333;
}

#divGoogleMapWindow img[src$="asset"] {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/*#divGoogleMapWindow img[src$="desk"] {*/
img[src$="desk"] {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: 0px 0px 1px green, 1px 1px green;
    background-color: green;
}

#divGoogleMapWindow img[src$="booking"] {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    padding: 1px !important;
    background-color: #0fbe0f;
}


.markerselected {
    border: 2px solid red !important;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: none !important;
}

.infowindowimage {
    width:30px;
    cursor:pointer;
    margin-right:3px;
     float:right;
}

.infowindowtextbox {
    width: 200px;
    background-color: #eeeeee;
    border: none;
    margin: 3px;
}

    .infowindowtextbox::-ms-clear {
        display: none;
    }

/*#endregion*/
/*#region _____ LAYERS _____ */
#divLayerList input[type="checkbox"] {
    margin-right: 5px;
    margin-top: 10px;
}

.layername {
    cursor: pointer;
}

    .layername:hover {
        text-decoration: underline
    }

.LayerDetailBody label {
    width: 65px;
}

.LayerDetailBody input[type=text],
.LayerDetailBody select,
.LayerDetailBody textarea {
    width: calc(100% - 70px);
    display: inline-block;
}

#lblLayerType {
    font-size: 1rem;
    font-weight: 400;
    display: inline-block;
}

.DeleteLayerIcon {
    width: 30px;
    height: 30px;
    cursor: pointer;
    float: right;
}

/*#endregion*/

.reqlistimg {
    width: 12px;
    transition: transform 0.15s ease;
}