:root {
    --bs-body-backdrop: #f2f2f6;
    --bs-accent-bg: var(--bs-dark);
    --bs-accent-bg-rgb: var(--bs-dark-rgb);
    --bs-dropdown-shadow: 0px 4px 13px 7px rgba(0, 0, 0, 0.1);
    --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --dn-top-navbar-logo-url: url("/images/logos/deltanet/small.png");
    --company-logo-url: url("/images/logos/deltanet/large.png");
    --dn-fixed-navbar-height: 56px;
    --dn-bottom-nav-height: var(--dn-fixed-navbar-height);
    --dn-container-max-width: 1350px;

    /* Listing status indicator colors */
    --listing-status-1: #658cfe;
    --listing-status-2: #fff305;
    --listing-status-3: #8e67ff;
    --listing-status-4: #f26722;
    --listing-status-5: #f72613;
    --listing-status-8: var(--bs-dark);
    --listing-status-unknown: #888a8f;
}
[data-bs-theme="light"] {
    --bs-tertiary-bg: #e9ecef;
}
[data-bs-theme="dark"] {
    --bs-body-backdrop: #191c1f;
    --bs-accent-bg: var(--bs-light);
    --bs-accent-bg-rgb: var(--bs-light-rgb);
    --bs-dropdown-shadow: 0px 4px 13px 7px rgba(0, 0, 0, 0.2);
    --dn-top-navbar-logo-url: url("/images/logos/deltanet/dark/small.png");
    --company-logo-url: url("/images/logos/deltanet/dark/large.png");
}

html, body {
    background-color: var(--bs-body-backdrop);
    padding-right: 0 !important;
}
.container-xxl {
    max-width: var(--dn-container-max-width);
}
.dn-sidebar {
    grid-area: sidebar;
    z-index: 501;
}
#dnSidebar {
    --bs-offcanvas-width: 260px;
    --bs-offcanvas-padding-y: 0.625rem;
}
#dnSidebar .offcanvas-body {
    --bs-offcanvas-padding-x: 0.5rem;
}
@media (min-width: 992px) {
    .dn-layout {
        display: grid;
        grid-template-areas: "sidebar main";
        grid-template-columns: var(--dn-side-nav-width) 1fr;
        gap: 1.5rem;
    }
    .dn-sidebar-disabled .dn-layout {
        grid-template-columns: .1fr 1fr .1fr;
    }
    .dn-sidebar {
        position: -webkit-sticky;
        position: sticky;
        padding: 0.5rem 0;
        top: var(--dn-fixed-navbar-height);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        height: calc(100vh - var(--dn-fixed-navbar-height));
        overflow-y: auto;
    }
    .dn-sidebar .accordion {
        --bs-accordion-body-padding-x: 0px;
    }
    [data-bs-theme="dark"] .dn-sidebar {
        /* We need to account for the border added to the navigation bar */
        top: calc(var(--dn-fixed-navbar-height) + 1px);
        height: calc(100vh - var(--dn-fixed-navbar-height) - 1px);
    }
    #dn-search-large { display: flex !important; }
    #dn-search-small { display: none !important; }
    .btn-top-nav[data-bs-toggle="offcanvas"] { display: none !important; }
}
.dn-main {
    grid-area: main;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 20px;
    padding-bottom: calc(var(--dn-fixed-navbar-height) + 20px);
}
section {
    width: 100%;
    margin: 0 auto;
}
section.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section.content-header, section.dashboard-tiles {
    margin-bottom: 20px;
}

/* --------- START - top navigation bar --------- */
#top-navigation {
    background: var(--top-nav-bg);
    background-position: center;
    background-size: cover;
}
[data-bs-theme="dark"] #top-navigation {
    border-bottom: 1px solid var(--bs-light-border-subtle);
}
#top-navigation > .container-xxl {
    --bs-gutter-x: 1rem;
}
#top-navigation div.navbar-section {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}
#top-navigation #top-nav-logo {
    height: 40px;
    max-width: 200px;
    width: 200px;
}
#top-navigation .btn-top-nav,
#top-navigation button.btn-user-menu {
    display: none;
}
.btn-top-nav {
    --bs-btn-color: var(--top-nav-color);
    --bs-btn-bg: var(--top-nav-btn-bg);
    --bs-btn-border-color: var(--top-nav-focus1);
    --bs-btn-hover-color: var(--top-nav-color);
    --bs-btn-hover-bg: var(--top-nav-focus1);
    --bs-btn-hover-border-color: var(--top-nav-focus2);
    --bs-btn-active-color: var(--top-nav-color);
    --bs-btn-active-bg: var(--top-nav-focus2);
    --bs-btn-active-border-color: var(--top-nav-focus3);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-bg: var(--top-nav-btn-bg);
    --bs-btn-disabled-border-color: var(--top-nav-btn-bg);
    backdrop-filter: blur(5px);
}
#top-navigation .btn-transparent {
    --bs-btn-color: var(--top-nav-color);
    --bs-btn-hover-color: var(--top-nav-color);
    --bs-btn-active-color: var(--top-nav-color);
    --bs-btn-hover-bg: var(--top-nav-btn-bg);
    --bs-btn-hover-border-color: var(--top-nav-focus1);
    --bs-btn-active-bg: var(--top-nav-focus1);
    --bs-btn-active-border-color: var(--top-nav-focus2);
}
/* ---------- END - top navigation bar ---------- */

/* START - bottom navigation bar */
#bottom-navigation {
    height: var(--dn-bottom-nav-height);
    background: var(--top-nav-bg);
    background-position: center;
    background-size: cover;
    --bs-navbar-padding-y: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2) !important;
}
#bottom-navigation .navbar-nav {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 100%;
}
#bottom-navigation .navbar-nav .nav-item {
    flex: 1 1 0;
    width: 0;
}
[data-bs-theme="dark"] #bottom-navigation {
    border-top: 1px solid var(--bs-light-border-subtle);
}
#bottom-navigation li.nav-item > .btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-color: var(--top-nav-color);
    --bs-btn-hover-color: var(--top-nav-color);
    --bs-btn-active-color: var(--top-nav-color);
    --bs-btn-active-bg: var(--top-nav-focus1);
    --bs-btn-font-size: 1.2rem;
    --bs-btn-border-radius: 0;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    border: none;
    transition: background-color 0.2s ease;
}
#bottom-navigation li.nav-item > .btn i {
    --w: 25px;
    line-height: var(--w);
    width: var(--w);
}
#bottom-navigation li.nav-item > .btn small {
    color: rgba(var(--top-nav-color-rgb), 0.7);
    font-size: 10px !important;
}
#bottom-navigation li.nav-item > .btn.btn-notifications span.badge {
    border-radius: 8px;
    font-size: 12px;
    font-weight: 300;
    position: absolute;
    transform: translate(50%, -50%);
    top: 50%;
    right: 50%;
    margin: -16px -8px;
    padding: 2px 4px;
}
#bottom-navigation li.nav-item > .btn-user-menu .agent-image {
    --w: 26px;
    border-width: 2px;
}
#bottom-navigation span.badge.current-role-indicator {
    --bs-badge-font-size: 0.45em;
    --bs-badge-font-weight: 800;
    --bs-badge-padding-x: 0.25em;
    --bs-badge-padding-y: 0.2em;
    margin-top: 1px;
}
#bottom-navigation span.icon-circle.current-role-indicator {
    position: absolute;
    transform: translate(50%, -50%);
    top: 50%;
    right: 50%;
    margin: -1px -8px;
    --w: 16px;
    font-size: 9px;
}
/* END - bottom navigation bar */

/* Debug button */
button#btn-log-json {
    bottom: calc(var(--dn-fixed-navbar-height) + 10px);
    right: 10px;
    z-index: 2000;
}

/* --------- START - circle buttons ----------- */
.btn-circle {
    position: relative;
    border: 0;
    border-radius: 50%;
    --w: 40px;
    height: var(--w);
    line-height: var(--w);
    width: var(--w);
    min-width: var(--w);
    padding: 0;
    font-size: 18px;
    transition: background 0.2s;
}
.btn-circle-sm {
    --w: 30px;
    font-size: 16px;
}
.btn-circle:focus:not(:focus-visible), button.btn-user-menu:focus:not(:focus-visible) {
    box-shadow: none;
}
.btn-circle span.badge {
    border-radius: 14px;
    font-size: 13px;
    font-weight: 300;
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 3px 5px;
    min-width: 20px;
}
.btn-circle:active:hover {
    border: 1px solid transparent;
    background-clip: padding-box;
}
.btn-circle:active:hover i {
    font-size: 0.95em;
}
.btn-circle::after {
    content: unset !important;
}
/* ---------- END - circle buttons ------------ */

/* CARD BUTTONS */
.btn.card {
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: initial;
    transition: background 0.2s;
    --bs-btn-hover-bg: rgba(var(--bs-accent-bg-rgb), 0.08);
    --bs-btn-hover-border-color: var(--bs-border-color-translucent);
    --bs-btn-active-bg: rgba(var(--bs-accent-bg-rgb), 0.08);
    --bs-btn-active-border-color: var(--bs-border-color-translucent);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25);
}
.btn.card > .card-body { width: 100%; }
.btn.card::before { content: unset !important; }

button#dn-search-large {
    display: none;
    align-items: center;
    justify-content: space-between;
    --bs-btn-border-radius: 28px;
    --bs-btn-border-width: 0px;
    height: 40px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 300px;
}
#dn-search-large kbd {
    display: flex;
    gap: .25rem;
    margin-right: .25rem;
    background: #00000030;
    color: inherit;
    letter-spacing: -1px;
}
#dn-search-large kbd > span {
    opacity: 0.7;
}

button.btn-user-menu {
    --bs-btn-border-width: 0;
    --bs-btn-padding-x: 0;
    height: 40px;
    position: relative;
}
#top-navigation button.btn-user-menu {
    --bs-btn-padding-y: 0;
}
button.btn-user-menu span.agent-image {
    --w: 40px;
    border-width: 3px;
    transition: filter 0.2s ease;
}
button.btn-user-menu span.agent-image::before  {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
button.btn-user-menu:hover > span.agent-image, button.btn-user-menu:focus > span.agent-image { filter: brightness(0.9); }
button.btn-user-menu:active:hover > span.agent-image { filter: brightness(0.7); }

.current-role-indicator { z-index: 1; }
#top-navigation .current-role-indicator.icon-circle {
    position: absolute;
    right: -3px;
    bottom: -2px;
    --w: 20px;
    font-size: 10px;
}
#top-navigation .current-role-indicator.badge {
    position: absolute;
    top: unset;
    bottom: -5px;
    right: -6px;
    font-size: 9px;
    font-weight: 800;
    --bs-badge-padding-x: var(--bs-badge-padding-y);
}

.agent-image {
    --w: 45px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    padding: 0;
    display: block;
    height: var(--w);
    max-height: var(--w);
    min-height: var(--w);
    width: var(--w);
    min-width: var(--w);
    background-color: #ffffff;
}
.agent-image > img {
    width: 100%;
    margin-top: -5px;
}
.switch-icon {
    position: relative;
    display: inline-flex;
}
.switch-icon:after {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    content: "\f021";
    position: absolute;
    bottom: -1px;
    right: -2px;
    background-color: var(--bs-tertiary-bg);
    border-radius: 50%;
    font-size: 12px;
    --w: 20px;
    height: var(--w);
    width: var(--w);
    min-width: var(--w);
    border: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
* > span.overlay {
    opacity: 0;
    color: #fff;
    border-color: transparent;
    font-size: 25px;
    transition: .3s ease;
}
*:hover > span.overlay,
*:focus > span.overlay {
    opacity: 1;
    cursor: pointer;
}

div.dropdown > button.dropdown-img {
    padding: 0;
    overflow: hidden;
}
div.dropdown > button.dropdown-img:after {
    content: unset;
}

.profile-picture {
    --w: 45px;
    --fs: 35px;
    position: relative;
    height: var(--w);
    width: var(--w);
    min-width: var(--w);
    font-size: var(--fs);
    background-color: #b2b2b2;
    border-radius: 50%;
    overflow: hidden;
}
.profile-picture > figure {
    position: relative;
    width: 100%;
}
.profile-picture > figure::before {
    display: block;
    padding-top: 100%;
    content: "";
}
.profile-picture > figure > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.profile-picture > figure > img {
    -o-object-fit: cover!important;
    object-fit: cover !important;
    z-index: 1;
}
.profile-picture figure > figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
}


/* --------- START - side navigation ----------- */
.dn-sidebar > nav {
    background: none;
    box-shadow: none;
}
.dn-sidebar .accordion {
    --bs-accordion-btn-padding-y: 10px;
    /* --bs-accordion-body-padding-x: 0px; */
    --bs-accordion-body-padding-y: 0px;
}
.dn-sidebar .accordion-button {
    border-radius: 32px !important;
    font-weight: 500;
    line-height: 1.25;
}
span.icon-circle {
    --w: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--w);
    width: var(--w);
    min-width: var(--w);
    min-height: var(--w);
    font-size: 18px;
    border-radius: 50%;
    position: relative;
    text-decoration: none !important;
}
span.icon-circle.icon-circle-sm {
    --w: 36px;
    font-size: 18px;
}
span.icon-circle.icon-circle-xs {
    --w: 25px;
    font-size: 13px;
}
.dn-sidebar .list-group {
    --bs-list-group-active-color: var(--bs-list-group-color);
}
.dn-sidebar a.list-group-item {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 0;
    border-radius: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8em;
    transition: background-color 0.2s;
    --bs-list-group-bg: none;
    --bs-list-group-active-bg: none;
}
.dn-sidebar a.list-group-item.active {
    font-weight: 700;
}
.dn-sidebar a.list-group-item > span:first-child {
    --w: 20px;
    width: var(--w);
    max-width: var(--w);
    min-width: var(--w);
}
[data-bs-theme="dark"] .dn-sidebar a.list-group-item > span > i {
    filter: brightness(3);
}
.dn-sidebar span.icon-circle { color: #ffffff; }
/* --------- END - side navigation ------------- */

/* START - MENU CONTAINERS */
#dn-template-dropdown {
    position: fixed;
    width: 100vw;
    top: 0;
    left: 0;
    bottom: var(--dn-fixed-navbar-height);
    padding: 8px;
    list-style-type: none;
    overflow-y: auto;
    z-index: 1040;
}
#dn-template-dropdown .input-group-search {
    height: 40px;
    border-radius: 40px;
    --bs-border-radius: 28px;
}
#dn-template-dropdown .input-group-search:before {
    color: var(--bs-primary-text-emphasis);
}
#dn-template-dropdown > div.carousel { margin: -8px; }
#dn-template-dropdown > div.carousel > div.carousel-inner > div.carousel-item { padding: 8px; }
#dn-template-dropdown ul.top-navigation-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#dn-template-dropdown ul.top-navigation-menu > li {
    position: relative;
}
#dn-template-dropdown ul.top-navigation-menu > li.separator {
    border-top: 1px solid var(--bs-border-color);
    margin: 8px 0;
}
#dn-template-dropdown ul.top-navigation-menu > li > a,
#dn-template-dropdown ul.top-navigation-menu > li > button,
#dn-template-dropdown ul.top-navigation-menu > li > form > button {
    display: flex;
    align-items: center;
    text-align: left;
    overflow: hidden;
    padding: 8px;
    margin: 0;
    background-color: transparent;
    transition: background-color 0.2s;
    border: none;
    border-radius: var(--bs-border-radius);
    color: inherit;
    width: 100%;
}
#dn-template-dropdown ul.top-navigation-menu > li > a:hover,
#dn-template-dropdown ul.top-navigation-menu > li > button:hover,
#dn-template-dropdown ul.top-navigation-menu > li > form > button:hover {
    background-color: rgba(var(--bs-accent-bg-rgb), 0.07);
}
#dn-template-dropdown ul.top-navigation-menu > li > div.btn-group {
    position: absolute;
    right: 8px;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
    max-height: 40px;
}
#dn-template-dropdown p { margin: 0; }
#user-menu-carousel div.agent-image { --w: 60px; }
#user-menu-carousel .auth-link .agent-image { --w: 36px; }
#user-menu-carousel div.agent-info {
    margin-left: 6px;
}
#user-menu-carousel div.agent-info p:first-child {
    font-size: 18px;
    font-weight: 600;
    color: inherit;
}
#dn-template-dropdown:not(.dn-search-active) div.tab-pane > div.d-flex:first-child,
ul.top-navigation-menu > li:first-child > div {
    padding: 8px;
}
#notifications-container li.notification.unread p {
    color: inherit !important;
    font-weight: 500;
}
#notifications-container li.notification.unread p:last-child {
    color: var(--bs-primary-text-emphasis) !important;
}
#notifications-container li.notification.unread::after {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
    right: 52px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: var(--bs-primary-contrast, var(--bs-primary));
}

/* Notification tray */
.dn-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none; /* empty space lets clicks pass through to page beneath */
    --dn-container-max-width: 1370px;
}
.dn-overlay > * {
    pointer-events: auto; /* actual content inside is interactive again */
}

/* ------------- START - Modals ----------------- */
#modal-fullscreen {
    z-index: 500;
}
#modal-fullscreen .modal-body {
    padding-top: var(--dn-fixed-navbar-height);
}
.modal-fullscreen .modal-content {
    --bs-modal-bg: none;
}
.lightbox .modal-fullscreen .modal-content {
    background-color: rgba(0, 0, 0, 0.5);
}
.modal-fullscreen .dn-main {
    background-color: var(--bs-body-backdrop);
    box-shadow: 0 0 0 1rem var(--bs-body-backdrop);
    min-height: calc(100vh - var(--dn-fixed-navbar-height));
    min-width: 0;
}
.modal-fullscreen .modal-body-content {
    padding: 0;
    width: 100%;
    min-height: 100%;
}

@media only screen and (min-width: 576px) {
    :root {
        --dn-bottom-nav-height: 0px;
    }
    #top-navigation .btn-top-nav:not(#dn-search-large),
    #top-navigation button.btn-user-menu {
        display: inline-block;
    }
    .dn-main { padding-bottom: 20px; }
    #bottom-navigation { display: none; }
    button#btn-log-json { bottom: 10px; }
    #dn-template-dropdown {
        max-height: 90vh;
        width: 350px;
        top: calc(var(--dn-fixed-navbar-height) - 3px);
        right: 10px;
        left: unset;
        bottom: unset;
    }
    #dn-template-dropdown.dn-search-active {
        top: 0;
        left: 0px;
        right: unset;
    }
}
@media only screen and (min-width: 1370px) { /* 1370 = (--dn-container-max-width + 20px) */
    #dn-template-dropdown {
        right: calc(50% - (var(--dn-container-max-width) / 2) + 9px);
    }
    #dn-template-dropdown.dn-search-active {
        left: calc(50% - (var(--dn-container-max-width) / 2));
    }
}

#modal-fullwindow {
    z-index: 1050;
}
#modal-fullwindow .modal-content {
    --bs-modal-bg: var(--bs-body-backdrop);
}
#modal-fullwindow div.modal-body-content {
    padding: 0;
    max-width: unset;
    min-height: 100%;
}

.modal:not(#modal-fullscreen) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.modal-header {
    padding: 0 0.75rem;
    height: 58px;
    z-index: 1;
    justify-content: space-between;
}
.modal-footer {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.modal-content { overflow: hidden; }
.modal-body { padding: 0; }
.modal-body-content {
    padding: 10px;
    margin: 0 auto;
    position: relative;
}
.modal-body-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 100px;
    background-color: var(--bs-body-backdrop);
}
.pac-container {
    z-index: 2000; /* Fix for google places autocompleter results in modals */
}
/* -------------- END - Modals ------------------ */

/* START - Timeline */
.timeline { position: relative; }
.timeline::before {
    border-radius: 0.25rem;
    background-color: var(--bs-tertiary-bg);
    bottom: 0;
    content: "";
    left: 31px;
    margin: 0;
    position: absolute;
    top: 4px;
    width: 4px;
}
.timeline > div { position: relative; }
.timeline > div:not(:last-child) { margin-bottom: 15px; }
.timeline > div::before, .timeline > div::after {
    content: "";
    display: table;
}
.timeline > div > i {
    position: absolute;
    top: 8px;
    left: 14px;
    font-size: 18px;
    line-height: 38px;
    width: 38px;
    text-align: center;
    background-color: var(--bs-tertiary-bg);
    border-radius: 50%;
}
.timeline > div > .timeline-item { margin: 0 0 0 60px; }
.timeline .card { --bs-card-spacer-y: .5rem; }
.timeline > div > .timeline-item .card-title { margin: 0; }
.timeline > div > .timeline-item > .card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.timeline > div > .timeline-item .time {
    font-size: 14px;
    font-weight: 300;
    white-space: nowrap;
}
.timeline .timeline { padding-top: 15px; }
.timeline .timeline::before { top: 0px; }
/* END - Timeline */

/* START - Chain */
.chain {
    position: relative;
}
.chain::before {
    content: "";
    border-radius: 0.25rem;
    background-color: var(--bs-border-color);
    top: 0;
    bottom: 0;
    left: 15px;
    margin: 0;
    position: absolute;
    width: 4px;
}
.chain > * {
    position: relative;
    display: flex;
    align-items: center;
    height: 35px;
}
.chain > *:not(:last-child) {
    margin-bottom: 15px;
}
.chain > .chain-link {
    display: block;
    font-size: 11px;
    font-weight: 700;
    height: 24px;
    margin-left: 5px;
}
.chain > .chain-link > span {
    display: block;
    height: 24px;
    width: 24px;
    line-height: 22px;
    text-align: center;
    background-color: var(--bs-tertiary-bg);
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
}
.chain > *:not(.chain-link) > i {
    position: absolute;
    line-height: 33px;
    width: 35px;
    background-color: var(--bs-tertiary-bg);
    border-radius: 50%;
    text-align: center;
    border: 1px solid var(--bs-border-color);
}
.chain > *:not(.chain-link) > .chain-item {
    margin-left: 40px;
}
/* END - Chain */

/* START - Link Tree */
ul.link-tree {
    --indent: 16px;
    --border-width: 3px;
    padding: 0;
    counter-reset: item;
    margin-right: 10px;
    margin-bottom: 0;
}
ul.link-tree > li {
    list-style-type: none;
    padding: 5px 0 5px 10px;
    position: relative;
    transition: background 0.2s ease;
    border-radius: .375rem;
}
ul.link-tree > li > span { position: relative; }
ul.link-tree .sort-handle { cursor: grab; }
ul.link-tree > li > span > .link-tree-item-actions {
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
ul.link-tree > li:not(:has(.link-tree li:hover, button:hover)):hover { background: rgba(var(--bs-accent-bg-rgb), 0.07); }
ul.link-tree > li:not(:has(.link-tree li:hover, button:hover)):hover > span > .link-tree-item-actions,
ul.link-tree > li .link-tree-item-actions:hover {
    opacity: 100;
}
.link-tree ul.link-tree { padding-left: var(--indent); }
ul.link-tree li:has(.link-tree > li:nth-child(2)) > span::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 0px;
    left: calc(var(--indent) - 8px);
    border-left: var(--border-width) solid var(--bs-border-color);
    border-bottom: unset;
}
.link-tree ul.link-tree > li::before {
    content: "";
    counter-increment: item;
    position: absolute;
    top: -1px;
    left: calc((var(--indent) * -1) + 8px);
    border-left: var(--border-width) solid var(--bs-border-color);
    border-bottom: var(--border-width) solid var(--bs-border-color);
    width: calc(var(--indent) - 4px);
    height: 22px;
}
.link-tree ul.link-tree > li::after {
    content: "";
    position: absolute;
    top: 18px;
    left: calc((var(--indent) * -1) + 8px);
    border-left: var(--border-width) solid var(--bs-border-color);
    border-top: var(--border-width) solid var(--bs-border-color);
    width: calc(var(--indent) - 4px);
    height: 100%;
}
.link-tree ul.link-tree > li:last-child::after { display: none; }
@media (pointer: fine) {
    ul.link-tree > li > span > .link-tree-item-actions {
        opacity: 0;
    }
}
/* END - Link Tree */

/* Paywall */
div.paywall-info {
    margin: 1rem;
    padding: 1rem;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
    background-color: rgba(0,0,0,0.5);
    max-width: 500px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* --------- START - Consistent carousel --------- */
div.carousel.carousel-consistent img {
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    height: 100%;
}

/* --------- START - Horizontal Scrolling -------- */
.streamer-carousel-container {
    position: relative;
    margin: 0 auto;
}
.streamer-carousel-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.streamer-carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-in-out;
}
.btn-streamer-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
}
.streamer-carousel-container:hover .btn-streamer-carousel-nav {
    opacity: 1;
}
.streamer-carousel-nav-button.btn-streamer-carousel-prev {
    left: 10px;
}
.btn-streamer-carousel-nav.btn-streamer-carousel-next {
    right: 10px;
}
.streamer-carousel-track > .card {
    flex: 0 0 192px;
}
/* ---------- END - Horizontal Scrolling --------- */

/* -------------- START - Sliding Tabs ----------- */
.sliding-tabs-wrapper {
    overflow: hidden;
}
.sliding-tabs {
    position: relative;
    display: flex;
}
.sliding-tabs button.btn-back {
    display: none;
}
.sliding-tabs > .tab-content {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.sliding-tabs > div.tab-content > div.tab-pane {
    width: 100%;
    height: 100%;
    padding: 1rem;
}
div.nav.flex-column.nav-pills {
    width: 230px;
    min-width: 230px;
    padding: 4px;
}
div.nav.flex-column.nav-pills button.nav-link {
    padding: 8px;
    justify-content: space-between;
    text-align: left;
    width: 100%;
    max-width: 100%;
}
div.nav.flex-column.nav-pills button.nav-link[disabled] {
    opacity: 0.5;
    background: none !important;
}
div.nav.flex-column.nav-pills button.nav-link.active:before {
    width: 5px;
    position: absolute;
    left: 0px;
    right: unset;
    top: 8px;
    bottom: 8px;
}
div.nav.flex-column.nav-pills button.nav-link > span:first-child {
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 575px) {
    .sliding-tabs {
        width: 200%;
        margin-left: 0%;
        transition: margin-left ease 0.3s;
        -webkit-transition: margin-left ease 0.3s;
    }
    .sliding-tabs.link-chosen {
        margin-left: -100%;
    }
    .sliding-tabs > div {
        width: 50% !important;
        margin: 0 !important;
    }
    .sliding-tabs button.btn-back {
        display: block;
    }
}
@media only screen and (min-width: 576px) {
    .sliding-tabs:not(.link-chosen) div.nav.flex-column.nav-pills button.nav-link:first-of-type {
        background-color: rgba(var(--bs-accent-bg-rgb), 0.04);
    }
    .sliding-tabs:not(.link-chosen) div.nav.flex-column.nav-pills button.nav-link:first-of-type:before {
        content: "";
        background-color: var(--bs-primary-contrast, var(--bs-primary));
        width: 5px;
        position: absolute;
        left: 0px;
        top: 8px;
        bottom: 8px;
        border-radius: 3px;
    }
    .sliding-tabs:not(.link-chosen) > div.tab-content > div.tab-pane:first-child {
        display: block;
    }
}
/* --------------- END - Sliding Tabs ------------ */

/* CSS PIE CHART */
.pie {
    --w: 150px;
    width: var(--w);
    min-width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    font-size: 16px;
    font-weight: bold;
}
.pie:before, .pie:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.pie:before {
    inset: 0;
    background:
        radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
    inset: calc(50% - var(--b)/2);
    background: var(--c);
    transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

/* STICKY HEADER AND FIRST COLUMN TABLE */
table.table-col1-sticky thead th:first-child, table.table-col1-sticky tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 40vw;
}

/* DATATABLES */
table.dataTable thead>tr>th div.dt-column-header {
    flex-direction: row-reverse;
}
table.dataTable.dtfc-scrolling-left tr>.dtfc-fixed-left::after {
    box-shadow: inset 1px 0 0 0 var(--bs-border-color);
}
table.dataTable.dtfc-scrolling-right tr>.dtfc-fixed-right::after {
    box-shadow: inset -1px 0 0 0 var(--bs-border-color);
}
table.table.dataTable>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-body-color);
}
table.table.dataTable.table-hover>tbody>tr.selected:hover>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.3);
}

/* FULL CALENDAR */
.fc-list-day-header { top: var(--dn-fixed-navbar-height) !important; }
.calendar-heading {
    position: absolute;
    height: 40px;
    top: 1rem;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
}
.fc-event-title {
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media only screen and (max-width: 612px) {
    .calendar-heading {
        position: relative;
        top: 5px;
    }
}

/* TILES */
div.tile-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 0.5rem;
    justify-items: center;
    --w: 80px;
}
div.tile-dashboard > form { display: none; }
.tile {
    border: none;
    background: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.tile span.small-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--w);
    width: var(--w);
    border-radius: var(--bs-border-radius);
    position: relative;
    background-color: var(--dn-tile-bg);
    color: var(--dn-tile-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease;
}
.tile:hover span.small-box, .tile-dashboard-cards a.card:hover {
    box-shadow: 0 1px 13px 4px rgba(var(--bs-accent-bg-rgb), 0.3);
}
.tile span.small-box > i {
    display: block;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    position: relative;
    top: initial;
    right: initial;
    font-size: 43px;
}
span.tile-title {
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    max-width: 90px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 3px 0px 0px 0px;
}

/* TILE COLLECTION STUFF */
.tile-collection > span.small-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    grid-auto-rows: min-content;
    grid-gap: 5px;
    padding: 5px;
    overflow: hidden;
}
.tile-collection > span.small-box > .tile > span.small-box {
    --w: 20px;
    margin: 0px;
    border-radius: 3px;
    box-shadow: none;
}
.tile-collection > span.small-box > .tile > span.small-box > i {
    font-size: 11px;
}
.tile-collection > span.small-box > .tile button,
.tile-collection > span.small-box > .tile > span.tile-title {
    display: none;
}

/* TILE DASHBOARD CARDS */
.tile-dashboard.tile-dashboard-cards {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 0.8rem;
}
.tile-dashboard-cards a.card { transition: background .15s ease-in-out, box-shadow .15s ease-in-out; }
.tile-dashboard-cards a.card > span.ratio > i {
    position: relative;
    height: auto;
    width: auto;
    font-size: 80px;
}
.tile-dashboard.tile-dashboard-cards .btn.card .border-top { transition: border-color .15s ease-in-out; }
.tile-dashboard.tile-dashboard-cards .btn.card:hover { --bs-border-color: var(--bs-btn-hover-border-color); }

/* TILE DASHBOARD LARGE CARDS */
div.row.tile-dashboard-cards a.card > span.ratio > i { font-size: 90px; }
div.row.tile-dashboard-cards a.card > span.ratio { background-size: auto; }

/* LARGE TILES ON DESKTOP */
@media only screen and (min-width: 590px) {
    body.large-tiles div.dn-main div.tile-dashboard {
        --w: 173px;
        grid-template-columns: repeat(auto-fill, var(--w));
        justify-content: center;
    }
    body.large-tiles div.dn-main span.small-box {
        padding-bottom: 22px;
    }
    body.large-tiles div.dn-main span.small-box > i {
        font-size: 70px;
    }
    body.large-tiles div.dn-main span.tile-title {
        position: absolute;
        bottom: 10px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(8px);
        color: white;
        line-height: 1.3;
        padding: 0 0.2rem;
        border-radius: var(--bs-border-radius);
        max-width: 140px;
    }
    body.large-tiles div.dn-main .tile-collection > span.small-box > .tile > span.small-box {
        --w: 51px;
        padding-bottom: unset;
    }
    body.large-tiles div.dn-main .tile-collection > span.small-box > .tile > span.small-box > i {
        font-size: 28px;
    }
}

/* DIV OVERLAYS */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    color: #ffffff;
    z-index: 3;
}
.card > .overlay { border-radius: var(--bs-border-radius); }

/* Select2 */
.select2-container .select2-search--inline .select2-search__field::placeholder { line-height: unset; }
.select2-container--bootstrap-5 .select2-selection { background-color: var(--bs-body-bg) !important; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    color: var(--bs-body-color) !important;
}
.select2-container--bootstrap-5 .select2-selection, .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    border-radius: var(--bs-border-radius);
    border-color: var(--bs-border-color) !important;
    overflow: hidden;
}
.select2-container--bootstrap-5 .select2-selection, .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
    border-bottom: 1px solid var(--bs-primary-contrast, var(--bs-primary)) !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
    padding: 0.5rem;
    border: none;
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-dropdown-shadow);
    background-color: var(--bs-body-bg);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    padding: .25rem 1rem;
    transition: background-color 0.2s, color 0.2s;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted:not(.select2-results__option--selected):not(.select2-results__option--disabled):not([aria-disabled=true]) {
    background-color: rgba(var(--bs-accent-bg-rgb), 0.05) !important;
    color: inherit !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
    background-color: rgba(var(--bs-primary-rgb), .4) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled=true] {
    background-color: unset !important;
    cursor: default;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search {
    margin-bottom: 0.5rem;
    padding: 0 !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-body-bg) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
    color: var(--bs-body-color);
    line-height: 2;
    font-weight: 600;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
    background: transparent url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") center/0.75rem auto no-repeat !important;
}

/* Google autocompleter */
.pac-container {
    z-index: 1056 !important;
}

/* TinyMCE 8 (.tox-*) - The v8 skin exposes only --tox-private-*
   custom properties, which are internal and can change between releases, so
   these override concrete properties instead. */

/* Editor shell */
.tox.tox-tinymce {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius);
    overflow: unset;
}
.tox .tox-editor-header {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    z-index: unset !important;
}
.tox .tox-editor-header,
.tox .tox-menubar,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord,
.tox .tox-statusbar,
.tox .tox-edit-area,
.tox .tox-sidebar-wrap,
.tox.tox-tinymce-aux .tox-toolbar__overflow {
    background-color: var(--bs-body-bg) !important;
}

/* Inline styles */
.tox-tinymce-inline {
  z-index: 1050 !important;
}
.tox.tox-tinymce-inline .tox-editor-header {
    border-radius: var(--bs-border-radius) !important;
    border: unset !important;
}

.tox .tox-editor-container, .tox .tox-edit-area {
    overflow: unset !important;
}
/* The skin draws the separator lines between toolbar rows as a hardcoded
   #e3e3e3 repeating-linear-gradient (skin.css ~6095), which is a
   background-IMAGE - so the background-color override above does not touch it.
   Left alone it shows as pale grey lines that vanish on a light theme and
   read wrong on a dark one. Repainted from the CRM border colour instead. */
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar__overflow,
.tox.tox-tinymce-aux .tox-toolbar__overflow {
    background-image: repeating-linear-gradient(var(--bs-border-color) 0 1px, transparent 1px 39px) !important;
}

/* The skin gives the header a hardcoded dark drop shadow, which reads as a
   smudge on anything but a white page. A plain border matches the CRM. */
.tox:not(.tox-tinymce-inline) .tox-editor-header,
.tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-sticky-on .tox-editor-header {
    box-shadow: none !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

/* Text throughout the chrome. Excludes the editable area (.mce-content-body
   lives inside the iframe) and the SVG colour swatches on the fore/back colour
   buttons, which carry their own fill. */
/* The skin sets `fill` directly on the SVGs (e.g. `.tox .tox-tbtn svg
   { fill: #222f3e }`) at the same specificity as these rules, and TinyMCE
   injects its stylesheet at runtime - so it always lands AFTER this file in
   the cascade. Every declaration the skin also sets therefore needs
   !important, or the icons stay dark on a dark toolbar. */
.tox .tox-tbtn,
.tox .tox-mbtn,
.tox .tox-tbtn__select-label,
.tox .tox-mbtn__select-label,
.tox .tox-statusbar,
.tox .tox-statusbar a,
.tox .tox-statusbar__path-item,
.tox .tox-statusbar__wordcount,
.tox .tox-collection__item-label,
.tox .tox-dialog__title,
.tox .tox-label,
.tox .tox-toolbar-label {
    color: var(--bs-body-color) !important;
}
.tox .tox-tbtn svg,
.tox .tox-mbtn svg,
.tox .tox-collection__item-icon svg,
.tox .tox-collection__item-caret svg,
.tox .tox-tbtn:hover svg,
.tox .tox-tbtn:focus svg,
.tox .tox-tbtn:active svg,
.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg,
.tox .tox-split-button:hover svg,
.tox .tox-dialog__body-content svg,
.tox .tox-swatches__picker-btn svg,
.tox .tox-listbox__select-chevron svg,
.tox .tox-statusbar__resize-handle svg,
.tox .tox-statusbar__branding svg {
    fill: var(--bs-body-color) !important;
}
.tox .tox-tbtn--enabled svg,
.tox .tox-tbtn--enabled:hover svg,
.tox .tox-tbtn--enabled:focus svg,
.tox .tox-tbtn--enabled:active svg {
    fill: var(--bs-primary-contrast) !important;
}
/* The fore/back colour buttons carry an SVG swatch showing the SELECTED
   colour, set as a fill attribute on the element. Must not be recoloured. */
.tox .tox-tbtn svg .tox-icon-text-color__color,
.tox .tox-tbtn svg .tox-icon-highlight-bg-color__color {
    fill: revert-layer !important;
}

/* Dropdown chevrons. The skin hardcodes fill: rgba(34,47,62,.5) on these, so
   they stay dark regardless of the surrounding theme. */
.tox .tox-tbtn__select-chevron svg,
.tox .tox-mbtn__select-chevron svg,
.tox .tox-split-button__chevron svg {
    fill: var(--bs-body-color) !important;
    opacity: .5;
}
/* The skin also hardcodes background:#fff / color:#222f3e on this focus state. */
.tox .tox-split-button__chevron:focus {
    background: rgba(var(--bs-accent-bg-rgb), 0.05) !important;
    color: var(--bs-body-color) !important;
}

/* Toolbar and menubar buttons.
   The skin sets `background: #fff` on .tox-tbtn, which shows as white boxes on
   a themed toolbar - so this must be !important, not merely `transparent`
   (transparent alone still lost to the later-loading skin). */
.tox .tox-tbtn,
.tox .tox-mbtn,
.tox .tox-split-button {
    background: transparent !important;
}
/* Bespoke buttons are the dropdown selects (Paragraph, Sans Serif, 12pt). The
   skin sets them a shade off the toolbar (#f7f7f7) so they read as fields
   rather than icon buttons; the transparent rule above would flatten that, so
   the distinction is restored here from the theme instead of a fixed grey.
   Must come AFTER that rule - both are !important at equal specificity, so
   source order decides. */
.tox .tox-tbtn--bespoke {
    background: rgba(var(--bs-accent-bg-rgb), 0.05) !important;
}
.tox .tox-tbtn:hover,
.tox .tox-tbtn:focus,
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover,
.tox .tox-mbtn:hover,
.tox .tox-mbtn:focus,
.tox .tox-mbtn--active,
.tox .tox-split-button:hover {
    background: rgba(var(--bs-primary-contrast-rgb), 0.2) !important;
    border-color: rgba(var(--bs-primary-contrast-rgb), 0.25) !important;
    box-shadow: none !important;
}
/* Restated after the generic hover/focus block above: those selectors match
   bespoke buttons too at equal specificity, so source order decides and these
   have to come last to keep the shade distinct in every state. */
.tox .tox-tbtn--bespoke:hover,
.tox .tox-tbtn--bespoke:focus {
    background: rgba(var(--bs-accent-bg-rgb), 0.1) !important;
}
/* Disabled buttons. The icon fill above is !important, so the greying has to
   come from opacity on the button rather than a lighter fill. */
.tox .tox-tbtn--disabled,
.tox .tox-tbtn--disabled:hover,
.tox .tox-tbtn:disabled,
.tox .tox-tbtn:disabled:hover,
.tox .tox-mbtn:disabled {
    background: transparent !important;
    opacity: .4 !important;
}
.tox .tox-tbtn--disabled svg,
.tox .tox-tbtn:disabled svg {
    fill: var(--bs-body-color) !important;
}

/* Menus and dropdown collections */
.tox .tox-menu,
.tox .tox-collection--list,
.tox .tox-collection--toolbar,
.tox .tox-swatches-menu {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}
.tox .tox-collection__group {
    border-color: var(--bs-border-color) !important;
}
/* Collection items have two independent states the skin colours differently
   per variant, and both hardcode light-theme values:
     --enabled  the item currently applied (e.g. the active font/format)
     --active   the item under the cursor / keyboard focus
   Keeping them distinct matters - flattening both to one colour makes it
   impossible to see which format is applied while hovering the list. */
.tox .tox-collection--list .tox-collection__item--enabled:not(.tox-collection__item--state-disabled),
.tox .tox-collection--grid .tox-collection__item--enabled:not(.tox-collection__item--state-disabled),
.tox .tox-collection--toolbar .tox-collection__item--enabled:not(.tox-collection__item--state-disabled) {
    background-color: rgba(var(--bs-primary-contrast-rgb), 0.12) !important;
    color: var(--bs-primary-contrast) !important;
}
.tox .tox-collection__item--active,
.tox .tox-collection__item--active:not(.tox-collection__item--state-disabled),
.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled),
.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled),
.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled),
.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled):hover {
    background-color: rgba(var(--bs-accent-bg-rgb), 0.05) !important;
    color: var(--bs-body-color) !important;
}
/* Applied AND hovered - keep the applied tint so it stays identifiable. */
.tox .tox-collection--list .tox-collection__item--enabled.tox-collection__item--active:not(.tox-collection__item--state-disabled),
.tox .tox-collection--grid .tox-collection__item--enabled.tox-collection__item--active:not(.tox-collection__item--state-disabled),
.tox .tox-collection--toolbar .tox-collection__item--enabled.tox-collection__item--active:not(.tox-collection__item--state-disabled) {
    background-color: rgba(var(--bs-primary-contrast-rgb), 0.18) !important;
}
.tox .tox-collection__item--state-disabled {
    background: var(--bs-body-bg) !important;
    opacity: .4 !important;
}

/* Dialogs */
/* .tox-dialog__body-nav-item is deliberately NOT in this list: the skin gives
   it no background of its own, so it inherits the dialog surface. Forcing one
   here would also override its :focus highlight below. */
.tox .tox-dialog,
.tox .tox-dialog__header,
.tox .tox-dialog__footer,
.tox .tox-dialog__body {
    background-color: var(--bs-body-bg) !important;
}
/* The skin sets `color: #222f3e` on the dialog body. Most of the dialog's text
   has no colour of its own and inherits from here, so this one declaration
   covers the body copy, help text and anything else unstyled. */
.tox .tox-dialog__body,
.tox .tox-dialog__body-content,
.tox .tox-dialog__body-content p,
.tox .tox-form__group > label {
    color: var(--bs-body-color) !important;
}
.tox .tox-dialog-wrap {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.tox .tox-dialog-wrap__backdrop {
    background-color: #000 !important;
    opacity: 0.5;
}
.tox .tox-dialog,
.tox .tox-dialog__header,
.tox .tox-dialog__footer {
    border-color: var(--bs-border-color) !important;
}

/* Dialog tabs. The skin gives every tab `border-bottom: 2px solid transparent`
   and only colours it on --active, so the transparent border must be kept -
   colouring it on the base selector would underline every tab. The inactive
   label is a hardcoded rgba(34,47,62,.7), which disappears on a dark theme. */
.tox .tox-dialog__body-nav-item {
    border-bottom-color: transparent !important;
    color: var(--bs-body-color) !important;
    opacity: .7;
}
.tox .tox-dialog__body-nav-item--active {
    border-bottom-color: var(--bs-primary-contrast, var(--bs-primary)) !important;
    color: var(--bs-primary-contrast, var(--bs-primary)) !important;
    opacity: 1;
}

/* Form fields */
.tox .tox-textfield,
.tox .tox-textarea,
.tox .tox-selectfield select,
.tox .tox-toolbar-textfield {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}
.tox .tox-textfield:focus,
.tox .tox-textarea:focus,
.tox .tox-selectfield select:focus {
    border-color: var(--bs-primary-contrast, var(--bs-primary)) !important;
    box-shadow: none !important;
}

/* Dialog buttons. NOTE the inversion vs Tiny 4: in v8 `.tox-button` IS the
   primary style and `--secondary` is the modifier, where v4 needed an explicit
   `.mce-primary`. */
.tox .tox-button {
    background-color: #2276d2 !important;
    border-color: #2276d2 !important;
    color: #ffffff !important;
}
.tox .tox-button:hover:not(:disabled) {
    background-color: #1b5fa8 !important;
    border-color: #1b5fa8 !important;
}
.tox .tox-button svg {
    fill: #ffffff !important;
}
.tox .tox-button--secondary,
.tox .tox-button--naked {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}
.tox .tox-button--secondary svg,
.tox .tox-button--naked svg {
    fill: var(--bs-body-color) !important;
}
.tox .tox-button--secondary:hover:not(:disabled),
.tox .tox-button--naked:hover:not(:disabled) {
    background-color: rgba(var(--bs-accent-bg-rgb), 0.05) !important;
}

/* Editor focus ring. The skin draws it as a ::before overlay with a hardcoded
   2px #006ce7 border, faded in by `.tox.tox-edit-focus .tox-edit-area::before
   { opacity: 1 }`. Swapped for the same border-color + box-shadow the CRM's
   form controls use on focus, so the editor matches every other input. */
.tox .tox-edit-area::before {
    border: 0 !important;
    border-radius: var(--bs-border-radius) !important;
    transition: box-shadow .15s, border-color .15s !important;
}
.tox.tox-edit-focus .tox-edit-area::before {
    border: 1px solid var(--bs-primary-contrast, var(--bs-primary)) !important;
    box-shadow: 0 0 0 0.25rem rgb(var(--bs-primary-contrast-rgb, var(--bs-primary-rgb)), .25) !important;
    border-radius: 0 !important;
}

/* Keyboard focus rings. The skin draws these as a ::after overlay with a
   hardcoded `box-shadow: 0 0 0 2px #006ce7` and uses the same pattern on ~20
   elements (toolbar and menubar buttons, split buttons, statusbar items,
   number inputs, grid/toolbar collection items), so they are all repointed at
   the company primary here rather than one at a time. */
.tox .tox-mbtn:focus:not(:disabled)::after,
.tox .tox-tbtn:focus::after,
.tox .tox-tbtn--enabled:focus::after,
.tox .tox-split-button__main:focus::after,
.tox .tox-split-button__chevron:focus::after,
.tox .tox-number-input button:focus::after,
.tox .tox-number-input:focus::after,
.tox .tox-number-input .tox-input-wrapper:focus::after,
.tox .tox-statusbar a:focus-visible::after,
.tox .tox-statusbar__path-item:focus-visible::after,
.tox .tox-statusbar__wordcount:focus-visible::after,
.tox .tox-statusbar__resize-handle:focus-visible::after,
.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled):focus::after,
.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled):focus::after {
    box-shadow: 0 0 0 2px var(--bs-primary-contrast, var(--bs-primary)) !important;
}
.tox .tox-number-input:focus,
.tox .tox-card:focus-visible,
.tox .tox-card--selected {
    box-shadow: 0 0 0 2px var(--bs-primary-contrast, var(--bs-primary)) !important;
}
/* Same ring on the dialog form controls - these show up in Insert/Edit Image,
   Insert/Edit Media and the link dialog. */
.tox .tox-textarea-wrap:focus-within,
.tox .tox-listboxfield .tox-listbox--select:focus,
.tox .tox-toolbar-textfield:focus,
.tox .tox-custom-editor:focus-within,
.tox .tox-focusable-wrapper:focus,
.tox input.tox-checkbox__input:focus + .tox-checkbox__icons,
.tox input:focus + .tox-toggle__slider,
.tox .tox-navobj-bordered-focus.tox-navobj-bordered::before {
    box-shadow: 0 0 0 2px var(--bs-primary-contrast, var(--bs-primary)) !important;
}

/* Tiny's upsell chrome - not part of the CRM UI. */
.tox .tox-promotion {
    display: none !important;
}

.tox .tox-statusbar {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

/* START - Spectrum - color picker that allows RGBA */
.sp-replacer.form-control {
    position: relative;
    padding: .375rem .75rem;
    border-color: var(--bs-border-color);
}
.sp-replacer.form-control > .sp-dd {
    height: unset;
    padding: unset;
    line-height: inherit;
    font-size: inherit;
}
.sp-replacer.form-control > .sp-preview {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: unset;
    height: unset;
    border: none;
    margin: unset;
}
.sp-replacer.form-control:hover {
    border-color: var(--bs-border-color);
}
.sp-replacer.form-control.sp-active {
    border-color: var(--bs-primary-contrast, var(--bs-primary));
    box-shadow: 0 0 0 0.25rem rgb(var(--bs-primary-contrast-rgb, var(--bs-primary-rgb)), .25);
}
.sp-container.dropdown-menu {
    background-color: var(--bs-body-bg);
    border: none;
    border-radius: var(--bs-border-radius);
}
.sp-container.dropdown-menu > .sp-picker-container {
    border-left: unset;
}
.sp-container.dropdown-menu .sp-color,
.sp-container.dropdown-menu .sp-hue,
.sp-container.dropdown-menu .sp-clear,
.sp-container.dropdown-menu .sp-sat,
.sp-container.dropdown-menu .sp-val,
.sp-container.dropdown-menu .sp-slider,
.sp-container.dropdown-menu .sp-alpha,
.sp-container.dropdown-menu .sp-alpha-inner,
.sp-container.dropdown-menu .sp-alpha-handle {
    border-radius: var(--bs-border-radius);
    border-color: var(--bs-border-color);
}
.sp-container.dropdown-menu .sp-val > .sp-dragger {
    border-color: var(--bs-border-color);
}
.sp-container.dropdown-menu .sp-slider {
    left: -2px;
    right: -2px;
    height: 4px;
}
.sp-container.dropdown-menu .sp-input-container {
    margin-bottom: unset;
}
.sp-container.dropdown-menu .sp-input {
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    font-family: sans-serif;
}
.sp-container.dropdown-menu .sp-input:focus-visible {
    border-color: var(--bs-primary-contrast, var(--bs-primary));
    box-shadow: 0 0 0 0.25rem rgb(var(--bs-primary-contrast-rgb, var(--bs-primary-rgb)), .25);
    outline: none;
}
/* END - Spectrum */

/* ROCKETCHAT CUSTOMIZATIONS */
div.rocketchat-widget { bottom: -72px !important; }
#rocketchat-iframe { color-scheme: auto; }

/* SEARCH FIELDS */
.input-group-search { position: relative; }
.input-group-search > input[type="search"].form-control {
    padding-left: 2.1rem;
}
.input-group-search .select2-container--bootstrap-5 .select2-selection--multiple {
    padding-left: 2.25rem;
}
.input-group-search:before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    content: "\f002";
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    z-index: 6;
    pointer-events: none;
}

/* KEYBOARD KEYS */
.keyboard-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    width: 20px;
    font-size: .575rem;
    border-radius: 2px;
    background-color: rgba(var(--bs-accent-bg-rgb), 0.1);
}

/* GENERAL BOOTSTRAP CUSTOMIZATION */
a { text-decoration: none; }
.card:not(.btn), .card[data-tile-id] {
    border: none;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.card .card:not(.btn:focus) {
    border: 1px solid var(--bs-border-color);
    box-shadow: none;
}
.accordion {
    border-radius: var(--bs-border-radius);
    --bs-accordion-bg: none;
    --bs-accordion-active-bg: rgba(var(--bs-accent-bg-rgb), 0.04);
    --bs-accordion-active-color: initial;
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
    --bs-accordion-inner-border-radius: var(--bs-border-radius);
    --bs-accordion-btn-padding-x: 10px;
    --bs-accordion-btn-padding-y: 14px;
    --bs-accordion-body-padding-x: 8px;
    --bs-accordion-body-padding-y: 5px;
}
.accordion:not(.accordion-flush) .accordion-item { border: none; }
.accordion-button {
    font-size: inherit;
    font-weight: inherit;
    border-radius: var(--bs-border-radius);
}
.accordion-button:focus:not(:focus-visible) {
    box-shadow: none;
}
.accordion-button:hover {
    background-color: rgba(var(--bs-accent-bg-rgb), 0.07);
    color: inherit;
}
.accordion-button:not(.collapsed):not(:focus-visible) {
    box-shadow: none;
}
a.accordion-button::after {
    --bs-accordion-btn-icon: none !important;
    --bs-accordion-btn-active-icon: none !important;
}
.list-group {
    --bs-list-group-active-bg: var(--bs-primary-contrast, var(--bs-primary));
    --bs-list-group-active-border-color: var(--bs-primary-contrast, var(--bs-primary));
    --bs-list-group-active-color: var(--bs-primary-contrast-text, #fff);
}
.list-group-item-action { cursor: pointer; }
.badge { --bs-badge-color: var(--bs-body-color); }
.badge.btn {
    --bs-btn-font-weight: var(--bs-badge-font-weight);
    --bs-btn-padding-x: var(--bs-badge-padding-x);
    --bs-btn-padding-y: var(--bs-badge-padding-y);
}
.dropdown-menu, .autocomplete-suggestions {
    padding: 0.5rem;
    border: none;
    box-shadow: var(--bs-dropdown-shadow);
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary-contrast, var(--bs-primary));
    --bs-dropdown-link-active-color: var(--bs-primary-contrast-text, #fff);
    --bs-dropdown-item-border-radius: var(--bs-border-radius);
}
.autocomplete-suggestions {
    background: var(--bs-body-bg);
    overflow: auto;
}
.dropdown-item, .autocomplete-suggestion {
    cursor: pointer;
    padding: .25rem 1rem;
    transition: background-color 0.2s;
}
.autocomplete-selected {
    background: rgba(var(--bs-accent-bg-rgb), 0.07);
}
.dropdown-item {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
.dropdown-item i {
    width: 20px;
    text-align: center;
}
.form-label, .col-form-label { font-weight: 500; }
.form-label { margin-bottom: 0.3rem; }
.form-control:not(.is-invalid):focus, .form-select:not(.is-invalid):focus, .select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection, .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--bs-primary-contrast, var(--bs-primary)) !important;
    box-shadow: 0 0 0 0.25rem rgb(var(--bs-primary-contrast-rgb, var(--bs-primary-rgb)), .25) !important;
}
.form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--bs-primary-contrast, var(--bs-primary));
    border-color: var(--bs-primary-contrast, var(--bs-primary));
}
.form-check-input[type="checkbox"]:checked, .form-check-input[type="radio"]:checked {
    --bs-form-check-bg-image: var(--bs-form-check-mark);
}
.form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: var(--bs-form-check-indeterminate-mark);
}
.form-check-input:focus {
    border-color: var(--bs-primary-contrast, var(--bs-primary));
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-contrast-rgb, var(--bs-primary-rgb)), .25);
}
.input-group.w-auto { display: inline-flex; }
.form-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: .25rem;
}
.form-switch .form-label {
    margin: 0;
}
.form-switch .form-check-input {
    float: unset;
    margin: 0;
    height: 1.2em;
    width: 2.5em;
    border-radius: 2em;
}
input[type=range]::-webkit-slider-thumb { background: var(--bs-primary-contrast, var(--bs-primary)); }
input[type=range]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--bs-primary-contrast-rgb, var(--bs-primary-rgb)), .25); }
.form-range::-webkit-slider-thumb:active { background-color: rgba(var(--bs-primary-rgb), .4); }
.form-control-color {
    padding: 0;
    overflow: hidden;
}
.form-control-color::-webkit-color-swatch {
    border: none;
    border-radius: 0px;
}
.nav-link {
    color: inherit;
}
.btn-link {
    text-decoration: none;
    outline: none !important;
    --bs-btn-font-weight: 500;
    --bs-btn-hover-bg: rgba(var(--bs-accent-bg-rgb), 0.05);
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.1);
    --bs-btn-padding-x: 6px;
    --bs-btn-padding-y: 0px;
}
.btn-link.dropdown-toggle { --bs-btn-focus-box-shadow: none; }
.dropdown-toggle.no-caret:after { content: unset; }
.btn-default {
    --bs-btn-color: inherit;
    --bs-btn-bg: rgba(var(--bs-accent-bg-rgb), 0.05);
    --bs-btn-border-color: rgba(var(--bs-accent-bg-rgb), 0.05);
    --bs-btn-hover-bg: rgba(var(--bs-accent-bg-rgb), 0.1);
    --bs-btn-hover-border-color: rgba(var(--bs-accent-bg-rgb), 0.1);
    --bs-btn-active-bg: rgba(var(--bs-accent-bg-rgb), 0.15);
    --bs-btn-active-border-color: rgba(var(--bs-accent-bg-rgb), 0.2);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .25);
    --bs-btn-disabled-bg: var(--bs-btn-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-bg);
}
.btn-outline-default {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-border-color: rgba(var(--bs-accent-bg-rgb), 0.45);
    --bs-btn-active-bg: rgba(var(--bs-accent-bg-rgb), 0.45);
    --bs-btn-active-border-color: rgba(var(--bs-accent-bg-rgb), 0.01);
}
.btn-transparent {
    --bs-btn-bg: transparent;
    --bs-btn-color: inherit;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: rgba(var(--bs-accent-bg-rgb), 0.05);
    --bs-btn-hover-border-color: rgba(var(--bs-accent-bg-rgb), 0.1);
    --bs-btn-active-bg: rgba(var(--bs-accent-bg-rgb), 0.1);
    --bs-btn-active-border-color: rgba(var(--bs-accent-bg-rgb), 0.2);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .25);
    --bs-btn-disabled-border-color: transparent;
}
.bg-dark .btn-transparent, .text-bg-dark .btn-transparent {
    --bs-btn-border-color: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.1);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.15);;
    color: #fff;
}
.btn-app-store {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #19a8f3;
    --bs-btn-border-color: #1698de;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #1698de;
    --bs-btn-hover-border-color: #158bcb;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #158bcb;
    --bs-btn-active-border-color: #137cb5;
    --bs-btn-disabled-bg: #19a8f3;
    --bs-btn-disabled-border-color: #1698de;
}
.btn-google-play {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #33c476;
    --bs-btn-border-color: #2aa161;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #2aa161;
    --bs-btn-hover-border-color: #248953;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #248953;
    --bs-btn-active-border-color: #207c4b;
    --bs-btn-disabled-bg: #33c476;
    --bs-btn-disabled-border-color: #2aa161;
}
.btn-frosted {
    --bs-btn-color: inherit;
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-bg: rgba(var(--bs-body-bg-rgb), 0.5);
    --bs-btn-hover-bg: rgba(var(--bs-body-bg-rgb), 0.6);
    --bs-btn-active-bg: rgba(var(--bs-body-bg-rgb), 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(20px);
}
.hidden { display: none; }
.text-shadow {
    --stroke-size: 6px;
    text-shadow: var(--bs-dark) 0 0 var(--stroke-size);
}
.text-shadow-sm { --stroke-size: 2px; }
.toast { --bs-toast-spacing: 1rem; }
.table { --bs-table-active-bg: rgba(var(--bs-primary-rgb), 0.1); }
.table tbody:not(:last-child) { border-bottom-width: 1px; }
.table td { vertical-align: middle; }
.table tr:last-child td { border-bottom-width: 0px; }
.table tr[onclick], table.table-hover { cursor: pointer; }
.table-hover > tbody > tr > td { transition: box-shadow 0.2s; }
.bg-cover {
    background-position: center;
    background-size: cover;
}
.bg-contain {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.bg-orange { background-color: #fd7e14 !important; }
.bg-default { background-color: rgba(var(--bs-accent-bg-rgb), 0.1) !important; }
.text-bg-default {
    color: inherit !important;
    background-color: rgba(var(--bs-accent-bg-rgb), 0.1) !important;
}
.bg-facebook { background-color: #4267B2 !important; }
.bg-instagram {
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888',GradientType=1);
}
.text-bg-x-twitter {
    color: #e7e9ea !important;
    background-color: #000000 !important;
}
.bg-linkedin { background-color: #0072B1 !important; }
.bg-frosted {
    background: rgba(var(--bs-body-bg-rgb), 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(20px);
}
.bg-delta-create {
    background: -moz-linear-gradient(45deg, #124467 0%, #582166 25%, #b10d62 50%, #db1012 75%, #ff4a22 100%);
    background: -webkit-linear-gradient(45deg, #124467 0%, #582166 25%, #b10d62 50%, #db1012 75%, #ff4a22 100%);
    background: linear-gradient(45deg, #124467 0%, #582166 25%, #b10d62 50%, #db1012 75%, #ff4a22 100%);
    --bs-alert-border-color: #124467;
}
.bg-adwizard { background-color: #156ebb !important; }
.bg-xpressdocs { background-color: #012e57 !important; }

/* Listing status colors */
.text-listing-status-1 { color: var(--listing-status-1) !important; }
.text-listing-status-2 { color: var(--listing-status-2) !important; }
.text-listing-status-3 { color: var(--listing-status-3) !important; }
.text-listing-status-4 { color: var(--listing-status-4) !important; }
.text-listing-status-5 { color: var(--listing-status-5) !important; }
.text-listing-status-8 { color: var(--listing-status-8) !important; }
.text-listing-status-unknown { color: var(--listing-status-unknown) !important; }
.text-bg-listing-status-1 {
    color: #ffffff !important;
    background-color: var(--listing-status-1) !important;
}
.text-bg-listing-status-2 {
    color: var(--bs-dark) !important;
    background-color: var(--listing-status-2) !important;
}
.text-bg-listing-status-3 {
    color: #ffffff !important;
    background-color: var(--listing-status-3);
}
.text-bg-listing-status-4 {
    color: #ffffff !important;
    background-color: var(--listing-status-4);
}
.text-bg-listing-status-5 {
    color: #ffffff !important;
    background-color: var(--listing-status-5);
}
.text-bg-listing-status-8 {
    color: #ffffff !important;
    background-color: var(--listing-status-8);
}

.form-check-block .form-check-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--bs-border-radius);
    min-height: 40px;
    transition: background 0.2s;
}
.form-check-block .form-check-label:hover {
    background: rgba(var(--bs-accent-bg-rgb), 0.05);
}
.form-check-block .form-check-input {
    margin: 0;
    height: 1.2em;
    width: 1.2em;
    min-width: 1.2em;
    background-size: cover;
}
.form-group-nested {
    position: relative;
    padding-left: 12px;
}
.form-group-nested:before {
    content: "";
    position: absolute;
    left: 0;
    width: 5px;
    background: var(--bs-primary-contrast, var(--bs-primary));
    top: 0px;
    bottom: 0px;
    border-radius: 3px;
}
hr {
    margin: 0.6rem 0;
}
.progress {
    --bs-progress-bar-bg: var(--bs-primary-contrast, var(--bs-primary));
    text-shadow: #000 0px 0px 5px;
}
.nav-pills {
    --bs-nav-link-padding-x: 1.5rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-pills-link-active-color: inherit;
    --bs-nav-pills-link-active-bg: rgba(var(--bs-accent-bg-rgb), 0.04);
    --bs-nav-link-hover-color: unset;
}
.nav-pills .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.nav-pills .nav-link:hover {
    background-color: rgba(var(--bs-accent-bg-rgb), 0.07);
}
.nav-pills:not(.nav-pills-simple) .nav-link.active:before {
    content: "";
    background-color: var(--bs-primary-contrast, var(--bs-primary));
    position: absolute;
    left: 15%;
    right: 15%;
    top: 90%;
    bottom: 0px;
    border-radius: 3px;
}

.nav-pills-simple {
    --bs-nav-link-padding-x: 0.8rem;
    --bs-nav-link-padding-y: 0.4rem;
    --bs-nav-link-font-size: 0.95rem;
    --bs-nav-link-font-weight: 600;
    --bs-nav-pills-border-radius: 1.1rem;
    --bs-nav-pills-link-active-color: var(--bs-primary-text-emphasis);
    --bs-nav-pills-link-active-bg: rgba(var(--bs-primary-rgb), 0.1);
    --bs-nav-link-hover-color: unset;
    gap: .25rem !important;
}
.nav-pills-simple .nav-link:hover { background: rgba(var(--bs-accent-bg-rgb), 0.05); }
.nav-pills-simple .nav-link.active:hover { background: rgba(var(--bs-primary-rgb), 0.15); }

/* Separator text (like an <hr> tag but with text in the middle) */
.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--bs-border-color);
}
.separator:not(:empty)::before { margin-right: .25em; }
.separator:not(:empty)::after { margin-left: .25em; }

/* Extra small inputs */
input.form-control.form-control-xs, select.form-select.form-select-xs {
    font-size: .875rem;
    border-radius: var(--bs-border-radius-sm);
}
input.form-control.form-control-xs {
    padding: 0 0.25rem;
}
select.form-select.form-select-xs {
    padding: 0 1.35rem 0 0.25rem;
    background-position: right .25rem center;
}

/* Testimonial star colors */
.dmg_testimonial_stars {
    color: #ccc;
    transition: color 0.2s;
}
.dmg_testimonial_stars.on { color: var(--testimonial-stars); }

/* Delta Create */
div#company_carousel > .carousel-inner  > .carousel-item > .current,
div#company_carousel > .carousel-inner  > .carousel-item > .pictures > hr {
    display: none !important;
}
/* End Delta Create */

/* Company News */
.cna-views:hover, .cna-likes-button:hover, .cna-like-count:hover {
    cursor: pointer;
    text-decoration: underline;
}
/* End Company News */

/* ── Wrapper ─────────────────────────────────────────────── */
.ticker        { overflow: hidden; width: 100%; display: block; }
.ticker-slow   { --ticker-speed: 16s; }
.ticker-fast   { --ticker-speed:  6s; }

/* ── Inner element ───────────────────────────────────────── */
.ticker > * {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-loop var(--ticker-speed, 10s) linear infinite;
  will-change: transform, opacity;
}
.ticker:hover > * { animation-play-state: paused; }

/* ── Keyframes ───────────────────────────────────────────── */
/*   --scroll-distance is set by the JS init below.          */
@keyframes ticker-loop {
  0% {                                         /* start at left edge  */
    transform: translateX(0px);
    opacity: 1;
    animation-timing-function: ease-in-out;   /* smooth scroll glide */
  }

  65% {                                        /* end of text at right edge … */
    transform: translateX(var(--scroll-distance, 0px));
    opacity: 1;
    animation-timing-function: linear;
  }

  80% {                                        /* … hold (pause) … */
    transform: translateX(var(--scroll-distance, 0px));
    opacity: 1;
    animation-timing-function: ease-in;       /* ease into fade */
  }

  88% {                                        /* fully faded out */
    transform: translateX(var(--scroll-distance, 0px));
    opacity: 0;
    animation-timing-function: step-start;    /* instant jump next segment */
  }

  88.001% {                                    /* invisible — snap to start */
    transform: translateX(0px);
    opacity: 0;
    animation-timing-function: ease-out;      /* ease out of fade-in */
  }

  100% {                                       /* fully faded back in */
    transform: translateX(0px);
    opacity: 1;
  }
}

/* Custom scrollbar */
.dn-sidebar::-webkit-scrollbar, #top-navigation > div.navbar-section > div.dropdown > .dropdown-menu::-webkit-scrollbar { width: 8px; }
.dn-sidebar::-webkit-scrollbar-track { background: transparent; }
#top-navigation > div.navbar-section > div.dropdown > .dropdown-menu::-webkit-scrollbar-track { background: #ffffff; }
.dn-sidebar::-webkit-scrollbar-thumb, #top-navigation > div.navbar-section > div.dropdown > .dropdown-menu::-webkit-scrollbar-thumb { border-radius: 8px; }
.dn-sidebar:hover::-webkit-scrollbar-thumb, #top-navigation > div.navbar-section > div.dropdown > .dropdown-menu:hover::-webkit-scrollbar-thumb { background-color: rgba(var(--bs-accent-bg-rgb), 0.15) !important; }
.dn-sidebar, #top-navigation > div.navbar-section > div.dropdown > .dropdown-menu { scrollbar-color: rgba(var(--bs-accent-bg-rgb), 0.2) transparent; }

/* WIDGET SPECIFIC STUFF */
div[data-widget] .active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}
div[data-widget] .active-filters button.badge i { transition: color 0.2s; }
div[data-widget] .active-filters button.badge:hover i { color: var(--bs-danger); }
div[data-widget] .selected-actions-container {
    position: sticky;
    bottom: var(--dn-bottom-nav-height);
    z-index: 5;
    border-bottom-left-radius: var(--bs-card-border-radius);
    border-bottom-right-radius: var(--bs-card-border-radius);
    padding: 0;
}
#dmg_mcfl_wrapper { width: auto !important; }
div[data-widget="customer_list"] .btn-profile > .profile-picture { transition: border-color 0.2s ease; }
div[data-widget="customer_list"] .btn-profile:hover { cursor: pointer; }
div[data-widget="customer_list"] .btn-profile:hover > .profile-picture { border-color: var(--bs-primary-text-emphasis) !important; }
div[data-widget="company_roster"] .agent-image { transition: border-color 0.2s ease; }
div[data-widget="company_roster"] .agent-image:hover {
    border-color: var(--bs-primary-text-emphasis);
    cursor: pointer;
}
div[data-widget="cloud_delta"] .dragover { border: 1px solid; }
div[data-widget="cloud_delta"] .dragover *:not(td) { pointer-events: none; }
/* AI site chat settings preview: the real widget in a fixed 440×740 screen, scaled to the column by ai_site_chat.js.
   The transform also makes the widget's position:fixed launcher and panel sit inside the screen instead of the window. */
div[data-widget="ai/site_chat"] .site-chat-preview { position: relative; height: 740px; }
div[data-widget="ai/site_chat"] .site-chat-preview-screen { position: absolute; top: 0; left: 0; width: 440px; height: 740px; transform: scale(var(--site-chat-preview-scale, 1)); transform-origin: 0 0; }

@media only screen and (max-width: 575.98px) {
    .dn-dropdown-open {
        overflow: hidden;
    }
    .container-xxl {
        --bs-gutter-x: 0;
    }
    #dn-template-dropdown {
        box-shadow: none;
        border-radius: 0;
    }
    section.content .card:not(.card .card), .modal-fullscreen .card:not(.card .card) {
        --bs-card-border-radius: 0px;
        --bs-card-inner-border-radius: 0px;
    }
    .rocketchat-widget[data-state="opened"] {
        bottom: 0px !important;
    }
    .fc-list-day-header { top: calc(-20px + var(--nav-scroll-offset, 0px)) !important; }
}

@media print {
    body.modal-open > .dn-layout,
    #bottom-navigation {
        visibility: hidden;
        display: none;
    }
    body.modal-open {
        .modal.show {
            position: relative;

            .modal-dialog {
                width: 100vw;
                max-width: none;
                margin: 0;

                .modal-content {
                    height: 100%;
                    border: 0;
                }

                .modal-body {
                    overflow-y: visible;
                }

                .modal-footer {
                    visibility: hidden;
                    display: none;
                }
            }
        }

        #modal-fullscreen .modal-body {
            padding: 0;
        }

        .modal-backdrop {
            visibility: hidden;
            display: none;
        }

        #top-navigation {
            position: relative;
        }
    }
}