ul.sidenav.sidenav-fixed {
    overflow: auto;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-right: 1px solid rgba(0, 0, 0, 0.14)
}

header {
    padding-left: 300px;
}

main {
    padding-left: 350px;
}



@media only screen and (max-width : 992px) {
    header, main, footer {
        padding-left: 0;
    }
}

h1 {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-weight: 300;
    margin: 0px;
    padding-top: 16px;
    padding-bottom: 14px;
}

nav {
    -webkit-box-shadow: none;
    box-shadow: none;
}



.sidenav .collapsible-header, .sidenav.fixed .collapsible-header {
    padding-left: 32px;
}


.tabs .indicator {
}

.tabs .tab a.active {

}

.tabs .tab a:hover {

}

.tabs .tab a {
}

div .modal-content {
    padding-bottom: 0px !important;
    margin-bottom: 0px;
}


#tab_content_1, #tab_content_3{
    padding-left: 20px;
}

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

.hard_left {
    padding-left: 0px !important;
    margin-left: 0px !important;
    left: 0px !important;
}

.hard_left label {
    padding-left: 0px !important;
    margin-left: 0px !important;
    left: 0px !important;
}

html, body {
    height:100%;
}

.edit_screen_btn, .delete_screen_btn, .clickable {
    z-index: 10;
    cursor: pointer;
}

.screen_name, .screen_address {
    z-index: 10;
    cursor: pointer;
}

.title1 {
    cursor: pointer;
}

.name {
    cursor: pointer;
}

.grey_border {
    border: 1px solid #E0E0E0;
}

.modal.modal-fixed-footer .modal-content {
    /*
    This is needed for date picker popups in modals, (like the event popup)
     */
    position: relative !important;
}

.delete_event_btn, .edit_event_btn {
    z-index: 10;
    cursor: pointer;
}

.switch label input[type=checkbox]:checked+.lever {
    background-color: #ffccbc;
}

.switch label input[type=checkbox]:checked+.lever:after {
    background-color: #ff7043;
}

.delete_room_btn, .edit_room_btn, .delete_foyer_btn,  .edit_foyer_btn, .edit_foyer_rooms_btn{
    z-index: 10;
    cursor: pointer;
}


.select-dropdown{
    overflow-y: auto !important;
}

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

.link {
    cursor: pointer;
}

#tbody {
    cursor: pointer;
}

.dual-listbox .dual-listbox__search {
    padding: 0px !important;
    padding-left: 10px !important;
}

.dual-listbox .dual-listbox__button {
}

#preview_img {
    display: none;
}

#screensavers_tbody {
    cursor: pointer;
}

#universal_forms_tbody {
    cursor: pointer;
}

.asset:hover {

    text-decoration: underline;
}

#add_universal_form_modal {
    width: 600px;
    height: 400px;
}

.cursor-pointer {
    cursor: pointer;
}

/* for google palces api auto complete list */
.pac-container {
    z-index: 10000000 !important;
}
/* end */



.chart-container {
    position: relative;
    margin-bottom: 32px;
}

.chart-legend li span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    list-style: none;
}

li.clean {
    font-size: 15px;
    line-height: 1.6;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

li:last-child.clean{
    border: none;
}

li.clean a {
    display: block;
    padding: 4px 0;
    color: rgba(0, 0, 0, 0.87);
    text-decoration: none;
    transition: color 150ms ease-out;
}

li.clean a:hover {
    color: #bf360c;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tab-content {
    margin-top: 15px;
}

.pagination li.active {
    background-color: #ff7043 !important;
    border-radius: 4px;
}


.screen-preview-landscape {
    width: calc(100%);
    height: calc(100%);
    background-color: transparent;
    position: relative;
    top: 0px;
    left: 0px;
    background-size: cover;
}

.screen-preview-portrait {
    width: calc(100vw - 450px);
    height: calc(100vh - 200px);
    background-color: transparent;
    position: relative;
    top: 0px;
    left: 0px;
    background-size: cover;
}

#screen-preview {
    overflow: hidden;
}

.content {
    position: relative;
    float: left;
    width: calc(100%);
    height: 100%;
    min-width: 900px;
    left: -20px;
}


#right_side_container, #fancyTree_tenantTableContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: 0em;
}


.float-right {
    float: right;
}

.collection-item:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}


.cursor-grab {
    cursor: grab;
}

.collection {
    margin-top: 0px !important;
}







#new_tenant_tabs .indicator {
    background-color: #ff7043 !important;
}








#screen_settings_tabs .indicator {
    background-color: #ff7043 !important;
}


.fixed_header{
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
    display:block;
    width: 100%;
    overflow: auto;
    height: 200px;
}

.fixed_header thead tr {
    display: block;
}

.fixed_header tbody tr {
    width: 100%;
}

.fixed_header th, .fixed_header td {
    padding: 5px;
    text-align: left;
    width: 200px;
}

.dropdown-content li:not(.disabled) span {
    color: rgba(0, 0, 0, 0.87) !important;
}

.dropdown-content li.selected:not(.disabled) span {
    color: #bf360c !important;
}

.select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid #ff7043;
}

.btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: #f4511e !important;
}

input[type=text]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid #ff7043;
    -webkit-box-shadow: 0 1px 0 0 #ff7043;
    box-shadow: 0 1px 0 0 #ff7043;
}

input[type=text]:not(.browser-default):focus:not([readonly])+label {
    color: #ff7043;
}

input[type=password]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid #ff7043;
    -webkit-box-shadow: 0 1px 0 0 #ff7043;
    box-shadow: 0 1px 0 0 #ff7043;
}

input[type=password]:not(.browser-default):focus:not([readonly])+label {
    color: #ff7043;
}

textarea.materialize-textarea:focus:not([readonly])+label {
    color: #ff7043;
}

input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #ff7043;
    -webkit-box-shadow: 0 1px 0 0 #ff7043;
    box-shadow: 0 1px 0 0 #ff7043;
}

.collection .collection-item:active {
    background-color: #ff7043 !important;
}

.sortable-chosen {
    background-color: #ff7043 !important;
}

blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: none !important;
    border-radius: 4px;
    background-color: #fff3e0;
    color: rgba(0, 0, 0, 0.75);
}

blockquote ul {
    margin: 0;
}

.no_pointer_events {
    pointer-events: none;
}


.preview-canvas {
    position: absolute;
    z-index: -1;
    top:0px;
    border: 1px solid black !important;
}

canvas {
    top: 0px;
    display: block;
}

.settings_containers {
    width: 400px;
    padding-left: 15px;
}


iframe {
    z-index: 50;
    position: absolute;
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    iframe {
        zoom: 1;
    }
}

.iframe-active {
    box-shadow: 0 0 0 5px black;
    outline: dashed 5px white;
    resize: both;
}


[type="checkbox"].filled-in:checked+span:not(.lever):after {
    background-color: #ff7043;
    border: 2px solid #ff7043;
}
/* Screens list filters */
.header_tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.header_search {
    position: relative;
    display: flex;
    align-items: center;
    width: 240px;
}

nav .header_search i.material-icons {
    position: absolute;
    left: 10px;
    height: auto;
    font-size: 18px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.54);
    pointer-events: none;
}

.header_search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 2px;
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    font: inherit;
    font-size: 14px;
    line-height: normal;
    transition: border-color 150ms ease-out;
}

.header_search input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.header_search input:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

.header_search input:focus {
    border-color: #ff7043;
    outline: none;
    box-shadow: 0 0 0 1px #ff7043;
}

.filter_menu {
    position: relative;
    display: flex;
}

/* Materialize paints every focused button teal; keep these on the page palette */
.filter_toggle:focus,
.filter_link:focus,
th .sort_button:focus {
    background-color: transparent;
    outline: none;
}

.filter_toggle:focus-visible,
.filter_link:focus-visible,
th .sort_button:focus-visible {
    outline: 2px solid #ff7043;
    outline-offset: 2px;
}

.filter_toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 2px;
    background-color: transparent;
    color: rgba(0, 0, 0, 0.75);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.filter_toggle:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.filter_toggle[aria-expanded="true"],
.filter_toggle_active {
    border-color: #ff7043;
}

nav .filter_toggle i.material-icons {
    height: auto;
    font-size: 18px;
    line-height: 1;
}

.filter_badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: #ff7043;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.filter_panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 240px;
    max-width: calc(100vw - 32px);
    padding: 16px 16px 8px;
    border-radius: 2px;
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    line-height: 1.5;
}

.filter_fieldset {
    margin: 0 0 12px;
    padding: 0;
    border: none;
}

.filter_fieldset legend {
    margin-bottom: 4px;
    padding: 0;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.54);
}

.filter_fieldset label {
    display: block;
    padding: 4px 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
}

.filter_fieldset [type="radio"] + span {
    width: 100%;
    font-size: 14px;
}

.filter_panel [type="radio"]:checked + span:after,
.filter_panel [type="radio"].with-gap:checked + span:before,
.filter_panel [type="radio"].with-gap:checked + span:after {
    border-color: #ff7043;
}

.filter_panel [type="radio"]:checked + span:after,
.filter_panel [type="radio"].with-gap:checked + span:after {
    background-color: #ff7043;
}

.filter_count {
    float: right;
    color: rgba(0, 0, 0, 0.38);
    font-variant-numeric: tabular-nums;
}

.filter_panel_footer {
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.filter_link {
    padding: 4px 0;
    border: none;
    background-color: transparent;
    color: #bf360c;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.filter_link:hover {
    text-decoration: underline;
}

.filter_summary {
    margin: 0 0 8px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

.filter_summary .filter_link {
    margin-left: 8px;
}

th .sort_button {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: none;
    background-color: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

th .sort_button .sort_icon {
    font-size: 16px;
    opacity: 0;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}

th .sort_button:hover .sort_icon {
    opacity: 0.38;
}

th[aria-sort] .sort_icon {
    opacity: 0.87;
}

th[aria-sort="descending"] .sort_icon {
    transform: rotate(180deg);
}

.screen_license .material-icons:focus-visible {
    border-radius: 50%;
    outline: 2px solid #ff7043;
    outline-offset: 2px;
}

.screen_filters_empty {
    padding: 32px 0;
    color: rgba(0, 0, 0, 0.6);
}

.screen_filters_empty p {
    margin: 0 0 8px;
}

.screen_filters_empty .btn-flat {
    padding: 0 8px;
    margin-left: -8px;
}

@media only screen and (max-width: 600px) {
    .header_tools {
        flex-wrap: wrap;
        width: 100%;
    }

    .header_search {
        flex: 1;
        width: auto;
    }
}

/* ------------------------------------------------------------------
   Light refresh: shared tokens and Materialize overrides for every page
   ------------------------------------------------------------------ */
:root {
    --brand: #ff7043;
    --brand-ink: #bf360c;
    --brand-tint: #fbe9e7;
    --ink: rgba(0, 0, 0, 0.87);
    --ink-muted: rgba(0, 0, 0, 0.6);
    --hairline: rgba(0, 0, 0, 0.12);
}

body {
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* Materialize's default link blue reads as off-brand next to the orange */
a {
    color: var(--brand-ink);
}

::selection {
    background-color: #ffccbc;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Buttons: sentence case, flat until hovered */
.btn, .btn-large, .btn-small, .btn-flat {
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 500;
}

.btn, .btn-large, .btn-small {
    box-shadow: none;
    transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}

.btn:hover, .btn-small:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.btn-flat:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Tabs follow the same sentence case, in brand colours rather than Materialize pink */
.tabs .tab a {
    text-transform: none;
    font-size: 15px;
    color: var(--ink-muted);
}

.tabs .tab a:hover,
.tabs .tab a.active {
    color: var(--brand-ink);
}

.tabs .indicator {
    background-color: var(--brand);
}

/* Form labels take the accent while their field is focused */
.input-field input:focus:not([readonly]) + label,
.input-field textarea:focus:not([readonly]) + label {
    color: var(--brand-ink);
}

/* Sidebar */
.sidenav li > a {
    color: var(--ink);
    font-weight: 400;
}

.sidenav li > a > i.material-icons {
    color: rgba(0, 0, 0, 0.54);
}

.sidenav li > a:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.sidenav li.active {
    background-color: var(--brand-tint);
}

.sidenav li.active > a,
.sidenav li.active > a > i.material-icons {
    color: var(--brand-ink);
    font-weight: 500;
}

.sidenav .subheader {
    color: var(--ink-muted);
}

/* Tables */
table th {
    font-weight: 500;
    color: var(--ink-muted);
}

table:not(.fixed_header) tbody tr {
    transition: background-color 150ms ease-out;
}

table:not(.fixed_header) tbody tr:hover {
    background-color: #fafafa;
}

/* Dialogs */
.modal {
    border-radius: 8px;
}

.modal .modal-footer {
    border-radius: 0 0 8px 8px;
}

/* ------------------------------------------------------------------
   Sign in, account activation and forced password change
   ------------------------------------------------------------------ */
.auth_page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 32px 16px;
    background-color: #f2f2f2;
}

.auth_card {
    width: 400px;
    padding: 0;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* The sidebar's low-poly artwork, as a band across the top of the card */
.auth_banner {
    height: 56px;
    background: #ff7043 url("../images/side_nav.jpg") center / cover;
}

.auth_body {
    padding: 32px 40px 32px;
}

.auth_logo {
    display: block;
    max-width: 240px;
    margin: 0 auto 24px;
}

.auth_heading {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
}

.auth_notice {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-muted);
}

.auth_card .input-field {
    margin-top: 8px;
}

.auth_links {
    margin: 0 0 24px;
    font-size: 14px;
}

.auth_links a {
    color: var(--brand-ink);
}

.auth_links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth_submit.btn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 15px;
}

.auth_card .preloader-wrapper {
    margin: 0 auto 16px;
}

@media only screen and (max-width: 600px) {
    .auth_body {
        padding: 28px 24px 24px;
    }
}

/* ------------------------------------------------------------------
   App frame: page header, sidebar, canvas and panels on signed-in pages
   (pages whose <body> has id="body")
   ------------------------------------------------------------------ */
#body {
    background-color: #f4f5f7;
}

/* Page header: white bar with the title on the left and page actions on the right */
#body nav.top-nav {
    height: auto;
    line-height: normal;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
}

#body nav.top-nav > div:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    min-height: 88px;
    margin-left: 0 !important;
    padding: 16px 50px;
}

#body nav.top-nav .divider,
#body header > br {
    display: none;
}

#body nav.top-nav h1,
#body nav.top-nav h1.deep-orange-text {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink) !important;
}

#body nav.top-nav h5 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink-muted) !important;
}

#body nav.top-nav h5 i.material-icons {
    height: auto;
    font-size: 18px;
    line-height: 1;
}

#body .header_action.btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px 0 12px;
    line-height: 36px;
}

#body .header_action i.material-icons {
    height: auto;
    margin-right: 6px;
    font-size: 20px;
    line-height: 1;
}

#body > a.sidenav-trigger {
    top: 32px !important;
    left: 16px !important;
    z-index: 2;
}

/* The header's wrapping .row carries Materialize's 20px bottom margin; main's padding sets the gap instead */
#body > .row:has(> header) {
    margin-bottom: 0;
}

#body main {
    padding-top: 24px;
    padding-bottom: 48px;
}

/* Sidebar: artwork band at the top (as on the sign in card), quiet navigation below */
#body .sidenav {
    background-color: #fff;
}

#body .sidenav .user-view {
    margin-bottom: 8px;
    padding: 80px 24px 16px;
    border-bottom: 1px solid var(--hairline);
}

#body .sidenav .user-view > br {
    display: none;
}

#body .sidenav .user-view .background {
    bottom: auto;
    height: 64px;
    overflow: hidden;
}

#body .sidenav .user-view .background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#body .sidenav .user-view .name,
#body .sidenav .user-view .email {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

#body .sidenav .user-view .name {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink) !important;
}

#body .sidenav .user-view .email {
    font-size: 13px;
    color: var(--ink-muted) !important;
}

#body .sidenav .user-view #sign_out {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-ink) !important;
}

#body .sidenav li > a {
    height: 44px;
    margin: 2px 12px;
    padding: 0 16px;
    border-radius: 6px;
    line-height: 44px;
    font-size: 15px;
}

#body .sidenav li > a > i.material-icons {
    height: 44px;
    margin-right: 16px;
    line-height: 44px;
}

#body .sidenav li.active {
    background-color: transparent;
}

#body .sidenav li.active > a {
    background-color: var(--brand-tint);
}

#body .sidenav .subheader {
    height: 32px;
    margin: 8px 0 0;
    line-height: 32px;
    font-size: 13px;
    font-weight: 500;
}

#body .sidenav .subheader:hover {
    background-color: transparent;
}

#body .sidenav li > .divider {
    margin: 8px 24px;
}

/* Panels: the white surface content sits on */
.panel {
    padding: 24px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background-color: #fff;
}

.panel_title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}

.panel_actions {
    margin-top: 8px;
}

/* List tables (Screens, Groups) sit in a panel */
#body main > table {
    border: 1px solid var(--hairline);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background-color: #fff;
}

#body main > table tr {
    border-bottom: none;
}

#body main > table th,
#body main > table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eceef1;
    border-radius: 0;
}

#body main > table th:first-child,
#body main > table td:first-child {
    padding-left: 24px;
}

#body main > table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fafbfc;
    font-size: 13px;
}

#body main > table tbody tr:last-child td {
    border-bottom: none;
}

#body main > table td.screen_name,
#body main > table td.group_name {
    font-weight: 500;
}

#body .pagination {
    margin: 16px 0 0;
}

#body .pagination li {
    border-radius: 4px;
}

#body .filter_summary {
    margin-bottom: 12px;
}

#body .screen_filters_empty {
    padding: 24px;
}

/* Dashboard */
.dashboard_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    align-items: start;
}

.dashboard_grid .chart-container {
    margin: 0;
}

.chart_canvas {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.chart-legend ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin: 0 0 8px;
    padding: 0;
    font-size: 13px;
    color: var(--ink-muted);
}

.chart-legend li span {
    border-radius: 2px;
    vertical-align: -1px;
}

.chart-legend .legend_count {
    font-weight: 500;
    color: var(--ink);
}

.chart_list_heading {
    margin: 20px 0 4px;
    padding-top: 16px;
    border-top: 1px solid #eceef1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.chart_list_heading.status_bad {
    color: #c62828;
}

.chart_list_heading.status_warn {
    color: #9a5b00;
}

.chart_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chart_list:empty::after {
    content: "None";
    display: block;
    padding: 4px 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
}

/* Profile */
.profile_panels {
    display: grid;
    gap: 24px;
    max-width: 760px;
}

.profile_panels .row {
    margin-bottom: 0;
}

.profile_panels .input-field.col {
    padding-left: 0;
}

/* Dialogs: dark titles, a divided footer and a filled primary action */
.modal .modal-content > h4,
.modal .modal-content > h4.deep-orange-text {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 500;
    color: var(--ink) !important;
}

.modal .modal-footer {
    height: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--hairline);
}

.modal .modal-footer .btn-flat {
    margin: 0 0 0 8px;
}

.modal .modal-footer .btn-flat:not(.modal-close):not(.modal_secondary) {
    background-color: var(--brand);
    color: #fff;
}

.modal .modal-footer .btn-flat:not(.modal-close):not(.modal_secondary):hover {
    background-color: #f4511e;
}

#toast-container .toast {
    border-radius: 6px;
}

@media only screen and (max-width: 992px) {
    #body nav.top-nav > div:first-child {
        min-height: 72px;
        padding: 12px 16px 12px 56px;
    }

    #body nav.top-nav h1,
    #body nav.top-nav h1.deep-orange-text {
        font-size: 24px;
    }

    #body > a.sidenav-trigger {
        top: 24px !important;
    }

    #body > .row[style] {
        margin-right: 0 !important;
    }

    #body main {
        padding: 16px 16px 32px;
    }
}

@media only screen and (max-width: 600px) {
    /* Tools take their own full-width row under the title, clear of the menu button's column */
    #body nav.top-nav .header_tools {
        flex-basis: calc(100% + 40px);
        margin-left: -40px;
    }

    /* Primary action shrinks to its icon; the label stays for screen readers */
    #body .header_action.btn {
        padding: 0 10px;
    }

    #body .header_action i.material-icons {
        margin-right: 0;
    }

    /* Wide list tables scroll sideways inside their panel instead of being cut off */
    #body main > table {
        display: block;
        overflow-x: auto;
    }

    #body .header_action_label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
   Shared controls
   ------------------------------------------------------------------ */
.visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Secondary action: outlined, neutral */
.btn.btn_outline {
    border: 1px solid rgba(0, 0, 0, 0.18);
    background-color: #fff;
    color: var(--ink);
}

.btn.btn_outline:hover {
    background-color: #f5f5f5 !important;
}

.btn.btn_outline:focus {
    background-color: #fff;
}

.btn i.material-icons.left {
    margin-right: 6px;
    font-size: 20px;
}

/* Header actions (Screens, Groups, screen editor) */
#body nav.top-nav .header_tools .btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px 0 12px;
    line-height: 36px;
}

#body nav.top-nav .header_tools .btn i.material-icons {
    height: auto;
    line-height: 1;
}

/* Tabs inside dialogs: left aligned with an underline, on a hairline */
.modal .tabs {
    height: 44px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--hairline);
    background-color: transparent;
}

.modal .tabs .tab {
    height: 44px;
    line-height: 44px;
}

.modal .tabs .tab a {
    padding: 0 16px;
}

.modal .tabs .tab a:hover,
.modal .tabs .tab a.active,
.modal .tabs .tab a:focus,
.modal .tabs .tab a:focus.active {
    background-color: transparent;
}

.modal .tabs .tab a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------
   Screen settings dialog (Screens page)
   ------------------------------------------------------------------ */
.settings_modal {
    width: 760px;
    max-width: calc(100% - 32px);
    max-height: 85%;
}

.settings_modal .modal-content {
    min-height: 470px;
}

.settings_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.settings_tab .input-field {
    margin-top: 8px;
}

.settings_heading {
    margin: 8px 0 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
}

.settings_section + .settings_section {
    margin-top: 28px;
}

.settings_add_row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0 12px;
}

.settings_add_row .input-field {
    flex: 1 1 200px;
    margin-bottom: 8px;
}

.settings_add_row > .btn {
    margin-bottom: 22px;
}

.settings_linked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: #fafbfc;
}

.settings_linked p {
    margin: 0;
    color: var(--ink-muted);
}

.settings_table {
    margin-bottom: 8px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.settings_table tr {
    border-bottom: none;
}

.settings_table th {
    padding: 8px 12px;
    background-color: #fafbfc;
    font-size: 13px;
}

.settings_table td {
    padding: 10px 12px;
    border-top: 1px solid #eceef1;
    border-radius: 0;
}

.settings_table td.clickable {
    width: 56px;
    text-align: center;
}

.settings_table td.clickable i {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.45);
    transition: color 150ms ease-out;
}

.settings_table td.clickable:hover i {
    color: #c62828;
}

.settings_empty {
    display: none;
    margin: 0 0 8px;
    padding: 16px;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink-muted);
    text-align: center;
}

.settings_table_wrap:has(tbody:empty) .settings_table {
    display: none;
}

.settings_table_wrap:has(tbody:empty) .settings_empty {
    display: block;
}

.license_summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 14px 16px;
    border-radius: 8px;
    background-color: #fafbfc;
    font-size: 16px;
}

.settings_danger {
    padding: 16px 20px 4px;
    border: 1px solid #f3c7c5;
    border-radius: 8px;
    background-color: #fff8f8;
}

.settings_danger p {
    margin: 0 0 8px;
    color: var(--ink-muted);
}

.btn.settings_danger_btn {
    background-color: #c62828;
    color: #fff;
}

.btn.settings_danger_btn:hover {
    background-color: #b71c1c !important;
}

.settings_modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings_save_status {
    padding-left: 8px;
    font-size: 13px;
    color: var(--ink-muted);
    transition: color 150ms ease-out;
}

.settings_save_status.settings_saved {
    color: #2e7d32;
}

/* ------------------------------------------------------------------
   Tenant dialogs (screen editor)
   ------------------------------------------------------------------ */
.tenant_modal {
    width: 600px;
    max-width: calc(100% - 32px);
    max-height: 85%;
}

.tenant_form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 20px;
}

.tenant_form .input-field {
    margin-top: 8px;
}

.tenant_form .tenant_field_wide {
    grid-column: 1 / -1;
}

.tenant_hint {
    margin: 0 0 12px;
    color: var(--ink-muted);
}

.tenant_paste {
    display: block;
    width: 100%;
    min-height: 180px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.tenant_paste:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 1px var(--brand);
}

.bulk_table_wrap {
    max-height: 300px;
    margin-bottom: 16px;
    overflow: auto;
    border: 1px solid var(--hairline);
    border-radius: 8px;
}

.bulk_table th {
    padding: 0 12px;
    background-color: #fafbfc;
}

.bulk_table td {
    padding: 8px 12px;
    border-top: 1px solid #eceef1;
}

.tenant_modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.modal .modal-footer .btn-flat.tenant_delete {
    display: inline-flex;
    align-items: center;
    margin: 0 auto 0 0;
    color: #c62828;
}

.btn-flat.tenant_delete i.material-icons.left {
    margin-right: 6px;
    font-size: 20px;
}

.btn-flat.tenant_delete:hover {
    background-color: #fdecea;
}

/* ------------------------------------------------------------------
   Screen editor: columns fill the window, so the page never scrolls
   ------------------------------------------------------------------ */
#body.editor_page main {
    padding-bottom: 0;
}

.editor_page main > .row {
    margin-bottom: 0;
}

.editor_page #tenant_list_container,
.editor_page #settings_container,
.editor_page #settings_selection_container {
    vertical-align: top;
}

.editor_page .screen-preview-portrait {
    height: calc(100vh - 137px);
}

.editor_page #tenant_list_container,
.editor_page #settings_selection_container,
.editor_page .settings_containers {
    height: calc(100vh - 137px) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 8px;
    background-color: #fff;
}

.editor_page .settings_containers {
    padding: 4px 20px 16px;
}

.editor_page #tenant_list_container .collection,
.editor_page #settings_selection_container .collection {
    margin: 0;
    border: none;
}

.editor_page #tenant_list .collection-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom-color: #eceef1;
}

.editor_page #tenant_list .collection-item .material-icons {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.35);
}

@media only screen and (max-width: 600px) {
    .settings_grid,
    .tenant_form {
        grid-template-columns: 1fr;
    }
}

/* Font-loading probes after the editor markup: keep them rendered, but out of the page flow */
.editor_page > span[id$="_default_font"] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.editor_page .settings_containers > h5,
.editor_page .settings_containers > h5.deep-orange-text {
    margin: 16px 0 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--ink) !important;
}

/* ------------------------------------------------------------------
   Scrolling list pages (Screens): the page stays put, the list scrolls
   ------------------------------------------------------------------ */
#body.list_page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Materialize centres .row with auto side margins, which would shrink it inside this flex column */
#body.list_page > .row {
    flex: none;
    margin-bottom: 0;
    margin-left: 0;
}

#body.list_page > .row:has(> header) {
    margin-right: 0;
}

#body.list_page > .row:not(:has(> header)) {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

#body.list_page main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 24px;
}

.list_panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background-color: #fff;
}

.list_scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.list_table {
    border-collapse: separate;
    border-spacing: 0;
}

.list_table tr {
    border-bottom: none;
}

/* Column headings stay in view while the rows scroll */
.list_table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 16px;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background-color: #fafbfc;
    font-size: 13px;
}

.list_table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eceef1;
    border-radius: 0;
}

.list_table th:first-child,
.list_table td:first-child {
    padding-left: 24px;
}

.list_table td.screen_name {
    font-weight: 500;
}

/* Footer: range on the left, page size and pages on the right */
.list_footer {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 10px 16px 10px 24px;
    border-top: 1px solid var(--hairline);
    font-size: 14px;
    color: var(--ink-muted);
}

.list_range {
    font-variant-numeric: tabular-nums;
}

.list_paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}

.list_per_page,
.list_page_jump {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ink-muted);
}

.list_per_page select.browser-default,
.list_page_jump select.browser-default {
    width: auto;
    height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    background-color: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.list_per_page select.browser-default:focus,
.list_page_jump select.browser-default:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 1px var(--brand);
}

.list_page_jump select.browser-default:disabled {
    color: var(--ink-muted);
    cursor: default;
}

.list_page_jump span {
    min-width: 3.5ch;
    font-variant-numeric: tabular-nums;
}

.list_pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.list_page_step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: var(--ink);
    cursor: pointer;
}

/* Materialize paints focused buttons teal */
.list_page_step:focus {
    background-color: transparent;
    outline: none;
}

.list_page_step:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.05);
}

.list_page_step:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.list_page_step:disabled {
    color: rgba(0, 0, 0, 0.26);
    cursor: default;
}

.list_page_step .material-icons {
    font-size: 22px;
}

@media only screen and (max-width: 992px) {
    #body.list_page main {
        padding-bottom: 16px;
    }
}

@media only screen and (max-width: 600px) {
    .list_footer {
        padding-left: 16px;
    }

    .list_per_page {
        display: none;
    }
}