@charset "utf-8";
/* SEing CSS — Light Theme | Primary: #0262FD | BG: #F4F4F5 */

/* ─── CSS Variables ──────────────────────────────────────────── */
:root {
    --primary:        #0262FD;
    --primary-dark:   #0251d4;
    --primary-light:  #e8f0ff;
    --bg:             #F4F4F5;
    --bg-panel:       #FFFFFF;
    --bg-muted:       #E8E8EA;
    --bg-hover:       rgba(2, 98, 253, 0.06);
    --bg-active:      rgba(2, 98, 253, 0.1);
    --border:         rgba(0, 0, 0, 0.1);
    --border-strong:  rgba(0, 0, 0, 0.18);
    --text:           #1A1A1A;
    --text-muted:     #555555;
    --text-light:     #888888;
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.1);
    --radius:         0px;
    --success:        #16a34a;
    --danger:         orange;
    --warning:        #ca8a04;
    --neutral:        #5a6268;
}

/* ─── Base ───────────────────────────────────────────────────── */
body {
    background: var(--bg) !important;
}







/* MAIN CONTAINER */
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* FORCE LEFT SIDE LOGO */
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 120px;
  height: 40px;

  /* REMOVE TEXT/DEFAULT CONTENT */
  font-size: 0;
  position: relative;
}

/* INJECT LOGO VIA CSS */
.brand-logo::before {
  content: "";
  display: block;

  width: 140px;
  height: 40px;

  background-image: url("/assets/favicons/safari-pinned-tab.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* THEME TOGGLE RIGHT SIDE */
.theme-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* OPTIONAL: REMOVE "HUB" TEXT IF STILL RENDERED */
.brand .name {
  display: none !important;
}





::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
::-webkit-scrollbar-track { background: var(--bg-muted); }

h1, h2, h3, h4, h5, h6 {
    color: var(--text) !important;
}

label {
    color: var(--text-muted) !important;
}

hr {
    border-top: 1px solid var(--border) !important;
}

a,
.mfa a,
.mfa a:hover,
.mfa a:active {
    color: var(--primary) !important;
}

svg {
    transition: ease all 0.3s;
}

a:hover svg {
    transform: scale(1.15);
}

/* ─── Inputs ─────────────────────────────────────────────────── */
input, textarea, select {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
}

input::placeholder {
    color: var(--text-light) !important;
}

input:not(.button):focus,
textarea:not(.button):focus,
select:not(.button):focus {
    border: 1px solid var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(2, 98, 253, 0.15) !important;
    outline: none;
}

input:not(.button)[readonly] {
    border: 1px solid var(--border) !important;
    background: var(--bg-muted) !important;
}

input.input.button {
    border: none !important;
}

/* ─── Main Layout ────────────────────────────────────────────── */
.main {
    background: url(/assets/custom/eyecon-darker.svg) fixed, var(--bg) !important;
    background-size: 95vw 95vh !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.main-body header {
    padding: 12px 0 !important;
    margin: 0 !important;
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.app .sidebar {
    background: var(--bg-panel) !important;
    box-shadow: 1px 0 0 var(--border), var(--shadow-md) !important;
    padding: 12px 12px 36px !important;
    left: 0;
    transition: ease all 0.3s;
    position: fixed !important;
    z-index: 999 !important;
    min-height: 100%;
}

.app .sidebar.closed {
    background: var(--bg-panel) !important;
    position: fixed !important;
    transform: translate(-280px, 0);
    display: block !important;
}

.app .sidebar::-webkit-scrollbar { width: 0 !important; }

@media only screen and (min-width: 769px) {
    .app .sidebar.closed { display: none !important; }
}
@media only screen and (min-width: 1224px) {
    .app .sidebar.closed {
        display: block !important;
        position: static !important;
        transform: translate(0, 0) !important;
    }
    .app .sidebar {
        position: static !important;
        transform: translate(0, 0) !important;
    }
}

@media only screen and (max-width: 768px) {
    .app .sidebar {
        background: var(--bg-panel) !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 1000;
        padding-top: 48px !important;
    }
}

/* ─── Sidebar Brand ──────────────────────────────────────────── */
/* .sidebar-panel .brand {
    margin: 0 0 12px !important;
}
.sidebar-panel .brand-logo {
    flex-wrap: wrap;
    justify-content: flex-end !important;
}
@media only screen and (min-width: 1224px) {
    .sidebar-panel .brand-logo { justify-content: flex-start !important; }
}
.sidebar-panel .brand-logo img:nth-of-type(2),
.sidebar-panel .brand-logo img:nth-of-type(3) {
    margin-right: 0 !important;
    height: 0 !important;
    display: none !important;
}
.sidebar-panel .brand-logo img {
    width: 50% !important;
    max-width: 50% !important;
}
.sidebar-panel .brand-logo .name { display: none; } */

.sidebar-panel .brand {
    margin: 0 0 12px !important;
}

.sidebar-panel .brand-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;
}

/* Show logo properly */
.sidebar-panel .brand-logo img {
    width: 120px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Show brand text */
.sidebar-panel .brand-logo .name {
    display: block !important;
    color: #0262FD; /* change if needed */
    font-size: 18px;
    font-weight: 600;
}

.sidebar-panel .brand-logo .name {
    font-size: 0 !important;
    position: relative;
    width: 160px;
    height: 40px;
    display: inline-block;
}

.sidebar-panel .brand-logo .name {
    font-size: 0 !important;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.sidebar-panel .brand-logo .name::after {
    content: "EdgeVision";
    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: auto;
    height: 40px;
    padding-left: 50px;

    font-size: 18px;
    font-weight: 600;
    color: #0077B6;
    background-image: url("/assets/favicons/safari-pinned-tab.svg");
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: left center;
}

/* ─── Side Navigation ────────────────────────────────────────── */
.side-navigation .table-header {
    margin: 12px 0 0 !important;
    color: #fff !important;
    background: var(--primary) !important;
    padding: 10px 20px !important;
}
.side-navigation .table-header:nth-of-type(1) { margin: 0 !important; }

.side-navigation ul.nav a {
    border-radius: 0 !important;
    padding: 5px 10px !important;
}

.side-navigation ul.nav a,
.side-navigation ul.nav a span {
    color: var(--text-muted) !important;
}

.side-navigation ul.nav a.is-active {
    background: var(--bg-active) !important;
}
.side-navigation ul.nav a.is-active span {
    color: var(--primary) !important;
}

.side-navigation ul.nav a:hover,
.side-navigation ul.nav a:focus {
    background: var(--bg-hover) !important;
    border-radius: 0 !important;
}

.side-navigation ul.nav ul.sub-menu {
    background: var(--bg-muted) !important;
    box-shadow: none !important;
}

.side-navigation ul.nav a .badge,
.sequence ul.cameras li .badge,
.accounts-list .table .item .site-access .tag,
.accounts-list .table .item .group-access .tag,
.accounts-list .table .item .camera-access .tag {
    box-shadow: none !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 0 !important;
    color: var(--text-muted) !important;
    padding: 0 8px !important;
    background: var(--bg-muted) !important;
}

.side-navigation ul.nav a .menu-caret * { fill: var(--text-light) !important; }
.side-navigation ul.nav a .menu-caret.open * { fill: var(--primary) !important; }

.side-navigation .user-info .username,
.side-navigation .user-info small.role {
    color: var(--text-muted) !important;
}

.side-navigation .user { padding: 10px !important; }
.side-navigation .user.is-active {
    background: var(--bg-active) !important;
    border-radius: 0 !important;
}
.side-navigation .user.is-active .photo {
    border-color: var(--bg) !important;
}
.side-navigation .user-info small.role span {
    background-color: transparent !important;
    padding: 0 6px 0 0 !important;
    border-radius: 0 !important;
    border: none !important;
}
.side-navigation .user.is-active small.role span {
    background-color: var(--primary) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
}

/* ─── Gradient / Mobile Header ───────────────────────────────── */
.app .main .gradient, app .gradient { height: 0 !important; }

@media only screen and (min-width: 1224px) {
    .app .main .gradient label { display: none !important; }
    .app .main .gradient { display: none !important; }
}
@media only screen and (max-width: 1223px) {
    .app .main .gradient {
        display: flex;
        justify-content: flex-start !important;
        height: var(--mobile-header-height);
        width: 100%;
        background: var(--bg-panel) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        position: fixed;
        top: 0 !important;
        z-index: 1005;
    }
}
@media only screen and (min-width: 769px) {
    .app .main .gradient label { display: flex !important; }
}

.app .main .gradient label {
    padding: 12px !important;
    margin: 0 !important;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    transition: ease all 0.3s;
}
.app .main .gradient label:hover {
    transform: scale(1.15);
    rotate: 180deg;
}
.app .main .gradient label:hover path { fill: var(--primary); }

/* ─── Page Title ─────────────────────────────────────────────── */
.page-title { padding: 0 0 0 32px; }
@media only screen and (min-width: 769px) { .page-title { padding: 0 0 0 20px; } }
@media only screen and (min-width: 1224px) { .page-title { padding: 0; } }

.page-title h1 {
    font-weight: 300 !important;
    display: inline-block !important;
    padding: 0 20px 0 0 !important;
    line-height: 1 !important;
}
.page-title .submenu {
    font-weight: 300 !important;
    line-height: 1.2 !important;
}
.page-title .submenu .item {
    margin: 4px 8px 0 0 !important;
}
.page-title .submenu .item.active { color: var(--text) !important; }
.page-title .submenu .item::after {
    color: var(--text) !important;
    font-weight: bold !important;
}

/* ─── Blocks ─────────────────────────────────────────────────── */
.block {
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-sm);
}
.block-header {
    background: var(--bg-panel) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
}
.block-header svg * {
    color: var(--text) !important;
    fill: var(--text) !important;
}
.block-footer {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.block .body .table .item {
    border-bottom: 1px solid var(--border) !important;
}
.block .body .table .item:last-of-type { border: none !important; }
.block .body .table .item > .title,
.block .body .table .item > .value {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}
@media only screen and (min-width: 1024px) {
    .block .body .table .item > .title { flex: 0 0 100px; }
}

blockbody p { color: var(--text-muted) !important; }

/* ─── Grid Container ─────────────────────────────────────────── */
.grid-container {
    --gapV: 12px;
    --gapH: 12px;
}
@media only screen and (min-width: 769px) {
    .grid-container { margin-bottom: 12px !important; }
}
.grid-container .block-header {
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.grid-container.--four-columns .block,
.grid-container.--three-columns .block,
.grid-container.--two-columns .block,
.grid-container.--one-column .block {
    margin-bottom: 0 !important;
}
.grid-container.--four-columns,
.grid-container.--three-columns,
.grid-container.--two-columns,
.grid-container.--one-column {
    --gapV: 12px !important;
    --gapH: 12px !important;
}

.main-body .grid-container header { padding: 3px 10px !important; }

.grid-container.--four-columns block section header blockheader .block-header,
.grid-container.--three-columns block section header blockheader .block-header,
.grid-container.--two-columns block section header blockheader .block-header,
.grid-container.--one-column block section header blockheader .block-header {
    padding: 7px 10px !important;
}
.grid-container.--four-columns block section header blockheader .block-header h1,
.grid-container.--three-columns block section header blockheader .block-header h1,
.grid-container.--two-columns block section header blockheader .block-header h1,
.grid-container.--one-column block section header blockheader .block-header h1 {
    line-height: 1.2 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 0 !important;
}

.grid-container.--four-columns block section header blockheader div badge .status-badge,
.grid-container.--three-columns block section header blockheader div badge .status-badge,
.grid-container.--two-columns block section header blockheader div badge .status-badge,
.grid-container.--one-column block section header blockheader div badge .status-badge {
    height: 10px !important;
    padding: 0 !important;
    font-size: 0 !important;
    width: 10px !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
}

.grid-container.--four-columns block section header blockheader div badge .status-badge::before,
.grid-container.--three-columns block section header blockheader div badge .status-badge::before,
.grid-container.--two-columns block section header blockheader div badge .status-badge::before,
.grid-container.--one-columns block section header blockheader div badge .status-badge::before {
    content: "";
    width: 0 !important;
    height: 0 !important;
}
.grid-container.--four-columns block section header blockheader div badge .status-badge span,
.grid-container.--three-columns block section header blockheader div badge .status-badge span,
.grid-container.--two-columns block section header blockheader div badge .status-badge span,
.grid-container.--one-columns block section header blockheader div badge .status-badge span {
    font-size: 0 !important;
    margin: 0 !important;
}
.grid-container.--four-columns block section header blockheader div badge .status-badge.--alert span,
.grid-container.--three-columns block section header blockheader div badge .status-badge.--alert span,
.grid-container.--two-columns block section header blockheader div badge .status-badge.--alert span,
.grid-container.--one-column block section header blockheader div badge .status-badge.--alert span {
    font-size: 9px !important;
    white-space: nowrap !important;
    right: 26px !important;
    position: absolute !important;
    color: #fff !important;
}

@media only screen and (min-width: 769px) {
    .grid-container.--four-columns { --columns: 4 !important; }
    .grid-container.--three-columns { --columns: 3 !important; }
    .grid-container.--two-columns { --columns: 2 !important; }
}
@media only screen and (max-width: 768px) {
    .grid-container.--four-columns { --columns: 1 !important; }
    .grid-container.--three-columns { --columns: 1 !important; }
    .grid-container.--two-columns { --columns: 1 !important; }
}

/* ─── Grid Items ─────────────────────────────────────────────── */
.grid-item BlockBody .row .key,
.grid-item BlockBody .row .value { color: var(--text) !important; }
.grid-item BlockHeader .camera-name { color: var(--text) !important; }
.grid-item BlockFooter .version span { color: var(--text-muted) !important; }

/* ─── Control Bar ────────────────────────────────────────────── */
.control-bar {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    margin-bottom: 24px !important;
    padding: 0 12px !important;
    background-color: var(--primary) !important;
    position: relative !important;
}
.control-bar input { margin-bottom: 0 !important; }

.control-bar .datepicker input.title,
.control-bar .title {
    line-height: 24px !important;
    margin-right: 8px !important;
    font-size: 12px !important;
}

.control-bar .datepicker {
    padding: 12px !important;
    color: #fff !important;
}
.control-bar .datepicker input.title {
    max-width: 90px !important;
    min-width: 86px !important;
    background: rgba(255,255,255,0) !important;
    color: #fff !important;
    border: none !important;
}
.control-bar .datepicker:hover { background: rgba(255,255,255,0.1) !important; }

.control-bar .radio-select .input {
    line-height: 24px !important;
    padding: 12px !important;
    color: #fff !important;
}
.control-bar .radio-select .input .title { color: #fff !important; }

.control-bar .multi-select { min-width: auto !important; }
.control-bar .multi-select .input {
    padding: 12px 24px !important;
    line-height: 24px !important;
    margin: 0 !important;
    color: #fff !important;
}
.control-bar .multi-select SvgIcon { margin-right: 8px !important; }
.control-bar .radio-select .input SvgIcon { margin-right: 4px !important; }

.control-bar .checkbox {
    padding: 12px 12px 8px !important;
    margin: 0 !important;
    line-height: 0 !important;
}
.control-bar .checkbox:hover { background: rgba(255,255,255,0.1) !important; }
.control-bar .checkbox label {
    line-height: 24px !important;
    font-size: 12px !important;
    color: #fff !important;
}
.control-bar .checkbox svg { height: 16px !important; }

.control-bar .search-field {
    padding: 6px 12px !important;
}
.control-bar .search-field input {
    padding: 0 20px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    line-height: 34px !important;
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
.control-bar .search-field input::placeholder { color: rgba(255,255,255,0.7) !important; }

.control-bar .sorting {
    padding: 0 !important;
    align-self: center;
}
.control-bar .sorting div {
    font-size: 12px;
    color: #fff;
}

.control-bar .filtering {
    width: 100% !important;
    justify-content: flex-end !important;
    flex-direction: row !important;
}
.control-bar .filtering > *,
.control-bar .sorting > * {
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
}

@media only screen and (max-width: 768px) {
    .control-bar .sorting { flex-wrap: wrap; display: none !important; }
    .control-bar .right { position: absolute; top: 0; right: 0; }
}
@media only screen and (max-width: 1023px) {
    .control-bar .datepicker input.title { min-width: unset !important; }
    .control-bar .multi-select .input .placeholder,
    .control-bar .datepicker input.title,
    .control-bar .checkbox label,
    .control-bar .radio-select .input .title { font-size: 0 !important; }
}

.control-bar .tab {
    padding: 6px 24px !important;
    font-size: 12px !important;
}
.control-bar .tab span { color: #fff !important; }
.control-bar .tab:hover { background: rgba(255,255,255,0.1) !important; }
.control-bar .tab.active {
    background: rgba(255,255,255,0.2) !important;
    box-shadow: none !important;
    color: #fff !important;
}
.control-bar .tab.active span { color: #fff !important; }

.control-bar .input { color: #fff !important; }

.control-bar.filter-bar { background: var(--bg-muted) !important; }
.control-bar.filter-bar .control-bar .radio-select .input .title { color: var(--text) !important; }

.control-bar .right .checkbox-container label { font-size: 12px !important; }

@media only screen and (max-width: 768px) {
    .control-bar .filtering searchfield {
        width: 70% !important;
        margin-right: 30% !important;
    }
}
@media only screen and (min-width: 769px) {
    .control-bar .filtering searchfield {
        display: block !important;
        margin: 0 auto 0 0 !important;
        max-width: 100% !important;
    }
}
@media only screen and (min-width: 500px) {
    .control-bar .filtering > * {
        flex: unset !important;
        max-width: unset !important;
    }
}

/* ─── Multi-select / Radio-select title widths ───────────────── */
.filtering .multi-select .input .title,
.filtering .multi-select .input .placeholder,
.right .radio-select .input .title,
.right .radio-select .input .placeholder {
    width: 45px !important;
    max-width: 45px !important;
    padding-right: 6px !important;
    margin-right: 6px !important;
    overflow: hidden !important;
    font-size: 12px !important;
}
.filtering multiselect:first-of-type .input .title,
.filtering multiselect:first-of-type .input .placeholder {
    width: 25px !important;
    max-width: 25px !important;
}
@media only screen and (min-width: 1224px) {
    .filtering .multi-select .input .title,
    .filtering .multi-select .input .placeholder,
    .right .radio-select .input .title,
    .right .radio-select .input .placeholder {
        width: 65px !important;
        max-width: 65px !important;
    }
    .filtering multiselect:first-of-type .input .title,
    .filtering multiselect:first-of-type .input .placeholder {
        width: 35px !important;
        max-width: 35px !important;
    }
}

/* ─── Buttons ────────────────────────────────────────────────── */
.button {
    margin: 0 5px !important;
    background: var(--primary) !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    padding: 0 30px !important;
    transition: opacity 0.2s ease !important;
}
.button:hover { opacity: 0.85 !important; }
.button .text {
    color: #fff !important;
    font-size: 12px !important;
    opacity: 1 !important;
    position: unset !important;
}
.button .icon { opacity: 1 !important; position: unset !important; }
.button.active { box-shadow: none !important; }
.button.outlined { background: var(--primary) !important; border: none !important; }
.button.outlined .text { color: #fff !important; }

.button.neutral,
header .button,
header .button.neutral,
[action="eye"] .button.outlined,
[title="Device detail"] .button.outlined,
[text="Open sequence"] .button.outlined,
[text="Open Case"] .button.outlined,
[action="sites"] .button.outlined {
    background: var(--neutral) !important;
}

[action="pen"] .button.outlined,
[action="ptz-center"] .button.outlined,
[action="ptz-center"] .button,
[action="task-cross"] .button,
[action="dots"] .button.outlined.borderless { background: var(--warning) !important; }

[action="task-cross"] .button.alert { background: var(--danger) !important; }
[action="camera"] .button.outlined { background: #0069d9 !important; }
[action="filter"] .button.outlined { background: var(--neutral) !important; }
[action="arrow-right"] .button.outlined,
[action="hideRightSidebar"] .button.outlined,
[action="showRightSidebar"] .button.outlined { background: var(--neutral) !important; }
[action="download"] .button.outlined { background: var(--neutral) !important; }
[action="trash"] .button.outlined,
[action="cross-circle"] .button.outlined { background: var(--danger) !important; }

[action="pen"] .button.outlined svg *,
[action="camera"] .button.outlined svg *,
[action="trash"] .button.outlined svg *,
[action="cross-circle"] .button.outlined svg *,
[action="filter"] .button.outlined svg *,
[action="arrow-right"] .button.outlined svg * {
    fill: #fff !important;
    color: #fff !important;
}
[action="download"] .button.outlined svg,
[action="search"] .button.outlined svg,
[action="info-circle"] .button.outlined svg,
[action="cross-circle"] .button.outlined span,
[action="download"] .button.outlined span { color: #fff !important; }

[title="Edit"] .button.neutral,
[icon="pen-small"] .button.neutral { background: var(--warning) !important; }

button.button.outlined.borderless { background: var(--primary) !important; }

.sites-list buttonfield .button.outlined .icon { opacity: 1 !important; }
.right buttonfield[action=save] { padding: 10px 0 0 !important; }
.modal-actions .right buttonfield[action=save] { padding: 0 !important; }

[action="camera"] .button.outlined {
    background: var(--warning) !important;
    margin-right: 12px !important;
}

blockbutton .media {
    border: none !important;
    border-radius: 0 !important;
    height: 36px !important;
    background: var(--neutral) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 30px !important;
}
blockbutton .media span { color: #fff; }

buttonfield[action=camera] {
    flex: 0 !important;
    margin: 0 5px 0 -5px !important;
    padding: 0 !important;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.card .footer {
    background: transparent !important;
    border-radius: 0 !important;
}
.card p { color: var(--text-muted) !important; }
.card .footer .text { color: var(--text) !important; }
.card .title .percentage { color: var(--text) !important; }

.kpi .card {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border);
}
.kpi .card .footer {
    background-color: var(--primary) !important;
    color: #fff !important;
    font-weight: bold;
    line-height: 1 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    flex: 1 1 0% !important;
    padding: 5px 10px !important;
}
.kpi .card .title {
    font-size: 16px !important;
    flex: 1 1 100% !important;
    padding: 5px 10px !important;
}
.kpi .card .title .number-divider,
.kpi .card .title .number-divider span { color: var(--text-muted) !important; }
.kpi .card .title .progress { display: inline-block !important; padding: 0 10px !important; }
.kpi .card .title .number-divider { display: inline-block !important; }

@media only screen and (min-width: 769px) {
    .stats .kpi .card {
        height: auto !important;
        flex-direction: row !important;
        display: flex !important;
    }
}
@media only screen and (max-width: 768px) {
    .stats .kpi .card { display: none !important; }
    .dashboard .stats { margin-bottom: 0 !important; }
}

/* ─── Status Badges ──────────────────────────────────────────── */
.status-badge { background: #888 !important; }
.sites-overview .status-badge { font-size: 11px !important; }
.status-badge .number, .status-badge .total { color: #fff !important; }
.status-badge.--success {
    background: var(--success) !important;
    color: #fff !important;
}
.status-badge.--alert {
    background: var(--danger) !important;
    color: #fff !important;
}
.status-badge.--success::before,
.status-badge.--alert::before { background: #fff !important; }

/* ─── Table / List Headers ───────────────────────────────────── */
.table-header { color: var(--text-muted) !important; }
.table-header.site-name, .table-header.address, .table-header.devices,
.table-header.controls, .table-header.date, .table-header.percent,
.table-header.uploaded, .table-header.fullname, .table-header.username,
.table-header.role, .table-header.site-access, .table-header.status,
.table-header.actions { color: var(--text-muted) !important; }
.site-name { color: var(--text-muted) !important; }

/* ─── Login Page ─────────────────────────────────────────────── */
.login-page {
    background: url(/assets/custom/eyecon-darker.svg) fixed, var(--bg) !important;
    background-size: 87vw 87vh !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    height: 100vh;
}
.login-page .gradient { display: none !important; }
.login-page .sso-login-description {
    color: var(--text-muted);
    background: var(--bg-muted);
    border: none !important;
    border-radius: 0 !important;
    padding: 20px !important;
    font-size: 15px !important;
}
.ovals-and-crosses .cross,
.ovals-and-crosses .cross-right,
.ovals-and-crosses .oval,
.ovals-and-crosses .oval-right { display: none !important; }
/* TOP LEFT BRAND (LOGO + EDGEVISION) */
.ovals-and-crosses {
    position: relative;
}
#not-a-member {
    display: none !important;
}

/* CENTER BRAND (LOGO + EDGEVISION) */
.ovals-and-crosses::before {
    content: "EdgeVision";
    position: absolute;
    margin-top: 30px;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;

    font-size: 20px;
    font-weight: 700;
    color: #0077B6;
    letter-spacing: 0.5px;

    padding-left: 50px;
    height: 45px;

    background-image: url("/assets/favicons/safari-pinned-tab.svg");
    background-repeat: no-repeat;
    background-size: 40px 40px;
    background-position: left center;
}
/* =========================
   PAGE BACKGROUND
========================= */
.page {
    background: linear-gradient(135deg, #0262FD, #00AEEF) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

/* soft animated glow */
.page::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%);
    animation: moveGlow 10s linear infinite;
}

@keyframes moveGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================
   LOGIN CARD
========================= */
.page .loginFields {
    position: relative;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 18px;
    padding: 100px 30px 40px 30px; /* space for logo */
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
}

/* =========================
   TOP CENTER LOGO + BRAND
========================= */
.page .loginFields h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);

    margin: 0;
    color: #fff !important;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* LOGO */
.page .loginFields h1::before {
    content: "";
    width: 42px;
    height: 42px;

    /* background-image: url("/assets/favicons/safari-pinned-tab.svg"); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    display: inline-block;
    filter: drop-shadow(0 0 6px rgba(0,174,239,0.5));
}

/* =========================
   INPUT FIELDS
========================= */
.page .loginFields input {
    width: 100%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff !important;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.page .loginFields input:focus {
    border-color: #00AEEF;
    box-shadow: 0 0 12px rgba(0, 174, 239, 0.6);
    outline: none;
}

/* =========================
   LABELS
========================= */
.page .loginFields label {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500;
}

/* =========================
   BUTTON
========================= */
.page .loginFields .input.input.button {
    width: 100%;
    background: linear-gradient(135deg, #00AEEF, #0077B6);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page .loginFields .input.input.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* =========================
   TEXT
========================= */
.page p {
    color: rgba(255,255,255,0.88) !important;

    font-family: "Inter", "Poppins", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;

    letter-spacing: 0.2px;
    margin-top: 10px;
}


/* ─── Modal ──────────────────────────────────────────────────── */
.modal {
    background: var(--bg-panel) !important;
}
.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border);
}
.modal-header .title span { color: var(--text) !important; }
.modal-header .close:hover,
.modal-header .close:focus {
    background: var(--bg-muted) !important;
    border-radius: 50%;
}
.modal-body, .modal .body { background: var(--bg-panel) !important; }
.modal .control-bar { background: var(--primary) !important; }
.modal .title { color: var(--text) !important; }
.modal p { color: var(--text-muted) !important; }
.modal li { color: var(--text) !important; }
.modal .item.ng-star-inserted svg.icon.ng-star-inserted { color: var(--text) !important; }
.modal .card { background: var(--bg-muted) !important; border-radius: 0 !important; box-shadow: none !important; }
.modal .card description p,
.modal .card description h1 { color: var(--text) !important; }
.modal .select-input .dropdown { background: var(--bg-panel) !important; border-radius: 0 !important; }
.modal-body .select-input .dropdown ul li input { border: none !important; background: transparent !important; }
.modal-body .select-input .dropdown label.search { border-bottom: 1px solid var(--border) !important; }
.modal-body li.currentlocation { background: var(--bg-muted) !important; }
.modal-body .currentlocation a:hover { background-color: var(--bg-hover) !important; }
.bg { background: rgba(0,0,0,0.4) !important; z-index: 99999 !important; }
.mat-dialog-container { background: transparent !important; }
.modal .grid-container { margin: 0 !important; }

@media only screen and (min-width: 1024px) {
    .modal .body h2 { font-size: 17px !important; }
}

/* ─── Datepicker ─────────────────────────────────────────────── */
.datepicker { color: var(--text) !important; }
.datepicker input { background: transparent !important; color: var(--text) !important; border: none !important; }
.datepicker:hover { background: var(--bg-hover) !important; }
.datepicker > SvgIcon { margin-right: 0 !important; }

.mat-datepicker-content .mat-calendar { background: var(--bg-panel); border: 1px solid var(--border); }
.mat-calendar-table-header th { color: var(--text-muted); }
.mat-calendar-body-label { color: var(--text-muted) !important; }
.mat-calendar-body-cell-content { color: var(--text) !important; }
.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected),
.mat-calendar-body-today:not(.mat-calendar-body-selected) { border-color: var(--primary) !important; color: var(--primary) !important; }
.mat-button, .mat-icon-button, .mat-stroked-button { color: var(--text-muted) !important; }
.mat-calendar-arrow { border-top-color: var(--text-muted) !important; }
.mat-calendar-body-selected { background-color: var(--primary) !important; color: #fff !important; }
.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) { color: var(--text-light) !important; }
.mat-tab-label, .mat-tab-link { color: var(--text) !important; }

/* ─── Dropdowns ──────────────────────────────────────────────── */
.radio-select .dropdown,
.multi-select .dropdown {
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}
.radio-select .dropdown::before,
.multi-select .dropdown::before {
    background: var(--bg-panel) !important;
    width: 18px !important;
    height: 18px !important;
    transform: rotate(45deg) !important;
    z-index: -1;
}
.radio-select .dropdown label.search input,
.multi-select .dropdown label.search input {
    border: none !important;
    background: var(--bg-panel) !important;
    padding: 12px !important;
    color: var(--text) !important;
}
.radio-select .dropdown label.search,
.multi-select .dropdown label.search { border-bottom: 1px solid var(--border) !important; }
.radio-select .dropdown label:hover,
.multi-select .dropdown label:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}

.multi-select .input { color: var(--text) !important; }
.multi-select .input .title { color: var(--text) !important; overflow: visible !important; margin: 0 10px 0 0 !important; }
.multi-select .input .placeholder { overflow: visible !important; }
.multi-select .input:focus,
.multi-select .input:hover { background: var(--bg-hover) !important; }

.radio-select .input .title { color: var(--text) !important; min-width: fit-content; }
.radio-select .input { color: var(--text) !important; }
.radio-select .input:focus,
.radio-select .input:hover { background: var(--bg-hover) !important; }

.select-input .dropdown label:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}
.select-input .dropdown label.search input { padding: 12px !important; }

.custom-autocomplete__dropdown {
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ─── Picker with Search ─────────────────────────────────────── */
.picker-with-search {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-md) !important;
}
.picker-with-search .search input {
    border: none !important;
    margin: 0;
    box-shadow: none;
    background: transparent !important;
    color: var(--text) !important;
}
.picker-with-search .search { border-bottom: 1px solid var(--border) !important; }
.picker-with-search .search:focus-within .icon * { fill: var(--primary) !important; }
.picker-with-search .name { color: var(--text) !important; }
.picker-with-search ul.items label { border-radius: 0 !important; }
.picker-with-search ul.items label:hover { background: var(--bg-hover) !important; }
.picker-with-search ul.items label.selected { background: var(--bg-active) !important; }
.picker-with-search ul.items label.selected:hover { background: rgba(2, 98, 253, 0.15) !important; }
.picker-with-search ul.items label.selected .name,
.picker-with-search ul.items label.selected .meta { color: var(--text) !important; }
.picker-with-search ul.items label .name { line-height: 1.2; }
.picker-with-search ul.items label .meta { color: var(--text-muted) !important; }
.picker-with-search ul.items label .checkbox { opacity: 1 !important; }

/* ─── Notifications ──────────────────────────────────────────── */
.notifications .table .notification-line {
    background: var(--bg-panel) !important;
    border-bottom: 1px solid var(--border);
}
.notification-line .alert,
.notification-line .desc { color: var(--text-muted) !important; }
.notifications .table .notification-line .actions-bar { background: transparent !important; }
.notifications .table .notification-line .duration {
    background: var(--bg-muted) !important;
    border: none !important;
    border-radius: 0 !important;
}
.notifications .table .notification-line .duration .ng5-slider .ng5-slider-pointer,
.notifications .table .notification-line .duration .ng5-slider .ng5-slider-selection {
    background-color: var(--primary) !important;
}

/* ─── Sites List / Items ─────────────────────────────────────── */
.sites-list .item {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border);
}
.sites-list .name { color: var(--text) !important; }
.sites-list .country { color: var(--text-muted) !important; }
.list-item {
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.list-item .name,
.list-item .uptime,
.list-item .version { color: var(--text-muted) !important; }

/* ─── Accounts / Roles / Groups ──────────────────────────────── */
.accounts-list .table .item {
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border);
}
.name-role .text,
.name-role .name,
.name-role .username,
.name-role .role { color: var(--text-muted) !important; }
.accounts-list .table .item .name-role .name { white-space: nowrap; }

accountslist .heading { padding: 0 12px 0 18px !important; }

.roles-list .table .item {
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border);
}
.roles-list .table .item .pages .tag {
    color: var(--text) !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--bg-muted) !important;
}

.groups-list .item {
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border);
}
.group-name .name { color: var(--text) !important; }
.groups-list .site-badge span { border-radius: 50% !important; }

/* ─── Tasks ──────────────────────────────────────────────────── */
.task-item {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border);
}
.task-item .header { border-left: none !important; align-items: center !important; }
.task-item .header:hover { background: var(--bg-hover) !important; }
.task-item .header.--opened { background: var(--bg-muted) !important; }
.task-item .body { border-top: 1px solid var(--border) !important; }
.task-item .body .row .title,
.task-item .body .row .value { line-height: 1.2 !important; }
.task-item .body .row { border-bottom: 1px solid var(--border) !important; }
.task-item .day, .task-item .time, .task-item .task-name, .task-item .notes,
.tasks-overview .site, .sites-overview .camera,
.task-item .title, .task-item .value { color: var(--text-muted) !important; }
.task-item .light { color: var(--text-light) !important; }
.task-item .actions-bar { background: transparent !important; border-top: none !important; }
.task-item .body .video-meta {
    background: var(--bg-muted) !important;
    border: none !important;
    border-radius: 0 !important;
}
.task-item .body .task-details .box {
    background: var(--bg-muted) !important;
    border: none !important;
    color: var(--text-muted) !important;
    border-radius: 0 !important;
}
.task-item .body .task-details .site-row .location .country { color: var(--text-light) !important; }
.task-item .body .task-details .box .row { color: var(--text-muted) !important; }
.task-item .body .task-details .site-row .location .country { color: var(--text-light) !important; }
.task-item .body .grid-container .task-notes .task-details {
    background: var(--bg-muted) !important;
    border: 1px solid var(--border) !important;
}
.task-profile .task-profile-name { color: var(--text) !important; }
.task-item .body .grid-container .task-notes .description { color: var(--text-muted) !important; }
.task-item .body .grid-container .task-notes .task-notes-tabs { border-bottom: 1px solid var(--border) !important; }
.task-item .body .grid-container .task-notes .task-notes-tabs .tab {
    border: none !important;
    background: var(--bg-muted) !important;
    color: var(--text-muted) !important;
    transition: ease all 0.3s;
}
.task-item .body .grid-container .task-notes .task-notes-tabs .tab:hover { opacity: 0.7; }
.task-item .body .grid-container .task-notes .task-notes-tabs .--active {
    background: var(--primary) !important;
    color: #fff !important;
}
.task-item .body .grid-container .task-notes .task-notes-tabs .--active:hover { opacity: 1; }
.task-item .body .grid-container .task-notes .task-details .task-details-footer .details-row {
    border-top: 1px solid var(--border) !important;
}

.task-comments {
    background: var(--bg-muted) !important;
    border: 1px solid var(--border) !important;
}
.task-comments .comments-wrapper textarea { border-bottom: 1px solid var(--border) !important; border-width: 0 0 1px !important; }
.task-comments .comments-wrapper .placeholder { color: var(--text-light); }
.comment-list .comment-body { color: var(--text-muted) !important; word-break: break-word; overflow-wrap: break-word; }
.comment-list .comment-time { color: var(--text-light) !important; }
.task-item .body .grid-container .task-notes .task-comments .toggle-comment {
    background: var(--primary) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--primary-dark) !important;
}
.task-item .body .grid-container .task-notes .task-comments .comments-wrapper .comment-form {
    padding: 20px;
    background: var(--bg-panel) !important;
    box-shadow: none !important;
}
.comment-form textarea { background: transparent !important; }
.task-item .body .grid-container .task-notes .task-comments .comments-wrapper .comment-form .comment-form-footer .comment-form-info { color: var(--text-muted) !important; }

.tasks-list .preview, .tasks-list .date, .tasks-list .status,
.tasks-list .title, .tasks-list .camera, .tasks-list .actions { color: var(--text-muted) !important; }
.tasks-list .current-day, .tasks-list .current-day span { color: var(--text) !important; }

.tasks-overview .table-header, .tasks-overview .item { color: var(--text-muted) !important; }
.tasks-overview .date, .tasks-overview .name { font-size: 13px !important; line-height: 1.3 !important; }
@media only screen and (min-width: 1024px) {
    .tasks-overview .item .site,
    .tasks-overview .item .name,
    .tasks-overview .item .date { align-self: center; }
}
.dashboard .tasks-overview .item { border-top: 1px solid var(--border) !important; }
.dashboard .tasks-overview .no-results p { color: var(--text-muted) !important; }
.dashboard .tasks-overview .no-results small { color: var(--text-light) !important; }
.tasks-overview .camera-bullet { width: 200px !important; }
@media only screen and (min-width: 1216px) {
    .dashboard .tasks-overview .header .table-header.site { flex: 0 0 200px !important; }
}
.task-item .body .grid-container .task-notes .task-details .task-details-footer .details-row .assignees .accountspicker-wrapper {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}
.accountspicker-wrapper .picker-with-search .search { border-bottom: 1px solid var(--border) !important; }
.task-item .body .grid-container .task-notes .task-details .task-details-footer .details-row .assignees .accountspicker-wrapper .row .save-assignees-button {
    background-color: var(--primary) !important;
    border-bottom: none !important;
    transition: opacity 0.3s !important;
}
.task-item .body .grid-container .task-notes .task-details .task-details-footer .details-row .assignees .accountspicker-wrapper .row .save-assignees-button:hover { opacity: 0.8; }
.task-item .body .grid-container .task-notes .task-details .task-details-footer .details-row .assignees .show-add-assignee { background-color: var(--primary) !important; }

.task-item .body .grid-container .task-notes .task-details .task-details-footer .task-visibility .visibility-tag,
.task-item .body .grid-container .task-notes .task-details .task-details-footer .details-row .assignees .assignee,
.new-account .permission-overview ul li.tag {
    border: 1px solid var(--border) !important;
    background: var(--bg-muted) !important;
    padding: 0 10px !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 500px !important;
}
.new-account .permission-overview ul li.tag { display: inline-flex !important; }
.task-item .body .grid-container .task-notes .task-details .task-details-footer .task-visibility .visibility-tag { gap: 6px !important; }
.task-details .user-avatar-placeholder { width: 13px !important; }

/* ─── Task Items header layout ───────────────────────────────── */
@media only screen and (min-width: 769px) {
    .task-item .header .preview {
        display: flex !important;
        flex: 0 0 100px;
        height: 80px;
        align-self: center;
        margin: -6px 18px -6px -6px;
    }
    .task-item .header .date {
        flex: 0 0 110px !important;
        justify-content: center !important;
        border-bottom: none !important;
        padding: 0 12px 0 0 !important;
        flex-direction: column !important;
    }
    .task-item .header {
        flex-direction: row !important;
        padding: 18px 24px !important;
    }
    .task-item .header .info {
        flex: 1 1 100% !important;
        padding: 0 !important;
        align-items: center !important;
    }
    .task-item .header .info .text {
        display: flex !important;
        align-items: center !important;
    }
    .task-item .header .site-camera-info {
        flex: 0 0 150px !important;
        margin: 0 0 0 24px !important;
    }
    .task-item .header .title .notes { display: block !important; }
    .task-item .header .title { flex: 1 1 100% !important; }
}

/* ─── Sites Overview ─────────────────────────────────────────── */
.dashboard .sites-overview .item {
    border: none !important;
    color: var(--text-muted) !important;
    justify-content: space-between;
}
.dashboard .sites-overview .activeSite { background-color: var(--bg-active) !important; }
.dashboard .sites-overview .item .camera { margin-left: 12px !important; }
.dashboard .sites-overview .item .heartbeat,
.dashboard .sites-overview .item .uptime { flex: none !important; }
.dashboard .sites-overview .item .uptime { margin-left: 25px !important; margin-right: 25px !important; }
.dashboard .sites-overview .site-item { gap: 0 !important; }
.site-detail .tasks-overview .item { border-top: 1px solid var(--border) !important; }
.site-detail .tasks-overview .no-results small { color: var(--text-light) !important; }

/* ─── Dashboard ──────────────────────────────────────────────── */
.dashboard .main-content .wrapper { padding: 12px !important; }

/* ─── Sequence ───────────────────────────────────────────────── */
.sequence {
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border);
}
.sequence .media .thumbnail { border-radius: 0 !important; }
.sequence .datetime .date,
.sequence .datetime .time { color: var(--text-muted) !important; }
.sequence .datetime { border-bottom: 1px solid var(--border) !important; }
.sequence .name { color: var(--text) !important; }
.sequence ul.cameras li .color { margin-left: 8px !important; }

/* ─── Activity / Camera Bullets ──────────────────────────────── */
.activity-time { color: var(--text) !important; font-size: 12px !important; }
.camera-bullet { color: var(--text) !important; }
.site-bullet { color: var(--text) !important; }
.site-camera-info .site-bullet,
.site-camera-info .camera-bullet {
    color: var(--text-muted) !important;
    line-height: 16px !important;
    font-size: 12px !important;
}
.site-camera-info .site-bullet span,
.site-row span { margin: 4px 8px 0 0 !important; }

/* ─── Channels ───────────────────────────────────────────────── */
.channels .channel-item .header {
    background: var(--bg-muted) !important;
    border-bottom: 1px solid var(--border);
}
.channels .channel-item .header p { color: var(--text) !important; }
.channels .channel-item .actions {
    background: var(--bg-muted) !important;
    color: var(--text-muted) !important;
    flex-direction: column !important;
}
.channels .channel-item { height: 48vh !important; }
.channel-item .button.outlined { background: var(--primary) !important; }
.channel-item .button.outlined .text { color: #fff !important; }

/* ─── Subscription ───────────────────────────────────────────── */
.subscription .usage-table { color: var(--text-muted) !important; }
.subscription .usage-table .upper-limit { color: var(--text-light) !important; }
.subscription .usage-table .item:not(.header):hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}
.subscription .main ul.navigation,
.profile .main ul.navigation,
.main ul.navigation {
    background: var(--bg-muted) !important;
    border-radius: 0 !important;
}
.subscription .main ul.navigation li,
.profile .main ul.navigation li,
.main ul.navigation li { color: var(--text) !important; }
.subscription .main ul.navigation li.active,
.profile .main ul.navigation li.active,
.main ul.navigation li.active {
    background: var(--bg-active) !important;
    color: var(--primary) !important;
}
.subscription .main ul.navigation li:hover,
.profile .main ul.navigation li:hover,
.main ul.navigation li:hover {
    background: var(--bg-hover) !important;
}

/* ─── Profile ────────────────────────────────────────────────── */
.profile .content .profile .select2-container--default .select2-selection--single {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 0 !important;
}
.profile .content .profile .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; }
.profile .grid-container.--two-columns > div { }
.user-info .grid-container { margin: 0 !important; }
.user-info .select-input .input-label { max-width: unset !important; padding-top: 7px !important; }
.user-info .select-input .arrow-down { top: 18px !important; background: none !important; }

/* ─── Select2 ────────────────────────────────────────────────── */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text) transparent !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text) transparent transparent transparent !important;
}
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--bg-active) !important; }
.select2-dropdown {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
}
.select2-dropdown .select2-results li { color: var(--text) !important; }

/* ─── selectinputfield ───────────────────────────────────────── */
.select-input .input-label {
    left: 0 !important;
    top: 0 !important;
    padding-left: 10px !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    box-sizing: border-box;
}
.select-input .main { background: none !important; }
selectinputfield .select-input .arrow-down { top: 12px !important; background: none !important; }
selectinputfield .select-input.no-style .dropdown {
    top: 66px;
    background: var(--bg-panel) !important;
    border-radius: 0 !important;
    right: 20px;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border) !important;
}
.select-input.no-style .dropdown:before {
    background: var(--bg-panel) !important;
    width: 18px !important;
    height: 18px !important;
    transform: rotate(45deg) !important;
}
selectinputfield .select-input .title { color: var(--text) !important; }
selectinputfield .select-input .dropdown label.search { border-bottom: 1px solid var(--border) !important; }
selectinputfield .select-input .dropdown .search input { background: none !important; color: var(--text) !important; }
.filtering selectinputfield:hover { background: var(--bg-hover) !important; }
selectinputfield[controlname="liveview"] .select-input .arrow-down,
selectinputfield[controlname="ptz"] .select-input .arrow-down,
selectinputfield[controlname="remoteConfig"] .select-input .arrow-down { top: 18px !important; }

selectinputfield[controlname="liveview"] .select-input .input-label,
selectinputfield[controlname="ptz"] .select-input .input-label,
selectinputfield[controlname="remoteConfig"] .select-input .input-label,
selectinputfield[controlname="role"] .select-input .input-label,
selectinputfield[controlname="io"] .select-input .input-label { font-size: 13px !important; }

selectinputfield[controlname="liveview"] .select-input input.main,
selectinputfield[controlname="ptz"] .select-input input.main,
selectinputfield[controlname="remoteConfig"] .select-input input.main,
selectinputfield[controlname="io"] .select-input input.main { text-indent: 90% !important; }

selectinputfield[controlname="liveview"] .main,
selectinputfield[controlname="ptz"] .main,
selectinputfield[controlname="remoteConfig"] .main { background: var(--bg-muted) !important; }

selectinputfield[controlname="groupType"] input.main,
selectinputfield[controlname="cameraBrand"] input.main,
selectinputfield[controlname="role"] input.main,
selectinputfield[controlname="liveview"] .select-input input:not(.button)[readonly],
selectinputfield[controlname="ptz"] .select-input input:not(.button)[readonly],
selectinputfield[controlname="remoteConfig"] .select-input input:not(.button)[readonly] {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-strong) !important;
    font-size: 0;
    background-image: url(/assets/custom/dropdown-arrow.svg) !important;
    background-repeat: no-repeat !important;
    background-position: 95% 18px !important;
    background-size: 12px !important;
}
selectinputfield[controlname="liveview"] .select-input input:not(.button)[readonly],
selectinputfield[controlname="ptz"] .select-input input:not(.button)[readonly],
selectinputfield[controlname="remoteConfig"] .select-input input:not(.button)[readonly] { font-size: 15px !important; }

selectinputfield[controlname="cameraBrand"] .arrow-down .svg__custom,
selectinputfield[controlname="role"] .arrow-down .svg__custom,
selectinputfield[controlname="liveview"] .arrow-down .svg__custom,
selectinputfield[controlname="ptz"] .arrow-down .svg__custom,
selectinputfield[controlname="remoteConfig"] .arrow-down .svg__custom,
selectinputfield[controlname="groupType"] .arrow-down .svg__custom { display: none !important; }

selectinputfield[controlname="cameraBrand"] .select-input .input-label,
selectinputfield[controlname="role"] .select-input .input-label,
selectinputfield[controlname="liveview"] .select-input .input-label,
selectinputfield[controlname="ptz"] .select-input .input-label,
selectinputfield[controlname="remoteConfig"] .select-input .input-label,
selectinputfield[controlname="groupType"] .select-input .input-label {
    font-size: 15px !important;
    left: 0 !important;
    padding: 6px 24px !important;
    top: 0 !important;
    height: auto !important;
}

selectinputfield[label="Input/output"] .select-input .arrow-down { top: 17px !important; }
.new-videowall .select-input .input-label { max-width: unset !important; padding-top: 6px; }

.NaN .dropdown {
    background: var(--bg-panel) !important;
    top: 62px !important;
    right: 10px;
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
}

/* ─── Media ──────────────────────────────────────────────────── */
.media .day-block {
    background: var(--bg-muted) !important;
    border-radius: 0 !important;
}
.media .content {
    border-top: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
@media only screen and (max-width: 1023px) { .media .actions:not(:empty) { margin: 24px 0 0 -5px !important; } }
@media only screen and (min-width: 1224px) { .media .actions:not(:empty) { justify-content: flex-end !important; margin: 0 -6px 0 24px !important; } }
.media .control-bar .filtering { justify-content: flex-end !important; }

/* ─── Device Detail ──────────────────────────────────────────── */
.device-detail .overview .live-feed,
.device-detail .overview .camera-details,
.sequence-detail block { display: block; margin-bottom: 12px; }
.device-detail .details-overview .value.version span { color: var(--text-muted) !important; }
.device-detail .details-overview .agent-version span { color: var(--text-muted) !important; }
.device-detail .list-box {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: auto;
    font-family: monospace;
    color: var(--text-muted) !important;
}
.device-detail .list-box a { color: var(--text-muted) !important; }
.device-detail div.memory { margin: 0 !important; padding: 0 !important; }
.device-detail .tag { background: var(--bg-muted) !important; padding: 3px 12px !important; }
.device-detail .loading .loader {
    border-radius: 50%;
    font-size: 0 !important;
    margin: -25px 0 0 -25px !important;
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    width: 50px !important;
    height: 50px !important;
    box-shadow: none !important;
    border: 2px solid var(--border-strong);
    border-bottom-color: var(--primary);
    animation: rotation 1s linear infinite;
}
.device-detail .loading .loader:before,
.device-detail .loading .loader:after { display: none !important; }
@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.device-detail .grid-item { font-size: 12px !important; }
.device-detail .grid-item BlockBody .row .key { flex: 0 0 10% !important; }
.device-detail .grid-item BlockBody .row .value span.name { display: none !important; }
.list-item .release span,
.device-detail .release span {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: unset !important;
    font-family: unset !important;
}
.list-item .release span a,
.device-detail .release span a { color: var(--text-muted) !important; }
.list-item .release,
.device-detail .details-overview .value.id,
.device-detail .list-box { font-family: unset !important; }
.device-detail .details-overview .value.id,
.device-detail .list-box { font-family: monospace !important; }
@media only screen and (min-width: 1600px) {
    .device-list .grid-container { --columns: 2 !important; }
}
.devices .multi-toggle { display: none !important; }
.devices .site.ng-star-inserted { display: flex; }

/* ─── Progress / Bar ─────────────────────────────────────────── */
.bar .progress { background: var(--primary) !important; }
.bar {
    height: 15px !important;
    padding: 3px !important;
    background: var(--bg-muted) !important;
    border: none !important;
}

/* ─── Sequence Detail ────────────────────────────────────────── */
.sequence-detail .recording .actions .show-live-toggle {
    color: var(--text-muted) !important;
    font-size: 13px !important;
}
.sequence-detail .classifications ul { color: var(--text-muted) !important; }
.sequence-detail .classifications li SvgIcon { color: var(--text-muted) !important; }
.sequence-detail .badge {
    border: 1px solid var(--border-strong) !important;
    border-radius: 0 !important;
    padding: 5px !important;
    color: var(--text-muted) !important;
}
.sequence-detail .badge:empty { display: none !important; }

/* ─── Livestream ─────────────────────────────────────────────── */
.livestream .streamcomponent .stream.running .fullscreen { right: 12px !important; bottom: 6px !important; }
.livestream .streamcomponent .stream.running .io-wrapper { right: 12px !important; bottom: 36px !important; }
.livestream .streamcomponent .stream.running .ptz-presets { left: 48px !important; bottom: 8px !important; }
.livestream .stream-window .stream.running .svg__custom { width: 16px !important; }
.livestream .stream-window .stream.running .zoom .zoom-button div { padding: 0 !important; }

/* Stream grid embedded ──────── */
.grid-container.--four-columns block section blockbody streamcomponent,
.grid-container.--three-columns block section blockbody streamcomponent,
.grid-container.--two-columns block section blockbody streamcomponent,
.grid-container.--one-column block section blockbody streamcomponent {
    padding-bottom: 30px !important;
    display: block;
    background: rgba(0,0,0,0.85) !important;
}
.grid-container.--four-columns block section blockbody streamcomponent .streamcomponent .stream.running .live,
.grid-container.--four-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode,
.grid-container.--three-columns block section blockbody streamcomponent .streamcomponent .stream.running .live,
.grid-container.--three-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode,
.grid-container.--two-columns block section blockbody streamcomponent .streamcomponent .stream.running .live,
.grid-container.--two-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode,
.grid-container.--one-column block section blockbody streamcomponent .streamcomponent .stream.running .live,
.grid-container.--one-column block section blockbody streamcomponent .streamcomponent .stream.running .mode {
    top: unset !important;
    bottom: -27px !important;
    padding: 0 !important;
    background: transparent !important;
}
.grid-container.--four-columns block section blockbody streamcomponent .streamcomponent .stream.running .live,
.grid-container.--three-columns block section blockbody streamcomponent .streamcomponent .stream.running .live,
.grid-container.--two-columns block section blockbody streamcomponent .streamcomponent .stream.running .live,
.grid-container.--one-column block section blockbody streamcomponent .streamcomponent .stream.running .live { left: 12px !important; }
.grid-container.--four-columns block section blockbody streamcomponent .streamcomponent .stream.running .live .text,
.grid-container.--three-columns block section blockbody streamcomponent .streamcomponent .stream.running .live .text,
.grid-container.--two-columns block section blockbody streamcomponent .streamcomponent .stream.running .live .text,
.grid-container.--one-column block section blockbody streamcomponent .streamcomponent .stream.running .live .text { color: var(--text-muted) !important; }
.grid-container.--four-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode,
.grid-container.--three-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode,
.grid-container.--two-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode,
.grid-container.--one-column block section blockbody streamcomponent .streamcomponent .stream.running .mode { right: 0 !important; }
.grid-container.--four-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality,
.grid-container.--three-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality,
.grid-container.--two-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality,
.grid-container.--one-column block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality { background: transparent !important; }
.grid-container.--four-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality.active,
.grid-container.--three-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality.active,
.grid-container.--two-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality.active,
.grid-container.--one-column block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality.active { color: #fff !important; }
.grid-container.--four-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality:not(.active),
.grid-container.--three-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality:not(.active),
.grid-container.--two-columns block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality:not(.active),
.grid-container.--one-column block section blockbody streamcomponent .streamcomponent .stream.running .mode .quality:not(.active) { color: rgba(255,255,255,0.35) !important; }

.grid-container.--four-columns .block .main-preview-player .video-js { height: 25vh; }
.grid-container.--three-columns .block .main-preview-player .video-js { height: 33vh; }
.grid-container.--two-columns .block .main-preview-player .video-js { height: 38vh; }
.grid-container.--one-column .block .main-preview-player .video-js { height: 52vh; }

/* ─── Latest Events ──────────────────────────────────────────── */
.latest-events BlockHeader .activity-time {
    font-size: 11px !important;
    top: 45px;
    z-index: 1;
    padding: 2px;
    margin: 0;
    width: auto;
    flex: 0 !important;
    white-space: nowrap;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 6px !important;
}
.latest-events .grid-container.--four-columns BlockHeader .activity-time {
    position: absolute !important;
    background: rgba(255,255,255,0.85);
    color: var(--text);
    right: 3px !important;
}
.main-body .latest-events .grid-container header { padding: 0 !important; }
.latest-events BlockHeader h1 {
    width: 10px;
    white-space: nowrap;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis !important;
}
.latest-events .block-header [action="camera"] .button.outlined {
    background: transparent !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    padding-left: 5px !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* ─── Infobox ────────────────────────────────────────────────── */
.infobox {
    border-radius: 0 !important;
    background: var(--primary-light) !important;
}
.infobox.info .wrapper { background: none !important; }
.infobox.info span, .infobox span,
.infobox .text span, .infobox.info .text span { color: var(--primary) !important; }
.infobox.error {
    border-radius: 0 !important;
    background: #fff0f0 !important;
}
.infobox.error .wrapper { background: rgba(220,38,38,0.05) !important; }
.infobox.error span,
.infobox.error .wrapper .text span { color: var(--danger) !important; }
.infobox.info span { color: var(--primary) !important; }
.user-info label.error { color: var(--danger) !important; }
.blockstatus.error span { color: var(--danger) !important; }
.blockstatus.error [icon=exclamation-circle] { color: var(--danger) !important; }
.blockstatus.error .wrapper { background: transparent !important; }
blockstatus .blockstatus { background: transparent !important; }
.blockstatus.info .wrapper { background: var(--primary-light) !important; }
.blockstatus.info .wrapper span { color: var(--primary) !important; }

/* ─── Toggles ────────────────────────────────────────────────── */
input:checked + .slider { background: var(--success) !important; }
sliderfield .slider { background-color: var(--border-strong) !important; }
label.toggle-button .text strong,
.user-info .text { color: var(--text) !important; }

ul.multi-toggle {
    border: none !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    background: var(--bg-muted);
}
ul.multi-toggle li { color: var(--text-muted) !important; border-right: none !important; }
ul.multi-toggle li span { color: var(--text-muted) !important; }
ul.multi-toggle li.active {
    color: var(--primary) !important;
    background-color: var(--bg-active) !important;
}
ul.multi-toggle li.active span { color: var(--primary) !important; }
ul.multi-toggle li:hover {
    color: var(--text) !important;
    background-color: var(--bg-hover) !important;
}

/* ─── Search / Filter ────────────────────────────────────────── */
.search-field:hover { background: var(--bg-muted) !important; }
.search-field:focus-within { background: var(--bg-active) !important; }
.filtering input { border: none !important; padding: 0 !important; }
.control-bar .filtering input { border: none !important; padding-right: 0 !important; padding-left: 10px !important; }

filter .search-bar {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
}
.search-bar .search-field { padding: 6px 0 !important; }
.search-bar .search-field:hover,
.search-bar .search-field:focus-within { background: transparent !important; }
.search-bar .search-field input { padding: 6px 24px !important; }
.search-bar .search-field input:hover,
.search-bar .search-field input:focus-within { border: 1px solid var(--primary) !important; background: var(--bg-active) !important; }
.search-bar .search-field .svg__custom path { fill: var(--text-muted) !important; }
.search-bar .search-field:hover .svg__custom path { fill: var(--primary) !important; }
.search-bar .search-field:focus-within .svg__custom path { fill: var(--primary) !important; }

/* ─── Datepicker input ───────────────────────────────────────── */
.datepicker input { background: rgba(255,255,255,0) !important; border: none !important; }
.datepicker input.title { color: var(--text) !important; }
.control-bar .datepicker .title { color: #fff !important; }
.datepicker { color: var(--text) !important; }

/* ─── Sliders ────────────────────────────────────────────────── */
.ng5-slider .ng5-slider-bar { background: var(--bg-muted) !important; }
.ng5-slider .ng5-slider-bubble { color: var(--text) !important; }
.irs-grid-text { color: var(--text) !important; }
.ngx-slider .ngx-slider-bar { background: var(--bg-muted) !important; }

.custom-alert .duration {
    background: var(--bg-muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
}
.custom-alert .duration .ng5-slider .ng5-slider-selection,
.custom-alert .duration .ngx-slider .ngx-slider-pointer { background: var(--primary) !important; }
.custom-alert .duration .ng5-slider .ng5-slider-pointer { background-color: var(--primary) !important; }
.custom-alert .duration .ngx-slider .ngx-slider-bubble { color: var(--text); }
.custom-alert .control-bar .tab span { font-size: 12px !important; }
.custom-alert .right Badge { display: none !important; }

.filter-wrapper .slider {
    background: var(--bg-muted) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 24px !important;
}
.filter-wrapper .slider .slider-bar .ngx-slider-inner-tooltip { color: var(--text) !important; }
.filter-wrapper .slider .slider-bar .ngx-slider .ngx-slider-pointer,
.export-media .slider .slider-bar .ngx-slider .ngx-slider-pointer { background-color: var(--primary) !important; border: 2px solid var(--bg-panel) !important; }
.filter-wrapper .slider .slider-bar .ngx-slider .ngx-slider-selection,
.export-media .slider .slider-bar .ngx-slider .ngx-slider-selection { background: var(--primary) !important; }
.filter-wrapper .slider .slider-bar .ngx-slider .ngx-slider-tick.ngx-slider-selected,
.export-media .slider .slider-bar .ngx-slider .ngx-slider-tick.ngx-slider-selected { background: var(--primary) !important; }
.filter-wrapper .slider .slider-bar .ngx-slider .ngx-slider-tick,
.export-media .slider .slider-bar .ngx-slider .ngx-slider-tick { background: var(--bg-muted) !important; border: none !important; }
.filter-wrapper .chart { background: transparent !important; border-top: none !important; }
.filter-wrapper .hours { padding: 20px 0 0 !important; }
.filter-wrapper .control-bar.filter-bar .filtering > * { width: 100% !important; padding: 0 12px !important; }

.new-account .duration {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.new-account .duration .ng5-slider .ng5-slider-pointer,
.new-account .duration .ngx-slider .ngx-slider-pointer,
.new-account .duration .ngx-slider .ngx-slider-selection { background-color: var(--primary) !important; }
.new-account .duration .ng5-slider .ng5-slider-pointer { background: #fff !important; }
.new-account .duration .ngx-slider .ngx-slider-bubble { color: var(--text) !important; }

/* ─── Charts ─────────────────────────────────────────────────── */
.chart {
    background: transparent !important;
    box-shadow: none !important;
}
.hours .graph-legend { color: var(--text-muted) !important; }
.hours .graph-legend ul { margin: 10px auto 10px !important; }
.apexcharts-tooltip.light, .apexcharts-xaxistooltip {
    border: 1px solid var(--border) !important;
    background: var(--bg-panel) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-md) !important;
}
.apexcharts-tooltip-title { border: none !important; background: none !important; color: var(--text) !important; }
.apexcharts-xaxistooltip-text { color: var(--text) !important; }
.apexcharts-xaxistooltip-bottom:before,
.apexcharts-xaxistooltip-bottom:after { border-bottom-color: var(--border) !important; }
.apexcharts-xaxis text { fill: var(--text-muted) !important; }

/* ─── Analytics ──────────────────────────────────────────────── */
.analytics .chart-toggle { border: none !important; }
.analytics .chart-toggle .chart-control { border-right: none !important; }
.analytics .chart-toggle .alert-direction-toggle { margin-left: 10px; display: flex; }
.analytics .chart-toggle .chart-control:hover { background-color: var(--bg-hover) !important; }
.analytics .chart-control .svg__custom { width: 20px !important; }
.analytics .chart-toggle .alert-direction-menu {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}
.analytics .chart-toggle .alert-direction-menu .alert-direction-menu-item:not(:first-child) { border-top: none !important; }
.analytics .chart-toggle .alert-direction-menu .alert-direction-menu-item:hover { background-color: var(--bg-hover) !important; }
.analytics .chart-control [icon=arrow-down-small-full] svg.svg__custom { width: 15px !important; max-height: 15px; }
.analytics .tasks-overview .item .hour { color: var(--text-muted) !important; }
.analytics .tasks-overview .item { border-top: none !important; }
.analytics .item:hover { background-color: var(--bg-hover) !important; }
.analytics .tasks-overview .item .alert { font-size: 13px !important; }
.analytics .count.in svg, .analytics .count.out svg { width: 15px; }
.analytics .alert .card.padding-top { padding-top: 0 !important; }
.analytics .alerts-container {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 24px;
    margin-top: 30px;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    overflow-x: auto;
    padding-bottom: 12px;
}
.alert .number-divider, .alert .progress { max-width: 100px !important; }

/* ─── Labels ─────────────────────────────────────────────────── */
.label-tag { border: none !important; }
.label-item .label-tag, .labels-group .label-tag { padding: 5px 10px !important; }
.labels-manager-body {
    background-color: var(--bg-panel) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
}
.labels-manager-body .label-list .label-row { border-bottom: 1px solid var(--border) !important; }
.no-labels { color: var(--text-muted); }
.label-form-wrapper input { width: auto !important; }
input#colorpicker { width: 100% !important; }
.select-input .dropdown label .checkbox { opacity: 1 !important; }

/* ─── Permissions ────────────────────────────────────────────── */
.permissions .dropdown {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
}
.permissions .dropdown .title { color: var(--text) !important; }
.permissions .select-input .dropdown label.search {
    border-bottom: none !important;
    padding: 6px 24px !important;
}
.permissions .select-input .dropdown label.selected { background: var(--primary) !important; color: #fff !important; }
.permissions .select-input .dropdown label.search input { padding: 6px 12px !important; }
.permission-overview ul li.tag {
    border-radius: 0 !important;
    padding: 3px 12px !important;
    background: transparent !important;
    border: none !important;
}
.permission-overview .tag {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}
.permissions.overview .tag {
    background: var(--bg-muted) !important;
    border-radius: 500px !important;
    padding: 3px 10px !important;
    border: 1px solid var(--border) !important;
}
.permissions.overview .select-input SvgIcon { left: 10px; position: relative; }
.permissions .select-input .dropdown label .title { padding: 0 0 0 10px; }

/* ─── PTZ ────────────────────────────────────────────────────── */
.ptz .left, .ptz .right {
    padding: 0 2% !important;
    opacity: 0.7 !important;
    background: none !important;
    transition: ease all 0.3s;
}
.ptz .up, .ptz .down {
    padding: 2% 0 !important;
    opacity: 0.7 !important;
    background: none !important;
    transition: ease all 0.3s;
}
.ptz .left:hover, .ptz .right:hover, .ptz .up:hover, .ptz .down:hover {
    transform: scale(1.5);
    opacity: 1 !important;
}
.ptz .up:hover { padding: 1% 0 2% !important; }
.ptz .down:hover { padding: 2% 0 1% !important; }
.ptz .left:hover { padding: 0 2% 0 1% !important; }
.ptz .right:hover { padding: 0 1% 0 2% !important; }
.ptz-presets svg { margin: 0 0 0 -6px !important; }
.ptz-presets .presets-list { background: var(--bg-panel); border: 1px solid var(--border); }
.ptz-presets div.presets div.presets-list ul li:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text) !important;
}

/* ─── IO / Relay ─────────────────────────────────────────────── */
.relay-list li {
    background: var(--bg-muted) !important;
    color: var(--text) !important;
}
.relay-list li.active {
    background: var(--primary) !important;
    color: #fff !important;
}
.relay-list li svg { width: 14px; }
div.io-wrapper div.io div.relay-list ul li SvgIcon { margin-right: 9px !important; }
div.io-wrapper div.io div.relay-list ul li {
    background: var(--bg-muted) !important;
    border-bottom: none !important;
}

/* ─── Export Media ───────────────────────────────────────────── */
.export-media .slider { background: var(--bg-muted) !important; border: none !important; }
.export-media .filter {
    background: var(--bg-muted) !important;
    border-radius: 0 !important;
    border: none !important;
}
.export-media .media-list .media-item .image img { border-radius: 0 !important; border: none !important; }
.export-media .media-list .media-item.selected { background: var(--bg-active) !important; border-radius: 0 !important; }
.export-media .media-list .media-item { padding: 0 !important; }
.export-media .datetime .time, .export-media .datetime .date, .export-media .time {
    color: var(--text) !important;
    font-size: 11px !important;
}
exportmedia .overlay .center { background: var(--bg-panel) !important; max-width: 85% !important; }
.export-media .datepicker { padding: 0 24px !important; }
.export-media .svg__custom__sm { margin-right: 12px !important; }

/* ─── Toastr Notifications ───────────────────────────────────── */
.overlay-container .ngx-toastr.toast-success {
    background: var(--bg-panel) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border) !important;
}
.overlay-container .ngx-toastr.toast-success .toast-title,
.overlay-container .ngx-toastr.toast-success .toast-message,
.overlay-container .ngx-toastr.toast-success .remove {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}
.overlay-container .ngx-toastr.toast-success .remove { font-size: 24px !important; }
.toast-container .ngx-toastr { width: 350px !important; }
.toast-container img { width: 100px !important; }
.overlay-container .ngx-toastr .row .col-3 { padding-right: 25px !important; }
.overlay-container .ngx-toastr.toast-success .open:hover,
.overlay-container .ngx-toastr.toast-success .open:focus { background: transparent !important; }

/* ─── Floor Plan ─────────────────────────────────────────────── */
floorplanswitcher label.hovered { background: var(--bg-hover) !important; }
floorplanmanagement .floorplan-management li.item-carousel { background: var(--primary) !important; }
floorplanmanagement .floorplan-management .carousel .items-carousel .overview-link:hover { background: var(--success) !important; }
.floor-plan-count { background: var(--primary) !important; color: #fff !important; }
.floor-plan-count svgicon[icon="floor-plan"] { opacity: 1 !important; }
.manage-sidebar span.counter.tag {
    color: var(--text) !important;
    background: var(--bg-muted) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.floorplan-management .floor-plans-overview .floor-plan-card { background-color: transparent !important; }
.floorplan-management .floor-plans-overview .floor-plan-card .floor-plan-name {
    text-transform: none !important;
    font-weight: 300 !important;
    line-height: 14px !important;
    padding: 0 !important;
    color: var(--text) !important;
    word-break: break-word !important;
}
.floorplan-management .active-floorplan .canvas-menu {
    background: var(--primary) !important;
    color: #fff !important;
}
.floorplan-management .active-floorplan .canvas-menu .labels-toggle:hover {
    cursor: pointer;
    background-color: var(--primary-dark) !important;
    color: #fff !important;
}
.active-floorplan .live-stream-container streamcomponent {
    background: rgba(0,0,0,0.85);
    padding-bottom: 30px;
}
.live-stream-container .live-stream-header {
    background-color: rgba(0,0,0,0.85) !important;
    border-bottom: none !important;
}
.live-stream-container .live-stream-header span.live-stream-title { color: #ddd !important; }
.active-floorplan .streamcomponent .fullscreen { top: 12px !important; bottom: unset !important; right: 12px !important; }
.active-floorplan .streamcomponent .live { bottom: -26px !important; top: unset !important; background: transparent !important; left: 6px !important; }
.active-floorplan .streamcomponent .mode { bottom: -26px !important; top: unset !important; background: transparent !important; right: 0 !important; }
.active-floorplan .streamcomponent .live .text { color: #ccc !important; }
.active-floorplan .streamcomponent .mode .quality { color: #fff !important; background: transparent !important; }
.active-floorplan .streamcomponent .mode .quality:not(.active) { color: rgba(255,255,255,0.3) !important; }
.active-floorplan .streamcomponent .io-wrapper { right: 12px !important; bottom: 12px !important; }
.active-floorplan .streamcomponent .zoom { bottom: 12px !important; top: unset !important; }
.active-floorplan .streamcomponent .ptz-presets { bottom: unset !important; top: 12px !important; }

/* ─── Timeline ───────────────────────────────────────────────── */
.timeline-wrapper { background-color: transparent !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.timeline-scale { color: var(--text) !important; }
.timeline-wrapper .timeline-body .timeline-content .timeline-events .timeline-device .device-events .media-item .media-indicator { background-color: var(--primary) !important; }
.timeline-wrapper .timeline-body .timeline-content .timeline-events .timeline-device .device-events .media-item.past-event .media-indicator { background-color: var(--bg-muted) !important; }
.timeline-wrapper .timeline-body .timeline-content .timeline-events .timeline-device .device-events .media-item.past-event { opacity: 0.5 !important; }
.timeline-wrapper .timeline-body .timeline-content .timeline-handle .indicator-indicator { border-top: 12px solid var(--primary) !important; }
.timeline-wrapper .timeline-body .timeline-content .timeline-handle { transform: translateX(-50%) !important; background-color: rgba(0,0,0,0.3) !important; width: 1px !important; }
.timeline-wrapper .timeline-body .timeline-content .timeline-events .timeline-device { gap: 0 !important; border-bottom: 1px dotted var(--border) !important; padding: 12px 0 6px !important; }
.timeline-wrapper .timeline-body .timeline-content { height: fit-content !important; }
.timeline-wrapper .device-events { background: var(--bg-muted); }
.timeline-wrapper .timeline-body .timeline-content .timeline-events .timeline-device .device-events .media-item { height: 42px !important; }
.timeline-wrapper .timeline-footer { margin-top: 0 !important; }
.timeline-wrapper .status-badge {
    background: var(--primary) !important;
    color: #fff !important;
    margin-bottom: 12px !important;
    margin-left: 12px !important;
    font-weight: 300 !important;
    text-transform: none !important;
}
.timeline-actions button.button.outlined { background: var(--primary) !important; border-radius: 25px !important; }

/* ─── Video Wall ─────────────────────────────────────────────── */
@media only screen and (min-width: 1024px) {
    videowalllist .accounts-list .table .heading .actions { display: inline-block; flex: 0 0 273px !important; text-align: center !important; padding: 0 12px 0 0; }
}
videowalllist .accounts-list .table .heading .fullname { flex: auto; padding: 0 0 0 18px; }
videowalllist .accounts-list .table .item .site-access,
videowalllist .accounts-list .table .item .group-access,
videowalllist .accounts-list .table .item .camera-access { display: flex; flex: 0 0 90px; justify-content: center; }
videowalllist .accounts-list .table .heading .site-access,
videowalllist .accounts-list .table .heading .group-access,
videowalllist .accounts-list .table .heading .camera-access { flex: 0 0 90px; text-align: center !important; }
videowalllist .accounts-list .table .heading .status { text-align: center !important; }
@media only screen and (min-width: 769px) {
    videowalllist .accounts-list .table .heading .site-access,
    videowalllist .accounts-list .table .heading .group-access,
    videowalllist .accounts-list .table .heading .camera-access { flex: 0 0 85px !important; }
}
@media only screen and (min-width: 1024px) {
    videowalllist .accounts-list .table .heading .site-access,
    videowalllist .accounts-list .table .heading .group-access,
    videowalllist .accounts-list .table .heading .camera-access { flex: 0 0 150px !important; }
}
@media only screen and (min-width: 1408px) {
    videowalllist .accounts-list .table .heading .site-access,
    videowalllist .accounts-list .table .heading .group-access,
    videowalllist .accounts-list .table .heading .camera-access { flex: 0 0 180px !important; justify-content: center; }
    videowalllist .accounts-list .table .item .site-access,
    videowalllist .accounts-list .table .item .group-access,
    videowalllist .accounts-list .table .item .camera-access { justify-content: center; }
}

/* ─── Accounts list heading ──────────────────────────────────── */
@media (max-width: 1024px) {
    .accounts-list .table .heading .actions { display: flex !important; flex: 0 0 81px; justify-content: center !important; }
    .accounts-list .table .item .actions { display: block !important; }
    .accounts-list .table .item .status { flex: 0 0 60px !important; text-align: center !important; }
    .actions button.button.outlined { margin: 3px 0 !important; }
    .accounts-list .table .heading { padding: 0 24px 0 0 !important; }
    .accounts-list .table .heading .fullname,
    .accounts-list .table .item .name-role { min-width: 0; }
}

/* ─── Popover ────────────────────────────────────────────────── */
.popover-content {
    background-color: var(--bg-panel) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}
.popover-menu-item { color: var(--text); border-bottom: 1px solid var(--border) !important; }
.popover-menu-item:hover { background: var(--bg-hover) !important; }

/* ─── Create Task ────────────────────────────────────────────── */
.create-task .camera-site {
    background: var(--bg-muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
}
.create-task .camera-site .value { color: var(--text-muted) !important; }
.create-task .camera-site .row { border-top: 1px solid var(--border) !important; }
.create-task .container-right .settings .settings-options {
    background-color: var(--bg-muted) !important;
    border: none !important;
    border-radius: 0 !important;
}
.create-task .container-right .settings .settings-options label:hover { background: var(--bg-hover) !important; }
.create-task .container-right .settings .settings-options label { padding: 4px 24px !important; }
.create-task .container-right .settings .settings-options .setting-row { color: var(--text) !important; }

/* ─── Misc ───────────────────────────────────────────────────── */
.there-is-more .text { white-space: nowrap !important; }
.no-results p { font-size: 13px !important; }
.media-item-overview .properties .svg__custom { width: 18px !important; max-height: 18px !important; }
.box.video-meta-details .row { color: var(--text-muted) !important; }
.duration p { color: var(--text-muted) !important; }
.tasks placeholder .placeholder,
.stream.offline section.not-found,
.profile placeholder .placeholder,
.notifications-list placeholder.placeholder { border: 1px dashed var(--border-strong) !important; border-radius: 0 !important; }
.stream.offline section.not-found p { font-size: 12px !important; line-height: 1.2 !important; color: var(--text-muted) !important; }

.heatmap canvas { width: 100% !important; height: auto !important; }
.CanvasToolsContainer { max-height: 400px; }

.grid-column { display: grid; align-content: start; }
block.heatmap { grid-row: 1; }
block.file-information { grid-row: 3; }
block.camera-information { grid-row: 2; }
block.pipeline-information { grid-row: 4; }
block.dominant-colors { grid-row: 4; }

.sites agm-map { border-top: none !important; margin: 0 0 25px !important; }

a.ng-star-inserted { color: var(--primary) !important; }
.title.placeholder.ng-star-inserted { color: var(--text-muted) !important; }
span.text-muted { color: var(--text-muted) !important; }
.container .description,
.container span.ng-star-inserted { color: var(--text-muted) !important; }

.mfa .secret {
    background: var(--bg-muted) !important;
    border-radius: 0 !important;
    text-align: center !important;
    display: block !important;
    padding: 10px 20px !important;
    border: 1px solid var(--border) !important;
}

.new-group .grid-container ul li:nth-child(odd) { background-color: transparent !important; }
.new-group .grid-container ul li:hover { background-color: transparent !important; }

.grid-container ul li:nth-child(odd) { background-color: var(--bg-muted) !important; }
.grid-container .footer ul.properties li:nth-child(odd) { background-color: transparent !important; }
.grid-container ul li:hover { background-color: var(--bg-hover) !important; }
.grid-container ul li.active { background-color: var(--bg-active) !important; }
.grid-container ul li.active a { color: var(--primary) !important; }
.grid-container ul li a { color: var(--text-muted) !important; }
.grid-container ul li a:visited { color: var(--text-light) !important; }
.grid-container .duration { color: var(--text-muted) !important; font-weight: 300 !important; }

.vjs-playlist .vjs-playlist-title-container { text-shadow: none !important; }
.main-preview-player .vjs-playlist { background-color: var(--bg-panel) !important; border: 1px solid var(--border); }
.main-preview-player .vjs-playlist .vjs-playlist-item.vjs-selected { color: var(--primary) !important; background: var(--bg-active) !important; }
.main-preview-player .vjs-playlist .vjs-playlist-item:hover { background: var(--bg-hover) !important; }
.main-preview-player .vjs-playlist .vjs-playlist-item { border-bottom: 1px solid var(--border) !important; }
.main-preview-player .vjs-playlist .vjs-up-next .vjs-up-next-text { padding: 2px 0 !important; color: var(--text) !important; }
.main-preview-player .vjs-playlist { color: var(--text-light) !important; }

.loadmore .spinner.ng-star-inserted,
loadmore .spinner.ng-star-inserted { background-color: var(--primary) !important; }

.group .stream-popup { top: 5px !important; }

sitebadge { margin: 0 2px; }
.site-badge span {
    color: var(--text) !important;
    background: var(--bg-muted) !important;
    padding: 2px !important;
    border-radius: 50% !important;
}
.site-badge { box-shadow: none !important; }
.item .site-badge span { border-radius: 50% !important; }

.svg__custom { width: 26px; max-height: 26px; overflow: visible !important; }
.button .svg__custom,
blockbutton .media .svg__custom,
.svg__custom__mute { width: 21px; max-height: 18px; height: auto; }
.svg__custom__sm { width: 13px; }
.navigation .svg__custom, .navigation .svg__custom__sm { width: 18px; }
.livestream .stream-window .stream.running .svg__custom { width: 16px !important; }
.classification svg { padding: 0; width: 20px; max-height: 20px; height: auto; }
.control-bar .svg__custom, .control-bar .svg__custom__mute { width: 20px; }
[icon=arrow-down-small-full] .svg__custom { width: 13px !important; }
.classification svgicon { font-size: 0 !important; }
.logo svgicon { color: var(--text) !important; }

[icon=calendar] .svg__custom__sm { width: 26px !important; }
[icon=calendar] .sub-menu .svg__custom__sm, .sub-menu .svg__custom__sm { width: 13px !important; }
.control-bar [icon=calendar] .datepicker .svg__custom__sm { width: 13px !important; }

.value .tag svg { width: 14px; }

/* ─── Trigger / Tooltip ──────────────────────────────────────── */
.trigger {
    position: absolute;
    right: 12px;
    top: 25px;
    color: var(--text);
}
.trigger-modal {
    position: absolute;
    right: 60px;
    top: 23px;
    color: var(--text);
}
.trigger svg:hover, .trigger-modal svg:hover { transform: scale(1.25); cursor: pointer; }
.custom-modal p { color: var(--text-muted); }
.custom-modal a { color: var(--primary) !important; }
.custom-modal a:hover { color: var(--primary-dark) !important; }
a.custom-modal-button {
    padding: 10px 14px;
    background: var(--success);
    color: #fff !important;
    margin-top: 10px;
    display: inline-block;
    font-size: 14px;
}
a.custom-modal-button:hover { background: rgba(22,163,74,0.85); color: rgba(255,255,255,0.9) !important; }

.trigger[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: -94px !important;
    bottom: 3px !important;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10000;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trigger-modal[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: -94px !important;
    bottom: 4px !important;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10000;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trigger[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 11px;
    left: -12px;
    transform: translateX(-50%) rotate(-90deg);
    border: 6px solid transparent;
    border-top-color: var(--primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.trigger-modal[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 13px;
    left: -8px;
    transform: translateX(-50%) rotate(-90deg);
    border: 6px solid transparent;
    border-top-color: var(--primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.trigger:hover::after, .trigger:hover::before,
.trigger:focus-visible::after, .trigger:focus-visible::before,
.trigger-modal:hover::after, .trigger-modal:hover::before,
.trigger-modal:focus-visible::after, .trigger-modal:focus-visible::before { opacity: 1; }

/* ─── Misc Overrides ─────────────────────────────────────────── */
.classification svgicon { font-size: 0 !important; }
.opacity__minus { opacity: 0.5; }
.opacity__minus:hover { opacity: 1; }
.theme-switcher, svgicon[icon="lightmode"], svgicon[icon="darkmode"] { display: none !important; }
.select-input img, .select-input SvgIcon { padding-top: 6px; }
.control-bar .select-input img, .select-input SvgIcon { padding-top: 0 !important; }

[type=active] .svg__custom__mute { clip-path: polygon(0% 0%, 65% 0%, 65% 100%, 0% 100%); }
.new-account .domain .domain-text {
    background-color: var(--bg-muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 6px 12px;
    color: var(--text) !important;
    font-weight: normal !important;
    margin-bottom: 12px !important;
}

.task-item .body .grid-container .task-notes .task-details .task-details-footer .details-row .labelspicker-wrapper {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
    z-index: 1;
}

.item .inline-button-field.button.neutral { padding: 5px !important; }

.color-picker .hex-text .box input,
.color-picker .rgba-text .box input,
.color-picker .hsla-text .box input { color: var(--text) !important; }

input#myAlertsCheckbox:checked { filter: hue-rotate(15deg) saturate(0.5) brightness(1) !important; }
.select-input .checkbox, .checkbox { filter: hue-rotate(210deg); }
.label-tag { border: none !important; }

languageselect .select-input .dropdown label.search { padding: 0 24px; background: var(--bg-panel); border-bottom: none; }
languageselect .select-input .dropdown label { background: var(--bg-panel); }
languageselect .select-input .dropdown label .title { color: var(--text) !important; }
languageselect .select-input .dropdown label:hover { background: var(--bg-hover) !important; }
languageselect .select-input .dropdown label.selected { background: var(--bg-active) !important; }
languageselect .select-input .input-label { left: 50% !important; width: auto !important; height: auto !important; color: var(--warning) !important; }

.modal-body ngxgeo-autocomplete .custom-autocomplete__dropdown li a { background: var(--bg-muted) !important; color: var(--text) !important; }
.modal-body ngxgeo-autocomplete .custom-autocomplete__dropdown li a:hover { background-color: var(--bg-hover) !important; }
.modal-body ngxgeo-autocomplete .custom-autocomplete__dropdown li.heading.heading-recent:hover { background: var(--bg-muted) !important; }
.modal-body ngxgeo-autocomplete .custom-autocomplete__dropdown .active .secondary_text,
.modal-body ngxgeo-autocomplete .custom-autocomplete__dropdown .secondary_text { color: var(--text-muted) !important; }
.custom-autocomplete__dropdown .heading-recent,
.custom-autocomplete__dropdown .currentlocation,
ngx-geo-autocomplete .custom-autocomplete__dropdown { background: var(--bg-muted) !important; border-top: 1px solid var(--border) !important; }
ngx-geo-autocomplete .custom-autocomplete__dropdown a:hover,
ngx-geo-autocomplete .custom-autocomplete__dropdown a:focus { background-color: var(--bg-hover) !important; }
.grid-container ul.custom-autocomplete__dropdown li.active { background-color: var(--bg-active) !important; }
.grid-container ul li.currentlocation a { background: var(--bg-muted) !important; }
.grid-container ul.custom-autocomplete__dropdown li:nth-child(odd) { background-color: var(--bg-muted) !important; }
.grid-container ul.custom-autocomplete__dropdown li:hover { background-color: var(--bg-hover) !important; }

.encryption-block {
    background: url(/assets/custom/eyecon-darker.svg) fixed, var(--bg) !important;
    background-size: 95vw 95vh !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.encryption-block .center .encryption-block__icon { font-size: 20px !important; color: var(--text-muted) !important; font-weight: 300; }
.encryption-block .center .error input { border: none !important; }
.encryption-block .center .error button { background: var(--primary) !important; }
.encryption-block .center button { padding: 17px !important; height: 48px; }

@media only screen and (min-width: 769px) {
    .new-videowall .permission-overview { padding: 0 0 0 36px; }
    .vjs-playlist.vjs-playlist-vertical.vjs-csspointerevents {
        background: url(https://acustomer.seing.ai/assets/custom/logo-sidebar.svg);
        background-repeat: no-repeat;
        background-size: 100px;
        background-position-y: 98%;
        background-position-x: 90%;
    }
}

@media only screen and (min-width: 1024px) {
    .group-detail .tasks-overview .item .site,
    .site-detail .tasks-overview .item .site { flex: 0 !important; margin: 0 22px 0 0 !important; }
}

@media only screen and (min-width: 1024px) {
    .row { flex-direction: column !important; }
}
@media only screen and (min-width: 1224px) {
    .row { flex-direction: row !important; }
}

@media only screen and (max-width: 768px) {
    .text-info.testimonial p { color: var(--text-muted) !important; }
}

.group-detail .tasks-overview .header,
.group-detail .tasks-overview .item,
.site-detail .tasks-overview .item { border-bottom: 1px solid var(--border) !important; }

.camera-assignment .text-muted { color: var(--text-muted) !important; }
.sequence-detail .badge:empty { display: none !important; }
.select-input .dropdown label.search { border-bottom: 1px solid var(--border) !important; padding: 0 24px; }