/* Generated from OrianaSIEMUI component styles (scoped via CSS nesting). Do not edit by hand. */
/* ===== layouts/admin-layouts/admin-layout/admin-layout.component.css (global) ===== */
body.sidebar-mode:not(.show-sidebar) .admin-headbar__left.left-div {
padding-left: 42px;
}
.lightBlue-theme .latest-raw-log-menu {
--latest-log-surface: #f8fbff;
--latest-log-surface-soft: rgba(0, 148, 217, .1);
--latest-log-border: rgba(0, 122, 204, .22);
--latest-log-text: #1f3747;
--latest-log-muted: rgba(31, 55, 71, .68);
--latest-log-accent: #0094d9;
--latest-log-shadow: 0 18px 42px rgba(0, 94, 158, .18);
}
.dark-theme .latest-raw-log-menu {
--latest-log-surface: #202426;
--latest-log-surface-soft: rgba(255, 255, 255, .06);
--latest-log-border: rgba(255, 255, 255, .12);
--latest-log-text: #f2f5f4;
--latest-log-muted: rgba(242, 245, 244, .66);
--latest-log-accent: #8f969e;
--latest-log-shadow: 0 20px 48px rgba(0, 0, 0, .34);
}
.darkBlue-theme .latest-raw-log-menu {
--latest-log-surface: #121a2b;
--latest-log-surface-soft: rgba(80, 133, 255, .11);
--latest-log-border: rgba(111, 151, 255, .22);
--latest-log-text: #eef4ff;
--latest-log-muted: rgba(238, 244, 255, .66);
--latest-log-accent: #5f7fae;
--latest-log-shadow: 0 20px 48px rgba(2, 8, 23, .42);
}
.lightBlue-theme .admin-headbar-wrap {
border-bottom-color: rgba(63, 164, 172, .18) !important;
box-shadow: 0 10px 26px rgba(35, 53, 59, .08) !important;
}
.lightBlue-theme .admin-headbar {
--head-surface: rgba(250, 250, 250, .92);
--head-surface-strong: #ffffff;
--head-border: rgba(63, 164, 172, .22);
--head-hover: rgba(63, 164, 172, .13);
--head-text: #23353b;
--head-muted: rgba(35, 53, 59, .64);
--head-shadow: 0 10px 24px rgba(63, 164, 172, .12);
}
.dark-theme .admin-headbar-wrap {
border-bottom-color: rgba(255, 255, 255, .08) !important;
box-shadow: none !important;
}
.dark-theme .admin-headbar {
--head-surface: rgba(34, 38, 40, .94);
--head-surface-strong: #2a2f31;
--head-border: rgba(204, 204, 204, .15);
--head-hover: rgba(255, 255, 255, .08);
--head-text: #cccccc;
--head-muted: rgba(204, 204, 204, .62);
--head-shadow: none;
}
.darkBlue-theme .admin-headbar-wrap {
border-bottom-color: rgba(61, 64, 115, .34) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
}
.darkBlue-theme .admin-headbar {
--head-surface: rgba(6, 21, 26, .94);
--head-surface-strong: #0b2028;
--head-border: rgba(101, 110, 180, .28);
--head-hover: rgba(61, 64, 115, .42);
--head-text: #ffffff;
--head-muted: rgba(255, 255, 255, .64);
--head-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
@media screen and (max-width: 840px) {
.show-sidebar .dashboard {
display: none;
}
.show-sidebar .head {
padding: 8px;
}
}
.lightBlue-theme .license-menu {
--license-surface: #f8fbff !important;
--license-surface-soft: rgba(0, 122, 204, .1) !important;
--license-border: rgba(0, 122, 204, .22) !important;
--license-accent: #0094d9 !important;
--license-accent-strong: #006eb7 !important;
--license-accent-soft: rgba(0, 148, 217, .14) !important;
--license-text: var(--primary--body--color) !important;
--license-muted: rgba(31, 55, 71, .68) !important;
--license-success-soft: rgba(37, 160, 88, .15) !important;
--license-success-border: rgba(37, 160, 88, .42) !important;
--license-danger-soft: rgba(223, 55, 55, .11) !important;
--license-danger-border: rgba(223, 55, 55, .34) !important;
--license-shadow: 0 18px 42px rgba(0, 94, 158, .18) !important;
}
.dark-theme .license-menu {
--license-surface: #202426 !important;
--license-surface-soft: rgba(255, 255, 255, .06) !important;
--license-border: rgba(255, 255, 255, .12) !important;
--license-accent: #8f969e !important;
--license-accent-strong: #b8bec5 !important;
--license-accent-soft: rgba(143, 150, 158, .13) !important;
--license-text: #f2f5f4 !important;
--license-muted: rgba(242, 245, 244, .66) !important;
--license-success-soft: rgba(155, 215, 125, .13) !important;
--license-success-border: rgba(155, 215, 125, .38) !important;
--license-danger-soft: rgba(223, 55, 55, .16) !important;
--license-danger-border: rgba(223, 55, 55, .4) !important;
--license-shadow: 0 20px 48px rgba(0, 0, 0, .34) !important;
}
.darkBlue-theme .license-menu {
--license-surface: #121a2b !important;
--license-surface-soft: rgba(80, 133, 255, .11) !important;
--license-border: rgba(111, 151, 255, .22) !important;
--license-accent: #afafaf !important;
--license-accent-strong: #5f7fae !important;
--license-accent-soft: rgba(47, 79, 127, .22) !important;
--license-text: #eef4ff !important;
--license-muted: rgba(238, 244, 255, .66) !important;
--license-success-soft: rgba(88, 204, 124, .13) !important;
--license-success-border: rgba(88, 204, 124, .38) !important;
--license-danger-soft: rgba(255, 90, 90, .15) !important;
--license-danger-border: rgba(255, 90, 90, .4) !important;
--license-shadow: 0 20px 48px rgba(2, 8, 23, .42) !important;
}
.lightBlue-theme .notification-menu {
--notification-surface: #f8fbff;
--notification-surface-soft: rgba(0, 148, 217, .1);
--notification-border: rgba(0, 122, 204, .22);
--notification-text: #1f3747;
--notification-muted: rgba(31, 55, 71, .68);
--notification-accent: #0094d9;
--notification-hover: rgba(0, 148, 217, .12);
--notification-hover-border: rgba(0, 148, 217, .34);
--notification-shadow: 0 18px 42px rgba(0, 94, 158, .18);
}
.dark-theme .notification-menu {
--notification-surface: #202426;
--notification-surface-soft: rgba(255, 255, 255, .06);
--notification-border: rgba(255, 255, 255, .12);
--notification-text: #f2f5f4;
--notification-muted: rgba(242, 245, 244, .66);
--notification-accent: #8f969e;
--notification-hover: rgba(255, 255, 255, .08);
--notification-hover-border: rgba(255, 255, 255, .2);
--notification-shadow: 0 20px 48px rgba(0, 0, 0, .34);
}
.darkBlue-theme .notification-menu {
--notification-surface: #121a2b;
--notification-surface-soft: rgba(80, 133, 255, .11);
--notification-border: rgba(111, 151, 255, .22);
--notification-text: #eef4ff;
--notification-muted: rgba(238, 244, 255, .66);
--notification-accent: #5f7fae;
--notification-hover: rgba(80, 133, 255, .14);
--notification-hover-border: rgba(111, 151, 255, .32);
--notification-shadow: 0 20px 48px rgba(2, 8, 23, .42);
}
@media screen and (max-width: 930px) {
.show-sidebar .notification-menu {
width: min(400px, calc(100vw - 18px));
}
}
@media screen and (max-width: 750px) {
.show-sidebar .notification-menu {
display: none;
}
}
/* ===== layouts/admin-layouts/admin-layout/admin-layout.component.css (scoped) ===== */
app-admin-layout {
.no-margin {
margin-left: .8rem;
}
.head_icons {
cursor: pointer;
}
.navbar-margin-top {
margin-top: 4rem;
}
.active-url {
color: rgb(170, 33, 33);
}
.admin-headbar-wrap {
position: sticky !important;
top: 0;
z-index: 990;
padding: 8px 12px;
background: var(--body--background);
border-bottom: 1px solid rgba(4, 46, 82, .12) !important;
box-shadow: 0 10px 26px rgba(4, 46, 82, .08) !important;
}
.admin-headbar {
--head-surface: rgba(255, 255, 255, .88);
--head-surface-strong: #ffffff;
--head-border: rgba(4, 46, 82, .16);
--head-hover: rgba(4, 46, 82, .08);
--head-text: var(--primary--body--color);
--head-muted: rgba(4, 46, 82, .62);
--head-shadow: 0 8px 24px rgba(4, 46, 82, .08);
min-height: 50px;
margin: 0 !important;
padding: 7px 10px 7px 12px;
gap: 14px;
background: var(--head-surface);
border-radius: 8px;
}
.admin-headbar.navbar-margin-top {
margin-top: 4rem !important;
}
.admin-headbar__left, .admin-headbar__right {
gap: 8px;
min-width: 0;
}
.admin-headbar__left.left-div {
justify-content: flex-start;
margin-left: 0 !important;
}
.admin-headbar__right.right-div {
justify-content: flex-end;
}
.admin-sidebar-search {
position: relative;
flex: 0 1 260px;
min-width: 180px;
height: 34px;
}
.admin-sidebar-search__icon {
position: absolute;
top: 50%;
left: 11px;
z-index: 1;
color: var(--head-muted);
font-size: 12px;
transform: translateY(-50%);
pointer-events: none;
}
.admin-sidebar-search__input {
width: 100%;
height: 34px;
padding: 0 34px 0 32px;
color: var(--head-text);
background: var(--head-surface-strong);
border: 1px solid var(--head-border);
border-radius: 8px;
box-shadow: none;
font-size: 13px;
font-weight: 600;
outline: none;
}
.admin-sidebar-search__input::placeholder {
color: var(--head-muted);
opacity: .9;
}
.admin-sidebar-search__input:focus {
border-color: var(--secondary--color);
box-shadow: 0 0 0 3px rgba(25, 118, 210, .12);
}
.admin-sidebar-search__info {
position: absolute;
top: 50%;
right: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--head-muted);
font-size: 12px;
transform: translateY(-50%);
cursor: help;
}
.admin-sidebar-search__info:hover {
color: var(--secondary--color);
}
.admin-sidebar-search__tooltip {
position: absolute;
right: -8px;
top: calc(100% + 10px);
visibility: hidden;
width: 270px;
padding: 9px 10px;
color: var(--day--remain--color);
background: var(--secondary--color);
border-radius: 8px;
box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
font-size: 11px;
line-height: 1.35;
opacity: 0;
pointer-events: none;
font-size: 13px;
transition: opacity .18s ease, visibility .18s ease;
}
.admin-sidebar-search__tooltip::after {
content: "";
position: absolute;
right: 10px;
bottom: 100%;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: transparent transparent var(--secondary--color) transparent;
}
.admin-sidebar-search__info:hover .admin-sidebar-search__tooltip {
visibility: visible;
opacity: 1;
}
.admin-sidebar-search__menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 1100;
width: min(340px, calc(100vw - 24px));
max-height: 330px;
margin: 0;
padding: 6px;
overflow-y: auto;
list-style: none;
background: var(--head-surface-strong);
border: 1px solid var(--head-border);
border-radius: 8px;
box-shadow: 0 16px 34px rgba(4, 46, 82, .18);
}
.admin-sidebar-search__item {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 8px 10px;
color: var(--head-text);
border-radius: 7px;
cursor: pointer;
}
.admin-sidebar-search__item:hover {
color: var(--day--remain--color);
background: var(--secondary--color);
}
.admin-sidebar-search__item i {
flex: 0 0 18px;
color: inherit;
font-size: 13px;
text-align: center;
}
.admin-sidebar-search__text {
display: grid;
min-width: 0;
flex: 1;
}
.admin-sidebar-search__badge-group {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.admin-sidebar-search__badge {
padding: 2px 7px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
white-space: nowrap;
}
.admin-sidebar-search__badge-sublabel {
font-size: 9px;
font-weight: 600;
white-space: nowrap;
opacity: .7;
color: inherit;
padding: 0 3px;
}
.admin-sidebar-search__badge--page {
background: rgba(59, 130, 246, .15);
color: #3b82f6;
}
.admin-sidebar-search__badge--correlation {
background: rgba(168, 85, 247, .15);
color: #a855f7;
}
.admin-sidebar-search__badge--device {
background: rgba(20, 184, 166, .15);
color: #14b8a6;
}
.admin-sidebar-search__text strong, .admin-sidebar-search__text small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-sidebar-search__text strong {
color: inherit;
font-size: 13px;
font-weight: 700;
}
.admin-sidebar-search__text small {
color: inherit;
font-size: 11px;
font-weight: 600;
opacity: .72;
}
.admin-sidebar-search__empty {
padding: 10px;
color: var(--head-muted);
font-size: 12px;
font-weight: 700;
text-align: center;
}
.head-nav-button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
color: var(--head-text);
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
box-shadow: none;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.head-nav-button i {
color: var(--head-text);
font-size: 14px;
}
.head-nav-button:hover, .head-action-icon:hover {
background: var(--head-hover) !important;
border-color: var(--head-border) !important;
transform: translateY(-1px);
}
.admin-breadcrumb {
display: flex;
align-items: center;
min-width: 0;
max-width: 48vw;
height: 34px;
margin: 0 !important;
padding: 0 12px;
overflow: hidden;
color: var(--head-text);
border-radius: 8px;
}
.admin-breadcrumb > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-breadcrumb span, .admin-breadcrumb small {
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
}
.admin-breadcrumb small {
color: var(--head-muted) !important;
font-weight: 600;
}
.license-chip {
display: inline-flex !important;
align-items: center;
min-width: 112px;
height: 34px;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
border: 0 !important;
border-radius: 8px !important;
box-shadow: 0 8px 18px rgba(4, 46, 82, .14);
}
.license-chip__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
height: 100%;
padding: 0 13px;
background-color: transparent;
border: none;
border-radius: 8px;
box-shadow: none;
font-size: 13px;
font-weight: 650;
white-space: nowrap;
}
.license-chip i {
color: inherit !important;
font-size: 13px !important;
opacity: 1 !important;
}
.company-chip {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 230px;
height: 34px;
margin: 0 4px !important;
padding: 0 12px;
color: var(--head-text) !important;
background: var(--head-surface-strong);
border: 1px solid var(--head-border);
border-radius: 8px;
opacity: 1 !important;
font-size: 13px;
font-weight: 700;
}
.company-chip i {
color: var(--secondary--color);
font-size: 13px;
}
.company-chip span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.latest-raw-log-dropdown {
position: relative;
padding: 0px !important;
}
.latest-raw-log-button::after {
content: none;
}
.latest-raw-log-button {
overflow: visible;
}
.latest-raw-log-button__status {
position: absolute;
top: -4px;
right: -4px;
width: 10px;
height: 10px;
background: var(--latest-log-status-color);
border: 2px solid var(--head-surface);
border-radius: 50%;
box-shadow: 0 0 0 3px var(--latest-log-status-soft);
}
.latest-raw-log-button.is-ok, .latest-raw-log-state.is-ok {
--latest-log-status-color: #2f9d58;
--latest-log-status-soft: rgba(47, 157, 88, .16);
}
.latest-raw-log-button.is-warning, .latest-raw-log-state.is-warning {
--latest-log-status-color: #d98712;
--latest-log-status-soft: rgba(217, 135, 18, .18);
}
.latest-raw-log-button.is-danger, .latest-raw-log-state.is-danger {
--latest-log-status-color: #df3737;
--latest-log-status-soft: rgba(223, 55, 55, .16);
}
.latest-raw-log-menu {
--latest-log-surface: #ffffff;
--latest-log-surface-soft: rgba(25, 118, 210, .08);
--latest-log-border: rgba(25, 118, 210, .18);
--latest-log-text: var(--primary--body--color);
--latest-log-muted: rgba(48, 54, 62, .68);
--latest-log-accent: #1976d2;
--latest-log-success: #2f9d58;
--latest-log-danger: #df3737;
--latest-log-warning: #d98712;
--latest-log-shadow: 0 20px 48px rgba(20, 32, 45, .18);
width: min(540px, calc(100vw - 28px));
max-height: min(650px, calc(100vh - 92px));
padding: 0 !important;
overflow: hidden;
color: var(--latest-log-text);
background: var(--latest-log-surface) !important;
border: 1px solid var(--latest-log-border) !important;
border-radius: 10px !important;
box-shadow: var(--latest-log-shadow) !important;
}
.latest-raw-log-menu, .latest-raw-log-menu h6, .latest-raw-log-menu span, .latest-raw-log-menu strong, .latest-raw-log-menu small, .latest-raw-log-menu i {
color: var(--latest-log-text) !important;
}
.latest-raw-log-panel {
padding: 12px !important;
}
.latest-raw-log-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px;
background: var(--latest-log-surface-soft);
border: 1px solid var(--latest-log-border);
border-radius: 8px;
}
.latest-raw-log-header h6 {
margin: 0 0 4px;
font-size: 14px;
font-weight: 700;
}
.latest-raw-log-header small, .latest-raw-log-eyebrow {
color: var(--latest-log-muted) !important;
font-weight: 600;
}
.latest-raw-log-eyebrow {
display: block;
margin-bottom: 4px;
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
}
.latest-raw-log-state {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 30px;
height: 30px;
background: var(--latest-log-status-soft);
border-radius: 50%;
}
.latest-raw-log-state span {
width: 10px;
height: 10px;
background: var(--latest-log-status-color);
border-radius: 50%;
}
.latest-raw-log-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 10px;
}
.latest-raw-log-stat {
display: grid;
grid-template-columns: 20px 1fr;
column-gap: 8px;
align-items: center;
padding: 9px;
background: var(--latest-log-surface-soft);
border: 1px solid var(--latest-log-border);
border-radius: 8px;
}
.latest-raw-log-stat i {
grid-row: span 2;
color: var(--latest-log-accent) !important;
font-size: 15px;
}
.latest-raw-log-stat.is-active i {
color: var(--latest-log-success) !important;
}
.latest-raw-log-stat.is-passive i {
color: var(--latest-log-danger) !important;
}
.latest-raw-log-stat.is-stale i {
color: var(--latest-log-warning) !important;
}
.latest-raw-log-stat span {
color: var(--latest-log-muted) !important;
font-size: 11px;
font-weight: 700;
}
.latest-raw-log-stat strong {
font-size: 17px;
font-weight: 800;
line-height: 1;
}
.latest-raw-log-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-top: 10px;
padding: 5px;
background: var(--latest-log-surface-soft);
border: 1px solid var(--latest-log-border);
border-radius: 8px;
}
.latest-raw-log-tabs button {
display: grid;
grid-template-columns: 16px minmax(0, 1fr) auto;
gap: 6px;
align-items: center;
min-height: 34px;
padding: 7px 8px;
color: var(--latest-log-muted);
background: transparent;
border: 1px solid transparent;
border-radius: 7px;
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.latest-raw-log-tabs button:hover, .latest-raw-log-tabs button.is-active {
color: var(--latest-log-text);
background: var(--latest-log-surface);
border-color: var(--latest-log-border);
}
.latest-raw-log-tabs button i {
color: inherit !important;
font-size: 12px;
}
.latest-raw-log-tabs button:nth-child(1) i {
color: var(--latest-log-success) !important;
}
.latest-raw-log-tabs button:nth-child(2) i {
color: var(--latest-log-danger) !important;
}
.latest-raw-log-tabs button:nth-child(3) i {
color: var(--latest-log-warning) !important;
}
.latest-raw-log-tabs button span {
overflow: hidden;
color: inherit !important;
text-overflow: ellipsis;
white-space: nowrap;
}
.latest-raw-log-tabs button small {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
color: inherit !important;
background: var(--latest-log-surface-soft);
border: 1px solid var(--latest-log-border);
border-radius: 999px;
font-size: 10px;
font-weight: 900;
}
.latest-raw-log-tab-panel {
margin-top: 10px;
}
.latest-raw-log-device-list {
display: grid;
gap: 6px;
max-height: 230px;
overflow-y: auto;
padding-right: 3px;
}
.latest-raw-log-device {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 8px;
align-items: center;
min-height: 44px;
padding: 8px;
background: transparent;
border: 1px solid var(--latest-log-border);
border-radius: 8px;
}
.latest-raw-log-device i {
color: var(--latest-log-success) !important;
font-size: 14px;
text-align: center;
}
.latest-raw-log-device.is-passive i {
color: var(--latest-log-danger) !important;
}
.latest-raw-log-device.is-stale i {
color: var(--latest-log-warning) !important;
}
.latest-raw-log-device strong, .latest-raw-log-device small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.latest-raw-log-device strong {
font-size: 12px;
font-weight: 800;
}
.latest-raw-log-device small, .latest-raw-log-empty {
color: var(--latest-log-muted) !important;
font-size: 11px;
font-weight: 700;
}
.latest-raw-log-empty {
padding: 9px;
background: var(--latest-log-surface-soft);
border: 1px dashed var(--latest-log-border);
border-radius: 8px;
text-align: center;
}
.head-action-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
position: relative;
width: 34px;
height: 34px;
margin: 0 !important;
padding: 0 !important;
color: var(--head-text) !important;
background: var(--head-surface-strong);
border: 1px solid transparent !important;
border-radius: 8px !important;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.admin-headbar .head-action-icon i {
color: var(--head-text) !important;
font-size: 15px !important;
opacity: .82 !important;
}
.notification-count {
position: absolute;
top: -6px;
right: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
color: #fff !important;
background: #df3737;
border: 2px solid var(--head-surface);
border-radius: 999px;
font-size: 10px;
font-weight: 800;
line-height: 1;
}
.admin-headbar .head-messages .message-tooltip, .admin-headbar .head-settings .settings-tooltip, .admin-headbar .head-logout .logout-tooltip, .admin-headbar .head-logs .logs-tooltip, .admin-headbar .latest-raw-log-button .latest-raw-log-tooltip {
top: calc(100% + 9px);
color: var(--day--remain--color);
background-color: var(--secondary--color);
border-radius: 8px;
box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
color: var(--primary--sidebar--color);
font-size: 13px;
opacity: 0.80;
transition: background 0.18s ease, color 0.18s ease;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
}
.dropdown-item:focus, .dropdown-item:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.dropdown-item i {
width: 20px;
min-width: 20px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.70;
font-size: 13px;
}
.theme-select-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
color: var(--primary--sidebar--color);
font-size: 13px;
opacity: 0.80;
transition: background 0.18s ease, color 0.18s ease;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
}
.theme-select-item:focus, .theme-select-item:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.theme-select-item i {
width: 20px;
min-width: 20px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.70;
font-size: 13px;
}
.dropdown-menu.system-log {
top: 30px !important;
}
@media screen and (max-width: 980px) {
.admin-headbar-wrap {
padding: 6px 8px;
}
.admin-headbar {
padding: 8px;
gap: 8px;
}
.admin-headbar__left.left-div {
gap: 6px;
}
.admin-breadcrumb {
flex: 1 1 100%;
height: auto;
min-height: 34px;
padding: 6px 8px;
}
.admin-headbar__right.right-div {
gap: 6px;
}
.admin-sidebar-search {
flex: 1 1 100%;
order: -1;
min-width: 0;
}
.company-chip {
display: none;
}
.latest-raw-log-menu, .notification-menu, .license-menu {
width: min(420px, calc(100vw - 18px));
max-width: calc(100vw - 18px);
}
}
@media screen and (max-width: 700px) {
.admin-sidebar-search {
flex: 1 1 100%;
order: 1;
min-width: 140px;
}
.admin-sidebar-search__menu {
width: calc(100vw - 24px);
}
.latest-raw-log-menu {
width: min(420px, calc(100vw - 18px));
max-width: calc(100vw - 18px);
}
.latest-raw-log-tabs {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 640px) {
.admin-headbar {
padding: 7px 8px;
gap: 8px;
}
.admin-headbar__left.left-div, .admin-headbar__right.right-div {
gap: 6px;
}
.admin-breadcrumb {
min-height: 32px;
padding: 5px 8px;
}
.admin-breadcrumb span, .admin-breadcrumb small {
font-size: 12px;
}
.license-chip {
min-width: 96px;
}
.license-chip__button {
padding: 0 10px;
font-size: 12px;
}
.head-nav-button, .head-action-icon {
width: 32px;
height: 32px;
}
.latest-raw-log-menu, .notification-menu, .license-menu {
width: min(360px, calc(100vw - 16px));
max-width: calc(100vw - 16px);
}
}
.head-messages {
position: relative;
display: inline-block;
color: var(--primary--sidebar--color);
font-size: .8rem;
cursor: pointer;
}
.head-messages .message-tooltip {
visibility: hidden;
width: 160px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 5px 5px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -80px;
font-size: 10px;
opacity: 0;
transition: opacity .5s;
}
.head-messages:hover .message-tooltip {
visibility: visible;
opacity: 1;
}
.head-settings {
position: relative;
display: inline-block;
color: var(--primary--sidebar--color);
font-size: .8rem;
cursor: pointer;
}
.head-settings .settings-tooltip {
visibility: hidden;
width: auto;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 5px 20px;
position: absolute;
z-index: 1;
font-size: 10px;
top: 100%;
left: 100%;
margin-left: -60px;
opacity: 0;
transition: opacity .5s;
}
.head-settings:hover .settings-tooltip {
visibility: visible;
opacity: 1;
}
.head-logout {
position: relative;
display: inline-block;
color: var(--primary--sidebar--color);
font-size: .8rem;
cursor: pointer;
}
.head-logout .logout-tooltip {
visibility: hidden;
width: 80px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
font-size: 10px;
padding: 5px 0px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -40px;
opacity: 0;
transition: opacity .5s;
}
.head-logout:hover .logout-tooltip {
visibility: visible;
opacity: 1;
}
.head-logs {
position: relative;
display: inline-block;
color: var(--primary--sidebar--color);
font-size: .8rem;
cursor: pointer;
}
.head-logs .logs-tooltip {
visibility: hidden;
width: 110px;
font-size: 10px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 5px 0px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -55px;
opacity: 0;
transition: opacity .5s;
}
.head-logs:hover .logs-tooltip {
visibility: visible;
opacity: 1;
}
.latest-raw-log-button .latest-raw-log-tooltip {
visibility: hidden;
width: 130px;
padding: 5px 5px;
position: absolute;
z-index: 1;
left: 50%;
margin-left: -65px;
font-size: 10px;
font-weight: 500;
line-height: 1.2;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity .5s;
}
.latest-raw-log-button:hover .latest-raw-log-tooltip, .latest-raw-log-button:focus-visible .latest-raw-log-tooltip {
visibility: visible;
opacity: 1;
}
.head-version {
position: relative;
display: inline-block;
color: var(--primary--sidebar--color);
font-size: .8rem;
cursor: pointer;
}
.head-version .version-tooltip {
visibility: hidden;
width: 110px;
font-size: 10px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 5px 0px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -55px;
opacity: 0;
transition: opacity .5s;
}
.head-version:hover .version-tooltip {
visibility: visible;
opacity: 1;
}
.license-button::after {
content: none;
}
.license-menu {
--license-surface: var(--body--background) !important;
--license-surface-soft: rgba(25, 118, 210, .08) !important;
--license-border: rgba(25, 118, 210, .2) !important;
--license-accent: #1976d2 !important;
--license-accent-strong: #125aa0 !important;
--license-accent-soft: rgba(25, 118, 210, .14) !important;
--license-text: var(--primary--body--color) !important;
--license-muted: rgba(48, 54, 62, .7) !important;
--license-success: #74b84f !important;
--license-success-soft: rgba(116, 184, 79, .16) !important;
--license-success-border: rgba(116, 184, 79, .46) !important;
--license-danger: #df3737 !important;
--license-danger-soft: rgba(223, 55, 55, .13) !important;
--license-danger-border: rgba(223, 55, 55, .36) !important;
--license-shadow: 0 18px 42px rgba(20, 32, 45, .16) !important;
width: min(620px, calc(100vw - 28px)) !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--license-surface) !important;
border: 1px solid var(--license-border) !important;
border-radius: 10px !important;
box-shadow: var(--license-shadow) !important;
}
.license-menu, .license-menu h6, .license-menu span, .license-menu strong, .license-menu small, .license-menu i {
color: var(--license-text) !important;
}
.license-panel {
padding: 16px !important;
color: var(--license-text) !important;
}
.license-header {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 14px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid var(--license-border) !important;
}
.license-eyebrow {
display: block !important;
margin-bottom: 4px !important;
color: var(--license-muted) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.license-company {
max-width: 330px !important;
overflow: hidden !important;
color: var(--license-text) !important;
font-size: 12px !important;
font-weight: 650 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.license-status {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
flex: 0 0 auto !important;
min-height: 30px !important;
padding: 6px 10px !important;
color: var(--license-accent-strong) !important;
font-size: 12px !important;
font-weight: 700 !important;
background: var(--license-surface-soft) !important;
border: 1px solid var(--license-border) !important;
border-radius: 999px !important;
}
.license-status i {
color: var(--license-accent-strong) !important;
}
.license-status.is-warning {
color: #fff !important;
background: var(--license-danger) !important;
border-color: var(--license-danger) !important;
}
.license-status.is-warning i {
color: #fff !important;
}
.license-grid {
display: grid !important;
grid-template-columns: 1.2fr 1fr 1fr !important;
gap: 12px !important;
margin-top: 14px !important;
}
.license-card {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
min-height: 138px !important;
padding: 12px !important;
text-align: center !important;
background: var(--license-surface-soft) !important;
border: 1px solid var(--license-border) !important;
border-radius: 8px !important;
}
.license-card strong {
display: block !important;
margin-top: 8px !important;
color: var(--license-text) !important;
font-size: 21px !important;
line-height: 1 !important;
}
.license-card span {
margin-top: 4px !important;
color: var(--license-text) !important;
font-size: 12px !important;
font-weight: 700 !important;
}
.license-card small {
margin-top: 7px !important;
color: var(--license-muted) !important;
font-size: 11px !important;
font-weight: 600 !important;
}
.license-card-usage {
gap: 5px !important;
}
.license-chart-wrap {
width: 96px !important;
height: 96px !important;
}
.license-chart {
width: 100% !important;
height: 100% !important;
}
.license-card-label {
margin-top: 0 !important;
font-size: 12px !important;
color: var(--primary--body--color) !important;
}
.license-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
color: #fff !important;
font-size: 15px !important;
background: linear-gradient(135deg, var(--license-accent), var(--license-accent-strong)) !important;
border-radius: 50% !important;
box-shadow: 0 10px 24px rgba(25, 118, 210, .24) !important;
}
.license-icon i {
color: #fff !important;
}
.license-days {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 12px !important;
}
.license-day-stat {
display: grid !important;
grid-template-columns: 30px 1fr !important;
column-gap: 8px !important;
align-items: center !important;
min-height: 54px !important;
padding: 9px 10px !important;
background: var(--license-surface-soft) !important;
border: 1px solid var(--license-border) !important;
border-radius: 8px !important;
}
.license-day-stat i {
grid-row: span 2 !important;
color: var(--license-accent) !important;
font-size: 16px !important;
}
.license-day-stat span {
color: var(--license-muted) !important;
font-size: 11px !important;
font-weight: 600 !important;
}
.license-day-stat strong {
color: var(--license-text) !important;
font-size: 14px !important;
font-weight: 800 !important;
}
.license-meta {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 12px !important;
}
.license-date {
display: grid !important;
grid-template-columns: 28px 1fr !important;
column-gap: 8px !important;
align-items: center !important;
min-height: 52px !important;
padding: 9px 10px !important;
background: transparent !important;
border: 1px solid var(--license-border) !important;
border-radius: 8px !important;
}
.license-date i {
grid-row: span 2 !important;
color: var(--license-accent) !important;
font-size: 16px !important;
}
.license-date span {
color: var(--license-muted) !important;
font-size: 11px !important;
font-weight: 600 !important;
}
.license-date strong {
color: var(--license-text) !important;
font-size: 13px !important;
}
.license-modules {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 12px !important;
}
.license-module {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
min-height: 30px !important;
padding: 6px 10px !important;
color: var(--license-text) !important;
font-size: 12px !important;
font-weight: 700 !important;
background: var(--license-surface-soft) !important;
border: 1px solid var(--license-border) !important;
border-radius: 999px !important;
}
.license-module.is-active {
color: var(--license-text) !important;
background: var(--license-success-soft) !important;
border-color: var(--license-success-border) !important;
}
.license-module i {
color: var(--license-success) !important;
}
.license-module.is-passive {
color: var(--license-muted) !important;
background: var(--license-danger-soft) !important;
border-color: var(--license-danger-border) !important;
}
.license-module.is-passive i {
color: var(--license-danger) !important;
}
@media screen and (max-width: 640px) {
.license-panel {
padding: 12px !important;
}
.license-header, .license-days, .license-meta {
grid-template-columns: 1fr !important;
}
.license-header {
display: grid !important;
}
.license-company {
max-width: 100% !important;
}
.license-status {
justify-content: center !important;
width: 100% !important;
}
.license-grid {
grid-template-columns: 1fr !important;
}
.license-card {
min-height: 112px !important;
}
.license-chart-wrap {
width: 86px !important;
height: 86px !important;
}
.admin-sidebar-search {
display: none;;
}
.latest-raw-log-menu {
width: min(360px, calc(100vw - 18px));
}
}
.notification-menu {
--notification-surface: #ffffff;
--notification-surface-soft: rgba(25, 118, 210, .08);
--notification-border: rgba(25, 118, 210, .18);
--notification-text: var(--primary--body--color);
--notification-muted: rgba(48, 54, 62, .68);
--notification-accent: #1976d2;
--notification-hover: rgba(25, 118, 210, .1);
--notification-hover-border: rgba(25, 118, 210, .34);
--notification-shadow: 0 20px 48px rgba(20, 32, 45, .18);
--notification-info: #6d73b8;
--notification-success: #2f9d58;
--notification-error: #df3737;
--notification-warn: #d98712;
width: min(460px, calc(100vw - 28px));
max-height: min(570px, calc(100vh - 92px));
padding: 10px !important;
overflow-y: auto;
overflow-x: hidden;
color: var(--notification-text);
background: var(--notification-surface) !important;
border: 1px solid var(--notification-border) !important;
border-radius: 10px !important;
box-shadow: var(--notification-shadow) !important;
}
.notification-menu, .notification-menu h6, .notification-menu span, .notification-menu small, .notification-menu i, .notification-menu a {
color: var(--notification-text) !important;
}
.notification-panel {
padding: 4px 4px 10px;
}
.notification-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 11px 12px;
background: var(--notification-surface-soft);
border: 1px solid var(--notification-border);
border-radius: 8px;
}
.notification-title {
min-width: 0;
}
.notification-eyebrow {
display: block;
margin-bottom: 3px;
color: var(--notification-muted) !important;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.notification-title h6 {
margin: 0;
overflow: hidden;
font-size: 15px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.notification-total {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 42px;
height: 30px;
padding: 0 10px;
color: #fff !important;
background: var(--notification-accent);
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.notification-total i {
color: #fff !important;
font-size: 12px;
}
.system-li {
margin-top: 7px;
line-height: 1.25;
}
.notification-tooltip-div {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 10px;
align-items: flex-start;
min-height: 56px;
padding: 10px;
background: var(--notification-surface);
border: 1px solid var(--notification-border);
border-radius: 8px;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.system-li:hover .notification-tooltip-div {
background: var(--notification-hover);
border-color: var(--notification-hover-border);
box-shadow: 0 10px 24px rgba(20, 32, 45, .1);
transform: translateY(-1px);
}
.radius-div {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
color: var(--notification-level-color) !important;
background: var(--notification-level-soft);
border: 1px solid var(--notification-level-border);
border-radius: 50%;
}
.radius-div i {
color: var(--notification-level-color) !important;
font-size: 14px;
}
.notification-tooltip-div.is-info {
--notification-level-color: var(--notification-info);
--notification-level-soft: rgba(109, 115, 184, .14);
--notification-level-border: rgba(109, 115, 184, .34);
}
.notification-tooltip-div.is-success {
--notification-level-color: var(--notification-success);
--notification-level-soft: rgba(47, 157, 88, .14);
--notification-level-border: rgba(47, 157, 88, .34);
}
.notification-tooltip-div.is-error {
--notification-level-color: var(--notification-error);
--notification-level-soft: rgba(223, 55, 55, .13);
--notification-level-border: rgba(223, 55, 55, .34);
}
.notification-tooltip-div.is-warn {
--notification-level-color: var(--notification-warn);
--notification-level-soft: rgba(217, 135, 18, .14);
--notification-level-border: rgba(217, 135, 18, .34);
}
.notification-content {
min-width: 0;
}
.log-level {
display: inline-flex;
align-items: center;
min-height: 19px;
margin-bottom: 3px;
padding: 2px 7px;
color: var(--notification-level-color) !important;
background: var(--notification-level-soft);
border-radius: 999px;
font-size: 10px;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
}
.notification-item {
display: block;
width: 100%;
max-width: none !important;
padding: 0 !important;
overflow: hidden;
color: var(--notification-text) !important;
background: transparent !important;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.notification-item:hover {
color: var(--notification-text) !important;
background: transparent !important;
}
.notification-empty {
display: grid;
justify-items: center;
gap: 10px;
padding: 26px 18px 28px;
color: var(--notification-muted) !important;
text-align: center;
}
.notification-empty i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
color: var(--notification-accent) !important;
background: var(--notification-surface-soft);
border: 1px solid var(--notification-border);
border-radius: 50%;
font-size: 18px;
}
.notification-empty span {
color: var(--notification-muted) !important;
font-size: 13px;
font-weight: 700;
}
.notification-footer {
display: flex;
justify-content: flex-end;
padding: 12px 4px 2px;
}
.notification-read-button {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 32px;
padding: 7px 12px !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.notification-read-button i {
color: #fff !important;
font-size: 12px !important;
}
.no-data {
width: min(350px, calc(100vw - 28px));
overflow: hidden;
}
@media screen and (max-width: 700px) {
.notification-menu {
width: min(360px, calc(100vw - 18px));
padding: 8px !important;
}
.notification-header {
padding: 9px 10px;
}
.notification-tooltip-div {
grid-template-columns: 32px minmax(0, 1fr);
gap: 8px;
padding: 9px;
}
.radius-div {
width: 32px;
height: 32px;
}
}
}
/* ===== layouts/admin-layouts/admin-navbar/admin-navbar.component.css (global) ===== */
.lightBlue-theme #navbar {
--sb-accent: #3fa4ac;
--sb-accent-strong: #8ee4ea;
--sb-accent-soft: rgba(63, 164, 172, 0.18);
--sb-accent-glow: rgba(63, 164, 172, 0.30);
--sb-border: rgba(142, 228, 234, 0.18);
}
.dark-theme #navbar {
--sb-accent: #a5a9ab;
--sb-accent-strong: #f1f5f9;
--sb-accent-soft: rgba(165, 169, 171, 0.14);
--sb-accent-glow: rgba(255, 255, 255, 0.13);
--sb-border: rgba(255, 255, 255, 0.12);
}
.darkBlue-theme #navbar {
--sb-accent: #7477ff;
--sb-accent-strong: #a8b0ff;
--sb-accent-soft: rgba(116, 119, 255, 0.18);
--sb-accent-glow: rgba(116, 119, 255, 0.34);
--sb-border: rgba(168, 176, 255, 0.16);
}
@keyframes sbOverlayFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform: translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(1rem);
opacity: 0;
}
}
@-webkit-keyframes slideIn {
0% {
-webkit-transform: transform;
-webkit-opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-webkit-opacity: 1;
}
0% {
-webkit-transform: translateY(1rem);
-webkit-opacity: 0;
}
}
/* ===== layouts/admin-layouts/admin-navbar/admin-navbar.component.css (scoped) ===== */
app-admin-navbar {
.show-sidebar #navbar { display: none; }
#navbar {
--sb-accent: #38bdf8;
--sb-accent-strong: #7dd3fc;
--sb-accent-soft: rgba(56, 189, 248, 0.16);
--sb-accent-glow: rgba(56, 189, 248, 0.28);
--sb-surface: rgba(255, 255, 255, 0.055);
--sb-surface-strong:rgba(255, 255, 255, 0.095);
--sb-border: rgba(255, 255, 255, 0.11);
--sb-muted: rgba(255, 255, 255, 0.62);
}
#navbar {
display: none;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: 60px;
padding: 0 !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 80%),
radial-gradient(circle at 0% 50%, var(--sb-accent-glow), transparent 30%),
var(--sidebar--background);
border-bottom: 1px solid var(--sb-border);
box-shadow: 0 4px 28px rgba(0, 0, 0, 0.22);
}
.navbar_container { box-shadow: none !important; }
.nav_ul {
list-style: none;
flex-direction: row;
align-items: center;
gap: 2px;
padding: 0;
margin: 0;
}
.nav-link, .main_drop {
display: flex !important;
align-items: center;
gap: 8px;
padding: 7px 11px !important;
border-radius: 10px;
border: 1px solid transparent;
color: var(--primary--sidebar--color) !important;
font-size: 13px;
font-weight: 500;
opacity: 0.82;
cursor: pointer;
text-decoration: none !important;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
.nav-link:hover, .main_drop:hover, .nav-item.show > .main_drop {
background: var(--sb-surface) !important;
border-color: var(--sb-border) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
opacity: 1 !important;
color: var(--sb-accent-strong) !important;
text-decoration: none !important;
}
.nav-link::after, .main_drop::after {
font-size: 10px;
opacity: 0.5;
margin-left: 2px;
}
.mobile_span {
display: flex;
align-items: center;
gap: 8px;
}
.mobile_span i {
font-size: 12px !important;
width: 14px;
text-align: center;
flex-shrink: 0;
color: var(--primary--sidebar--color);
opacity: 0.72;
transition: color 0.2s, opacity 0.2s;
}
.nav-link:hover .mobile_span i, .main_drop:hover .mobile_span i, .nav-item.show > .main_drop .mobile_span i {
color: var(--sb-accent-strong) !important;
opacity: 1 !important;
}
.dropdown-menu {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
var(--sidebar--background) !important;
border: 1px solid var(--sb-border) !important;
border-radius: 12px !important;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
padding: 6px !important;
min-width: 200px;
margin-top: 6px !important;
backdrop-filter: blur(14px);
}
.dropdown-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px !important;
border-radius: 10px;
border: 1px solid transparent;
font-size: 12.5px;
font-weight: 500;
color: var(--primary--sidebar--color) !important;
opacity: 0.72;
cursor: pointer;
text-decoration: none !important;
margin-bottom: 1px;
transition: background 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s, color 0.2s;
}
.dropdown-item i {
font-size: 11px;
width: 14px;
min-width: 14px;
text-align: center;
flex-shrink: 0;
margin: 0 !important;
color: var(--primary--sidebar--color);
opacity: 0.52;
transition: color 0.2s, opacity 0.2s;
}
.second_span, .sub_span {
display: flex;
align-items: center;
gap: 8px;
}
.dropdown-item:hover, .dropdown-item:focus {
background: var(--sb-surface) !important;
border-color: var(--sb-border) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
transform: translateX(2px);
color: var(--sb-accent-strong) !important;
opacity: 1 !important;
}
.dropdown-item:hover i, .dropdown-item:focus i {
color: var(--sb-accent-strong) !important;
opacity: 1 !important;
}
.dropdown-menu .dropdown-menu {
margin-top: 0 !important;
margin-left: 6px !important;
}
.right_arrow::after { transform: rotate(360deg); }
.navbar-toggler {
border: none !important;
display: none;
}
.navbar_full { display: none; }
.navbar-toggler:focus {
outline: none !important;
box-shadow: none !important;
}
.hamburger-toggle {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
z-index: 11;
}
.hamburger {
position: absolute;
transform: translate(-50%, -50%) rotate(0deg);
left: 50%;
top: 50%;
width: 50%;
height: 50%;
pointer-events: none;
}
#min_navbar_button_close { font-size: 30px; color: white; display: none; }
#min_navbar_button_open { font-size: 30px; color: white; display: block; }
.hamburger.active span { position: absolute; margin: 0; }
.hamburger.active span:first-child { top: 45%; transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { left: 50%; width: 0px; }
.hamburger.active span:last-child { top: 45%; transform: rotate(-45deg); }
.navbar-toggler-icon { display: none; }
.mobile_languages { display: none; }
.offcanvas-start {
background-color: var(--sidebar--background);
}
.offcanvas-body {
background-image: var(--sidebar--background);
margin-left: 1rem;
max-height: 60px;
}
.navbar-image { width: 80px; height: 55px; }
.logo { display: none; }
.bottom { margin-left: auto; }
.slogan { display: none; }
.sb-dashboard-link {
display: flex !important;
align-items: center;
position: relative;
width: 100%;
}
.sb-dashboard-link > span:not(.sb-dashboard-actions) {
flex: 1;
min-width: 0;
text-align: left;
}
.sb-dashboard-actions {
display: none;
align-items: center;
gap: 6px;
margin-left: auto;
padding-left: 8px;
flex-shrink: 0;
}
.sb-dashboard-link:hover .sb-dashboard-actions {
display: contents;
}
.sb-dashboard-action-icon {
font-size: 11px;
cursor: pointer;
padding: 3px;
opacity: 0.6;
transition: opacity 0.15s ease, color 0.15s ease;
}
.sb-dashboard-action-icon:hover {
opacity: 1;
}
.sb-dashboard-action-delete {
color: #dc3545;
}
.sb-dashboard-action-delete:hover {
color: #bd2130;
}
.sb-dashboard-add {
opacity: 0.6;
transition: opacity 0.15s ease;
}
.sb-dashboard-add:hover {
opacity: 1;
}
.sb-slide-panel {
position: fixed;
top: 0;
right: 0;
left: auto;
min-width: 600px;
max-width: 600px;
height: 100vh;
background-color: var(--body--background, #0f0f23);
border: 1px solid color-mix(in srgb, var(--primary--body--color, #ccc) 15%, transparent);
border-radius: 10px 0 0 10px;
box-shadow: -6px 0 32px rgba(0, 0, 0, 0.40);
z-index: 1045;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
opacity: 0;
pointer-events: none;
}
.sb-slide-panel--open {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.sb-slide-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color, #ccc) 10%, transparent);
}
.sb-slide-panel__title {
color: var(--primary--body--color, #ccc);
font-size: 13px;
font-weight: 600;
margin: 0;
}
.sb-slide-panel__close {
color: var(--primary--body--color, #ccc);
font-size: 14px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.15s ease;
padding: 2px;
}
.sb-slide-panel__close:hover { opacity: 1; }
.sb-slide-panel__body {
padding: 14px 16px;
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--sb-accent, #38bdf8) 72%, white 8%) color-mix(in srgb, var(--sb-track, rgba(255,255,255,.08)) 82%, transparent);
}
.sb-slide-panel__body::-webkit-scrollbar { width: 6px; }
.sb-slide-panel__body::-webkit-scrollbar-track { background: color-mix(in srgb, var(--sb-track, rgba(255,255,255,.08)) 82%, transparent); border-radius: 999px; }
.sb-slide-panel__body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, color-mix(in srgb, var(--sb-accent-strong, #7dd3fc) 72%, white 8%), color-mix(in srgb, var(--sb-accent, #38bdf8) 78%, black 8%)); border-radius: 999px; }
.sb-slide-panel__field { margin-bottom: 12px; }
.sb-slide-panel__label {
display: block;
color: var(--primary--body--color, #ccc);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
opacity: 0.7;
}
.sb-slide-panel__input {
width: 100%;
background: var(--input--background, #1a1a2e);
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 30%, transparent);
border-radius: 6px;
color: var(--primary--body--color, #ccc);
font-size: 12px;
padding: 8px 12px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sb-slide-panel__input:focus {
border-color: var(--secondary--color, #4a90d9);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color, #4a90d9) 15%, transparent);
}
.sb-slide-panel__input::placeholder { color: color-mix(in srgb, var(--primary--body--color, #ccc) 35%, transparent); }
.sb-slide-panel__divider {
height: 1px;
background: color-mix(in srgb, var(--primary--body--color, #ccc) 10%, transparent);
margin: 6px 0 14px;
}
.sb-slide-panel__search-wrap { position: relative; }
.sb-slide-panel__search-ico {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
color: color-mix(in srgb, var(--primary--body--color, #ccc) 40%, transparent);
pointer-events: none;
}
.sb-slide-panel__input--search { padding-left: 30px !important; }
.sb-slide-panel__items-section { margin-bottom: 14px; }
.sb-slide-panel__section-label {
display: block;
color: var(--primary--body--color, #ccc);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
opacity: 0.6;
}
.sb-slide-panel__section-count { font-weight: 400; opacity: 0.5; font-size: 10px; }
.sb-slide-panel__items-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 180px;
overflow-y: auto;
scrollbar-width: thin;
}
.sb-slide-panel__item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s ease;
border: 1px solid transparent;
}
.sb-slide-panel__item:hover { background-color: color-mix(in srgb, var(--primary--body--color, #ccc) 8%, transparent); }
.sb-slide-panel__item--selected {
background-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 12%, transparent);
border-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 30%, transparent);
}
.sb-slide-panel__item--selected:hover { background-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 18%, transparent); }
.sb-slide-panel__item-check {
font-size: 14px;
color: color-mix(in srgb, var(--primary--body--color, #ccc) 30%, transparent);
width: 16px;
flex-shrink: 0;
}
.sb-slide-panel__item--selected .sb-slide-panel__item-check { color: var(--secondary--color, #4a90d9); }
.sb-slide-panel__item-img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.sb-slide-panel__item-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-slide-panel__item-name {
font-size: 12px;
color: var(--primary--body--color, #ccc);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-slide-panel__item-device {
font-size: 10px;
color: color-mix(in srgb, var(--primary--body--color, #ccc) 45%, transparent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-slide-panel__device-select {
position: relative;
margin: 6px 6px 10px 24px;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 24%, transparent);
border-left: 3px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 72%, transparent);
border-radius: 14px;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color, #4a90d9) 10%, transparent), color-mix(in srgb, var(--body--background, #0f0f23) 94%, transparent));
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 24px rgba(0,0,0,.12);
}
.sb-slide-panel__device-select-inner {
display: flex;
align-items: center;
position: relative;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 18%, transparent);
border-radius: 12px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background, #1a1a2e) 92%, white 8%), color-mix(in srgb, var(--body--background, #0f0f23) 94%, black 6%));
}
.sb-slide-panel__device-ico {
font-size: 12px;
color: color-mix(in srgb, var(--secondary--color, #4a90d9) 60%, transparent);
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: color-mix(in srgb, var(--secondary--color, #4a90d9) 12%, transparent);
}
.sb-slide-panel__device-dropdown {
width: 100%;
background: transparent;
border: 0;
color: var(--primary--body--color, #ccc);
font-size: 11.5px;
font-weight: 500;
padding: 0 28px 0 36px;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--secondary--color, #4a90d9) 50%), linear-gradient(135deg, var(--secondary--color, #4a90d9) 50%, transparent 50%);
background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.sb-slide-panel__device-dropdown option { background: var(--body--background, #0f0f23); color: var(--primary--body--color, #ccc); }
.sb-slide-panel__device-loading {
font-size: 12px;
color: var(--secondary--color, #4a90d9);
position: absolute;
right: 12px;
}
.sb-slide-panel__item-options {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(2, auto);
align-items: stretch;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 14%, transparent);
}
.sb-slide-panel__mini-select {
min-height: 36px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background, #1a1a2e) 94%, white 6%), color-mix(in srgb, var(--body--background, #0f0f23) 96%, black 4%));
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 26%, transparent);
border-radius: 10px;
color: var(--primary--body--color, #ccc);
font-size: 10.5px;
font-weight: 600;
padding: 0 32px 0 12px;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--secondary--color, #4a90d9) 50%), linear-gradient(135deg, var(--secondary--color, #4a90d9) 50%, transparent 50%);
background-position: calc(100% - 14px) calc(50% - 3px), calc(100% - 8px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.sb-slide-panel__mini-select option { background: var(--body--background, #0f0f23); color: var(--primary--body--color, #ccc); }
.sb-slide-panel__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color, #ccc) 10%, transparent);
background: color-mix(in srgb, var(--input--background, #1a1a2e) 82%, transparent);
font-size: 10.5px;
font-weight: 600;
color: var(--primary--body--color, #ccc);
cursor: pointer;
opacity: 0.88;
user-select: none;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.sb-slide-panel__toggle:hover {
opacity: 1;
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 30%, transparent);
background: color-mix(in srgb, var(--secondary--color, #4a90d9) 10%, transparent);
}
.sb-slide-panel__toggle input[type="checkbox"] {
width: 16px; height: 16px; appearance: none; -webkit-appearance: none;
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 38%, transparent);
border-radius: 5px; background: color-mix(in srgb, var(--body--background, #0f0f23) 85%, transparent);
cursor: pointer; margin: 0; position: relative;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sb-slide-panel__toggle input[type="checkbox"]::after {
content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0); opacity: 0; transition: transform 0.15s ease, opacity 0.15s ease;
}
.sb-slide-panel__toggle input[type="checkbox"]:checked {
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color, #4a90d9) 90%, white 10%), var(--secondary--color, #4a90d9));
border-color: var(--secondary--color, #4a90d9);
}
.sb-slide-panel__toggle input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); opacity: 1; }
.sb-slide-panel__show-more {
display: block;
width: 100%;
background: none;
border: 1px dashed color-mix(in srgb, var(--primary--body--color, #ccc) 20%, transparent);
border-radius: 5px;
color: var(--primary--body--color, #4a90d9);
font-size: 11px;
padding: 6px;
margin-top: 6px;
cursor: pointer;
text-align: center;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sb-slide-panel__footer {
padding: 10px 16px 14px;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color, #ccc) 10%, transparent);
display: flex;
gap: 8px;
}
.sb-slide-panel__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
border: none;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.sb-slide-panel__btn:active { transform: scale(0.97); }
.sb-slide-panel__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sb-slide-panel__btn--save {
background-color: var(--secondary--color, #4a90d9);
color: #fff;
}
.sb-slide-panel__btn--save:hover { background-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 85%, #000); }
.sb-slide-panel__btn--cancel {
background-color: color-mix(in srgb, var(--primary--body--color, #ccc) 12%, transparent);
color: var(--primary--body--color, #ccc);
}
.sb-slide-panel__btn--cancel:hover { background-color: color-mix(in srgb, var(--primary--body--color, #ccc) 20%, transparent); }
.sb-slide-panel__overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.45);
z-index: 1039;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
animation: sbOverlayFadeIn 0.3s ease;
}
@media only screen and (max-width: 1055px) {
.mobile_span {
font-size: .9rem !important;
}
}
@media (max-width:991px) {
.main_drop::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0px;
background-color: var(--sidebar--hover--color);
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s visibility ease, .4s width ease !important;
}
.main_drop:hover::before {
width: 4px;
opacity: 1;
visibility: visible;
}
.navbar_full {
height: 60px !important;
}
.xx::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0px;
background-color: var(--sidebar--hover--color);
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s visibility ease, .4s width ease !important;
}
.xx:hover::before {
width: 4px;
opacity: 1;
visibility: visible;
}
.second_drop::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0px;
background-color: var(--sidebar--hover--color);
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s visibility ease, .4s width ease !important;
}
.second_drop:hover::before {
width: 4px;
opacity: 1;
visibility: visible;
}
.dropdown-menu {
background: transparent!important;
}
.main_drop::after {
position: absolute;
right:10px;
top: 15px;
font-size: 20px;
}
.second_drop::after {
position: absolute;
right:10px;
top: 10px;
font-size: 20px;
}
.navbar-toggler-icon {
display: block;
}
.slogan {
display: block;
color: var(--primary--sidebar--color);
margin-bottom: 3rem;
opacity: var(--opacity--80);
}
.offcanvas-body {
margin-left: 0rem;
max-height: 100vh;
}
.mobile_languages {
display: block;
}
.logo {
display: block;
}
.nav_ul {
flex-direction: column;
}
.navbar-image {
width: 125px;
height: 100px;
}
.offcanvas-body {
padding: 0px;
padding-top: 0px;
}
.nav-link {
font-size: 1.1rem;
}
.main_li {
margin-bottom: .6rem;
}
.right_arrow::after {
transform: rotate(0deg);
}
.second_span {
display: flex;
align-items: center;
gap: 10px;
margin-left: 0.8rem;
}
.second_span i {
width: 18px;
min-width: 18px;
text-align: center;
flex-shrink: 0;
}
.sub_span {
display: flex;
align-items: center;
gap: 10px;
margin-left: 1.8rem;
}
.sub_span i {
width: 18px;
min-width: 18px;
text-align: center;
flex-shrink: 0;
}
.second_li a {
font-size: 1rem;
}
.main_drop::after {
transform: rotate(270deg);
}
.main_drop[aria-expanded=true]::after {
transform: rotate(0deg);
}
.second_drop::after {
transform: rotate(0deg);
}
.second_drop[aria-expanded=true]::after {
transform: rotate(90deg);
}
.navbar-toggler {
display: block;
}
.offcanvas-body::-webkit-scrollbar {
width: 0px;
}
.offcanvas-body::-webkit-scrollbar-thumb {
background-color: var(--primary--body--color) !important;
}
.offcanvas-body {
box-shadow: var(--cart--box--shadow);
background-image: var(--sidebar--background);
}
.mobile_span {
margin-left: 1.5rem;
}
.navbar_full {
display: flex;
}
.bottom {
position: absolute;
left: 75px;
margin-bottom: .5rem;
margin-top: 3rem;
}
.hover-effect {
position: relative;
text-decoration: none;
color: #333;
transition: color 0.3s;
}
.hover-effect::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: var(--primary--sidebar--color);
bottom: 0;
left: -100%;
transition: left 0.6s;
}
.hover-effect:hover {
color: var(--primary--sidebar--color);
}
.hover-effect:hover::before {
left: 0;
}
}
@media (min-width: 200px) {
.animate {
animation-duration: .8s;
-webkit-animation-duration: .8s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
}
.slideIn {
-webkit-animation-name: slideIn;
animation-name: slideIn;
}
@media all and (min-width: 992px) {
.dropdown-menu li { position: relative; }
.nav-item .submenu {
display: none;
position: absolute;
left:100%; top:-7px;
}
.nav-item .submenu-left {
right:100%; left:auto;
}
.dropdown-menu > li:hover > .submenu { display: block; }
}
@media (max-width: 991px) {
.dropdown-menu .dropdown-menu {
margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}
#navbarOffcanvasLg, .navbar-toggler {
display: none !important;
}
.mobile_languages {
width: 100%;
display: flex;
justify-content: end;
}
}
}
/* ===== layouts/admin-layouts/admin-sidebar/admin-sidebar.component.css (global) ===== */
aside {
--sb-accent: #38bdf8;
--sb-accent-strong: #7dd3fc;
--sb-accent-soft: rgba(56, 189, 248, 0.16);
--sb-accent-glow: rgba(56, 189, 248, 0.28);
--sb-surface: rgba(255, 255, 255, 0.055);
--sb-surface-strong: rgba(255, 255, 255, 0.095);
--sb-border: rgba(255, 255, 255, 0.11);
--sb-muted: rgba(255, 255, 255, 0.62);
--sb-track: rgba(255, 255, 255, 0.08);
--sb-shadow: 18px 0 42px rgba(0, 0, 0, 0.28);
--sb-logo-glow: rgba(56, 189, 248, 0.11);
}
.lightBlue-theme aside, .lightBlue-theme .canvas-nav {
--sb-accent: #3fa4ac;
--sb-accent-strong: #8ee4ea;
--sb-accent-soft: rgba(63, 164, 172, 0.18);
--sb-accent-glow: rgba(63, 164, 172, 0.30);
--sb-surface: rgba(255, 255, 255, 0.065);
--sb-surface-strong: rgba(255, 255, 255, 0.11);
--sb-border: rgba(142, 228, 234, 0.18);
--sb-muted: rgba(214, 235, 241, 0.66);
--sb-track: rgba(63, 164, 172, 0.16);
--sb-logo-glow: rgba(63, 164, 172, 0.14);
}
.dark-theme aside, .dark-theme .canvas-nav {
--sb-accent: #a5a9ab;
--sb-accent-strong: #f1f5f9;
--sb-accent-soft: rgba(165, 169, 171, 0.14);
--sb-accent-glow: rgba(255, 255, 255, 0.13);
--sb-surface: rgba(255, 255, 255, 0.045);
--sb-surface-strong: rgba(255, 255, 255, 0.085);
--sb-border: rgba(255, 255, 255, 0.12);
--sb-muted: rgba(229, 231, 235, 0.62);
--sb-track: rgba(255, 255, 255, 0.08);
--sb-logo-glow: rgba(255, 255, 255, 0.055);
}
.darkBlue-theme aside, .darkBlue-theme .canvas-nav {
--sb-accent: #7477ff;
--sb-accent-strong: #a8b0ff;
--sb-accent-soft: rgba(116, 119, 255, 0.18);
--sb-accent-glow: rgba(116, 119, 255, 0.34);
--sb-surface: rgba(255, 255, 255, 0.055);
--sb-surface-strong: rgba(255, 255, 255, 0.10);
--sb-border: rgba(168, 176, 255, 0.16);
--sb-muted: rgba(228, 232, 255, 0.66);
--sb-track: rgba(116, 119, 255, 0.16);
--sb-logo-glow: rgba(116, 119, 255, 0.13);
}
aside {
width: calc(18%);
left: 0;
height: 100vh !important;
z-index: 1050;
position: fixed;
transform: translateX(-100%);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 34%),
radial-gradient(circle at 12% 0%, var(--sb-accent-glow), transparent 30%),
var(--sidebar--background);
background-color: var(--sidebar--background);
display: flex !important;
flex-direction: column;
border-right: 1px solid var(--sb-border);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: visible;
}
aside::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.85;
}
.show-sidebar aside {
transform: translateX(0);
height: 100% !important;
}
aside.sb-panel-active .side-inner, aside.sb-panel-active .sb-header, aside.sb-panel-active .sb-langs, aside.sb-panel-active .sb-footer, aside.sb-panel-active .toggle {
filter: blur(3px);
pointer-events: none;
transition: filter 0.3s ease;
}
aside.sb-panel-active {
background: color-mix(in srgb, var(--sidebar--background) 85%, black) !important;
}
.show-sidebar aside .toggle {
padding-left: 0;
padding-top: 0;
position: absolute;
z-index: 1002;
right: 14px;
top: 14px;
transform: none;
}
aside .toggle {
padding-left: 0;
padding-top: 0;
position: absolute;
right: 0;
top: 15px;
transform: translateX(141%);
z-index: 1002;
display: none;
}
.sidebar-mode aside .toggle {
display: block !important;
}
aside .toggle a {
width: 34px;
height: 34px;
border-radius: 10px;
cursor: pointer;
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
aside .toggle a:hover {
background: var(--sb-surface-strong);
border-color: var(--sb-accent);
transform: translateY(-1px);
}
.show-sidebar aside .fill-color {
fill: var(--primary--sidebar--color);
}
aside .fill-color {
fill: var(--primary--body--color);
opacity: var(--opacity--80);
}
.show-sidebar svg.fill-color.bi {
transform: rotate(360deg) !important;
}
aside {
-ms-overflow-style: none;
scrollbar-width: none;
}
@media only screen and (max-width: 1320px) {
aside {
width: 20% !important;
}
}
@media only screen and (max-width: 1120px) {
aside {
width: 25% !important;
}
}
@keyframes sbOverlayFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes sbDeviceSlideDown {
from { opacity: 0; max-height: 0; transform: translateY(-4px); }
to { opacity: 1; max-height: 50px; transform: translateY(0); }
}
/* ===== layouts/admin-layouts/admin-sidebar/admin-sidebar.component.css (scoped) ===== */
app-admin-sidebar {
.canvas-nav {
--sb-accent: #38bdf8;
--sb-accent-strong: #7dd3fc;
--sb-accent-soft: rgba(56, 189, 248, 0.16);
--sb-accent-glow: rgba(56, 189, 248, 0.28);
--sb-surface: rgba(255, 255, 255, 0.055);
--sb-surface-strong: rgba(255, 255, 255, 0.095);
--sb-border: rgba(255, 255, 255, 0.11);
--sb-muted: rgba(255, 255, 255, 0.62);
--sb-track: rgba(255, 255, 255, 0.08);
--sb-shadow: 18px 0 42px rgba(0, 0, 0, 0.28);
--sb-logo-glow: rgba(56, 189, 248, 0.11);
}
.canvas-nav::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.85;
}
svg.fill-color.bi.bi-layout-sidebar-inset {
transform: rotate(180deg);
}
aside::-webkit-scrollbar {
display: none;
}
#searchInput li {
padding: .3rem 0rem;
cursor: pointer;
}
.sb-header {
padding: 22px 20px 12px;
flex-shrink: 0;
display: flex;
justify-content: center;
position: relative;
z-index: 1;
}
.sb-header #image-container {
border-radius: 16px;
padding: 12px 18px;
}
.sb-header #image-container img {
width: 108px !important;
cursor: pointer;
display: block;
}
.sb-langs {
display: flex;
gap: 7px;
padding: 0 18px 16px;
flex-shrink: 0;
justify-content: center;
position: relative;
z-index: 1;
}
.sb-lang {
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
overflow: hidden;
cursor: pointer;
opacity: 0.68;
transition: opacity 0.2s, border-color 0.2s, transform 0.2s ease, background 0.2s ease;
}
.sb-lang:hover {
opacity: 1;
border-color: var(--sb-accent);
background: var(--sb-surface-strong);
transform: translateY(-1px);
}
.sb-lang img {
object-fit: cover;
}
.side-inner {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.side-inner::-webkit-scrollbar {
width: 0;
}
.sb-search-wrap {
position: relative;
padding: 0 12px 12px;
flex-shrink: 0;
z-index: 1;
}
.sb-search-ico {
position: absolute;
left: 30px;
top: 18px;
transform: translateY(-50%);
color: var(--sb-accent-strong);
pointer-events: none;
line-height: 1;
z-index: 2;
font-size: 10px;
opacity: 0.84;
}
.sb-search-input {
width: 100%;
height: 36px;
padding-left: 34px !important;
padding-right: 12px !important;
text-indent: 0 !important;
border-radius: 12px !important;
border: 1px solid var(--sb-border) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)) !important;
color: var(--primary--sidebar--color) !important;
font-size: 12.5px;
outline: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.sb-search-input::placeholder {
color: var(--primary--sidebar--color) !important;
opacity: 0.3 !important;
font-size: 12.5px;
}
.sb-search-input:focus {
background-color: var(--sb-surface-strong) !important;
border-color: var(--sb-accent) !important;
box-shadow: 0 0 0 3px var(--sb-accent-soft) !important;
}
.sb-nav {
flex: 1;
overflow-y: auto;
padding: 2px 10px 8px;
position: relative;
z-index: 1;
-ms-overflow-style: none;
scrollbar-width: none;
}
.sb-nav::-webkit-scrollbar {
display: none;
}
.sb-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.sb-section-label {
padding: 14px 8px 4px;
cursor: default;
}
.sb-section-label:first-child {
padding-top: 4px;
}
.sb-section-label span {
font-size: 9.5px;
font-weight: 700;
color: var(--primary--sidebar--color);
opacity: 0.52;
letter-spacing: 0.14em;
text-transform: uppercase;
display: block;
margin-left: 1rem;
}
.sb-item {
margin-bottom: 2px;
cursor: pointer;
}
.sb-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 12px;
cursor: pointer;
text-decoration: none !important;
position: relative;
border: 1px solid transparent;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.sb-link::before {
content: '';
position: absolute;
left: 0;
top: 18%;
bottom: 18%;
width: 0;
border-radius: 0 3px 3px 0;
background: var(--sb-accent);
opacity: 0;
transition: width 0.25s ease, opacity 0.25s ease;
}
.sb-link:hover {
background: var(--sb-surface) !important;
border-color: var(--sb-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
transform: translateX(2px);
text-decoration: none !important;
}
.sb-link:hover::before {
width: 3px;
opacity: 1;
}
.sb-link:hover .sb-label {
color: var(--sb-accent-strong) !important;
opacity: 1 !important;
}
.sb-link:hover .sb-icon-wrap i {
color: var(--sb-accent-strong) !important;
opacity: 1 !important;
}
.sb-link:hover .sb-arrow {
color: var(--sb-accent-strong) !important;
opacity: 0.7 !important;
}
.sb-link.sb-link--active {
background: linear-gradient(90deg, var(--sb-accent-soft), rgba(255, 255, 255, 0.045)) !important;
border-color: var(--sb-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px rgba(0, 0, 0, 0.12);
}
.sb-link.sb-link--active::before {
width: 3px !important;
opacity: 1 !important;
background: var(--sb-accent) !important;
}
.sb-link.sb-link--active .sb-label {
color: var(--sb-accent-strong) !important;
opacity: 1 !important;
}
.sb-link.sb-link--active .sb-icon-wrap {
background: var(--sb-accent-soft) !important;
border-color: rgba(255, 255, 255, 0.08);
}
.sb-link.sb-link--active .sb-icon-wrap i {
color: var(--sb-accent-strong) !important;
opacity: 1 !important;
}
.collapsible[aria-expanded="true"] .sb-arrow {
transform: rotate(90deg);
}
.sb-icon-wrap {
width: 30px;
min-width: 30px;
height: 30px;
border-radius: 10px;
background: var(--sb-surface);
border: 1px solid rgba(255, 255, 255, 0.055);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
}
.sb-icon-wrap i {
font-size: 12px !important;
color: var(--primary--sidebar--color) !important;
opacity: 0.82 !important;
width: 14px;
text-align: center;
margin: 0 !important;
}
.sb-label {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 500;
color: var(--primary--sidebar--color) !important;
opacity: 0.82 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-arrow {
font-size: 10px !important;
color: var(--primary--sidebar--color) !important;
opacity: 0.55 !important;
flex-shrink: 0;
float: none !important;
transition: transform 0.22s ease, color 0.2s, opacity 0.2s;
}
.sb-submenu {
padding-left: 18px;
margin: 4px 0 6px;
position: relative;
}
.sb-submenu::before {
content: '';
position: absolute;
left: 8px;
top: 5px;
bottom: 7px;
width: 1px;
background: linear-gradient(180deg, transparent, var(--sb-border), transparent);
}
.sb-submenu ul {
list-style: none;
padding: 0;
margin: 0;
}
.sb-submenu--deep {
padding-left: 12px;
}
.sb-subitem {
margin-bottom: 1px;
position: relative;
}
.sb-sublink {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 10px;
text-decoration: none !important;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.sb-sublink i {
font-size: 11px;
color: var(--primary--sidebar--color) !important;
opacity: 0.52 !important;
width: 14px;
text-align: center;
flex-shrink: 0;
margin: 0 !important;
transition: color 0.2s, opacity 0.2s;
}
.sb-sublink span {
flex: 1;
min-width: 0;
font-size: 12.5px;
color: var(--primary--sidebar--color) !important;
opacity: 0.62 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s, opacity 0.2s;
}
.sb-sublink .sb-arrow {
margin-left: auto;
}
.sb-sublink:hover {
background: var(--sb-surface) !important;
border-color: rgba(255, 255, 255, 0.055);
transform: translateX(2px);
text-decoration: none !important;
}
.sb-sublink:hover i {
color: var(--sb-accent-strong) !important;
opacity: 0.9 !important;
}
.sb-sublink:hover span {
color: var(--sb-accent-strong) !important;
opacity: 0.9 !important;
}
.sb-sublink:hover .sb-arrow {
color: var(--sb-accent-strong) !important;
opacity: 0.7 !important;
}
.sb-sublink.sb-link--active {
background: var(--sb-accent-soft) !important;
border-color: var(--sb-border);
}
.sb-sublink.sb-link--active i {
color: var(--sb-accent-strong) !important;
opacity: 1 !important;
}
.sb-sublink.sb-link--active span {
color: var(--sb-accent-strong) !important;
opacity: 1 !important;
}
.sb-sublink--deep {
padding-left: 14px;
}
.sb-submenu--deeper {
padding-left: 12px;
}
.sb-sublink--deeper {
padding-left: 22px;
}
.sb-footer {
padding: 18px;
border-top: 1px solid var(--sb-border);
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
justify-content: center;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.11));
position: relative;
z-index: 1;
}
.sb-footer i {
font-size: 12px;
color: var(--sb-accent-strong) !important;
opacity: 0.8 !important;
}
.sb-brand {
font-size: 12px;
font-weight: 700;
color: var(--primary--sidebar--color);
opacity: 0.82;
letter-spacing: 0.05em;
}
.sb-product {
font-size: 12px;
font-weight: 400;
color: var(--primary--sidebar--color);
opacity: 0.62;
letter-spacing: 0.05em;
}
.canvas-nav-main {
display: none;
position: absolute;
top: 21px;
left: 20px;
z-index: 1001;
}
.canvas-nav-main > i {
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.canvas-nav-main > i:hover {
transform: translateY(-1px);
border-color: var(--secondary--color);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.canvas-nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 34%),
radial-gradient(circle at 12% 0%, var(--sb-accent-glow), transparent 30%),
var(--sidebar--background);
background-color: var(--sidebar--background);
display: block;
box-shadow: var(--sb-shadow), var(--cart--box--shadow) !important;
border-right: 1px solid var(--sb-border);
height: 100vh !important;
bottom: auto !important;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.canvas-nav::-webkit-scrollbar {
display: none;
}
.canvas-nav .fill-color {
fill: var(--primary--body--color);
opacity: var(--opacity--80);
}
@media only screen and (max-width: 890px) {
#image-container img {
width: 6.5rem !important;
margin-top: 0;
}
}
@media only screen and (max-width: 2000px) {
#searchInput li a {
font-size: 1rem;
}
.fa-angle-right {
font-size: 0.8rem;
}
.sidebar {
height: 100vh;
}
aside {
width: calc(18%);
height: 100vh;
}
}
@media only screen and (max-width: 1545px) {
#searchInput li a {
font-size: 1rem;
}
.fa-angle-right {
font-size: 0.8rem;
}
.sidebar {
height: 100vh;
}
aside {
width: calc(18%);
height: 100vh;
}
}
@media only screen and (max-width: 1030px) {
#searchInput li a {
font-size: 1rem;
}
.fa-angle-right {
font-size: 0.8rem;
}
}
@media only screen and (max-width: 992px) {
.canvas-nav-main {
display: block;
}
aside {
visibility: hidden;
display: none !important;
}
}
@media only screen and (max-width: 972px) {
#searchInput li a {
font-size: 1rem;
padding-top: 8px;
padding-bottom: 8px;
}
.fa-angle-right {
font-size: 1rem;
}
.sidebar {
height: 100vh;
}
aside {
width: calc(30%);
height: 100vh;
}
}
@media only screen and (max-width: 890px) {
#searchInput li a {
font-size: 1rem;
padding-top: 8px;
padding-bottom: 8px;
}
.fa-angle-right {
font-size: 1rem;
}
#image-container img {
width: 6.5rem !important;
margin-top: 0;
}
.sidebar {
height: 100vh;
}
aside {
width: calc(30%);
height: 100vh;
}
}
@media only screen and (max-width: 811px) {
.fa-angle-right {
font-size: 0.7rem;
}
#searchInput li a {
font-size: 1rem;
padding-top: 8px;
padding-bottom: 8px;
}
#image-container img {
width: 6.5rem !important;
}
.sidebar {
height: 100vh;
}
aside {
width: calc(35%);
height: 100vh;
}
}
@media only screen and (max-width: 697px) {
#image-container img {
width: 6rem !important;
height: 100%;
}
aside {
width: calc(40%);
height: 100vh;
}
.sidebar {
height: 100vh;
}
#searchInput li a {
font-size: 1rem;
padding-top: 8px;
padding-bottom: 8px;
}
}
@media only screen and (max-width: 610px) {
.fa-angle-right {
font-size: 10px;
}
#image-container img {
width: 8rem !important;
height: auto;
}
.toggle a svg {
width: 20px;
}
.sidebar {
height: 100vh;
}
aside {
width: calc(65%);
height: 100vh;
}
#searchInput li a {
padding-top: 10px;
padding-bottom: 10px;
}
}
@media only screen and (max-width: 550px) and (min-width: 520px) {
#searchInput li a {
padding-top: 10px;
padding-bottom: 10px;
font-size: 15px;
}
}
.sb-dashboard-link {
display: flex !important;
align-items: center;
position: relative;
width: 100%;
}
.sb-dashboard-link > span:not(.sb-dashboard-actions) {
flex: 1;
min-width: 0;
text-align: left;
}
.sb-dashboard-actions {
display: none;
align-items: center;
gap: 6px;
margin-left: auto;
padding-left: 8px;
flex-shrink: 0;
}
.sb-dashboard-link:hover .sb-dashboard-actions {
display: contents;
}
.sb-dashboard-action-icon {
font-size: 11px;
cursor: pointer;
padding: 3px;
opacity: 0.6;
transition: opacity 0.15s ease, color 0.15s ease;
}
.sb-dashboard-action-icon:hover {
opacity: 1;
}
.sb-dashboard-action-save {
color: #28a745;
}
.sb-dashboard-action-save:hover {
color: #1e7e34;
}
.sb-dashboard-action-delete {
color: #dc3545;
}
.sb-dashboard-action-delete:hover {
color: #bd2130;
}
.sb-dashboard-add {
opacity: 0.6;
transition: opacity 0.15s ease;
}
.sb-dashboard-add:hover {
opacity: 1;
}
.sb-dashboard-edit-form {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px 4px 28px;
}
.sb-dashboard-input {
background: var(--input--background, #1a1a2e);
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 40%, transparent);
border-radius: 4px;
color: var(--primary--body--color, #ccc);
font-size: 12px;
padding: 3px 8px;
height: 26px;
width: 100%;
outline: none;
}
.sb-dashboard-input:focus {
border-color: var(--secondary--color, #4a90d9);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color, #4a90d9) 20%, transparent);
}
.sb-dashboard-input::placeholder {
color: color-mix(in srgb, var(--primary--body--color, #ccc) 40%, transparent);
}
.sb-slide-panel {
position: fixed;
top: 0;
right: 0;
left: auto;
min-width: 600px;
max-width: 600px;
height: 100vh;
background-color: var(--body--background, #0f0f23);
border: 1px solid color-mix(in srgb, var(--primary--body--color, #ccc) 15%, transparent);
border-radius: 10px 0 0 10px;
box-shadow: -6px 0 32px rgba(0, 0, 0, 0.40);
z-index: 1045;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
opacity: 0;
pointer-events: none;
}
.sb-slide-panel--open {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.sb-slide-connector {
position: fixed;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateX(-24px);
transform-origin: left center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0s linear 0.3s;
}
.sb-slide-connector--open {
opacity: 0.75;
visibility: visible;
transform: translateX(0);
transition-delay: 0s;
}
.sb-slide-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color, #ccc) 10%, transparent);
}
.sb-slide-panel__title {
color: var(--primary--body--color, #ccc);
font-size: 13px;
font-weight: 600;
margin: 0;
}
.sb-slide-panel__close {
color: var(--primary--body--color, #ccc);
font-size: 14px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.15s ease;
padding: 2px;
}
.sb-slide-panel__close:hover {
opacity: 1;
}
.sb-slide-panel__body {
padding: 14px 16px;
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--sb-accent) 72%, white 8%) color-mix(in srgb, var(--sb-track) 82%, transparent);
}
.sb-slide-panel__body::-webkit-scrollbar {
width: 6px;
}
.sb-slide-panel__body::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--sb-track) 82%, transparent);
border-radius: 999px;
}
.sb-slide-panel__body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, color-mix(in srgb, var(--sb-accent-strong) 72%, white 8%), color-mix(in srgb, var(--sb-accent) 78%, black 8%));
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--sb-track) 40%, transparent);
}
.sb-slide-panel__body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, color-mix(in srgb, var(--sb-accent-strong) 84%, white 10%), color-mix(in srgb, var(--sb-accent) 88%, black 6%));
}
.sb-slide-panel__field {
margin-bottom: 12px;
}
.sb-slide-panel__label {
display: block;
color: var(--primary--body--color, #ccc);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
opacity: 0.7;
}
.sb-slide-panel__input {
width: 100%;
background: var(--input--background, #1a1a2e);
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 30%, transparent);
border-radius: 6px;
color: var(--primary--body--color, #ccc);
font-size: 12px;
padding: 8px 12px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sb-slide-panel__input:focus {
border-color: var(--secondary--color, #4a90d9);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color, #4a90d9) 15%, transparent);
}
.sb-slide-panel__input::placeholder {
color: color-mix(in srgb, var(--primary--body--color, #ccc) 35%, transparent);
}
.sb-slide-panel__footer {
padding: 10px 16px 14px;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color, #ccc) 10%, transparent);
display: flex;
gap: 8px;
}
.sb-slide-panel__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
border: none;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.sb-slide-panel__btn:active {
transform: scale(0.97);
}
.sb-slide-panel__btn--save {
background-color: var(--secondary--color, #4a90d9);
color: #fff;
}
.sb-slide-panel__btn--save:hover {
background-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 85%, #000);
}
.sb-slide-panel__btn--cancel {
background-color: color-mix(in srgb, var(--primary--body--color, #ccc) 12%, transparent);
color: var(--primary--body--color, #ccc);
}
.sb-slide-panel__btn--cancel:hover {
background-color: color-mix(in srgb, var(--primary--body--color, #ccc) 20%, transparent);
}
.sb-slide-panel__overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.45);
z-index: 1039;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
animation: sbOverlayFadeIn 0.3s ease;
}
.sb-slide-panel__divider {
height: 1px;
background: color-mix(in srgb, var(--primary--body--color, #ccc) 10%, transparent);
margin: 6px 0 14px;
}
.sb-slide-panel__search-wrap {
position: relative;
}
.sb-slide-panel__search-ico {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
color: color-mix(in srgb, var(--primary--body--color, #ccc) 40%, transparent);
pointer-events: none;
}
.sb-slide-panel__input--search {
padding-left: 30px !important;
}
.sb-slide-panel__items-section {
margin-bottom: 14px;
}
.sb-slide-panel__section-label {
display: block;
color: var(--primary--body--color, #ccc);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
opacity: 0.6;
}
.sb-slide-panel__items-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 180px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--sb-accent) 76%, white 8%) color-mix(in srgb, var(--sb-track) 84%, transparent);
}
.sb-slide-panel__items-list::-webkit-scrollbar {
width: 6px;
}
.sb-slide-panel__items-list::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--sb-track) 84%, transparent);
border-radius: 999px;
}
.sb-slide-panel__items-list::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, color-mix(in srgb, var(--sb-accent-strong) 74%, white 8%), color-mix(in srgb, var(--sb-accent) 80%, black 6%));
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--sb-track) 42%, transparent);
}
.sb-slide-panel__items-list::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, color-mix(in srgb, var(--sb-accent-strong) 86%, white 10%), color-mix(in srgb, var(--sb-accent) 90%, black 4%));
}
.sb-slide-panel__item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s ease;
border: 1px solid transparent;
}
.sb-slide-panel__item:hover {
background-color: color-mix(in srgb, var(--primary--body--color, #ccc) 8%, transparent);
}
.sb-slide-panel__item--selected {
background-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 12%, transparent);
border-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 30%, transparent);
}
.sb-slide-panel__item--selected:hover {
background-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 18%, transparent);
}
.sb-slide-panel__item-check {
font-size: 14px;
color: color-mix(in srgb, var(--primary--body--color, #ccc) 30%, transparent);
width: 16px;
flex-shrink: 0;
}
.sb-slide-panel__item--selected .sb-slide-panel__item-check {
color: var(--secondary--color, #4a90d9);
}
.sb-slide-panel__item-img {
width: 22px;
height: 22px;
object-fit: contain;
flex-shrink: 0;
}
.sb-slide-panel__item-name {
font-size: 12px;
color: var(--primary--body--color, #ccc);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-slide-panel__item-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.sb-slide-panel__item-device {
font-size: 10px;
color: color-mix(in srgb, var(--primary--body--color, #ccc) 45%, transparent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-slide-panel__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.sb-slide-panel__device-select {
position: relative;
margin: 6px 6px 10px 24px;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 24%, transparent);
border-left: 3px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 72%, transparent);
border-radius: 14px;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color, #4a90d9) 10%, transparent), color-mix(in srgb, var(--body--background, #0f0f23) 94%, transparent));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.12);
animation: sbDeviceSlideDown 0.2s ease;
}
.sb-slide-panel__device-select::before {
content: '';
position: absolute;
left: -13px;
top: 20px;
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color, #4a90d9) 92%, white 8%), var(--secondary--color, #4a90d9));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--secondary--color, #4a90d9) 14%, transparent);
}
.sb-slide-panel__device-select::after {
content: '';
position: absolute;
left: -2px;
top: 24px;
width: 14px;
height: 1px;
background: color-mix(in srgb, var(--secondary--color, #4a90d9) 40%, transparent);
}
.sb-slide-panel__device-select-inner {
display: flex;
align-items: center;
position: relative;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 18%, transparent);
border-radius: 12px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background, #1a1a2e) 92%, white 8%), color-mix(in srgb, var(--body--background, #0f0f23) 94%, black 6%));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 22px rgba(0, 0, 0, 0.14);
}
.sb-slide-panel__device-ico {
font-size: 12px;
color: color-mix(in srgb, var(--secondary--color, #4a90d9) 60%, transparent);
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: color-mix(in srgb, var(--secondary--color, #4a90d9) 12%, transparent);
}
.sb-slide-panel__device-dropdown {
width: 100%;
background: transparent;
border: 0;
color: var(--primary--body--color, #ccc);
font-size: 11.5px;
font-weight: 500;
padding: 0 28px 0 36px;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: color 0.15s ease;
background-image: linear-gradient(45deg, transparent 50%, var(--secondary--color, #4a90d9) 50%), linear-gradient(135deg, var(--secondary--color, #4a90d9) 50%, transparent 50%);
background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.sb-slide-panel__device-dropdown option {
background: var(--body--background, #0f0f23);
color: var(--primary--body--color, #ccc);
}
.sb-slide-panel__device-loading {
font-size: 12px;
color: var(--secondary--color, #4a90d9);
position: absolute;
right: 12px;
}
.sb-slide-panel__item-options {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(2, auto);
align-items: stretch;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 14%, transparent);
}
.sb-slide-panel__mini-select {
min-height: 36px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background, #1a1a2e) 94%, white 6%), color-mix(in srgb, var(--body--background, #0f0f23) 96%, black 4%));
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 26%, transparent);
border-radius: 10px;
color: var(--primary--body--color, #ccc);
font-size: 10.5px;
font-weight: 600;
padding: 0 32px 0 12px;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--secondary--color, #4a90d9) 50%), linear-gradient(135deg, var(--secondary--color, #4a90d9) 50%, transparent 50%);
background-position: calc(100% - 14px) calc(50% - 3px), calc(100% - 8px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.sb-slide-panel__mini-select option {
background: var(--body--background, #0f0f23);
color: var(--primary--body--color, #ccc);
}
.sb-slide-panel__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color, #ccc) 10%, transparent);
background: color-mix(in srgb, var(--input--background, #1a1a2e) 82%, transparent);
font-size: 10.5px;
font-weight: 600;
color: var(--primary--body--color, #ccc);
cursor: pointer;
opacity: 0.88;
user-select: none;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.sb-slide-panel__toggle:hover {
opacity: 1;
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 30%, transparent);
background: color-mix(in srgb, var(--secondary--color, #4a90d9) 10%, transparent);
}
.sb-slide-panel__toggle input[type="checkbox"] {
width: 16px;
height: 16px;
appearance: none;
-webkit-appearance: none;
border: 1px solid color-mix(in srgb, var(--secondary--color, #4a90d9) 38%, transparent);
border-radius: 5px;
background: color-mix(in srgb, var(--body--background, #0f0f23) 85%, transparent);
cursor: pointer;
margin: 0;
position: relative;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sb-slide-panel__toggle input[type="checkbox"]::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
opacity: 0;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.sb-slide-panel__toggle input[type="checkbox"]:checked {
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color, #4a90d9) 90%, white 10%), var(--secondary--color, #4a90d9));
border-color: var(--secondary--color, #4a90d9);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color, #4a90d9) 16%, transparent);
}
.sb-slide-panel__toggle input[type="checkbox"]:checked::after {
transform: rotate(45deg) scale(1);
opacity: 1;
}
.sb-slide-panel__toggle:has(input[type="checkbox"]:checked) {
border-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 42%, transparent);
background: color-mix(in srgb, var(--secondary--color, #4a90d9) 14%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@media only screen and (max-width: 640px) {
.sb-slide-panel__device-select {
margin-left: 12px;
}
.sb-slide-panel__item-options {
grid-template-columns: 1fr;
}
.sb-slide-panel__toggle {
justify-content: flex-start;
}
}
.sb-slide-panel__section-count {
font-weight: 400;
opacity: 0.5;
font-size: 10px;
}
.sb-slide-panel__show-more {
display: block;
width: 100%;
background: none;
border: 1px dashed color-mix(in srgb, var(--primary--body--color, #ccc) 20%, transparent);
border-radius: 5px;
color: var(--primary--body--color, #4a90d9);
font-size: 11px;
padding: 6px;
margin-top: 6px;
cursor: pointer;
text-align: center;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sb-slide-panel__show-more:hover {
background-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 8%, transparent);
border-color: color-mix(in srgb, var(--secondary--color, #4a90d9) 40%, transparent);
}
}
/* ===== layouts/admin-layouts/admin-theme/admin-theme.component.css (global) ===== */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.lightBlue-theme .close_btn_theme {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .close_btn_theme, .dark-theme .close_btn_theme {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
/* ===== layouts/admin-layouts/admin-theme/admin-theme.component.css (scoped) ===== */
app-admin-theme {
#settings {
z-index: 999;
position: fixed;
top: 45%;
right: -70px;
transform: rotate(-90deg);
cursor: pointer;
background-color: var(--secondary--color) !important;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
opacity: var(--opacity--80);
width: 125px;
transition: right 0.4s ease;
}
#settings:hover {
right: -45px;
}
#settings a {
background-color: var(--secondary--color);
}
#settings a:hover {
text-decoration: none;
}
.customize, .settings i {
color: var(--day--remain--color) !important;
}
.setting-toggle {
text-decoration: none;
}
.fa-gear {
animation: spin 2s infinite linear;
}
#admin-theme-modal {
z-index: 10000;
}
.modal-content {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.modal-header {
border-bottom: var(--cart--border);
padding: .9rem 1.1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal.right .modal-dialog {
position: fixed;
margin: auto;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.right .modal-body {
padding: 12px 12px 80px;
}
.modal.right.fade .modal-dialog {
right: 0;
width: 50%;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog {
right: 0;
}
.modal-theme {
width: 420px !important;
}
.theme-modal-header {
display: flex;
align-items: center;
gap: 12px;
}
.theme-modal-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, var(--secondary--color), var(--secondary--color));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.theme-modal-icon i {
color: var(--day--remain--color);
font-size: 1rem;
}
.theme-modal-titles {
display: flex;
flex-direction: column;
gap: 1px;
}
.settings_word {
color: var(--primary--body--color) !important;
font-size: .95rem !important;
font-weight: 700 !important;
line-height: 1.3;
}
.information {
color: var(--primary--body--color);
opacity: var(--sidebar--opacity);
font-size: .72rem;
margin: 0;
}
.close_btn_theme {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.close_btn_theme:focus, .close_btn_theme:active {
outline: none !important;
box-shadow: none;
}
.overlay::-webkit-scrollbar {
width: 0px;
}
.reset_button {
font-weight: 600 !important;
border: var(--cart--border) !important;
color: var(--primary--body--color) !important;
background: transparent;
box-shadow: var(--cart--box--shadow);
padding: 9px !important;
font-size: .82rem !important;
border-radius: var(--cart--border--radius) !important;
transition: all 0.2s ease;
display: flex !important;
align-items: center;
justify-content: center;
}
.reset_button:hover {
opacity: 0.75;
transform: translateY(-1px);
}
.theme-section-card {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
overflow: hidden;
background-color: var(--body--background);
}
.section-heading {
display: flex;
align-items: center;
gap: 10px;
padding: .65rem .9rem;
border-bottom: var(--cart--border);
}
.section-icon-pill {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--secondary--color);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.section-icon-pill i {
color: var(--day--remain--color);
font-size: .78rem;
}
.section-title {
color: var(--primary--body--color);
font-weight: 600;
font-size: .82rem;
line-height: 1.3;
}
.section-subtitle {
color: var(--primary--body--color);
font-size: .7rem;
margin-top: 1px;
}
.mode-switcher-row {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: .9rem 1rem;
}
.mode-side {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--primary--body--color);
opacity: 0.3;
font-size: 1.05rem;
transition: all 0.3s ease;
}
.mode-side.mode-active {
opacity: 1;
color: var(--secondary--color);
}
.mode-toggle-wrap {
display: flex;
align-items: center;
}
.mode_input {
width: 0;
height: 0;
visibility: hidden;
}
.mode_label {
width: 80px !important;
height: 30px;
position: relative;
display: block;
background-color: #ebebeb;
border-radius: 200px;
box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4), inset 0px -5px 15px rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: .3s;
}
.mode_label:after {
content: "";
width: 30px;
height: 28px;
position: absolute;
top: 1px;
left: 0px;
background: linear-gradient(180deg, #ffcc89, #d8860b);
border-radius: 180px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transition: .3s;
}
.mode_input:checked + .mode_label {
background: #242424;
}
.mode_input:checked + .mode_label:after {
left: 80px;
transform: translateX(-100%);
background: linear-gradient(180deg, #777, #3a3a3a);
}
.mode_label:active:after {
width: 40px;
}
.mode_label svg {
position: absolute;
width: 20px;
z-index: 100;
}
.mode_label svg#sun {
left: 5px;
top: 5px;
fill: #fff;
transition: .3s;
}
.mode_label svg#moon {
left: 55px;
top: 5px;
fill: #7e7e7e;
transition: .3s;
}
.swatches-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: .9rem 1rem;
}
.swatch-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
cursor: pointer;
border: var(--cart--border);
border-radius: 10px;
padding: 10px 8px;
transition: all 0.22s ease;
position: relative;
background: var(--body--background);
}
.swatch-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.13);
}
.swatch-active {
border-color: var(--secondary--color) !important;
box-shadow: 0 0 0 3px rgba(0,0,0,0.07), 0 3px 10px rgba(0,0,0,0.1) !important;
}
.swatch-active .swatch-mini-preview {
box-shadow: 0 0 0 2px var(--secondary--color);
}
.swatch-check-badge {
display: none;
position: absolute;
top: 6px;
right: 6px;
width: 16px;
height: 16px;
background: var(--secondary--color);
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: .5rem;
color: var(--day--remain--color);
}
.swatch-active .swatch-check-badge {
display: flex;
}
.swatch-mini-preview {
width: 100%;
height: 64px;
border-radius: 7px;
overflow: hidden;
display: flex;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: box-shadow 0.2s ease;
}
.sp-sb {
width: 27%;
height: 100%;
flex-shrink: 0;
}
.sp-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sp-tb {
height: 24%;
flex-shrink: 0;
}
.sp-rows {
flex: 1;
padding: 4px 5px;
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
}
.sp-row {
height: 5px;
border-radius: 2px;
width: 100%;
}
.sp-row.sp-short { width: 72%; }
.sp-row.sp-shorter { width: 50%; }
.sp-lightblue { background: #eff6ff; }
.sp-lightblue .sp-sb { background: #1e40af; }
.sp-lightblue .sp-tb { background: #dbeafe; }
.sp-lightblue .sp-row { background: #93c5fd; }
.sp-darkblue { background: #0d1b2e; }
.sp-darkblue .sp-sb { background: #1e3a8a; }
.sp-darkblue .sp-tb { background: #1e293b; }
.sp-darkblue .sp-row { background: #334155; }
.sp-default { background: #f8fafc; }
.sp-default .sp-sb { background: #475569; }
.sp-default .sp-tb { background: #e2e8f0; }
.sp-default .sp-row { background: #cbd5e1; }
.sp-dark { background: #1a2332; }
.sp-dark .sp-sb { background: #0f172a; }
.sp-dark .sp-tb { background: #2d3748; }
.sp-dark .sp-row { background: #4a5568; }
.swatch-card-label {
font-size: .72rem;
font-weight: 600;
color: var(--primary--body--color);
text-align: center;
line-height: 1.2;
}
.layout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: .9rem 1rem;
}
.layout-option {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
cursor: pointer;
border: 2px solid transparent;
border-radius: 10px;
padding: 10px 8px;
transition: all 0.2s ease;
border: var(--cart--border);
background: var(--body--background);
}
.layout-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.layout-option:hover {
border-color: var(--secondary--color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.layout-selected {
border-color: var(--secondary--color) !important;
box-shadow: 0 0 0 3px rgba(0,0,0,0.08) !important;
}
.layout-img {
width: 100%;
border-radius: 6px;
object-fit: cover;
}
.layout-label {
font-size: .72rem;
font-weight: 600;
color: var(--primary--body--color);
}
.layout-check-badge {
display: none;
position: absolute;
top: 6px;
right: 6px;
width: 17px;
height: 17px;
background: var(--secondary--color);
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: .55rem;
color: var(--day--remain--color);
}
.layout-selected .layout-check-badge {
display: flex;
}
.save-area {
display: flex;
justify-content: center;
padding: 1.4rem 0 .5rem;
}
.save-btn {
padding: .6rem 2.2rem;
border-radius: 50px;
border: none;
background: var(--secondary--color);
color: var(--day--remain--color);
font-weight: 600;
font-size: .88rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.save-btn:hover {
transform: translateY(-2px);
box-shadow: 0 7px 20px rgba(0,0,0,0.22);
opacity: .9;
}
@media screen and (max-width: 450px) {
.overlay a { font-size: 20px; }
}
@media screen and (max-width: 350px) {
.overlay { width: 330px !important; }
}
}
/* ===== layouts/settings-layouts/setting-sidebar/setting-sidebar.component.css (global) ===== */
.lightBlue-theme #navbar2 {
background-color: var(--body--background) !important;
background-image: none;
}
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform: translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(1rem);
opacity: 0;
}
}
@-webkit-keyframes slideIn {
0% {
-webkit-transform: transform;
-webkit-opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-webkit-opacity: 1;
}
0% {
-webkit-transform: translateY(1rem);
-webkit-opacity: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1070px) {
.show-sidebar .mobile_span {
font-size: 14px !important;
}
.show-sidebar .navbar-settings-icon {
font-size: 14px;
}
}
/* ===== layouts/settings-layouts/setting-sidebar/setting-sidebar.component.css (scoped) ===== */
app-setting-sidebar {
#navbar2 {
background: transparent !important;
padding-bottom: 10px !important;
padding-top: 10px !important;
padding-right: 0px !important;
padding-left: 12px !important;
box-shadow: none !important;
border: none !important;
overflow: visible !important;
}
.navbar_container {
box-shadow: none !important;
}
.mobile_ul_div {
display: flex;
align-items: center;
}
.mobile_ul_div::-webkit-scrollbar {
display: none;
}
.mobile_ul_div .navbar-nav {
flex-direction: row !important;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
}
.mobile_ul_div .main_li {
list-style: none;
margin-bottom: 0 !important;
}
.nav-link {
color: var(--primary--body--color) !important;
opacity: 1;
padding: 0 12px;
height: 36px;
display: inline-flex !important;
align-items: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
font-size: 13px;
white-space: nowrap;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.nav-link i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.nav-link span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
.nav-item a:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
border-radius: 8px;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
color: var(--primary--body--color) !important;
}
.nav-item a:hover .navbar_icon {
color: var(--secondary--color) !important;
opacity: 1;
}
.dropdown-item {
opacity: var(--opacity--80);
color: var(--primary--body--color) !important;
margin-bottom: 0;
font-size: 13px;
padding: 7px 14px;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.15s ease, opacity 0.15s ease;
border: none !important;
background: transparent !important;
transform: none !important;
box-shadow: none !important;
}
.dropdown-item:focus {
background-color: transparent !important;
}
.dropdown-item:hover {
background-color: color-mix(in srgb, var(--secondary--color) 12%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
opacity: 1;
transform: none !important;
border-color: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.navbar_icon {
transition: none !important;
}
.dropdown-menu {
background-color: var(--body--background) !important;
border-radius: 8px !important;
padding: 4px 0 !important;
margin-left: 0px !important;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 10%, transparent) !important;
overflow: hidden;
min-width: 180px;
}
.navbar-toggler {
border: none !important;
display: none;
}
.navbar_full {
display: none;
}
.mobile-toggle-bar {
display: none;
}
.navbar-toggler:focus {
outline: none !important;
box-shadow: none !important;
}
.hamburger-toggle {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
z-index: 11;
}
.hamburger {
position: absolute;
transform: translate(-50%, -50%) rotate(0deg);
left: 50%;
top: 50%;
width: 50%;
height: 50%;
pointer-events: none;
}
#min_navbar_button_close {
font-size: 30px;
color: white;
display: none;
}
#min_navbar_button_open {
font-size: 30px;
color: white;
display: block;
}
.hamburger.active span {
position: absolute;
margin: 0;
}
.hamburger.active span:first-child {
top: 45%;
transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
left: 50%;
width: 0px;
}
.hamburger.active span:last-child {
top: 45%;
transform: rotate(-45deg);
}
.right_arrow::after {
transform: rotate(360deg);
}
.nav_ul {
list-style: none;
flex-direction: row;
}
.navbar-toggler-icon {
display: none;
}
.mobile_languages {
display: none;
}
.offcanvas-start {
background-color: transparent;
}
@media (max-width: 991px) {
.offcanvas-start {
background-color: var(--body--background) !important;
}
}
.offcanvas-body {
background-color: transparent;
max-height: 60px;
}
.navbar-image {
width: 80px;
height: 55px;
}
.logo {
display: none;
}
.bottom {
margin-left: auto;
}
.slogan {
display: none;
}
.tooltip-settings-navbar-text {
visibility: hidden;
width: 40px;
background-color: color-mix(in srgb, var(--input--background) 95%, black 5%);
color: var(--primary--body--color);
text-align: center;
position: absolute;
padding: 5px 0px;
left: 8%;
margin-left: -60px;
font-size: 12px;
border-radius: var(--cart--border--radius);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
}
.tooltip-settings-navbar:hover .tooltip-settings-navbar-text {
visibility: visible;
}
@media (max-width: 991px) {
.navbar-settings-icon {
display: none;
}
.mobile {
display: block !important;
}
}
@media (max-width:991px) {
.mobile_ul_div .navbar-nav {
flex-direction: column !important;
flex-wrap: nowrap;
gap: 4px;
}
.mobile_ul_div {
overflow-x: visible;
}
.mobile_ul_div .main_li {
width: 100%;
}
.nav-link {
width: 100%;
border-radius: 6px;
height: auto;
padding: 8px 12px;
font-size: 1.1rem;
}
.main_drop::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0px;
background-color: var(--sidebar--hover--color);
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s visibility ease, .4s width ease !important;
}
.main_drop:hover::before {
width: 4px;
opacity: 1;
visibility: visible;
}
.xx::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0px;
background-color: var(--sidebar--hover--color);
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s visibility ease, .4s width ease !important;
}
.xx:hover::before {
width: 4px;
opacity: 1;
visibility: visible;
}
.second_drop::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0px;
background-color: var(--sidebar--hover--color);
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s visibility ease, .4s width ease !important;
}
.second_drop:hover::before {
width: 4px;
opacity: 1;
visibility: visible;
}
.dropdown-menu {
background: transparent!important;
}
.main_drop::after {
position: absolute;
right:10px;
top: 15px;
font-size: 20px;
}
.second_drop::after {
position: absolute;
right:10px;
top: 10px;
font-size: 20px;
}
.navbar-toggler-icon {
display: block;
}
.slogan {
display: block;
color: var(--primary--sidebar--color);
margin-bottom: 3rem;
opacity: var(--opacity--80);
}
.offcanvas-body {
margin-left: 0rem;
max-height: 100vh;
}
.mobile_languages {
display: block;
}
.logo {
display: block;
}
.nav_ul {
flex-direction: column;
}
.navbar-image {
width: 125px;
height: 100px;
}
.offcanvas-body {
padding: 0px;
padding-top: 0px;
}
.nav-link {
font-size: 1.1rem;
}
.main_li {
margin-bottom: .6rem;
}
.right_arrow::after {
transform: rotate(0deg);
}
.sub_span {
margin-left:3rem;
}
.sub_li a {
font-size: 15px;
}
.second_span {
margin-left: 1.8rem;
}
.second_li a {
font-size: 1rem;
}
.main_drop::after {
transform: rotate(270deg);
}
.main_drop[aria-expanded=true]::after {
transform: rotate(0deg);
}
.second_drop::after {
transform: rotate(0deg);
}
.second_drop[aria-expanded=true]::after {
transform: rotate(90deg);
}
.navbar-toggler {
display: block;
}
.offcanvas-body::-webkit-scrollbar {
width: 0px;
}
.offcanvas-body::-webkit-scrollbar-thumb {
background-color: var(--primary--body--color) !important;
}
.offcanvas-body {
box-shadow: var(--cart--box--shadow);
background-color: var(--body--background) !important;
background-image: var(--settings--navbar--background);
padding: 16px 12px !important;
padding-top: 12px !important;
}
.mobile_ul_div {
margin-top: 8px;
}
.navbar-settings-icon {
display: flex !important;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--secondary--color) 18%, transparent);
margin-bottom: 8px;
margin-left: 0 !important;
margin-right: 0 !important;
font-size: 15px;
font-weight: 700;
opacity: 1 !important;
color: var(--primary--body--color) !important;
}
.nav-link {
background: linear-gradient(135deg,
color-mix(in srgb, var(--secondary--color) 8%, var(--input--background)),
var(--input--background)) !important;
border: 1px solid color-mix(in srgb, var(--secondary--color) 28%, transparent) !important;
border-radius: 8px !important;
padding: 10px 14px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--primary--body--color) !important;
transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
}
.nav-link:hover {
border-color: color-mix(in srgb, var(--secondary--color) 60%, transparent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
transform: none !important;
}
.nav-link i {
opacity: 1 !important;
color: var(--secondary--color) !important;
width: 18px !important;
text-align: center !important;
font-size: 14px !important;
}
.dropdown-menu {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-left: 2px solid color-mix(in srgb, var(--secondary--color) 40%, transparent) !important;
border-radius: 0 !important;
margin-left: 20px !important;
margin-top: 2px !important;
padding: 4px 0 !important;
}
.dropdown-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 14px !important;
border-radius: 6px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--primary--body--color) !important;
opacity: 1 !important;
background: transparent !important;
transition: background 0.15s ease !important;
border: none !important;
box-shadow: none !important;
transform: none !important;
}
.dropdown-item i {
color: var(--secondary--color) !important;
opacity: var(--opacity--80) !important;
font-size: 13px !important;
width: 16px !important;
text-align: center !important;
flex-shrink: 0 !important;
}
.dropdown-item:hover {
background: color-mix(in srgb, var(--secondary--color) 10%, var(--body--background)) !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
border-radius: 6px !important;
}
.second_span {
margin-left: 0 !important;
}
.mobile_span {
margin-left: 1.5rem;
}
.navbar_full {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
cursor: pointer;
width: fit-content;
transition: border-color 0.18s, box-shadow 0.18s;
}
.navbar_full:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.navbar_full .navbar-toggler {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
font-size: 14px;
margin-top: 0 !important;
}
.navbar_full .tooltip-settings-navbar-text {
visibility: visible !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
background: none !important;
border: none !important;
font-size: 13px;
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 600;
}
.bottom {
position: absolute;
left: 75px;
margin-bottom: .5rem;
margin-top: 3rem;
}
.hover-effect {
position: relative;
text-decoration: none;
color: #333;
transition: color 0.3s;
}
.hover-effect::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: var(--primary--sidebar--color);
bottom: 0;
left: -100%;
transition: left 0.6s;
}
.hover-effect:hover {
color: var(--primary--sidebar--color);
}
.hover-effect:hover::before {
left: 0;
}
.settings-offcanvas {
width: min(320px, 92vw) !important;
border-right: 1px solid color-mix(in srgb, var(--secondary--color) 20%, transparent);
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 9%, transparent), transparent 34%),
var(--body--background) !important;
overflow: hidden;
}
.settings-offcanvas-body {
display: flex;
flex-direction: column;
height: 100dvh;
min-height: 100dvh;
max-height: none !important;
box-sizing: border-box;
overflow: hidden !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
padding: 10px 12px 14px !important;
}
.settings-offcanvas-body::-webkit-scrollbar {
display: none !important;
}
.settings-mobile-title {
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0;
padding: 20px 10px 18px !important;
font-size: 30px;
font-weight: 700;
line-height: 1.2;
}
.mobile_ul_div {
flex: 1 1 auto;
display: flex;
align-items: flex-start;
overflow: visible !important;
margin-top: 0 !important;
}
.mobile_ul_div .navbar-nav {
width: 100%;
gap: 8px;
}
.mobile_ul_div .main_li:last-child {
margin-bottom: 0;
}
.mobile_span {
margin-left: 0;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.settings-mobile-slogan {
margin-top: auto;
margin-bottom: 0;
padding: 22px 12px 8px !important;
font-size: 13px;
line-height: 1.45;
}
}
@media (min-width: 200px) {
.animate {
animation-duration: .8s;
-webkit-animation-duration: .8s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
}
.slideIn {
-webkit-animation-name: slideIn;
animation-name: slideIn;
}
}
/* ===== admin-components/login-activity/login-activity.component.css (global) ===== */
app-login-activity .ag-cell.login-activity-type-cell {
display: flex;
align-items: center;
justify-content: center;
}
app-login-activity .ag-cell .login-activity-table-icon {
width: 28px;
height: 28px;
margin: 0;
border-radius: 8px;
box-shadow: var(--cart--box--shadow);
}
app-login-activity .ag-cell .login-activity-table-icon .mat-icon {
width: 18px;
height: 18px;
font-size: 18px;
line-height: 23px;
}
app-login-activity .ag-cell .login-activity-table-icon--success {
background: rgba(63, 185, 80, 0.12);
color: #56d364;
padding: 4px;
}
app-login-activity .ag-cell .login-activity-table-icon--danger {
background: rgba(248, 81, 73, 0.12);
color: #f85149;
padding: 4px;
}
app-login-activity .ag-cell .login-activity-table-icon--warning {
background: rgba(210, 153, 34, 0.14);
color: #e3b341;
padding: 4px;
}
.dark-theme .login-activity-legend-item, .darkBlue-theme .login-activity-legend-item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.darkBlue-theme .login-activity-legend-item {
border: none;
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
var(--cart--box--shadow);
}
.lightBlue-theme .login-activity-legend-item {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
background: linear-gradient(180deg, #ffffff, #f0f6f8);
}
/* ===== admin-components/login-activity/login-activity.component.css (scoped) ===== */
app-login-activity {
.login-activity-shell {
padding-left: 20px;
padding-right: 20px;
}
.login-activity-legend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.login-activity-legend-item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
white-space: nowrap;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.login-activity-legend-item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.login-activity-icon-wrap {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
flex-shrink: 0;
}
.login-activity-icon-wrap .mat-icon {
width: 18px;
height: 18px;
font-size: 18px;
line-height: 18px;
}
.login-activity-label {
color: var(--primary--body--color);
font-size: 13px;
font-weight: 650;
opacity: var(--opacity--80);
}
.login-activity-legend-item--success {
border-color: rgba(63, 185, 80, 0.28);
}
.login-activity-legend-item--success .login-activity-icon-wrap {
background: rgba(63, 185, 80, 0.12);
color: #56d364;
}
.login-activity-legend-item--danger {
border-color: rgba(248, 81, 73, 0.28);
}
.login-activity-legend-item--danger .login-activity-icon-wrap {
background: rgba(248, 81, 73, 0.12);
color: #f85149;
}
.login-activity-legend-item--warning {
border-color: rgba(210, 153, 34, 0.28);
}
.login-activity-legend-item--warning .login-activity-icon-wrap {
background: rgba(210, 153, 34, 0.14);
color: #e3b341;
}
@media (max-width: 600px) {
.login-activity-legend {
align-items: stretch;
}
.login-activity-legend-item {
flex: 1 1 100%;
justify-content: flex-start;
}
}
}
/* ===== login/code/code.component.css (scoped) ===== */
app-code {
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
}
.recovery-code-input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
}
.recovery-code-input::placeholder {
color: var(--primary--body--color)
}
}
/* ===== login/ldap-login/ldap-login.component.css (global) ===== */
@keyframes indeterminateAnimation {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
}
100% {
transform: translateX(100%) scaleX(0.5);
}
}
@keyframes bounce {
0% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
@-webkit-keyframes bounce {
0% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
/* ===== login/ldap-login/ldap-login.component.css (scoped) ===== */
app-ldap-login {
#auth-description {
font-weight: 300;
color: #fff;
}
.form-group input {
background: rgba(255, 255, 255) !important;
height: 40px;
border-radius: 8px;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 15px;
transition: all .5s;
margin-bottom: 1.3rem;
color: black;
}
.auth-container .auth-header {
padding: 10px 30px;
}
.auth-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.auth-title {
text-align: center;
}
.loading {
cursor: auto;
opacity: 0.5;
pointer-events: none;
}
.auth-body {
padding: 30px;
}
.sign-btn {
background-color: #800000;
height: 50px;
border-radius: 0;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 16px;
transition: all .5s;
margin-bottom: 1.3rem;
color: white;
}
.sign-btn a {
color: #fff;
text-decoration: none;
}
.forgot-password-btn {
background-color: #000;
height: 50px;
border-radius: 0;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 16px;
transition: all .5s;
}
.forgot-password-btn a {
color: #fff;
text-decoration: none;
}
.auth-container .auth-header {
padding: 10px 30px;
}
.process-bar-container {
position: absolute;
top: 50%;
margin: auto;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 925px) {
.process-bar-container {
width:500px;
}
}
.progress-bar {
height: 4px;
background-color: rgba(5, 114, 206, 0.2);
width: 100%;
overflow: hidden;
}
.progress-bar-value {
width: 100%;
height: 100%;
background-color: white;
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 50%;
}
header {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid #34495E;
}
h1, h3 {
margin: 10px;
}
.servers {
display: block;
}
.servers div span:nth-child(2) {
margin-left: 30px;
line-height: 35px;
}
.server-up {
display: block;
height: 35px;
position: relative;
color: #2ECC71;
}
.server-slow {
display: block;
height: 35px;
position: relative;
color: #F1C40F;
}
.server-down {
display: block;
height: 35px;
position: relative;
color: #E74C3C;
}
.server-status {
left: 10px;
top: 50%;
margin-left: 0px;
margin-top: -5px;
position: absolute;
vertical-align: middle;
width: 10px;
height: 10px;
border-radius: 50%;
}
.server-status::before, .server-status::after {
left: 0;
top: 50%;
margin-left: -1px;
margin-top: -6px;
position: absolute;
vertical-align: middle;
width: 12px;
height: 12px;
border-radius: 50%;
}
.server-status[type="up"], .server-status[type="up"]::before, .server-status[type="up"]::after {
background: #2ECC71;
}
.server-status[type="down"], .server-status[type="down"]::before, .server-status[type="down"]::after {
background: #E74C3C;
}
.server-status[type="slow"], .server-status[type="slow"]::before, .server-status[type="slow"]::after {
background: #F1C40F;
}
.server-status::before {
content: "";
animation: bounce 1.5s infinite;
}
.server-status::after {
content: "";
animation: bounce 1.5s -0.4s infinite;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #040d21;
background-image: radial-gradient(circle,
#051937,
#001d2e,
#001c1e,
#081a12,
#14160f);
background-repeat: no-repeat;
background-attachment: absolute;
background-position: 50% 50%;
}
.label-header-auth-code {
color: white;
display: block;
margin-bottom: .6rem;
}
.auth-input {
border-radius: 5px;
border: 1px solid rgb(229 231 235 / 1);
}
#recovery-codes-text {
cursor: pointer;
color: #3d3df1 !important;
font-weight: 600;
}
.loading-button {
opacity: 0.7;
pointer-events: none;
}
.ldap-container {
padding: 10px;
color: white;
text-align: center;
cursor: pointer;
}
#auth-description {
font-weight: 300;
color: #fff;
}
.form-group input {
background: rgba(255, 255, 255) !important;
height: 40px;
border-radius: 8px;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 15px;
transition: all .5s;
margin-bottom: 1.3rem;
color: black;
}
.sign-btn {
background-color: #800000;
height: 50px;
border-radius: 0;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 16px;
transition: all .5s;
margin-bottom: 1.3rem;
color: white;
}
.auth-input {
border-radius: 5px;
border: 1px solid rgb(229 231 235 / 1);
}
#recovery-codes-text {
cursor: pointer;
color: #3d3df1 !important;
font-weight: 600;
}
}
/* ===== login/login.component.css (global) ===== */
@keyframes indeterminateAnimation {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
}
100% {
transform: translateX(100%) scaleX(0.5);
}
}
@keyframes bounce {
0% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
@-webkit-keyframes bounce {
0% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
/* ===== login/login.component.css (scoped) ===== */
app-login {
#auth-description {
font-weight: 300;
color: #fff;
}
.form-group input {
background: rgba(255, 255, 255) !important;
height: 40px;
border-radius: 8px;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 15px;
transition: all .5s;
margin-bottom: 1.3rem;
color: black;
}
.auth-container .auth-header {
padding: 10px 30px;
}
.auth-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.auth-title {
text-align: center;
}
.auth-body {
padding: 30px;
}
.sign-btn {
background-color: #800000;
height: 50px;
border-radius: 0;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 16px;
transition: all .5s;
margin-bottom: 1.3rem;
color: white;
}
.sign-btn a {
color: #fff;
text-decoration: none;
}
.forgot-password-btn {
background-color: #000;
height: 50px;
border-radius: 0;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 16px;
transition: all .5s;
}
.forgot-password-btn a {
color: #fff;
text-decoration: none;
}
.auth-container .auth-header {
padding: 10px 30px;
}
.process-bar-container {
position: absolute;
top: 50%;
margin: auto;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 925px) {
.process-bar-container {
width:500px;
}
}
.progress-bar {
height: 4px;
background-color: rgba(5, 114, 206, 0.2);
width: 100%;
overflow: hidden;
}
.progress-bar-value {
width: 100%;
height: 100%;
background-color: white;
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 50%;
}
.loading {
cursor: auto;
opacity: 0.5;
pointer-events: none;
}
header {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid #34495E;
}
h1, h3 {
margin: 10px;
}
.servers {
display: block;
}
.servers div span:nth-child(2) {
margin-left: 30px;
line-height: 35px;
}
.server-up {
display: block;
height: 35px;
position: relative;
color: #2ECC71;
}
.server-slow {
display: block;
height: 35px;
position: relative;
color: #F1C40F;
}
.server-down {
display: block;
height: 35px;
position: relative;
color: #E74C3C;
}
.server-status {
left: 10px;
top: 50%;
margin-left: 0px;
margin-top: -5px;
position: absolute;
vertical-align: middle;
width: 10px;
height: 10px;
border-radius: 50%;
}
.server-status::before, .server-status::after {
left: 0;
top: 50%;
margin-left: -1px;
margin-top: -6px;
position: absolute;
vertical-align: middle;
width: 12px;
height: 12px;
border-radius: 50%;
}
.server-status[type="up"], .server-status[type="up"]::before, .server-status[type="up"]::after {
background: #2ECC71;
}
.server-status[type="down"], .server-status[type="down"]::before, .server-status[type="down"]::after {
background: #E74C3C;
}
.server-status[type="slow"], .server-status[type="slow"]::before, .server-status[type="slow"]::after {
background: #F1C40F;
}
.server-status::before {
content: "";
animation: bounce 1.5s infinite;
}
.server-status::after {
content: "";
animation: bounce 1.5s -0.4s infinite;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #040d21;
background-image: radial-gradient(circle,
#051937,
#001d2e,
#001c1e,
#081a12,
#14160f);
background-repeat: no-repeat;
background-attachment: absolute;
background-position: 50% 50%;
}
.label-header-auth-code {
color: white;
display: block;
margin-bottom: .6rem;
}
.auth-input {
border-radius: 5px;
border: 1px solid rgb(229 231 235 / 1);
}
#recovery-codes-text {
cursor: pointer;
color: #3d3df1 !important;
font-weight: 600;
}
.ldap-container {
padding: 10px;
color: white;
text-align: center;
cursor: pointer;
}
.label-header {
color: #042e52;
font-size: 15px;
}
.gateway-input {
height: 40px !important;
border-radius: 8px !important;
box-shadow: none !important;
font-size: 15px !important;
transition: all .5s !important;
margin-bottom: 1.3rem !important;
color: black !important;
border: 1px solid rgb(218, 216, 216) !important;
}
.select-server {
height: 40px !important;
width: 380px;
border-radius: 8px !important;
box-shadow: none !important;
font-size: 15px !important;
transition: all .5s !important;
margin-bottom: 1.3rem !important;
color: black !important;
border: 1px solid rgb(218, 216, 216) !important;
text-align: left !important;
}
.server-name {
font-size: 15px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.device-brand-menu {
width: 380px;
}
.server-name:hover {
background-color: rgb(226, 224, 224) !important;
transition: .3s all;
}
.select-server::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: black;
font-size: 16px;
opacity: 0.7;
}
.dropdown-item.server-name {
display: flex;
align-items: center;
height: 30px;
}
#server:focus {
outline: none;
box-shadow: none !important;
}
#server:active {
outline: none;
box-shadow: none !important;
}
.input-item {
display: flex;
flex-direction: column;
justify-content: center;
}
.cancel_button_gateway {
background-color: #b44343 !important;
border: 1px solid #BDBDBD !important;
box-shadow: none !important;
border-radius: 0px !important;
height: 36px !important;
font-size: 13px !important;
color: white !important;
padding-right: 15px;
padding-left: 15px;
}
.confirm_button_gateway {
background-color: #042E52 !important;
border: 1px solid #BDBDBD !important;
box-shadow: none !important;
border-radius: 0px !important;
height: 36px !important;
padding: 5px 20px !important;
font-size: 13px !important;
color: #FFFFFF !important;
}
.server-name-span {
display: inline-block;
max-width: 315px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
}
/* ===== login/update-reverse-proxy/update-reverse-proxy.component.css (scoped) ===== */
app-update-reverse-proxy {
.gateway-input {
height: 40px !important;
border-radius: 8px !important;
box-shadow: none !important;
font-size: 15px !important;
transition: all .5s !important;
margin-bottom: 1.3rem !important;
color: black !important;
border: 1px solid rgb(218, 216, 216) !important;
}
.cancel_button_gateway {
background-color: #b44343 !important;
border: 1px solid #BDBDBD !important;
box-shadow: none !important;
border-radius: 0px !important;
height: 36px !important;
font-size: 13px !important;
color: white !important;
padding-right: 15px;
padding-left: 15px;
}
.confirm_button_gateway {
background-color: #042E52 !important;
border: 1px solid #BDBDBD !important;
box-shadow: none !important;
border-radius: 0px !important;
height: 36px !important;
padding: 5px 20px !important;
font-size: 13px !important;
color: #FFFFFF !important;
}
}
/* ===== admin-components/all-device-logs/all-device-logs-navbar/all-device-logs-navbar.component.css (global) ===== */
.lightBlue-theme .form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.lightBlue-theme .form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.dark-theme .form-check-input:checked {
background-color: var(--primary--body--color);
border-color: var(--primary--body--color);
}
.dark-theme .form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23222628' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.darkBlue-theme .form-check-input:checked {
background-color: var(--primary--body--color);
border-color: var(--primary--body--color);
}
.darkBlue-theme .form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23222628' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
@media only screen and (max-width: 1216px) {
.show-sidebar .all_logs_accordion_text {
font-size: 14px;
}
}
@media only screen and (max-width: 1131px) {
.show-sidebar .accordion_remove_column_all_logs .col-lg-3 {
width: 50%;
}
.show-sidebar .dropdown_filter_accordion_all_logs_accordion {
width: 600px !important;
}
}
@media only screen and (max-width: 956px) {
.show-sidebar .accordion_remove_column_all_logs .col-lg-3 {
width: 50% !important;
}
.show-sidebar .dropdown_filter_accordion_all_logs_accordion {
width: 400px !important;
}
}
@media only screen and (max-width: 1424px) {
.show-sidebar .dropdown_filter_accordion_all_logs_accordion {
width: 900px !important;
}
}
@media only screen and (max-width: 1248px) {
.show-sidebar .dropdown_filter_accordion_all_logs_accordion {
width: 700px !important;
}
}
@media only screen and (max-width: 1100px) {
.show-sidebar .dropdown_filter_accordion_all_logs_accordion {
width: 500px !important;
}
}
@media only screen and (max-width: 910px) {
.show-sidebar .dropdown_filter_accordion_all_logs_accordion {
width: 400px !important;
}
}
@media only screen and (max-width: 770px) {
.show-sidebar .accordion_remove_column_all_logs .col-lg-3 {
width: 50% !important;
}
.show-sidebar .dropdown_filter_accordion_all_logs_accordion {
width: 300px !important;
}
}
@media only screen and (max-width: 652px) {
.show-sidebar .accordion_ware .mobile_row .col-lg-3 {
width: 100% !important;
}
.show-sidebar .dropdown_filter_accordion_all_logs_accordion {
width: 150px !important;
}
}
@media only screen and (max-width: 580px) {
.show-sidebar .accordion_remove_column_all_logs .col-sm-4 {
width: 100%;
}
.show-sidebar .accordion_remove_column_all_logs .col-sm-4:nth-child(even) {
padding-left: 12px !important;
}
.show-sidebar .accordion_remove_column_all_logs .col-sm-4:nth-child(odd) {
padding-right: 15px !important;
}
.show-sidebar .dropdown_filter_accordion_all_logs_accordion {
width: 150px !important;
}
}
@media (max-width: 1865px) {
.show-sidebar .alldevicelogs_settings_main {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.show-sidebar .logs_settings_item {
margin-bottom: .5rem;
}
.show-sidebar .accordion_filters_device_logs {
display: block !important;
}
.show-sidebar .logs_settings_item:nth-child(n+1) {
display: none;
}
.show-sidebar .accordion_settings {
margin-bottom: .5rem;
}
}
@media (max-width: 1130px) {
.show-sidebar .accordion_ware .col-lg-3 {
width: 33%;
}
}
@media (max-width: 930px) {
.show-sidebar .filter_item_logs {
width: 50%;
}
.show-sidebar .accordion_ware .col-sm-4 {
width: 50%;
}
}
@media only screen and (max-width: 668px) and (min-width: 670px) {
.accordion_ware .col-sm-4 {
width: 100%;
}
}
@media (max-width: 650px) {
.show-sidebar .all_device_row {
justify-content: center;
align-items: center;
}
.show-sidebar .filter_item_logs {
width: 250px !important;
}
}
/* ===== admin-components/all-device-logs/all-device-logs-navbar/all-device-logs-navbar.component.css (scoped) ===== */
app-all-device-logs-navbar {
.image {
margin-top: 1rem;
width: 100%;
height: 100vh;
background-size: cover;
}
.alldevicelogs_settings_main {
margin-top: 1rem;
margin-bottom: 1rem;
}
.logs_settings_item {
height: 36px;
float: left;
margin-right: .5rem;
padding: 0.2rem .5rem;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
cursor: pointer;
}
.logs_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
margin-top: .3rem;
margin-right: .3rem;
}
.logs_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
.dropdown_filter {
background-color: var(--body--background) !important;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
margin: 10px !important;
}
.form-check-label {
color: var(--primary--body--color);
}
.form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.filter_button {
padding: 0px 5px !important;
}
.filter_button:focus {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button:active {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button::after {
color: var(--primary--body--color);
margin-left: .5rem;
}
input[type="checkbox"]:checked {
box-shadow: none !important;
}
input[type="checkbox"]:not(:checked) {
border-color: var(--primary--body--color) !important;
}
input[type="checkbox"] {
box-shadow: none !important;
}
.device_information {
color: var(--primary--body--color);
opacity: var(--opacity--100);
padding: .5rem;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.device_information span strong {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.accordion_filters_device_logs {
display: none;
}
.accordion-button:focus, b.accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.accordion-button[aria-expanded=false] .accordion-button::after {
margin-left: 1rem !important;
}
.accordion {
--bs-accordion-border-width: 0px;
}
.accordion-item {
border: var(--cart--border);
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.accordion_settings {
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
padding: 5px;
text-align: center;
margin-bottom: .5rem;
cursor: pointer;
}
.icon {
margin-top: .3rem;
margin-right: .5rem;
}
.choose_select_all_logs {
background-color: var(--body--background);
color: var(--primary--body--color);
border: none;
}
.choose_select_all_logs:focus {
outline: none;
border: none;
}
.choose_select_all_logs:active {
outline: none;
border: none;
}
.stop_button {
display: none;
}
.choose_select_all_logs::after {
display: none;
}
.form-check-label {
font-size: 12px;
}
.icon_accordion {
margin-right: .2rem;
}
@media only screen and (max-width: 950px) {
.all_logs_remove_column {
width: 550px !important;
}
}
@media (max-width: 1530px) {
.alldevicelogs_settings_main {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.logs_settings_item {
margin-bottom: .5rem;
}
.accordion_filters_device_logs {
display: block !important;
}
.logs_settings_item:nth-child(n+1) {
display: none;
}
.accordion_settings {
margin-bottom: .5rem;
}
.dropdown_filter_accordion_all_logs_accordion .col-sm-4 {
width: 33%;
}
}
@media (max-width: 723px) {
.alldevicelogs_settings_main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 1170px) {
.dropdown_filter_accordion_all_logs_accordion {
width: 800px !important;
}
}
@media (max-width: 925px) {
.dropdown_filter_accordion_all_logs_accordion {
width: 600px !important;
}
}
@media (max-width: 700px) {
.dropdown_filter_accordion_all_logs_accordion {
width: 400px !important;
}
}
@media only screen and (max-width: 705px) {
.accordion_settings span {
font-size: 13px;
}
}
@media (max-width: 620px) {
.show-sidebar .all_device_row {
justify-content: center;
align-items: center;
}
.show-sidebar .filter_item_logs {
width: 250px !important;
}
}
@media only screen and (max-width: 576px) {
.accordion_remove_column_all_logs .col-sm-4 {
width: 50%;
}
.dropdown_filter_accordion_all_logs_accordion {
width: 300px !important;
}
}
@media only screen and (max-width: 605px) {
.all_device_row .col-sm-4 {
width: 50%;
}
}
@media only screen and (max-width: 544px) {
.device_information span, strong {
font-size: 13px;
}
}
@media (max-width: 552px) {
.alldevicelogs_settings_main {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
}
.useddevice_settings_item span {
font-size: 14px;
}
.logs_settings_item {
max-height: 60px;
width: 200px !important;
}
}
@media (max-width: 400px) {
.accordion-body .col-6 {
width: 100%;
}
}
}
/* ===== admin-components/all-device-logs/all-device-logs.component.css (global) ===== */
.darkBlue-theme .tooltip_td {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.darkBlue-theme .tooltip_th {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.lightBlue-theme .tooltip_td {
border: 1px solid var(--primary--body--color) !important;
}
.lightBlue-theme .tooltip_th {
border: 1px solid var(--primary--body--color) !important;
}
/* ===== admin-components/all-device-logs/all-device-logs.component.css (scoped) ===== */
app-all-device-logs {
ul.tools {
display: none;
list-style: none;
box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
position: absolute;
padding: 0;
}
ul.tools li {
height: 25px;
margin: 4px;
padding: 5px;
cursor: pointer;
color: var(--primary--body--color);
}
.filter-tools {
font-size: 11px;
}
#contextmenu {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
height: 215px;
border: var(--cart--border);
position: absolute;
}
.mat-icon {
color: var(--secondary--color);
transform: translateY(5px);
}
.context-header {
box-shadow: var(--cart--box--shadow);
border-bottom: var(--cart--border);
}
#tooltip_flag {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
.tooltip_th {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_td {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_level {
color: var(--primary--body--color);
}
.tooltip_color {
width: 20px;
height: 20px;
border-radius: 50%;
transform: translateY(2px);
}
.tooltip_td_first {
background-color: var(--body--background);
}
.tooltip_table {
background-color: var(--body--background);
}
.tooltip_close_button {
color: var(--primary--body--color);
cursor: pointer;
}
}
/* ===== admin-components/all-device-logs/modals/device-group-modal/device-group-modal.component.css (global) ===== */
.darkBlue-theme .accordion_inner_body table th {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.dark-theme .accordion_inner_body table th {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.lightBlue-theme .accordion_inner_body table th {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.dark-theme .search-icon {
position: absolute;
left: 10px;
bottom: 9px;
color: var(--primary--body--color);
font-size: 13px;
}
.darkBlue-theme .search-icon {
position: absolute;
left: 10px;
bottom: 8px;
color: var(--primary--body--color);
font-size: 13px;
}
.lightBlue-theme .search-icon {
position: absolute;
left: 10px;
bottom: 8px;
color: var(--primary--body--color);
font-size: 13px;
}
@media only screen and (max-width: 950px) {
.show-sidebar .modal-dialog {
width: 100% !important;
}
}
/* ===== admin-components/all-device-logs/modals/device-group-modal/device-group-modal.component.css (scoped) ===== */
app-device-group-modal {
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
}
.new_input::placeholder {
color: var(--primary--body--color);
}
.choose_select {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
}
.choose_select:focus {
outline: none;
}
.choose_select:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
}
.filter-clear-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--body--background);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 30px;
font-size: 13px;
}
.oriana-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 30px;
font-size: 13px;
}
.accordion_element {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
margin-bottom: .6rem;
padding: 0px;
}
.shortcut-category-button {
margin-bottom: 0rem;
color: var(--primary--body--color);
text-decoration: none;
}
.shortcut-category-button:focus {
color: var(--primary--body--color);
}
.shortcut-category-button:active {
color: var(--primary--body--color);
}
.accordion_inner {
background-color: var(--body--background);
color: var(--primary--body--color);
border: 0px;
}
.accordion_inner_body table th {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.card-body {
padding:10px 20px;
}
.card-header {
border-bottom: none;
}
.search-input::placeholder {
font-size: 14px;
text-indent: 17px;
}
.search-icon {
position: absolute;
left: 10px;
bottom: 9px;
color: var(--primary--body--color);
font-size: 13px;
}
.drop-menu {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.menu-text {
color: var(--primary--body--color);
font-weight: normal;
font-size: 13px;
}
.menu-icon {
color: var(--primary--body--color);
transform: translateY(5px);
}
.shortcut-name {
font-size: 14px;
font-weight: normal;
}
.modal.right .modal-dialog {
position: fixed;
margin: auto;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.right .modal-body {
padding: 15px 15px 80px;
}
.modal.right.fade .modal-dialog {
right: 0;
width: 50%;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog {
right: 0;
}
.modal-content {
border-radius: 0;
border: none;
}
@media only screen and (max-width: 850px) {
.modal-dialog {
width: 75% !important;
}
}
}
/* ===== admin-components/all-device-logs/modals/filter-modal/filter-modal.component.css (global) ===== */
@media (max-width:576px) {
.show-sidebar .input-group-append {
width: 15%;
}
.show-sidebar .input_width {
width: 70%;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
/* ===== admin-components/all-device-logs/modals/filter-modal/filter-modal.component.css (scoped) ===== */
app-filter-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
}
.new_input::placeholder {
color: var(--primary--body--color);
}
.choose_select_all_device_logs {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
}
.choose_select_all_device_logs:focus {
outline: none;
}
.choose_select_all_device_logs:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-logs {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-logs:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-logs:focus {
border: none;
outline: none;
box-shadow: none;
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-button-all-logs {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 7px 20px;
font-size: 13px;
}
.oriana-button-all-logs:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 7px 20px;
font-size: 13px;
}
.oriana-button-all-logs:active {
color: var(--primary--body--color);
}
.input-group-append {
width: 6%;
}
.input_width {
width: 75%;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.logs-button-select::after {
content: none;
}
.logs-button-select {
height: 36px;
text-align: left;
}
.modal-content-all-device-logs {
overflow: visible !important;
}
}
/* ===== admin-components/cyber-security/correlation/correlation.component.css (global) ===== */
.correlation-ip-list {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
overflow: hidden;
vertical-align: middle;
}
.correlation-ip-chip {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 150px;
height: 26px;
padding: 0 8px;
border: 1px solid rgba(4, 46, 82, 0.18);
border-radius: 999px;
background: rgba(4, 46, 82, 0.08);
color: var(--primary--body--color);
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.correlation-ip-chip i {
color: var(--primary--body--color);
font-size: 10px;
opacity: 0.62;
flex: 0 0 auto;
}
.correlation-ip-more {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 26px;
padding: 0 8px;
border-radius: 999px;
background: rgba(100, 116, 139, 0.16);
color: var(--primary--body--color);
font-size: 15px;
font-weight: 800;
flex: 0 0 auto;
}
.correlation-ip-empty {
color: var(--primary--body--color);
opacity: 0.45;
font-weight: 700;
}
app-correlation-context(.lightBlue-theme) .correlation-ip-chip {
border-color: rgba(59, 89, 102, 0.24);
background: rgba(59, 89, 102, 0.1);
}
app-correlation-context(.dark-theme) .correlation-ip-chip {
border-color: rgba(204, 204, 204, 0.18);
background: rgba(204, 204, 204, 0.1);
}
app-correlation-context(.darkBlue-theme) .correlation-ip-chip {
border-color: rgba(96, 165, 250, 0.2);
background: rgba(61, 64, 115, 0.28);
}
.correlation-ip-pop {
position: fixed;
z-index: 999999;
min-width: 220px;
max-width: 320px;
max-height: 260px;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 8px;
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
overflow: hidden;
pointer-events: auto;
}
.correlation-ip-pop__title {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
font-size: 13px;
font-weight: 800;
}
.correlation-ip-pop__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 7px;
background: rgba(4, 46, 82, 0.1);
}
.correlation-ip-pop__count {
margin-left: auto;
min-width: 24px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: rgba(100, 116, 139, 0.16);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.correlation-ip-pop__list {
display: grid;
gap: 6px;
max-height: 190px;
overflow: auto;
}
.correlation-ip-pop__item {
padding: 7px 9px;
border-radius: 6px;
background: rgba(100, 116, 139, 0.12);
font-size: 12.5px;
font-weight: 700;
line-height: 1.2;
font-family: Consolas, "Courier New", monospace;
}
.dark-theme .correlation-ip-pop {
background: #363939;
border-color: rgba(148, 163, 184, 0.18);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.darkBlue-theme .correlation-ip-pop {
background: #0d1b2e;
border-color: rgba(96, 165, 250, 0.18);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.dark-theme .correlation-ip-pop__item, .darkBlue-theme .correlation-ip-pop__item {
background: rgba(255, 255, 255, 0.08);
}
.correlation-level-cell {
padding-left: 0 !important;
}
.correlation-level-badge {
--correlation-level-color: #64748b;
--correlation-level-bg: rgba(100, 116, 139, 0.2);
--correlation-level-border: rgba(100, 116, 139, 0.42);
--correlation-level-text-color: #111827;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 108px;
height: 28px;
padding: 0 10px;
border: 1px solid var(--correlation-level-border);
border-radius: 999px;
background: var(--correlation-level-bg);
color: var(--correlation-level-text-color);
font-size: 12px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.correlation-level-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--correlation-level-color);
box-shadow: 0 0 0 4px var(--correlation-level-bg);
flex: 0 0 auto;
}
.correlation-level-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
border-radius: 50%;
background: var(--correlation-level-bg);
color: var(--correlation-level-text-color);
}
.correlation-level-text {
overflow: hidden;
text-overflow: ellipsis;
}
.correlation-level-empty {
color: var(--primary--body--color);
opacity: 0.45;
font-weight: 700;
}
.correlation-level--low {
--correlation-level-color: #16a34a;
--correlation-level-bg: rgba(22, 163, 74, 0.22);
--correlation-level-border: rgba(22, 163, 74, 0.46);
}
.correlation-level--guarded {
--correlation-level-color: #65a30d;
--correlation-level-bg: rgba(101, 163, 13, 0.22);
--correlation-level-border: rgba(101, 163, 13, 0.46);
}
.correlation-level--medium {
--correlation-level-color: #d97706;
--correlation-level-bg: rgba(217, 119, 6, 0.24);
--correlation-level-border: rgba(217, 119, 6, 0.48);
}
.correlation-level--high {
--correlation-level-color: #ea580c;
--correlation-level-bg: rgba(234, 88, 12, 0.25);
--correlation-level-border: rgba(234, 88, 12, 0.5);
}
.correlation-level--critical {
--correlation-level-color: #dc2626;
--correlation-level-bg: rgba(220, 38, 38, 0.25);
--correlation-level-border: rgba(220, 38, 38, 0.5);
}
app-correlation-context(.lightBlue-theme) .correlation-level-badge {
--correlation-level-text-color: #0f172a;
}
app-correlation-context(.dark-theme) .correlation-level-badge {
--correlation-level-text-color: #ffffffbd;
}
app-correlation-context(.darkBlue-theme) .correlation-level-badge {
--correlation-level-text-color: rgba(255, 255, 255, 0.82);
}
.darkBlue-theme .tooltip_td {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.darkBlue-theme .tooltip_th {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.lightBlue-theme .tooltip_td {
border: 1px solid var(--primary--body--color) !important;
}
.lightBlue-theme .tooltip_th {
border: 1px solid var(--primary--body--color) !important;
}
.ssh-pop {
position: fixed;
z-index: 999999;
width: 440px;
max-width: 420px;
padding: 12px 12px 10px;
border-radius: var(--cart--border--radius);
background: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 12.5px;
line-height: 1.35;
pointer-events: none;
}
.ssh-pop::after {
content: "";
position: absolute;
top: -7px;
left: 22px;
width: 14px;
height: 14px;
background: var(--body--background);
transform: rotate(45deg);
border-left: var(--cart--border);
border-top: var(--cart--border);
}
.ssh-pop__title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
margin-bottom: 8px;
}
.ssh-pop__icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: calc(var(--cart--border--radius) - 2px);
background: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
font-size: 16px;
opacity: .7;
}
.ssh-pop__badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.ssh-pop__badge {
padding: 4px 8px;
border-radius: 999px;
background: var(--input--background);
border: var(--cart--border);
color: var(--primary--body--color);
font-size: 11.5px;
opacity: 0.95;
}
.ssh-pop__badge.on {
background: color-mix(in srgb, var(--secondary--color) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--secondary--color) 55%, transparent);
color: var(--primary--body--color);
opacity: 1;
}
.ssh-pop__badge.off {
text-decoration: line-through;
}
.ssh-pop__badge.neutral {
background: var(--input--background);
color: var(--primary--body--color);
}
.ssh-pop__row {
display: grid;
grid-template-columns: 92px 1fr;
gap: 10px;
padding: 8px 3px;
background: var(--input--background);
margin-bottom: 10px;
}
.ssh-pop__label {
color: var(--primary--body--color);
opacity: 0.95;
}
.ssh-pop__value {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ssh-pop__sectionTitle {
font-weight: 700;
color: var(--primary--body--color);
}
.ssh-pop__cmds {
margin: 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 0px;
max-height: 180px;
overflow: auto;
}
.ssh-pop__cmds code {
display: block;
padding: 8px 10px;
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
font-size: 12px;
white-space: pre-wrap;
word-break: break-word;
}
.ssh-pop__empty {
padding: 10px;
border-radius: var(--cart--border--radius);
border: 1px dashed color-mix(in srgb, var(--primary--sidebar--color) 45%, transparent);
color: var(--primary--sidebar--color);
}
.ssh-pop__cmds::-webkit-scrollbar {
width: 8px;
}
.ssh-pop__cmds::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--primary--sidebar--color) 45%, transparent);
border-radius: 10px;
}
.ssh-filter {
position: fixed;
z-index: 999999;
width: max-content;
max-width: 620px;
padding: 12px 12px 10px;
border-radius: var(--cart--border--radius);
background: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 12.5px;
line-height: 1.35;
pointer-events: none;
}
.ssh-filter::after {
content: "";
position: absolute;
top: -7px;
left: 22px;
width: 14px;
height: 14px;
background: var(--body--background);
transform: rotate(45deg);
border-left: var(--cart--border);
border-top: var(--cart--border);
}
.hover-pop {
position: fixed;
z-index: 999999;
pointer-events: auto;
}
.filtersPop {
padding: 12px;
background: var(--body--background);
color: var(--primary--body--color);
font-size: 12.5px;
}
.filtersPop::after {
content:"";
position:absolute;
top:-7px;
left: 22px;
width: 14px;
height: 14px;
background: var(--body--background);
transform: rotate(45deg);
border-left: var(--cart--border);
border-top: var(--cart--border);
}
.filtersPop__header {
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.filtersPop__title {
display:flex;
align-items:center;
gap: 8px;
font-weight: 800;
}
.filtersPop__icon {
width: 22px;
height: 22px;
display:grid;
place-items:center;
border-radius: calc(var(--cart--border--radius) - 2px);
background: var(--input--background);
border: var(--cart--border);
color: var(--primary--body--color);
font-size: 12px;
opacity: .7;
}
.filtersPop__count {
padding: 2px 8px;
border-radius: 999px;
background: var(--input--background);
border: var(--cart--border);
font-weight: 700;
}
.filtersPop__table {
border-radius: var(--cart--border--radius);
border: var(--cart--border);
overflow: hidden;
}
.filtersPop__thead {
display:grid;
grid-template-columns: 42px 1fr;
background: var(--table--second--row--color);
border-bottom: var(--cart--border);
}
.filtersPop__th {
padding: 8px 10px;
font-weight: 700;
color: var(--primary--body--color);
}
.filtersPop__tbody {
max-height: 240px;
overflow: auto;
background: var(--body--background);
}
.filtersPop__tr {
display:grid;
grid-template-columns: 42px 1fr;
border-bottom: 1px solid color-mix(in srgb, var(--primary--sidebar--color) 18%, transparent);
}
.filtersPop__tr:last-child {
border-bottom: none;
}
.filtersPop__td {
padding: 10px;
}
.filtersPop__idx {
display:grid;
place-items:center;
font-weight: 800;
color: var(--primary--body--color);
}
.filtersPop__main {
min-width: 0;
}
.filtersPop__badges {
display:flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.filtersPop__badge {
padding: 3px 8px;
border-radius: 999px;
background: var(--input--background);
border: var(--cart--border);
font-size: 11.5px;
color: var(--primary--body--color);
}
.filtersPop__badge.on {
background: color-mix(in srgb, var(--secondary--color) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--secondary--color) 55%, transparent);
}
.filtersPop__badge.neutral {
background: var(--input--background);
}
.filtersPop__code {
display:block;
padding: 8px 10px;
border-radius: var(--cart--border--radius);
background: var(--input--background);
border: var(--cart--border);
color: var(--primary--body--color);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 12px;
white-space: pre-wrap;
word-break: break-word;
}
.filtersPop__empty {
padding: 12px;
color: var(--primary--sidebar--color);
background: var(--input--background);
}
.filtersPop__tbody::-webkit-scrollbar { width: 8px; }
.filtersPop__tbody::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--primary--sidebar--color) 45%, transparent);
border-radius: 10px;
}
.filtersPop__main {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.filtersPop__sep {
color: var(--primary--sidebar--color);
opacity: .8;
flex: 0 0 auto;
}
.filtersPop__codeInline {
padding: 6px 8px;
color: var(--primary--body--color);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
min-width: 0;
}
.chain-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
background: var(--input--background, #f0f0f0);
border: 1px solid rgba(0,0,0,0.08);
cursor: pointer;
transition: all 0.2s ease;
}
.chain-toggle-btn i {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
transition: transform 0.25s ease;
}
.chain-toggle-btn:hover {
background: var(--secondary--color, #1976d2);
border-color: var(--secondary--color, #1976d2);
}
.chain-toggle-btn:hover i {
color: #fff;
opacity: 1;
}
.chain-toggle-btn.expanded i {
transform: rotate(90deg);
}
.chain-expand-icon {
cursor: pointer;
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
transition: transform 0.2s ease;
}
.chain-expand-icon:hover {
opacity: 1;
}
.ag-full-width-row {
overflow: visible !important;
}
.ag-row.chain-detail-parent-odd {
background-color: var(--ag-odd-row-background-color) !important;
}
.ag-row.chain-detail-parent-even {
background-color: var(--ag-background-color) !important;
}
.ag-row.chain-row-odd {
background-color: var(--ag-odd-row-background-color) !important;
}
.ag-row.chain-row-even {
background-color: var(--ag-background-color) !important;
}
.ag-full-width-row .ag-cell-wrapper {
width: 100%;
}
.ag-row.chain-expanded-parent {
background: rgba(0, 128, 0, 0.452) !important;
border-left: 3px solid var(--secondary--color, #1976d2) !important;
}
@keyframes collapseAllFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 0.92; transform: translateY(0); }
}
/* ===== admin-components/cyber-security/correlation/correlation.component.css (scoped) ===== */
app-correlation {
ul.tools {
display: none;
list-style: none;
box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
position: absolute;
padding: 0;
}
ul.tools li {
height: 25px;
margin: 4px;
padding: 5px;
cursor: pointer;
color: var(--primary--body--color);
}
.correlation-table-actions {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
min-height: 48px;
margin: 8px 20px 10px;
padding: 8px 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.correlation-table-actions__meta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 700;
opacity: 0.78;
}
.correlation-table-actions__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 26px;
padding: 0 8px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.14);
color: var(--primary--body--color);
}
.correlation-table-actions__buttons {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
.correlation-table-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 32px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 7px;
color: #ffffff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.correlation-table-action {
min-width: 0;
}
.correlation-table-action i {
flex: 0 0 auto;
font-size: 13px;
}
.correlation-table-action span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.correlation-table-action:disabled {
cursor: not-allowed;
opacity: 0.48;
}
.correlation-table-action--edit {
--correlation-edit-action-bg: #042e52;
--correlation-edit-action-border: #042e52;
--correlation-edit-action-hover: #031f38;
background: var(--correlation-edit-action-bg);
border-color: var(--correlation-edit-action-border);
box-shadow: 0 8px 16px rgba(4, 46, 82, 0.18);
}
.correlation-table-action--edit:not(:disabled):hover {
background: var(--correlation-edit-action-hover);
border-color: var(--correlation-edit-action-hover);
}
.correlation-table-action--copy {
--correlation-copy-action-bg: #0f766e;
--correlation-copy-action-border: #0f766e;
--correlation-copy-action-hover: #0b5b55;
background: var(--correlation-copy-action-bg);
border-color: var(--correlation-copy-action-border);
box-shadow: 0 8px 16px rgba(15, 118, 110, 0.18);
}
.correlation-table-action--copy:not(:disabled):hover {
background: var(--correlation-copy-action-hover);
border-color: var(--correlation-copy-action-hover);
}
.correlation-table-action--delete {
background: #dc2626;
border-color: #dc2626;
box-shadow: 0 8px 16px rgba(220, 38, 38, 0.18);
}
.correlation-table-action--delete:not(:disabled):hover {
background: #b91c1c;
border-color: #b91c1c;
}
.lightBlue-theme & .correlation-table-action--edit {
--correlation-edit-action-bg: #3b5966;
--correlation-edit-action-border: #3b5966;
--correlation-edit-action-hover: #2f4853;
box-shadow: 0 8px 16px rgba(59, 89, 102, 0.18);
}
.dark-theme & .correlation-table-actions {
background: #363939;
border-color: rgba(148, 163, 184, 0.16);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
.dark-theme & .correlation-table-action--edit {
--correlation-edit-action-bg: #4a4a4a;
--correlation-edit-action-border: #5f6368;
--correlation-edit-action-hover: #5a5a5a;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}
.dark-theme & .correlation-table-action--copy {
--correlation-copy-action-bg: #3f5f5c;
--correlation-copy-action-border: #4f7370;
--correlation-copy-action-hover: #4b706c;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}
.darkBlue-theme & .correlation-table-actions {
background: rgba(15, 23, 42, 0.54);
border-color: rgba(148, 163, 184, 0.16);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
.darkBlue-theme & .correlation-table-action--edit {
--correlation-edit-action-bg: #3d4073;
--correlation-edit-action-border: #4c518d;
--correlation-edit-action-hover: #4b4f8b;
box-shadow: 0 8px 16px rgba(61, 64, 115, 0.24);
}
.darkBlue-theme & .correlation-table-action--copy {
--correlation-copy-action-bg: #21575c;
--correlation-copy-action-border: #2d6a70;
--correlation-copy-action-hover: #2b666c;
box-shadow: 0 8px 16px rgba(33, 87, 92, 0.24);
}
.lightBlue-theme & .correlation-table-action--copy {
--correlation-copy-action-bg: #3f6b73;
--correlation-copy-action-border: #3f6b73;
--correlation-copy-action-hover: #345862;
box-shadow: 0 8px 16px rgba(63, 107, 115, 0.18);
}
.correlation-context-menu {
position: fixed;
z-index: 1055;
min-width: 210px;
padding: 6px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 8px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.correlation-context-menu__item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
height: 34px;
padding: 0 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.correlation-context-menu__item i {
width: 15px;
font-size: 13px;
text-align: center;
}
.correlation-context-menu__item:hover {
background: rgba(59, 130, 246, 0.12);
}
.correlation-context-menu__item--danger {
color: #dc2626;
}
.correlation-context-menu__item--danger:hover {
background: rgba(220, 38, 38, 0.12);
}
.dark-theme & .correlation-context-menu {
background: #363939;
border-color: rgba(148, 163, 184, 0.18);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.darkBlue-theme & .correlation-context-menu {
background: #0d1b2e;
border-color: rgba(96, 165, 250, 0.18);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.dark-theme & .correlation-context-menu__item, .darkBlue-theme & .correlation-context-menu__item {
color: rgba(255, 255, 255, 0.86);
}
.dark-theme & .correlation-context-menu__item:hover {
background: rgba(148, 163, 184, 0.14);
}
.darkBlue-theme & .correlation-context-menu__item:hover {
background: rgba(59, 130, 246, 0.18);
}
.dark-theme & .correlation-context-menu__item--danger, .darkBlue-theme & .correlation-context-menu__item--danger {
color: #f87171;
}
.dark-theme & .correlation-context-menu__item--danger:hover, .darkBlue-theme & .correlation-context-menu__item--danger:hover {
background: rgba(248, 113, 113, 0.14);
}
@media (max-width: 645px) {
.correlation-table-actions {
align-items: stretch;
flex-direction: column;
gap: 10px;
}
.correlation-table-actions__buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.correlation-table-action {
width: 100%;
padding: 0 10px;
}
}
@media (max-width: 400px) {
.correlation-table-actions__buttons {
grid-template-columns: minmax(0, 1fr);
}
}
.filter-tools {
font-size: 11px;
}
#contextmenu {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
height: 215px;
border: var(--cart--border)
}
.mat-icon {
color: var(--secondary--color);
transform: translateY(5px);
}
.context-header {
box-shadow: var(--cart--box--shadow);
border-bottom: var(--cart--border);
}
#tooltip_all_filter {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
#tooltip_ssh_commands {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
.tooltip_th {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_td {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_level {
color: var(--primary--body--color);
}
.tooltip_color {
width: 20px;
height: 20px;
border-radius: 50%;
transform: translateY(2px);
}
.tooltip_td_first {
background-color: var(--body--background);
}
.tooltip_table {
background-color: var(--body--background);
}
.tooltip_close_button {
color: var(--primary--body--color);
cursor: pointer;
}
.correlation-toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.correlation-toolbar app-navbar {
flex: 1;
min-width: 0;
}
.collapse-all-fab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
margin-top: 1rem;
border-radius: 8px;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background: var(--body--background);
color: var(--primary--body--color);
cursor: pointer;
font-size: 13px;
font-weight: 600;
opacity: 0.92;
transition: all 0.2s ease;
animation: collapseAllFadeIn 0.25s ease;
white-space: nowrap;
flex-shrink: 0;
}
.collapse-all-fab i {
font-size: 13px;
opacity: 0.7;
}
.collapse-all-fab:hover {
background: var(--secondary--color, #1976d2);
border-color: var(--secondary--color, #1976d2);
color: #fff;
opacity: 1;
}
.collapse-all-fab:hover i {
opacity: 1;
}
}
/* ===== admin-components/cyber-security/correlation/navbar/navbar.component.css (global) ===== */
.dark-theme .correlation_navbar_item, .darkBlue-theme .correlation_navbar_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .correlation_navbar_item {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
/* ===== admin-components/cyber-security/correlation/navbar/navbar.component.css (scoped) ===== */
app-navbar {
.correlation_navbar {
margin-bottom: 1rem;
position: relative;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.correlation_navbar_item_a {
text-decoration: none;
color: var(--primary--body--color);
}
.correlation_navbar_main {
margin-top: 1rem;
margin-bottom: 1rem;
position: relative;
}
.correlation_navbar_main:has(.rpn-menu-report-navbar.show), .correlation_navbar_main:focus-within {
z-index: 1400;
}
.correlation_navbar_item {
position: relative;
z-index: 300;
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.correlation_navbar_item:has(.rpn-menu-report-navbar.show), .correlation_navbar_item:focus-within {
z-index: 1300;
}
.correlation_navbar_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.correlation_navbar_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.correlation_navbar_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
.correlation_navbar_import_item {
padding: 0;
}
.correlation_navbar_import_label {
width: 100%;
height: 100%;
margin: 0;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--primary--body--color);
cursor: pointer;
}
.correlation_navbar_file_input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
/* ===== admin-components/cyber-security/extensions/sigma-rule/sigma-rule.component.css (global) ===== */
.ssh-filter {
position: fixed;
z-index: 999999;
width: max-content;
max-width: 620px;
padding: 12px 12px 10px;
border-radius: var(--cart--border--radius);
background: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 12.5px;
line-height: 1.35;
pointer-events: none;
}
.ssh-filter::after {
content: "";
position: absolute;
top: -7px;
left: 22px;
width: 14px;
height: 14px;
background: var(--body--background);
transform: rotate(45deg);
border-left: var(--cart--border);
border-top: var(--cart--border);
}
.filtersPop {
padding: 12px;
background: var(--body--background);
color: var(--primary--body--color);
font-size: 12.5px;
}
.filtersPop::after {
content:"";
position:absolute;
top:-7px;
left: 22px;
width: 14px;
height: 14px;
background: var(--body--background);
transform: rotate(45deg);
border-left: var(--cart--border);
border-top: var(--cart--border);
}
.filtersPop__header {
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.filtersPop__title {
display:flex;
align-items:center;
gap: 8px;
font-weight: 800;
}
.filtersPop__icon {
width: 22px;
height: 22px;
display:grid;
place-items:center;
border-radius: calc(var(--cart--border--radius) - 2px);
background: var(--input--background);
border: var(--cart--border);
color: var(--primary--body--color);
font-size: 12px;
opacity: .7;
}
.filtersPop__count {
padding: 2px 8px;
border-radius: 999px;
background: var(--input--background);
border: var(--cart--border);
font-weight: 700;
}
.filtersPop__table {
border-radius: var(--cart--border--radius);
border: var(--cart--border);
overflow: hidden;
}
.filtersPop__thead {
display:grid;
grid-template-columns: 42px 1fr;
background: var(--table--second--row--color);
border-bottom: var(--cart--border);
}
.filtersPop__th {
padding: 8px 10px;
font-weight: 700;
color: var(--primary--body--color);
}
.filtersPop__tbody {
max-height: 240px;
overflow: auto;
background: var(--body--background);
}
.filtersPop__tr {
display:grid;
grid-template-columns: 42px 1fr;
border-bottom: 1px solid color-mix(in srgb, var(--primary--sidebar--color) 18%, transparent);
}
.filtersPop__tr:last-child {
border-bottom: none;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.filtersPop__td {
padding: 10px;
}
.filtersPop__idx {
display:grid;
place-items:center;
font-weight: 800;
color: var(--primary--body--color);
}
.filtersPop__main {
min-width: 0;
}
.filtersPop__badge {
padding: 3px 8px;
border-radius: 999px;
background: var(--input--background);
border: var(--cart--border);
font-size: 11.5px;
color: var(--primary--body--color);
display: inline-block;
margin-right: 6px;
}
.filtersPop__badge.on {
background: color-mix(in srgb, var(--secondary--color) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--secondary--color) 55%, transparent);
}
.filtersPop__badge.neutral {
background: var(--input--background);
}
.filtersPop__sep {
margin: 0 6px;
opacity: 0.5;
}
.filtersPop__codeInline {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 12px;
background: var(--input--background);
border: var(--cart--border);
padding: 2px 6px;
border-radius: 4px;
}
.sigma-rule-detail-backdrop {
background: rgba(0, 0, 0, 0.4) !important;
}
.sigma-rule-detail-dialog {
position: fixed !important;
inset: 0 !important;
}
/* ===== admin-components/cyber-security/extensions/sigma-rule/sigma-rule.component.css (scoped) ===== */
app-sigma-rule {
#id-extra.sigma-page {
--pagination-height: 54.67px;
}
#datatable {
height: calc(100vh - 180px);
}
.predefined-loading-spinner {
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - 280px);
}
.predefined-loading-spinner .spinner-border {
width: 3rem;
height: 3rem;
color: var(--secondary--color);
}
.ag-theme-alpine {
--ag-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--ag-font-size: 13px;
--ag-foreground-color: var(--primary--body--color);
--ag-background-color: var(--body--background);
--ag-header-background-color: var(--table--header--background);
--ag-header-foreground-color: var(--primary--body--color);
--ag-row-hover-color: var(--row--hover--color);
--ag-selected-row-background-color: var(--row--selected--background);
--ag-border-color: var(--cart--border-color);
--ag-input-focus-border-color: var(--primary--color);
}
.ag-row {
background-color: var(--body--background);
border-bottom: var(--cart--border);
}
.ag-row:hover {
background-color: var(--row--hover--color);
}
.ag-header-cell {
background-color: var(--table--header--background);
color: var(--primary--body--color);
border-right: var(--cart--border);
}
.ag-cell {
color: var(--primary--body--color);
padding: 10px;
}
.sigma-rule-edit-modal {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.sigma-rule-edit-modal .form-group label {
color: var(--primary--body--color);
font-weight: 600;
margin-bottom: 0.5rem;
}
.sigma-rule-edit-modal .form-control {
background-color: var(--input--background);
border: var(--cart--border);
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
}
.sigma-rule-edit-modal .form-control:focus {
background-color: var(--input--background);
border-color: var(--primary--color);
color: var(--primary--body--color);
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.sigma-rule-edit-modal .form-control[readonly] {
background-color: var(--input--background);
cursor: not-allowed;
}
.yaml-content {
font-family: 'Courier New', monospace;
font-size: 12px;
background-color: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
padding: 10px;
color: var(--primary--body--color);
}
mat-dialog-content {
max-height: 70vh;
overflow-y: auto;
}
.sigma-tabs-container {
background-color: var(--body--background);
border-bottom: 2px solid var(--cart--border-color);
padding: 0 20px;
}
.sigma-tabs-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 4px;
}
.sigma-tab-item {
margin: 0;
}
.sigma-tab-link {
display: flex;
align-items: center;
padding: 12px 16px;
background: none;
border: none;
color: var(--primary--body--color);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 3px solid transparent;
white-space: nowrap;
opacity: 0.7;
}
.sigma-tab-link:hover {
opacity: 1;
background-color: rgba(0, 123, 255, 0.05);
}
.sigma-tab-item.active .sigma-tab-link {
color: var(--primary--button--background--color);
border-bottom-color: var(--primary--button--background--color);
opacity: 1;
}
.badge-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
margin-left: 6px;
background-color: var(--primary--button--background--color);
color: white;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
.sigma-tab-content {
animation: fadeIn 0.2s ease;
}
.predefined-rules-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
padding-top: 4px;
}
.admin-sidebar-search {
position: relative;
flex: 1 1 220px;
min-width: 180px;
max-width: 480px;
height: 34px;
}
.predefined-import-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
font-size: 12.5px;
font-weight: 600;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
background: var(--input--background);
color: var(--primary--body--color);
cursor: pointer;
white-space: nowrap;
transition: background 0.18s, color 0.18s, border-color 0.18s;
flex-shrink: 0;
}
.predefined-import-btn:hover:not(:disabled) {
background: var(--secondary--color);
color: white;
border-color: var(--secondary--color);
}
.predefined-import-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.predefined-settings-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
font-size: 12.5px;
font-weight: 600;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
background: var(--input--background);
color: var(--primary--body--color);
cursor: pointer;
white-space: nowrap;
transition: background 0.18s, color 0.18s, border-color 0.18s;
flex-shrink: 0;
}
.predefined-settings-btn:hover {
background: var(--secondary--color);
color: white;
border-color: var(--secondary--color);
}
.predefined-clear-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
font-size: 12.5px;
font-weight: 600;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
background: transparent;
color: var(--primary--body--color);
cursor: pointer;
white-space: nowrap;
transition: background 0.18s, color 0.18s, border-color 0.18s;
flex-shrink: 0;
}
.predefined-clear-btn:hover:not(:disabled) {
background: color-mix(in srgb, #ef4444 12%, var(--input--background));
color: #ef4444;
border-color: color-mix(in srgb, #ef4444 40%, transparent);
}
.predefined-clear-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.predefined-confirm-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
font-size: 12.5px;
font-weight: 600;
border: 1px solid var(--secondary--color);
border-radius: var(--cart--border--radius);
background: var(--secondary--color);
color: #fff;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.18s;
flex-shrink: 0;
}
.predefined-confirm-btn:hover:not(:disabled) {
opacity: 0.86;
}
.predefined-confirm-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.import-file-preview {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 6px 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
background: var(--input--background);
animation: fadeIn 0.18s ease;
}
.import-file-preview__icon {
font-size: 13px;
color: var(--secondary--color);
flex-shrink: 0;
}
.import-file-preview__count {
font-size: 12.5px;
font-weight: 700;
color: var(--primary--body--color);
white-space: nowrap;
flex-shrink: 0;
}
.import-file-preview__names {
display: flex;
flex-wrap: wrap;
gap: 5px;
flex: 1;
min-width: 0;
}
.import-file-chip {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border: var(--cart--border);
border-radius: 999px;
background: var(--body--background);
font-size: 11.5px;
font-weight: 600;
color: var(--primary--body--color);
opacity: 0.8;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-sidebar-search__icon {
position: absolute;
top: 50%;
left: 11px;
z-index: 1;
color: var(--head-muted);
font-size: 12px;
transform: translateY(-50%);
pointer-events: none;
}
.admin-sidebar-search__input {
width: 100%;
height: 34px;
padding: 0 34px 0 32px;
color: var(--primary--body--color);
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: none;
font-size: 13px;
font-weight: 600;
outline: none;
}
.admin-sidebar-search__input::placeholder {
color: var(--primary--body--color);
opacity: .45;
}
.admin-sidebar-search__input:focus {
border-color: var(--secondary--color);
box-shadow: 0 0 0 3px rgba(25, 118, 210, .12);
}
.admin-sidebar-search__info {
position: absolute;
top: 50%;
right: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--head-muted);
font-size: 12px;
transform: translateY(-50%);
cursor: help;
}
.admin-sidebar-search__info:hover {
color: var(--secondary--color);
}
.admin-sidebar-search__tooltip {
position: absolute;
right: -8px;
top: calc(100% + 10px);
visibility: hidden;
width: 270px;
padding: 9px 10px;
color: var(--day--remain--color);
background: var(--secondary--color);
border-radius: 8px;
box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
font-size: 11px;
line-height: 1.35;
opacity: 0;
pointer-events: none;
font-size: 13px;
transition: opacity .18s ease, visibility .18s ease;
}
.admin-sidebar-search__tooltip::after {
content: "";
position: absolute;
right: 10px;
bottom: 100%;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: transparent transparent var(--secondary--color) transparent;
}
.admin-sidebar-search__info:hover .admin-sidebar-search__tooltip {
visibility: visible;
opacity: 1;
}
.admin-sidebar-search__menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 1100;
width: min(340px, calc(100vw - 24px));
max-height: 330px;
margin: 0;
padding: 6px;
overflow-y: auto;
list-style: none;
background: var(--head-surface-strong);
border: 1px solid var(--head-border);
border-radius: 8px;
box-shadow: 0 16px 34px rgba(4, 46, 82, .18);
}
.admin-sidebar-search__item {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 8px 10px;
color: var(--head-text);
border-radius: 7px;
cursor: pointer;
}
.admin-sidebar-search__item:hover {
color: var(--day--remain--color);
background: var(--secondary--color);
}
.admin-sidebar-search__item i {
flex: 0 0 18px;
color: inherit;
font-size: 13px;
text-align: center;
}
.admin-sidebar-search__text {
display: grid;
min-width: 0;
flex: 1;
}
.admin-sidebar-search__badge-group {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.admin-sidebar-search__badge {
padding: 2px 7px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
white-space: nowrap;
}
.admin-sidebar-search__badge-sublabel {
font-size: 9px;
font-weight: 600;
white-space: nowrap;
opacity: .7;
color: inherit;
padding: 0 3px;
}
.admin-sidebar-search__badge--page {
background: rgba(59, 130, 246, .15);
color: #3b82f6;
}
.admin-sidebar-search__badge--correlation {
background: rgba(168, 85, 247, .15);
color: #a855f7;
}
.admin-sidebar-search__badge--device {
background: rgba(20, 184, 166, .15);
color: #14b8a6;
}
.admin-sidebar-search__text strong, .admin-sidebar-search__text small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-sidebar-search__text strong {
color: inherit;
font-size: 13px;
font-weight: 700;
}
.admin-sidebar-search__text small {
color: inherit;
font-size: 11px;
font-weight: 600;
opacity: .72;
}
.admin-sidebar-search__empty {
padding: 10px;
color: var(--head-muted);
font-size: 12px;
font-weight: 700;
text-align: center;
}
@media (max-width: 576px) {
.predefined-rules-toolbar {
flex-direction: column;
align-items: stretch;
}
.admin-sidebar-search {
max-width: 100%;
}
.predefined-settings-btn {
width: 100%;
justify-content: center;
}
}
.predefined-rules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
padding: 20px 0 8px;
width: 100%;
}
.pagination-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 25;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
min-height: var(--pagination-height);
padding-top: 8px;
padding-bottom: 8px;
padding-left: 24px;
padding-right: 24px;
background-color: var(--body--background);
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
box-shadow: 0 -10px 24px color-mix(in srgb, #000 8%, transparent);
}
.pagination-shell {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 25;
}
.pagination-spacer {
height: calc(var(--pagination-height) + 8px);
}
.pagination-info {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.65;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 4px;
}
.pag-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
padding: 4px 9px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 4px !important;
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 12px;
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pag-btn:hover:not(:disabled):not(.pag-btn--active) {
background-color: color-mix(in srgb, var(--secondary--color) 14%, var(--input--background));
color: var(--primary--body--color);
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
}
.pag-btn--active {
background-color: var(--secondary--color);
color: var(--day--remain--color);
border-color: var(--secondary--color);
cursor: default;
font-weight: 600;
}
.pag-btn:disabled {
background-color: var(--input--background);
color: color-mix(in srgb, var(--primary--body--color) 35%, transparent);
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
opacity: 1;
cursor: not-allowed;
}
.pag-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
padding: 4px 9px;
font-size: 12px;
line-height: 1.5;
color: color-mix(in srgb, var(--primary--body--color) 35%, transparent);
user-select: none;
}
@media (max-width: 768px) {
.pagination-bar {
min-height: auto;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
}
}
.predefined-rule-card {
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
overflow: hidden;
transition: box-shadow 0.18s ease;
display: flex;
flex-direction: column;
}
.predefined-rule-card:hover {
box-shadow: var(--cart--box--shadow), 0 2px 10px rgba(0, 0, 0, 0.1);
}
.rule-card-header {
padding: 10px 14px;
border-bottom: var(--cart--border);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
background-color: var(--body--background);
}
.rule-card-title {
margin: 0;
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: var(--opacity--80);
line-height: 1.4;
word-break: break-word;
flex: 1;
}
.rule-card-status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--cart--border--radius);
font-size: 10px;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.4px;
border: var(--cart--border);
background-color: var(--input--background);
color: var(--primary--body--color);
opacity: 0.75;
flex-shrink: 0;
}
.rule-card-status.status-stable {
background-color: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.35);
color: #22c55e;
opacity: 1;
}
.rule-card-status.status-test {
background-color: rgba(234, 179, 8, 0.12);
border-color: rgba(234, 179, 8, 0.35);
color: #ca8a04;
opacity: 1;
}
.rule-card-status.status-experimental {
background-color: rgba(249, 115, 22, 0.12);
border-color: rgba(249, 115, 22, 0.35);
color: #ea580c;
opacity: 1;
}
.rule-card-body {
padding: 10px 14px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
background-color: var(--body--background);
}
.rule-card-description {
margin: 0;
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.65;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rule-card-meta {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
padding-top: 8px;
border-top: var(--cart--border);
}
.meta-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--primary--body--color);
opacity: 0.62;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.meta-item i {
width: 13px;
text-align: center;
flex-shrink: 0;
color: var(--primary--body--color);
opacity: 0.5;
}
.meta-item strong {
font-weight: 600;
opacity: 1;
color: var(--primary--body--color);
}
.mono {
font-family: 'Courier New', monospace;
font-size: 11px;
opacity: 0.8;
color: var(--primary--body--color);
}
.rule-card-footer {
padding: 8px 14px;
border-top: var(--cart--border);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
background-color: var(--input--background);
}
.rule-card-footer .btn {
width: 100%;
min-width: 0;
font-size: 12px;
min-height: 30px;
padding: 6px 10px;
transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
border: var(--cart--border);
background-color: var(--body--background);
color: var(--primary--body--color);
font-weight: 600;
border-radius: var(--cart--border--radius);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
opacity: 0.8;
line-height: 1.35;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
text-align: center;
}
.rule-card-footer .btn i {
flex-shrink: 0;
}
.rule-card-footer .btn:hover {
background-color: var(--secondary--color);
color: var(--day--remain--color);
border-color: var(--secondary--color);
opacity: 1;
}
@media (max-width: 460px) {
.rule-card-footer {
grid-template-columns: 1fr;
}
}
}
/* ===== admin-components/cyber-security/taxii-stix/mitre-attack/mitre-attack-detail-modal/mitre-attack-detail-modal.component.css (scoped) ===== */
app-mitre-attack-detail-modal {
.modal.right .modal-dialog {
position: fixed;
right: 0;
margin: 0;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.mad-modal-dialog {
width: min(560px, 100vw);
max-width: min(560px, 100vw);
}
.modal.right .modal-content {
height: 100%;
overflow-y: hidden;
border-radius: 0;
border: none;
}
.modal.right.fade .modal-dialog {
right: -560px;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.right.show .modal-dialog {
right: 0;
}
.modal-content {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)
);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.mad-modal-content {
min-height: 100%;
}
.mad-widget-shell {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mad-widget-header {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background)
);
}
.mad-widget-title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.mad-header-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.mad-title-text {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mad-widget-close {
width: 34px;
height: 34px;
border: none;
border-radius: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.mad-widget-close:hover {
transform: translateY(-1px);
}
.mad-modal-body {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px;
}
.mad-modal-body::-webkit-scrollbar {
width: 4px;
}
.mad-modal-body::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.mad-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(
circle at top right,
color-mix(in srgb, var(--secondary--color) 7%, transparent),
transparent 40%
),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.mad-section-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.mad-section-head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.mad-section-head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.mad-section-content {
margin: 0;
font-size: 13px;
color: var(--primary--body--color);
line-height: 1.6;
opacity: 0.85;
}
.mad-info-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 5%, transparent);
}
.mad-info-row:last-child {
border-bottom: none;
}
.mad-info-label {
font-size: 12px;
font-weight: 600;
color: var(--primary--body--color);
opacity: 0.7;
}
.mad-info-value {
font-size: 13px;
color: var(--primary--body--color);
opacity: 0.88;
word-break: break-word;
}
.mad-badge-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mad-badge {
display: inline-block;
padding: 6px 10px;
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--secondary--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.mad-reference-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mad-reference-item {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
border-radius: 8px;
padding: 10px;
background-color: color-mix(in srgb, var(--input--background) 30%, transparent);
}
.mad-reference-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.mad-reference-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: color-mix(in srgb, var(--secondary--color) 16%, transparent);
color: var(--secondary--color);
border-radius: 4px;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
.mad-reference-header strong {
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.9;
word-break: break-word;
}
.mad-reference-body {
display: flex;
flex-direction: column;
gap: 6px;
margin-left: 32px;
}
.mad-reference-id {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
}
.mad-reference-link {
font-size: 12px;
color: var(--secondary--color);
text-decoration: none;
word-break: break-all;
transition: opacity 0.18s ease;
}
.mad-reference-link:hover {
opacity: 0.8;
text-decoration: underline;
}
.mad-reference-desc {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.6;
line-height: 1.5;
}
}
/* ===== admin-components/cyber-security/taxii-stix/mitre-attack/mitre-attack-navbar/mitre-attack-navbar.component.css (global) ===== */
.dark-theme .alldevicelogs_settings_item, .darkBlue-theme .alldevicelogs_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .collection-dropdown, .darkBlue-theme .collection-dropdown, .dark-theme .dropdown_filter, .darkBlue-theme .dropdown_filter {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .collection-item, .darkBlue-theme .collection-item {
color: rgba(255, 255, 255, 0.88);
}
.dark-theme .collection-item input[type="checkbox"], .darkBlue-theme .collection-item input[type="checkbox"], .dark-theme .form-check-input, .darkBlue-theme .form-check-input {
border: none;
}
.lightBlue-theme .alldevicelogs_settings_item {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
.lightBlue-theme .collection-dropdown, .lightBlue-theme .dropdown_filter {
border: none;
background-color: #ffffff !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .collection-item input[type="checkbox"], .lightBlue-theme .form-check-input {
border: none;
background-color: #ffffff;
}
/* ===== admin-components/cyber-security/taxii-stix/mitre-attack/mitre-attack-navbar/mitre-attack-navbar.component.css (scoped) ===== */
app-mitre-attack-navbar {
.container-fluid {
position: relative;
}
.row, .col-md-1, .col-md-2, .col-md-3 {
color: var(--primary--body--color);
}
.modal-dialog {
color: var(--primary--body--color);
}
.modal-content {
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.modal-header {
background-color: var(--body--background);
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-title, .modal-header h6 {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-body {
max-height: 70vh;
overflow-y: auto;
background-color: var(--body--background);
color: var(--primary--body--color);
}
.modal-footer {
border-top: none;
padding: 0;
}
.btn-close {
filter: invert(var(--invert--value, 0));
}
.form-label, .form-check-label {
color: var(--primary--body--color);
}
.form-control, .form-select {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.form-control:focus, .form-select:focus {
background-color: var(--body--background);
color: var(--primary--body--color);
border-color: var(--primary--body--color);
box-shadow: 0 0 0 0.25rem rgba(13,110,253,.15);
}
.form-check-input {
background-color: var(--body--background);
border: var(--cart--border);
cursor: pointer;
}
.form-check-input:checked {
background-color: var(--primary--body--color);
border-color: var(--primary--body--color);
}
.btn {
border-radius: var(--cart--border--radius);
}
.btn-primary {
height: 36px;
padding: 5px 22px !important;
font-size: 13px;
background-color: var(--primary--body--color);
border-color: var(--primary--body--color);
color: #fff;
box-shadow: var(--cart--box--shadow);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: var(--primary--body--color);
border-color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
}
.btn-secondary {
height: 36px;
padding: 5px 22px !important;
font-size: 13px;
background-color: var(--input--background);
border: var(--cart--border);
color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
opacity: var(--opacity--80);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
background-color: var(--input--background);
border: var(--cart--border);
color: var(--primary--body--color);
}
.card {
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
transition: all .2s ease;
}
.card:hover {
box-shadow: var(--cart--box--shadow);
}
.card-body {
padding: 1rem;
}
.alldevicelogs_settings {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 1rem;
padding: 0;
position: relative;
}
.alldevicelogs_settings:has(.dropdown-menu.show), .alldevicelogs_settings:focus-within {
z-index: 1400;
}
.alldevicelogs_settings > .d-flex {
gap: 8px !important;
}
.alldevicelogs_settings_item {
position: relative;
z-index: 300;
height: 36px;
margin-right: 0;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.alldevicelogs_settings_item:has(.dropdown-menu.show), .alldevicelogs_settings_item:focus-within {
z-index: 1300;
}
.alldevicelogs_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.alldevicelogs_settings_item i, .alldevicelogs_settings_item span {
color: var(--primary--body--color);
}
.alldevicelogs_settings_item i {
opacity: var(--opacity--50);
font-size: 13px;
}
.alldevicelogs_settings_item span {
opacity: var(--opacity--100);
font-size: 13px;
}
.filter_button {
color: var(--primary--body--color) !important;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 6px;
height: 100%;
font-size: 13px;
opacity: var(--opacity--100);
}
.custom-select-box {
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.position-relative {
position: relative;
}
.collection-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 280px;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
z-index: 9999;
max-height: 300px;
overflow-y: auto;
padding: 6px;
}
.collection-dropdown::-webkit-scrollbar, .dropdown_filter::-webkit-scrollbar {
width: 4px;
}
.collection-dropdown::-webkit-scrollbar-thumb, .dropdown_filter::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.collection-item {
padding: 7px 10px;
border-bottom: none;
border-radius: 7px;
background-color: transparent;
color: var(--primary--body--color);
font-size: 12.5px;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.collection-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.collection-item:hover {
background-color: var(--secondary--color);
color: #fff;
}
.collection-item label {
display: flex;
align-items: center;
width: 100%;
cursor: pointer;
margin: 0;
}
.collection-item input[type="checkbox"], .form-check-input {
width: 15px;
height: 15px;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 24%, transparent);
cursor: pointer;
}
.collection-item:hover span {
color: #fff;
}
.dropdown_filter {
background-color: var(--body--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
min-width: 600px;
max-width: 800px;
max-height: min(70vh, 420px);
overflow-y: auto;
color: var(--primary--body--color);
padding: 8px;
margin-top: 8px !important;
}
.dropdown_filter span, .dropdown_filter .form-check-label {
color: var(--primary--body--color);
font-size: 12px;
}
.dropdown_filter > span {
display: inline-flex;
align-items: center;
min-height: 24px;
font-weight: 700;
opacity: var(--opacity--80);
}
.dropdown_filter hr {
border-color: color-mix(in srgb, var(--primary--body--color) 12%, transparent);
opacity: 1;
}
.dropdown_filter .form-check {
min-height: 28px;
display: flex;
align-items: center;
gap: 6px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus, .close_btn:active {
outline: none !important;
}
.additional_div {
width: 188px;
height: 36px;
margin-bottom: .7rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
cursor: pointer;
transition: all .2s ease;
}
.additional_div:hover {
box-shadow: var(--cart--box--shadow);
}
.additional_div span {
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
}
.features_icon {
color: var(--primary--body--color);
margin-right: .3rem;
font-size: 13px;
}
@media (max-width: 720px) {
.alldevicelogs_settings, .alldevicelogs_settings > .d-flex {
width: 100%;
}
.alldevicelogs_settings_item {
max-width: 100%;
}
.custom-select-box {
max-width: 220px;
}
.dropdown_filter {
min-width: min(92vw, 600px);
max-width: 92vw;
}
}
}
/* ===== admin-components/cyber-security/taxii-stix/mitre-attack/mitre-attack.component.css (global) ===== */
app-mitre-attack .ag-body-viewport {
overflow-x: auto !important;
}
app-mitre-attack .ag-body-horizontal-scroll {
display: block !important;
}
app-mitre-attack .ag-header-viewport {
overflow-x: hidden !important;
}
app-mitre-attack .darkBlue-theme .tooltip_td, app-mitre-attack .darkBlue-theme .tooltip_th {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 8px;
}
app-mitre-attack .lightBlue-theme .tooltip_td, app-mitre-attack .lightBlue-theme .tooltip_th {
border: 1px solid var(--primary--body--color) !important;
}
app-mitre-attack .ag-floating-filter-input .ag-icon {
display: none !important;
}
app-mitre-attack .ag-filter-toolpanel-instance .ag-icon {
display: none !important;
}
app-mitre-attack .lightBlue-theme input[type="date"]::-webkit-calendar-picker-indicator, app-mitre-attack .lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
app-mitre-attack .darkBlue-theme input[type="date"]::-webkit-calendar-picker-indicator, app-mitre-attack .darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
app-mitre-attack .dark-theme input[type="date"]::-webkit-calendar-picker-indicator, app-mitre-attack .dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
app-mitre-attack input[type="date"]::-webkit-calendar-picker-indicator, app-mitre-attack input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.dark-theme #filterModal .modal-content, .darkBlue-theme #filterModal .modal-content {
border-radius: var(--mitre-filter-radius) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)) !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38) !important;
}
.dark-theme #filterModal .modal-header, .darkBlue-theme #filterModal .modal-header {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme #filterModal .modal-body form > .row > .form-group.clearfix {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme #filterModal .modal-body form > .row > .form-group.clearfix {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme #filterModal .modal-body form > .row > .col-6.form-group, .dark-theme #filterModal .form-group.clearfix [style*="width: 90px"], .darkBlue-theme #filterModal .modal-body form > .row > .col-6.form-group, .darkBlue-theme #filterModal .form-group.clearfix [style*="width: 90px"] {
border: none;
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme #filterModal .choose_select_filter_modal, .dark-theme #filterModal .form-control, .darkBlue-theme #filterModal .choose_select_filter_modal, .darkBlue-theme #filterModal .form-control {
border: none !important;
}
.dark-theme #filterModal select.choose_select_filter_modal, .darkBlue-theme #filterModal select.choose_select_filter_modal {
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
background-position:
calc(100% - 16px) 50%,
calc(100% - 11px) 50% !important;
background-size: 5px 5px, 5px 5px !important;
background-repeat: no-repeat !important;
color-scheme: dark;
}
.dark-theme #filterModal input[type="date"], .darkBlue-theme #filterModal input[type="date"] {
color-scheme: dark;
}
.dark-theme #filterModal input[type="date"]::-webkit-calendar-picker-indicator, .darkBlue-theme #filterModal input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1) brightness(1.15) !important;
opacity: 0.85;
}
.lightBlue-theme #filterModal .modal-content {
border-radius: var(--mitre-filter-radius) !important;
border: none !important;
background: linear-gradient(180deg, #f4f8fa, #fafafa) !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1) !important;
}
.lightBlue-theme #filterModal .modal-header {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme #filterModal .modal-body form > .row > .form-group.clearfix {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme #filterModal .modal-body form > .row > .col-6.form-group, .lightBlue-theme #filterModal .form-group.clearfix [style*="width: 90px"] {
border: none;
background-color: #ffffff;
}
.lightBlue-theme #filterModal .choose_select_filter_modal, .lightBlue-theme #filterModal .form-control {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/cyber-security/taxii-stix/mitre-attack/mitre-attack.component.css (scoped) ===== */
app-mitre-attack {
#dwh-table {
position: relative;
display: flex;
flex-direction: column;
min-height: calc(100vh - 160px);
}
.mitre-card-view {
flex: 1;
min-height: 0;
overflow: auto;
padding: 8px 4px 16px;
}
.mitre-card-view::-webkit-scrollbar {
width: 6px;
}
.mitre-card-view::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.mitre-card-empty {
min-height: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: color-mix(in srgb, var(--primary--body--color) 66%, transparent);
text-align: center;
}
.mitre-card-empty i {
font-size: 28px;
color: var(--secondary--color);
}
.predefined-rules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
padding: 16px 0 8px;
width: 100%;
}
.predefined-rule-card {
min-height: 270px;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
overflow: hidden;
transition: box-shadow 0.18s ease;
display: flex;
flex-direction: column;
cursor: pointer;
}
.predefined-rule-card:hover {
box-shadow: var(--cart--box--shadow), 0 2px 10px rgba(0, 0, 0, 0.1);
}
.rule-card-header {
padding: 10px 14px;
border-bottom: var(--cart--border);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
background-color: var(--body--background);
}
.rule-card-title {
margin: 0;
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: var(--opacity--80);
line-height: 1.4;
word-break: break-word;
flex: 1;
}
.rule-card-status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--cart--border--radius);
font-size: 10px;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.4px;
border: var(--cart--border);
background-color: var(--input--background);
color: var(--primary--body--color);
opacity: 0.75;
flex-shrink: 0;
}
.rule-card-status.status-stable {
background-color: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.35);
color: #22c55e;
opacity: 1;
}
.rule-card-status.status-test {
background-color: rgba(234, 179, 8, 0.12);
border-color: rgba(234, 179, 8, 0.35);
color: #ca8a04;
opacity: 1;
}
.rule-card-status.status-experimental {
background-color: rgba(249, 115, 22, 0.12);
border-color: rgba(249, 115, 22, 0.35);
color: #ea580c;
opacity: 1;
}
.rule-card-body {
padding: 10px 14px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
background-color: var(--body--background);
}
.rule-card-description {
margin: 0;
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.65;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rule-card-meta {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
padding-top: 8px;
border-top: var(--cart--border);
}
.meta-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--primary--body--color);
opacity: 0.62;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.meta-item i {
width: 13px;
text-align: center;
flex-shrink: 0;
color: var(--primary--body--color);
opacity: 0.5;
}
.meta-item strong {
font-weight: 600;
opacity: 1;
color: var(--primary--body--color);
}
.mono {
font-family: 'Courier New', monospace;
font-size: 11px;
opacity: 0.8;
color: var(--primary--body--color);
}
.rule-card-footer {
padding: 8px 14px;
border-top: var(--cart--border);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
background-color: var(--input--background);
}
.rule-card-footer .btn {
width: 100%;
min-width: 0;
font-size: 12px;
min-height: 30px;
padding: 6px 10px;
transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
border: var(--cart--border);
background-color: var(--body--background);
color: var(--primary--body--color);
font-weight: 600;
border-radius: var(--cart--border--radius);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
opacity: 0.8;
line-height: 1.35;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
text-align: center;
}
.rule-card-footer .btn i {
flex-shrink: 0;
}
.rule-card-footer .btn:hover {
background-color: var(--secondary--color);
color: var(--day--remain--color);
border-color: var(--secondary--color);
opacity: 1;
}
.rule-card-footer .btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 767px) {
.predefined-rules-grid {
grid-template-columns: 1fr;
}
.rule-card-footer {
grid-template-columns: 1fr;
}
}
.spinner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 30;
display: flex;
align-items: center;
justify-content: center;
}
.spinner-overlay .spinner-border {
width: 3rem;
height: 3rem;
color: var(--secondary--color);
}
.mitre-attack-container {
height: 100vh;
max-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
& {
--pagination-height: 54.67px;
--mitre-filter-radius: 12px;
--mitre-filter-surface-card: color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
--mitre-filter-border-soft: color-mix(in srgb, var(--primary--body--color) 16%, transparent);
--mitre-filter-border-subtle: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
--mitre-filter-text-muted: color-mix(in srgb, var(--primary--body--color) 62%, transparent);
--mitre-filter-accent-soft: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.mitre-attack-body {
padding: 20px !important;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.mitre-attack-grid {
width: 100%;
flex: 1;
overflow: hidden;
}
.mitre-attack-grid .ag-root.ag-layout-normal {
height: 100% !important;
}
.mitre-attack-grid .ag-root {
height: 100% !important;
}
.page-header {
padding: 0 20px 10px 20px;
border-bottom: 1px solid var(--cart--border);
color: var(--primary--body--color);
}
#tooltip_all_filter {
display: none;
padding: 20px;
min-width: 320px;
max-width: 600px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
z-index: 9999;
transition: .2s all ease;
}
.tooltip_table {
background-color: var(--body--background);
margin-bottom: 0;
}
.tooltip_th {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.pagination-info {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.65;
}
.pagination-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
min-height: var(--pagination-height);
padding-top: 8px;
padding-bottom: 8px;
padding-left: 24px;
padding-right: 24px;
background-color: var(--body--background);
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
box-shadow: 0 -10px 24px color-mix(in srgb, #000 8%, transparent);
}
.pagination-shell {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 25;
}
.pagination-spacer {
height: calc(var(--pagination-height) + 8px);
}
.pagination-controls {
display: flex;
align-items: center;
gap: 4px;
}
.pag-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
padding: 4px 9px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 4px !important;
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 12px;
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pag-btn:hover:not(:disabled):not(.pag-btn--active) {
background-color: color-mix(in srgb, var(--secondary--color) 14%, var(--input--background));
color: var(--primary--body--color);
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
}
.pag-btn--active {
background-color: var(--secondary--color);
color: var(--day--remain--color);
border-color: var(--secondary--color);
cursor: default;
font-weight: 600;
}
.pag-btn:disabled {
background-color: var(--input--background);
color: color-mix(in srgb, var(--primary--body--color) 35%, transparent);
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
opacity: 1;
cursor: not-allowed;
}
.pag-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
padding: 4px 9px;
font-size: 12px;
line-height: 1.5;
color: color-mix(in srgb, var(--primary--body--color) 35%, transparent);
user-select: none;
}
@media (max-width: 768px) {
.mitre-card-view {
padding: 6px 0 12px;
}
.predefined-rules-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.rule-card-footer {
grid-template-columns: 1fr;
}
.pagination-bar {
min-height: auto;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
}
}
.tooltip_th {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
font-size: 12px;
}
.tooltip_td {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
font-size: 12px;
vertical-align: top;
}
.tooltip_description {
padding: 10px;
background-color: var(--body--background);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
max-height: 400px;
overflow-y: auto;
line-height: 1.6;
font-size: 12px;
}
.tooltip_close_button {
color: var(--primary--body--color);
cursor: pointer;
}
.tooltip_td a {
word-break: break-all;
}
.modal-dialog {
max-width: 700px;
}
.filter-dwh-modal {
width: 700px;
}
.confirm_button {
height: 36px;
font-size: 13px;
padding: 5px 22px !important;
color:var(--primary--sidebar--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.confirm_button:hover {
opacity: 1;
}
.cancel_button {
height: 36px;
font-size: 13px;
padding: 5px 22px !important;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.cancel_button:hover {
opacity: 1;
}
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: var(--secondary--color);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--secondary--color);
}
input:checked + .slider:before {
transform: translateX(18px);
}
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.new_filter_span {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.select_arrow {
position: relative;
}
.select_arrow select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 25px;
}
.select_arrow::after {
content: '\f078';
font-family: var(--bs--body--font-family);
font-weight: 900;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--primary--body--color);
font-size: 10px;
}
.modal-content {
background-color: var(--body--background) !important;
height: auto;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
border-radius: var(--cart--border--radius) !important;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.modal-header {
border-bottom: var(--cart--border);
margin-top: .2rem;
box-shadow: var(--cart--box--shadow);
}
.modal-header h6 {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-footer {
border-top: none;
padding: 0px;
}
.additional_header {
color: var(--primary--body--color);
}
.additional_div {
margin-bottom: 0.7rem;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
padding: 3px;
text-align: center;
cursor: pointer;
width: 188px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
}
.additional_div span {
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
}
.features_icon {
color: var(--primary--body--color);
margin-right: .3rem;
font-size: 13px;
}
.form-label {
color: var(--primary--body--color) !important;
opacity: 1 !important;
font-size: 13px;
font-weight: 500;
margin-bottom: 0.5rem;
display: block;
}
.modal-body .form-label {
color: var(--primary--body--color) !important;
opacity: 1 !important;
}
.form-control, .form-select {
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius);
height: 36px;
font-size: 13px;
}
.form-control:focus, .form-select:focus {
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
input[type="date"], input[type="time"] {
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius);
}
input[type="date"]:focus, input[type="time"]:focus {
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.form-control::placeholder {
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.form-check-input {
background-color: var(--input--background);
border: var(--cart--border);
cursor: pointer;
}
.form-check-input:checked {
background-color: var(--secondary--color);
border-color: var(--secondary--color);
}
.form-check-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
cursor: pointer;
font-size: 13px;
}
.btn {
height: 36px;
font-size: 13px;
padding: 5px 22px;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
}
.btn:hover {
opacity: 1;
}
.btn:focus {
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
}
.btn-danger {
background-color: #dc3545;
border-color: #dc3545;
color: white;
opacity: 1;
}
.btn-danger:hover {
background-color: #c82333;
border-color: #bd2130;
color: white;
}
.card {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.card-body {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.oriana-button {
height: 36px;
font-size: 13px;
padding: 5px 22px !important;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
}
.oriana-dropdown {
cursor: pointer;
}
.oriana-button[disabled] {
opacity: .5;
}
.oriana-button:active {
height: 36px;
font-size: 13px;
padding: 5px 22px !important;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
}
.filter-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
cursor: pointer;
padding: 0px;
margin-top: .5rem;
border: none;
outline: none;
box-shadow: none;
background: transparent;
display: inline-flex;
align-items: center;
white-space: nowrap;
height: auto;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button i {
color: var(--primary--body--color) !important;
cursor: pointer;
}
.remove {
color: var(--primary--body--color) !important;
cursor: pointer;
}
.input_div {
float: left;
width: 50%;
position: relative;
}
.contain_div {
float: left;
width: calc(45% - .2rem);
position: relative;
margin-left: .2rem;
}
.remove_div {
float: left;
width: calc(5% - .3rem);
position: relative;
margin-top: 0.4rem;
cursor: pointer;
margin-left: .3rem;
}
.choose_select_filter_modal {
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
height: 36px;
font-size: 13px;
}
select.choose_select_filter_modal {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
padding-right: 2.25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.filter-clear-button {
color: var(--primary--body--color) !important;
cursor: pointer;
}
.filter-clear-button:active {
border: none;
}
.filter-clear-button:focus {
border: none;
}
.new_filter {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-body {
max-height: 70vh;
overflow-y: auto;
background-color: var(--body--background);
color: var(--primary--body--color);
padding: 1rem;
}
.filter-div {
float: left;
}
.custom-select {
position: relative;
width: 250px;
cursor: pointer;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
}
.selected {
display: flex;
justify-content: space-between;
}
.options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
z-index: 9999;
max-height: 200px;
overflow-y: auto;
}
.option {
padding: 8px;
display: flex;
justify-content: space-between;
font-size: 13.5px;
}
.option:hover {
background-color: var(--body--background);
}
.left {
font-size: 11.5px;
}
.right {
font-size: 11.5px;
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: -5px;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.dropdown-menu-use-template {
background: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.dropdown-menu-use-template span {
cursor: pointer;
color: var(--primary--body--color);
}
.dropdown-menu-use-template span:hover {
background-color: var(--secondary--color);
color: var(--day--remain--color);
}
@media only screen and (max-width: 950px) {
.filter-dwh-modal {
width: auto !important;
}
}
@media (max-width: 576px) {
.filter-button {
padding: 0px;
}
}
@media (max-width: 500px) {
.bi-x-lg, .bi-search {
display: none;
}
}
@media (max-width: 412px) {
.row_main .col-6 {
width: 100%;
}
}
#filterModal .filter-dwh-modal {
width: min(760px, 96vw);
max-width: min(760px, 96vw);
}
#filterModal .modal-content {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: var(--mitre-filter-radius) !important;
box-shadow: var(--cart--box--shadow), 0 18px 42px rgba(0, 0, 0, 0.15) !important;
color: var(--primary--body--color);
overflow: hidden !important;
}
#filterModal.modal.right .modal-content {
border-radius: var(--mitre-filter-radius) !important;
}
#filterModal .modal-header {
position: sticky;
top: 0;
z-index: 10;
margin-top: 0;
padding: 16px 18px !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
box-shadow: none;
}
#filterModal .modal-header h6 {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
#filterModal .close_btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
background-color: transparent;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
transition: transform 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}
#filterModal .modal-body {
max-height: calc(100vh - 220px);
overflow-y: auto;
padding: 16px;
background-color: var(--body--background);
}
#filterModal .modal-body::-webkit-scrollbar {
width: 4px;
}
#filterModal .modal-body::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
#filterModal .modal-body form > .row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
}
#filterModal .modal-body form > .row > .col-6 {
width: 100%;
padding: 0;
}
#filterModal .modal-body form > .row > .col-6.form-group {
min-height: 76px;
padding: 12px;
border: 1px solid var(--mitre-filter-border-subtle);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
}
#filterModal .form-label, #filterModal .label-header {
display: block;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
font-size: 12.5px;
font-weight: 650;
}
#filterModal .choose_select_filter_modal, #filterModal .form-control, #filterModal select.choose_select_filter_modal {
height: 36px !important;
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#filterModal .choose_select_filter_modal::placeholder, #filterModal .form-control::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
#filterModal .choose_select_filter_modal:focus, #filterModal .form-control:focus, #filterModal select.choose_select_filter_modal:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
#filterModal .new_filter {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 0 !important;
padding: 10px 14px;
border: 1px solid var(--mitre-filter-border-soft);
border-radius: 12px 12px 0 0;
background: color-mix(in srgb, var(--input--background) 76%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 700;
opacity: 0.88;
}
#filterModal .modal-body form > .row > .form-group.clearfix {
grid-column: 1 / -1;
padding: 14px;
border: 1px solid var(--mitre-filter-border-soft);
border-radius: 12px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
var(--mitre-filter-surface-card);
box-shadow: var(--cart--box--shadow);
overflow: visible;
}
#filterModal .modal-body form > .row > .new_filter + .form-group.clearfix {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: -12px !important;
}
#filterModal .form-group.clearfix > ng-container > .d-flex, #filterModal .form-group.clearfix .d-flex.align-items-center.mb-2 {
flex-wrap: nowrap;
gap: 10px !important;
margin-bottom: 0 !important;
width: 100%;
}
#filterModal .form-group.clearfix .log-input, #filterModal .form-group.clearfix .log-input + div, #filterModal .form-group.clearfix .log-input ~ div {
min-width: 0;
flex-shrink: 0;
}
#filterModal .form-group.clearfix [style*="width:150px"] {
width: 150px !important;
}
#filterModal .form-group.clearfix [style*="width: 80px"] {
width: 80px !important;
}
#filterModal .form-group.clearfix [style*="width: 90px"] {
width: 90px !important;
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
border: 1px solid var(--mitre-filter-border-subtle);
}
#filterModal .switch {
width: 30px !important;
height: 18px !important;
}
#filterModal .slider {
background-color: color-mix(in srgb, var(--primary--body--color) 22%, transparent);
}
#filterModal .switch input:not(:checked) + .slider {
background-color: color-mix(in srgb, var(--primary--body--color) 22%, transparent);
}
#filterModal .switch input:not(:checked) + .slider:before {
transform: translateX(0);
}
#filterModal .switch input:checked + .slider {
background-color: var(--secondary--color);
}
#filterModal .slider:before {
width: 12px;
height: 12px;
left: 3px;
bottom: 3px;
}
#filterModal input:checked + .slider:before {
transform: translateX(12px);
}
#filterModal .remove {
flex-shrink: 0;
width: 32px;
height: 32px;
padding: 7px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
#filterModal .remove:hover {
background-color: rgba(248, 81, 73, 0.14);
color: #f85149 !important;
opacity: 1;
}
#filterModal .filter-button {
height: 36px;
padding: 0 14px;
margin-top: 0;
border: 1px dashed color-mix(in srgb, var(--primary--body--color) 22%, transparent);
border-radius: 8px;
background-color: transparent;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
box-shadow: none;
gap: 6px;
transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
#filterModal .filter-button:hover {
opacity: 1 !important;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-color: color-mix(in srgb, var(--secondary--color) 32%, transparent);
}
#filterModal .new_filter_span {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 13px;
}
#filterModal form > .d-flex.justify-content-between {
position: sticky;
bottom: -16px;
z-index: 10;
margin: 16px -16px -16px !important;
padding: 12px 18px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 80%, transparent),
var(--body--background));
border-top: 1px solid var(--mitre-filter-border-subtle);
}
#filterModal .confirm_button, #filterModal .cancel_button {
height: 36px;
padding: 0 16px !important;
border-radius: 8px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
#filterModal .confirm_button:hover, #filterModal .cancel_button:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
@media (max-width: 760px) {
#filterModal .modal-body form > .row {
grid-template-columns: 1fr;
}
#filterModal .modal-body form > .row > .new_filter, #filterModal .modal-body form > .row > .form-group.clearfix {
grid-column: 1;
}
#filterModal .form-group.clearfix [style*="width:150px"], #filterModal .form-group.clearfix [style*="width: 80px"], #filterModal .form-group.clearfix [style*="width: 90px"] {
width: 100% !important;
}
#filterModal .form-group.clearfix .d-flex.align-items-center.mb-2 {
flex-wrap: wrap;
}
#filterModal .form-group.clearfix .d-flex.align-items-center.mb-2 > div {
flex: 1 1 100%;
}
#filterModal form > .d-flex.justify-content-between > div {
width: 100%;
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
}
}
/* ===== admin-components/cyber-security/taxii-stix/taxii-stix.component.css (scoped) ===== */
app-taxii-stix {
.taxii-stix-container {
padding: 10px 0;
}
.page-header {
padding: 0 20px 10px 20px;
border-bottom: 1px solid var(--cart--border);
color: var(--primary--body--color);
}
}
/* ===== admin-components/cyber-security/threat-intel/modals/threat-intel-export-edit-modal/threat-intel-export-edit-modal.component.css (scoped) ===== */
app-threat-intel-export-edit-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-confirm-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-confirm-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-confirm-button:disabled {
opacity: var(--opacity--50);
cursor: default;
}
.oriana-confirm-button.tie-save-btn {
background-color: var(--secondary--color);
border-color: var(--secondary--color);
color: var(--device--flag-link--color);
opacity: 1;
}
.tie-section {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
padding: 14px 16px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
margin-bottom: 12px;
}
.tie-section:last-child {
margin-bottom: 0;
}
.tie-section-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 9px;
border-bottom: var(--cart--border);
}
.tie-section-head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--cart--border--radius);
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.tie-section-head span {
font-size: 13px;
font-weight: 700;
}
.tie-field {
margin-bottom: 12px;
}
.tie-field-last {
margin-bottom: 0;
}
.tie-label {
display: block;
font-size: 12.5px;
font-weight: 600;
margin-bottom: 6px;
}
.tie-input {
width: 100%;
height: 36px;
padding: 0 10px;
color: var(--primary--body--color);
font-size: 13px;
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
outline: none;
}
.tie-input option {
background: var(--input--background);
color: var(--primary--body--color);
}
.tie-input::placeholder {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 12px;
}
.tie-hint {
display: block;
font-size: 11px;
color: var(--primary--body--color);
opacity: var(--opacity--50);
margin-top: 4px;
}
.tie-hint.text-danger {
opacity: 1;
}
.tie-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.tie-check-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.tie-check {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
cursor: pointer;
}
.tie-toggle-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 12px;
border-radius: var(--cart--border--radius);
border: var(--cart--border);
background-color: var(--input--background);
}
.tie-toggle-label {
font-size: 12.5px;
font-weight: 600;
}
.tie-range {
width: 100%;
accent-color: var(--secondary--color);
}
.tie-chip-input {
min-height: 38px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 5px 10px;
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.tie-chip-pill {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 32%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
color: var(--primary--body--color);
font-size: 12px;
line-height: 1.2;
}
.tie-chip-x {
width: 16px;
height: 16px;
padding: 0;
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: var(--opacity--50);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
line-height: 1;
}
.tie-chip-x:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.tie-chip-text {
flex: 1;
min-width: 90px;
border: none;
outline: none;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
}
}
/* ===== admin-components/cyber-security/threat-intel/modals/threat-intel-export-fetch-logs-modal/threat-intel-export-fetch-logs-modal.component.css (scoped) ===== */
app-threat-intel-export-fetch-logs-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-confirm-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-confirm-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-confirm-button:disabled {
opacity: var(--opacity--50);
cursor: default;
}
.tifl-summary-line {
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
}
.tifl-table-wrap {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
overflow: auto;
margin-bottom: 14px;
}
.tifl-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
color: var(--primary--body--color);
}
.tifl-table th {
text-align: left;
padding: 8px 10px;
font-weight: 700;
font-size: 12px;
background: var(--input--background);
border-bottom: var(--cart--border);
white-space: nowrap;
}
.tifl-table td {
padding: 7px 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
vertical-align: top;
white-space: nowrap;
}
.tifl-mono {
font-family: monospace;
font-size: 12px;
}
.tifl-query {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
}
.tifl-empty {
text-align: center;
opacity: var(--opacity--50);
padding: 18px 10px;
}
.tifl-row-err {
background: color-mix(in srgb, var(--bs-danger) 8%, transparent);
}
.tifl-status {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
font-size: 11.5px;
font-weight: 700;
}
.tifl-status-ok {
background: color-mix(in srgb, var(--bs-success) 15%, transparent);
color: var(--bs-success);
}
.tifl-status-notmod {
background: color-mix(in srgb, var(--primary--body--color) 10%, transparent);
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.tifl-status-err {
background: color-mix(in srgb, var(--bs-danger) 15%, transparent);
color: var(--bs-danger);
}
.tifl-toolbar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tifl-toolbar-spacer {
flex: 1;
}
.tifl-toolbar-btn {
height: 30px;
padding: 2px 12px;
font-size: 12px;
}
.tifl-page-text {
font-size: 12px;
white-space: nowrap;
}
}
/* ===== admin-components/cyber-security/threat-intel/modals/threat-intel-export-preview-modal/threat-intel-export-preview-modal.component.css (scoped) ===== */
app-threat-intel-export-preview-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-confirm-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-confirm-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.tip-meta-row {
display: flex;
gap: 18px;
flex-wrap: wrap;
font-size: 12.5px;
margin-bottom: 12px;
}
.tip-meta-row b {
font-weight: 700;
}
.tip-pre {
max-height: 46vh;
overflow: auto;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
padding: 10px;
font-size: 12px;
color: var(--primary--body--color);
white-space: pre;
margin: 0;
}
}
/* ===== admin-components/cyber-security/threat-intel/modals/threat-intel-export-urls-modal/threat-intel-export-urls-modal.component.css (scoped) ===== */
app-threat-intel-export-urls-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-confirm-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-confirm-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.tiu-meta-row {
display: flex;
gap: 18px;
flex-wrap: wrap;
font-size: 12.5px;
margin-bottom: 12px;
}
.tiu-meta-row b {
font-weight: 700;
}
.tiu-url-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: var(--cart--border--radius);
border: var(--cart--border);
background-color: var(--input--background);
margin-bottom: 6px;
}
.tiu-url-label {
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.tiu-url-text {
flex: 1;
font-family: monospace;
font-size: 12px;
color: var(--primary--body--color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
}
.tiu-url-copy {
border: none;
background: transparent;
color: var(--primary--body--color);
opacity: var(--opacity--50);
cursor: pointer;
font-size: 13px;
padding: 4px 6px;
border-radius: var(--cart--border--radius);
flex-shrink: 0;
}
.tiu-url-copy:hover {
opacity: 1;
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.tiu-hint {
display: block;
font-size: 11px;
color: var(--primary--body--color);
opacity: var(--opacity--50);
margin-top: 4px;
}
.tiu-copyall-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin: 8px 0 6px;
}
.tiu-hint-inline {
margin: 0;
}
.tiu-copyall-btn {
flex-shrink: 0;
}
}
/* ===== admin-components/cyber-security/threat-intel/modals/threat-intel-feed-settings-modal/threat-intel-feed-settings-modal.component.css (scoped) ===== */
app-threat-intel-feed-settings-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-confirm-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-confirm-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-confirm-button:disabled {
opacity: var(--opacity--50);
cursor: default;
}
.oriana-confirm-button.tifs-save-btn {
background-color: var(--secondary--color);
border-color: var(--secondary--color);
color: var(--device--flag-link--color);
opacity: 1;
}
.tifs-label {
display: block;
font-size: 12.5px;
font-weight: 600;
margin-top: 10px;
margin-bottom: 4px;
}
.tifs-input {
width: 100%;
height: 34px;
padding: 0 10px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
outline: none;
}
.tifs-input option {
background: var(--input--background);
color: var(--primary--body--color);
}
.tifs-hint {
font-size: 11.5px;
color: var(--primary--body--color);
opacity: var(--opacity--50);
margin-top: 2px;
}
.tifs-hint.text-danger {
opacity: 1;
}
.tifs-row {
display: flex;
gap: 14px;
margin-top: 8px;
flex-wrap: wrap;
}
.tifs-types {
margin-top: 4px;
}
.tifs-check {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
cursor: pointer;
}
.tifs-advanced-toggle {
margin-top: 12px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.tifs-advanced-toggle:hover {
opacity: 1;
}
.tifs-footer {
display: flex;
width: 100%;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.tifs-footer-spacer {
flex: 1;
}
}
/* ===== admin-components/cyber-security/threat-intel/threat-intel-export/threat-intel-export.component.css (scoped) ===== */
app-threat-intel-export {
.threat_intel_navbar {
margin-bottom: 1rem;
position: relative;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.threat_intel_navbar_item {
position: relative;
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, var(--sidebar--hover--color) 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
}
.threat_intel_navbar_item:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 2px 10px color-mix(in srgb, var(--secondary--color) 18%, transparent);
transform: translateY(-1px);
}
.tie-table-wrap {
border: 1px solid color-mix(in srgb, var(--secondary--color) 20%, transparent);
border-radius: 8px;
overflow: auto;
}
.tie-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--primary--body--color);
}
.tie-table th {
text-align: left;
padding: 10px 12px;
font-weight: 700;
font-size: 12.5px;
background: var(--input--background);
border-bottom: 1px solid color-mix(in srgb, var(--secondary--color) 20%, transparent);
white-space: nowrap;
}
.tie-table td {
padding: 10px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--secondary--color) 12%, transparent);
vertical-align: top;
}
.tie-table tbody tr:hover {
background: color-mix(in srgb, var(--secondary--color) 5%, transparent);
}
.tie-name {
font-weight: 600;
}
.tie-desc {
font-size: 11.5px;
opacity: 0.55;
margin-top: 2px;
}
.tie-empty {
text-align: center;
opacity: 0.55;
padding: 24px 12px;
}
.tie-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 10px;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
}
.tie-badge-ip {
background: color-mix(in srgb, var(--primary--button--background--color) 18%, transparent);
color: var(--primary--button--background--color);
}
.tie-badge-domain {
background: color-mix(in srgb, var(--bs-success) 18%, transparent);
color: var(--bs-success);
}
.tie-badge-url {
background: color-mix(in srgb, var(--bs-orange) 18%, transparent);
color: var(--bs-orange);
}
.tie-chip {
display: inline-block;
padding: 2px 8px;
margin: 1px 3px 1px 0;
border-radius: 10px;
font-size: 11px;
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color);
white-space: nowrap;
}
.tie-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
cursor: pointer;
}
.tie-switch input {
opacity: 0;
width: 0;
height: 0;
}
.tie-switch span {
position: absolute;
inset: 0;
border-radius: 20px;
background: color-mix(in srgb, var(--primary--body--color) 25%, transparent);
transition: background 0.15s ease;
}
.tie-switch span::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
left: 3px;
top: 3px;
border-radius: 50%;
background: var(--sidebar--hover--color);
transition: transform 0.15s ease;
}
.tie-switch input:checked+span {
background: var(--bs-success);
}
.tie-switch input:checked+span::before {
transform: translateX(16px);
}
.tie-switch-disabled {
opacity: 0.5;
cursor: default;
}
.tie-actions {
white-space: nowrap;
}
.tie-icon-btn {
border: none;
background: transparent;
color: var(--primary--body--color);
opacity: 0.6;
cursor: pointer;
font-size: 13px;
padding: 4px 6px;
border-radius: 5px;
transition: opacity 0.15s ease, background 0.15s ease;
}
.tie-icon-btn:hover {
opacity: 1;
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.tie-icon-danger:hover {
color: var(--bs-danger);
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
}
.spinner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 30;
display: flex;
align-items: center;
justify-content: center;
}
}
/* ===== admin-components/cyber-security/threat-intel/threat-intel.component.css (scoped) ===== */
app-threat-intel {
.ti-tabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
border-bottom: 1px solid color-mix(in srgb, var(--secondary--color) 20%, transparent);
}
.ti-tab {
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: var(--primary--body--color);
opacity: 0.6;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: opacity 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.ti-tab:hover {
opacity: 0.9;
}
.ti-tab-active {
opacity: 1;
border-bottom-color: var(--secondary--color);
}
.ti-minc-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: var(--input--background);
}
.ti-minc-label {
font-size: 12px;
font-weight: 600;
color: var(--primary--body--color);
opacity: 0.7;
white-space: nowrap;
}
.ti-minc-select {
border: none;
outline: none;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
}
.ti-minc-select option {
background: var(--input--background);
color: var(--primary--body--color);
}
.ti-type-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.ti-type-chip {
padding: 4px 12px;
border-radius: 14px;
font-size: 12.5px;
font-weight: 600;
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
background: var(--input--background);
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ti-type-chip:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
}
.ti-type-chip-active {
background: var(--secondary--color);
border-color: var(--secondary--color);
color: var(--device--flag-link--color);
}
.ti-type-count {
font-weight: 400;
opacity: 0.8;
}
.threat_intel_navbar {
margin-bottom: 1rem;
position: relative;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.threat_intel_navbar_item {
position: relative;
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, var(--sidebar--hover--color) 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
}
.threat_intel_navbar_item:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 2px 10px color-mix(in srgb, var(--secondary--color) 18%, transparent);
transform: translateY(-1px);
}
.ti-search-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 6px 0 12px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: var(--input--background);
margin-left: auto;
}
.ti-search-icon {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.ti-search-input {
border: none;
outline: none;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
width: 220px;
min-width: 0;
}
.ti-search-input::placeholder {
color: var(--primary--body--color);
opacity: 0.35;
}
.ti-search-clear {
border: none;
background: transparent;
color: var(--primary--body--color);
opacity: 0.45;
cursor: pointer;
font-size: 12px;
padding: 4px;
display: inline-flex;
}
.ti-search-clear:hover {
opacity: 1;
}
.ti-search-btn {
height: 26px;
padding: 0 12px;
border: none;
border-radius: 6px;
background: var(--secondary--color);
color: var(--device--flag-link--color);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s ease;
}
.ti-search-btn:hover {
opacity: 0.88;
}
.label-header-trigger {
font-size: 14.5px;
color: var(--primary--body--color);
}
.ti-sync-status {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
opacity: 0.85;
}
.ti-status-ok {
color: var(--bs-success);
}
.ti-status-err {
color: var(--bs-danger);
}
.spinner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 30;
display: flex;
align-items: center;
justify-content: center;
}
}
/* ===== admin-components/cyber-security/triggered-correlation/correlation-detail/correlation-detail.component.css (global) ===== */
.dark-theme .modal-content, .darkBlue-theme .modal-content {
border-radius: var(--correlation-modal-radius) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.dark-theme .modal-header, .darkBlue-theme .modal-header {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .section-card, .dark-theme .panel-card, .dark-theme .log-card {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .section-card, .darkBlue-theme .panel-card, .darkBlue-theme .log-card {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .section-header, .dark-theme .panel-card-header, .dark-theme .log-card-header, .darkBlue-theme .section-header, .darkBlue-theme .panel-card-header, .darkBlue-theme .log-card-header {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .meta-icon, .dark-theme .alert-state-card, .dark-theme .detail-extracted-card, .dark-theme .mini-log-wrap, .dark-theme .reason-text, .dark-theme .chain-card, .dark-theme .pill, .dark-theme .copy-btn-sm, .dark-theme .btn-close-modal, .darkBlue-theme .meta-icon, .darkBlue-theme .alert-state-card, .darkBlue-theme .detail-extracted-card, .darkBlue-theme .mini-log-wrap, .darkBlue-theme .reason-text, .darkBlue-theme .chain-card, .darkBlue-theme .pill, .darkBlue-theme .copy-btn-sm, .darkBlue-theme .btn-close-modal {
border: none;
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme .modal-content {
border-radius: var(--correlation-modal-radius) !important;
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .modal-header {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .section-card, .lightBlue-theme .panel-card, .lightBlue-theme .log-card {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .meta-strip, .lightBlue-theme .section-header, .lightBlue-theme .panel-card-header, .lightBlue-theme .log-card-header, .lightBlue-theme .td-toggle-btn {
background-color: #f0f4f6;
}
.lightBlue-theme .meta-icon, .lightBlue-theme .alert-state-card, .lightBlue-theme .detail-extracted-card, .lightBlue-theme .mini-log-wrap, .lightBlue-theme .reason-text, .lightBlue-theme .chain-card, .lightBlue-theme .pill, .lightBlue-theme .copy-btn-sm, .lightBlue-theme .btn-close-modal {
border: none;
background-color: #ffffff;
}
/* ===== admin-components/cyber-security/triggered-correlation/correlation-detail/correlation-detail.component.css (scoped) ===== */
app-correlation-detail {
& {
--correlation-modal-radius: 12px;
--detail-surface: var(--body--background);
--detail-surface-alt: color-mix(in srgb, var(--input--background) 88%, var(--body--background) 12%);
--detail-surface-card: color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
--detail-surface-hover: color-mix(in srgb, var(--input--background) 82%, var(--body--background) 18%);
--detail-border-soft: color-mix(in srgb, var(--primary--body--color) 16%, transparent);
--detail-border-subtle: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
--detail-text: var(--primary--body--color);
--detail-text-soft: color-mix(in srgb, var(--primary--body--color) 82%, transparent);
--detail-text-muted: color-mix(in srgb, var(--primary--body--color) 62%, transparent);
--detail-accent: var(--secondary--color);
--detail-accent-soft: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.modal-dialog {
width: min(1120px, 100vw);
max-width: min(1120px, 100vw);
}
.modal-content {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: var(--correlation-modal-radius) !important;
box-shadow: var(--cart--box--shadow), 0 18px 42px rgba(0, 0, 0, 0.15);
color: var(--detail-text);
height: auto;
overflow: hidden;
}
.modal.right .modal-content {
border-radius: var(--correlation-modal-radius) !important;
}
.loading-overlay {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.modal-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
}
.header-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.header-icon-wrap {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: var(--detail-accent-soft);
color: var(--detail-accent);
font-size: 14px;
flex-shrink: 0;
}
.header-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.header-title {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--detail-text);
letter-spacing: 0;
opacity: 0.9;
}
.type-badge, .group-count {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
font-size: 11.5px;
padding: 2px 8px;
border-radius: 999px;
background: var(--detail-accent-soft);
border: 1px solid color-mix(in srgb, var(--secondary--color) 28%, transparent);
color: var(--detail-text);
font-weight: 600;
}
.header-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.header-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
background-color: transparent;
border-radius: 8px;
color: var(--detail-text);
cursor: pointer;
opacity: 0.7;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.header-action-btn:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.modal-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: none;
background-color: transparent;
border-radius: 0;
color: var(--detail-text);
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, background-color 0.18s ease;
}
.meta-strip {
display: flex;
overflow-x: auto;
background: color-mix(in srgb, var(--input--background) 70%, var(--body--background) 30%);
border-bottom: 1px solid var(--detail-border-subtle);
scrollbar-width: none;
padding: 0 16px;
}
.meta-strip::-webkit-scrollbar {
display: none;
}
.meta-card {
flex: 1;
min-width: 140px;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-right: 1px solid var(--detail-border-subtle);
}
.meta-card:last-child {
border-right: none;
}
.meta-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: var(--detail-accent-soft);
color: var(--detail-text);
font-size: 13px;
flex-shrink: 0;
}
.meta-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.meta-label {
font-size: 10.5px;
color: var(--detail-text-muted);
text-transform: uppercase;
letter-spacing: 0;
font-weight: 650;
}
.meta-value {
font-size: 12.5px;
color: var(--detail-text);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-body {
padding: 16px;
overflow-y: auto;
max-height: calc(100vh - 280px);
}
.modal-body::-webkit-scrollbar, .field-group-card .field-rows::-webkit-scrollbar, .chain-wrap::-webkit-scrollbar, .log-content::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.modal-body::-webkit-scrollbar-thumb, .field-group-card .field-rows::-webkit-scrollbar-thumb, .chain-wrap::-webkit-scrollbar-thumb, .log-content::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 14px;
align-items: start;
}
.section-card, .panel-card, .log-card {
border: 1px solid var(--detail-border-soft);
border-radius: 12px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
var(--detail-surface-card);
box-shadow: var(--cart--box--shadow);
margin-bottom: 12px;
overflow: hidden;
}
.section-header, .panel-card-header, .log-card-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
font-size: 12.5px;
font-weight: 700;
color: var(--detail-text);
background: color-mix(in srgb, var(--input--background) 76%, transparent);
border-bottom: 1px solid var(--detail-border-subtle);
letter-spacing: 0;
opacity: 0.88;
}
.group-count {
margin-left: auto;
}
.detail-alert-body {
display: grid;
gap: 12px;
padding: 14px;
}
.alert-state-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--detail-border-subtle);
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
}
.alert-state-card.alert-on {
background: rgba(248, 81, 73, 0.12);
border-color: rgba(248, 81, 73, 0.28);
}
.alert-state-card.alert-off {
background: rgba(46, 160, 67, 0.12);
border-color: rgba(46, 160, 67, 0.28);
}
.alert-state-label {
font-size: 11px;
letter-spacing: 0;
text-transform: uppercase;
color: var(--detail-text-muted);
font-weight: 700;
}
.alert-state-value {
font-size: 18px;
font-weight: 700;
color: var(--detail-text);
}
.detail-extracted-card, .mini-log-wrap, .reason-text {
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
border: 1px solid var(--detail-border-subtle);
border-radius: 10px;
}
.detail-extracted-card {
padding: 12px;
}
.detail-extracted-title {
margin-bottom: 10px;
font-size: 12px;
font-weight: 700;
color: var(--detail-text-muted);
}
.detail-extracted-grid {
display: grid;
gap: 8px;
}
.detail-extracted-row {
display: grid;
grid-template-columns: minmax(90px, 120px) 1fr;
gap: 10px;
align-items: start;
padding: 8px 0;
border-bottom: 1px solid var(--detail-border-subtle);
}
.detail-extracted-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.detail-extracted-key {
color: var(--detail-text-muted);
font-size: 12px;
font-weight: 650;
word-break: break-word;
}
.detail-extracted-value {
color: var(--detail-text);
font-size: 12px;
word-break: break-word;
}
.info-rows, .field-rows, .tech-fields {
padding: 4px 0;
}
.info-row, .field-row, .tech-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 14px;
border-bottom: 1px solid var(--detail-border-subtle);
font-size: 12px;
}
.info-row:last-child, .field-row:last-child, .tech-row:last-child {
border-bottom: none;
}
.field-row {
gap: 8px;
transition: background-color 0.15s ease;
}
.field-row:hover {
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
}
.info-key, .field-key, .tech-key {
flex-shrink: 0;
width: 130px;
color: var(--detail-text-muted);
font-weight: 650;
padding-top: 2px;
}
.info-key {
width: 120px;
}
.tech-key {
width: 100px;
}
.info-val, .field-val-text, .text-val {
color: var(--detail-text);
word-break: break-word;
}
.field-group-card {
display: flex;
flex-direction: column;
}
.field-group-card .field-rows {
max-height: min(42vh, 520px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-gutter: stable;
}
.field-val-wrap {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 6px;
flex: 1;
min-width: 0;
}
.tech-row {
align-items: center;
justify-content: space-between;
gap: 8px;
}
.tech-val {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: flex-end;
flex-wrap: wrap;
}
.empty-tech {
padding: 14px;
font-size: 12px;
color: var(--detail-text-muted);
text-align: center;
}
.level-badge, .badge, .chip, .pill, .idx {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
line-height: 1.4;
font-size: 11px;
font-weight: 600;
}
.level-badge {
padding: 2px 8px;
border: 1px solid transparent;
}
.badge {
padding: 3px 8px;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.chip {
padding: 3px 9px;
background: color-mix(in srgb, var(--secondary--color) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--secondary--color) 28%, transparent);
color: var(--detail-text);
}
.pill {
padding: 2px 7px;
border: 1px solid var(--detail-border-soft);
background: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--detail-text-muted);
}
.idx {
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
background: var(--detail-accent-soft);
color: var(--detail-text-muted);
}
.level-low, .badge-ip, .badge-status-info, .chip-ip, .depth-pill {
background: rgba(56, 139, 253, 0.12);
border-color: rgba(56, 139, 253, 0.25);
color: #58a6ff;
}
.level-medium, .badge-severity, .pill-off {
background: rgba(210, 153, 34, 0.14);
border-color: rgba(210, 153, 34, 0.28);
color: #e3b341;
}
.level-high {
background: rgba(219, 109, 40, 0.14);
border-color: rgba(219, 109, 40, 0.28);
color: #f0883e;
}
.level-critical, .badge-status-deny, .pill-anomaly {
background: rgba(248, 81, 73, 0.14);
border-color: rgba(248, 81, 73, 0.3);
color: #f85149;
}
.badge-port, .chip-filter {
background: rgba(163, 113, 247, 0.1);
border-color: rgba(163, 113, 247, 0.24);
color: #bc8cff;
}
.chip-mitre {
background: rgba(88, 166, 255, 0.12);
border-color: rgba(88, 166, 255, 0.25);
color: #58a6ff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
border: 1px solid;
display: inline-block;
}
.chip-mitre-id {
background: rgba(88, 166, 255, 0.15);
border-color: rgba(88, 166, 255, 0.3);
color: #58a6ff;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
border: 1px solid;
display: inline-block;
font-family: ui-monospace, monospace;
margin-right: 6px;
}
.mitre-text {
color: var(--detail-text);
font-size: 12px;
}
.mitre-card {
margin-bottom: 12px;
}
.mitre-index {
font-size: 11px;
color: var(--detail-text-muted);
font-weight: 500;
margin-left: 4px;
}
.badge-status-allow, .pill-normal, .pill-ok {
background: rgba(63, 185, 80, 0.12);
border-color: rgba(63, 185, 80, 0.28);
color: #56d364;
}
.summary-ok-icon {
color: #56d364;
}
.chip-ip, .chip-filter, .badge-ip, .badge-port {
font-family: ui-monospace, monospace;
}
.chip-extracted {
background: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
border-color: var(--detail-border-subtle);
gap: 0;
}
.chip-k {
color: var(--detail-text-muted);
font-weight: 700;
margin-right: 4px;
}
.chip-k::after {
content: ':';
}
.chip-v {
color: var(--detail-text);
}
.host-value {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #58a6ff;
font-style: italic;
}
.text-val {
font-size: 12px;
line-height: 1.5;
width: 100%;
}
.text-collapsed {
max-height: 42px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.expand-btn {
font-size: 11px;
color: var(--detail-accent);
background: none;
border: none;
padding: 0;
cursor: pointer;
opacity: 0.85;
transition: opacity 0.15s ease;
}
.expand-btn:hover {
opacity: 1;
text-decoration: underline;
}
.copy-btn, .modal-close-btn, .chev {
display: inline-flex;
align-items: center;
justify-content: center;
}
.copy-btn {
flex-shrink: 0;
width: 22px;
height: 22px;
border: none;
background: color-mix(in srgb, var(--secondary--color) 10%, transparent);
border-radius: 6px;
color: var(--detail-text-muted);
cursor: pointer;
font-size: 11px;
transition: background-color 0.15s ease, color 0.15s ease;
margin-left: auto;
}
.copy-btn:hover {
background: var(--detail-accent-soft);
color: var(--detail-text);
}
.copy-btn.copy-success, .copy-btn-sm.copy-success {
background: rgba(63, 185, 80, 0.15);
color: #56d364;
}
.copy-btn-sm, .btn-export, .btn-close-modal {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border: 1px solid var(--detail-border-soft);
background: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
border-radius: 8px;
color: var(--detail-text-muted);
font-size: 12px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.copy-btn-sm {
padding: 3px 8px;
font-size: 11px;
}
.copy-btn-sm:hover, .btn-export:hover, .btn-close-modal:hover {
transform: translateY(-1px);
background: var(--detail-accent-soft);
color: var(--detail-text);
}
.btn-export {
border-color: rgba(56, 139, 253, 0.3);
background: rgba(56, 139, 253, 0.1);
color: #58a6ff;
}
.log-card-header {
justify-content: space-between;
}
.log-content {
margin: 0;
padding: 12px 14px;
font-size: 11.5px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
color: var(--detail-text-soft);
max-height: 140px;
overflow-y: auto;
background: transparent;
}
.mini-log-wrap {
overflow: hidden;
margin-top: 8px;
}
.summary-card .panel-card-header {
gap: 8px;
}
.summary-text {
margin: 0;
padding: 12px 14px;
font-size: 12px;
line-height: 1.65;
color: var(--detail-text-muted);
}
.summary-text strong {
color: var(--detail-text);
font-weight: 700;
}
.chain-wrap {
padding: 10px;
max-height: 440px;
overflow-y: auto;
}
.chain-card {
border: 1px solid var(--detail-border-soft);
border-radius: 10px;
background: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
margin-bottom: 8px;
overflow: hidden;
}
.chain-card:last-child {
margin-bottom: 0;
}
.chain-card-anomaly {
border-color: rgba(248, 81, 73, 0.45);
background: rgba(248, 81, 73, 0.06);
}
.chain-card-anomaly .chain-head {
border-left: 3px solid rgba(248, 81, 73, 0.7);
}
.chain-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
cursor: pointer;
user-select: none;
border-bottom: 1px solid transparent;
transition: background-color 0.15s ease;
gap: 10px;
}
.chain-head:hover {
background: color-mix(in srgb, var(--secondary--color) 8%, transparent);
}
.chain-head-left, .chain-head-right {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.chain-body-inner {
padding: 10px 12px;
display: grid;
gap: 10px;
border-top: 1px solid var(--detail-border-soft);
}
.chev {
width: 22px;
height: 22px;
border-radius: 6px;
background: var(--detail-accent-soft);
color: var(--detail-text-muted);
transition: transform 0.15s ease;
flex-shrink: 0;
}
.chev.open {
transform: rotate(180deg);
}
.sub-title {
font-size: 11px;
font-weight: 700;
color: var(--detail-text-muted);
letter-spacing: 0;
text-transform: uppercase;
margin-bottom: 6px;
}
.reason-text {
font-size: 12px;
line-height: 1.5;
color: var(--detail-text-soft);
padding: 8px;
}
.td-summary-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 14px;
border-bottom: 1px solid var(--detail-border-soft);
}
.td-toggle-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 14px;
border: none;
background: color-mix(in srgb, var(--input--background) 76%, transparent);
color: inherit;
cursor: pointer;
border-top: 1px solid var(--detail-border-soft);
transition: background-color 0.15s ease;
}
.td-toggle-btn:hover {
background: color-mix(in srgb, var(--secondary--color) 8%, transparent);
}
.td-toggle-left {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.td-body {
padding: 10px;
}
.time-text, .meta-text {
font-size: 11px;
color: var(--detail-text-muted);
}
.modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 80%, transparent),
var(--body--background));
border-top: 1px solid var(--detail-border-subtle);
}
.footer-date {
font-size: 11px;
color: var(--detail-text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.nav-buttons {
display: flex;
align-items: center;
gap: 8px;
}
.nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid var(--detail-border-soft);
background: var(--detail-surface-alt);
color: var(--detail-text);
cursor: pointer;
transition: background 0.18s, opacity 0.18s;
}
.nav-btn:hover:not(:disabled) {
background: var(--detail-surface-hover);
}
.nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.nav-counter {
font-size: 12px;
color: var(--detail-text-muted);
min-width: 48px;
text-align: center;
}
.footer-actions {
display: flex;
align-items: center;
gap: 8px;
}
.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--detail-border-soft); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--detail-text-muted); }
.anomaly-hero-strip {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 20px;
background: var(--detail-surface-alt);
border-bottom: 1px solid var(--detail-border-soft);
}
.anomaly-severity-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
border-radius: 12px;
}
.anomaly-severity-banner.level-critical { background: rgba(248,81,73,0.10); border: 1px solid rgba(248,81,73,0.30); }
.anomaly-severity-banner.level-high { background: rgba(219,109,40,0.10); border: 1px solid rgba(219,109,40,0.30); }
.anomaly-severity-banner.level-medium { background: rgba(210,153,34,0.10); border: 1px solid rgba(210,153,34,0.30); }
.anomaly-severity-banner.level-low { background: rgba(56,139,253,0.10); border: 1px solid rgba(56,139,253,0.30); }
.anomaly-severity-banner.level-cold { background: rgba(120,120,120,0.10); border: 1px solid rgba(120,120,120,0.30); }
.anomaly-severity-left {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 0;
}
.anomaly-severity-icon {
font-size: 22px;
}
.level-critical .anomaly-severity-icon { color: #f85149; }
.level-high .anomaly-severity-icon { color: #f0883e; }
.level-medium .anomaly-severity-icon { color: #e3b341; }
.level-low .anomaly-severity-icon { color: #58a6ff; }
.level-cold .anomaly-severity-icon { color: var(--detail-text-muted); }
.anomaly-severity-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.anomaly-severity-label {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
}
.level-critical .anomaly-severity-label { color: #f85149; }
.level-high .anomaly-severity-label { color: #f0883e; }
.level-medium .anomaly-severity-label { color: #e3b341; }
.level-low .anomaly-severity-label { color: #58a6ff; }
.level-cold .anomaly-severity-label { color: var(--detail-text); }
.anomaly-severity-explain {
font-size: 12px;
color: var(--detail-text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.anomaly-severity-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
min-width: 220px;
}
.anomaly-composite-value {
font-size: 18px;
font-weight: 700;
}
.anomaly-progress-bar {
width: 220px;
height: 8px;
background: rgba(128,128,128,0.18);
border-radius: 999px;
overflow: hidden;
}
.anomaly-progress-fill {
height: 100%;
border-radius: 999px;
transition: width 0.3s ease;
}
.level-critical .anomaly-progress-fill { background: #f85149; }
.level-high .anomaly-progress-fill { background: #f0883e; }
.level-medium .anomaly-progress-fill { background: #e3b341; }
.level-low .anomaly-progress-fill { background: #58a6ff; }
.level-cold .anomaly-progress-fill { background: var(--detail-text-muted); }
.anomaly-type-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
background: var(--detail-surface);
border: 1px solid var(--detail-border-soft);
border-radius: 10px;
}
.anomaly-type-list-header {
font-size: 12px;
font-weight: 600;
color: var(--detail-text-muted);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.anomaly-type-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
background: var(--detail-surface-alt);
border: 1px solid var(--detail-border-soft);
}
.anomaly-type-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 14px;
}
.anomaly-type-spike .anomaly-type-icon { background: rgba(248,81,73,0.15); color: #f85149; }
.anomaly-type-drop .anomaly-type-icon { background: rgba(56,139,253,0.15); color: #58a6ff; }
.anomaly-type-hour .anomaly-type-icon { background: rgba(210,153,34,0.15); color: #e3b341; }
.anomaly-type-novel .anomaly-type-icon { background: rgba(219,109,40,0.15); color: #f0883e; }
.anomaly-type-body {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.anomaly-type-title {
font-size: 13px;
font-weight: 600;
color: var(--detail-text);
}
.anomaly-type-meta {
font-size: 12px;
color: var(--detail-text-soft);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.anomaly-type-flags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 2px;
}
.partition-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.partition-compare-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
border-radius: 10px;
background: var(--detail-surface);
border: 1px solid var(--detail-border-soft);
}
.partition-compare-card.level-critical { border-color: rgba(248,81,73,0.40); }
.partition-compare-card.level-high { border-color: rgba(219,109,40,0.40); }
.partition-compare-card.level-medium { border-color: rgba(210,153,34,0.40); }
.partition-compare-card.level-low { border-color: rgba(56,139,253,0.40); }
.partition-compare-card.level-cold { border-color: rgba(120,120,120,0.40); }
.partition-compare-header {
font-size: 12px;
font-weight: 600;
color: var(--detail-text-muted);
text-transform: uppercase;
letter-spacing: 0.4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.partition-compare-key {
font-size: 11px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--detail-text-soft);
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
.partition-compare-value {
font-size: 22px;
font-weight: 700;
}
.partition-compare-card.level-critical .partition-compare-value { color: #f85149; }
.partition-compare-card.level-high .partition-compare-value { color: #f0883e; }
.partition-compare-card.level-medium .partition-compare-value { color: #e3b341; }
.partition-compare-card.level-low .partition-compare-value { color: #58a6ff; }
.partition-compare-card.level-cold .partition-compare-value { color: var(--detail-text-muted); }
.partition-compare-bar {
width: 100%;
height: 6px;
background: rgba(128,128,128,0.18);
border-radius: 999px;
overflow: hidden;
}
.partition-compare-fill {
height: 100%;
border-radius: 999px;
}
.partition-compare-card.level-critical .partition-compare-fill { background: #f85149; }
.partition-compare-card.level-high .partition-compare-fill { background: #f0883e; }
.partition-compare-card.level-medium .partition-compare-fill { background: #e3b341; }
.partition-compare-card.level-low .partition-compare-fill { background: #58a6ff; }
.partition-compare-card.level-cold .partition-compare-fill { background: var(--detail-text-muted); }
.partition-compare-label {
font-size: 12px;
font-weight: 600;
color: var(--detail-text-soft);
}
.partition-compare-insight {
padding: 8px 12px;
border-radius: 8px;
background: var(--detail-surface);
border: 1px solid var(--detail-border-soft);
font-size: 12px;
color: var(--detail-text-soft);
}
.anomaly-charts-expander {
display: flex;
flex-direction: column;
gap: 8px;
}
.anomaly-charts-toggle {
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
color: var(--detail-text-soft);
background: var(--detail-surface);
border: 1px solid var(--detail-border-soft);
border-radius: 8px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.anomaly-charts-toggle:hover {
background: var(--detail-accent-soft);
color: var(--detail-text);
}
.anomaly-charts-toggle i {
transition: transform 0.2s ease;
}
.anomaly-charts-toggle i.open {
transform: rotate(180deg);
}
.anomaly-charts-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 12px;
background: var(--detail-surface);
border: 1px solid var(--detail-border-soft);
border-radius: 10px;
}
.anomaly-chart-gauge {
height: 200px;
min-width: 0;
}
.anomaly-chart-diversity {
height: 200px;
min-width: 0;
}
.anomaly-cold-start-note {
padding: 10px 12px;
border-radius: 8px;
background: rgba(120,120,120,0.10);
border: 1px solid rgba(120,120,120,0.30);
font-size: 12px;
color: var(--detail-text-soft);
}
.anomaly-composite-value.low-confidence {
color: var(--detail-text-muted);
opacity: 0.85;
}
.anomaly-calibrating-badge {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 1px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
background: rgba(210, 153, 34, 0.14);
border: 1px solid rgba(210, 153, 34, 0.32);
color: #e3b341;
vertical-align: middle;
white-space: nowrap;
}
.anomaly-cold-start-note.anomaly-calibrating-note {
background: rgba(210, 153, 34, 0.10);
border-color: rgba(210, 153, 34, 0.30);
color: #e3b341;
}
.anomaly-axes-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.anomaly-axis-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
border-radius: 10px;
background: var(--detail-surface-alt);
border: 1px solid var(--detail-border-soft);
border-left-width: 3px;
}
.anomaly-axis-card.level-critical { border-left-color: #f85149; }
.anomaly-axis-card.level-high { border-left-color: #f0883e; }
.anomaly-axis-card.level-medium { border-left-color: #e3b341; }
.anomaly-axis-card.level-low { border-left-color: #58a6ff; }
.anomaly-axis-card.level-normal { border-left-color: rgba(120,120,120,0.45); }
.anomaly-axis-header {
display: flex;
align-items: center;
gap: 8px;
}
.anomaly-axis-icon {
font-size: 14px;
}
.anomaly-axis-card.level-critical .anomaly-axis-icon { color: #f85149; }
.anomaly-axis-card.level-high .anomaly-axis-icon { color: #f0883e; }
.anomaly-axis-card.level-medium .anomaly-axis-icon { color: #e3b341; }
.anomaly-axis-card.level-low .anomaly-axis-icon { color: #58a6ff; }
.anomaly-axis-card.level-normal .anomaly-axis-icon { color: var(--detail-text-muted); }
.anomaly-axis-title {
flex: 1;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--detail-text-muted);
}
.anomaly-axis-info {
font-size: 11px;
color: var(--detail-text-muted);
cursor: help;
opacity: 0.7;
}
.anomaly-axis-info:hover {
opacity: 1;
}
.anomaly-axis-label {
font-size: 16px;
font-weight: 700;
color: var(--detail-text);
}
.anomaly-axis-card.level-critical .anomaly-axis-label { color: #f85149; }
.anomaly-axis-card.level-high .anomaly-axis-label { color: #f0883e; }
.anomaly-axis-card.level-medium .anomaly-axis-label { color: #e3b341; }
.anomaly-axis-card.level-low .anomaly-axis-label { color: #58a6ff; }
.anomaly-axis-meta {
font-size: 13px;
color: var(--detail-text-soft);
}
.anomaly-axis-meta b {
color: var(--detail-text);
font-weight: 700;
}
.anomaly-axis-raw {
font-size: 11px;
color: var(--detail-text-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.anomaly-axis-flags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.anomaly-stats-expander {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.anomaly-stats-toggle {
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--detail-text-muted);
background: transparent;
border: 1px solid var(--detail-border-soft);
border-radius: 6px;
cursor: pointer;
}
.anomaly-stats-toggle:hover {
background: var(--detail-accent-soft);
color: var(--detail-text);
}
.anomaly-stats-toggle i {
transition: transform 0.2s ease;
font-size: 10px;
}
.anomaly-stats-toggle i.open {
transform: rotate(180deg);
}
.anomaly-stats-panel {
padding: 12px;
background: var(--detail-surface);
border: 1px solid var(--detail-border-soft);
border-radius: 8px;
}
.anomaly-stats-table {
width: 100%;
font-size: 12px;
border-collapse: collapse;
}
.anomaly-stats-table td {
padding: 5px 8px;
border-bottom: 1px solid var(--detail-border-soft);
}
.anomaly-stats-table tr:last-child td {
border-bottom: none;
}
.anomaly-stats-table td:first-child {
color: var(--detail-text-soft);
width: 40%;
}
.anomaly-stats-table td:last-child {
color: var(--detail-text);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.anomaly-stats-table code {
font-size: 11px;
color: var(--detail-text-muted);
word-break: break-all;
}
.anomaly-charts-container {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.anomaly-chart-hour {
height: 220px;
min-width: 0;
}
.anomaly-chart-radar {
height: 220px;
min-width: 0;
}
.anomaly-chart-cell {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.anomaly-chart-caption {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--detail-text-muted);
}
.anomaly-chart-caption i {
opacity: 0.7;
}
.anomaly-composite-score {
display: inline-flex;
align-items: center;
gap: 6px;
}
.anomaly-scope-tabs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.anomaly-scope-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-size: 12px;
font-weight: 600;
color: var(--detail-text-muted);
background: var(--detail-surface-alt);
border: 1px solid var(--detail-border-soft);
border-radius: 8px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.anomaly-scope-tab:hover {
background: var(--detail-accent-soft);
color: var(--detail-text);
}
.anomaly-scope-tab.active {
background: var(--detail-accent-soft);
color: var(--detail-text);
border-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
}
.anomaly-scope-tab-key {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
opacity: 0.85;
}
.anomaly-scope-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #f85149;
box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.18);
}
.partition-compare-explain {
font-size: 12px;
line-height: 1.5;
color: var(--detail-text-soft);
}
@media (max-width: 992px) {
.anomaly-severity-banner {
flex-direction: column;
align-items: stretch;
}
.anomaly-severity-right {
align-items: stretch;
min-width: 0;
}
.anomaly-progress-bar {
width: 100%;
}
.partition-compare-grid {
grid-template-columns: 1fr;
}
.anomaly-charts-container {
grid-template-columns: 1fr;
}
.anomaly-axes-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.detail-grid {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 600px) {
.modal-dialog {
width: 100vw !important;
max-width: 100vw !important;
}
.modal-body {
padding-bottom: 120px;
}
.meta-card {
min-width: 150px;
}
.info-row, .field-row {
flex-direction: column;
gap: 4px;
}
.detail-extracted-row {
grid-template-columns: 1fr;
}
.info-key, .field-key, .tech-key {
width: 100%;
}
.footer-date {
flex-wrap: wrap;
}
}
.suppress-banner {display:flex;align-items:center;gap:10px;margin:0 16px 10px;padding:10px 14px;
border-radius:10px;background:rgba(240,136,62,.12);border:1px solid rgba(240,136,62,.30);}
.suppress-banner-icon {color:#f0883e;font-size:16px;flex:0 0 auto;}
.suppress-banner-text {display:flex;flex-direction:column;gap:2px;min-width:0;}
.suppress-banner-title {color:#f0883e;font-weight:700;font-size:13px;}
.suppress-banner-kind {font-weight:500;opacity:.85;}
.suppress-banner-reason {font-size:12px;opacity:.8;font-family:monospace;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
/* ===== admin-components/cyber-security/triggered-correlation/drop-all-dialog/drop-all-dialog.component.css (global) ===== */
@keyframes tcd-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, .30);
}
50% {
box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
}
}
@keyframes tcd-spin {
to {
transform: rotate(360deg);
}
}
/* ===== admin-components/cyber-security/triggered-correlation/drop-all-dialog/drop-all-dialog.component.css (scoped) ===== */
app-drop-all-triggered-correlations-dialog {
.tcd-danger {
display: flex;
flex-direction: column;
gap: 14px;
text-align: left;
color: #f8fafc;
}
.tcd-danger__head {
display: flex;
align-items: center;
gap: 12px;
}
.tcd-danger__icon {
width: 44px;
height: 44px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(239, 68, 68, .16);
border: 1px solid rgba(248, 113, 113, .45);
color: #fda4af;
font-size: 19px;
animation: tcd-pulse 2.4s ease-in-out infinite;
}
.tcd-danger__headings {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.tcd-danger__eyebrow {
font-size: 10.5px;
font-weight: 900;
letter-spacing: 1.1px;
text-transform: uppercase;
color: #f87171;
}
.tcd-danger__title {
margin: 0;
font-size: 15px;
font-weight: 900;
line-height: 1.3;
color: #ffffff;
}
.tcd-danger__text {
margin: 0;
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
color: #aeb8c2;
}
.tcd-danger__scope, .tcd-danger__irreversible {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 12px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 700;
}
.tcd-danger__scope {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .10);
color: #e2e8f0;
}
.tcd-danger__scope strong {
font-size: 14px;
font-weight: 900;
color: #ffffff;
}
.tcd-danger__scope i {
color: #94a3b8;
}
.tcd-danger__irreversible {
background: rgba(239, 68, 68, .12);
border: 1px solid rgba(248, 113, 113, .40);
color: #fecaca;
text-transform: uppercase;
letter-spacing: .4px;
font-size: 11.5px;
font-weight: 900;
}
.tcd-danger__label {
margin: 4px 0 -6px;
font-size: 12px;
font-weight: 700;
color: #cbd5e1;
}
.tcd-danger__field {
display: flex;
align-items: center;
gap: 9px;
height: 40px;
padding: 0 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .05);
transition: border-color .16s ease, box-shadow .16s ease;
}
.tcd-danger__field:focus-within {
border-color: rgba(248, 113, 113, .70);
box-shadow: 0 0 0 3px rgba(239, 68, 68, .16);
}
.tcd-danger__field--invalid {
border-color: rgba(248, 113, 113, .70);
}
.tcd-danger__field>i {
color: #94a3b8;
font-size: 12px;
}
.tcd-danger__input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: none;
outline: none;
background: transparent;
color: #f8fafc;
font-size: 13px;
letter-spacing: .4px;
}
.tcd-danger__input::placeholder {
color: #64748b;
letter-spacing: 0;
}
.tcd-danger__eye {
border: none;
background: transparent;
color: #94a3b8;
padding: 4px;
cursor: pointer;
line-height: 1;
transition: color .16s ease;
}
.tcd-danger__eye:hover {
color: #e2e8f0;
}
.tcd-danger__error {
display: flex;
align-items: center;
gap: 7px;
margin-top: -4px;
font-size: 12px;
font-weight: 700;
color: #fca5a5;
}
.tcd-danger__actions {
display: flex;
gap: 9px;
margin-top: 4px;
}
.tcd-danger__btn {
flex: 1 1 0;
min-width: 0;
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px 12px;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, .12);
font-size: 12.5px;
font-weight: 900;
cursor: pointer;
transition: transform .16s ease, border-color .16s ease, background-color .16s ease, opacity .16s ease;
}
.tcd-danger__btn:hover:not(:disabled) {
transform: translateY(-1px);
}
.tcd-danger__btn:disabled {
cursor: not-allowed;
opacity: .5;
transform: none;
}
.tcd-danger__btn--ghost {
background: rgba(255, 255, 255, .06);
color: #f8fafc;
}
.tcd-danger__btn--ghost:hover:not(:disabled) {
background: rgba(255, 255, 255, .09);
}
.tcd-danger__btn--danger {
border-color: rgba(248, 113, 113, .60);
background: rgba(239, 68, 68, .82);
color: #ffffff;
}
.tcd-danger__btn--danger:hover:not(:disabled) {
background: rgba(220, 38, 38, .95);
border-color: rgba(248, 113, 113, .85);
}
.tcd-danger__spinner {
width: 14px;
height: 14px;
flex-shrink: 0;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .35);
border-top-color: #ffffff;
animation: tcd-spin .7s linear infinite;
}
}
/* ===== admin-components/cyber-security/triggered-correlation/triggered-correlation-navbar/triggered-correlation-navbar.component.css (global) ===== */
@keyframes tc-refresh-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.dark-theme .triggered_correlation_navbar_item, .darkBlue-theme .triggered_correlation_navbar_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .tc-refresh-select, .darkBlue-theme .tc-refresh-select {
color-scheme: dark;
background-image:
linear-gradient(45deg, transparent 50%, var(--primary--body--color) 50%),
linear-gradient(135deg, var(--primary--body--color) 50%, transparent 50%);
}
.dark-theme .tc-refresh-select option, .darkBlue-theme .tc-refresh-select option {
background: var(--body--background);
color: var(--primary--body--color);
}
.lightBlue-theme .tc-refresh-select {
border-color: color-mix(in srgb, #3fa4ac 34%, transparent);
}
.dark-theme .tc-refresh-stop {
background:
linear-gradient(180deg,
color-mix(in srgb, #7d7d7d 22%, #383838),
color-mix(in srgb, #7d7d7d 12%, #383838)) !important;
}
.darkBlue-theme .tc-refresh-stop {
background:
linear-gradient(180deg,
color-mix(in srgb, #ff6b6b 16%, #2a2e46),
color-mix(in srgb, #ff6b6b 8%, #2a2e46)) !important;
}
.lightBlue-theme .triggered_correlation_navbar_item {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
.dark-theme .tc-filter-row {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .tc-filter-row {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.lightBlue-theme .tc-filter-row {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
@keyframes tc-btn-spin {
to {
transform: rotate(360deg);
}
}
/* ===== admin-components/cyber-security/triggered-correlation/triggered-correlation-navbar/triggered-correlation-navbar.component.css (scoped) ===== */
app-triggered-correlation-navbar {
.triggered_correlation_navbar {
margin-bottom: 1rem;
position: relative;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.filter-button {
background: transparent;
border: none;
color: var(--primary--body--color);
padding: 0;
margin: 0;
cursor: pointer;
font-size: 13px;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
outline: none;
line-height: inherit;
}
.triggered_correlation_navbar_item_a {
text-decoration: none;
color: var(--primary--body--color);
}
.triggered_correlation_navbar_main {
margin-top: 1rem;
margin-bottom: 1rem;
position: relative;
}
.triggered_correlation_navbar_main:has(.rpn-menu-report-navbar.show), .triggered_correlation_navbar_main:focus-within {
z-index: 1400;
}
.triggered_correlation_navbar_item {
position: relative;
z-index: 300;
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.triggered_correlation_navbar_item:has(.rpn-menu-report-navbar.show), .triggered_correlation_navbar_item:has(.tc-more-menu.show), .triggered_correlation_navbar_item:focus-within {
z-index: 1300;
}
.triggered_correlation_navbar_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.triggered_correlation_navbar_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.tc-anomaly-toggle {
font-family: inherit;
padding-right: 6px;
}
.tc-anomaly-toggle__state {
height: 20px;
display: inline-flex;
align-items: center;
padding: 0 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--secondary--color) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
font-size: 11px !important;
font-weight: 700;
letter-spacing: .3px;
opacity: var(--opacity--100);
}
.tc-anomaly-toggle--anomaly {
border-color: color-mix(in srgb, #f59e0b 42%, transparent) !important;
}
.tc-anomaly-toggle--anomaly .tc-anomaly-toggle__state {
background: color-mix(in srgb, #f59e0b 18%, transparent);
border-color: color-mix(in srgb, #f59e0b 46%, transparent);
}
.tc-anomaly-toggle--anomaly i {
color: #f59e0b !important;
opacity: 1 !important;
}
.tc-more-item {
margin-left: auto;
padding: 0;
width: 36px;
}
.tc-more-dropdown {
position: relative;
width: 100%;
height: 100%;
}
.tc-more-toggle {
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary--body--color);
text-decoration: none;
cursor: pointer;
}
.tc-more-toggle i {
font-size: 14px;
opacity: var(--opacity--50);
transition: opacity .16s ease;
}
.tc-more-item:hover .tc-more-toggle i, .tc-more-toggle[aria-expanded="true"] i {
opacity: var(--opacity--100);
}
.tc-more-menu {
min-width: 250px;
padding: 6px !important;
margin-top: 8px !important;
z-index: 1350 !important;
border: 1px solid color-mix(in srgb, #dc2626 26%, transparent);
border-radius: 8px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
box-shadow:
var(--cart--box--shadow),
0 18px 36px color-mix(in srgb, #000000 18%, transparent);
}
.tc-more-menu__label {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px 6px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .7px;
text-transform: uppercase;
color: #dc2626;
}
.tc-more-menu__item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 10px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
text-align: left;
cursor: pointer;
transition: background-color .16s ease, color .16s ease;
}
.tc-more-menu__item i {
width: 16px;
color: #dc2626;
font-size: 13px;
}
.tc-more-menu__item:hover, .tc-more-menu__item:focus {
background: color-mix(in srgb, #dc2626 12%, transparent);
color: #dc2626;
}
.tc-refresh-item {
padding: 0 6px 0 10px;
}
.tc-refresh-select-wrap {
display: inline-flex;
}
.tc-refresh-icon {
opacity: var(--opacity--80) !important;
}
.tc-refresh-select {
min-width: 70px;
height: 30px;
border: none;
border-radius: 0;
background: transparent;
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 600;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--primary--body--color) 50%),
linear-gradient(135deg, var(--primary--body--color) 50%, transparent 50%);
background-position:
calc(100% - 16px) 12px,
calc(100% - 11px) 12px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
transition: opacity 0.18s ease;
}
.tc-refresh-select:hover, .tc-refresh-select:focus {
opacity: 1;
}
.tc-refresh-select option {
background: var(--body--background);
color: var(--primary--body--color);
}
.tc-refresh-start {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: transparent;
padding: 0;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}
.tc-refresh-start:hover:not(:disabled) {
transform: rotate(-18deg);
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.tc-refresh-start:disabled {
cursor: not-allowed;
opacity: 0.42;
}
.tc-refresh-start:disabled .tc-refresh-icon {
opacity: 0.38 !important;
}
.tc-refresh-stop {
border-color: color-mix(in srgb, #dc2626 38%, transparent) !important;
background:
linear-gradient(180deg,
color-mix(in srgb, #dc2626 18%, var(--input--background)),
color-mix(in srgb, #dc2626 10%, var(--input--background))) !important;
color: var(--primary--body--color);
}
.tc-refresh-stop:hover {
border-color: color-mix(in srgb, #dc2626 56%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 12px 24px color-mix(in srgb, #dc2626 16%, transparent) !important;
}
.tc-refresh-stop i {
color: #dc2626 !important;
opacity: 1 !important;
}
.tc-refresh-stop__spinner {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--primary--body--color) 22%, transparent);
border-top-color: var(--secondary--color);
animation: tc-refresh-spin 0.8s linear infinite;
flex-shrink: 0;
}
.triggered_correlation_navbar_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
.triggered_correlation_navbar_import_item {
padding: 0;
}
.triggered_correlation_navbar_import_label {
width: 100%;
height: 100%;
margin: 0;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--primary--body--color);
cursor: pointer;
}
.triggered_correlation_navbar_file_input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.tc-filter-dialog {
max-width: 880px;
width: 92vw;
}
.tc-filter-content {
background: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
border-radius: 12px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.tc-filter-header {
padding: 16px 20px;
border-bottom: 1px solid rgba(125, 125, 125, 0.25);
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(180deg,
rgba(125, 125, 125, 0.08),
transparent 80%);
}
.tc-filter-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
font-size: 14px;
}
.tc-filter-title {
font-size: 15px;
font-weight: 600;
color: var(--primary--body--color);
line-height: 1.2;
}
.tc-filter-subtitle {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 11.5px;
letter-spacing: .3px;
text-transform: uppercase;
}
.tc-close-btn {
width: 32px;
height: 32px;
border-radius: 8px;
background: transparent;
color: var(--primary--body--color);
opacity: var(--opacity--80);
transition: opacity .15s ease, transform .15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: none;
border: none;
}
.tc-filter-body {
padding: 20px;
max-height: 65vh;
overflow-y: auto;
}
.tc-filter-row {
display: grid;
grid-template-columns: 28px 1fr 36px;
column-gap: 10px;
align-items: start;
padding: 14px;
margin-bottom: 10px;
position: relative;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.tc-row-index {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--input--background);
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
border: var(--cart--border);
margin-top: 22px;
}
.tc-row-fields {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
}
.tc-row-actions {
display: flex;
align-items: center;
justify-content: center;
margin-top: 22px;
}
.tc-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 140px;
}
.tc-field-narrow {
width: 170px;
}
.tc-field-fit {
min-width: 0;
}
.tc-field-grow {
flex: 1 1 200px;
min-width: 200px;
}
.tc-field-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .4px;
opacity: var(--opacity--80);
color: var(--primary--body--color);
margin: 0;
}
.tc-hint {
text-transform: none;
letter-spacing: 0;
opacity: var(--opacity--50);
font-size: 10.5px;
margin-left: 4px;
}
.tc-control {
height: 36px;
width: 100%;
background: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
border-radius: 8px;
padding: 6px 10px;
font-size: 13px;
transition: border-color .15s ease, box-shadow .15s ease;
outline: none;
}
.tc-control::placeholder {
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.tc-control:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.25);
}
.tc-control-sm {
height: 30px;
font-size: 12px;
}
.tc-select-wrapper {
position: relative;
}
.tc-select-wrapper select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 28px;
cursor: pointer;
}
.tc-select-wrapper::after {
content: "\f078";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: 10px;
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.tc-error {
color: #e74c3c;
font-size: 11px;
margin-top: 2px;
}
.tc-case-pill {
height: 36px;
padding: 0 12px;
border-radius: 8px;
border: var(--cart--border);
background: var(--input--background);
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.tc-case-pill:hover {
background: rgba(125, 125, 125, 0.18);
}
.tc-case-pill .tc-case-aa {
font-weight: 700;
font-size: 13px;
opacity: var(--opacity--50);
text-decoration: line-through;
}
.tc-case-pill.active .tc-case-aa {
opacity: var(--opacity--100);
text-decoration: none;
color: #4CAF50;
}
.tc-case-pill .tc-case-state {
font-size: 12px;
opacity: var(--opacity--80);
}
.tc-case-pill.active {
border-color: rgba(76, 175, 80, 0.6);
background: rgba(76, 175, 80, 0.10);
}
.tc-icon-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: var(--cart--border);
background: var(--input--background);
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.tc-icon-btn:hover {
background: rgba(125, 125, 125, 0.18);
}
.tc-icon-btn-danger:hover {
background: rgba(231, 76, 60, 0.18);
color: #e74c3c;
}
.tc-icon-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.tc-icon-btn:disabled:hover {
background: var(--input--background);
color: var(--primary--body--color);
}
.tc-row-logic {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 10px;
margin-top: 12px;
margin-bottom: -6px;
}
.tc-logic-line {
height: 1px;
background: rgba(125, 125, 125, 0.35);
}
.tc-logic-select {
width: 84px;
}
.tc-logic-select select {
text-align: center;
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
letter-spacing: .5px;
}
.tc-add-row {
text-align: center;
margin-top: 6px;
}
.tc-add-btn {
background:
linear-gradient(135deg,
color-mix(in srgb, var(--secondary--color) 14%, var(--input--background)),
color-mix(in srgb, var(--body--background) 82%, transparent));
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
color: var(--primary--body--color);
min-height: 38px;
padding: 7px 16px 7px 12px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: var(--cart--box--shadow), 0 10px 24px rgba(0, 0, 0, 0.08);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.tc-add-btn i {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: color-mix(in srgb, var(--secondary--color) 85%, transparent);
color: #fff;
font-size: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.tc-add-btn:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent);
box-shadow: var(--cart--box--shadow), 0 14px 28px rgba(0, 0, 0, 0.12);
}
.tc-filter-footer {
padding: 14px 20px;
border-top: 1px solid rgba(125, 125, 125, 0.25);
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(0deg,
rgba(125, 125, 125, 0.06),
transparent);
}
.tc-btn {
height: 38px;
padding: 0 16px;
border-radius: 8px;
border: var(--cart--border);
background: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background .15s ease, color .15s ease, transform .1s ease;
}
.tc-btn:disabled {
opacity: 0.9;
cursor: not-allowed;
}
.tc-btn:active {
transform: translateY(1px);
}
.tc-btn-ghost {
background: transparent;
opacity: var(--opacity--80);
}
.tc-btn-ghost:hover {
background: rgba(125, 125, 125, 0.12);
opacity: var(--opacity--100);
}
.tc-btn-secondary:hover {
background: rgba(125, 125, 125, 0.18);
}
.tc-btn-primary {
background: #4CAF50;
border-color: #4CAF50;
color: #fff;
}
.tc-btn-primary:hover {
background: #43a047;
border-color: #43a047;
}
.tc-btn-loading {
min-width: 150px;
justify-content: center;
}
.tc-btn-spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: tc-btn-spin .7s linear infinite;
}
.dark-theme .tc-filter-content, .darkBlue-theme .tc-filter-content {
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
}
.dark-theme .tc-logic-line, .darkBlue-theme .tc-logic-line {
background: rgba(255, 255, 255, 0.15);
}
.dark-theme .tc-add-btn, .darkBlue-theme .tc-add-btn {
border-color: color-mix(in srgb, var(--secondary--color) 32%, rgba(255, 255, 255, 0.08));
background:
linear-gradient(135deg,
color-mix(in srgb, var(--secondary--color) 18%, rgba(255, 255, 255, 0.06)),
color-mix(in srgb, var(--body--background) 96%, rgba(255, 255, 255, 0.02)));
}
.dark-theme .tc-add-btn:hover, .darkBlue-theme .tc-add-btn:hover {
border-color: color-mix(in srgb, var(--secondary--color) 54%, rgba(255, 255, 255, 0.12));
}
.dark-theme .tc-filter-header, .darkBlue-theme .tc-filter-header {
border-bottom-color: rgba(255, 255, 255, 0.10);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.04),
transparent 80%);
}
.dark-theme .tc-filter-footer, .darkBlue-theme .tc-filter-footer {
border-top-color: rgba(255, 255, 255, 0.10);
background: linear-gradient(0deg,
rgba(255, 255, 255, 0.03),
transparent);
}
.lightBlue-theme .tc-filter-content {
border-radius: 12px;
}
.tc-control option {
background: var(--body--background);
color: var(--primary--body--color);
}
.dark-theme .tc-control[type="date"], .darkBlue-theme .tc-control[type="date"] {
color-scheme: dark;
}
@media (max-width: 720px) {
.tc-filter-dialog {
max-width: 96vw;
width: 96vw;
}
.tc-filter-row {
grid-template-columns: 24px 1fr 32px;
padding: 10px;
}
.tc-field-narrow {
width: 100%;
}
.tc-field {
flex: 1 1 100%;
}
.tc-row-index, .tc-row-actions {
margin-top: 18px;
}
}
}
/* ===== admin-components/cyber-security/triggered-correlation/triggered-correlation.component.css (global) ===== */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
app-triggered-correlation .tc-level-cell {
padding-left: 0 !important;
}
app-triggered-correlation .tc-level-badge {
--tc-level-color: #64748b;
--tc-level-bg: rgba(100, 116, 139, 0.2);
--tc-level-border: rgba(100, 116, 139, 0.42);
--tc-level-text-color: #111827;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 108px;
height: 28px;
padding: 0 10px;
border: 1px solid var(--tc-level-border);
border-radius: 999px;
background: var(--tc-level-bg);
color: var(--tc-level-text-color);
font-size: 12px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
app-triggered-correlation .tc-level-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--tc-level-color);
box-shadow: 0 0 0 4px var(--tc-level-bg);
flex: 0 0 auto;
}
app-triggered-correlation .tc-level-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
border-radius: 50%;
background: var(--tc-level-bg);
color: var(--tc-level-text-color);
}
app-triggered-correlation .tc-level-text {
overflow: hidden;
text-overflow: ellipsis;
}
app-triggered-correlation .tc-level-empty {
color: var(--primary--body--color);
opacity: 0.45;
font-weight: 700;
}
app-triggered-correlation .tc-level--low {
--tc-level-color: #16a34a;
--tc-level-bg: rgba(22, 163, 74, 0.22);
--tc-level-border: rgba(22, 163, 74, 0.46);
}
app-triggered-correlation .tc-level--guarded {
--tc-level-color: #65a30d;
--tc-level-bg: rgba(101, 163, 13, 0.22);
--tc-level-border: rgba(101, 163, 13, 0.46);
}
app-triggered-correlation .tc-level--medium {
--tc-level-color: #d97706;
--tc-level-bg: rgba(217, 119, 6, 0.24);
--tc-level-border: rgba(217, 119, 6, 0.48);
}
app-triggered-correlation .tc-level--high {
--tc-level-color: #ea580c;
--tc-level-bg: rgba(234, 88, 12, 0.25);
--tc-level-border: rgba(234, 88, 12, 0.5);
}
app-triggered-correlation .tc-level--critical {
--tc-level-color: #dc2626;
--tc-level-bg: rgba(220, 38, 38, 0.25);
--tc-level-border: rgba(220, 38, 38, 0.5);
}
app-triggered-correlation-context(.lightBlue-theme) .tc-level-badge {
--tc-level-text-color: #0f172a;
}
app-triggered-correlation-context(.dark-theme) .tc-level-badge {
--tc-level-text-color: #ffffffbd;
}
app-triggered-correlation-context(.darkBlue-theme) .tc-level-badge {
--tc-level-text-color: rgba(255, 255, 255, 0.82);
}
app-triggered-correlation .tc-ip-list {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
overflow: hidden;
vertical-align: middle;
}
app-triggered-correlation .tc-ip-chip {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 150px;
height: 26px;
padding: 0 8px;
border: 1px solid rgba(4, 46, 82, 0.18);
border-radius: 999px;
background: rgba(4, 46, 82, 0.08);
color: var(--primary--body--color);
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
app-triggered-correlation .tc-ip-chip i {
color: var(--primary--body--color);
font-size: 10px;
opacity: 0.62;
flex: 0 0 auto;
}
app-triggered-correlation .tc-ip-more {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 26px;
padding: 0 8px;
border-radius: 999px;
background: rgba(100, 116, 139, 0.16);
color: var(--primary--body--color);
font-size: 15px;
font-weight: 800;
flex: 0 0 auto;
}
app-triggered-correlation .tc-ip-empty {
color: var(--primary--body--color);
opacity: 0.45;
font-weight: 700;
}
app-triggered-correlation-context(.lightBlue-theme) .tc-ip-chip {
border-color: rgba(59, 89, 102, 0.24);
background: rgba(59, 89, 102, 0.1);
}
app-triggered-correlation-context(.dark-theme) .tc-ip-chip {
border-color: rgba(204, 204, 204, 0.18);
background: rgba(204, 204, 204, 0.1);
}
app-triggered-correlation-context(.darkBlue-theme) .tc-ip-chip {
border-color: rgba(96, 165, 250, 0.2);
background: rgba(61, 64, 115, 0.28);
}
.tc-ip-pop {
position: fixed;
z-index: 999999;
min-width: 220px;
max-width: 320px;
max-height: 260px;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 8px;
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
overflow: hidden;
pointer-events: auto;
}
.tc-ip-pop__title {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
font-size: 13px;
font-weight: 800;
}
.tc-ip-pop__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 7px;
background: rgba(4, 46, 82, 0.1);
}
.tc-ip-pop__count {
margin-left: auto;
min-width: 24px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: rgba(100, 116, 139, 0.16);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.tc-ip-pop__list {
display: grid;
gap: 6px;
max-height: 190px;
overflow: auto;
}
.tc-ip-pop__item {
padding: 7px 9px;
border-radius: 6px;
background: rgba(100, 116, 139, 0.12);
font-size: 12.5px;
font-weight: 700;
line-height: 1.2;
font-family: Consolas, "Courier New", monospace;
}
.dark-theme .tc-ip-pop {
background: #363939;
border-color: rgba(148, 163, 184, 0.18);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.darkBlue-theme .tc-ip-pop {
background: #0d1b2e;
border-color: rgba(96, 165, 250, 0.18);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.dark-theme .tc-ip-pop__item, .darkBlue-theme .tc-ip-pop__item {
background: rgba(255, 255, 255, 0.08);
}
.chain-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
background: var(--input--background, #f0f0f0);
border: 1px solid rgba(0,0,0,0.08);
cursor: pointer;
transition: all 0.2s ease;
}
.chain-toggle-btn i {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
transition: transform 0.25s ease;
}
.chain-toggle-btn:hover {
background: var(--secondary--color, #1976d2);
border-color: var(--secondary--color, #1976d2);
}
.chain-toggle-btn:hover i { color: #fff; opacity: 1; }
.chain-toggle-btn.expanded i { transform: rotate(90deg); }
.ag-full-width-row { overflow: visible !important; }
.ag-full-width-row .ag-cell-wrapper { width: 100%; }
.ag-row.chain-detail-parent-odd { background-color: var(--ag-odd-row-background-color) !important; }
.ag-row.chain-detail-parent-even { background-color: var(--ag-background-color) !important; }
.ag-row.chain-row-odd { background-color: var(--ag-odd-row-background-color) !important; }
.ag-row.chain-row-even { background-color: var(--ag-background-color) !important; }
.ag-row.chain-expanded-parent {
border-left: 3px solid var(--secondary--color, #1976d2) !important;
}
app-triggered-correlation .ag-theme-alpine {
--ag-selected-row-background-color: transparent;
--ag-range-selection-background-color: transparent;
}
app-triggered-correlation .ag-row-selected, app-triggered-correlation .ag-row-selected::before {
background-color: transparent !important;
background: transparent !important;
}
/* ===== admin-components/cyber-security/triggered-correlation/triggered-correlation.component.css (scoped) ===== */
app-triggered-correlation {
.container-fluid {
position: relative;
}
.table-wrapper {
position: relative;
}
.table-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
background: rgba(255, 255, 255, 0.62);
z-index: 4;
}
.spinner {
border: 6px solid rgba(15, 23, 42, 0.08);
border-top: 6px solid var(--primary--body--color);
border-radius: 50%;
width: 42px;
height: 42px;
animation: spin 1s linear infinite;
}
.state-panel {
margin-bottom: 1rem;
padding: 1rem 1.1rem;
border-radius: var(--cart--border--radius);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background-color: var(--body--background);
color: var(--primary--body--color);
}
.label-header-trigger {
font-size: 14.5px;
color: var(--primary--body--color);
}
.state-panel p {
margin: .35rem 0 0;
opacity: var(--opacity--50);
}
.error-state {
border-color: rgba(185, 28, 28, 0.25);
}
.empty-state {
justify-content: flex-start;
}
.tc-table-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 48px;
margin: 8px 20px 10px;
padding: 8px 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.tc-table-actions__meta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 700;
opacity: 0.78;
}
.tc-table-actions__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 26px;
padding: 0 8px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.14);
color: var(--primary--body--color);
}
.tc-table-actions__buttons {
display: inline-flex;
align-items: center;
gap: 8px;
}
.tc-table-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 32px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.tc-table-action i {
font-size: 13px;
}
.tc-table-action:disabled {
cursor: not-allowed;
opacity: 0.48;
}
.tc-table-action--detail {
--tc-detail-action-bg: #042e52;
--tc-detail-action-border: #042e52;
--tc-detail-action-hover: #031f38;
background: var(--tc-detail-action-bg);
border-color: var(--tc-detail-action-border);
color: #ffffff;
box-shadow: 0 8px 16px rgba(4, 46, 82, 0.18);
}
.tc-table-action--detail:not(:disabled):hover {
background: var(--tc-detail-action-hover);
border-color: var(--tc-detail-action-hover);
}
.tc-table-action--delete {
color: #ffffff;
background: #dc2626;
border-color: #dc2626;
box-shadow: 0 8px 16px rgba(220, 38, 38, 0.18);
}
.tc-table-action--delete:not(:disabled):hover {
background: #b91c1c;
border-color: #b91c1c;
}
.darkBlue-theme & .tc-table-actions {
background: rgba(15, 23, 42, 0.54);
border-color: rgba(148, 163, 184, 0.16);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
.dark-theme & .tc-table-actions {
background: #363939;
border-color: rgba(148, 163, 184, 0.16);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
.lightBlue-theme & .tc-table-action--detail {
--tc-detail-action-bg: #3b5966;
--tc-detail-action-border: #3b5966;
--tc-detail-action-hover: #2f4853;
box-shadow: 0 8px 16px rgba(59, 89, 102, 0.18);
}
.dark-theme & .tc-table-action--detail {
--tc-detail-action-bg: #4a4a4a;
--tc-detail-action-border: #5f6368;
--tc-detail-action-hover: #5a5a5a;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}
.darkBlue-theme & .tc-table-action--detail {
--tc-detail-action-bg: #3d4073;
--tc-detail-action-border: #4c518d;
--tc-detail-action-hover: #4b4f8b;
box-shadow: 0 8px 16px rgba(61, 64, 115, 0.24);
}
.tc-context-menu {
position: fixed;
z-index: 1055;
min-width: 178px;
padding: 6px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 8px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.tc-context-menu__item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
height: 34px;
padding: 0 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.tc-context-menu__item i {
width: 15px;
font-size: 13px;
text-align: center;
}
.tc-context-menu__item:hover {
background: rgba(59, 130, 246, 0.12);
}
.tc-context-menu__item--danger {
color: #dc2626;
}
.tc-context-menu__item--danger:hover {
background: rgba(220, 38, 38, 0.12);
}
.dark-theme & .tc-context-menu, .darkBlue-theme & .tc-context-menu {
border-color: rgba(148, 163, 184, 0.18);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.dark-theme & .tc-context-menu {
background: #363939;
}
.darkBlue-theme & .tc-context-menu {
background: #0d1b2e;
border-color: rgba(96, 165, 250, 0.18);
}
.dark-theme & .tc-context-menu__item, .darkBlue-theme & .tc-context-menu__item {
color: rgba(255, 255, 255, 0.86);
}
.dark-theme & .tc-context-menu__item:hover {
background: rgba(148, 163, 184, 0.14);
}
.darkBlue-theme & .tc-context-menu__item:hover {
background: rgba(59, 130, 246, 0.18);
}
.dark-theme & .tc-context-menu__item--danger, .darkBlue-theme & .tc-context-menu__item--danger {
color: #f87171;
}
.dark-theme & .tc-context-menu__item--danger:hover, .darkBlue-theme & .tc-context-menu__item--danger:hover {
background: rgba(248, 113, 113, 0.14);
}
@media (max-width: 576px) {
.tc-table-actions {
align-items: stretch;
flex-direction: column;
}
.tc-table-actions__buttons {
width: 100%;
}
.tc-table-action {
flex: 1;
}
}
}
/* ===== admin-components/dashboard/add-dashboard-item/add-dashboard-item.component.css (global) ===== */
@media only screen and (max-width: 950px) {
.show-sidebar .modal-dialog {
width: 100% !important;
}
}
.lightBlue-theme .widget_search .fa-search {
color: var(--secondary--color) !important;
}
.dark-theme .modal-content, .darkBlue-theme .modal-content {
background:
linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background)) !important;
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38) !important;
}
.dark-theme .dashboard-widget-header, .darkBlue-theme .dashboard-widget-header {
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
/* ===== admin-components/dashboard/add-dashboard-item/add-dashboard-item.component.css (scoped) ===== */
app-add-dashboard-item {
.modal-content {
background:
linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background)) !important;
height: auto;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent) !important;
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.18) !important;
border-radius: 12px 0 0 12px !important;
overflow: hidden;
}
.dashboard-widget-modal {
min-height: 100%;
}
.dashboard-widget-shell {
min-height: 100%;
display: flex;
flex-direction: column;
}
.dashboard-widget-header {
position: sticky;
top: 0;
z-index: 5;
padding: 18px 20px 14px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
}
.dashboard-widget-title {
min-width: 0;
}
.dashboard-widget-title h6 {
margin: 2px 0 0;
font-size: 17px;
font-weight: 700;
}
.dashboard-widget-kicker {
display: block;
color: var(--primary--body--color);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
opacity: 0.82;
}
.dashboard-widget-close {
width: 34px;
height: 34px;
border: none;
border-radius: 8px;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
box-shadow: none;
}
.dashboard-widget-close:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 10%, var(--input--background));
}
.label-header {
opacity: var(--opacity--80);
color: var(--primary--body--color);
}
.choose_select_new_device {
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius);
font-size: 13px;
}
.widget_item {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
margin-bottom: .4rem;
padding: 10px 42px 10px 12px;
box-shadow: var(--cart--box--shadow);
border-radius: 10px;
min-height: 56px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 94%, white 6%), var(--input--background));
position: relative;
overflow: hidden;
transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.widget_item::before {
content: '';
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--secondary--color);
opacity: 0.72;
}
.widget_item::after {
content: '\f061';
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 12px;
opacity: 1;
transition: transform 0.16s ease, opacity 0.16s ease;
}
.widget_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 52%, transparent);
background:
linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)), var(--input--background));
box-shadow: var(--cart--box--shadow), 0 12px 24px color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.widget_item:hover::after {
transform: translate(3px, -50%);
opacity: 1;
}
.close_btn {
margin-top: 0.1rem;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.widget-search {
color: var(--primary--body--color) !important;
opacity: 0.92;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
width: 100%;
outline: none !important;
height: 36px;
text-indent: 24px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.widget-search::placeholder {
color: var(--primary--body--color) !important;
opacity: 0.42;
text-indent: 24px;
}
.widget-search:focus {
border-color: color-mix(in srgb, var(--secondary--color) 52%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.modal.right .modal-dialog {
position: fixed;
margin: auto;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.right .modal-body {
padding: 16px 18px 80px;
}
.modal.right.fade .modal-dialog {
right: 0;
width: min(720px, 56vw);
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog {
right: 0;
}
.modal-content {
border-radius: 0;
border: none;
}
.modal-header {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 12%, transparent);
background-color: var(--body--background);
}
@media only screen and (max-width: 850px) {
.modal-dialog {
width: 100% !important;
}
}
.flag {
position: relative;
display: flex;
align-items: center;
color: var(--primary--sidebar--color);
font-size: .82rem;
cursor: pointer;
width: 100%;
}
.flag .flag_tooltip {
visibility: hidden;
width: 100%;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 5px 20px;
position: absolute;
z-index: 1;
top: 120%;
left: 62%;
opacity: 0;
transition: opacity .5s;
margin-left: -80px;
}
.flag:hover .flag_tooltip {
visibility: visible;
opacity: 1;
}
.correlation {
position: relative;
display: flex;
align-items: center;
color: var(--primary--sidebar--color);
font-size: .82rem;
cursor: pointer;
width: 100%;
}
.correlation .correlation_tooltip {
visibility: hidden;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 5px 20px;
position: absolute;
z-index: 1;
top: 120%;
left: 62%;
opacity: 0;
transition: opacity .5s;
margin-left: -80px;
width: 100%;
}
.correlation:hover .correlation_tooltip {
visibility: visible;
opacity: 1;
}
.widget_search {
position: relative;
}
.widget_search .fa-search {
position: absolute;
top: 11px;
left: 13px;
color: var(--secondary--color) !important;
opacity: 0.82;
z-index: 2;
}
.content-area {
padding: 14px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 10px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 8%, transparent), transparent 38%),
color-mix(in srgb, var(--body--background) 88%, var(--input--background) 12%);
}
.content-area-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.content-area-header .label-header {
margin: 0;
font-size: 13px;
font-weight: 700;
}
.widget-grid {
row-gap: 4px;
max-height: 420px;
overflow-y: auto;
padding-right: 4px;
}
.widget-grid::-webkit-scrollbar {
width: 4px;
}
.widget-grid::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
border-radius: 999px !important;
}
.widget_item img {
width: 32px !important;
height: 32px;
object-fit: contain;
margin-right: 10px;
flex: 0 0 auto;
border-radius: 7px;
background-color: color-mix(in srgb, var(--input--background) 76%, var(--body--background));
padding: 3px;
}
.widget-item-label {
display: flex !important;
align-items: center;
width: 100%;
min-width: 0;
color: var(--primary--body--color) !important;
opacity: 0.9 !important;
font-size: 13px;
font-weight: 600;
line-height: 1.25;
}
.widget-see-all {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 42%, transparent);
border-radius: 8px;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
padding: 5px 10px;
}
.widget-see-all:hover {
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color);
}
@media only screen and (max-width: 1200px) {
.modal.right.fade .modal-dialog {
width: min(760px, 72vw);
}
}
}
/* ===== admin-components/dashboard/correlation/correlation.component.css (global) ===== */
.darkBlue-theme .tooltip_td {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.darkBlue-theme .tooltip_th {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.lightBlue-theme .tooltip_td {
border: 1px solid var(--primary--body--color) !important;
}
.lightBlue-theme .tooltip_th {
border: 1px solid var(--primary--body--color) !important;
}
/* ===== admin-components/dashboard/correlation/correlation.component.css (scoped) ===== */
app-correlation {
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
border-bottom: var(--cart--border);
background-color: var(--body--background);
}
.label-header {
color: var(--primary--body--color);
}
.header-bottom {
border-bottom: 1px solid var(--primary--body--color);
}
ul.tools {
display: none;
list-style: none;
box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
position: absolute;
padding: 0;
}
ul.tools li {
height: 25px;
margin: 4px;
padding: 5px;
cursor: pointer;
color: var(--primary--body--color);
}
.filter-tools {
font-size: 11px;
}
#contextmenu {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
height: 215px;
border: var(--cart--border)
}
.mat-icon {
color: var(--secondary--color);
transform: translateY(5px);
}
.context-header {
box-shadow: var(--cart--box--shadow);
border-bottom: var(--cart--border);
}
#tooltip_correlation {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
.tooltip_th {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_td {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_level {
color: var(--primary--body--color);
}
.tooltip_color {
width: 20px;
height: 20px;
border-radius: 50%;
transform: translateY(2px);
}
.tooltip_td_first {
background-color: var(--body--background);
}
.tooltip_table {
background-color: var(--body--background);
}
.tooltip_close_button {
color: var(--primary--body--color);
cursor: pointer;
}
}
/* ===== admin-components/dashboard/dashboard.component.css (global) ===== */
.dark-theme .dashboard-action, .dark-theme #new_widget, .darkBlue-theme .dashboard-action, .darkBlue-theme #new_widget {
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 88%, white 5%), var(--input--background)) !important;
}
.lightBlue-theme .dashboard-action, .lightBlue-theme #new_widget {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent) !important;
}
.dark-theme .dashboard-item-select {
transform: translateY(0px);
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
@media (max-width: 1186px) {
.show-sidebar .accordion_ware .col-lg-3 {
width: 33%;
}
}
@media (max-width: 956px) {
.show-sidebar .filter_item {
width: 50%;
}
.show-sidebar .accordion_ware .col-sm-4 {
width: 50%;
}
}
@media only screen and (max-width: 668px) and (min-width: 670px) {
.accordion_ware .col-sm-4 {
width: 100%;
}
}
@media (max-width: 645px) {
.show-sidebar .accordion_row {
justify-content: center;
align-items: center;
}
.show-sidebar .accordion_ware .col-sm-4 {
width: 250px !important;
}
}
@media (max-width: 670px) {
.show-sidebar .filter_item {
width: 100%;
}
}
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform: translateX(7rem);
opacity: 1;
}
0% {
transform: translateY(0rem);
opacity: 0;
}
}
@-webkit-keyframes slideIn {
0% {
-webkit-transform: transform;
-webkit-opacity: 0;
}
100% {
-webkit-transform: translateX(7rem);
-webkit-opacity: 1;
}
0% {
transform: translateY(0rem);
-webkit-opacity: 0;
}
}
@media only screen and (max-width: 505px) {
.show-sidebar #editing_word {
font-size: 11px !important;
}
}
@media only screen and (max-width: 515px) {
.show-sidebar .save-mobile-button {
margin-left: 0px !important;
}
.show-sidebar .dropstart {
justify-content: center;
}
.show-sidebar #dashboard_settings_button {
font-size: 11.5px !important;
}
}
@media only screen and (max-width: 708px) {
.show-sidebar .dashboard_button {
margin-right: 0rem !important;
}
.show-sidebar #dashboard_settings {
display: flex;
flex-direction: column;
}
.show-sidebar .cancel-mobile-button {
margin-left: .3rem;
}
.show-sidebar .mobile-div {
justify-content: center;
margin-top: .3rem;
}
.show-sidebar .dashboard_button {
width: 60px !important;
min-width: 60px !important;
height: 30px !important;
padding: 0px !important;
}
.show-sidebar .save-mobile-button {
margin-left: 1rem;
}
.show-sidebar #dashboard_buttons_div {
margin-bottom: .4rem;
}
}
@media only screen and (max-width: 420px) {
.show-sidebar #dashboard_settings_button {
font-size: 11px !important;
}
.show-sidebar .oriana-dashboard-button {
width: 100px;
}
.show-sidebar .dashboard_button {
width: 45px !important;
}
.show-sidebar .head {
margin-left: 0rem;
}
.edit-icon {
display: none;
}
}
@media (max-width: 920px) {
.show-sidebar .dashboard_button {
width: 40px;
min-width: 40px;
padding: 0.3rem .8rem;
height: 36px;
}
.show-sidebar .dashboard_button:active {
width: 40px;
min-width: 40px;
padding: 0.3rem .8rem;
height: 36px;
}
.show-sidebar .dashboard_button:focus {
width: 40px;
min-width: 40px;
padding: 0.3rem .8rem;
height: 36px;
}
.show-sidebar .save-cancel {
display: none;
}
}
@media only screen and (min-width: 900px) {
.show-sidebar #dashboard-dropdown-button {
margin-left: .5rem;
}
}
.dark-theme .div-graphic {
background:
radial-gradient(circle at top right, rgba(189, 190, 190, 0.06), transparent 34%),
linear-gradient(180deg, #242828 0%, #202424 100%);
border: 1px solid rgba(189, 190, 190, 0.18);
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.035);
border-radius: 10px;
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.lightBlue-theme .div-graphic {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background:
radial-gradient(circle at top right, rgba(140, 169, 180, 0.13), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #f1f7fa 100%);
}
.darkBlue-theme .div-graphic {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background: transparent;
}
.dark-theme .cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(158, 141, 141, 0.5),
0 8px 10px 1px rgba(158, 141, 141, 0.5),
0 3px 14px 2px rgba(158, 141, 141, 0.5);
}
.darkBlue-theme .cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(158, 141, 141, 0.5),
0 8px 10px 1px rgba(158, 141, 141, 0.5),
0 3px 14px 2px rgba(158, 141, 141, 0.5);
}
@keyframes alerton {
0% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes alertoff {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.show-sidebar .dashboard-dropdown-div {
transform: translateX(-7px);
}
.light-blue-theme .dashboard-card:fullscreen, .light-blue-theme .dashboard-card:-webkit-full-screen {
background:
radial-gradient(circle at top right, rgba(140, 169, 180, 0.13), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #f1f7fa 100%);
padding: 24px;
}
.dark-theme .dashboard-card:fullscreen, .dark-theme .dashboard-card:-webkit-full-screen {
background:
radial-gradient(circle at top right, rgba(189, 190, 190, 0.06), transparent 34%),
linear-gradient(180deg, #242828 0%, #202424 100%);
padding: 24px;
}
.darkBlue-theme .dashboard-card:fullscreen, .darkBlue-theme .dashboard-card:-webkit-full-screen {
background:
radial-gradient(circle at top right, rgba(189, 190, 190, 0.06), transparent 34%),
linear-gradient(180deg, #242828 0%, #202424 100%);
padding: 24px;
}
@media only screen and (max-width: 2200px) {
.show-sidebar .each-chart {
width: 33% !important;
}
}
@media only screen and (min-width: 2200px) {
.show-sidebar .each-chart {
width: 33% !important;
}
}
@media only screen and (max-width: 1650px) {
.show-sidebar .each-chart {
width: 50% !important;
}
}
@media only screen and (max-width: 1220px) {
.show-sidebar .each-chart {
width: 100% !important;
}
.show-sidebar .scope_widget {
margin-right: 0.1rem;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1650px) {
.show-sidebar .each-chart {
padding-right: 0px;
padding-left: 3px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
.show-sidebar .each-chart {
padding-right: 0px;
padding-left: 2px;
}
}
@media only screen and (min-width: 960px) and (max-width: 1200px) {
.show-sidebar .each-chart {
padding-right: 8px;
}
}
@media only screen and (min-width: 900px) and (max-width: 960px) {
.show-sidebar .each-chart {
padding-right: 8px;
}
}
@media only screen and (max-width: 900px) {
.show-sidebar .each-chart {
padding-left: 5px;
padding-right: 0px;
}
}
@media only screen and (min-width: 1650px) {
.show-sidebar .each-chart {
padding-left: 16px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2000px) {
.show-sidebar .each-chart {
padding-left: 20px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2200px) {
.show-sidebar .each-chart {
padding-left: 23px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2640px) {
.show-sidebar .each-chart {
padding-left: 14px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2710px) {
.show-sidebar .each-chart {
padding-left: 17px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2820px) {
.show-sidebar .each-chart {
padding-left: 19px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2850px) {
.show-sidebar .each-chart {
padding-left: 21px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2880px) {
.show-sidebar .each-chart {
padding-left: 23px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2910px) {
.show-sidebar .each-chart {
padding-left: 25px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2940px) {
.show-sidebar .each-chart {
padding-left: 27px;
padding-right: 0px;
}
}
@media only screen and (min-width: 2970px) {
.show-sidebar .each-chart {
padding-left: 29px;
padding-right: 0px;
}
}
@media only screen and (min-width: 3000px) {
.show-sidebar .each-chart {
padding-left: 36px;
padding-right: 0px;
}
}
@media only screen and (min-width: 1820px) {
.show-sidebar .scope_widget {
margin-right: .5rem;
}
}
/* ===== admin-components/dashboard/dashboard.component.css (scoped) ===== */
app-dashboard {
#new_widget {
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
padding: 0 16px;
margin-bottom: 1rem;
border-radius: 8px;
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
cursor: pointer;
height: 36px;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 4px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 94%, white 6%), var(--input--background));
color: var(--primary--body--color);
white-space: nowrap;
}
#dashboard_settings {
display: flex;
}
.dashboard-actions {
align-items: flex-start;
flex-wrap: wrap;
}
.dashboard-action {
min-width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid
color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px !important;
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background)) !important;
color: var(--primary--body--color) !important;
font-size: 13px;
line-height: 1;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.dashboard-action:hover, #new_widget:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background:
linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)), var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.dashboard-action i, #new_widget i {
color: var(--primary--body--color) !important;
font-size: 13px;
}
.dashboard-action--save i {
color: #28a745 !important;
}
.scope_widget {
gap: 8px;
}
.dashboard-action--cancel i {
color: #dc3545 !important;
}
.dashboard-action--refresh i {
color: var(--primary--body--color) !important;
}
.dashboard-action--stop i {
color: #dc3545 !important;
}
.label-header {
color: var(--primary--body--color);
}
.settings_ul {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
border: var(--cart--border);
}
.settings_ul li a {
color: var(--primary--body--color);
}
.settings_ul li a:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
transition: .8s all;
}
#dashboard_settings_button {
padding: 0rem 1rem;
}
#stop-div {
display: none;
}
.dashboard-navbar-item {
float: left;
position: relative;
padding: 0 14px;
}
.select_arrow_dash::after {
content: "";
position: absolute;
right: 33px;
top: 49%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
opacity: 0.7;
pointer-events: none;
cursor: pointer;
}
.select_arrow_dash_dropdown::after {
content: "";
position: absolute;
right: 62px;
top: 17px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
opacity: 0.7;
pointer-events: none;
cursor: pointer;
}
.dashboard-item-select {
background-color: var(--body--background);
color: var(--primary--body--color);
border: none;
appearance: none;
outline: none;
cursor: pointer;
box-shadow: none;
height: 25px;
padding: 0px;
padding-left: .7rem;
width: 60px;
transform: translateY(1px);
cursor: pointer;
}
.dashboard-item-select:active {
border: none;
outline: none;
box-shadow: none;
}
.dashboard-item-select:focus {
border: none;
outline: none;
box-shadow: none;
}
#editing_word {
font-size: 10px;
display: none;
}
.dropstart {
height: 40px;
}
#dashboard_settings_button::before {
display: none;
}
.fa-gear {
animation: spin 2s infinite linear;
}
#dashboard_buttons_div {
display: none;
transition: .2s all;
min-height: 36px;
}
.dashboard-edit-toolbar {
margin-top: 0;
margin-left: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.dashboard-edit-toolbar__inner {
gap: 8px;
align-items: center;
}
.dashboard_button {
padding: 0.3rem .8rem;
width: auto;
min-width: 92px;
}
.dashboard_button:active {
border: var(--cart--border);
padding: 0.3rem .8rem;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
transition: .8s all;
cursor: pointer;
background-color: var(--body--background);
color: var(--primary--body--color);
height: 36px;
width: 100px;
}
.dashboard_button:focus {
border: var(--cart--border);
padding: 0.3rem .8rem;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
transition: .8s all;
cursor: pointer;
background-color: var(--body--background);
color: var(--primary--body--color);
height: 40px;
width: 100px;
}
.used-devices-card-button {
position: absolute;
right: 14px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 0;
background: transparent;
color: var(--primary--body--color);
font-size: 14px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
cursor: pointer;
z-index: 2;
}
.used-devices-card-button i {
font-size: 13px;
}
#new_widget span {
color: var(--primary--body--color) !important;
opacity: 0.9 !important;
}
.new_icon {
opacity: var(--opacity--100) !important;
color: var(--primary--body--color);
}
.item {
position: relative;
width: 100%;
border: var(--cart--border);
margin-bottom: 1rem;
box-shadow: var(--cart--box--shadow) !important;
border-radius: var(--cart--border--radius);
}
.item small {
opacity: var(--opacity--80) !important;
color: var(--primary--body--color) !important;
}
.item span {
opacity: var(--opacity--80) !important;
color: var(--primary--body--color) !important;
font-weight: bold;
}
.customize_cart_item span {
font-weight: normal !important;
cursor: pointer;
}
.more {
opacity: var(--opacity--50);
color: var(--primary--body--color);
cursor: pointer;
position: absolute;
right: 10px;
bottom: 10px;
}
.correlation {
margin-left: 1.5rem;
}
.cart {
border: var(--cart--border);
width: calc((50% - 1rem));
float: left;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
height: 200px;
}
.cart:nth-child(even) {
margin-left: .6rem;
}
.cart span {
opacity: var(--opacity--80) !important;
color: var(--primary--body--color) !important;
font-weight: bold !important;
}
.cart small {
opacity: var(--opacity--80);
color: var(--primary--body--color);
}
.min2000 {
width: calc((100% - 2.8rem) / 4);
height: 420px;
float: left;
margin-left: 0.55rem;
}
.min1500max2000 {
width: calc((100% - 0.9rem) / 3);
height: 420px;
float: left;
margin-left: 0.22rem;
}
.min900max1500 {
width: calc((100% - 0.6rem) / 2);
height: 420px;
float: left;
margin-left: 0.22rem;
}
.max900 {
width: 100%;
height: 420px;
}
.close_position {
cursor: pointer;
}
.save_position {
position: absolute;
bottom: 5px;
right: 25px;
padding: .2rem 1.5rem !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color) !important;
background-color: var(--body--background);
display: none;
}
.accordion-button {
height: 36px;
}
.accordion-item {
border: var(--cart--border);
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
}
.accordion-button:focus, b.accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.accordion-button[aria-expanded=false] .accordion-button::after {
margin-left: 1rem !important;
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
}
@media (max-width: 400px) {
.accordion-body .col-6 {
width: 100%;
}
}
@media only screen and (max-width: 650px) {
.accordion_ware .col-sm-4 {
width: 50%;
}
}
.accordion_settings {
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
padding: 5px;
text-align: center;
margin-bottom: .5rem;
cursor: pointer;
}
.oriana-dashboard-button {
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 30px;
font-size: 13px;
}
.oriana-dashboard-button:active {
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 30px;
font-size: 13px;
}
.oriana-dashboard-button:focus {
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 30px;
font-size: 13px;
}
.dashboard-dropdown {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
padding-top: 0px;
padding-bottom: 0px;
}
.dashboard-dropdown:hover {
background-color: var(--body--background);
}
.mobile-add:hover {
background-color: var(--primary--body--color);
}
.mobile-add {
font-size: 13px;
}
.mobile-add:hover {
color: var(--day--remain--color);
font-size: 13px;
background-color: var(--secondary--color);
}
.mobile-add:hover .mobile-chart-icon {
color: var(--day--remain--color) !important;
font-size: 13px;
background-color: var(--secondary--color);
}
.item-mobile {
color: var(--primary--body--color);
}
.mobile-add:hover .item-mobile {
color: var(--day--remain--color) !important;
}
@media (max-width: 600px) {
.save-cancel {
display: none;
}
.dashboard_button {
width: 40px;
min-width: 40px;
padding: 0.3rem .8rem;
height: 36px;
}
.dashboard_button:active {
width: 40px;
min-width: 40px;
padding: 0.3rem .8rem;
height: 36px;
}
.dashboard_button:focus {
width: 40px;
min-width: 40px;
padding: 0.3rem .8rem;
height: 36px;
}
}
@media (min-width: 200px) {
.animate {
animation-duration: 0.3s;
-webkit-animation-duration: 0.3s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
}
.slideIn {
-webkit-animation-name: slideIn;
animation-name: slideIn;
}
.dashboard-dropdown li:last-child {
border-bottom: none;
}
.first-item:hover .dashboard-item-select-dropdown {
background-color: var(--secondary--color);
color: var(--day--remain--color);
}
.dashboard-dropdown-item {
color: var(--primary--body--color);
font-size: 13px;
padding: 0rem 1rem;
height: 35px;
}
.dashboard-dropdown-item:hover {
color: var(--day--remain--color);
font-size: 13px;
background-color: var(--secondary--color);
}
.dashboard-dropdown-div {
display: none;
}
@media only screen and (max-width: 450px) {
#dashboard_settings {
flex-direction: column;
display: flex;
}
.mobile-div {
justify-content: center;
}
}
.new-widget-mobile {
padding: 0rem 1rem;
}
.accordion_filters {
display: none;
margin-left: 1rem;
}
@media screen and (min-width: 800px) and (max-width: 1140px) {
.cart:nth-child(even) {
margin-left: 0rem !important;
}
}
@media only screen and (max-width: 900px) {
.cart:nth-child(even) {
margin-left: 0rem !important;
}
.main-content {
padding-left: 15.5px;
}
}
@media only screen and (max-width: 1200px) {
.main_open .correlation {
margin-left: 0rem !important;
margin-right: 0rem !important;
}
}
@media only screen and (max-width: 1250px) {
.main_open .cart {
border: var(--cart--border);
width: 100%;
float: left;
margin-bottom: 1rem;
box-shadow: var(--cart--box--shadow);
}
.main_open .correlation {
margin-left: 1rem;
margin-right: 1rem;
}
.main_open .cart:nth-child(even) {
margin-left: 0rem !important;
}
}
.customize_cart {
position: absolute;
bottom: 30px;
right: -5px;
display: none;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
padding: .5rem;
float: right;
margin-right: 1rem;
background-color: var(--body--background);
}
.customize_cart_item {
margin-bottom: .3rem;
cursor: pointer;
}
.customize_cart_item i {
color: var(--primary--body--color) !important;
opacity: var(--sidebar--opacity) !important;
margin-right: .3rem;
}
#stop-div-accordion {
display: none;
}
@media screen and (max-width: 400px) {
.customize_cart {
position: absolute;
left: 225px;
top: 40px;
}
}
@media only screen and (max-width: 1140px) {
.cart {
border: var(--cart--border);
width: 100%;
float: left;
margin-bottom: 1rem;
box-shadow: var(--cart--box--shadow);
}
.correlation {
margin-right: 1rem;
}
}
@media only screen and (max-width: 800px) {
.correlation {
margin-right: 0rem;
margin-left: 0rem;
}
}
@media only screen and (min-width:2000px) {
.correlation {
margin-left: 1rem;
}
.cart:nth-child(even) {
margin-left: 1rem;
}
}
@media screen and (min-width: 1140px) and (max-width: 1500px) {
.correlation {
margin-left: 1rem;
}
.cart:nth-child(even) {
margin-left: 1rem;
}
}
@media only screen and (max-width:1140px) {
.correlation {
margin-left: 1rem !important;
}
.cart:nth-child(even) {
margin-left: 1rem;
}
}
@media only screen and (max-width:900px) {
.correlation {
margin-right: 0rem;
margin-left: 0rem !important;
}
.cart:nth-child(even) {
margin-left: 1rem;
}
}
@media only screen and (max-width:2440px) {
.main_open .correlation {
margin-right: 0.5rem;
}
.main_open .cart:nth-child(even) {
margin-left: 1rem;
}
}
@media only screen and (max-width:1830px) {
.main_open .correlation {
margin-left: 1rem !important;
margin-right: 0rem;
}
.main_open .cart:nth-child(even) {
margin-left: 1rem;
}
}
@media only screen and (max-width:1250px) {
.main_open .correlation {
margin-left: 1rem !important;
margin-right: 1rem;
}
.main_open .cart:nth-child(even) {
margin-left: 1rem;
}
}
@media only screen and (max-width:1201px) {
.main_open .correlation {
margin-left: 1rem !important;
margin-right: 1rem !important;
}
.main_open .cart:nth-child(even) {
margin-left: 1rem;
}
}
@media only screen and (max-width:1200px) {
.main_open .correlation {
margin-left: 0rem !important;
margin-right: 0rem !important;
}
.main_open .cart:nth-child(even) {
margin-left: 1rem;
}
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.div-graphic {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
}
.div-graphic.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.15);
z-index: 1;
}
.animation {
animation: alertoff .4s ease;
}
.chart-options {
color: var(--primary--body--color);
cursor: pointer;
}
.chart-options::after {
content: none;
}
.option-list {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.option-item {
color: var(--primary--body--color);
font-size: 13.5px;
cursor: pointer;
transition: .5s all;
}
.option-item:hover {
background-color: var(--secondary--color);
color: var(--day--remain--color);
transition: .5s all;
}
.dashboard-card:fullscreen {
background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
padding: 24px;
}
.dashboard-card:-webkit-full-screen {
background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
padding: 24px;
}
#eps-chart:fullscreen, #disk-usage-chart:fullscreen, #cpu-chart:fullscreen, #polygon-chart:fullscreen, #used-device-brand-counts:fullscreen, #weekly-log-counts:fullscreen, #monthly-log-counts:fullscreen, #weeklyeps:fullscreen, #monthlyeps:fullscreen {
background: var(--body--background);
}
#eps-chart:-webkit-full-screen, #disk-usage-chart:-webkit-full-screen, #cpu-chart:-webkit-full-screen, #polygon-chart:-webkit-full-screen, #used-device-brand-counts:-webkit-full-screen, #weekly-log-counts:-webkit-full-screen, #monthly-log-counts:-webkit-full-screen, #weeklyeps:-webkit-full-screen, #monthlyeps:-webkit-full-screen {
background: var(--body--background);
}
@media only screen and (max-width: 1820px) {
.each-chart {
width: 33% !important;
}
.scope_widget {
margin-right: .2rem;
}
}
@media only screen and (max-width: 1280px) {
.each-chart {
width: 50% !important;
}
.scope_widget {
margin-right: 0rem;
}
}
@media only screen and (max-width: 950px) {
.each-chart {
width: 100% !important;
}
}
@media only screen and (min-width: 1280px) and (max-width: 1820px) {
.each-chart {
padding-right: 0px;
padding-left: 15px;
}
}
@media only screen and (min-width: 1370px) and (max-width: 1820px) {
#new_widget {
margin-right: .1rem;
}
}
.passive {
opacity: 0.2;
pointer-events: none;
}
.dashboard-action.dashboard_button:active, .dashboard-action.dashboard_button:focus {
height: 36px;
min-width: 92px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent) !important;
border-radius: 8px !important;
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background)) !important;
color: var(--primary--body--color) !important;
box-shadow: var(--cart--box--shadow) !important;
}
.mobile-add {
padding: 4px 8px;
}
.new-widget-mobile {
min-height: 35px;
border-radius: 8px;
color: var(--primary--body--color);
transition: background-color 0.18s ease, color 0.18s ease;
}
.mobile-add:hover .new-widget-mobile {
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.dashboard-page-tabs-container {
margin-bottom: 16px;
border-bottom: 2px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
position: relative;
z-index: 10;
}
.dashboard-page-tabs {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
padding-bottom: 0;
position: relative;
}
.dashboard-page-tabs::-webkit-scrollbar {
height: 3px;
}
.dashboard-page-tabs::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--primary--body--color) 20%, transparent);
border-radius: 3px;
}
.dashboard-page-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
cursor: pointer;
font-size: 13px;
color: var(--primary--body--color);
opacity: 0.65;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
border-radius: 6px 6px 0 0;
position: relative;
}
.dashboard-page-tab:hover {
opacity: 0.85;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
}
.dashboard-page-tab.active {
opacity: 1;
border-bottom-color: var(--secondary--color);
font-weight: 600;
}
.tab-icon {
font-size: 12px;
opacity: 0.7;
}
.tab-name {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
}
.tab-menu {
margin-left: 4px;
}
.tab-menu-trigger {
font-size: 12px;
opacity: 0;
transition: opacity 0.15s ease;
padding: 2px 4px;
cursor: pointer;
}
.dashboard-page-tab:hover .tab-menu-trigger {
opacity: 0.6;
}
.tab-menu-trigger:hover {
opacity: 1 !important;
}
.tab-dropdown-menu {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
min-width: 140px;
z-index: 1050;
}
.tab-dropdown-menu .dropdown-item {
color: var(--primary--body--color);
font-size: 13px;
padding: 6px 12px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.tab-dropdown-menu .dropdown-item:hover {
background-color: var(--secondary--color);
color: var(--day--remain--color);
}
.tab-edit-input {
background: var(--input--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 4px;
color: var(--primary--body--color);
font-size: 13px;
padding: 2px 8px;
height: 26px;
width: 120px;
outline: none;
}
.tab-edit-input:focus {
border-color: var(--secondary--color);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 20%, transparent);
}
.tab-action-icon {
font-size: 13px;
cursor: pointer;
padding: 2px;
transition: color 0.15s ease;
}
.save-icon {
color: #28a745;
}
.save-icon:hover {
color: #1e7e34;
}
.cancel-icon {
color: #dc3545;
}
.cancel-icon:hover {
color: #bd2130;
}
.add-page-tab {
opacity: 0.4;
padding: 8px 12px;
border-bottom: 2px solid transparent;
}
.add-page-tab:hover {
opacity: 0.7;
}
.add-page-form {
opacity: 1 !important;
gap: 6px;
}
.dashboard-page-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.dashboard-page-header__info {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.dashboard-page-header__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--secondary--color);
color: #fff;
font-size: 15px;
}
.dashboard-page-header__text {
min-width: 0;
}
.dashboard-page-header__title {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
color: var(--primary--body--color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-page-header__description {
display: flex;
align-items: center;
gap: 5px;
margin: 2px 0 0;
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 420px;
}
.dashboard-page-header__description i {
font-size: 10px;
flex-shrink: 0;
}
.empty-page-message {
min-height: calc(100vh - 250px);
display: flex;
align-items: center;
justify-content: center;
padding: 34px 12px 44px;
}
.empty-page-message__card {
width: min(100%, 980px);
display: grid;
grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
align-items: center;
gap: 28px;
padding: 28px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 20%, transparent);
border-radius: 32px;
background:
radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 30%),
radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--secondary--color) 9%, transparent), transparent 24%),
linear-gradient(135deg, color-mix(in srgb, var(--input--background) 90%, white 10%), color-mix(in srgb, var(--body--background) 96%, black 4%));
box-shadow: var(--cart--box--shadow), 0 28px 56px color-mix(in srgb, #000 16%, transparent);
position: relative;
overflow: hidden;
}
.empty-page-message__card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(115deg, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 42%),
linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
pointer-events: none;
}
.empty-page-message__visual, .empty-page-message__content, .empty-page-message__eyebrow, .empty-page-message__title, .empty-page-message__description, .empty-page-message__actions, .empty-page-message__hints {
position: relative;
z-index: 1;
}
.empty-page-message__visual {
min-height: 340px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.empty-page-message__glow {
position: absolute;
width: 270px;
height: 270px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--secondary--color) 22%, transparent), transparent 66%);
filter: blur(8px);
opacity: 0.9;
}
.empty-page-message__screen {
width: min(100%, 320px);
min-height: 260px;
padding: 14px;
border-radius: 28px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 18%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 84%, white 3%), color-mix(in srgb, var(--input--background) 92%, black 8%));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 42px color-mix(in srgb, #000 18%, transparent);
transform: rotate(-6deg);
}
.empty-page-message__screen-header {
display: flex;
gap: 6px;
margin-bottom: 16px;
}
.empty-page-message__screen-header span {
width: 10px;
height: 10px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary--body--color) 20%, transparent);
}
.empty-page-message__screen-body {
position: relative;
min-height: 214px;
border-radius: 20px;
padding: 18px;
overflow: hidden;
background:
linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 38%),
color-mix(in srgb, var(--body--background) 82%, black 18%);
}
.empty-page-message__screen-body::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(color-mix(in srgb, var(--primary--body--color) 5%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--primary--body--color) 5%, transparent) 1px, transparent 1px);
background-size: 26px 26px;
opacity: 0.35;
}
.empty-page-message__stat {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--primary--body--color);
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.empty-page-message__stat i {
color: var(--secondary--color);
}
.empty-page-message__bars {
position: absolute;
left: 22px;
right: 22px;
bottom: 24px;
height: 128px;
display: flex;
align-items: end;
gap: 14px;
z-index: 1;
}
.empty-page-message__bars span {
flex: 1;
border-radius: 16px 16px 8px 8px;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 68%, white 32%), color-mix(in srgb, var(--secondary--color) 24%, transparent));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
opacity: 0.85;
}
.empty-page-message__bars span:nth-child(1) { height: 34%; }
.empty-page-message__bars span:nth-child(2) { height: 62%; }
.empty-page-message__bars span:nth-child(3) { height: 48%; }
.empty-page-message__bars span:nth-child(4) { height: 78%; }
.empty-page-message__pulse-ring {
position: absolute;
right: 18px;
top: 22px;
width: 72px;
height: 72px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--secondary--color) 30%, transparent);
box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--secondary--color) 8%, transparent);
z-index: 1;
}
.empty-page-message__pulse-ring::before, .empty-page-message__pulse-ring::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--secondary--color) 20%, transparent);
}
.empty-page-message__pulse-ring::after {
inset: 22px;
background: color-mix(in srgb, var(--secondary--color) 36%, transparent);
border: none;
}
.empty-page-message__content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
padding-right: 8px;
}
.empty-page-message__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 13px;
border-radius: 999px;
margin-bottom: 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--primary--body--color);
background: color-mix(in srgb, var(--secondary--color) 52%, transparent);
}
.empty-page-message__title {
margin: 0;
color: var(--primary--body--color);
max-width: 520px;
font-weight: 700;
line-height: 1.05;
}
.empty-page-message__description {
max-width: 500px;
margin: 14px 0 0;
color: color-mix(in srgb, var(--primary--body--color) 72%, transparent);
font-size: 15px;
line-height: 1.8;
}
.empty-page-message__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-top: 26px;
}
.empty-page-message__button {
min-width: 210px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 20px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 999px;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 34%, transparent), color-mix(in srgb, var(--secondary--color) 14%, transparent));
color: var(--primary--body--color);
font-size: 13px;
font-weight: 700;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.empty-page-message__button:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 52%, transparent);
box-shadow: 0 16px 30px color-mix(in srgb, var(--secondary--color) 16%, transparent);
}
.empty-page-message__microcopy {
display: inline-flex;
align-items: center;
gap: 8px;
color: color-mix(in srgb, var(--primary--body--color) 66%, transparent);
font-size: 12px;
font-weight: 600;
}
.empty-page-message__microcopy i {
color: var(--secondary--color);
}
.empty-page-message__button i, .empty-page-message__button span {
color: inherit;
}
.empty-page-message__hints {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
margin-top: 28px;
}
.empty-page-message__hint {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 74%, transparent);
font-size: 12px;
font-weight: 600;
}
.empty-page-message__hint i {
color: var(--secondary--color);
}
@media (max-width: 768px) {
.empty-page-message {
min-height: calc(100vh - 290px);
padding: 22px 0 28px;
}
.empty-page-message__card {
grid-template-columns: 1fr;
gap: 18px;
padding: 22px 16px 24px;
border-radius: 24px;
}
.empty-page-message__visual {
min-height: 250px;
}
.empty-page-message__screen {
width: min(100%, 290px);
transform: none;
}
.empty-page-message__content {
align-items: center;
text-align: center;
padding-right: 0;
}
.empty-page-message__title {
line-height: 1.12;
}
.empty-page-message__description {
font-size: 14px;
line-height: 1.7;
}
.empty-page-message__actions {
width: 100%;
align-items: center;
}
.empty-page-message__button {
width: 100%;
min-width: 0;
}
.empty-page-message__hints {
justify-content: center;
margin-top: 24px;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
display: none;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.submenu-list {
top: 0;
left: 100%;
margin-top: -2px;
margin-left: 0;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
min-width: 160px;
z-index: 1060;
}
.submenu-list .dropdown-item {
color: var(--primary--body--color);
font-size: 13px;
padding: 6px 12px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.submenu-list .dropdown-item:hover {
background-color: var(--secondary--color);
color: var(--day--remain--color);
}
@media only screen and (max-width: 768px) {
.submenu-list {
left: auto;
right: 100%;
}
}
}
/* ===== admin-components/dashboard/device-flag/device-flag.component.css (global) ===== */
.darkBlue-theme .tooltip_td {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.darkBlue-theme .tooltip_th {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.lightBlue-theme .tooltip_td {
border: 1px solid var(--primary--body--color) !important;
}
.lightBlue-theme .tooltip_th {
border: 1px solid var(--primary--body--color) !important;
}
/* ===== admin-components/dashboard/device-flag/device-flag.component.css (scoped) ===== */
app-device-flag {
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
border-bottom: var(--cart--border);
background-color: var(--body--background);
}
.label-header {
color: var(--primary--body--color);
}
.header-bottom {
border-bottom: 1px solid var(--primary--body--color);
}
ul.tools {
display: none;
list-style: none;
box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
position: absolute;
padding: 0;
}
ul.tools li {
height: 25px;
margin: 4px;
padding: 5px;
cursor: pointer;
color: var(--primary--body--color);
}
.filter-tools {
font-size: 11px;
}
#contextmenu {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
height: 215px;
border: var(--cart--border)
}
.mat-icon {
color: var(--secondary--color);
transform: translateY(5px);
}
.context-header {
box-shadow: var(--cart--box--shadow);
border-bottom: var(--cart--border);
}
#tooltip_flag {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
.tooltip_th {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_td {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_level {
color: var(--primary--body--color);
}
.tooltip_color {
width: 20px;
height: 20px;
border-radius: 50%;
transform: translateY(2px);
}
.tooltip_td_first {
background-color: var(--body--background);
}
.tooltip_table {
background-color: var(--body--background);
}
.tooltip_close_button {
color: var(--primary--body--color);
cursor: pointer;
}
}
/* ===== admin-components/dashboard/dynamic-dashboard/dynamic-dashboard.component.css (global) ===== */
@media (max-width:576px) {
.show-sidebar .input-group-append {
width: 15%;
}
.show-sidebar .input_width {
width: 70%;
}
}
@media (max-width:520px) {
.show-sidebar .oriana-button-add-flag {
width: 140px;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .accordion-add-widget-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-add-widget-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-add-widget-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-add-widget-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-add-widget-button::after {
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-add-widget-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-add-widget-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .button-design[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .button-design[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .button-design[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .button-design[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.dark-theme .modal-content, .darkBlue-theme .modal-content {
background:
linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.lightBlue-theme .dynamic-widget-modal, .darkBlue-theme .dynamic-widget-modal {
border: none !important;
}
.dark-theme .newDevice_widget_header, .darkBlue-theme .newDevice_widget_header {
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
.dark-theme .dynamic-form-section, .darkBlue-theme .dynamic-form-section {
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 42%),
color-mix(in srgb, var(--body--background) 86%, white 4%);
}
.dark-theme .dynamic-toggle-card, .darkBlue-theme .dynamic-toggle-card {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme .dynamic-form-section {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.1), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.darkBlue-theme .dynamic-form-section {
border: none;
}
.lightBlue-theme .new_input_add_correlation, .lightBlue-theme .choose_select_correlation, .lightBlue-theme .description_area {
border: none !important;
background-color: #ffffff !important;
}
.darkBlue-theme .new_input_add_correlation, .darkBlue-theme .choose_select_correlation, .darkBlue-theme .description_area {
border: none !important;
}
.lightBlue-theme .dynamic-toggle-card, .darkBlue-theme .dynamic-toggle-card, .lightBlue-theme .accordion-item-column, .darkBlue-theme .accordion-item-column, .lightBlue-theme .accordion-add-widget-button[aria-expanded="true"], .darkBlue-theme .accordion-add-widget-button[aria-expanded="true"], .lightBlue-theme .accordion-add-widget-button[aria-expanded="false"], .darkBlue-theme .accordion-add-widget-button[aria-expanded="false"], .lightBlue-theme .accordion-body, .darkBlue-theme .accordion-body {
border: none !important;
}
/* ===== admin-components/dashboard/dynamic-dashboard/dynamic-dashboard.component.css (scoped) ===== */
app-dynamic-dashboard {
.modal-content {
background:
linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background));
height: auto;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 25%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.dynamic-widget-modal {
min-height: 100%;
}
.dynamic-widget-shell {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.dynamic-widget-header {
align-items: flex-start !important;
}
.dynamic-widget-title {
min-width: 0;
}
.dynamic-widget-title > span {
display: block;
color: var(--primary--body--color);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
opacity: 0.82;
margin-bottom: 2px;
}
.dynamic-widget-title h6 {
margin: 0;
font-size: 17px;
font-weight: 700;
}
.dynamic-widget-close {
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 8px;
background-color: var(--input--background);
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.dynamic-widget-close:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 10%, var(--input--background));
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.dynamic-widget-form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"info filters"
"chart toggles"
"theme theme"
"footer footer";
gap: 16px;
align-items: start;
}
.dynamic-section-info {
grid-area: info;
}
.dynamic-section-filters {
grid-area: filters;
align-self: start;
min-height: 0;
}
.dynamic-section-chart {
grid-area: chart;
}
.dynamic-section-theme {
grid-area: theme;
align-self: start;
max-height: none;
overflow: visible;
}
.dynamic-section-theme::-webkit-scrollbar {
width: 4px;
}
.dynamic-section-theme::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
border-radius: 999px !important;
}
.dynamic-section-toggles {
grid-area: toggles;
}
.dynamic-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 25%, transparent);
border-radius: 10px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 8%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 88%, var(--input--background) 12%);
box-shadow: var(--cart--box--shadow);
min-height: 0;
}
.dynamic-form-section__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--primary--body--color);
}
.dynamic-form-section__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 12px;
}
.dynamic-form-section__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.92;
}
.dynamic-field {
margin-bottom: 12px;
}
.dynamic-field:last-child {
margin-bottom: 0;
}
.dynamic-field .form-label {
margin-bottom: 6px;
font-size: 12.5px;
font-weight: 650;
}
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 25%, transparent);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
}
.correlation-button-select {
height: 36px;
text-align: left;
}
.correlation-button-select::after {
content: none;
}
.choose_select_correlation {
background-color: var(--input--background);
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 25%, transparent);
box-shadow: var(--cart--box--shadow);
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.choose_select_correlation:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.choose_select_correlation:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.new-input-div {
border-radius: 8px;
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
}
.filter-clear-button-correlation {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-correlation:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-correlation:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 8px;
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
outline: none;
min-height: 92px;
resize: vertical;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.description_area::placeholder {
color: var(--primary--body--color);
}
.new_input_add_correlation:focus, .description_area:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.newDevice_widget_header {
position: sticky;
top: 0;
z-index: 5;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
box-shadow: var(--cart--box--shadow);
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
padding: 16px 18px !important;
}
.modal-footer-dynamic {
grid-area: footer;
margin-left: auto;
bottom: 0;
z-index: 4;
border-top: none;
padding: 14px 0 0;
margin-top: 2px;
}
.oriana-button-add-flag {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 25px;
font-size: 13px;
}
.oriana-button-add-flag:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 25px;
font-size: 13px;
}
.oriana-button-add-flag :active {
color: var(--primary--body--color);
}
.input-group-append {
width: 6%;
}
.input_width {
width: 75%;
}
textarea.form-control.is-valid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
textarea.form-control.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.accordion-add-widget-button {
background-color: var(--input--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px 12px;
height: 38px;
font-size: 13px;
font-weight: 650;
opacity: 0.9;
}
.accordion-button:not(.collapsed)::after {
transform: rotate(0deg) !important;
}
.accordion-button.collapsed::after {
transform: rotate(180deg) !important;
}
.accordion-add-widget-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 8px !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion_filters_device_logs {
display: none;
}
.accordion-button:focus, b.accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.accordion-button[aria-expanded=false] .accordion-button::after {
margin-left: 1rem !important;
}
.accordion {
--bs-accordion-border-width: 0px;
}
.accordion-item {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: 8px;
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
border-radius: 8px !important;
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
padding: 10px 12px !important;
font-size: 12.5px;
}
.accordion-body i {
color: var(--secondary--color);
margin-right: 6px;
}
.accordion_settings {
text-align: left;
margin-bottom: .5rem;
cursor: pointer;
display: grid;
gap: 12px;
}
.dynamic-section-filters .accordion-collapse {
max-height: 170px;
overflow-y: auto;
}
.dynamic-section-filters .accordion-collapse::-webkit-scrollbar {
width: 4px;
}
.dynamic-section-filters .accordion-collapse::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 50%, transparent) !important;
border-radius: 999px !important;
}
.dynamic-theme-section {
padding-bottom: 12px;
}
.dynamic-theme-item {
overflow: hidden;
border-radius: 12px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 88%, white 4%), var(--input--background));
border-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.dynamic-theme-title {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
}
.dynamic-theme-title i {
color: var(--secondary--color);
font-size: 11px;
}
.button-design {
min-height: 58px;
padding: 12px 14px !important;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 40%),
color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
}
.button-design::after {
margin-left: auto;
}
.dynamic-theme-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 7px;
color: #dc3545;
cursor: pointer;
margin-left: auto;
transition: background-color 0.18s ease, transform 0.18s ease;
}
.dynamic-theme-remove:hover {
transform: translateY(-1px);
background-color: color-mix(in srgb, #dc3545 12%, transparent);
}
.dynamic-theme-remove i {
color: #dc3545 !important;
}
.dynamic-color-grid {
row-gap: 10px;
}
.dynamic-color-grid .col-lg-6 {
width: 50%;
}
.dynamic-color-grid .dynamic-field {
margin-bottom: 0;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--body--background) 82%, var(--input--background));
}
.dynamic-color-grid input[type="color"] {
padding: 2px !important;
min-height: 34px;
height: 34px;
cursor: pointer;
border-radius: 8px !important;
}
.dynamic-color-grid .color-headers {
display: block;
min-height: 18px;
margin-bottom: 6px;
font-size: 11.5px;
font-weight: 700;
opacity: 0.78;
}
.dynamic-theme-add {
margin-top: 10px;
grid-column: 1 / -1;
}
.dynamic-theme-add button {
width: 100%;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 42%, transparent);
border-radius: 8px;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.dynamic-theme-add button:hover {
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--secondary--color);
}
.dynamic-toggle-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.dynamic-toggle-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
}
.dynamic-toggle-card .label-header {
font-size: 13px;
font-weight: 650;
margin: 0;
}
.dynamic-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dynamic-submit:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 12px 24px color-mix(in srgb, var(--secondary--color) 16%, transparent) !important;
}
.color-headers {
color: var(--primary--body--color);
font-size: 12.5px;
}
.modal.right .modal-dialog {
width: min(1140px, 92vw);
max-width: 1140px;
}
.modal.right .modal-body {
max-height: calc(100vh - 88px);
overflow-y: auto;
padding: 18px 18px 80px;
}
.modal.right .modal-body::-webkit-scrollbar {
width: 5px;
}
.modal.right .modal-body::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent) !important;
border-radius: 999px !important;
}
@media only screen and (max-width: 1200px) {
.modal.right .modal-dialog {
width: min(1040px, 94vw);
}
}
@media only screen and (max-width: 850px) {
.modal.right .modal-dialog {
width: 100% !important;
}
.dynamic-toggle-grid {
grid-template-columns: 1fr;
}
.dynamic-widget-form {
grid-template-columns: 1fr;
grid-template-areas:
"info"
"filters"
"chart"
"toggles"
"theme"
"footer";
}
.dynamic-section-theme {
max-height: none;
overflow: visible;
}
.accordion_settings {
grid-template-columns: 1fr;
}
.dynamic-form-section {
padding: 12px;
}
}
}
/* ===== admin-components/dashboard/update-dashboard-item/update-dashboard-item.component.css (global) ===== */
@media (max-width:576px) {
.show-sidebar .input-group-append {
width: 15%;
}
.show-sidebar .input_width {
width: 70%;
}
}
@media (max-width:520px) {
.show-sidebar .oriana-button-add-flag {
width: 140px;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .accordion-add-widget-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-add-widget-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-add-widget-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-add-widget-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-add-widget-button::after {
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-add-widget-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-add-widget-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .button-design[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .button-design[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .button-design[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .button-design[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.dark-theme .modal-content, .darkBlue-theme .modal-content {
background:
linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.lightBlue-theme .dynamic-widget-modal, .darkBlue-theme .dynamic-widget-modal {
border: none !important;
}
.dark-theme .newDevice_widget_header_item, .darkBlue-theme .newDevice_widget_header_item {
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
.dark-theme .dynamic-form-section, .darkBlue-theme .dynamic-form-section {
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 42%),
color-mix(in srgb, var(--body--background) 86%, white 4%);
}
.dark-theme .dynamic-toggle-card, .darkBlue-theme .dynamic-toggle-card {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme .dynamic-form-section {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.1), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.darkBlue-theme .dynamic-form-section {
border: none;
}
.lightBlue-theme .new_input_add_correlation, .lightBlue-theme .choose_select_correlation, .lightBlue-theme .description_area {
border: none !important;
background-color: #ffffff !important;
}
.darkBlue-theme .new_input_add_correlation, .darkBlue-theme .choose_select_correlation, .darkBlue-theme .description_area {
border: none !important;
}
.lightBlue-theme .dynamic-toggle-card, .darkBlue-theme .dynamic-toggle-card, .lightBlue-theme .accordion-item-column, .darkBlue-theme .accordion-item-column, .lightBlue-theme .accordion-add-widget-button[aria-expanded="true"], .darkBlue-theme .accordion-add-widget-button[aria-expanded="true"], .lightBlue-theme .accordion-add-widget-button[aria-expanded="false"], .darkBlue-theme .accordion-add-widget-button[aria-expanded="false"], .lightBlue-theme .accordion-body, .darkBlue-theme .accordion-body {
border: none !important;
}
/* ===== admin-components/dashboard/update-dashboard-item/update-dashboard-item.component.css (scoped) ===== */
app-update-dashboard-item {
.modal-content {
background:
linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background));
height: auto;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 25%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.dynamic-widget-modal {
min-height: 100%;
}
.dynamic-widget-shell {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.dynamic-widget-header {
align-items: flex-start !important;
}
.dynamic-widget-title {
min-width: 0;
}
.dynamic-widget-title > span {
display: block;
color: var(--primary--body--color);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
opacity: 0.82;
margin-bottom: 2px;
}
.dynamic-widget-title h6 {
margin: 0;
font-size: 17px;
font-weight: 700;
}
.dynamic-widget-close {
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 8px;
background-color: var(--input--background);
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.dynamic-widget-close:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 10%, var(--input--background));
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.dynamic-widget-form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"info filters"
"chart toggles"
"theme theme"
"footer footer";
gap: 16px;
align-items: start;
}
.dynamic-section-info {
grid-area: info;
}
.dynamic-section-filters {
grid-area: filters;
align-self: start;
min-height: 0;
}
.dynamic-section-chart {
grid-area: chart;
}
.dynamic-section-theme {
grid-area: theme;
align-self: start;
max-height: none;
overflow: visible;
}
.dynamic-section-theme::-webkit-scrollbar {
width: 4px;
}
.dynamic-section-theme::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
border-radius: 999px !important;
}
.dynamic-section-toggles {
grid-area: toggles;
}
.dynamic-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 25%, transparent);
border-radius: 10px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 8%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 88%, var(--input--background) 12%);
box-shadow: var(--cart--box--shadow);
min-height: 0;
}
.dynamic-form-section__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--primary--body--color);
}
.dynamic-form-section__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 12px;
}
.dynamic-form-section__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.92;
}
.dynamic-field {
margin-bottom: 12px;
}
.dynamic-field:last-child {
margin-bottom: 0;
}
.dynamic-field .form-label {
margin-bottom: 6px;
font-size: 12.5px;
font-weight: 650;
}
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 25%, transparent);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
}
.correlation-button-select {
height: 36px;
text-align: left;
}
.correlation-button-select::after {
content: none;
}
.choose_select_correlation {
background-color: var(--input--background);
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 25%, transparent);
box-shadow: var(--cart--box--shadow);
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.choose_select_correlation:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.choose_select_correlation:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.new-input-div {
border-radius: 8px;
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
}
.filter-clear-button-correlation {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-correlation:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-correlation:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 8px;
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
outline: none;
min-height: 92px;
resize: vertical;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.description_area::placeholder {
color: var(--primary--body--color);
}
.new_input_add_correlation:focus, .description_area:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.newDevice_widget_header_item {
position: sticky;
top: 0;
z-index: 5;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
box-shadow: var(--cart--box--shadow);
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
padding: 16px 18px !important;
}
.modal-footer {
grid-area: footer;
z-index: 4;
border-top: none;
padding: 14px 0 0;
margin-top: 2px;
}
.oriana-button-add-flag {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 25px;
font-size: 13px;
}
.oriana-button-add-flag:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 25px;
font-size: 13px;
}
.oriana-button-add-flag :active {
color: var(--primary--body--color);
}
.input-group-append {
width: 6%;
}
.input_width {
width: 75%;
}
textarea.form-control.is-valid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
textarea.form-control.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.accordion-add-widget-button {
background-color: var(--input--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px 12px;
height: 38px;
font-size: 13px;
font-weight: 650;
opacity: 0.9;
}
.accordion-button:not(.collapsed)::after {
transform: rotate(0deg) !important;
}
.accordion-button.collapsed::after {
transform: rotate(180deg) !important;
}
.accordion-add-widget-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 8px !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion_filters_device_logs {
display: none;
}
.accordion-button:focus, b.accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.accordion-button[aria-expanded=false] .accordion-button::after {
margin-left: 1rem !important;
}
.accordion {
--bs-accordion-border-width: 0px;
}
.accordion-item {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: 8px;
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
border-radius: 8px !important;
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
padding: 10px 12px !important;
font-size: 12.5px;
}
.accordion-body i {
color: var(--secondary--color);
margin-right: 6px;
}
.accordion_settings {
text-align: left;
margin-bottom: .5rem;
cursor: pointer;
display: grid;
gap: 12px;
}
.dynamic-section-filters .accordion-collapse {
max-height: 170px;
overflow-y: auto;
}
.dynamic-section-filters .accordion-collapse::-webkit-scrollbar {
width: 4px;
}
.dynamic-section-filters .accordion-collapse::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 50%, transparent) !important;
border-radius: 999px !important;
}
.dynamic-theme-section {
padding-bottom: 12px;
}
.dynamic-theme-item {
overflow: hidden;
border-radius: 12px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--input--background) 88%, white 4%), var(--input--background));
border-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.dynamic-theme-title {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
}
.dynamic-theme-title i {
color: var(--secondary--color);
font-size: 11px;
}
.button-design {
min-height: 58px;
padding: 12px 14px !important;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 40%),
color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
}
.button-design::after {
margin-left: auto;
}
.dynamic-theme-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 7px;
color: #dc3545;
cursor: pointer;
margin-left: auto;
transition: background-color 0.18s ease, transform 0.18s ease;
}
.dynamic-theme-remove:hover {
transform: translateY(-1px);
background-color: color-mix(in srgb, #dc3545 12%, transparent);
}
.dynamic-theme-remove i {
color: #dc3545 !important;
}
.dynamic-color-grid {
row-gap: 10px;
}
.dynamic-color-grid .col-lg-6 {
width: 50%;
}
.dynamic-color-grid .dynamic-field {
margin-bottom: 0;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--body--background) 82%, var(--input--background));
}
.dynamic-color-grid input[type="color"] {
padding: 2px !important;
min-height: 34px;
height: 34px;
cursor: pointer;
border-radius: 8px !important;
}
.dynamic-color-grid .color-headers {
display: block;
min-height: 18px;
margin-bottom: 6px;
font-size: 11.5px;
font-weight: 700;
opacity: 0.78;
}
.dynamic-theme-add {
margin-top: 10px;
grid-column: 1 / -1;
}
.dynamic-theme-add button {
width: 100%;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 42%, transparent);
border-radius: 8px;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.dynamic-theme-add button:hover {
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--secondary--color);
}
.dynamic-toggle-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.dynamic-toggle-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
}
.dynamic-toggle-card .label-header {
font-size: 13px;
font-weight: 650;
margin: 0;
}
.dynamic-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dynamic-submit:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 12px 24px color-mix(in srgb, var(--secondary--color) 16%, transparent) !important;
}
.color-headers {
color: var(--primary--body--color);
font-size: 12.5px;
}
.modal.right .modal-dialog {
width: min(1140px, 92vw);
max-width: 1140px;
}
.modal.right .modal-body {
max-height: calc(100vh - 88px);
overflow-y: auto;
padding: 18px 18px 80px;
}
.modal.right .modal-body::-webkit-scrollbar {
width: 5px;
}
.modal.right .modal-body::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent) !important;
border-radius: 999px !important;
}
@media only screen and (max-width: 1200px) {
.modal.right .modal-dialog {
width: min(1040px, 94vw);
}
}
@media only screen and (max-width: 850px) {
.modal.right .modal-dialog {
width: 100% !important;
}
.dynamic-toggle-grid {
grid-template-columns: 1fr;
}
.dynamic-widget-form {
grid-template-columns: 1fr;
grid-template-areas:
"info"
"filters"
"chart"
"toggles"
"theme"
"footer";
}
.dynamic-section-theme {
max-height: none;
overflow: visible;
}
.accordion_settings {
grid-template-columns: 1fr;
}
.dynamic-form-section {
padding: 12px;
}
}
}
/* ===== admin-components/data-archive/archive-status/archive-status.component.css (global) ===== */
.lightBlue-theme .catalog-btn-primary, .dark-theme .catalog-btn-primary {
color: white;
}
/* ===== admin-components/data-archive/archive-status/archive-status.component.css (scoped) ===== */
app-archive-status {
.catalog-panel {
display: flex;
flex-direction: column;
margin-top: 20px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 12px;
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
}
.catalog-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-radius: 12px 12px 0 0;
flex-wrap: wrap;
gap: 10px;
}
.catalog-header-title {
display: flex;
align-items: center;
gap: 10px;
}
.catalog-header-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.catalog-title-text {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.catalog-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.input-catalog-search {
width: auto;
min-width: 220px;
background-color: var(--input--background);
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px;
padding: 6px 10px;
font-size: 13px;
}
.catalog-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.catalog-icon-btn:hover:not(:disabled) {
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--secondary--color);
}
.catalog-icon-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.catalog-btn {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.catalog-btn:hover:not(:disabled) {
filter: brightness(0.97);
}
.catalog-btn-primary {
background-color: var(--secondary--color);
border-color: var(--secondary--color);
color: var(--primary--sidebar--color);
}
.catalog-btn-primary:hover:not(:disabled) {
filter: brightness(1.08);
}
.catalog-btn-sm {
padding: 4px 10px;
font-size: 12px;
}
.catalog-panel-content {
padding: 12px 18px 18px 18px;
overflow-x: auto;
}
.catalog-empty {
padding: 18px 0;
text-align: center;
font-size: 13px;
color: color-mix(in srgb, var(--primary--body--color) 65%, transparent);
}
.catalog-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--primary--body--color);
}
.catalog-table th {
text-align: left;
padding: 8px 10px;
font-weight: 600;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 15%, transparent);
white-space: nowrap;
}
.catalog-table td {
padding: 8px 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
vertical-align: middle;
}
.catalog-device-cell {
font-size: 13px;
}
.device-name {
display: block;
font-weight: 600;
color: var(--primary--body--color);
}
.device-ip {
font-family: monospace;
font-size: 12px;
color: color-mix(in srgb, var(--primary--body--color) 75%, transparent);
}
.device-brand-cell {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
}
.device-brand-icon {
width: 22px;
height: 22px;
object-fit: contain;
}
.catalog-error-cell {
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: color-mix(in srgb, var(--primary--body--color) 75%, transparent);
}
.state-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.state-completed {
background-color: color-mix(in srgb, #639922 18%, transparent);
color: #639922;
}
.state-failed {
background-color: color-mix(in srgb, #e24b4a 15%, transparent);
color: #e24b4a;
}
}
/* ===== admin-components/data-archive/create-custom-archive/create-custom-archive.component.css (global) ===== */
.lightBlue-theme .catalog-btn-primary, .dark-theme .catalog-btn-primary {
color: white;
}
/* ===== admin-components/data-archive/create-custom-archive/create-custom-archive.component.css (scoped) ===== */
app-create-custom-archive {
.catalog-panel {
display: flex;
flex-direction: column;
margin-top: 20px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 12px;
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
}
.catalog-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-radius: 12px 12px 0 0;
flex-wrap: wrap;
gap: 10px;
}
.catalog-header-title {
display: flex;
align-items: center;
gap: 10px;
}
.catalog-header-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.catalog-title-text {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.catalog-btn {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.catalog-btn:hover:not(:disabled) {
filter: brightness(0.97);
}
.catalog-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.catalog-btn-primary {
background-color: var(--secondary--color);
border-color: var(--secondary--color);
color: var(--primary--sidebar--color);
}
.catalog-btn-primary:hover:not(:disabled) {
filter: brightness(1.08);
}
.catalog-btn-sm {
padding: 4px 10px;
font-size: 12px;
}
.catalog-panel-content {
padding: 0 18px 18px 18px;
overflow-y: auto;
overflow-x: auto;
max-height: calc(100vh - 220px);
}
.catalog-empty {
padding: 18px 0;
text-align: center;
font-size: 13px;
color: color-mix(in srgb, var(--primary--body--color) 65%, transparent);
}
.catalog-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--primary--body--color);
margin-top: 12px;
}
.catalog-table th {
text-align: left;
padding: 8px 10px;
font-weight: 600;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 15%, transparent);
white-space: nowrap;
position: sticky;
top: 0;
z-index: 2;
background-color: var(--body--background);
}
.catalog-table td {
padding: 8px 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
vertical-align: middle;
}
.state-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.state-completed {
background-color: color-mix(in srgb, #639922 18%, transparent);
color: #639922;
}
.state-failed {
background-color: color-mix(in srgb, #e24b4a 15%, transparent);
color: #e24b4a;
}
.catalog-pagination-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 10px 18px;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
}
.catalog-pagination-info {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.65;
}
.catalog-pagination-bar .page-link {
background-color: var(--input--background);
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 4px !important;
font-size: 12px;
padding: 4px 9px;
min-width: 30px;
text-align: center;
line-height: 1.5;
margin: 0 2px;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.catalog-pagination-bar .page-link:hover {
background-color: color-mix(in srgb, var(--secondary--color) 14%, var(--input--background));
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
}
.catalog-pagination-bar .page-item.active .page-link {
background-color: var(--secondary--color);
color: var(--day--remain--color);
border-color: var(--secondary--color);
font-weight: 600;
}
.catalog-pagination-bar .page-item.disabled .page-link {
color: color-mix(in srgb, var(--primary--body--color) 35%, transparent);
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
pointer-events: none;
}
}
/* ===== admin-components/data-taxonomy/data-taxonomy-navbar/data-taxonomy-navbar.component.css (global) ===== */
.dark-theme .taxonomy_navbar_item, .darkBlue-theme .taxonomy_navbar_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .taxonomy_navbar_item, .lightBlue-theme .useddevice_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
/* ===== admin-components/data-taxonomy/data-taxonomy-navbar/data-taxonomy-navbar.component.css (scoped) ===== */
app-data-taxonomy-navbar {
.taxonomy_navbar_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.taxonomy_navbar_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.taxonomy_navbar_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.taxonomy_navbar_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
}
/* ===== admin-components/data-taxonomy/data-ware-house/data-ware-house-navbar/data-ware-house-navbar.component.css (global) ===== */
.form-check-input:checked {
background-color: var(--primary--body--color) !important;
border-color: white;
}
.lightBlue-theme .form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.lightBlue-theme .form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.dark-theme .form-check-input:checked {
background-color: var(--primary--body--color);
border-color: var(--primary--body--color);
}
.dark-theme .form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23222628' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.darkBlue-theme .form-check-input:checked {
background-color: var(--primary--body--color);
border-color: var(--primary--body--color);
}
.darkBlue-theme .form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23222628' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.dark-theme .alldevicelogs_settings_item, .darkBlue-theme .alldevicelogs_settings_item, .dark-theme .accordion_settings, .darkBlue-theme .accordion_settings {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .alldevicelogs_settings_item, .lightBlue-theme .accordion_settings {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
@media only screen and (max-width: 1131px) {
.show-sidebar .accordion_remove_column .col-lg-3 {
width: 50%;
}
.show-sidebar .dropdown_filter_accordion {
width: 600px !important;
}
}
@media only screen and (max-width: 956px) {
.show-sidebar .accordion_remove_column .col-lg-3 {
width: 50% !important;
}
.show-sidebar .dropdown_filter_accordion {
width: 400px !important;
}
}
@media only screen and (max-width: 820px) {
.show-sidebar .dropdown_filter_accordion {
width: 400px !important;
}
}
@media only screen and (max-width: 760px) {
.show-sidebar .accordion_remove_column .col-lg-3 {
width: 50% !important;
}
.show-sidebar .dropdown_filter_accordion {
width: 300px !important;
}
}
@media only screen and (max-width: 680px) {
.show-sidebar .dropdown_filter_accordion {
width: 300px !important;
}
}
@media only screen and (max-width: 668px) {
.show-sidebar .accordion_remove_column .col-lg-3 {
width: 50% !important;
}
.show-sidebar .dropdown_filter_accordion {
width: 250px !important;
}
}
@media only screen and (max-width: 580px) {
.show-sidebar .dropdown_filter_accordion {
width: 150px !important;
}
}
@media only screen and (max-width: 550px) {
.show-sidebar .accordion_remove_column .col-sm-4 {
width: 100%;
}
.show-sidebar .accordion_remove_column .col-sm-4:nth-child(even) {
padding-left: 12px !important;
}
.show-sidebar .accordion_remove_column .col-sm-4:nth-child(odd) {
padding-right: 15px !important;
}
.show-sidebar .dropdown_filter_accordion {
width: 150px !important;
}
}
@media (max-width: 830px) {
.show-sidebar .taxo_navbar_settings {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.show-sidebar .alldevicelogs_settings_item {
margin-bottom: .5rem;
}
.show-sidebar .accordion_filters {
display: block !important;
}
.show-sidebar .alldevicelogs_settings_item:nth-child(n+1) {
display: none;
}
.show-sidebar .accordion_settings {
margin-bottom: .5rem;
}
}
@media (max-width: 1130px) {
.show-sidebar .accordion_ware .col-lg-3 {
width: 33%;
}
}
@media (max-width: 930px) {
.show-sidebar .filter_item {
width: 50%;
}
.show-sidebar .accordion_ware .col-sm-4 {
width: 50%;
}
}
@media only screen and (max-width: 668px) and (min-width: 670px) {
.accordion_ware .col-sm-4 {
width: 100%;
}
}
@media (max-width: 620px) {
.show-sidebar .accordion_row {
justify-content: center;
align-items: center;
}
.show-sidebar .accordion_ware .col-sm-4 {
width: 250px !important ;
}
}
@media (max-width: 670px) {
.show-sidebar .filter_item {
width: 100%;
}
.show-sidebar .accordion_settings span {
font-size: 13.5px;
}
}
/* ===== admin-components/data-taxonomy/data-ware-house/data-ware-house-navbar/data-ware-house-navbar.component.css (scoped) ===== */
app-data-ware-house-navbar {
.image {
margin-top: 1rem;
width: 100%;
height: 100vh;
background-size: cover;
}
.alldevicelogs_settings {
margin-top: 1rem;
margin-bottom: 1rem;
}
.alldevicelogs_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.alldevicelogs_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.alldevicelogs_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.alldevicelogs_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
.dropdown_filter {
background-color: var(--body--background) !important;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
margin: 10px !important;
}
.form-check-label {
color: var(--primary--body--color);
}
.form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.filter_button {
padding: 0px 5px !important;
}
.filter_button:focus {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button:active {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button::after {
color: var(--primary--body--color);
margin-left: .5rem;
}
.taxo_accordion_icon {
margin-right: .3rem;
}
input[type="checkbox"]:checked {
box-shadow: none !important;
}
input[type="checkbox"]:not(:checked) {
border-color: var(--primary--body--color) !important;
}
input[type="checkbox"] {
box-shadow: none !important;
}
.device_information {
color: var(--primary--body--color);
opacity: var(--opacity--100);
padding: .5rem;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.device_information span strong {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.taxo_navbar_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.accordion_filters {
display: none;
margin-top: 1rem;
margin-bottom: 1rem;
}
.accordion-button:focus, b.accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.accordion-button[aria-expanded=false] .accordion-button::after {
margin-left: 1rem !important;
}
.accordion {
--bs-accordion-border-width: 0px;
}
.accordion-item {
border: var(--cart--border);
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.accordion_settings {
min-height: 36px;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
margin-bottom: .5rem;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.accordion_settings:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.accordion_settings > div {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.icon {
margin-top: .3rem;
margin-right: .5rem;
}
.choose_select {
background-color: var(--body--background);
color: var(--primary--body--color);
border: none;
}
.choose_select:focus {
outline: none;
border: none;
}
.choose_select:active {
outline: none;
border: none;
}
.stop_button {
display: none;
}
.choose_select::after {
display: none;
}
.form-check-label {
font-size: 12px;
}
@media (max-width: 576px) {
.taxo_navbar_settings {
display: none;
}
.alldevicelogs_settings_item {
margin-bottom: .5rem;
}
.accordion_filters {
display: block !important;
}
.alldevicelogs_settings_item:nth-child(n+1) {
display: none;
}
.accordion_settings {
margin-bottom: .5rem;
}
}
@media only screen and (max-width: 650px) {
.accordion_ware .col-sm-4 {
width: 50%;
}
}
@media only screen and (max-width: 820px) {
.accordion_remove_column .col-sm-4 {
width: 33%;
}
.dropdown_filter_accordion {
width: 600px !important;
}
}
@media only screen and (max-width: 680px) {
.accordion_remove_column .col-sm-4 {
width: 33%;
}
.dropdown_filter_accordion {
width: 450px !important;
}
}
@media only screen and (max-width: 550px) {
.accordion_remove_column .col-sm-4 {
width: 50%;
}
.accordion_remove_column .col-sm-4:nth-child(even) {
padding-left: 0px;
}
.accordion_remove_column .col-sm-4:nth-child(odd) {
padding-right: 15px;
}
.dropdown_filter_accordion {
width: 250px !important;
}
}
@media only screen and (max-width: 544px) {
.device_information span, strong {
font-size: 13px;
}
}
@media (max-width: 552px) {
.taxo_navbar_settings {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
}
.useddevice_settings_item span {
font-size: 14px;
}
.alldevicelogs_settings_item {
max-height: 60px;
width: 200px !important;
}
}
@media (max-width: 400px) {
.accordion-body .col-6 {
width: 100%;
}
}
}
/* ===== admin-components/data-taxonomy/data-ware-house/data-ware-house.component.css (global) ===== */
.darkBlue-theme .tooltip_td {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.darkBlue-theme .tooltip_th {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.lightBlue-theme .tooltip_td {
border: 1px solid var(--primary--body--color) !important;
}
.lightBlue-theme .tooltip_th {
border: 1px solid var(--primary--body--color) !important;
}
/* ===== admin-components/data-taxonomy/data-ware-house/data-ware-house.component.css (scoped) ===== */
app-data-ware-house {
ul.tools {
display: none;
list-style: none;
box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
position: absolute;
padding: 0;
}
ul.tools li {
height: 25px;
margin: 4px;
padding: 5px;
cursor: pointer;
color: var(--primary--body--color);
}
.filter-tools {
font-size: 11px;
}
#contextmenu {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
height: 107.2px;
border: var(--cart--border)
}
.mat-icon {
color: var(--secondary--color);
transform: translateY(5px);
}
.context-header {
box-shadow: var(--cart--box--shadow);
border-bottom: var(--cart--border);
}
#tooltip_flag {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
.tooltip_th {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_td {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_level {
color: var(--primary--body--color);
}
.tooltip_color {
width: 20px;
height: 20px;
border-radius: 50%;
transform: translateY(2px);
}
.tooltip_td_first {
background-color: var(--body--background);
}
.tooltip_table {
background-color: var(--body--background);
}
.tooltip_close_button {
color: var(--primary--body--color);
cursor: pointer;
}
}
/* ===== admin-components/data-taxonomy/data-ware-house/modals/device-modal/device-modal.component.css (global) ===== */
.darkBlue-theme .accordion_inner_body table th {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.dark-theme .accordion_inner_body table th {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.lightBlue-theme .accordion_inner_body table th {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.dark-theme .search-icon {
position: absolute;
left: 10px;
bottom: 9px;
color: var(--primary--body--color);
font-size: 13px;
}
.darkBlue-theme .search-icon {
position: absolute;
left: 10px;
bottom: 8px;
color: var(--primary--body--color);
font-size: 13px;
}
.lightBlue-theme .search-icon {
position: absolute;
left: 10px;
bottom: 8px;
color: var(--primary--body--color);
font-size: 13px;
}
@media only screen and (max-width: 950px) {
.show-sidebar .modal-dialog {
width: 100% !important;
}
}
.dark-theme .nd-modal-content-device, .darkBlue-theme .nd-modal-content-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.dark-theme .nd-widget-header-device, .darkBlue-theme .nd-widget-header-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .nd-form-section-device__head, .darkBlue-theme .nd-form-section-device__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .card-device.accordion_element, .darkBlue-theme .card-device.accordion_element {
border: none;
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme .device-row .form-check-input, .darkBlue-theme .device-row .form-check-input {
border: none !important;
background-color: #ffffff !important;
color: #ffffff !important;
}
.dark-theme .device-row .form-check-input:checked, .darkBlue-theme .device-row .form-check-input:checked {
background-color: #ffffff !important;
border-color: #ffffff !important;
}
.lightBlue-theme .nd-modal-content-device {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-widget-header-device {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .card-device.accordion_element {
border: none;
background-color: #ffffff;
}
.lightBlue-theme .device-row .form-check-input {
border: none !important;
background-color: #ffffff;
}
.dark-theme #deviceModal .device-row .form-check-input, .darkBlue-theme #deviceModal .device-row .form-check-input, .dark-theme #deviceModal .device-row .form-check-input:checked, .darkBlue-theme #deviceModal .device-row .form-check-input:checked {
background-color: #ffffff !important;
border-color: #ffffff !important;
accent-color: #ffffff !important;
}
/* ===== admin-components/data-taxonomy/data-ware-house/modals/device-modal/device-modal.component.css (scoped) ===== */
app-device-modal {
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
}
.new_input::placeholder {
color: var(--primary--body--color);
}
.choose_select {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
}
.choose_select:focus {
outline: none;
}
.choose_select:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
}
.filter-clear-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--body--background);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 35px;
font-size: 13px;
}
.oriana-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 35px;
font-size: 13px;
}
.accordion_element {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
margin-bottom: .6rem;
padding: 0px;
}
.shortcut-category-button {
margin-bottom: 0rem;
color: var(--primary--body--color);
text-decoration: none;
}
.shortcut-category-button:focus {
color: var(--primary--body--color);
}
.shortcut-category-button:active {
color: var(--primary--body--color);
}
.accordion_inner {
background-color: var(--body--background);
color: var(--primary--body--color);
border: 0px;
}
.accordion_inner_body table th {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.card-body {
padding:10px 20px;
}
.card-header {
border-bottom: none;
}
.search-input::placeholder {
font-size: 14px;
text-indent: 17px;
}
.search-icon {
position: absolute;
left: 10px;
bottom: 9px;
color: var(--primary--body--color);
font-size: 13px;
}
.drop-menu {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.menu-text {
color: var(--primary--body--color);
font-weight: normal;
font-size: 13px;
}
.menu-icon {
color: var(--primary--body--color);
transform: translateY(5px);
}
.shortcut-name {
font-size: 14px;
font-weight: normal;
}
.modal.right .modal-dialog {
position: fixed;
margin: auto;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.right .modal-body {
padding: 15px 15px 80px;
}
.modal.right.fade .modal-dialog {
right: 0;
width: 50%;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog {
right: 0;
}
.modal-content {
border-radius: 0;
border: none;
}
@media only screen and (max-width: 850px) {
.modal-dialog {
width: 75% !important;
}
}
.modal.right .nd-modal-dialog-device {
position: fixed;
right: 0;
margin: 0;
height: 100%;
transform: translate3d(0%, 0, 0);
}
.nd-modal-dialog-device {
width: min(560px, 100vw) !important;
max-width: min(560px, 100vw) !important;
}
.modal.right .nd-modal-content-device {
height: 100%;
overflow: hidden;
border-radius: 0;
border: none;
}
.modal.right.fade .nd-modal-dialog-device {
right: -560px;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.right.show .nd-modal-dialog-device {
right: 0;
}
.nd-modal-content-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.15);
color: var(--primary--body--color);
}
.nd-widget-shell-device {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.nd-widget-header-device {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.nd-widget-title-device {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.nd-header-icon-device {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nd-title-text-device {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-device {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.nd-widget-close-device:hover {
transform: translateY(-1px);
opacity: 0.85;
}
.nd-modal-body-device {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 15px 15px 80px !important;
}
.nd-modal-body-device::-webkit-scrollbar {
width: 4px;
}
.nd-modal-body-device::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.nd-form-section-device__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nd-form-section-device__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nd-form-section-device__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.device-accordion {
display: flex;
flex-direction: column;
gap: 8px;
}
.card-device.accordion_element {
overflow: hidden;
margin-bottom: 0;
padding: 0;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 78%, var(--body--background));
color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
}
.card-device-header {
border-bottom: none;
background: transparent;
}
.shortcut-category-button {
min-height: 42px;
margin: 0;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--primary--body--color);
text-decoration: none;
font-size: 13px;
font-weight: 500;
text-align: left;
border: none;
box-shadow: none;
}
.shortcut-category-button:hover, .shortcut-category-button:focus, .shortcut-category-button:active {
color: var(--primary--body--color);
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
box-shadow: none;
}
.shortcut-category-button i {
font-size: 11px;
opacity: 0.55;
transition: transform 0.18s ease;
}
.shortcut-category-button[aria-expanded="true"] i {
transform: rotate(180deg);
}
.card-device.accordion_inner {
border: 0;
background-color: transparent;
color: var(--primary--body--color);
}
.card-device-body.accordion_inner_body {
padding: 0;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.device-row {
min-width: 0;
width: 100%;
min-height: 42px;
margin: 0;
padding: 8px 12px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: flex;
align-items: center;
gap: 9px;
text-align: left;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.14s ease;
}
.device-row:hover {
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.device-row .form-check-input {
flex: 0 0 auto;
margin: 0;
border-color: color-mix(in srgb, var(--primary--body--color) 35%, transparent) !important;
background-color: var(--input--background);
box-shadow: none !important;
}
.device-row .form-check-input:checked {
background-color: var(--secondary--color) !important;
border-color: var(--secondary--color) !important;
}
.device-row span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--primary--body--color);
}
.nd-device-actions {
margin-top: 12px;
margin-bottom: 0;
}
.nd-device-filter-button {
min-height: 36px;
padding: 0 18px !important;
border-radius: 8px !important;
}
@media only screen and (max-width: 600px) {
.nd-modal-dialog-device {
width: 100vw !important;
max-width: 100vw !important;
}
.device-row span {
white-space: normal;
}
}
}
/* ===== admin-components/data-taxonomy/data-ware-house/modals/filter-modal/filter-modal.component.css (global) ===== */
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
background-color: var(--input--background) !important;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.mat-date-range-picker {
z-index: 9999 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--body--background) !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
border-radius: var(--cart--border--radius) !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color) !important;
}
.mat-datepicker-content {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mdc-icon-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.darkBlue-theme .each_item {
padding: 5px 5px;
}
.lightBlue-theme .each_item {
padding: 5px 5px;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
@media (max-width:611px) {
.show-sidebar .row_main .col-sm-6 {
width: 100%;
}
.show-sidebar .row_main .col-6 {
width: 100%;
}
}
.nd-time-filter-date-picker .mat-mdc-text-field-wrapper {
height: 36px !important;
background: var(--input--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 8px !important;
box-shadow: var(--cart--box--shadow) !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.dark-theme .nd-modal-content-filters-section, .darkBlue-theme .nd-modal-content-filters-section {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
border: none !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}
.dark-theme .filters-widget-header, .darkBlue-theme .filters-widget-header {
background: color-mix(in srgb, var(--input--background) 82%, white 4%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dark-theme .new_input, .dark-theme .choose_select_filter_taxo, .dark-theme .choose_select_filter_modal, .darkBlue-theme .new_input, .darkBlue-theme .choose_select_filter_taxo, .darkBlue-theme .choose_select_filter_modal {
border: none !important;
background: color-mix(in srgb, var(--input--background) 88%, white 5%) !important;
}
.dark-theme .nd-time-filter-date-picker .mat-mdc-text-field-wrapper, .darkBlue-theme .nd-time-filter-date-picker .mat-mdc-text-field-wrapper {
border: none !important;
background: color-mix(in srgb, var(--input--background) 88%, white 5%) !important;
}
.dark-theme .confirm_button, .dark-theme .cancel_button, .darkBlue-theme .confirm_button, .darkBlue-theme .cancel_button {
border: none !important;
}
.dark-theme .ANADIV, .darkBlue-theme .ANADIV, .dark-theme .accordion_filters_device_logs .accordion-body, .darkBlue-theme .accordion_filters_device_logs .accordion-body, .dark-theme .additional_div_taxo, .darkBlue-theme .additional_div_taxo {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .device-option-card, .darkBlue-theme .device-option-card, .dark-theme .filter-rule-card, .darkBlue-theme .filter-rule-card {
border-color: rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 86%, white 6%),
var(--input--background));
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.dark-theme .device-ip, .darkBlue-theme .device-ip {
background: rgba(255, 255, 255, 0.06);
}
.dark-theme .device_ip_input, .darkBlue-theme .device_ip_input {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.32);
}
.dark-theme .device_ip_input:checked, .darkBlue-theme .device_ip_input:checked {
background-color: #ffffff;
border-color: #ffffff;
}
.lightBlue-theme .nd-modal-content-filters-section {
border: none !important;
background: linear-gradient(180deg, #eef5f7, #f5fafb);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1) !important;
}
.lightBlue-theme .filters-widget-header {
background: linear-gradient(180deg, #e6f2f4, #eef5f7);
border-bottom: 1px solid color-mix(in srgb, #3fa4ac 18%, transparent);
}
.lightBlue-theme .new_input, .lightBlue-theme .choose_select_filter_taxo, .lightBlue-theme .choose_select_filter_modal {
background: color-mix(in srgb, #3fa4ac 7%, #ffffff) !important;
border-color: color-mix(in srgb, #3fa4ac 36%, transparent) !important;
}
.lightBlue-theme .accordion_filters_device_logs .accordion-button {
background: #ffffff !important;
border-color: color-mix(in srgb, #3fa4ac 28%, transparent) !important;
}
.lightBlue-theme .accordion_filters_device_logs .accordion-body {
background: #ffffff !important;
border-color: color-mix(in srgb, #3fa4ac 18%, transparent) !important;
}
.lightBlue-theme .nd-time-filter-date-picker .mat-mdc-text-field-wrapper {
background: color-mix(in srgb, #3fa4ac 7%, #ffffff) !important;
border-color: color-mix(in srgb, #3fa4ac 36%, transparent) !important;
}
.lightBlue-theme .confirm_button, .lightBlue-theme .cancel_button {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent) !important;
}
.lightBlue-theme .device-option-card {
background: #ffffff;
border-color: color-mix(in srgb, #3fa4ac 22%, transparent);
box-shadow: 0 2px 8px rgba(63, 164, 172, 0.06);
}
.lightBlue-theme .filter-rule-card {
background: linear-gradient(135deg,
color-mix(in srgb, #3fa4ac 10%, #ffffff) 0%,
#ffffff 55%,
color-mix(in srgb, #3fa4ac 5%, #ffffff) 100%);
border-color: color-mix(in srgb, #3fa4ac 32%, transparent);
box-shadow: 0 4px 14px rgba(63, 164, 172, 0.1), 0 1px 3px rgba(63, 164, 172, 0.08);
}
.lightBlue-theme .additional_div_taxo {
background: color-mix(in srgb, #3fa4ac 8%, #ffffff) !important;
border-color: color-mix(in srgb, #3fa4ac 28%, transparent) !important;
}
.lightBlue-theme .modal-footer {
border-top-color: color-mix(in srgb, #3fa4ac 18%, transparent);
}
/* ===== admin-components/data-taxonomy/data-ware-house/modals/filter-modal/filter-modal.component.css (scoped) ===== */
app-filter-modal {
.modal-content {
background-color: var(--body--background) !important;
height: auto;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
border-radius: var(--cart--border--radius) !important;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.modal-header {
border-bottom: var(--cart--border);
margin-top: .2rem;
box-shadow: var(--cart--box--shadow);
}
.modal-header h6 {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_filter {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.form-label.label-header {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: 0.88;
margin-bottom: 4px;
}
.oriana-button-taxo-filter {
height: 36px;
font-size: 13px;
padding: 5px 30px!important;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
}
.oriana-button-taxo-filter:active {
height: 36px;
font-size: 13px;
padding: 5px 30px !important;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
}
.oriana-button-taxo-filter:focus {
height: 36px;
font-size: 13px;
padding: 5px 30px !important;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
}
.filter-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
cursor: pointer;
padding: 0px;
margin-top: .3rem;
border: none;
}
.filter-button i {
color: var(--primary--sidebar--color) !important;
cursor: pointer;
}
.remove {
color: var(--primary--body--color) !important;
cursor: pointer;
}
.input_div {
float: left;
width: 50%;
position: relative;
}
.contain_div {
float: left;
width: calc(45% - .2rem);
position: relative;
margin-left: .2rem;
}
.remove_div {
float: left;
width: calc(5% - .3rem);
position: relative;
margin-top: 0.3rem;
cursor: pointer;
margin-left: .3rem;
}
.choose_select_filter_taxo {
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius);
height: 36px;
font-size: 13px;
}
.filter-clear-button {
color: var(--primary--body--color) !important;
cursor: pointer;
}
.filter-clear-button:active {
border: none;
box-shadow: none;
}
.filter-clear-button:focus {
border: none;
box-shadow: none;
}
.mat-mdc-form-field-infix {
padding-top: 5px !important;
}
.mat-mdc-text-field-wrapper {
height: 36px !important;
}
.time_input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time_input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.first_time_input {
margin-right: .2rem;
padding-right: 0px !important;
}
.second_time_input {
padding-left: 0px !important;
width: calc(50% - 0.2rem);
}
.additional_div_taxo {
margin-bottom: 0.7rem;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
padding: 3px;
text-align: center;
cursor: pointer;
width: calc(188px - .2rem);
height: 36px;
float: left;
}
.additional_div_taxo span {
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
}
.features_icon {
color: var(--primary--body--color);
margin-right: .3rem;
font-size: 13px;
}
.modal-footer {
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
padding: 16px 16px 28px;
margin-top: 8px;
}
.additional_header {
color: var(--primary--body--color);
}
.each_item {
padding: 2px 5px;
margin-bottom: .7rem;
}
.filter-button:active {
border: none;
}
.filter-button:focus {
border: none;
}
.device_ip_input {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
border: 1px solid #d9d9d9;
border-radius: 1px;
vertical-align: sub;
box-shadow: none;
transform: translateY(2%);
left: 1rem;
outline: none;
}
.device_ip_input:not(:checked) + .device_ip_label {
text-decoration: line-through;
color: var(--primary--body--color);
opacity: 0.5;
font-weight: 600;
}
.device_ip_input:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.device_ip_label {
display: inline-block;
user-select: none;
cursor: pointer;
color: var(--primary--body--color);
opacity: 1;
}
@media (max-width:575px) {
.filter-button {
padding: 0px;
}
}
.accordion-button {
height: 36px;
background-color: var(--body--background);
border-radius: var(--cart--border--radius) !important;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
margin-top: 1.5rem;
padding: 20px;
}
.accordion-item {
background-color: var(--body--background);
border-radius: var(--cart--border--radius);
border: none;
box-shadow: var(--cart--box--shadow);
}
.accordion-body {
border: var(--cart--border);
border-top: none;
}
@media (max-width:500px) {
.bi-x-lg, .bi-search {
display: none;
}
}
@media (max-width:412px) {
.row_main .col-6 {
width: 100%;
}
}
.filter-dwh-modal {
max-width: 760px;
}
.nd-modal-content-filters-section {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: var(--cart--border) !important;
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14) !important;
overflow: hidden;
}
.filters-widget-header {
min-height: 54px;
padding: 12px 16px;
margin-top: 0;
border-bottom: var(--cart--border);
background: color-mix(in srgb, var(--input--background) 86%, transparent);
box-shadow: none;
}
.filters-widget-title {
display: inline-flex;
align-items: center;
min-width: 0;
gap: 10px;
}
.filters-header-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
color: var(--primary--body--color);
background: color-mix(in srgb, var(--secondary--color) 14%, var(--input--background));
border: var(--cart--border);
border-radius: 8px;
}
.filters-title-text {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
.filters-widget-close {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--primary--body--color);
background-color: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
opacity: var(--opacity--80);
transition: transform 0.18s ease, opacity 0.18s ease;
}
.filters-widget-close:hover {
transform: translateY(-1px);
opacity: 1;
}
.modal-body {
padding: 16px;
}
.filter-modal-grid {
row-gap: 10px;
}
.filter-section-title {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary--body--color);
font-size: 14px;
font-weight: 600;
line-height: 1;
}
.filter-section-title i {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--secondary--color);
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
border-radius: 7px;
}
.new_input, .choose_select_filter_taxo, .choose_select_filter_modal {
height: 32px !important;
color: var(--primary--body--color) !important;
background: var(--input--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 8px !important;
box-shadow: var(--cart--box--shadow);
font-size: 12px;
opacity: var(--opacity--100);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input::placeholder, .choose_select_filter_modal::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.new_input:focus, .choose_select_filter_taxo:focus, .choose_select_filter_modal:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent) !important;
}
.accordion_filters_device_logs .accordion-item {
background: transparent;
border: none;
box-shadow: none;
}
.accordion_filters_device_logs .accordion-button {
height: 36px;
margin-top: 10px;
padding: 0 12px;
background: var(--input--background);
border: var(--cart--border);
border-radius: 8px !important;
box-shadow: var(--cart--box--shadow);
}
.accordion_filters_device_logs .accordion-button::after {
width: 14px;
height: 14px;
background-size: 14px;
opacity: var(--opacity--80);
}
.accordion_filters_device_logs .accordion-button:focus {
box-shadow: var(--cart--box--shadow);
}
.accordion_filters_device_logs .accordion-body {
padding: 10px;
background: color-mix(in srgb, var(--input--background) 78%, transparent);
border: var(--cart--border);
border-top: none;
border-radius: 0 0 8px 8px;
}
.each_item {
display: flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 4px 6px;
margin-bottom: 4px;
border-radius: 8px;
}
.device-option-card {
min-height: 44px;
padding: 8px 10px;
background: color-mix(in srgb, var(--body--background) 38%, var(--input--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.device-option-card:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 44%, transparent);
background: color-mix(in srgb, var(--secondary--color) 8%, var(--input--background));
}
.device-option-icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
color: var(--secondary--color);
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
border-radius: 7px;
}
.device_ip_input {
flex: 0 0 18px;
width: 18px;
height: 18px;
margin: 0;
border-radius: 5px;
border-color: color-mix(in srgb, var(--secondary--color) 46%, #d9d9d9);
background-color: var(--body--background);
cursor: pointer;
}
.device_ip_input:checked {
background-color: var(--secondary--color);
border-color: var(--secondary--color);
}
.device_ip_label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
margin: 0 !important;
}
.device-name, .device-ip {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-name {
font-size: 13px;
font-weight: 600;
color: var(--primary--body--color);
}
.device-ip {
max-width: 48%;
padding: 4px 8px;
color: var(--primary--body--color);
background: color-mix(in srgb, var(--body--background) 70%, transparent);
border-radius: 999px;
font-size: 11px;
opacity: var(--opacity--80);
}
.device_ip_input:not(:checked) + .device_ip_label {
text-decoration: none;
opacity: 0.58;
}
.device_ip_input:not(:checked) + .device_ip_label .device-name {
text-decoration: line-through;
}
.filter-list-taxo {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.ANADIV {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: color-mix(in srgb, var(--input--background) 86%, transparent);
border: var(--cart--border);
border-radius: 8px;
box-shadow: var(--cart--box--shadow);
}
.filter-rule-card {
position: relative;
margin-bottom: 0 !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 4%),
var(--input--background));
border-color: color-mix(in srgb, var(--primary--body--color) 12%, transparent);
}
.filter-rule-card:hover {
border-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
}
.filter-index-circle {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
color: var(--secondary--color);
background: color-mix(in srgb, var(--secondary--color) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
}
.input_div {
float: none;
width: auto;
flex: 1 1 50%;
min-width: 0;
}
.contain_div {
float: none;
width: auto;
flex: 0 0 190px;
margin-left: 0;
}
.remove_div {
float: none;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
color: var(--primary--body--color);
}
.remove_div .remove {
width: 18px;
height: 18px;
opacity: var(--opacity--50);
transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.remove_div:hover .remove {
color: #dc3545 !important;
opacity: 1;
transform: translateY(-1px);
}
.filter-clear-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50);
}
.filter-button {
display: inline-flex;
align-items: center;
gap: 4px;
height: 34px;
padding: 0 10px;
color: var(--primary--body--color) !important;
background: var(--input--background);
border: var(--cart--border);
border-radius: 8px;
box-shadow: var(--cart--box--shadow);
opacity: var(--opacity--100) !important;
}
.new_filter_span {
display: flex;
justify-content: end;
}
.filter-button--add {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 7px 16px 7px 12px;
color: var(--primary--body--color) !important;
background:
linear-gradient(135deg,
color-mix(in srgb, var(--secondary--color) 14%, var(--input--background)),
color-mix(in srgb, var(--body--background) 82%, transparent)) !important;
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 10px 24px rgba(0, 0, 0, 0.08);
font-size: 13px;
font-weight: 700;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.filter-button--add i {
width: 22px;
height: 22px;
margin: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: color-mix(in srgb, var(--secondary--color) 85%, transparent);
color: #fff !important;
font-size: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.filter-button--add:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent);
box-shadow: var(--cart--box--shadow), 0 14px 28px rgba(0, 0, 0, 0.12);
background:
linear-gradient(135deg,
color-mix(in srgb, var(--secondary--color) 18%, var(--input--background)),
color-mix(in srgb, var(--body--background) 86%, transparent)) !important;
}
.filter-action-row {
gap: 8px;
flex-wrap: wrap;
}
.confirm_button, .cancel_button {
height: 36px;
min-width: 96px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.confirm_button:hover, .cancel_button:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.additional-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 8px;
width: 100%;
}
.additional_div_taxo {
width: 100%;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 12px;
margin: 0 0 8px;
background: var(--input--background);
border: var(--cart--border);
border-radius: 8px;
box-shadow: var(--cart--box--shadow);
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.additional_div_taxo:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
}
.additional_div_taxo span, .additional_div_taxo i {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 12px;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: var(--primary--body--color);
transition: background-color 5000s ease-in-out 0s;
font-size: 13px;
}
@media (max-width: 575px) {
.filter-dwh-modal {
max-width: none;
margin: 0.5rem;
}
.ANADIV {
flex-wrap: wrap;
}
.input_div, .contain_div {
flex: 1 1 100%;
}
.filter-index-circle {
position: absolute;
top: 8px;
left: 8px;
}
.filter-rule-card {
padding-top: 44px;
}
.device_ip_label {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.device-ip {
max-width: 100%;
}
}
}
/* ===== admin-components/data-taxonomy/modals/add-data-taxonomy-modal/add-data-taxonomy-modal.component.css (global) ===== */
.dark-theme .adt-modal-content-add-data-taxonomy, .darkBlue-theme .adt-modal-content-add-data-taxonomy {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .adt-widget-header-add-data-taxonomy, .darkBlue-theme .adt-widget-header-add-data-taxonomy {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .adt-form-section-add-data-taxonomy {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .adt-form-section-add-data-taxonomy {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .adt-form-section-add-data-taxonomy__head, .darkBlue-theme .adt-form-section-add-data-taxonomy__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .adt-input-add-data-taxonomy, .darkBlue-theme .adt-input-add-data-taxonomy, .dark-theme .adt-textarea-add-data-taxonomy, .darkBlue-theme .adt-textarea-add-data-taxonomy {
border: none !important;
}
.lightBlue-theme .adt-modal-content-add-data-taxonomy {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .adt-widget-header-add-data-taxonomy {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .adt-form-section-add-data-taxonomy {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .adt-input-add-data-taxonomy, .lightBlue-theme .adt-textarea-add-data-taxonomy {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/data-taxonomy/modals/add-data-taxonomy-modal/add-data-taxonomy-modal.component.css (scoped) ===== */
app-add-data-taxonomy-modal {
.adt-modal-content-add-data-taxonomy {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: hidden;
}
.adt-form-add-data-taxonomy, .adt-widget-shell-add-data-taxonomy {
min-height: 100%;
}
.adt-widget-shell-add-data-taxonomy {
display: flex;
flex-direction: column;
overflow: hidden;
}
.adt-widget-header-add-data-taxonomy {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.adt-widget-title-add-data-taxonomy {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.adt-header-icon-add-data-taxonomy {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.adt-title-text-add-data-taxonomy {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.adt-widget-close-add-data-taxonomy {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.adt-widget-close-add-data-taxonomy:hover {
transform: translateY(-1px);
opacity: 1;
}
.adt-widget-close-add-data-taxonomy:focus, .adt-widget-close-add-data-taxonomy:active {
outline: none !important;
box-shadow: none !important;
}
.adt-modal-body-add-data-taxonomy {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.adt-modal-body-add-data-taxonomy::-webkit-scrollbar {
width: 4px;
}
.adt-modal-body-add-data-taxonomy::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.adt-form-section-add-data-taxonomy {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.adt-form-section-add-data-taxonomy__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.adt-form-section-add-data-taxonomy__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.adt-form-section-add-data-taxonomy__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.adt-field-add-data-taxonomy {
margin-bottom: 12px;
}
.adt-field-last-add-data-taxonomy {
margin-bottom: 0 !important;
}
.adt-label-add-data-taxonomy {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.adt-input-add-data-taxonomy, .adt-textarea-add-data-taxonomy {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.adt-input-add-data-taxonomy {
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.adt-textarea-add-data-taxonomy {
min-height: 96px;
resize: vertical;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.adt-input-add-data-taxonomy::placeholder, .adt-textarea-add-data-taxonomy::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.adt-input-add-data-taxonomy:focus, .adt-textarea-add-data-taxonomy:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.adt-modal-footer-add-data-taxonomy {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 16px 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--body--background) 96%, transparent) 28%,
var(--body--background));
}
.adt-action-btn-add-data-taxonomy {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.adt-action-btn-add-data-taxonomy:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.adt-action-btn-add-data-taxonomy--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
@media (max-width: 722px) {
.adt-modal-footer-add-data-taxonomy {
flex-direction: column;
align-items: stretch;
}
.adt-action-btn-add-data-taxonomy {
width: 100%;
}
}
@media (max-width: 576px) {
.adt-modal-body-add-data-taxonomy {
padding: 12px 12px 0;
}
.adt-form-section-add-data-taxonomy {
padding: 14px;
}
}
}
/* ===== admin-components/data-taxonomy/modals/edit-data-taxnomy-modal/edit-data-taxnomy-modal.component.css (global) ===== */
.dark-theme .edt-modal-content-edit-data-taxonomy, .darkBlue-theme .edt-modal-content-edit-data-taxonomy {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .edt-widget-header-edit-data-taxonomy, .darkBlue-theme .edt-widget-header-edit-data-taxonomy {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .edt-form-section-edit-data-taxonomy {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .edt-form-section-edit-data-taxonomy {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .edt-form-section-edit-data-taxonomy__head, .darkBlue-theme .edt-form-section-edit-data-taxonomy__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .edt-input-edit-data-taxonomy, .darkBlue-theme .edt-input-edit-data-taxonomy, .dark-theme .edt-textarea-edit-data-taxonomy, .darkBlue-theme .edt-textarea-edit-data-taxonomy {
border: none !important;
}
.lightBlue-theme .edt-modal-content-edit-data-taxonomy {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .edt-widget-header-edit-data-taxonomy {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .edt-form-section-edit-data-taxonomy {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .edt-input-edit-data-taxonomy, .lightBlue-theme .edt-textarea-edit-data-taxonomy {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/data-taxonomy/modals/edit-data-taxnomy-modal/edit-data-taxnomy-modal.component.css (scoped) ===== */
app-edit-data-taxnomy-modal {
.edt-modal-content-edit-data-taxonomy {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: hidden;
}
.edt-form-edit-data-taxonomy, .edt-widget-shell-edit-data-taxonomy {
min-height: 100%;
}
.edt-widget-shell-edit-data-taxonomy {
display: flex;
flex-direction: column;
overflow: hidden;
}
.edt-widget-header-edit-data-taxonomy {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.edt-widget-title-edit-data-taxonomy {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.edt-header-icon-edit-data-taxonomy {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.edt-title-text-edit-data-taxonomy {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.edt-widget-close-edit-data-taxonomy {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.edt-widget-close-edit-data-taxonomy:hover {
transform: translateY(-1px);
opacity: 1;
}
.edt-widget-close-edit-data-taxonomy:focus, .edt-widget-close-edit-data-taxonomy:active {
outline: none !important;
box-shadow: none !important;
}
.edt-modal-body-edit-data-taxonomy {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.edt-modal-body-edit-data-taxonomy::-webkit-scrollbar {
width: 4px;
}
.edt-modal-body-edit-data-taxonomy::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.edt-hidden-field-edit-data-taxonomy {
margin: 0;
}
.edt-form-section-edit-data-taxonomy {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.edt-form-section-edit-data-taxonomy__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.edt-form-section-edit-data-taxonomy__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.edt-form-section-edit-data-taxonomy__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.edt-field-edit-data-taxonomy {
margin-bottom: 12px;
}
.edt-field-last-edit-data-taxonomy {
margin-bottom: 0 !important;
}
.edt-label-edit-data-taxonomy {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.edt-input-edit-data-taxonomy, .edt-textarea-edit-data-taxonomy {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.edt-input-edit-data-taxonomy {
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.edt-textarea-edit-data-taxonomy {
min-height: 96px;
resize: vertical;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.edt-input-edit-data-taxonomy::placeholder, .edt-textarea-edit-data-taxonomy::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.edt-input-edit-data-taxonomy:focus, .edt-textarea-edit-data-taxonomy:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.edt-modal-footer-edit-data-taxonomy {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 16px 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--body--background) 96%, transparent) 28%,
var(--body--background));
}
.edt-action-btn-edit-data-taxonomy {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.edt-action-btn-edit-data-taxonomy:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.edt-action-btn-edit-data-taxonomy--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
@media (max-width: 722px) {
.edt-modal-footer-edit-data-taxonomy {
flex-direction: column;
align-items: stretch;
}
.edt-action-btn-edit-data-taxonomy {
width: 100%;
}
}
@media (max-width: 576px) {
.edt-modal-body-edit-data-taxonomy {
padding: 12px 12px 0;
}
.edt-form-section-edit-data-taxonomy {
padding: 14px;
}
}
}
/* ===== admin-components/data-taxonomy/modals/edit-data-taxonomized-device-modal/edit-data-taxonomized-device-modal.component.css (global) ===== */
.dark-theme .etxd-modal-content-edit-taxonomized-device, .darkBlue-theme .etxd-modal-content-edit-taxonomized-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .etxd-widget-header-edit-taxonomized-device, .darkBlue-theme .etxd-widget-header-edit-taxonomized-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .etxd-form-section-edit-taxonomized-device {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .etxd-form-section-edit-taxonomized-device {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .etxd-form-section-edit-taxonomized-device__head, .darkBlue-theme .etxd-form-section-edit-taxonomized-device__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .etxd-input-edit-taxonomized-device, .darkBlue-theme .etxd-input-edit-taxonomized-device, .dark-theme .etxd-select-btn-edit-taxonomized-device, .darkBlue-theme .etxd-select-btn-edit-taxonomized-device, .dark-theme .etxd-filter-delete-edit-taxonomized-device, .darkBlue-theme .etxd-filter-delete-edit-taxonomized-device {
border: none !important;
}
.dark-theme .etxd-filter-delete-edit-taxonomized-device, .darkBlue-theme .etxd-filter-delete-edit-taxonomized-device {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme .etxd-dropdown-menu-edit-taxonomized-device, .darkBlue-theme .etxd-dropdown-menu-edit-taxonomized-device {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .etxd-brand-item-edit-taxonomized-device, .darkBlue-theme .etxd-brand-item-edit-taxonomized-device {
color: rgba(255, 255, 255, 0.88);
}
.lightBlue-theme .etxd-modal-content-edit-taxonomized-device {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .etxd-widget-header-edit-taxonomized-device {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .etxd-form-section-edit-taxonomized-device {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .etxd-input-edit-taxonomized-device, .lightBlue-theme .etxd-select-btn-edit-taxonomized-device, .lightBlue-theme .etxd-filter-delete-edit-taxonomized-device {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .etxd-dropdown-menu-edit-taxonomized-device {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
@keyframes etxdBlinkEditTaxonomizedDevice {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* ===== admin-components/data-taxonomy/modals/edit-data-taxonomized-device-modal/edit-data-taxonomized-device-modal.component.css (scoped) ===== */
app-edit-data-taxonomized-device-modal {
.etxd-modal-content-edit-taxonomized-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: visible;
}
.etxd-widget-shell-edit-taxonomized-device {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: visible;
}
.etxd-widget-header-edit-taxonomized-device {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-radius: 14px 14px 0 0;
}
.etxd-widget-title-edit-taxonomized-device {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.etxd-header-icon-edit-taxonomized-device {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.etxd-title-text-edit-taxonomized-device {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.etxd-widget-close-edit-taxonomized-device {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.etxd-widget-close-edit-taxonomized-device:hover {
transform: translateY(-1px);
opacity: 1;
}
.etxd-widget-close-edit-taxonomized-device:focus, .etxd-widget-close-edit-taxonomized-device:active {
outline: none !important;
box-shadow: none !important;
}
.etxd-modal-body-edit-taxonomized-device {
flex: 1;
overflow: visible;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.etxd-form-edit-taxonomized-device {
margin: 0;
}
.etxd-form-section-edit-taxonomized-device {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
overflow: visible;
}
.etxd-form-section-edit-taxonomized-device__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.etxd-form-section-edit-taxonomized-device__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.etxd-form-section-edit-taxonomized-device__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.etxd-field-edit-taxonomized-device {
margin-bottom: 12px;
}
.etxd-field-last-edit-taxonomized-device {
margin-bottom: 0 !important;
}
.etxd-label-edit-taxonomized-device {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.etxd-input-edit-taxonomized-device, .etxd-select-btn-edit-taxonomized-device {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.etxd-input-edit-taxonomized-device::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.etxd-input-edit-taxonomized-device:focus, .etxd-select-btn-edit-taxonomized-device:focus, .etxd-select-btn-edit-taxonomized-device.show {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.etxd-dropdown-edit-taxonomized-device {
width: 100%;
}
.etxd-select-btn-edit-taxonomized-device {
text-align: left;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 0 12px;
}
.etxd-select-btn-edit-taxonomized-device::after {
margin-left: auto !important;
flex-shrink: 0;
}
.etxd-placeholder-edit-taxonomized-device {
opacity: 0.45;
font-size: 12px;
}
.etxd-dropdown-menu-edit-taxonomized-device {
width: 100%;
max-height: 280px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
z-index: 1065;
}
.etxd-dropdown-menu-edit-taxonomized-device::-webkit-scrollbar {
width: 4px;
}
.etxd-dropdown-menu-edit-taxonomized-device::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.etxd-brand-item-edit-taxonomized-device {
padding: 0;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.etxd-brand-link-edit-taxonomized-device {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
color: inherit;
text-decoration: none;
}
.etxd-brand-item-edit-taxonomized-device:hover {
background-color: var(--secondary--color) !important;
color: #ffffff;
}
.etxd-brand-logo-edit-taxonomized-device {
width: 30px;
height: 30px;
object-fit: contain;
flex-shrink: 0;
}
.etxd-empty-state-edit-taxonomized-device {
padding: 10px 12px;
border: 1px solid color-mix(in srgb, #dc3545 30%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, #dc3545 8%, transparent);
color: var(--primary--body--color);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12.5px;
opacity: 0.86;
}
.etxd-empty-icon-edit-taxonomized-device {
color: #dc3545;
animation: etxdBlinkEditTaxonomizedDevice 1s infinite;
}
.etxd-filter-row-edit-taxonomized-device {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 8px;
align-items: center;
}
.etxd-filter-delete-edit-taxonomized-device {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.etxd-filter-delete-edit-taxonomized-device:hover {
transform: translateY(-1px);
opacity: 1;
color: #dc3545;
}
.etxd-filter-delete-edit-taxonomized-device:focus, .etxd-filter-delete-edit-taxonomized-device:active, .etxd-add-filter-edit-taxonomized-device:focus, .etxd-add-filter-edit-taxonomized-device:active {
outline: none;
box-shadow: none;
}
.etxd-add-filter-edit-taxonomized-device {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.etxd-add-filter-edit-taxonomized-device:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.etxd-modal-footer-edit-taxonomized-device {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 16px 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--body--background) 96%, transparent) 28%,
var(--body--background));
border-radius: 0 0 14px 14px;
}
.etxd-action-btn-edit-taxonomized-device {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.etxd-action-btn-edit-taxonomized-device:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.etxd-action-btn-edit-taxonomized-device--danger {
background-color: color-mix(in srgb, #dc3545 12%, var(--input--background)) !important;
color: color-mix(in srgb, #dc3545 76%, var(--primary--body--color)) !important;
border: 1px solid color-mix(in srgb, #dc3545 32%, transparent) !important;
}
@media (max-width: 722px) {
.etxd-modal-footer-edit-taxonomized-device {
flex-direction: column;
align-items: stretch;
}
.etxd-action-btn-edit-taxonomized-device {
width: 100%;
}
}
@media (max-width: 576px) {
.etxd-modal-body-edit-taxonomized-device {
padding: 12px 12px 0;
}
.etxd-form-section-edit-taxonomized-device {
padding: 14px;
}
.etxd-filter-row-edit-taxonomized-device {
grid-template-columns: minmax(0, 1fr) 36px;
}
}
}
/* ===== admin-components/data-ware-house/data-ware-house-navbar/data-ware-house-navbar.component.css (global) ===== */
.dark-theme .alldevicelogs_settings_item, .darkBlue-theme .alldevicelogs_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .alldevicelogs_settings_item {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
.dark-theme .dropdown_filter {
background-color: color-mix(in srgb, white 5%, var(--body--background)) !important;
border-color: color-mix(in srgb, #7d7d7d 35%, transparent);
}
.darkBlue-theme .dropdown_filter {
background-color: color-mix(in srgb, white 6%, var(--body--background)) !important;
border-color: color-mix(in srgb, #3D4073 45%, transparent);
}
.lightBlue-theme .dropdown_filter {
border-color: color-mix(in srgb, #3fa4ac 35%, transparent);
}
.dark-theme #logImportRecordModal .modal-content, .darkBlue-theme #logImportRecordModal .modal-content {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.dark-theme #logImportRecordModal .nd-widget-header, .darkBlue-theme #logImportRecordModal .nd-widget-header {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme #logImportRecordModal .nd-form-section-dwh-navbar {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a) !important;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%)) !important;
}
.darkBlue-theme #logImportRecordModal .nd-form-section-dwh-navbar {
border: none !important;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme #logImportRecordModal .import-card, .darkBlue-theme #logImportRecordModal .import-card, .dark-theme #logImportRecordModal .log-import-filter-chip, .darkBlue-theme #logImportRecordModal .log-import-filter-chip, .dark-theme #logImportRecordModal .log-import-search-input, .darkBlue-theme #logImportRecordModal .log-import-search-input, .dark-theme #logImportRecordModal .import-status-badge, .darkBlue-theme #logImportRecordModal .import-status-badge {
border: none;
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme #logImportRecordModal .modal-content {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme #logImportRecordModal .nd-widget-header {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme #logImportRecordModal .nd-form-section-dwh-navbar {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme #logImportRecordModal .import-card, .lightBlue-theme #logImportRecordModal .log-import-filter-chip, .lightBlue-theme #logImportRecordModal .log-import-search-input, .lightBlue-theme #logImportRecordModal .import-status-badge {
border: none;
background-color: #ffffff;
}
.dark-theme .first-menu-item:hover {
background-color: rgba(255, 255, 255, 0.10) !important;
}
.darkBlue-theme .first-menu-item:hover {
background-color: color-mix(in srgb, white 10%, var(--body--background)) !important;
}
.lightBlue-theme .first-menu-item:hover {
background-color: color-mix(in srgb, #3FA4AC 18%, var(--body--background)) !important;
}
.lightBlue-theme .form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.lightBlue-theme .form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.dark-theme .form-check-input:checked {
background-color: var(--primary--body--color);
border-color: var(--primary--body--color);
}
.dark-theme .form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23222628' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.darkBlue-theme .form-check-input:checked {
background-color: var(--primary--body--color);
border-color: var(--primary--body--color);
}
.darkBlue-theme .form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23222628' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.lightBlue-theme .di_card {
--di-accent: #3fa4ac;
--di-surface: color-mix(in srgb, var(--body--background) 88%, white 12%);
--di-surface-strong: color-mix(in srgb, #3fa4ac 9%, var(--body--background));
--di-glow: rgba(63, 164, 172, 0.26);
--di-soft: rgba(63, 164, 172, 0.14);
--di-border: rgba(63, 164, 172, 0.24);
--di-sep: rgba(63, 164, 172, 0.14);
--di-icon-bg: rgba(63, 164, 172, 0.15);
}
.dark-theme .di_card {
--di-accent: #a5a9ab;
--di-surface: color-mix(in srgb, var(--input--background) 86%, white 7%);
--di-surface-strong: color-mix(in srgb, var(--input--background) 78%, white 12%);
--di-glow: rgba(255, 255, 255, 0.13);
--di-soft: rgba(255, 255, 255, 0.07);
--di-border: rgba(255, 255, 255, 0.12);
--di-sep: rgba(255, 255, 255, 0.08);
--di-icon-bg: rgba(255, 255, 255, 0.09);
}
.darkBlue-theme .di_card {
--di-accent: #7477ff;
--di-surface: color-mix(in srgb, var(--input--background) 88%, white 6%);
--di-surface-strong: color-mix(in srgb, #7477ff 12%, var(--input--background));
--di-glow: rgba(116, 119, 255, 0.30);
--di-soft: rgba(116, 119, 255, 0.13);
--di-border: rgba(168, 176, 255, 0.20);
--di-sep: rgba(116, 119, 255, 0.13);
--di-icon-bg: rgba(116, 119, 255, 0.14);
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.dark-theme .accordion_settings, .darkBlue-theme .accordion_settings {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .accordion_settings {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
@media only screen and (max-width: 1131px) {
.show-sidebar .accordion_remove_column .col-lg-3 {
width: 50%;
}
.show-sidebar .dropdown_filter_accordion {
width: 600px !important;
}
}
@media only screen and (max-width: 956px) {
.show-sidebar .accordion_remove_column .col-lg-3 {
width: 50% !important;
}
.show-sidebar .dropdown_filter_accordion {
width: 400px !important;
}
}
@media only screen and (max-width: 820px) {
.show-sidebar .dropdown_filter_accordion {
width: 400px !important;
}
}
@media only screen and (max-width: 1410px) {
.show-sidebar .dropdown_filter {
width: 850px !important;
}
}
@media only screen and (max-width: 1235px) {
.show-sidebar .dropdown_filter {
width: 700px !important;
}
}
@media only screen and (max-width: 1100px) {
.show-sidebar .dropdown_filter {
width: 600px !important;
}
}
@media only screen and (max-width: 956px) {
.show-sidebar .dropdown_filter {
width: 500px !important;
}
}
@media only screen and (max-width: 930px) {
.show-sidebar .dropdown_filter {
width: 400px !important;
}
}
@media only screen and (max-width: 788px) {
.show-sidebar .accordion_remove_column .col-lg-3 {
width: 50% !important;
}
.show-sidebar .dropdown_filter_accordion {
width: 300px !important;
}
}
@media only screen and (max-width: 680px) {
.show-sidebar .dropdown_filter_accordion {
width: 300px !important;
}
}
@media only screen and (max-width: 668px) {
.show-sidebar .accordion_remove_column .col-lg-3 {
width: 50% !important;
}
.show-sidebar .dropdown_filter_accordion {
width: 250px !important;
}
}
@media only screen and (max-width: 645px) {
.show-sidebar .dropdown_filter_accordion {
width: 150px !important;
}
}
@media only screen and (max-width: 576px) {
.show-sidebar .accordion_remove_column .col-sm-4 {
width: 100%;
}
.show-sidebar .accordion_remove_column .col-sm-4:nth-child(even) {
padding-left: 12px !important;
}
.show-sidebar .accordion_remove_column .col-sm-4:nth-child(odd) {
padding-right: 15px !important;
}
.show-sidebar .dropdown_filter_accordion {
width: 150px !important;
}
}
@media (max-width: 1290px) {
.show-sidebar .alldevicelogs_settings {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.show-sidebar .alldevicelogs_settings_item {
margin-bottom: .5rem;
}
.show-sidebar .accordion_filters {
display: block !important;
}
.show-sidebar .alldevicelogs_settings_item:nth-child(n+1) {
display: none;
}
.show-sidebar .accordion_settings {
margin-bottom: .5rem;
}
}
@media (max-width: 1186px) {
.show-sidebar .accordion_ware .col-lg-3 {
width: 33%;
}
}
@media (max-width: 956px) {
.show-sidebar .filter_item {
width: 50%;
}
.show-sidebar .accordion_ware .col-sm-4 {
width: 50%;
}
}
@media only screen and (max-width: 668px) and (min-width: 670px) {
.accordion_ware .col-sm-4 {
width: 100%;
}
}
@media (max-width: 670px) {
.show-sidebar .filter_item {
width: 100%;
}
}
@media (max-width: 719px) {
.show-sidebar .accordion_settings span {
font-size: 13.5px;
}
.show-sidebar #second {
font-size: 13.5px;
}
}
.dark-theme .dropdown-submenu > .submenu {
background-color: var(--body--background);
border-color: color-mix(in srgb, #7d7d7d 35%, transparent);
box-shadow: var(--cart--box--shadow), 0 14px 28px rgba(0, 0, 0, 0.28);
}
.darkBlue-theme .dropdown-submenu > .submenu {
border-color: color-mix(in srgb, #3D4073 45%, transparent);
box-shadow: var(--cart--box--shadow), 0 14px 28px rgba(0, 0, 0, 0.32);
}
.light-theme .dropdown-submenu > .submenu {
background-color: #ffffff;
border-color: color-mix(in srgb, #c7d1d8 70%, transparent);
box-shadow: var(--cart--box--shadow), 0 12px 24px rgba(0, 0, 0, 0.08);
}
.lightBlue-theme .dropdown-submenu > .submenu {
background-color: #ffffff;
border-color: color-mix(in srgb, #3fa4ac 35%, transparent);
box-shadow: var(--cart--box--shadow), 0 12px 24px rgba(0, 0, 0, 0.1);
}
.light-theme .dropdown-submenu > .submenu .submenu-trigger, .light-theme .dropdown-submenu > .submenu .submenu-trigger label, .light-theme .dropdown-submenu > .submenu .bulk-item-span-import, .light-theme .dropdown-submenu > .submenu .bulk-label, .light-theme .dropdown-submenu > .submenu .bulk-label *, .light-theme .dropdown-submenu > .submenu .first-menu-span, .light-theme .dropdown-submenu > .submenu .second-menu-span, .light-theme .dropdown-submenu > .submenu .info-icon, .light-theme .dropdown-submenu > .submenu .nd-brand-item, .lightBlue-theme .dropdown-submenu > .submenu .submenu-trigger, .lightBlue-theme .dropdown-submenu > .submenu .submenu-trigger label, .lightBlue-theme .dropdown-submenu > .submenu .bulk-item-span-import, .lightBlue-theme .dropdown-submenu > .submenu .bulk-label, .lightBlue-theme .dropdown-submenu > .submenu .bulk-label *, .lightBlue-theme .dropdown-submenu > .submenu .first-menu-span, .lightBlue-theme .dropdown-submenu > .submenu .second-menu-span, .lightBlue-theme .dropdown-submenu > .submenu .info-icon, .lightBlue-theme .dropdown-submenu > .submenu .nd-brand-item {
color: var(--primary--body--color) !important;
}
.dark-theme .bulk-menu {
background-color: var(--body--background);
border-color: color-mix(in srgb, #7d7d7d 35%, transparent);
}
.darkBlue-theme .bulk-menu {
background-color: color-mix(in srgb, white 6%, var(--body--background));
border-color: color-mix(in srgb, #3D4073 45%, transparent);
}
.lightBlue-theme .bulk-menu {
border-color: color-mix(in srgb, #3fa4ac 35%, transparent);
}
.darkBlue-theme .tooltip_td_navbar, .darkBlue-theme .tooltip_th_navbar, .dark-theme .tooltip_td_navbar, .dark-theme .tooltip_th_navbar {
border-color: rgba(153, 153, 153, 0.35);
background-color: color-mix(in srgb, white 4%, var(--body--background));
}
.lightBlue-theme .tooltip_td_navbar, .lightBlue-theme .tooltip_th_navbar {
border-color: #cad5d7;
}
.dark-theme .nd-brand-item, .darkBlue-theme .nd-brand-item {
color: var(--primary--body--color);
}
.dark-theme .nd-dropdown-menu {
background-color: var(--body--background);
border-color: color-mix(in srgb, #7d7d7d 35%, transparent);
box-shadow: var(--cart--box--shadow), 0 14px 28px rgba(0, 0, 0, 0.28);
}
.darkBlue-theme .nd-dropdown-menu {
border-color: color-mix(in srgb, #3D4073 45%, transparent);
box-shadow: var(--cart--box--shadow), 0 14px 28px rgba(0, 0, 0, 0.32);
}
.light-theme .nd-dropdown-menu {
background-color: #ffffff;
border-color: color-mix(in srgb, #c7d1d8 70%, transparent);
box-shadow: var(--cart--box--shadow), 0 12px 24px rgba(0, 0, 0, 0.08);
}
.light-theme .nd-dropdown-menu .submenu-trigger, .light-theme .nd-dropdown-menu .submenu-trigger label, .light-theme .nd-dropdown-menu .bulk-item-span-import, .light-theme .nd-dropdown-menu .bulk-label, .light-theme .nd-dropdown-menu .bulk-label *, .light-theme .nd-dropdown-menu .first-menu-span, .light-theme .nd-dropdown-menu .second-menu-span, .light-theme .nd-dropdown-menu .info-icon, .light-theme .nd-dropdown-menu .nd-brand-item {
color: var(--primary--body--color) !important;
}
.lightBlue-theme .nd-dropdown-menu {
background-color: #ffffff;
border-color: color-mix(in srgb, #3fa4ac 35%, transparent);
box-shadow: var(--cart--box--shadow), 0 12px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-dropdown-menu .submenu-trigger, .lightBlue-theme .nd-dropdown-menu .submenu-trigger label, .lightBlue-theme .nd-dropdown-menu .bulk-item-span-import, .lightBlue-theme .nd-dropdown-menu .bulk-label, .lightBlue-theme .nd-dropdown-menu .bulk-label *, .lightBlue-theme .nd-dropdown-menu .first-menu-span, .lightBlue-theme .nd-dropdown-menu .second-menu-span, .lightBlue-theme .nd-dropdown-menu .info-icon, .lightBlue-theme .nd-dropdown-menu .nd-brand-item {
color: var(--primary--body--color) !important;
}
.light-theme #import-json, .light-theme #import-json *, .light-theme #import-cef, .light-theme #import-cef *, .light-theme #export-pdf, .light-theme #export-pdf *, .light-theme #export-excel, .light-theme #export-excel *, .light-theme .second-menu-item .bulk-label.w-100.text-start, .light-theme .second-menu-item .bulk-label.w-100.text-start *, .lightBlue-theme #import-json, .lightBlue-theme #import-json *, .lightBlue-theme #import-cef, .lightBlue-theme #import-cef *, .lightBlue-theme #export-pdf, .lightBlue-theme #export-pdf *, .lightBlue-theme #export-excel, .lightBlue-theme #export-excel *, .lightBlue-theme .second-menu-item .bulk-label.w-100.text-start, .lightBlue-theme .second-menu-item .bulk-label.w-100.text-start * {
color: var(--primary--body--color) !important;
opacity: 1 !important;
}
/* ===== admin-components/data-ware-house/data-ware-house-navbar/data-ware-house-navbar.component.css (scoped) ===== */
app-data-ware-house-navbar {
.image {
margin-top: 1rem;
width: 100%;
height: 100vh;
background-size: cover;
}
.alldevicelogs_settings {
margin-top: 1rem;
margin-bottom: 1rem;
position: relative;
z-index: 100;
}
.alldevicelogs_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.alldevicelogs_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.alldevicelogs_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.alldevicelogs_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 12px;
}
.alldevicelogs_settings_item .dropdown {
height: 100%;
display: flex;
align-items: center;
}
.alldevicelogs_settings_item .dropdown > .dropdown-toggle, .alldevicelogs_settings_item .dropdown > span.dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
background: transparent;
border: none;
padding: 0;
white-space: nowrap;
}
.alldevicelogs_settings_item .dropdown > .dropdown-toggle::after, .alldevicelogs_settings_item .dropdown > span.dropdown-toggle::after {
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.alldevicelogs_settings_item .dropdown > .dropdown-toggle i, .alldevicelogs_settings_item .dropdown > span.dropdown-toggle i {
opacity: var(--opacity--50);
font-size: 13px;
}
.alldevicelogs_settings_item:has(.dropdown-menu.show) {
z-index: 1200;
position: relative;
}
.dropdown_filter {
background-color: var(--body--background) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 10%, transparent);
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
margin: 10px !important;
}
.form-check-label {
color: var(--primary--body--color);
}
.form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.upload-progress-wrapper {
margin-top: 8px;
width: 100%;
max-width: 250px;
}
.upload-progress-bar {
width: 100%;
height: 6px;
background-color: rgba(255, 255, 255, 0.12);
border-radius: 4px;
overflow: hidden;
}
.upload-progress-fill {
height: 100%;
width: 0%;
background-color: var(--primary--color, #4caf50);
transition: width 0.2s ease;
}
.info-icon {
font-size: 14px;
color: var(--primary--body--color);
opacity: 0.7;
cursor: pointer;
}
.info-wrapper:hover .info-icon {
opacity: 1;
}
.info-wrapper {
position: relative;
display: inline-block;
}
.info-wrapper:hover {
z-index: 1065;
}
.tooltip {
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background-color: var(--body--background);
color: var(--primary--body--color);
padding: 8px 12px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
white-space: nowrap;
opacity: 0;
visibility: hidden;
z-index: 1065 !important;
box-shadow: var(--cart--box--shadow);
}
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
}
.bulk-menu-item:hover {
background-color: color-mix(in srgb, var(--secondary--color) 12%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.import-item {
list-style: none;
cursor: pointer;
padding: 0 !important;
}
.second-menu-item {
gap: 0 !important;
border-radius: 5px;
overflow: hidden;
transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.first-menu-item {
border-radius: 5px;
overflow: visible;
transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.red-circle {
width: 10px;
height: 10px;
background-color: #ef4444;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.orange-circle {
width: 10px;
height: 10px;
background-color: #f59e0b;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.pink-circle {
width: 10px;
height: 10px;
background-color: #ec4899;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.purple-circle {
width: 10px;
height: 10px;
background-color: #8b5cf6;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.green-circle {
width: 10px;
height: 10px;
background-color: #22c55e;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.yellow-circle {
width: 10px;
height: 10px;
background-color: #eab308;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.import-card {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
background-color: var(--body--background);
color: var(--primary--body--color);
max-height: 300px;
}
#logImportRecordModal.modal.right .modal-dialog {
position: fixed;
right: 0;
margin: 0;
height: 100%;
transform: translate3d(0%, 0, 0);
}
#logImportRecordModal .log-import-dialog {
width: min(760px, 100vw);
max-width: min(760px, 100vw);
}
#logImportRecordModal.modal.right .modal-content {
height: 100%;
overflow: hidden;
border-radius: 0;
border: none;
}
#logImportRecordModal.modal.right.fade .modal-dialog {
right: -760px;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#logImportRecordModal.modal.right.show .modal-dialog {
right: 0;
}
#logImportRecordModal .modal-content {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.15);
color: var(--primary--body--color);
}
#logImportRecordModal .nd-widget-shell {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
#logImportRecordModal .nd-widget-header {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
#logImportRecordModal .nd-widget-title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
#logImportRecordModal .nd-header-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
#logImportRecordModal .nd-title-text {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
#logImportRecordModal .nd-widget-close {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
#logImportRecordModal .nd-widget-close:hover {
transform: translateY(-1px);
opacity: 0.85;
}
#logImportRecordModal .nd-modal-body {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 15px 15px 92px;
}
#logImportRecordModal .nd-modal-body::-webkit-scrollbar {
width: 4px;
}
#logImportRecordModal .nd-modal-body::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
#logImportRecordModal .nd-form-section-dwh-navbar {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
}
#logImportRecordModal .nd-form-section-dwh-navbar__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
#logImportRecordModal .nd-form-section-dwh-navbar__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
#logImportRecordModal .nd-form-section-dwh-navbar__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.log-import-filter-area {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.log-import-filter-chip {
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 11px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
font-size: 12.5px;
cursor: pointer;
transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.log-import-filter-chip:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 11%, transparent);
}
.log-import-hint {
display: block;
margin-bottom: 12px;
color: var(--primary--body--color);
opacity: 0.62;
font-size: 12px;
}
.log-import-search {
position: relative;
margin-bottom: 10px;
}
.log-import-search i {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 12px;
pointer-events: none;
}
.log-import-search-input {
height: 36px;
padding-left: 34px;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.log-import-search-input::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.log-import-search-input:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.log-import-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.log-import-grid-item {
min-width: 0;
}
#logImportRecordModal .import-card {
height: 100%;
max-height: none;
margin: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 78%, var(--body--background));
}
.import-card-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.import-file-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
color: var(--secondary--color);
flex-shrink: 0;
}
.import-file-title {
min-width: 0;
}
.import-file-title .fw-semibold {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--primary--body--color);
font-size: 13px;
}
.import-file-title span {
color: var(--primary--body--color);
opacity: 0.48;
font-size: 11px;
}
.import-card-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
.import-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--primary--body--color);
font-size: 12px;
}
.import-meta-row span {
opacity: 0.55;
}
.import-meta-row strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 650;
opacity: 0.88;
}
.import-status-badge {
width: fit-content;
min-height: 26px;
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 4px;
padding: 0 9px;
border-radius: 999px;
background-color: color-mix(in srgb, var(--input--background) 76%, var(--body--background));
color: var(--primary--body--color);
font-size: 12px;
font-weight: 650;
}
.log-import-empty, .log-import-loading {
min-height: 140px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
color: var(--primary--body--color);
opacity: 0.68;
grid-column: 1 / -1;
}
.log-import-empty i {
font-size: 24px;
color: var(--secondary--color);
}
#logImportRecordModal .nd-modal-footer {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 18px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
#logImportRecordModal .nd-secondary-btn {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
background-color: var(--input--background) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#logImportRecordModal .nd-secondary-btn:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
@media (max-width: 680px) {
#logImportRecordModal .log-import-dialog {
width: 100vw !important;
max-width: 100vw !important;
}
.log-import-grid {
grid-template-columns: 1fr;
}
#logImportRecordModal .nd-secondary-btn {
width: 100%;
}
}
.bulk-item-span-import {
cursor: pointer;
font-size: 13px;
color: var(--primary--body--color);
opacity: 0.80;
display: flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 0 12px;
width: 100%;
box-sizing: border-box;
transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
flex: 1 1 auto;
}
#import-json, #import-json *, #import-cef, #import-cef *, #export-pdf, #export-pdf *, #export-excel, #export-excel *, .second-menu-item .bulk-label.w-100.text-start, .second-menu-item .bulk-label.w-100.text-start * {
color: var(--primary--body--color) !important;
}
#import-json, #import-cef, #export-pdf, #export-excel, .second-menu-item .bulk-label.w-100.text-start {
opacity: 1 !important;
}
.nd-dropdown-menu .submenu-trigger, .nd-dropdown-menu .submenu-trigger label, .nd-dropdown-menu .bulk-item-span-import, .nd-dropdown-menu .bulk-label, .nd-dropdown-menu .first-menu-span, .nd-dropdown-menu .second-menu-span {
color: var(--primary--body--color) !important;
}
.nd-dropdown-menu .submenu-trigger, .nd-dropdown-menu .bulk-item-span-import, .nd-dropdown-menu .bulk-label {
opacity: 0.80;
}
.nd-dropdown-menu .bulk-label {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.second-menu-item .info-wrapper {
display: flex;
align-items: center;
align-self: stretch;
margin-right: 0 !important;
padding: 0 12px 0 8px;
border-radius: 5px;
transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.first-menu-item > .submenu-trigger, .second-menu-item > .bulk-item-span-import, .second-menu-item > .bulk-label {
border-radius: 5px;
background: transparent;
}
.first-menu-item:hover > .submenu-trigger, .second-menu-item:hover > .bulk-item-span-import, .second-menu-item:hover > .bulk-label, .second-menu-item:hover > .info-wrapper {
color: var(--sidebar--hover--color) !important;
opacity: 1;
}
.first-menu-item:hover .first-menu-span, .first-menu-item:hover .submenu-trigger, .first-menu-item:hover .submenu-trigger label, .second-menu-item:hover .second-menu-span, .second-menu-item:hover .bulk-item-span-import, .second-menu-item:hover .bulk-label, .second-menu-item:hover .bulk-label label, .second-menu-item:hover #import-json, .second-menu-item:hover #import-json *, .second-menu-item:hover #import-cef, .second-menu-item:hover #import-cef *, .second-menu-item:hover #export-pdf, .second-menu-item:hover #export-pdf *, .second-menu-item:hover #export-excel, .second-menu-item:hover #export-excel *, .second-menu-item:hover .fa-file-pdf, .second-menu-item:hover .fa-file-excel, .second-menu-item:hover .info-icon, .second-menu-item:hover .bulk-label.w-100.text-start, .second-menu-item:hover .bulk-label.w-100.text-start * {
color: var(--sidebar--hover--color) !important;
cursor: pointer;
}
.first-menu-item:hover .bulk-item-span-import, .second-menu-item:hover .bulk-item-span-import, .first-menu-item:hover .bulk-label, .second-menu-item:hover .bulk-label, .first-menu-item:hover .submenu-trigger, .second-menu-item:hover .submenu-trigger {
opacity: 1;
color: var(--sidebar--hover--color) !important;
}
.c-pointer {
cursor: pointer;
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: var(--primary--body--color) transparent transparent transparent;
}
.tooltip-bottom {
position: absolute;
top: 120%;
left: 50%;
transform: translateX(-50%);
background-color: var(--body--background);
color: var(--primary--body--color);
padding: 6px 10px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
white-space: nowrap;
opacity: 0;
visibility: hidden;
z-index: 10;
box-shadow: var(--cart--box--shadow);
}
.tooltip-bottom::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent transparent var(--primary--body--color) transparent;
}
.info-wrapper:hover .tooltip {
opacity: 1;
visibility: visible;
}
.info-wrapper:hover .tooltip-bottom {
opacity: 1;
visibility: visible;
}
.second-menu-item:has(.info-wrapper:hover) {
position: relative;
z-index: 1065;
}
.upload-progress-text {
margin-top: 4px;
font-size: 12px;
color: var(--primary--body--color);
}
input.apply {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.filter_button {
padding: 0 !important;
color: var(--primary--body--color);
font-size: 12px;
text-decoration: none;
}
.filter_button:focus, .filter_button:active {
outline: none !important;
border: none !important;
padding: 0 !important;
}
.filter_button::after {
color: var(--primary--body--color);
margin-left: .5rem;
}
input[type="checkbox"]:checked {
box-shadow: none !important;
}
input[type="checkbox"]:not(:checked) {
border-color: var(--primary--body--color) !important;
}
input[type="checkbox"] {
box-shadow: none !important;
}
.di_card {
--di-accent: #38bdf8;
--di-surface: color-mix(in srgb, var(--input--background) 92%, white 8%);
--di-surface-strong: color-mix(in srgb, var(--input--background) 82%, white 18%);
--di-glow: rgba(56 189 248 / 12%);
--di-soft: rgba(56, 189, 248, 0.13);
--di-border: rgba(56, 189, 248, 0.22);
--di-sep: rgba(56, 189, 248, 0.12);
--di-icon-bg: rgba(56, 189, 248, 0.14);
}
.di_card {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: .6rem;
border: 1px solid var(--di-border);
border-radius: 14px;
overflow: visible;
position: relative;
padding: 3px 0px;
background:
linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 38%),
radial-gradient(circle at 94% 50%, var(--di-glow), transparent 40%),
var(--input--background);
box-shadow:
var(--cart--box--shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.055);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.di_brand_zone {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 16px;
}
.di_logo_ring {
width: 34px;
height: 34px;
border-radius: 9px;
border: 1px solid var(--di-border);
background: var(--di-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: box-shadow 0.25s ease;
}
.di_logo_img {
width: 20px;
height: 20px;
object-fit: contain;
}
.di_brand_info {
display: flex;
flex-direction: column;
gap: 1px;
}
.di_brand_name {
font-size: 12px;
font-weight: 700;
color: var(--primary--body--color);
letter-spacing: 0.1px;
white-space: nowrap;
}
.di_sep {
width: 1px;
height: 30px;
flex-shrink: 0;
align-self: center;
background: linear-gradient(180deg,
transparent 0%,
var(--di-sep) 28%,
var(--di-sep) 72%,
transparent 100%);
}
.di_block {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 45px;
border-radius: 8px;
margin: 2px;
transition: background 0.2s ease;
cursor: default;
}
.di_block:hover {
background: var(--di-soft);
}
.di_icon_box {
width: 28px;
height: 28px;
border-radius: 7px;
background: var(--di-icon-bg);
border: 1px solid var(--di-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.di_block:hover .di_icon_box {
background: color-mix(in srgb, var(--di-accent) 22%, transparent);
box-shadow: 0 0 8px var(--di-soft);
}
.di_icon_box i {
font-size: 11px;
color: var(--di-accent);
}
.di_block_label {
display: block;
font-size: 9px;
color: var(--primary--body--color);
opacity: 0.48;
text-transform: uppercase;
letter-spacing: 0.7px;
white-space: nowrap;
margin-bottom: 1px;
}
.di_block_value {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--primary--body--color);
white-space: nowrap;
line-height: 1.2;
}
.di_count {
font-variant-numeric: tabular-nums;
}
@media (max-width: 810px) {
.di_sep { display: none; }
.di_brand_zone {
padding: 6px 12px;
border-bottom: 1px solid var(--di-sep);
width: 100%;
}
.di_block {
padding: 5px 10px;
margin: 2px;
}
}
.accordion_filters {
display: none;
position: relative;
z-index: 200;
}
.accordion-button:focus, .accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.accordion {
--bs-accordion-border-width: 0px;
}
.accordion-item {
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px !important;
box-shadow: var(--cart--box--shadow);
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
font-size: 13px;
border-radius: 8px !important;
}
.accordion-button:not(.collapsed) {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
position: relative;
z-index: 200;
}
.accordion_settings {
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
margin-bottom: 6px;
padding: 0 12px;
}
.accordion_settings:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.accordion_settings i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.accordion_settings span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 12px;
}
.icon {
margin-right: .3rem;
}
.choose_select_ware_navbar {
background: transparent;
color: var(--primary--body--color);
border: none;
font-size: 12px;
cursor: pointer;
outline: none;
}
.choose_select_ware_navbar:focus, .choose_select_ware_navbar:active {
outline: none !important;
border: none;
}
.stop_button {
display: none;
}
.choose_select_ware_navbar::after {
display: none;
}
.form-check-label {
font-size: 12px;
}
@media (max-width: 1035px) {
.alldevicelogs_settings {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.alldevicelogs_settings_item {
margin-bottom: .5rem;
}
.accordion_filters {
display: block !important;
}
.alldevicelogs_settings_item:nth-child(n+1) {
display: none;
}
.accordion_settings {
margin-bottom: .5rem;
}
}
@media (max-width: 723px) {
.alldevicelogs_settings {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
@media only screen and (max-width: 650px) {
.accordion_ware .col-sm-4 {
width: 50%;
}
}
@media only screen and (max-width: 820px) {
.accordion_remove_column .col-sm-4 {
width: 33%;
}
.dropdown_filter_accordion {
width: 600px !important;
}
}
@media only screen and (max-width: 1140px) {
.dropdown_filter {
width: 800px !important;
}
}
@media only screen and (max-width: 942px) {
.dropdown_filter_accordion {
width: 650px !important;
}
}
@media only screen and (max-width: 765px) {
.dropdown_filter_accordion {
width: 550px !important;
}
}
@media only screen and (max-width: 680px) {
.accordion_remove_column .col-sm-4 {
width: 33%;
}
.dropdown_filter_accordion {
width: 450px !important;
}
}
@media only screen and (max-width: 576px) {
.accordion_remove_column .col-sm-4 {
width: 50%;
}
.accordion_remove_column .col-sm-4:nth-child(even) {
padding-left: 0px;
}
.accordion_remove_column .col-sm-4:nth-child(odd) {
padding-right: 15px;
}
.dropdown_filter_accordion {
width: 250px !important;
}
}
@media (max-width: 552px) {
.alldevicelogs_settings {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
}
.useddevice_settings_item span {
font-size: 14px;
}
.alldevicelogs_settings_item {
max-height: 60px;
width: 200px !important;
}
}
@media (max-width: 400px) {
.accordion-body .col-6 {
width: 100%;
}
}
.tooltip-ip {
position: relative;
display: inline-block;
cursor: pointer;
max-width: 100%;
}
.tooltip-ip .tooltiptext-ip {
visibility: hidden;
position: absolute;
z-index: 1080;
top: calc(100% + 13px);
width: max-content;
min-width: 255px;
max-width: 320px;
overflow: hidden;
border: 1px solid var(--di-border);
border-radius: 10px;
background:
linear-gradient(90deg, var(--di-soft) 0%, transparent 58%),
radial-gradient(circle at 100% 0%, var(--di-glow), transparent 42%),
linear-gradient(180deg, var(--di-surface-strong), var(--di-surface));
color: var(--primary--body--color);
opacity: 0;
transform: translate(-50%, 4px);
transform-origin: top center;
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}
.tooltip-ip .tooltiptext-ip::before {
content: "";
position: absolute;
top: -7px;
left: 50%;
width: 12px;
height: 12px;
border-top: 1px solid var(--di-border);
border-left: 1px solid var(--di-border);
background: var(--di-surface-strong);
transform: translateX(-50%) rotate(45deg);
}
.tooltip-ip .table-correlation {
position: relative;
z-index: 1;
width: 100% !important;
margin: 0;
overflow: hidden;
border-spacing: 0;
border: 1px solid color-mix(in srgb, var(--di-border) 78%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--body--background) 78%, transparent);
}
.tooltip-ip .table-correlation thead th {
padding: 8px 10px;
border: 0;
border-bottom: 1px solid var(--di-sep);
background:
linear-gradient(180deg, color-mix(in srgb, var(--di-accent) 14%, transparent), transparent),
color-mix(in srgb, var(--di-accent) 8%, var(--body--background));
color: var(--primary--body--color);
font-size: 11px;
font-weight: 700;
letter-spacing: .2px;
}
.tooltip-ip .table-correlation tbody td {
padding: 7px 10px;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--di-sep) 70%, transparent);
background: transparent;
color: var(--primary--body--color);
font-size: 12px;
font-weight: 600;
}
.tooltip-ip .table-correlation tbody tr:last-child td {
border-bottom: 0;
}
.tooltip-ip .table-correlation tbody tr:hover td {
background: var(--di-soft);
}
.tooltip-ip .table-correlation th:first-child, .tooltip-ip .table-correlation td:first-child {
width: 42px;
color: var(--di-accent);
text-align: center;
}
.tooltip-ip .table-correlation td span {
display: block;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
}
.tooltip-ip:hover .tooltiptext-ip {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}
.dropdown-submenu {
position: relative;
}
.submenu-trigger {
cursor: pointer;
width: 100%;
display: flex;
}
.submenu-trigger label {
margin: 0;
}
.dropdown-submenu > .submenu {
top: 0;
left: 100%;
margin-left: .25rem;
display: none;
position: absolute;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 10%, transparent);
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
color: var(--primary--body--color);
width: max-content;
z-index: 1055;
}
.dropdown-submenu:hover > .submenu {
display: block;
}
.dropdown-submenu::after {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 18px;
height: 100%;
}
.bulk-menu {
overflow: visible;
padding: 4px 0;
min-width: 180px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 10%, transparent);
z-index: 1050 !important;
}
#tooltip_correlation {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
.tooltip_th_navbar, .tooltip_td_navbar {
padding: 6px 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
background-color: var(--body--background);
color: var(--primary--body--color);
font-size: 12px;
line-height: 1.3;
}
.tooltip_level {
color: var(--primary--body--color);
}
.tooltip_color {
width: 20px;
height: 20px;
border-radius: 50%;
transform: translateY(2px);
}
.tooltip_td_navbar_first {
background-color: var(--body--background);
}
.tooltip_table {
background-color: var(--body--background);
}
.tooltip_close_button {
color: var(--primary--body--color);
cursor: pointer;
}
.nd-brand-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 34px;
padding: 0 10px;
color: var(--primary--body--color);
font-size: 12.5px;
opacity: 0.85;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
border-radius: 5px;
margin-bottom: 2px;
transition: background 0.14s ease, color 0.14s ease, opacity 0.14s ease;
}
.nd-brand-item:last-child {
margin-bottom: 0;
}
.nd-brand-item:hover, .first-menu-item:hover, .second-menu-item:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
}
.nd-brand-item:focus, .nd-brand-item:active {
outline: none;
box-shadow: none;
}
.accordion_settings .dropdown {
height: 100%;
display: flex;
align-items: center;
}
.accordion_settings .dropdown > .dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
background: transparent;
border: none;
padding: 0;
white-space: nowrap;
}
.accordion_settings .dropdown > .dropdown-toggle::after {
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.accordion_settings:has(.dropdown-menu.show) {
z-index: 1200;
position: relative;
}
.nd-dropdown-menu {
padding: 4px 0;
min-width: 200px;
z-index: 1050 !important;
overflow: visible;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.info-wrapper .tooltip.nd-dropdown-menu, .info-wrapper .tooltip-bottom.nd-dropdown-menu {
z-index: 2000 !important;
}
@media (max-width: 1200px) {
.filter-area {
justify-content: start !important;
margin-bottom: 1rem;
}
}
@media (max-width: 1290px) {
.info-wrapper .tooltip {
top: 120%;
bottom: auto;
}
.info-wrapper .tooltip::after {
top: auto;
bottom: 100%;
border-color: transparent transparent var(--primary--body--color) transparent;
}
}
@media (max-width: 576px) {
.info-wrapper .tooltip, .info-wrapper .tooltip-bottom {
position: fixed;
top: 50%;
bottom: auto;
left: 16px;
right: 16px;
transform: none;
width: auto;
max-width: none;
white-space: normal;
z-index: 2000 !important;
}
.info-wrapper .tooltip::after, .info-wrapper .tooltip-bottom::after {
display: none;
}
}
}
/* ===== admin-components/data-ware-house/data-ware-house.component.css (global) ===== */
.lightBlue-theme .dwh-log-context-menu {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), #ffffff;
}
.darkBlue-theme .dwh-log-context-menu {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}
.darkBlue-theme .dwh-log-context-close, .darkBlue-theme .dwh-log-context-item i {
color: #ffffff !important;
}
.dark-theme .dwh-log-context-menu {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.lightBlue-theme .dwh-log-context-item:hover, .darkBlue-theme .dwh-log-context-item:hover, .dark-theme .dwh-log-context-item:hover {
background-color: color-mix(in srgb, var(--secondary--color) 22%, transparent) !important;
}
@-webkit-keyframes progress {
0% {
transform: translate(0);
}
100% {
transform: translate(50%);
}
}
@keyframes progress {
0% {
transform: translate(0);
}
100% {
transform: translate(50%);
}
}
.lightBlue-theme .statusBar:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: -100%;
will-change: transform;
background: linear-gradient(90deg, #a2b9c2 0%, #a2b9c2 25%, #a2b9c2 25%, #a2b9c2 37.5%, #a2b9c2 37.5%, #a2b9c2 50%, #a2b9c2 50% #56606b 75%, #56606b 87.5%, #56606b 87.5%, #56606b 100%);
-webkit-animation: 1.3s progress ease infinite;
animation: 1.3s progress ease infinite;
}
.darkBlue-theme .statusBar:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: -100%;
will-change: transform;
background: linear-gradient(90deg, #8383c4 0%, #8383c4 25%, #8383c4 25%, #8383c4 37.5%, #8383c4 37.5%, #8383c4 50%, #8383c4 50%, #56606b 75%, #56606b 87.5%, #56606b 87.5%, #56606b 100%);
-webkit-animation: 1.3s progress ease infinite;
animation: 1.3s progress ease infinite;
}
.lightBlue-theme #tooltip_flag {
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.11), transparent 42%), #ffffff;
border-color: rgba(86, 96, 107, 0.14);
box-shadow: 0 18px 42px rgba(86, 96, 107, 0.14);
}
.darkBlue-theme #tooltip_flag {
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 18%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 84%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 96%, white 2%));
border-color: color-mix(in srgb, var(--primary--body--color) 12%, transparent);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}
.dark-theme #tooltip_flag {
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 12%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
border-color: color-mix(in srgb, var(--primary--body--color) 13%, #0000008a);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3);
}
.darkBlue-theme .tooltip_flag_icon, .darkBlue-theme .flag-feature-toggle, .darkBlue-theme .feature_action i {
color: #ffffff;
}
.dark-theme .tooltip_flag_icon, .dark-theme .flag-feature-toggle, .dark-theme .feature_action i {
color: #ffffff;
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.lightBlue-theme .features_area {
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.11), transparent 42%), #ffffff !important;
border-color: rgba(86, 96, 107, 0.13) !important;
}
.darkBlue-theme .features_area {
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 17%, transparent), transparent 42%), color-mix(in srgb, var(--body--background) 92%, white 2%) !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34) !important;
}
.dark-theme .features_area {
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 12%, transparent), transparent 42%), color-mix(in srgb, var(--body--background) 96%, white 1%) !important;
}
/* ===== admin-components/data-ware-house/data-ware-house.component.css (scoped) ===== */
app-data-ware-house {
.dwh-log-context-menu {
display: none;
list-style: none;
position: absolute;
padding: 0;
width: 210px;
min-height: 120px;
overflow: hidden;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 9%, transparent), transparent 44%), color-mix(in srgb, var(--body--background) 92%, var(--input--background) 8%);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 12px 28px rgba(0, 0, 0, 0.12);
z-index: 9999;
}
.dwh-log-context-item {
margin: 5px 6px;
padding: 0 10px;
min-height: 34px;
cursor: pointer;
color: var(--primary--body--color);
display: flex;
align-items: center;
gap: 8px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 650;
opacity: 0.82;
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.dwh-log-context-item i {
width: 16px;
text-align: center;
color: var(--secondary--color);
}
.dwh-log-context-item:hover {
background-color: color-mix(in srgb, var(--secondary--color) 15%, transparent);
color: var(--primary--body--color);
opacity: 1;
transform: translateX(1px);
}
.filter-tools {
font-size: 11px;
}
.dwh-log-context-close {
color: var(--secondary--color);
transform: translateY(5px);
top: 4px;
cursor: pointer;
font-size: 20px;
}
.dwh-log-context-header {
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
box-shadow: var(--cart--box--shadow);
height: 30px;
background-color: color-mix(in srgb, var(--input--background) 58%, transparent);
}
.statusBar {
width: 100%;
height: 4px;
position: relative;
overflow: hidden;
}
.statusBar:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: -100%;
will-change: transform;
background: linear-gradient(90deg, rgb(216, 215, 215) 0%, rgb(216, 215, 215) 25%, rgb(216, 215, 215) 25%, rgb(216, 215, 215) 37.5%, rgb(216, 215, 215) 37.5%, rgb(216, 215, 215) 50%, rgb(216, 215, 215) 50%, gray 75%, gray 75%, gray 87.5%, gray 87.5%, gray 100%);
-webkit-animation: 1.3s progress ease infinite;
animation: 1.3s progress ease infinite;
}
#tooltip_flag {
display: none;
padding: 14px;
width: min(620px, calc(100vw - 24px));
max-height: calc(100vh - 24px);
overflow: visible;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 12%, transparent), transparent 42%), color-mix(in srgb, var(--body--background) 94%, var(--input--background) 6%);
box-shadow: var(--cart--box--shadow), 0 18px 45px rgba(0, 0, 0, 0.18);
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
position: fixed;
color: var(--primary--body--color);
transition: opacity 0.16s ease, transform 0.16s ease;
z-index: 10000;
backdrop-filter: blur(8px);
}
.tooltip_flag_header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 2px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
}
.tooltip_flag_title {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.tooltip_flag_title h6 {
margin: 0;
color: var(--primary--body--color);
font-size: 15px;
font-weight: 750;
}
.tooltip_flag_icon {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--secondary--color);
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.tooltip_th {
padding: 11px 12px !important;
background-color: color-mix(in srgb, var(--input--background) 62%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 82%, var(--secondary--color) 18%);
border: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.tooltip_td {
padding: 12px !important;
background-color: transparent;
color: var(--primary--body--color);
border: 0;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
overflow: visible;
position: relative;
vertical-align: middle;
}
.tooltip_level {
color: var(--primary--body--color);
font-weight: 800;
font-size: 13px;
}
.tooltip_color {
width: 22px;
height: 22px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 4px 12px rgba(0, 0, 0, 0.14);
}
.tooltip_td_first {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 66%, transparent);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
}
.tooltip_table {
margin: 12px 0;
overflow: visible;
background-color: transparent;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
border-collapse: separate;
border-spacing: 0;
}
.tooltip_table tbody tr {
position: relative;
z-index: 1;
}
.tooltip_table tbody tr:hover, .tooltip_table tbody tr:focus-within {
z-index: 10010;
}
.tooltip_table thead th:first-child {
width: 116px;
}
.tooltip_description_area {
display: flex;
flex-direction: column;
gap: 9px;
min-width: 0;
}
.tooltip_description {
color: var(--primary--body--color);
font-size: 13px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.tooltip_feature_row {
display: flex;
align-items: center;
position: relative;
overflow: visible;
z-index: 3;
}
.tooltip_feature_row .dropdown {
position: relative;
z-index: 3;
}
.tooltip_feature_row .dropdown:has(.dropdown-menu.show) {
z-index: 10030;
}
.tooltip_close_button {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--primary--body--color);
background-color: color-mix(in srgb, var(--input--background) 70%, transparent);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 11%, transparent);
border-radius: 8px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tooltip_close_button:hover {
color: var(--secondary--color);
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
transform: translateY(-1px);
}
.flag-feature-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 5px 10px;
color: var(--secondary--color);
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 8px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.flag-feature-toggle:hover, .flag-feature-toggle[aria-expanded="true"] {
background-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
transform: translateY(-1px);
}
.flag-feature-toggle::after {
margin-left: 2px;
}
.animation-filter {
scale: 1.25;
display: inline-block;
transition: all 0.5s;
}
.accordion_filters_device_logs {
display: none;
}
.accordion-button:focus, b.accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.accordion-button[aria-expanded=false] .accordion-button::after {
margin-left: 1rem !important;
}
.accordion {
--bs-accordion-border-width: 0px;
}
.accordion-item {
border: var(--cart--border);
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.spinner-dwh {
top: 50%;
left: 50%;
position: absolute;
color: var(--primary--body--color);
}
#dwh-table {
padding-left: 20px;
padding-right: 20px;
position: relative;
}
@media screen and (max-width: 992px) {
.feature {
width: 100%;
}
}
.features_area {
width: min(520px, calc(100vw - 48px));
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 42%), color-mix(in srgb, var(--body--background) 95%, var(--input--background) 5%) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 14px 34px rgba(0, 0, 0, 0.18) !important;
border-radius: 8px !important;
padding: 12px;
color: var(--primary--body--color);
}
.dropdown-feature {
border-radius: 8px !important;
padding: 0px !important;
border: none;
background-color: transparent;
z-index: 10020;
}
.dropdown-feature.show {
display: block;
z-index: 10020;
}
.additional_header {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 0 0 10px;
padding-bottom: 10px;
color: var(--primary--body--color);
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
font-size: 13px;
font-weight: 800;
}
.additional_header i {
color: var(--secondary--color);
}
.feature_grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.feature_action {
min-height: 38px;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 9px;
color: var(--primary--body--color);
background-color: color-mix(in srgb, var(--input--background) 62%, transparent);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 8px;
font-size: 12.5px;
font-weight: 700;
line-height: 1.25;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.feature_action i {
width: 16px;
color: var(--secondary--color);
text-align: center;
}
.feature_action:hover {
color: var(--primary--body--color);
background-color: color-mix(in srgb, var(--secondary--color) 16%, transparent);
transform: translateY(-1px);
}
.tooltip_links {
margin: 0;
}
.tooltip_links .accordion-item {
overflow: hidden;
border-radius: 8px;
}
.tooltip_links .accordion-button {
gap: 8px;
padding: 11px 12px;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 800;
}
.tooltip_links .accordion-button i {
color: var(--secondary--color);
}
.tooltip_links .accordion-body {
padding: 10px 12px;
}
.tooltip_link_list {
display: grid;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.tooltip_link_list li {
min-width: 0;
list-style: none;
}
.tooltip_link_list a {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
color: var(--secondary--color);
font-size: 12.5px;
font-weight: 700;
overflow-wrap: anywhere;
}
.tooltip_empty_link {
color: var(--primary--body--color);
opacity: 0.76;
font-size: 12.5px;
}
@media screen and (max-width: 576px) {
#tooltip_flag {
padding: 12px;
width: calc(100vw - 24px);
}
.feature_grid {
grid-template-columns: 1fr;
}
.tooltip_table thead {
display: none;
}
.tooltip_table tr, .tooltip_table td {
display: block;
width: 100%;
}
.tooltip_td {
border-top: 0;
}
.tooltip_table tr {
padding: 10px 0;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
}
}
.grid-area {
position: relative;
width: 100%;
}
.grid-wrapper {
width: 100%;
}
.spinner-overlay {
position: absolute;
left: 50%;
top: 50%;
inset: 0;
z-index: 10;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-correlation-modal/data-ware-house-correlation-modal.component.css (global) ===== */
.dark-theme .choose_select_correlation {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .choose_select_correlation {
background-image: url("data:image/svg+xml,") !important;
}
.lightBlue-theme .choose_select_correlation {
background-image: url("data:image/svg+xml,") !important;
}
@media (max-width:576px) {
.show-sidebar .input-group-append {
width: 15%;
}
.show-sidebar .input_width {
width: 70%;
}
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-correlation-modal/data-ware-house-correlation-modal.component.css (scoped) ===== */
app-data-ware-house-correlation-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
}
.new_input::placeholder {
color: var(--primary--body--color);
}
.choose_select_correlation {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
}
.choose_select_correlation:focus {
outline: none;
}
.choose_select_correlation:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--body--background);
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px;
font-size: 13px;
}
.oriana-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px;
font-size: 13px;
}
.oriana-button:active {
color: var(--primary--body--color);
}
.input-group-append {
width: 6%;
}
.input_width {
width: 75%;
}
textarea.form-control.is-valid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
textarea.form-control.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-correlation-modal/data-ware-house-view-correlation-modal/data-ware-house-edit-correlation-modal/data-ware-house-edit-correlation-modal.component.css (global) ===== */
.dark-theme .choose_select_edit_correlation {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .choose_select_edit_correlation {
background-image: url("data:image/svg+xml,") !important;
}
.lightBlue-theme .choose_select_edit_correlation {
background-image: url("data:image/svg+xml,") !important;
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-correlation-modal/data-ware-house-view-correlation-modal/data-ware-house-edit-correlation-modal/data-ware-house-edit-correlation-modal.component.css (scoped) ===== */
app-data-ware-house-edit-correlation-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
}
.new_input::placeholder {
color: var(--primary--body--color);
}
.choose_select_edit_correlation {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
}
.choose_select_edit_correlation:focus {
outline: none;
}
.choose_select_edit_correlation:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
margin-top: .2rem;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-edit-correlation {
position: absolute;
right: 22px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-edit-correlation:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-edit-correlation:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--body--background);
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px;
font-size: 13px;
}
.oriana-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px;
font-size: 13px;
}
.oriana-button:active {
color: var(--primary--body--color);
}
.input-group-append {
width: 6%;
}
.input_width {
width: 75%;
}
.device_description {
color:var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
}
textarea.form-control.is-valid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
textarea.form-control.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-correlation-modal/data-ware-house-view-correlation-modal/data-ware-house-view-correlation-modal.component.css (scoped) ===== */
app-data-ware-house-view-correlation-modal {
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
border-bottom: var(--cart--border);
background-color: var(--body--background);
}
.label-header {
color: var(--primary--body--color);
}
.header-bottom {
border-bottom: 1px solid var(--primary--body--color);
}
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-data-taxonomized-device-modal/data-ware-house-data-taxonomized-device-modal.component.css (global) ===== */
.dark-theme .dtd-modal-content-taxonomized-device, .darkBlue-theme .dtd-modal-content-taxonomized-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .dtd-widget-header-taxonomized-device, .darkBlue-theme .dtd-widget-header-taxonomized-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .dtd-form-section-taxonomized-device {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .dtd-form-section-taxonomized-device {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .dtd-form-section-taxonomized-device__head, .darkBlue-theme .dtd-form-section-taxonomized-device__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .dtd-input-taxonomized-device, .darkBlue-theme .dtd-input-taxonomized-device, .dark-theme .dtd-select-taxonomized-device {
border: none !important;
}
.dark-theme .dtd-select-btn-taxonomized-device, .darkBlue-theme .dtd-select-btn-taxonomized-device {
border: none !important;
}
.dark-theme .dtd-dropdown-menu-taxonomized-device, .darkBlue-theme .dtd-dropdown-menu-taxonomized-device {
border: none;
background-color: var(--body--background);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .dtd-taxonomy-item-taxonomized-device, .darkBlue-theme .dtd-taxonomy-item-taxonomized-device {
color: rgba(255, 255, 255, 0.88);
}
.darkBlue-theme .dtd-select-taxonomized-device, .dark-theme .dtd-filter-delete-taxonomized-device, .darkBlue-theme .dtd-filter-delete-taxonomized-device {
border: none !important;
}
.dark-theme .dtd-filter-delete-taxonomized-device, .darkBlue-theme .dtd-filter-delete-taxonomized-device {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme .dtd-modal-content-taxonomized-device {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .dtd-widget-header-taxonomized-device {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .dtd-form-section-taxonomized-device {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .dtd-input-taxonomized-device, .lightBlue-theme .dtd-select-taxonomized-device {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .dtd-select-btn-taxonomized-device {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .dtd-dropdown-menu-taxonomized-device {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .dtd-filter-delete-taxonomized-device {
border: none;
background-color: #ffffff;
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-data-taxonomized-device-modal/data-ware-house-data-taxonomized-device-modal.component.css (scoped) ===== */
app-data-ware-house-data-taxonomized-device-modal {
.dtd-modal-content-taxonomized-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: hidden;
}
.dtd-form-taxonomized-device {
min-height: 100%;
}
.dtd-widget-shell-taxonomized-device {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.dtd-widget-header-taxonomized-device {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.dtd-widget-title-taxonomized-device {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.dtd-header-icon-taxonomized-device {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.dtd-title-text-taxonomized-device {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.dtd-widget-close-taxonomized-device {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.dtd-widget-close-taxonomized-device:hover {
transform: translateY(-1px);
opacity: 1;
}
.dtd-widget-close-taxonomized-device:focus, .dtd-widget-close-taxonomized-device:active {
outline: none !important;
box-shadow: none !important;
}
.dtd-modal-body-taxonomized-device {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.dtd-modal-body-taxonomized-device::-webkit-scrollbar {
width: 4px;
}
.dtd-modal-body-taxonomized-device::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.dtd-hidden-field-taxonomized-device {
margin: 0;
}
.dtd-form-section-taxonomized-device {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.dtd-form-section-taxonomized-device__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.dtd-form-section-taxonomized-device__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.dtd-form-section-taxonomized-device__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.dtd-field-taxonomized-device {
margin-bottom: 12px;
}
.dtd-field-last-taxonomized-device {
margin-bottom: 0 !important;
}
.dtd-label-taxonomized-device {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.dtd-input-taxonomized-device, .dtd-select-taxonomized-device {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dtd-input-taxonomized-device::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.dtd-input-taxonomized-device:focus, .dtd-select-taxonomized-device:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.dtd-select-wrap-taxonomized-device {
width: 100%;
}
.dtd-dropdown-taxonomized-device {
width: 100%;
}
.dtd-select-btn-taxonomized-device {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 0 12px;
}
.dtd-select-btn-taxonomized-device::after {
margin-left: auto !important;
flex-shrink: 0;
}
.dtd-select-btn-taxonomized-device:focus, .dtd-select-btn-taxonomized-device.show {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.dtd-placeholder-taxonomized-device {
opacity: 0.45;
font-size: 12px;
}
.dtd-selected-title-taxonomized-device {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dtd-dropdown-menu-taxonomized-device {
width: 100%;
max-height: 280px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
z-index: 1065;
}
.dtd-dropdown-menu-taxonomized-device::-webkit-scrollbar {
width: 4px;
}
.dtd-dropdown-menu-taxonomized-device::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.dtd-taxonomy-item-taxonomized-device {
min-height: 36px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 7px;
margin-bottom: 2px;
padding: 7px 10px;
cursor: pointer;
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.2;
transition: background-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.dtd-taxonomy-item-taxonomized-device:last-child {
margin-bottom: 0;
}
.dtd-taxonomy-item-taxonomized-device i {
width: 16px;
text-align: center;
color: var(--secondary--color);
opacity: 0.9;
transition: color 0.14s ease, opacity 0.14s ease;
}
.dtd-taxonomy-item-taxonomized-device:hover, .dtd-taxonomy-item-taxonomized-device:focus {
background-color: var(--secondary--color) !important;
color: #fff;
transform: translateX(2px);
}
.dtd-taxonomy-item-taxonomized-device:hover i, .dtd-taxonomy-item-taxonomized-device:focus i {
color: rgba(255, 255, 255, 0.88);
opacity: 1;
}
.dtd-filter-row-taxonomized-device {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 8px;
align-items: center;
}
.dtd-filter-input-wrap-taxonomized-device {
position: relative;
min-width: 0;
}
.dtd-filter-input-taxonomized-device {
padding-right: 34px;
}
.dtd-filter-clear-taxonomized-device {
position: absolute;
top: 54%;
right: 4px;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.55;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 11px;
line-height: 1;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.dtd-filter-clear-taxonomized-device:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.dtd-filter-clear-taxonomized-device:focus, .dtd-filter-clear-taxonomized-device:active, .dtd-filter-delete-taxonomized-device:focus, .dtd-filter-delete-taxonomized-device:active, .dtd-add-filter-taxonomized-device:focus, .dtd-add-filter-taxonomized-device:active {
outline: none;
box-shadow: none;
}
.dtd-filter-delete-taxonomized-device {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.dtd-filter-delete-taxonomized-device:hover {
transform: translateY(-1px);
opacity: 1;
color: #dc3545;
}
.dtd-add-filter-taxonomized-device {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.dtd-add-filter-taxonomized-device:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.dtd-modal-footer-taxonomized-device {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 16px 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--body--background) 96%, transparent) 28%,
var(--body--background));
}
.dtd-action-btn-taxonomized-device {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dtd-action-btn-taxonomized-device:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.dtd-action-btn-taxonomized-device--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
@media (max-width: 722px) {
.dtd-modal-footer-taxonomized-device {
flex-direction: column;
align-items: stretch;
}
.dtd-action-btn-taxonomized-device {
width: 100%;
}
}
@media (max-width: 576px) {
.dtd-modal-body-taxonomized-device {
padding: 12px 12px 0;
}
.dtd-form-section-taxonomized-device {
padding: 14px;
}
.dtd-filter-row-taxonomized-device {
grid-template-columns: minmax(0, 1fr) 36px;
}
}
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-data-taxonomized-device-modal/data-ware-house-view-data-taxonomized-device-modal/data-ware-house-edit-data-taxonomized-device-modal/data-ware-house-edit-data-taxonomized-device-modal.component.css (global) ===== */
.dark-theme .edtd-modal-content-edit-taxonomized-device, .darkBlue-theme .edtd-modal-content-edit-taxonomized-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .edtd-widget-header-edit-taxonomized-device, .darkBlue-theme .edtd-widget-header-edit-taxonomized-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .edtd-form-section-edit-taxonomized-device {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .edtd-form-section-edit-taxonomized-device {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .edtd-form-section-edit-taxonomized-device__head, .darkBlue-theme .edtd-form-section-edit-taxonomized-device__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .edtd-input-edit-taxonomized-device, .darkBlue-theme .edtd-input-edit-taxonomized-device, .dark-theme .edtd-select-edit-taxonomized-device {
border: none !important;
}
.darkBlue-theme .edtd-select-edit-taxonomized-device, .dark-theme .edtd-filter-delete-edit-taxonomized-device, .darkBlue-theme .edtd-filter-delete-edit-taxonomized-device {
border: none !important;
}
.dark-theme .edtd-filter-delete-edit-taxonomized-device, .darkBlue-theme .edtd-filter-delete-edit-taxonomized-device {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme .edtd-modal-content-edit-taxonomized-device {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .edtd-widget-header-edit-taxonomized-device {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .edtd-form-section-edit-taxonomized-device {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .edtd-input-edit-taxonomized-device, .lightBlue-theme .edtd-select-edit-taxonomized-device {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .edtd-filter-delete-edit-taxonomized-device {
border: none;
background-color: #ffffff;
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-data-taxonomized-device-modal/data-ware-house-view-data-taxonomized-device-modal/data-ware-house-edit-data-taxonomized-device-modal/data-ware-house-edit-data-taxonomized-device-modal.component.css (scoped) ===== */
app-data-ware-house-edit-data-taxonomized-device-modal {
.edtd-modal-content-edit-taxonomized-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: hidden;
}
.edtd-form-edit-taxonomized-device {
min-height: 100%;
}
.edtd-widget-shell-edit-taxonomized-device {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.edtd-widget-header-edit-taxonomized-device {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.edtd-widget-title-edit-taxonomized-device {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.edtd-header-icon-edit-taxonomized-device {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.edtd-title-text-edit-taxonomized-device {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.edtd-widget-close-edit-taxonomized-device {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.edtd-widget-close-edit-taxonomized-device:hover {
transform: translateY(-1px);
opacity: 1;
}
.edtd-widget-close-edit-taxonomized-device:focus, .edtd-widget-close-edit-taxonomized-device:active {
outline: none !important;
box-shadow: none !important;
}
.edtd-modal-body-edit-taxonomized-device {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.edtd-modal-body-edit-taxonomized-device::-webkit-scrollbar {
width: 4px;
}
.edtd-modal-body-edit-taxonomized-device::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.edtd-hidden-field-edit-taxonomized-device {
margin: 0;
}
.edtd-form-section-edit-taxonomized-device {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.edtd-form-section-edit-taxonomized-device__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.edtd-form-section-edit-taxonomized-device__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.edtd-form-section-edit-taxonomized-device__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.edtd-field-edit-taxonomized-device {
margin-bottom: 12px;
}
.edtd-field-last-edit-taxonomized-device {
margin-bottom: 0 !important;
}
.edtd-label-edit-taxonomized-device {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.edtd-input-edit-taxonomized-device, .edtd-select-edit-taxonomized-device {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.edtd-input-edit-taxonomized-device::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.edtd-input-edit-taxonomized-device:focus, .edtd-select-edit-taxonomized-device:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.edtd-select-wrap-edit-taxonomized-device {
width: 100%;
}
.edtd-filter-row-edit-taxonomized-device {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 8px;
align-items: center;
}
.edtd-filter-input-wrap-edit-taxonomized-device {
position: relative;
min-width: 0;
}
.edtd-filter-input-edit-taxonomized-device {
padding-right: 34px;
}
.edtd-filter-clear-edit-taxonomized-device {
position: absolute;
top: 54%;
right: 4px;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.55;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 11px;
line-height: 1;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.edtd-filter-clear-edit-taxonomized-device:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.edtd-filter-clear-edit-taxonomized-device:focus, .edtd-filter-clear-edit-taxonomized-device:active, .edtd-filter-delete-edit-taxonomized-device:focus, .edtd-filter-delete-edit-taxonomized-device:active, .edtd-add-filter-edit-taxonomized-device:focus, .edtd-add-filter-edit-taxonomized-device:active {
outline: none;
box-shadow: none;
}
.edtd-filter-delete-edit-taxonomized-device {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.edtd-filter-delete-edit-taxonomized-device:hover {
transform: translateY(-1px);
opacity: 1;
color: #dc3545;
}
.edtd-add-filter-edit-taxonomized-device {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.edtd-add-filter-edit-taxonomized-device:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.edtd-modal-footer-edit-taxonomized-device {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 16px 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--body--background) 96%, transparent) 28%,
var(--body--background));
}
.edtd-action-btn-edit-taxonomized-device {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.edtd-action-btn-edit-taxonomized-device:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.edtd-action-btn-edit-taxonomized-device--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
@media (max-width: 722px) {
.edtd-modal-footer-edit-taxonomized-device {
flex-direction: column;
align-items: stretch;
}
.edtd-action-btn-edit-taxonomized-device {
width: 100%;
}
}
@media (max-width: 576px) {
.edtd-modal-body-edit-taxonomized-device {
padding: 12px 12px 0;
}
.edtd-form-section-edit-taxonomized-device {
padding: 14px;
}
.edtd-filter-row-edit-taxonomized-device {
grid-template-columns: minmax(0, 1fr) 36px;
}
}
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-data-taxonomized-device-modal/data-ware-house-view-data-taxonomized-device-modal/data-ware-house-view-data-taxonomized-device-modal.component.css (scoped) ===== */
app-data-ware-house-view-data-taxonomized-device-modal {
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
border-bottom: var(--cart--border);
background-color: var(--body--background);
}
.label-header {
color: var(--primary--body--color);
}
.header-bottom {
border-bottom: 1px solid var(--primary--body--color);
}
.modal-fullscreen {
height: auto !important;
}
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-log-detail-modal/data-ware-house-log-detail-modal.component.css (global) ===== */
.dark-theme .dld-modal-content-log-detail, .darkBlue-theme .dld-modal-content-log-detail {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .dld-widget-header-log-detail, .darkBlue-theme .dld-widget-header-log-detail {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .dld-form-section-log-detail {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .dld-form-section-log-detail {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .dld-form-section-log-detail__head, .darkBlue-theme .dld-form-section-log-detail__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .dld-table-head-log-detail, .dark-theme .dld-table-cell-log-detail, .darkBlue-theme .dld-table-head-log-detail, .darkBlue-theme .dld-table-cell-log-detail {
border: none !important;
}
.dark-theme .dld-table-log-detail, .darkBlue-theme .dld-table-log-detail {
border: none !important;
}
.dark-theme .dld-table-row-log-detail:not(:last-child) .dld-table-head-log-detail, .dark-theme .dld-table-row-log-detail:not(:last-child) .dld-table-cell-log-detail {
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.045);
}
.dark-theme .dld-table-head-log-detail {
background-color: color-mix(in srgb, var(--input--background) 72%, #2f3744 28%);
color: rgba(255, 255, 255, 0.86);
box-shadow: none;
}
.dark-theme .dld-table-cell-log-detail {
background-color: color-mix(in srgb, var(--body--background) 72%, #242b36 28%);
color: rgba(255, 255, 255, 0.78);
}
.darkBlue-theme .dld-table-head-log-detail {
background-color: color-mix(in srgb, var(--input--background) 64%, #0d1218 36%);
color: rgba(245, 248, 255, 0.9);
box-shadow: none;
}
.darkBlue-theme .dld-table-cell-log-detail {
background-color: color-mix(in srgb, var(--body--background) 66%, #1c274c 34%);
color: rgba(241, 245, 255, 0.8);
box-shadow: none;
}
.darkBlue-theme .dld-table-row-log-detail {
border-style: none;
}
.dark-theme .dld-table-row-log-detail {
border-style: none;
}
.dark-theme .dld-level-cell-log-detail {
color: #393a3a !important;
}
.dark-theme .dld-context-menu-log-detail, .darkBlue-theme .dld-context-menu-log-detail {
border: none;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .dld-context-menu-log-detail {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, #0000008a);
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .dld-context-menu-log-detail {
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
}
.darkBlue-theme .dld-context-close-log-detail, .darkBlue-theme .dld-context-item-log-detail i {
color: #ffffff !important;
}
.dark-theme .dld-context-item-log-detail:hover, .darkBlue-theme .dld-context-item-log-detail:hover {
background-color: color-mix(in srgb, var(--secondary--color) 22%, transparent) !important;
}
.lightBlue-theme .dld-modal-content-log-detail {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .dld-widget-header-log-detail {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .dld-form-section-log-detail {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .dld-table-head-log-detail, .lightBlue-theme .dld-table-cell-log-detail {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .dld-table-log-detail {
border: 1px solid rgba(117, 145, 155, 0.28);
}
.lightBlue-theme .dld-table-head-log-detail {
box-shadow: inset -1px 0 0 rgba(117, 145, 155, 0.24);
}
.lightBlue-theme .dld-table-row-log-detail:not(:last-child) .dld-table-head-log-detail {
box-shadow:
inset -1px 0 0 rgba(117, 145, 155, 0.24),
inset 0 -1px 0 rgba(117, 145, 155, 0.24);
}
.lightBlue-theme .dld-table-row-log-detail:not(:last-child) .dld-table-cell-log-detail {
box-shadow: inset 0 -1px 0 rgba(117, 145, 155, 0.24);
}
.lightBlue-theme .dld-context-menu-log-detail {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
#ffffff;
}
.lightBlue-theme .dld-context-item-log-detail:hover {
background-color: color-mix(in srgb, var(--secondary--color) 22%, transparent) !important;
}
@keyframes dldParseBlinkLogDetail {
0% {
opacity: 0.25;
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(255, 235, 59, 0);
}
50% {
opacity: 1;
transform: scale(1.1);
box-shadow: 0 0 8px 2px rgba(255, 235, 59, 0.55);
}
100% {
opacity: 0.25;
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(255, 235, 59, 0);
}
}
@keyframes dldDotsLogDetail {
0% {
content: "";
}
25% {
content: ".";
}
50% {
content: "..";
}
75% {
content: "...";
}
100% {
content: "";
}
}
@media only screen and (max-width: 950px) {
.show-sidebar .dld-modal-dialog-log-detail {
width: 100% !important;
}
.show-sidebar .dld-modal-footer-log-detail {
width: 100% !important;
}
}
/* ===== admin-components/data-ware-house/modals/data-ware-house-log-detail-modal/data-ware-house-log-detail-modal.component.css (scoped) ===== */
app-data-ware-house-log-detail-modal {
.modal.right .dld-modal-dialog-log-detail {
position: fixed;
margin: auto;
height: 100%;
transform: translate3d(0%, 0, 0);
}
.modal.right.fade .dld-modal-dialog-log-detail {
right: -5px;
width: 50%;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .dld-modal-dialog-log-detail {
right: 0;
}
.dld-modal-content-log-detail {
height: 100%;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--table--box--shadow);
overflow: hidden;
}
.dld-form-log-detail, .dld-widget-shell-log-detail {
min-height: 100%;
}
.dld-widget-shell-log-detail {
display: flex;
flex-direction: column;
overflow: hidden;
}
.dld-widget-header-log-detail {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.dld-widget-title-log-detail {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.dld-header-icon-log-detail {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.dld-title-text-log-detail {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.dld-widget-close-log-detail {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.dld-widget-close-log-detail:hover {
transform: translateY(-1px);
opacity: 1;
}
.dld-widget-close-log-detail:focus, .dld-widget-close-log-detail:active {
outline: none !important;
box-shadow: none !important;
}
.dld-modal-body-log-detail {
flex: 1;
height: calc(100vh - 104px);
overflow-y: auto;
padding: 14px 16px 80px;
}
.dld-modal-body-log-detail::-webkit-scrollbar, .dld-context-menu-log-detail::-webkit-scrollbar {
width: 4px;
}
.dld-modal-body-log-detail::-webkit-scrollbar-thumb, .dld-context-menu-log-detail::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.dld-content-stack-log-detail {
display: flex;
flex-direction: column;
gap: 12px;
}
.dld-form-section-log-detail {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.dld-form-section-log-detail__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.dld-form-section-log-detail__head > i, .dld-section-title-log-detail i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.dld-form-section-log-detail__head > span, .dld-section-title-log-detail span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.dld-parse-head-log-detail {
justify-content: space-between;
gap: 12px;
}
.dld-section-title-log-detail {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.dld-table-log-detail {
width: 100%;
margin-bottom: 0;
word-wrap: break-word;
--bs-table-bg: transparent;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.dld-table-head-log-detail, .dld-table-cell-log-detail {
padding: 0.75rem !important;
font-size: 12px !important;
color: var(--primary--body--color);
border: none !important;
background-color: color-mix(in srgb, var(--input--background) 76%, var(--body--background));
vertical-align: middle;
}
.dld-table-head-log-detail {
width: 32%;
font-weight: 700;
background-color: color-mix(in srgb, var(--input--background) 86%, var(--body--background));
box-shadow: inset -1px 0 0 color-mix(in srgb, var(--primary--body--color) 14%, transparent);
}
.dld-table-row-log-detail:not(:last-child) .dld-table-head-log-detail {
box-shadow:
inset -1px 0 0 color-mix(in srgb, var(--primary--body--color) 14%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color) 14%, transparent);
}
.dld-table-row-log-detail:not(:last-child) .dld-table-cell-log-detail {
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color) 14%, transparent);
}
.dld-table-row-log-detail:first-child .dld-table-head-log-detail:first-child {
border-top-left-radius: 10px;
}
.dld-table-row-log-detail:first-child .dld-table-cell-log-detail:last-child {
border-top-right-radius: 10px;
}
.dld-table-row-log-detail:last-child .dld-table-head-log-detail:first-child {
border-bottom-left-radius: 10px;
}
.dld-table-row-log-detail:last-child .dld-table-cell-log-detail:last-child {
border-bottom-right-radius: 10px;
}
.dld-table-cell-log-detail {
max-width: 240px;
}
.dld-selectable-cell-log-detail {
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.dld-device-logo-log-detail {
width: 25px;
margin-right: 8px;
}
.dld-link-log-detail {
color: var(--secondary--color);
text-decoration: none;
word-break: break-word;
}
.dld-link-log-detail:hover {
text-decoration: underline;
}
.dld-info-text-log-detail {
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.72;
}
.dld-warning-log-detail {
width: 100%;
margin: 16px 0 4px;
display: flex !important;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--primary--body--color);
opacity: 0.8;
font-size: 12px;
}
.dld-warning-log-detail i {
color: rgba(255, 166, 0, 0.72);
}
.dld-spinner-wrap-log-detail {
display: flex;
justify-content: center;
margin-top: 8px;
color: var(--primary--body--color);
}
.dld-parse-label-log-detail {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1;
user-select: none;
color: var(--primary--body--color);
}
.dld-parse-dot-log-detail, .dld-parse-dot-success-log-detail, .dld-parse-dot-fail-log-detail {
width: 8px;
height: 8px;
border-radius: 999px;
box-shadow: 0 0 0 0 rgba(255, 235, 59, 0);
}
.dld-parse-dot-log-detail {
background: #aa54c0;
animation: dldParseBlinkLogDetail 1s infinite;
}
.dld-parse-dot-success-log-detail {
background: green;
}
.dld-parse-dot-fail-log-detail {
background: rgba(255, 0, 0, 0.747);
}
.dld-parse-button-log-detail {
border: none;
border-radius: 8px;
min-height: 32px;
padding: 0 12px;
background-color: var(--secondary--color);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
font-size: 12px;
font-weight: 650;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dld-parse-button-log-detail:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow);
}
.dld-parse-button-log-detail:focus, .dld-parse-button-log-detail:active {
outline: none;
box-shadow: none;
}
.dld-modal-footer-log-detail {
position: fixed;
bottom: 0;
right: -5px;
z-index: 10;
width: 50%;
min-height: 52px;
padding: 8px 16px 12px;
display: flex;
justify-content: flex-end;
}
.dld-action-btn-log-detail {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dld-action-btn-log-detail:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.dld-level-cell-log-detail.cell-bg-1, .dld-level-cell-log-detail.cell-bg-2, .dld-level-cell-log-detail.cell-bg-5, .dld-level-cell-log-detail.cell-bg-6 {
color: #111111 !important;
}
.dld-level-cell-log-detail.cell-bg-3, .dld-level-cell-log-detail.cell-bg-4, .dld-level-cell-log-detail.cell-bg-7, .dld-level-cell-log-detail.cell-bg-8, .dld-level-cell-log-detail.cell-bg-9, .dld-level-cell-log-detail.cell-bg-10 {
color: #ffffff !important;
}
.dld-context-menu-log-detail {
display: none;
list-style: none;
width: 210px;
min-height: 120px;
padding: 0;
position: absolute;
z-index: 9999;
overflow: hidden;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 9%, transparent), transparent 44%),
color-mix(in srgb, var(--body--background) 92%, var(--input--background) 8%);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 12px 28px rgba(0, 0, 0, 0.12);
}
.dld-context-header-log-detail {
height: 30px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
box-shadow: var(--cart--box--shadow);
background-color: color-mix(in srgb, var(--input--background) 58%, transparent);
}
.dld-context-close-log-detail {
color: var(--secondary--color);
transform: translateY(5px);
top: 4px;
cursor: pointer;
font-size: 20px;
}
.dld-context-item-log-detail {
min-height: 34px;
margin: 5px 6px;
padding: 0 10px;
cursor: pointer;
color: var(--primary--body--color);
display: flex;
align-items: center;
gap: 8px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 650;
opacity: 0.82;
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.dld-context-item-log-detail i {
width: 16px;
text-align: center;
color: var(--secondary--color);
}
.dld-context-item-log-detail:hover {
background-color: color-mix(in srgb, var(--secondary--color) 15%, transparent);
color: var(--primary--body--color);
opacity: 1;
transform: translateX(1px);
}
.dld-parse-ellipsis-log-detail::after {
content: "...";
animation: dldDotsLogDetail 1.2s steps(4, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
.dld-parse-dot-log-detail, .dld-parse-ellipsis-log-detail::after {
animation: none;
}
.dld-parse-ellipsis-log-detail::after {
content: "...";
}
}
@media only screen and (max-width: 850px) {
.dld-modal-dialog-log-detail {
width: 75% !important;
}
.dld-modal-footer-log-detail {
width: 75% !important;
}
}
@media (max-width: 576px) {
.dld-modal-body-log-detail {
padding: 12px 12px 80px;
}
.dld-form-section-log-detail {
padding: 14px;
}
.dld-parse-head-log-detail {
align-items: flex-start;
flex-direction: column;
}
.dld-modal-footer-log-detail {
justify-content: stretch;
}
.dld-action-btn-log-detail {
width: 100%;
}
}
}
/* ===== admin-components/device-flag/device-flag.component.css (global) ===== */
.darkBlue-theme .tooltip_td {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.darkBlue-theme .tooltip_th {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.lightBlue-theme .tooltip_td {
border: 1px solid var(--primary--body--color) !important;
}
.lightBlue-theme .tooltip_th {
border: 1px solid var(--primary--body--color) !important;
}
.dark-theme #tooltip_all_flag {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}
.darkBlue-theme #tooltip_all_flag {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.dark-theme #tooltip_all_flag .tooltip_table, .darkBlue-theme #tooltip_all_flag .tooltip_table {
border: none !important;
}
.dark-theme #tooltip_all_flag .tooltip_th, .dark-theme #tooltip_all_flag .tooltip_td {
border: none !important;
background-color: color-mix(in srgb, var(--body--background) 72%, #242b36 28%);
color: rgba(255, 255, 255, 0.82);
box-shadow: none;
}
.dark-theme #tooltip_all_flag .tooltip_th {
background-color: color-mix(in srgb, var(--input--background) 72%, #2f3744 28%);
color: rgba(255, 255, 255, 0.9);
}
.darkBlue-theme #tooltip_all_flag .tooltip_th, .darkBlue-theme #tooltip_all_flag .tooltip_td {
border: none !important;
border-radius: 0 !important;
background-color: color-mix(in srgb, var(--body--background) 66%, #1c274c 34%);
color: rgba(241, 245, 255, 0.84);
box-shadow: none;
}
.darkBlue-theme #tooltip_all_flag .tooltip_th {
background-color: color-mix(in srgb, var(--input--background) 64%, #0d1218 36%);
color: rgba(245, 248, 255, 0.92);
}
.dark-theme #tooltip_all_flag tbody tr:not(:last-child) .tooltip_td:first-child {
box-shadow:
inset -1px 0 0 rgba(255, 255, 255, 0.055),
inset 0 -1px 0 rgba(255, 255, 255, 0.055);
}
.dark-theme #tooltip_all_flag tbody tr:not(:last-child) .tooltip_td:not(:first-child) {
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.055);
}
.darkBlue-theme #tooltip_all_flag tbody tr:not(:last-child) .tooltip_td:first-child {
box-shadow:
inset -1px 0 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.darkBlue-theme #tooltip_all_flag tbody tr:not(:last-child) .tooltip_td:not(:first-child) {
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.dark-theme #tooltip_all_flag .tooltip_close_button, .darkBlue-theme #tooltip_all_flag .tooltip_close_button {
color: #ffffff;
}
.lightBlue-theme #tooltip_all_flag {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
#ffffff;
box-shadow: var(--cart--box--shadow), 0 12px 28px rgba(78, 112, 124, 0.14);
}
.lightBlue-theme #tooltip_all_flag .tooltip_table {
border: 1px solid rgba(117, 145, 155, 0.28);
}
.lightBlue-theme #tooltip_all_flag .tooltip_th, .lightBlue-theme #tooltip_all_flag .tooltip_td {
border: none !important;
background-color: #ffffff;
}
.lightBlue-theme #tooltip_all_flag .tooltip_th {
background-color: #f1f6f8;
}
.lightBlue-theme #tooltip_all_flag tr:not(:last-child) .tooltip_th {
box-shadow:
inset -1px 0 0 rgba(117, 145, 155, 0.24),
inset 0 -1px 0 rgba(117, 145, 155, 0.24);
}
.lightBlue-theme #tooltip_all_flag tr:not(:last-child) .tooltip_td {
box-shadow: inset 0 -1px 0 rgba(117, 145, 155, 0.24);
}
.lightBlue-theme #tooltip_all_flag .tooltip_td:first-child, .lightBlue-theme #tooltip_all_flag .tooltip_th:first-child {
box-shadow:
inset -1px 0 0 rgba(117, 145, 155, 0.24),
inset 0 -1px 0 rgba(117, 145, 155, 0.24);
}
.lightBlue-theme #tooltip_all_flag tbody tr:last-child .tooltip_td:first-child {
box-shadow: inset -1px 0 0 rgba(117, 145, 155, 0.24);
}
.lightBlue-theme #tooltip_all_flag tbody tr:not(:last-child) .tooltip_td:first-child {
box-shadow:
inset -1px 0 0 rgba(117, 145, 155, 0.24),
inset 0 -1px 0 rgba(117, 145, 155, 0.24);
}
.lightBlue-theme #tooltip_all_flag tbody tr:not(:last-child) .tooltip_td:not(:first-child) {
box-shadow: inset 0 -1px 0 rgba(117, 145, 155, 0.24);
}
.dark-theme #tooltip_all_correlation {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}
.darkBlue-theme #tooltip_all_correlation {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.dark-theme #tooltip_all_correlation > .d-flex:first-child, .darkBlue-theme #tooltip_all_correlation > .d-flex:first-child {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme #tooltip_all_correlation .correlation_row {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 8%, transparent), transparent 38%),
color-mix(in srgb, var(--body--background) 72%, #242b36 28%);
box-shadow: none;
}
.darkBlue-theme #tooltip_all_correlation .correlation_row {
border: none !important;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 38%),
color-mix(in srgb, var(--body--background) 66%, #1c274c 34%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.dark-theme #tooltip_all_correlation small, .dark-theme #tooltip_all_correlation .correlation_col, .darkBlue-theme #tooltip_all_correlation small, .darkBlue-theme #tooltip_all_correlation .correlation_col {
color: rgba(255, 255, 255, 0.84);
}
.dark-theme #tooltip_all_correlation .correlation_label, .darkBlue-theme #tooltip_all_correlation .correlation_label {
color: rgba(255, 255, 255, 0.92);
}
.dark-theme #tooltip_all_correlation .brand-model-row, .darkBlue-theme #tooltip_all_correlation .brand-model-row {
border-top-color: rgba(255, 255, 255, 0.06);
}
.dark-theme #tooltip_all_correlation .tooltip_close_button, .darkBlue-theme #tooltip_all_correlation .tooltip_close_button {
color: #ffffff;
}
.lightBlue-theme #tooltip_all_correlation {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
#ffffff;
box-shadow: var(--cart--box--shadow), 0 12px 28px rgba(78, 112, 124, 0.14);
}
.lightBlue-theme #tooltip_all_correlation .correlation_row {
border: none !important;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.07), transparent 42%),
#ffffff;
box-shadow: 0 0 0 1px rgba(117, 145, 155, 0.18);
}
.lightBlue-theme #tooltip_all_correlation .brand-model-row {
border-top-color: rgba(117, 145, 155, 0.22);
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .correlation_row {
border: 1px solid rgb(118 116 133 / 18%) !important;
}
.lightBlue-theme .correlation_row {
border: 1px solid rgba(118, 116, 133, 0.252) !important;
}
@media (max-width: 1700px) {
.show-sidebar .correlation_rows.multi-item {
grid-template-columns: 1fr;
}
.show-sidebar .correlation_rows.single-item {
grid-template-columns: 1fr;
}
.show-sidebar .correlation_rows {
grid-template-columns: 1fr;
}
}
.dark-theme .dflm-modal-content-flag-logs-modal, .darkBlue-theme .dflm-modal-content-flag-logs-modal {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .dflm-widget-header-flag-logs-modal, .darkBlue-theme .dflm-widget-header-flag-logs-modal {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .dflm-form-section-flag-logs-modal {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .dflm-form-section-flag-logs-modal {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .dflm-form-section-flag-logs-modal__head, .darkBlue-theme .dflm-form-section-flag-logs-modal__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .dflm-select-btn-flag-logs-modal, .darkBlue-theme .dflm-select-btn-flag-logs-modal {
border: none !important;
}
.dark-theme .dflm-info-text-flag-logs-modal, .darkBlue-theme .dflm-info-text-flag-logs-modal {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme .dflm-dropdown-menu-flag-logs-modal, .darkBlue-theme .dflm-dropdown-menu-flag-logs-modal {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .dflm-brand-item-flag-logs-modal, .darkBlue-theme .dflm-brand-item-flag-logs-modal {
color: rgba(255, 255, 255, 0.88);
}
.lightBlue-theme .dflm-modal-content-flag-logs-modal {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .dflm-widget-header-flag-logs-modal {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .dflm-form-section-flag-logs-modal {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .dflm-select-btn-flag-logs-modal {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .dflm-dropdown-menu-flag-logs-modal, .lightBlue-theme .dflm-info-text-flag-logs-modal {
border: none;
background-color: #ffffff;
}
/* ===== admin-components/device-flag/device-flag.component.css (scoped) ===== */
app-device-flag {
ul.tools {
display: none;
list-style: none;
box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
position: absolute;
padding: 0;
}
ul.tools li {
height: 25px;
margin: 4px;
padding: 5px;
cursor: pointer;
color: var(--primary--body--color);
}
.filter-tools {
font-size: 11px;
}
#contextmenu {
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
height: 215px;
border: var(--cart--border)
}
.mat-icon {
color: var(--secondary--color);
transform: translateY(5px);
}
.context-header {
box-shadow: var(--cart--box--shadow);
border-bottom: var(--cart--border);
}
#tooltip_all_flag {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
#tooltip_all_correlation {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
.tooltip_th {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_td {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_level {
color: var(--primary--body--color);
}
.tooltip_color {
width: 20px;
height: 20px;
border-radius: 50%;
transform: translateY(2px);
}
.tooltip_td_first {
background-color: var(--body--background);
}
.tooltip_table {
background-color: var(--body--background);
}
.tooltip_close_button {
color: var(--primary--body--color);
cursor: pointer;
}
#tooltip_all_flag {
padding: 16px;
min-width: 340px;
max-width: 460px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 9%, transparent), transparent 44%),
color-mix(in srgb, var(--body--background) 92%, var(--input--background) 8%);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
box-shadow: var(--cart--box--shadow), 0 14px 32px rgba(0, 0, 0, 0.14);
}
#tooltip_all_flag h6 {
margin: 0 0 12px !important;
color: var(--primary--body--color);
font-size: 14px;
font-weight: 700;
opacity: 0.9;
}
#tooltip_all_flag .tooltip_close_button {
width: 28px;
height: 28px;
border-radius: 8px;
color: var(--primary--body--color);
opacity: 0.72;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
#tooltip_all_flag .tooltip_close_button:hover {
opacity: 1;
transform: translateY(-1px);
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
#tooltip_all_flag .tooltip_table {
width: 100%;
margin: 0;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background-color: transparent;
}
#tooltip_all_flag .tooltip_th, #tooltip_all_flag .tooltip_td {
padding: 9px 10px !important;
border: none !important;
color: var(--primary--body--color);
background-color: color-mix(in srgb, var(--input--background) 76%, var(--body--background));
font-size: 12px;
vertical-align: middle;
}
#tooltip_all_flag .tooltip_th {
font-weight: 700;
background-color: color-mix(in srgb, var(--input--background) 86%, var(--body--background));
}
#tooltip_all_flag .tooltip_th:first-child, #tooltip_all_flag .tooltip_td:first-child {
width: 44px;
text-align: center;
}
#tooltip_all_flag tr:not(:last-child) .tooltip_th {
box-shadow:
inset -1px 0 0 color-mix(in srgb, var(--primary--body--color) 12%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color) 12%, transparent);
}
#tooltip_all_flag tr:not(:last-child) .tooltip_td {
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color) 12%, transparent);
}
#tooltip_all_flag .tooltip_th:first-child {
box-shadow:
inset -1px 0 0 color-mix(in srgb, var(--primary--body--color) 12%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color) 12%, transparent);
}
#tooltip_all_flag .tooltip_td:first-child {
box-shadow: inset -1px 0 0 color-mix(in srgb, var(--primary--body--color) 12%, transparent);
}
#tooltip_all_flag tbody tr:not(:last-child) .tooltip_td:first-child {
box-shadow:
inset -1px 0 0 color-mix(in srgb, var(--primary--body--color) 12%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color) 12%, transparent);
}
#tooltip_all_flag tbody tr:not(:last-child) .tooltip_td:not(:first-child) {
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color) 12%, transparent);
}
#tooltip_all_flag .tooltip_td_first {
background-color: transparent;
}
#tooltip_all_flag .tooltip_level {
color: var(--primary--body--color);
opacity: 0.84;
margin-left: 0 !important;
word-break: break-word;
}
#tooltip_all_correlation {
padding: 16px;
min-width: 420px;
max-width: 760px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 9%, transparent), transparent 44%),
color-mix(in srgb, var(--body--background) 92%, var(--input--background) 8%);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
box-shadow: var(--cart--box--shadow), 0 14px 32px rgba(0, 0, 0, 0.14);
}
#tooltip_all_correlation > .d-flex:first-child {
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
}
#tooltip_all_correlation small {
color: var(--primary--body--color);
opacity: 0.78;
font-size: 12.5px;
}
#tooltip_all_correlation .tooltip_close_button {
width: 28px;
height: 28px;
border-radius: 8px;
color: var(--primary--body--color);
opacity: 0.72;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
#tooltip_all_correlation .tooltip_close_button:hover {
opacity: 1;
transform: translateY(-1px);
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
#tooltip_all_correlation > div:nth-child(2) {
max-height: 320px !important;
overflow: auto !important;
padding-right: 4px;
}
#tooltip_all_correlation > div:nth-child(2)::-webkit-scrollbar {
width: 4px;
}
#tooltip_all_correlation > div:nth-child(2)::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
#tooltip_all_correlation .correlation_rows {
display: grid;
gap: 10px;
}
#tooltip_all_correlation .correlation_rows.single-item {
grid-template-columns: 1fr;
}
#tooltip_all_correlation .correlation_rows.multi-item {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#tooltip_all_correlation .correlation_row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px 10px;
padding: 12px;
min-width: 0;
height: 100%;
box-sizing: border-box;
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 5%, transparent), transparent 38%),
color-mix(in srgb, var(--input--background) 76%, var(--body--background));
box-shadow: var(--cart--box--shadow);
}
#tooltip_all_correlation .correlation_col {
display: flex;
align-items: center;
gap: 6px;
color: var(--primary--body--color);
font-size: 12.5px;
word-break: break-word;
opacity: 0.86;
}
#tooltip_all_correlation .correlation_label {
font-weight: 700;
white-space: nowrap;
opacity: 0.92;
}
#tooltip_all_correlation .brand-model-row {
padding-top: 6px;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
}
#tooltip_all_correlation .correlation_col img {
width: 28px;
height: 28px;
object-fit: contain;
}
#tooltip_all_correlation .green-circle, #tooltip_all_correlation .red-circle {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
#tooltip_all_correlation .green-circle {
background-color: #22c55e;
color: #22c55e;
}
#tooltip_all_correlation .red-circle {
background-color: #ef4444;
color: #ef4444;
}
#tooltip_all_flag {
opacity: 0;
pointer-events: none;
transform: translateY(5px);
transform-origin: top left;
transition: .25s all ease;
transition-delay: 0s;
}
#tooltip_all_correlation {
opacity: 0;
pointer-events: none;
transform: translateY(8px) scale(0.98);
transform-origin: top left;
transition:
opacity 180ms ease,
transform 180ms ease,
box-shadow 180ms ease;
}
#tooltip_all_flag.device-flag-tooltip-visible, #tooltip_all_correlation.device-flag-tooltip-visible {
opacity: 1;
pointer-events: auto;
}
#tooltip_all_flag.device-flag-tooltip-visible {
transform: translateY(0);
}
#tooltip_all_correlation.device-flag-tooltip-visible {
transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
#tooltip_all_flag, #tooltip_all_correlation {
transition: none;
transform: none;
}
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-content {
background-color: var(--body--background);
box-shadow: var(--table--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.choose_select {
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius);
font-size: 13px;
height: 36px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
display: block;
border-top: none;
}
.select-device-brand {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--body--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
background-color: var(--input--background);
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.modal {
overflow: visible !important;
}
.modal-dialog {
overflow: visible !important;
}
.modal-content {
overflow: visible !important;
}
.device-brand-menu-add-new-device {
max-height: 500px;
overflow: auto;
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.device-search {
height: 35px;
text-indent: 20px;
outline: none;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius);
}
.device-search::placeholder {
text-indent: 20px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
opacity: 0.7;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.correlation_rows {
display: grid;
gap: 10px;
}
.correlation_rows.single-item {
grid-template-columns: 1fr;
}
.correlation_rows.multi-item {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.correlation_row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 3px 10px;
padding: 10px 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
min-width: 0;
height: 100%;
box-sizing: border-box;
}
.correlation_col {
display: flex;
align-items: center;
gap: 6px;
color: var(--primary--body--color);
font-size: 13px;
word-break: break-word;
}
.correlation_index {
font-weight: 600;
}
.correlation_device_image img {
object-fit: contain;
}
.correlation_label {
font-weight: 600;
white-space: nowrap;
}
.red-circle {
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
}
.green-circle {
width: 10px;
height: 10px;
background-color: green;
border-radius: 50%;
}
@media (max-width: 1400px) {
.brand-model-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 0px !important;
}
.brand-model-row .correlation_col {
width: 100%;
}
}
@media (max-width: 900px) {
.correlation_rows.multi-item, .correlation_rows.single-item {
grid-template-columns: 1fr;
}
}
.dflm-modal-content-flag-logs-modal {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: visible !important;
}
.dflm-widget-shell-flag-logs-modal {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: visible;
}
.dflm-widget-header-flag-logs-modal {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 14px 14px 0 0;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.dflm-widget-title-flag-logs-modal {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.dflm-header-icon-flag-logs-modal {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.dflm-title-text-flag-logs-modal {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.dflm-widget-close-flag-logs-modal {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.dflm-widget-close-flag-logs-modal:hover {
transform: translateY(-1px);
opacity: 1;
}
.dflm-widget-close-flag-logs-modal:focus, .dflm-widget-close-flag-logs-modal:active {
outline: none !important;
box-shadow: none !important;
}
.dflm-modal-body-flag-logs-modal {
flex: 1;
overflow: visible;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.dflm-form-section-flag-logs-modal {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
overflow: visible;
}
.dflm-form-section-flag-logs-modal__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.dflm-form-section-flag-logs-modal__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.dflm-form-section-flag-logs-modal__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.dflm-info-text-flag-logs-modal {
display: block;
margin-bottom: 14px;
padding: 9px 10px;
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 13%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 76%, var(--body--background));
font-size: 12.5px;
opacity: 0.78;
}
.dflm-field-flag-logs-modal {
margin-bottom: 0;
}
.dflm-label-flag-logs-modal {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.dflm-dropdown-flag-logs-modal {
width: 100%;
}
.dflm-select-btn-flag-logs-modal {
width: 100%;
height: 36px;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
box-shadow: var(--cart--box--shadow);
cursor: pointer;
padding: 0 12px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dflm-select-btn-flag-logs-modal::after {
margin-left: auto !important;
flex-shrink: 0;
}
.dflm-select-btn-flag-logs-modal:focus, .dflm-select-btn-flag-logs-modal.show {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.dflm-placeholder-flag-logs-modal {
opacity: 0.45;
font-size: 12px;
}
.dflm-dropdown-menu-flag-logs-modal {
width: 100%;
max-height: 330px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
z-index: 1065;
}
.dflm-dropdown-menu-flag-logs-modal::-webkit-scrollbar {
width: 4px;
}
.dflm-dropdown-menu-flag-logs-modal::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.dflm-brand-item-flag-logs-modal {
padding: 0;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.dflm-brand-link-flag-logs-modal {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
color: inherit;
text-decoration: none;
}
.dflm-brand-item-flag-logs-modal:hover {
background-color: var(--secondary--color) !important;
color: #ffffff;
}
.dflm-brand-logo-flag-logs-modal {
width: 30px;
height: 30px;
object-fit: contain;
flex-shrink: 0;
}
.dflm-modal-footer-flag-logs-modal {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 16px 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--body--background) 96%, transparent) 28%,
var(--body--background));
border-radius: 0 0 14px 14px;
}
.dflm-action-btn-flag-logs-modal {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dflm-action-btn-flag-logs-modal:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.dflm-action-btn-flag-logs-modal--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
@media (max-width: 722px) {
.dflm-modal-footer-flag-logs-modal {
flex-direction: column;
align-items: stretch;
}
.dflm-action-btn-flag-logs-modal {
width: 100%;
}
}
@media (max-width: 576px) {
.dflm-modal-body-flag-logs-modal {
padding: 12px 12px 0;
}
.dflm-form-section-flag-logs-modal {
padding: 14px;
}
}
}
/* ===== admin-components/device-log-search/device-log-search.component.css (global) ===== */
app-device-log-search .dls-grid .ag-root-wrapper {
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 10%, transparent);
border-radius: 10px;
background: var(--body--background, #fff);
}
app-device-log-search .dls-grid .ag-header, app-device-log-search .dls-grid .ag-header-row {
background: var(--ag-header-background-color) !important;
color: var(--primary--body--color, #333) !important;
}
app-device-log-search .dls-grid .ag-row, app-device-log-search .dls-grid .ag-cell {
color: var(--primary--body--color, #333) !important;
border-color: transparent !important;
}
app-device-log-search .dls-grid .ag-row {
border-bottom: none !important;
}
app-device-log-search .dls-grid .ag-row:hover {
background-color: var(--ag-row-hover-color) !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--input--background, #f8f9fa) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 18%, transparent) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color, #333) !important;
opacity: var(--opacity--80, 0.8) !important;
border-radius: 8px !important;
height: 36px !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper {
border-color: color-mix(in srgb, var(--secondary--color, #6190cb) 55%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color, #6190cb) 13%, transparent) !important;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color, #333) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color, #333) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color, #333) !important;
}
.mat-datepicker-content {
background-color: var(--body--background, #fff);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color, #333);
opacity: var(--opacity--80, 0.8);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color, #333);
opacity: var(--opacity--80, 0.8);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color, #333);
opacity: var(--opacity--80, 0.8);
}
.mat-calendar-body-label {
color: var(--primary--body--color, #333);
opacity: var(--opacity--80, 0.8);
}
.mdc-icon-button {
color: var(--primary--body--color, #333) !important;
opacity: var(--opacity--80, 0.8) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color, #333) !important;
opacity: var(--opacity--80, 0.8) !important;
}
.cdk-overlay-container {
z-index: 9999 !important;
}
.dark-theme .nd-modal-content-filters-section, .darkBlue-theme .nd-modal-content-filters-section {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.lightBlue-theme .nd-modal-content-filters-section {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
.dark-theme .filters-widget-header, .darkBlue-theme .filters-widget-header {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
.lightBlue-theme .filters-widget-header {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.dark-theme .filter-list, .darkBlue-theme .filter-list {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .filter-list {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.lightBlue-theme .filter-list {
box-shadow: none;
}
.dark-theme .nd-form-filters-time-area, .darkBlue-theme .nd-form-filters-time-area {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .nd-form-filters-time-area {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.lightBlue-theme .nd-form-filters-time-area {
box-shadow: none;
}
.dark-theme .choose_select_filter_modal, .darkBlue-theme .choose_select_filter_modal, .dark-theme .mat-mdc-text-field-wrapper, .darkBlue-theme .mat-mdc-text-field-wrapper {
border: none !important;
}
.lightBlue-theme .choose_select_filter_modal, .lightBlue-theme .mat-mdc-text-field-wrapper {
border: none !important;
background-color: #ffffff !important;
}
.dark-theme .choose_select_filter_modal.is-invalid, .darkBlue-theme .choose_select_filter_modal.is-invalid, .lightBlue-theme .choose_select_filter_modal.is-invalid {
border: 1px solid #dc3545 !important;
}
.dark-theme .summary-chip, .darkBlue-theme .summary-chip {
background: rgba(60, 130, 255, 0.16);
}
.dark-theme .summary-chip--op, .darkBlue-theme .summary-chip--op {
background: rgba(60, 130, 255, 0.3);
}
.lightBlue-theme .summary-chip {
background: rgba(80, 120, 123, 0.15);
}
.lightBlue-theme .summary-chip--op {
background: rgba(80, 120, 123, 0.28);
}
.dark-theme .connector-line, .darkBlue-theme .connector-line {
background: rgba(255, 255, 255, 0.10);
}
.dark-theme .logic-select, .darkBlue-theme .logic-select {
background-color: var(--input--background);
border: none !important;
color: #fff;
}
.lightBlue-theme .logic-select {
background-color: #ffffff !important;
color: var(--primary--body--color);
border: none !important;
}
.dark-theme .logic-select-wrapper::after, .darkBlue-theme .logic-select-wrapper::after {
color: #fff;
opacity: 0.85;
}
.dark-theme .dropdown-menu-use-template, .darkBlue-theme .dropdown-menu-use-template {
border: none;
background-color: var(--body--background);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .dropdown-menu-use-template .dropdown-item, .darkBlue-theme .dropdown-menu-use-template .dropdown-item {
color: rgba(255, 255, 255, 0.88);
}
.dark-theme .dropdown-menu-use-template .dropdown-item:hover, .dark-theme .dropdown-menu-use-template .dropdown-item:focus, .darkBlue-theme .dropdown-menu-use-template .dropdown-item:hover, .darkBlue-theme .dropdown-menu-use-template .dropdown-item:focus {
background-color: var(--secondary--color) !important;
color: #fff;
}
.dark-theme #deviceLogFilterModal .filters-title-text, .dark-theme #deviceLogFilterModal .dls-section-label, .dark-theme #deviceLogFilterModal .dls-device-name, .dark-theme #deviceLogFilterModal .new_filter, .darkBlue-theme #deviceLogFilterModal .filters-title-text, .darkBlue-theme #deviceLogFilterModal .dls-section-label, .darkBlue-theme #deviceLogFilterModal .dls-device-name, .darkBlue-theme #deviceLogFilterModal .new_filter {
color: rgba(255, 255, 255, 0.92) !important;
}
.dark-theme #deviceLogFilterModal .dls-device-item--selected .dls-device-name, .darkBlue-theme #deviceLogFilterModal .dls-device-item--selected .dls-device-name {
color: #fff !important;
}
.dark-theme #deviceLogFilterModal .dls-device-item--selected, .darkBlue-theme #deviceLogFilterModal .dls-device-item--selected {
border-left-color: #52c41a;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #52c41a 48%, rgba(255, 255, 255, 0.12)), 0 6px 16px rgba(0, 0, 0, 0.22);
}
.dark-theme #deviceLogFilterModal .dls-device-item--selected .dls-device-check, .darkBlue-theme #deviceLogFilterModal .dls-device-item--selected .dls-device-check {
color: #52c41a;
}
.dark-theme #deviceLogFilterModal .dls-device-ip, .dark-theme #deviceLogFilterModal .dls-device-brand, .darkBlue-theme #deviceLogFilterModal .dls-device-ip, .darkBlue-theme #deviceLogFilterModal .dls-device-brand {
color: rgba(255, 255, 255, 0.72) !important;
}
.lightBlue-theme #deviceLogFilterModal .filters-title-text, .lightBlue-theme #deviceLogFilterModal .dls-section-label, .lightBlue-theme #deviceLogFilterModal .dls-device-name, .lightBlue-theme #deviceLogFilterModal .new_filter {
color: #23353b !important;
}
.lightBlue-theme #deviceLogFilterModal .dls-device-item--selected .dls-device-name {
color: #23353b !important;
}
.lightBlue-theme #deviceLogFilterModal .dls-device-item--selected {
background: color-mix(in srgb, #52c41a 16%, #ffffff) !important;
border-left-color: #52c41a;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #52c41a 36%, transparent), 0 4px 12px rgba(82, 196, 26, 0.12);
}
.lightBlue-theme #deviceLogFilterModal .dls-device-item--selected .dls-device-check {
color: #52c41a;
}
.dark-theme #deviceLogFilterModal .dls-search-ico, .darkBlue-theme #deviceLogFilterModal .dls-search-ico {
color: rgba(255, 255, 255, 0.88);
opacity: 1;
}
.dark-theme #deviceLogFilterModal .dls-device-search, .darkBlue-theme #deviceLogFilterModal .dls-device-search {
color: rgba(255, 255, 255, 0.94) !important;
caret-color: #fff;
}
.dark-theme #deviceLogFilterModal .dls-device-search::placeholder, .darkBlue-theme #deviceLogFilterModal .dls-device-search::placeholder {
color: rgba(255, 255, 255, 0.72) !important;
opacity: 1 !important;
}
.lightBlue-theme #deviceLogFilterModal .dls-search-ico {
color: var(--secondary--color);
opacity: 0.95;
}
.lightBlue-theme .dropdown-menu-use-template {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.dark-theme .add-filter-cta, .darkBlue-theme .add-filter-cta {
border-color: color-mix(in srgb, var(--secondary--color) 32%, rgba(255, 255, 255, 0.08));
background: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color) 18%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--body--background) 96%, rgba(255, 255, 255, 0.02)));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.dark-theme .add-filter-cta__label, .darkBlue-theme .add-filter-cta__label {
color: rgba(255, 255, 255, 0.92);
}
.lightBlue-theme .add-filter-cta {
border: none;
background: linear-gradient(135deg, #ffffff, #f4fbfb);
box-shadow: 0 10px 24px rgba(44, 71, 74, 0.12);
}
.lightBlue-theme .add-filter-cta__icon {
background: #50787b;
}
.dark-theme .search-primary-btn, .darkBlue-theme .search-primary-btn {
background-color: rgba(60, 130, 255, 0.36) !important;
border: 1px solid rgba(60, 130, 255, 0.46);
}
.dark-theme .search-cancel-btn, .darkBlue-theme .search-cancel-btn {
background-color: rgba(255, 80, 80, 0.18) !important;
color: rgb(255, 120, 120);
border-color: rgba(255, 80, 80, 0.36);
}
.dark-theme .device-log-search-btn, .darkBlue-theme .device-log-search-btn {
background: rgba(255, 255, 255, 0.06) !important;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
.dark-theme .dls-navbar, .darkBlue-theme .dls-navbar {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 78%, rgba(255, 255, 255, 0.04)), color-mix(in srgb, var(--body--background) 92%, var(--secondary--color) 8%));
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.lightBlue-theme .dls-navbar {
background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--body--background) 88%, var(--secondary--color) 7%));
border-bottom-color: color-mix(in srgb, var(--secondary--color) 24%, transparent);
box-shadow: 0 10px 24px rgba(44, 71, 74, 0.08);
}
.dark-theme .dls-tabs-bar, .darkBlue-theme .dls-tabs-bar {
background: color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.lightBlue-theme .dls-tabs-bar {
background: color-mix(in srgb, var(--body--background) 88%, #8ca9b4 8%);
border-bottom-color: color-mix(in srgb, var(--secondary--color) 22%, transparent);
}
.dark-theme .dls-grid, .darkBlue-theme .dls-grid {
--ag-header-background-color: color-mix(in srgb, var(--input--background) 78%, var(--body--background) 22%);
--ag-odd-row-background-color: color-mix(in srgb, var(--input--background) 30%, var(--body--background) 70%);
--ag-row-hover-color: color-mix(in srgb, var(--secondary--color) 24%, var(--body--background));
--ag-selected-row-background-color: color-mix(in srgb, var(--secondary--color) 34%, var(--body--background));
--ag-border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent);
--ag-row-border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.darkBlue-theme .dls-grid {
--ag-header-background-color: color-mix(in srgb, var(--body--background) 72%, var(--secondary--color) 28%);
--ag-odd-row-background-color: color-mix(in srgb, var(--body--background) 86%, var(--secondary--color) 14%);
--ag-row-hover-color: color-mix(in srgb, var(--secondary--color) 42%, var(--body--background));
}
.lightBlue-theme .dls-grid {
--ag-header-background-color: #ffffff;
--ag-odd-row-background-color: color-mix(in srgb, var(--body--background) 82%, #8ca9b4 8%);
--ag-row-hover-color: color-mix(in srgb, var(--secondary--color) 13%, #ffffff);
--ag-selected-row-background-color: color-mix(in srgb, var(--secondary--color) 20%, #ffffff);
--ag-border-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
--ag-row-border-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.dark-theme .dls-empty-state, .darkBlue-theme .dls-empty-state {
background: var(--body--background);
}
.lightBlue-theme .dls-empty-state {
background: var(--body--background);
}
.dark-theme .dls-load-more-bar, .darkBlue-theme .dls-load-more-bar {
background: color-mix(in srgb, var(--input--background) 78%, var(--body--background) 22%);
border-top-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.lightBlue-theme .dls-load-more-bar {
background: #ffffff;
border-top-color: color-mix(in srgb, var(--secondary--color) 22%, transparent);
}
.dark-theme .dls-section-box {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .dls-section-box {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.lightBlue-theme .dls-section-box {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
box-shadow: none;
}
.dark-theme .dls-device-list, .darkBlue-theme .dls-device-list {
border: none;
background: color-mix(in srgb, var(--body--background) 60%, transparent);
}
.lightBlue-theme .dls-device-list {
border: none;
background-color: #ffffff;
}
.dark-theme .dls-small-btn, .darkBlue-theme .dls-small-btn {
border: none;
background: var(--input--background);
}
.lightBlue-theme .dls-small-btn {
border: none;
background-color: #ffffff;
}
.dark-theme .dls-small-btn--danger, .darkBlue-theme .dls-small-btn--danger {
background: rgba(255, 80, 80, 0.12) !important;
color: rgb(255, 120, 120);
}
.lightBlue-theme .dls-small-btn--danger {
background: rgba(229, 83, 83, 0.08) !important;
}
/* ===== admin-components/device-log-search/device-log-search.component.css (scoped) ===== */
app-device-log-search {
.dls-page {
display: flex;
flex-direction: column;
background: var(--body--background, #fff);
color: var(--primary--body--color, #333);
}
.dls-navbar {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 18px;
color: var(--primary--body--color, #333);
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background, #fff) 76%, var(--body--background, #fff) 24%), color-mix(in srgb, var(--body--background, #fff) 92%, var(--secondary--color, #042e52) 8%));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 12%, transparent);
box-shadow: 0 8px 20px color-mix(in srgb, var(--primary--body--color, #333) 6%, transparent);
}
.dls-navbar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.dls-navbar-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.dls-title-group {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.dls-page-title {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.dls-page-subtitle {
font-size: 11px;
font-weight: 400;
color: var(--primary--body--color);
opacity: 0.52;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dls-summary-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
padding: 3px 10px;
border-radius: 20px;
background: rgba(82, 196, 26, 0.12);
color: #52c41a;
border: 1px solid rgba(82, 196, 26, 0.25);
white-space: nowrap;
}
.dls-summary-icon {
color: #52c41a;
font-size: 12px;
}
.dls-summary-pill--warn {
background: rgba(255, 180, 0, 0.12);
color: #d48806;
border-color: rgba(255, 180, 0, 0.28);
}
.dls-summary-pill--warn .dls-summary-icon {
color: #d48806;
}
.dls-row-count {
font-size: 12px;
opacity: 0.7;
white-space: nowrap;
}
.dls-cancel-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, #e53935 40%, transparent);
background: color-mix(in srgb, #e53935 10%, var(--input--background, #fff));
color: #e53935;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dls-cancel-btn:hover {
transform: translateY(-1px);
border-color: #e53935;
background: color-mix(in srgb, #e53935 18%, var(--input--background, #fff));
box-shadow: 0 4px 12px color-mix(in srgb, #e53935 22%, transparent);
}
.dls-filter-btn {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color, #6190cb) 34%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color, #6190cb) 14%, var(--input--background, #fff)), color-mix(in srgb, var(--body--background, #f8f9fa) 82%, transparent));
color: var(--primary--body--color, #333);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
position: relative;
}
.dls-filter-btn:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color, #6190cb) 54%, transparent);
box-shadow: 0 6px 16px color-mix(in srgb, var(--secondary--color, #6190cb) 14%, transparent);
}
.dls-filter-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 10px;
background: var(--secondary--color, #6190cb);
color: #fff;
font-size: 10.5px;
font-weight: 700;
}
.dls-tabs-bar {
flex-shrink: 0;
padding: 0 22px;
background: color-mix(in srgb, var(--body--background, #f4f6fb) 88%, var(--input--background, #fff) 12%);
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 12%, transparent);
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--primary--body--color, #333) 20%, transparent) transparent;
}
.dls-tabs-bar::-webkit-scrollbar {
height: 3px;
}
.dls-tabs-bar::-webkit-scrollbar-track {
background: transparent;
}
.dls-tabs-bar::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--primary--body--color, #333) 22%, transparent);
border-radius: 2px;
}
.dls-tabs {
display: flex;
gap: 2px;
padding: 6px 0 0;
}
.dls-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border: 1px solid transparent;
border-bottom: none;
border-radius: 6px 6px 0 0;
background: transparent;
cursor: pointer;
font-size: 12.5px;
color: var(--primary--body--color, #555);
white-space: nowrap;
position: relative;
bottom: -1px;
transition: background 0.12s, color 0.12s;
}
.dls-tab:hover {
background: color-mix(in srgb, var(--input--background, #fff) 82%, var(--body--background, #fff) 18%);
border-color: color-mix(in srgb, var(--primary--body--color, #333) 16%, transparent);
}
.dls-tab--active {
background: var(--body--background, #fff);
border-color: color-mix(in srgb, var(--secondary--color, #6190cb) 38%, transparent);
font-weight: 600;
box-shadow: inset 0 2px 0 var(--secondary--color, #6190cb);
}
.dls-tab-icon {
font-size: 11px;
opacity: 0.6;
}
.dls-tab-name {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
.dls-tab-badge {
font-size: 10.5px;
background: var(--secondary--color, #6190cb);
color: #fff;
border-radius: 10px;
padding: 1px 6px;
min-width: 20px;
text-align: center;
}
.dls-tab-divider {
width: 1px;
height: 20px;
background: color-mix(in srgb, var(--primary--body--color, #333) 20%, transparent);
align-self: center;
margin: 0 4px;
flex-shrink: 0;
}
.dls-tab--no-log {
opacity: 0.45;
cursor: default !important;
pointer-events: none;
}
.dls-tab-icon--warn {
color: #d48806;
opacity: 1 !important;
}
.dls-tab-badge--empty {
background: rgba(212, 136, 6, 0.55);
}
.dls-grid-wrapper {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
background: var(--body--background, #fff);
padding: 0 18px 0;
}
.dls-grid {
width: 100%;
flex: 1;
min-height: 0;
--ag-background-color: var(--body--background, #fff);
--ag-header-background-color: color-mix(in srgb, var(--input--background, #fff) 76%, var(--body--background, #fff) 24%);
--ag-odd-row-background-color: color-mix(in srgb, var(--input--background, #fff) 32%, var(--body--background, #fff) 68%);
--ag-row-hover-color: color-mix(in srgb, var(--secondary--color, #6190cb) 12%, var(--body--background, #fff));
--ag-selected-row-background-color: color-mix(in srgb, var(--secondary--color, #6190cb) 18%, var(--body--background, #fff));
--ag-foreground-color: var(--primary--body--color, #333);
--ag-header-foreground-color: var(--primary--body--color, #333);
--ag-secondary-foreground-color: var(--primary--body--color, #333);
--ag-data-color: var(--primary--body--color, #333);
--ag-border-color: color-mix(in srgb, var(--primary--body--color, #333) 14%, transparent);
--ag-row-border-color: transparent;
--ag-input-border-color: color-mix(in srgb, var(--primary--body--color, #333) 18%, transparent);
--ag-input-focus-border-color: var(--secondary--color, #6190cb);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--cart--box--shadow), 0 10px 28px color-mix(in srgb, var(--primary--body--color, #333) 8%, transparent);
}
.dls-grid--no-data {
visibility: hidden;
}
.dls-empty-state {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--body--background, #fff);
pointer-events: auto;
}
.dls-empty-icon-wrap {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--secondary--color, #6190cb) 10%, transparent);
margin-bottom: 6px;
}
.dls-empty-icon {
font-size: 26px;
color: var(--secondary--color, #6190cb);
}
.dls-empty-icon--warn {
color: #d48806;
}
.dls-empty-title {
font-size: 15px;
font-weight: 600;
margin: 0;
color: var(--primary--body--color, #333);
text-align: center;
}
.dls-empty-sub {
font-size: 12.5px;
margin: 0;
opacity: 0.6;
text-align: center;
}
.dls-empty-cta {
margin-top: 6px;
height: 36px;
padding: 0 18px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color, #6190cb) 40%, transparent);
background: color-mix(in srgb, var(--secondary--color, #6190cb) 12%, transparent);
color: var(--primary--body--color, #333);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease;
}
.dls-empty-cta:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color, #6190cb) 58%, transparent);
}
.dls-spinner {
width: 2rem;
height: 2rem;
color: var(--secondary--color, #6190cb);
margin-bottom: 8px;
}
.dls-onboard {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
max-width: 680px;
padding: 8px 16px;
}
.dls-onboard-hero-icon {
width: 68px;
height: 68px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient( circle at 35% 35%, color-mix(in srgb, var(--secondary--color, #6190cb) 18%, var(--body--background, #fff)), color-mix(in srgb, var(--secondary--color, #6190cb) 7%, var(--body--background, #fff)));
border: 1.5px solid color-mix(in srgb, var(--secondary--color, #6190cb) 28%, transparent);
font-size: 28px;
color: var(--secondary--color, #6190cb);
box-shadow: 0 6px 20px color-mix(in srgb, var(--secondary--color, #6190cb) 16%, transparent);
margin-bottom: 4px;
}
.dls-onboard-title {
font-size: 16px;
font-weight: 700;
margin: 0;
color: var(--primary--body--color, #333);
}
.dls-onboard-sub {
font-size: 12.5px;
margin: 0;
opacity: 0.6;
text-align: center;
max-width: 380px;
}
.dls-onboard-divider {
width: 80%;
max-width: 500px;
height: 1px;
background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--primary--body--color, #333) 18%, transparent), transparent);
margin: 10px 0 2px;
}
.dls-steps {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.dls-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px 14px 16px;
border-radius: 12px;
background: radial-gradient( circle at 30% 20%, color-mix(in srgb, var(--input--background, #fff) 92%, var(--secondary--color, #6190cb) 8%), color-mix(in srgb, var(--body--background, #f4f6fb) 90%, transparent));
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 10%, transparent);
box-shadow: 0 4px 14px color-mix(in srgb, var(--primary--body--color, #333) 6%, transparent);
text-align: center;
position: relative;
}
.dls-step-badge {
position: absolute;
top: 10px;
left: 12px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--secondary--color, #6190cb);
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.dls-step-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--secondary--color, #6190cb) 12%, transparent);
color: var(--secondary--color, #6190cb);
font-size: 20px;
}
.dls-step-body {
display: flex;
flex-direction: column;
gap: 5px;
}
.dls-step-title {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color, #333);
}
.dls-step-desc {
font-size: 11.5px;
opacity: 0.6;
line-height: 1.5;
color: var(--primary--body--color, #333);
}
.dls-step-arrow {
font-size: 16px;
opacity: 0.3;
flex-shrink: 0;
color: var(--primary--body--color, #333);
}
.darkBlue-theme & .dls-onboard-hero-icon {
color: #fff;
}
.darkBlue-theme & .dls-step-icon {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.dls-load-more-bar {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 18px;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 12%, transparent);
background: color-mix(in srgb, var(--input--background, #fff) 76%, var(--body--background, #fff) 24%);
}
#deviceLogFilterModal.modal.right .modal-dialog {
position: fixed;
top: 0;
bottom: 0;
right: 0;
margin: 0;
height: 100%;
transform: translate3d(0%, 0, 0);
}
.dls-modal-dialog {
width: min(780px, 100vw);
max-width: min(780px, 100vw);
height: 100vh;
display: flex;
}
#deviceLogFilterModal.modal.right .modal-content {
height: 100%;
display: flex;
flex-direction: column;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 0;
border: none;
}
#deviceLogFilterModal .modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
#deviceLogFilterModal.modal.right.fade .modal-dialog {
right: -620px;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#deviceLogFilterModal.modal.right.show .modal-dialog {
right: 0;
}
#dlsLogDetailModal.modal.right .modal-dialog {
position: fixed;
margin: auto;
height: 100%;
transform: translate3d(0%, 0, 0);
}
#dlsLogDetailModal.modal.right.fade .modal-dialog {
right: -5px;
width: min(520px, 100vw);
transition: opacity 0.3s linear, right 0.3s ease-out;
}
#dlsLogDetailModal.modal.right.show .modal-dialog {
right: 0;
}
.dls-det-dialog {
width: min(520px, 100vw);
max-width: min(520px, 100vw);
}
.dls-det-content {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background, #fff) 94%, white 6%), var(--body--background, #fff));
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--table--box--shadow, 0 8px 32px rgba(0, 0, 0, .12));
}
.dls-det-header {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 10%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background, #f8f9fa) 92%, white 8%), var(--body--background, #fff));
}
.dls-det-header-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color, #6190cb) 14%, transparent);
color: var(--secondary--color, #6190cb);
font-size: 14px;
flex-shrink: 0;
}
.dls-det-title {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color, #333);
opacity: 0.9;
}
.dls-det-close {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color, #333);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.dls-det-close:hover {
transform: translateY(-1px);
opacity: 1;
}
.dls-det-close:focus, .dls-det-close:active {
outline: none !important;
box-shadow: none !important;
}
.dls-det-body {
flex: 1;
overflow-y: auto;
padding: 14px 16px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.dls-det-body::-webkit-scrollbar {
width: 4px;
}
.dls-det-body::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color, #6190cb) 45%, transparent);
border-radius: 999px;
}
.dls-det-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 16%, transparent);
border-radius: 12px;
padding: 16px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color, #6190cb) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background, #fff) 90%, var(--input--background, #f8f9fa) 10%);
box-shadow: var(--cart--box--shadow, 0 2px 8px rgba(0, 0, 0, .06));
}
.dls-det-section-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 8%, transparent);
}
.dls-det-section-head>i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color, #6190cb) 14%, transparent);
color: var(--primary--body--color, #333);
font-size: 12px;
flex-shrink: 0;
}
.dls-det-section-head>span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color, #333);
opacity: 0.88;
}
.dls-det-table {
width: 100%;
margin-bottom: 0 !important;
word-wrap: break-word;
--bs-table-bg: transparent;
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 14%, transparent);
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.dls-det-th, .dls-det-td {
padding: 0.75rem !important;
font-size: 12px !important;
color: var(--primary--body--color, #333);
border: none !important;
background-color: color-mix(in srgb, var(--input--background, #f8f9fa) 76%, var(--body--background, #fff));
vertical-align: middle;
}
.dls-det-th {
width: 32%;
font-weight: 700;
background-color: color-mix(in srgb, var(--input--background, #f8f9fa) 86%, var(--body--background, #fff));
box-shadow: inset -1px 0 0 color-mix(in srgb, var(--primary--body--color, #333) 14%, transparent);
}
tr:not(:last-child) .dls-det-th {
box-shadow: inset -1px 0 0 color-mix(in srgb, var(--primary--body--color, #333) 14%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color, #333) 14%, transparent);
}
tr:not(:last-child) .dls-det-td {
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color, #333) 14%, transparent);
}
tr:first-child .dls-det-th {
border-top-left-radius: 10px;
}
tr:first-child .dls-det-td {
border-top-right-radius: 10px;
}
tr:last-child .dls-det-th {
border-bottom-left-radius: 10px;
}
tr:last-child .dls-det-td {
border-bottom-right-radius: 10px;
}
.dls-det-td {
max-width: 240px;
word-break: break-word;
}
.dls-det-td--select {
cursor: pointer;
user-select: text;
}
.dls-det-td--log {
font-family: monospace;
font-size: 11.5px;
word-break: break-all;
opacity: 0.85;
}
.dls-det-device-logo {
width: 25px;
margin-right: 8px;
vertical-align: middle;
}
.dls-det-raw-log {
font-family: monospace;
font-size: 12px;
line-height: 1.7;
word-break: break-all;
color: var(--primary--body--color, #333);
opacity: 0.85;
background: color-mix(in srgb, var(--input--background, #f8f9fa) 60%, transparent);
border-radius: 8px;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 10%, transparent);
}
.nd-modal-content-filters-section {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background, #fff) 94%, white 6%), var(--body--background, #fff));
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 18%, transparent);
overflow: visible !important;
display: flex;
flex-direction: column;
}
#deviceLogFilterModal .nd-modal-content-filters-section {
height: 100%;
overflow: hidden !important;
}
.nd-modal-content-filters-section .modal-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
.filters-widget-header {
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 10;
padding: 14px 16px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 10%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background, #f8f9fa) 92%, white 8%), var(--body--background, #fff));
}
.filters-widget-title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.filters-header-icon {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background-color: color-mix(in srgb, var(--secondary--color, #6190cb) 14%, transparent);
color: var(--secondary--color, #6190cb);
font-size: 14px;
flex-shrink: 0;
}
.filters-title-text {
margin: 0 !important;
font-size: 15px;
font-weight: 700;
color: var(--primary--body--color, #333);
opacity: 0.9;
}
.filters-widget-close {
width: 32px;
height: 32px;
border: none;
background-color: transparent;
color: var(--primary--body--color, #333);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
border-radius: 6px;
transition: transform 0.15s ease, background-color 0.15s ease;
}
.filters-widget-close:hover {
transform: translateY(-1px);
background-color: color-mix(in srgb, var(--primary--body--color, #333) 8%, transparent);
}
.modal-header {
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 10%, transparent);
}
#deviceLogFilterModal, #deviceLogFilterModal .label-header, #deviceLogFilterModal .form-label {
color: var(--primary--body--color, #333) !important;
}
#deviceLogFilterModal .label-header {
opacity: var(--opacity--80, 0.8);
}
#deviceLogFilterModal .filters-title-text, #deviceLogFilterModal .dls-section-label, #deviceLogFilterModal .new_filter {
color: var(--primary--body--color, #333) !important;
opacity: 1 !important;
}
#deviceLogFilterModal .filters-title-text i, #deviceLogFilterModal .dls-section-label i, #deviceLogFilterModal .new_filter i {
color: var(--secondary--color, #6190cb);
}
#deviceLogFilterModal .nd-time-filter-field .form-label, #deviceLogFilterModal .filter-card-end .label-header, #deviceLogFilterModal .filter-card-row .label-header.d-flex {
color: var(--primary--body--color, #333) !important;
opacity: 0.86 !important;
}
.dls-section-box {
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 16%, transparent);
border-radius: 10px;
padding: 12px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color, #6190cb) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background, #fff) 90%, var(--input--background, #f8f9fa) 10%);
box-shadow: var(--cart--box--shadow);
}
.dls-section-label {
font-size: 12.5px;
font-weight: 600;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 4px;
color: var(--primary--body--color, #333);
}
.dls-sel-count {
font-size: 11px;
background: var(--secondary--color, #6190cb);
color: #fff;
border-radius: 10px;
padding: 1px 7px;
margin-left: 2px;
}
.dls-device-search-wrap {
position: relative;
margin-bottom: 8px;
}
.dls-search-ico {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: var(--primary--body--color, #333);
opacity: 0.72;
pointer-events: none;
}
.dls-device-search {
height: 32px;
font-size: 12.5px;
padding-left: 28px;
color: var(--primary--body--color, #333) !important;
opacity: 1 !important;
}
.dls-device-search::placeholder {
color: var(--primary--body--color, #333) !important;
opacity: 0.68 !important;
}
.dls-device-list {
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 14%, transparent);
border-radius: 8px;
max-height: 300px;
min-height: 230px;
overflow-y: auto;
background: var(--body--background, #fff);
}
.dls-device-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 54px;
padding: 10px 12px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 8%, transparent);
border-left: 3px solid transparent;
margin: 0;
}
.dls-device-item:last-child {
border-bottom: none;
}
.dls-device-item:hover {
background: color-mix(in srgb, var(--secondary--color, #6190cb) 7%, transparent);
}
.dls-device-item--selected {
background: color-mix(in srgb, #52c41a 18%, var(--input--background, #fff));
border-left-color: #52c41a;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #52c41a 42%, transparent), 0 4px 12px color-mix(in srgb, #52c41a 14%, transparent);
}
.dls-device-item--selected .dls-device-name {
color: var(--primary--body--color, #333);
opacity: 1;
}
.dls-device-check {
width: 22px;
font-size: 18px;
color: color-mix(in srgb, var(--primary--body--color, #333) 38%, transparent);
flex-shrink: 0;
opacity: 0.76;
}
.dls-device-item--selected .dls-device-check {
color: #52c41a;
opacity: 1;
filter: drop-shadow(0 0 5px color-mix(in srgb, #52c41a 56%, transparent));
}
.dls-device-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.dls-device-name {
font-size: 13.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--primary--body--color, #333);
opacity: 0.94;
font-weight: 600;
}
.dls-device-ip {
font-size: 12px;
color: var(--primary--body--color, #333) !important;
opacity: 0.64 !important;
}
.dls-device-brand {
font-size: 12px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--primary--body--color, #333) !important;
opacity: 0.58 !important;
flex-shrink: 0;
}
.dls-no-devices {
display: block;
text-align: center;
padding: 14px;
font-size: 12.5px;
color: var(--primary--body--color, #333) !important;
opacity: 0.62 !important;
}
.dls-device-actions {
display: flex;
gap: 6px;
margin-top: 8px;
justify-content: end;
}
.dls-small-btn {
font-size: 11.5px;
padding: 3px 10px;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 16%, transparent);
background: var(--input--background, #f8f9fa);
cursor: pointer;
color: var(--primary--body--color, #333);
transition: background 0.12s, border-color 0.12s;
}
.dls-small-btn:hover {
background: color-mix(in srgb, var(--primary--body--color, #333) 8%, transparent);
}
.dls-small-btn--danger {
border-color: rgba(229, 83, 83, 0.4);
color: #e55353;
}
.dls-small-btn--danger:hover {
background: rgba(229, 83, 83, 0.08);
}
.nd-form-filters-time-area {
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 16%, transparent);
border-radius: 12px;
padding: 14px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color, #6190cb) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background, #fff) 90%, var(--input--background, #f8f9fa) 10%);
box-shadow: var(--cart--box--shadow);
}
.nd-form-filters-hours {
display: flex;
gap: 6px;
margin-top: 10px;
}
.nd-time-filter-field {
min-width: 0;
}
.nd-time-filter-field-date {
grid-column: 1 / -1;
}
.nd-time-filter-field .label-header {
display: block;
margin-bottom: 6px;
}
.nd-time-filter-date-picker {
width: 100%;
}
.nd-time-filter-field .time_input {
width: 100%;
}
.first_time_input {
margin: 0;
padding: 0 !important;
flex: 1;
min-width: 0;
}
.second_time_input {
margin: 0;
padding: 0 !important;
flex: 1;
min-width: 0;
}
.choose_select_filter_modal {
background-color: var(--input--background, #f8f9fa);
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 18%, transparent);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color, #333);
opacity: var(--opacity--80, 0.8);
border-radius: 8px !important;
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_filter_modal::placeholder {
color: var(--primary--body--color, #333);
opacity: 0.45;
font-size: 12px;
}
.choose_select_filter_modal:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color, #6190cb) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color, #6190cb) 13%, transparent);
}
.choose_select_filter_modal.is-invalid {
border-color: #dc3545 !important;
box-shadow: var(--cart--box--shadow), 0 0 0 2px rgba(220, 53, 69, 0.16) !important;
}
.op-select-btn {
text-align: left;
display: flex;
align-items: center;
height: 30px;
padding: 0 8px;
cursor: pointer;
}
.op-select-btn::after {
margin-left: auto !important;
flex-shrink: 0;
}
.dropdown-menu-use-template.show {
z-index: 2000 !important;
}
.dropdown-menu-use-template {
min-width: 200px;
padding: 6px;
overflow: hidden;
background-color: var(--body--background, #fff);
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
}
.dropdown-menu-use-template .dropdown-item {
min-height: 32px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 7px;
margin-bottom: 2px;
padding: 6px 10px;
cursor: pointer;
color: var(--primary--body--color, #333);
font-size: 12.5px;
white-space: nowrap;
transition: background-color 0.14s ease, color 0.14s ease;
}
.dropdown-menu-use-template .dropdown-item:last-child {
margin-bottom: 0;
}
.dropdown-menu-use-template .dropdown-item:hover, .dropdown-menu-use-template .dropdown-item:focus {
background-color: var(--secondary--color, #6190cb) !important;
color: #fff;
}
.new_filter {
color: var(--primary--body--color, #333);
opacity: var(--opacity--80, 0.8);
}
.filter-list {
display: flex;
flex-direction: column;
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 16%, transparent);
border-radius: 12px;
padding: 6px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color, #6190cb) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background, #fff) 90%, var(--input--background, #f8f9fa) 10%);
box-shadow: var(--cart--box--shadow);
}
.filter-list-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-height: 24px;
margin: -30px 4px 6px 0;
}
.filter-toggle-all-btn {
width: 28px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 12%, transparent);
border-radius: 7px;
background-color: var(--input--background, #f8f9fa);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color, #333);
opacity: var(--opacity--80, 0.8);
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease;
}
.filter-toggle-all-btn:hover {
transform: translateY(-1px);
border-color: rgba(255, 80, 80, 0.45);
color: rgb(255, 80, 80);
opacity: 1;
}
.filter-row {
margin: 0;
position: relative;
}
.filter-card {
position: relative;
padding: 10px 8px;
}
.filter-card-row {
min-height: 36px;
cursor: pointer;
position: relative;
}
.filter-row:has(.dropdown-menu.show), .filter-card:has(.dropdown-menu.show), .filter-card-row:has(.dropdown-menu.show) {
z-index: 1200;
}
.filter-card-row--between.filter-acc-visible {
gap: 5px !important;
}
.filter-card-row--between>.dls-frow-index {
flex: 0 0 20px;
}
.filter-card-row--between .dls-frow-op {
width: 120px;
flex: 0 0 120px;
}
.filter-card-row--between .dls-frow-type {
width: 90px;
flex: 0 0 90px;
}
.filter-card-row--between .dls-frow-val {
min-width: 60px;
}
.filter-card-end {
flex-shrink: 0;
}
.filter-card-row--between .label-header.d-flex {
flex: 0 0 auto;
padding-left: 1px !important;
padding-right: 1px !important;
}
.filter-card-row--between .filter-card-end {
margin-left: auto !important;
gap: 6px !important;
}
.filter-card-row--between .filter-card-end .switch {
width: 25px !important;
}
.filter-card-row--between .filter-card-end .filter-card-trash {
width: 22px;
height: 22px;
}
.filter-card-row--between .choose_select_filter_modal {
width: 100%;
min-width: 0;
padding-left: 7px;
padding-right: 7px;
font-size: 12px;
}
.filter-card-row.filter-acc-hidden {
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.filter-card--collapsed {
background: transparent;
box-shadow: none;
}
.filter-acc-pane {
overflow: hidden;
transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-acc-pane:has(.dropdown-menu.show) {
overflow: visible !important;
}
.filter-card-summary.filter-acc-visible {
max-height: 48px;
opacity: 1;
transform: none;
pointer-events: auto;
}
.filter-card-row.filter-acc-visible {
max-height: 250px;
opacity: 1;
transform: none;
pointer-events: auto;
}
.filter-acc-hidden {
max-height: 0 !important;
opacity: 0 !important;
transform: translateY(-4px);
pointer-events: none !important;
}
.filter-card-summary {
overflow: hidden;
}
.filter-chevron {
font-size: 9px;
opacity: 0.45;
color: var(--primary--body--color, #333);
flex-shrink: 0;
transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-card-summary:hover .filter-chevron {
opacity: 0.8;
transform: translateX(2px);
}
.summary-chip {
font-size: 12px;
color: var(--primary--body--color, #333);
background: color-mix(in srgb, var(--secondary--color, #6190cb) 13%, transparent);
border-radius: 5px;
padding: 2px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
opacity: var(--opacity--80, 0.8);
flex-shrink: 1;
}
.summary-chip--op {
background: color-mix(in srgb, var(--secondary--color, #6190cb) 24%, transparent);
font-weight: 600;
max-width: none;
flex-shrink: 0;
}
.summary-sep {
font-size: 11px;
color: var(--primary--body--color, #333);
opacity: 0.35;
flex-shrink: 0;
}
.index-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--secondary--color, #6190cb);
color: #fff;
font-size: 11px;
flex-shrink: 0;
}
.filter-card-trash {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
color: var(--primary--body--color, #333);
opacity: var(--opacity--60, 0.6);
transition: background-color 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}
.filter-card-trash:hover {
background: rgba(255, 80, 80, 0.15);
color: rgb(255, 80, 80);
opacity: 1;
}
.filter-logic-connector {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 0 4px;
}
.connector-line {
flex: 1;
height: 1px;
background: rgba(169, 169, 169, 0.45);
}
.logic-select-wrapper {
position: relative;
display: inline-flex;
}
.logic-select-wrapper::after {
content: '\25BE';
position: absolute;
right: 9px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: var(--primary--body--color, #333);
opacity: 0.7;
pointer-events: none;
}
.logic-select {
width: 80px;
height: 26px;
border-radius: 14px !important;
text-align: center;
text-align-last: center;
font-size: 11.5px;
font-weight: 600;
background-color: var(--input--background, #f8f9fa);
border: 1px solid color-mix(in srgb, var(--primary--body--color, #333) 18%, transparent);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color, #333);
cursor: pointer;
padding: 0 18px 0 10px;
appearance: none;
-webkit-appearance: none;
}
.logic-select:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color, #6190cb) 55%, transparent);
}
.logic-select option {
background-color: var(--body--background, #fff);
color: var(--primary--body--color, #333);
}
.log-input .form-control.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.add-filter-cta-wrap {
display: flex;
justify-content: flex-end;
}
.add-filter-cta {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 6px 14px 6px 10px;
border: 1px solid color-mix(in srgb, var(--secondary--color, #6190cb) 34%, transparent);
border-radius: 10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color, #6190cb) 14%, var(--input--background, #fff)), color-mix(in srgb, var(--body--background, #f8f9fa) 82%, transparent));
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color, #333);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.add-filter-cta:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color, #6190cb) 54%, transparent);
box-shadow: var(--cart--box--shadow), 0 10px 20px rgba(0, 0, 0, 0.1);
}
.add-filter-cta__icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: color-mix(in srgb, var(--secondary--color, #6190cb) 85%, transparent);
color: #fff;
font-size: 11px;
}
.add-filter-cta__label {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color, #333);
opacity: 0.92;
}
.dls-modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 12px 0 4px;
}
.device-log-search-btn {
border-radius: 8px;
border: none;
background: var(--primary--body--color, #333);
padding: 6px 20px;
cursor: pointer;
font-size: 13px;
color: #fff;
min-width: 0;
}
.device-log-search-btn:focus, .device-log-search-btn:active {
border-radius: 8px;
border: none;
background: var(--primary--body--color, #333);
padding: 6px 20px;
cursor: pointer;
font-size: 13px;
color: #fff;
}
.search-action-btn, .search-action-btn:focus, .search-action-btn:active {
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
border-radius: 10px;
font-weight: 600;
white-space: nowrap;
transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}
.search-action-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.search-action-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.search-primary-btn, .search-primary-btn:focus, .search-primary-btn:active {
background-color: var(--secondary--color, #6190cb) !important;
color: #fff;
}
.search-cancel-btn, .search-cancel-btn:focus, .search-cancel-btn:active {
background-color: rgba(255, 80, 80, 0.18) !important;
color: rgb(255, 80, 80);
border: 1px solid rgba(255, 80, 80, 0.32);
}
.strikethrough {
position: relative;
}
.strikethrough::before {
position: absolute;
content: "";
left: -5px;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
transform: rotate(-45deg);
}
.filter-card-row.filter-acc-pane {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
overflow: visible;
}
.dls-frow-index {
flex-shrink: 0;
}
.dls-frow-log {
flex: 1;
min-width: 80px;
position: relative;
}
.dls-frow-op {
flex-shrink: 0;
width: 130px;
}
.dls-frow-type {
flex-shrink: 0;
width: 100px;
}
.dls-frow-val {
flex: 1;
min-width: 80px;
position: relative;
}
.dls-frow-sep {
flex-shrink: 0;
padding: 0 3px;
display: flex;
align-items: center;
}
.filter-card-row--between .dls-frow-log {
flex: 0 0 80px;
min-width: 0;
}
.dls-frow-between-vals {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
@media (max-width: 640px) {
.filter-card-row--between.filter-acc-pane {
flex-wrap: wrap;
}
.filter-card-row--between .filter-card-end {
order: 1;
margin-left: auto;
}
.dls-frow-between-vals {
order: 2;
flex: 0 0 100%;
padding-left: 26px;
}
}
.dls-field-invalid {
border-color: #dc3545 !important;
box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25) !important;
}
.dls-field-invalid-icon {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #dc3545;
font-size: 13px;
pointer-events: none;
z-index: 1;
}
@media (max-width: 768px) {
.dls-grid-wrapper {
padding: 10px;
}
.dls-device-list {
max-height: 260px;
min-height: 200px;
}
.dls-device-item {
min-height: 50px;
padding: 9px 10px;
}
.dls-device-brand {
max-width: 92px;
}
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-countbased-correlation/add-countbased-correlation.component.css (global) ===== */
.dark-theme .extractor-item {
background: rgb(123 123 123 / 4%) !important;
}
.darkBlue-theme .extractor-item {
background: rgb(61 64 115 / 15%) !important;
}
.dark-theme .extractor-number {
opacity: .8 !important;
color: white !important;
}
.darkBlue-theme .extractor-number {
opacity: .8 !important;
color: white !important;
}
.dark-theme .btn-add-extractor {
color: white !important;
opacity: .6 !important;
}
.darkBlue-theme .btn-add-extractor {
color: white !important;
opacity: .8 !important;
}
.darkBlue-theme .pattern-popover {
background: #2a2e46 !important;
}
.lightBlue-theme .pattern-popover {
background: #c4c4c4 !important;
}
.dark-theme .pattern-item {
background: rgb(0 0 0 / 20%) !important;
}
.darkBlue-theme .pattern-item {
background: rgb(0 0 0 / 23%) !important;
border-radius: 12px;
}
.lightBlue-theme .select-dropdown {
background-color: #ededed !important;
}
.darkBlue-theme .select-dropdown {
background-color: #232939 !important;
}
.lightBlue-theme .option-tooltip-menu {
background-color: #ededed !important;
}
.darkBlue-theme .option-tooltip-menu {
background-color: #171c2a !important;
}
.dark-theme .nav-link:hover {
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.dark-theme .nav-link.active {
background-color: var(--input--background);
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.dark-theme .nav {
border-bottom: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .nav-link:hover {
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .nav-link.active {
background-color: var(--input--background);
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .nav {
border-bottom: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .rule-profiling-toggle {
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: var(--input--background) !important;
}
.darkBlue-theme .rule-profiling-panel-body {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(11, 24, 33, 0.9) !important;
}
.lightBlue-theme .rule-profiling-toggle {
border: 1px solid #c8d3e0 !important;
}
.lightBlue-theme .rule-profiling-panel-body {
border: 1px solid #c8d3e0 !important;
background: #f8fafc !important;
}
.darkBlue-theme .btn-toggle-advanced {
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: var(--input--background) !important;
}
.darkBlue-theme .alert-settings-panel-body {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(11, 24, 33, 0.9) !important;
}
.darkBlue-theme .alert-settings-panel .form-control, .darkBlue-theme .alert-settings-panel input.form-control, .darkBlue-theme .alert-settings-panel select.form-control, .darkBlue-theme .alert-settings-panel .form-select {
border: 1px solid rgba(96, 165, 250, 0.25) !important;
color: #e2edf7 !important;
}
.dark-theme .profile-field-chip.selected, .darkBlue-theme .profile-field-chip.selected {
color: #fff !important;
background: rgb(107 124 255 / 18%) !important;
}
.darkBlue-theme .enrichment-toggle-item {
background: rgba(255, 255, 255, 0.04) !important;
}
.darkBlue-theme .enrichment-toggle-item:hover {
background: rgba(107, 124, 255, 0.1) !important;
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-countbased-correlation/add-countbased-correlation.component.css (scoped) ===== */
app-add-countbased-correlation {
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
font-size: 13px;
box-shadow: var(--cart--box--shadow) !important;
height: 36px;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
}
.small-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12px;
}
.choose_select_correlation {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
}
.form-warning-message {
color: #dc3545;
font-size: 12px;
margin-top: 4px;
}
.extractors-list {
margin-top: 12px;
}
.extractor-item {
position: relative;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
padding: 5px 16px;
margin-bottom: 0;
box-shadow: var(--cart--box--shadow) !important;
}
.extractor-item.is-open {
padding: 16px;
margin-bottom: 12px;
}
.extractor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
}
.extractor-header.is-open-header {
margin-bottom: 12px;
}
.extractor-number {
font-size: 12px;
font-weight: 600;
color: var(--secondary--color);
background: rgba(107, 124, 255, 0.1);
padding: 4px 12px;
border-radius: 12px;
}
.btn-remove {
background: none;
border: none;
color: #dc3545;
cursor: pointer;
padding: 4px 8px;
transition: opacity 0.2s;
}
.btn-remove:hover {
opacity: 0.7;
}
.form-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.checkbox-field {
align-self: end;
}
.extractor-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.full-width {
grid-column: 1 / -1;
}
.drag-icon {
cursor: grab;
opacity: .6;
color: var(--primary--body--color);
}
.extractor-header:active .drag-icon {
cursor: grabbing;
}
.cdk-drag-preview {
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
background: var(--input--background);
padding: 10px;
}
.cdk-drag-placeholder {
opacity: 0.25;
}
.cdk-drop-list-dragging .extractor-item {
transition: transform .12s ease;
}
.btn-add-extractor {
width: 100%;
padding: 12px;
background: var(--input--background);
border: 2px dashed var(--secondary--color);
border-radius: var(--cart--border--radius);
color: var(--secondary--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-add-extractor:hover {
background: rgba(107, 124, 255, 0.1);
}
.extractor-toggle {
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
color: var(--primary--body--color);
}
.extractor-body {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .18s ease, opacity .18s ease;
}
.extractor-body.open {
max-height: 800px;
opacity: 1;
}
.btn-help-sm {
background: none;
border: none;
color: var(--primary--body--color);
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
opacity: var(--opacity--80);
}
.pattern-popover {
width: 420px;
max-width: 90vw;
overflow: auto;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
padding: 12px;
opacity: 0;
transform: translateX(20px) scale(0.98);
transform-origin: right top;
transition: transform .18s ease, opacity .18s ease;
will-change: transform, opacity;
}
.pattern-popover.popover-open {
opacity: 1;
transform: translateX(0) scale(1);
}
.pattern-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
color: var(--primary--body--color);
}
.drawer-close {
background: transparent;
border: 0;
color: var(--primary--body--color);
opacity: .7;
padding: 4px 6px;
border-radius: 6px;
}
.drawer-close:hover {
opacity: 1;
}
.pattern-list {
display: grid;
gap: 8px;
overflow: auto;
padding-right: 4px;
}
.pattern-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.pattern-item code {
font-size: 12px;
color: var(--secondary--color);
font-weight: 600;
}
.pattern-item small {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
}
.form-invalid {
border: 1px solid #dc3545 !important;
}
.tooltip {
position: relative;
display: inline-block;
opacity: 1 !important;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 10px 0;
position: absolute;
z-index: 1;
bottom: 100%;
font-size: 13px;
left: 50%;
margin-left: -125px;
opacity: 0;
transition: opacity .3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.select-trigger {
width: 100%;
min-height: 42px;
padding: 10px 14px;
display: flex;
font-size: 13px;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow) !important;
}
.select-trigger:hover {
opacity: 0.95;
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
}
.custom-select.open .select-trigger {
border-color: var(--secondary--color);
}
.select-trigger-label {
display: inline-flex;
align-items: center;
gap: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-trigger-icon {
flex-shrink: 0;
font-size: 13px;
color: var(--primary--body--color);
opacity: 0.85;
}
.select-arrow {
font-size: 13px;
flex-shrink: 0;
transition: transform 0.2s ease;
color: var(--primary--body--color);
}
.select-arrow.rotated {
transform: rotate(180deg);
}
.select-dropdown {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
width: 100%;
max-height: 400px;
overflow-y: visible;
z-index: 1000;
padding: 8px;
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow) !important;
}
.select-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 5px;
border-radius: calc(var(--cart--border--radius) - 4px);
transition: background-color 0.2s ease;
cursor: pointer;
position: relative;
font-size: 13px;
}
.select-option:hover {
background: rgba(255, 255, 255, 0.04);
}
.option-left {
flex: 1;
min-width: 0;
}
.option-label {
display: block;
font-size: 13px;
color: var(--primary--body--color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.option-right {
display: flex;
align-items: center;
position: relative;
}
.option-menu-area {
position: relative;
display: flex;
align-items: center;
}
.option-icon-btn {
width: 30px;
height: 30px;
border: none;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary--body--color);
border-radius: 50%;
background-color: transparent;
transition: all 0.2s ease;
}
.option-icon-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.option-tooltip-menu {
position: absolute;
right: 38px;
top: 50%;
transform: translateY(-50%);
min-width: 350px;
padding: 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.2s ease;
z-index: 1200;
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow) !important;
}
.option-menu-area:hover .option-tooltip-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mode-btn {
cursor: pointer;
}
.tooltip-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
line-height: 1.4;
color: var(--primary--body--color);
}
.tooltip-item+.tooltip-item {
margin-top: 8px;
}
.empty-area {
padding: 14px 12px;
font-size: 13px;
opacity: 0.7;
color: var(--primary--body--color);
}
.select-dropdown::-webkit-scrollbar {
width: 8px;
}
.select-dropdown::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
}
.select-dropdown::-webkit-scrollbar-track {
background: transparent;
}
.custom-select-wrapper {
width: 100%;
position: relative;
}
.custom-select {
position: relative;
width: 100%;
}
@media (max-width: 768px) {
.extractor-grid {
grid-template-columns: 1fr;
}
.extractor-grid .full-width {
grid-column: span 1;
}
}
.profile-fields-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.profile-field-chip {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 5px 12px;
font-size: 13px;
color: var(--primary--body--color);
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
opacity: var(--opacity--80);
transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.profile-field-chip:hover {
opacity: 1;
}
.profile-field-chip.selected {
border-color: var(--secondary--color);
color: var(--secondary--color);
background: rgba(107, 124, 255, 0.08);
opacity: 1;
}
.profile-field-chip input[type="checkbox"] {
accent-color: var(--secondary--color);
cursor: pointer;
flex-shrink: 0;
}
.rule-profiling-toggle {
width: 100%;
padding: 10px 14px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
margin-bottom: 0;
}
.rule-profiling-toggle--active {
border-color: rgba(107, 124, 255, 0.35);
}
.rule-profiling-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.rule-profiling-panel.open {
max-height: 3000px;
opacity: 1;
}
.rule-profiling-panel-body {
padding: 16px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.btn-toggle-advanced {
width: 100%;
padding: 10px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}
.alert-settings-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.alert-settings-panel.open {
max-height: 3000px;
opacity: 1;
}
.alert-settings-panel-body {
padding: 16px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.settings-section {
margin-bottom: 20px;
}
.settings-section:last-child {
margin-bottom: 0;
}
.settings-section strong {
display: block;
margin-bottom: 12px;
font-size: 14px;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 12px;
}
.badge-cooldown {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
background: rgba(107, 124, 255, 0.1);
color: var(--primary--body--color);
}
.enrichment-toggles {
display: flex;
flex-direction: column;
gap: 8px;
}
.enrichment-toggle-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgb(0 0 0 / 10%);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.enrichment-toggle-item:hover {
background: rgba(107, 124, 255, 0.05);
}
.enrichment-toggle-item input[type="checkbox"] {
flex-shrink: 0;
cursor: pointer;
}
.enrichment-toggle-content {
display: flex;
align-items: center;
gap: 10px;
}
.enrichment-toggle-content i {
font-size: 16px;
color: var(--secondary--color);
opacity: 0.7;
flex-shrink: 0;
}
.enrichment-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
align-items: start;
}
.enrichment-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
margin: 0;
}
.enrichment-card:hover {
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
background: color-mix(in srgb, var(--secondary--color) 4%, var(--input--background));
}
.enrichment-card-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: color-mix(in srgb, var(--secondary--color) 10%, transparent);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--primary--body--color);
flex-shrink: 0;
}
.enrichment-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.enrichment-card-title {
font-size: 12px;
font-weight: 600;
color: var(--primary--body--color);
opacity: var(--opacity--80);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.enrichment-card-desc {
font-size: 10.5px;
color: var(--primary--body--color);
opacity: 0.45;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.enrichment-card-check {
flex-shrink: 0;
cursor: pointer;
width: 14px;
height: 14px;
}
.enrichment-card--expanded {
flex-direction: column;
align-items: stretch;
}
.enrichment-card--expanded, .enrichment-card--expanded:hover {
background: var(--input--background);
border-color: rgba(128, 128, 128, 0.18);
}
.enrichment-card-row {
display: flex;
align-items: center;
gap: 10px;
}
.enrichment-card-extra {
border-top: 1px solid rgba(128, 128, 128, 0.13);
margin-top: 8px;
padding-top: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.enrichment-card-extra .form-control {
background: transparent !important;
}
@media (max-width: 1100px) {
.enrichment-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.enrichment-cards {
grid-template-columns: 1fr;
}
}
.btn-section-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s ease;
box-shadow: var(--cart--box--shadow);
opacity: var(--opacity--80);
text-align: left;
}
.btn-section-toggle:hover {
opacity: 1;
}
.sms-toggle-icon {
font-size: 14px;
color: var(--primary--body--color);
opacity: 0.85;
flex-shrink: 0;
}
.sms-toggle-label {
flex: 1;
font-size: 14px;
}
.sms-section-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.sms-section-panel.open {
max-height: 2000px;
opacity: 1;
}
.sms-section-body {
padding: 12px;
background: var(--input--background);
border: var(--cart--border);
border-top: none;
border-radius: 0 0 var(--cart--border--radius) var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.mail-fields-toolbar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.mail-fields-info {
flex: 1;
font-size: 10.5px;
color: var(--primary--body--color);
opacity: 0.7;
line-height: 1.4;
display: block;
}
.mail-fields-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(107, 124, 255, 0.1);
color: var(--primary--body--color);
font-size: 10.5px;
font-weight: 600;
flex-shrink: 0;
}
.btn-mail-action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
border: 1px solid var(--secondary--color);
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color);
transition: background 0.15s;
}
.btn-mail-action:hover {
background: color-mix(in srgb, var(--secondary--color) 22%, transparent);
}
.btn-mail-clear {
border-color: rgba(128, 128, 128, 0.35);
background: transparent;
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.btn-mail-clear:hover {
color: #dc3545;
border-color: rgba(220, 53, 69, 0.5);
background: rgba(220, 53, 69, 0.06);
opacity: 1;
}
.mail-fields-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
}
.mail-fields-grid .mail-field-item {
margin: 0;
}
@media (max-width: 1200px) {
.mail-fields-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.mail-fields-grid {
grid-template-columns: 1fr;
}
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-eventchain-correlation/add-eventchain-correlation.component.css (global) ===== */
.darkBlue-theme .node {
border: 2px solid #3d325c !important;
}
.dark-theme .node {
border: 2px solid #5e5e5e !important;
}
.darkBlue-theme .circle {
border: 2px solid #3d325c !important;
}
.dark-theme .circle {
border: 2px solid #5e5e5e !important;
}
.darkBlue-theme .edge-mini {
color: #c5d4f7 !important;
}
.dark-theme .edge-mini {
color: #c2c2c2 !important;
}
.dark-theme .left-arrow::after {
border-left: 6px solid #cfcfcf !important;
}
.dark-theme .left-arrow {
background: linear-gradient(90deg, #cbc9c9, #595a5e) !important;
}
.table-event tr td {
padding-left: 5px !important;
}
.table-event tr th {
padding: 15px !important;
}
.table-event tr {
border: var(--cart--border);
box-shadow: var(--table--box--shadow);
}
.lightBlue-theme .table-event tr {
border-color: inherit !important;
border-style: solid !important;
border-width: 0 !important;
}
.darkBlue-theme .table-event tr {
border-style: hidden !important;
}
.table-event tr th {
border-right: var(--cart--border);
}
.table-event th {
opacity: 1;
width: 20%;
background: var(--body--background);
}
.table-event td {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: var(--table--box--shadow);
}
.lightBlue-theme .table-event td {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: var(--table--box--shadow);
}
.dark-theme .correlation-name {
color: #fff;
}
.dark-theme .correlation-name[data-hover="false"]:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .correlation-name {
color: #fff;
}
.darkBlue-theme .correlation-name[data-hover="false"]:hover {
background-color: #2e89e5;
color: #fff;
}
.dark-theme .correlation-buttons {
border-bottom: 1px solid #6e6c6c !important;
}
.darkBlue-theme .correlation-buttons {
border-bottom: 1px solid #3D4073 !important;
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-eventchain-correlation/add-eventchain-correlation.component.css (scoped) ===== */
app-add-eventchain-correlation {
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
}
.small-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12px;
}
.choose_select_correlation {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
}
.choose_select_correlation:focus {
outline: none;
}
.choose_select_correlation:active {
outline: none;
}
.show-more-button {
color: var(--primary--body--color);
cursor: pointer;
font-size: 15px;
}
.show-less-button {
color: var(--primary--body--color);
cursor: pointer;
font-size: 15px;
}
.paths-viewport {
max-height: min(56vh, 520px);
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
}
.paths-viewport {
scrollbar-width: thin;
scrollbar-color: rgba(160, 170, 190, .55) transparent;
}
.paths-viewport:hover {
scrollbar-color: rgba(160, 170, 190, .55) transparent;
}
.paths-viewport::-webkit-scrollbar {
width: 6px;
}
.paths-viewport::-webkit-scrollbar-track {
background: transparent;
}
.paths-viewport::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 8px;
}
.paths-viewport:hover::-webkit-scrollbar-thumb {
background: rgba(160, 170, 190, .55);
}
.paths-viewport:hover::-webkit-scrollbar-thumb:hover {
background: rgba(160, 170, 190, .8);
}
.search-correlation {
text-indent: 20px;
width: 600px;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
padding: 8px 12px;
}
.search-correlation:focus {
outline: none;
}
.correlation-graph {
--node-size: 130px;
--arrow-h: 12px;
--line-color: #c9ced6;
--node-bg: #fff;
--node-text: #1d2230;
--accent: #6b7cff;
--shadow: 0 6px 18px rgba(25, 33, 61, .08);
--v-gap: 15px;
--join-fix: 1px;
--h-gap: 5px;
width: 100%;
overflow: auto;
padding: 12px 8px 24px;
box-sizing: border-box;
}
.tree ul {
padding-top: var(--v-gap);
position: relative;
padding-left: 0;
margin: 0;
text-align: center;
white-space: nowrap;
display: flex;
justify-content: center;
}
.tree li {
display: inline-block;
vertical-align: top;
list-style: none;
text-align: center;
position: relative;
padding: var(--v-gap) var(--h-gap) 0 var(--h-gap);
margin: 5px;
}
.node--root ul::before {
margin: 5px !important;
}
.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border-left: 2px solid var(--line-color);
height: 20px;
}
.tree li::before, .tree li::after {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 2px;
background: var(--line-color);
}
.tree li::before {
right: 50%;
}
.tree li::after {
left: 50%;
}
.tree li:only-child::before, .tree li:only-child::after {
display: none;
}
.tree ul ul>li {
min-width: 180px;
width: 100%;
position: relative;
}
.tree ul ul>li::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: calc(var(--v-gap) + var(--join-fix));
border-left: 2px solid var(--edge-color, var(--line-color));
border-left-color: var(--edge-color, var(--line-color));
}
.tree ul ul>li>.node {
border-color: var(--edge-color, #e7eaf0) !important;
}
.tree ul ul>li>.node:hover {
box-shadow: 0 10px 24px color-mix(in oklab, var(--edge-color, #000) 25%, transparent);
}
.tree ul ul>li>.node::before {
content: '';
position: absolute;
top: calc(-1 * var(--arrow-h) - var(--join-fix));
left: 50%;
transform: translateX(-50%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top-color: var(--edge-color, var(--line-color));
}
.tree ul ul>li>.edge-label {
border-color: var(--edge-color, var(--line-color));
color: var(--edge-color, #5b6472);
}
.tree>ul>li>.node::before {
display: none;
}
.tree li:first-child::before {
background: none;
}
.tree li:last-child::after {
background: none;
}
.node {
position: relative;
width: var(--node-size);
height: var(--node-size);
margin: 0 auto;
border-radius: 50%;
background: var(--input--background);
border: 2px solid #d8d8d9;
color: var(--node-text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.node::before {
content: '';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
.node-title {
font-size: 12px;
font-weight: 700;
line-height: 1.1;
max-width: calc(var(--node-size) - 18px);
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-word;
}
.node-sub {
margin-top: 4px;
font-size: 11px;
opacity: .75;
line-height: 1.1;
max-width: calc(var(--node-size) - 18px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.node--root {
border-color: var(--accent);
}
.node:hover {
transform: translateY(-2px);
}
.f-15 {
font-size: 15px;
}
@media (max-width:1250px) {
.content-area {
flex-wrap: wrap;
}
.content-area div {
width: 100%;
}
.search-correlation {
width: 100% !important;
}
}
@media (max-width:576px) {
.edge-label {
font-size: 10px;
padding: 2px 5px;
}
}
.untouchable {
pointer-events: none;
background-color: gray;
opacity: 0.6;
}
.edge-label {
position: absolute;
top: calc(var(--v-gap) / 2 - 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
font-size: 11px;
line-height: 1;
font-weight: 600;
color: var(--primary--body--color);
background: var(--correlation-label-background);
padding: 3px 6px;
border: 1px solid var(--line-color);
border-radius: 999px;
pointer-events: none;
white-space: nowrap;
opacity: 1;
}
.edge-label-info {
z-index: 2;
width: 120px;
font-size: 11px;
line-height: 1;
font-weight: 600;
background: var(--input--background);
padding: 3px 6px;
border: 1px solid #c9ced6;
border-radius: 999px;
pointer-events: none;
white-space: nowrap;
color: var(--primary--body--color);
}
@media (min-width: 1200px) {
.modal-xl {
max-width: 1500px;
}
}
@media (min-width: 1500px) {
.correlation-modal {
min-width: 1500px;
}
}
.node-starred::after {
content: "★";
position: absolute;
top: -6px;
left: -6px;
font-size: 16px;
color: gold;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.tree-header {
color: var(--primary--body--color);
font-style: italic;
font-size: 16px;
}
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.fa-arrow-right {
color: var(--primary--body--color);
}
.correlation-path {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 20px;
flex-wrap: wrap;
}
.path-node {
display: flex;
align-items: center;
position: relative;
}
.circle {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
background: var(--input--background);
border: 2px solid #d8d8d9;
color: var(--node-text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.arrow {
font-size: 13px;
color: var(--primary--body--color);
margin-left: 16px;
margin-right: 16px;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.label-header.d-block.me-3 {
background: var(--secondary--color);
color: var(--day--remain--color);
border-radius: 12px;
padding: 4px 20px;
display: inline-block;
font-weight: 500;
font-size: 13px;
}
.circle:hover {
transform: translateY(-3px);
transition: 0.2s;
box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.path-node:nth-child(odd) .arrow {
color: var(--edge-color, #6b7cff);
}
.edge-mini {
margin-bottom: 4px;
font-size: 12px;
color: #5a6a91;
}
.left-arrow {
width: 80px;
height: 2px;
background: linear-gradient(90deg, #6b7cff, #a2b4ff);
position: relative;
}
.left-arrow::after {
content: "";
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
border-left: 6px solid #a2b4ff;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.small-info-text {
font-size: 12px;
display: block;
margin-top: 15px;
}
.tooltip-container {
position: relative;
display: inline-block;
z-index: 10;
display: flex;
}
.tooltip-text-path {
visibility: hidden;
opacity: 0;
width: max-content;
min-width: 200px;
background: var(--body--background);
border-radius: var(--cart--border--radius);
position: absolute;
top: 50%;
left: calc(100% + 14px);
transform: translateY(-50%);
font-size: 12px;
box-shadow: var(--cart--box--shadow);
transition: opacity 0.2s ease;
white-space: pre-wrap;
pointer-events: none;
}
.tooltip-text-path::before {
content: "";
position: absolute;
top: 50%;
left: -7px;
transform: translateY(-50%);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 7px solid var(--primary--body--color);
}
.tooltip-text {
visibility: hidden;
opacity: 0;
width: max-content;
min-width: 200px;
background: var(--body--background);
border-radius: var(--cart--border--radius);
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
font-size: 12px;
box-shadow: var(--cart--box--shadow);
transition: opacity 0.2s ease;
white-space: pre-wrap;
pointer-events: none;
}
.tooltip-text-up {
visibility: hidden;
opacity: 0;
width: max-content;
min-width: 200px;
background: var(--body--background);
border-radius: var(--cart--border--radius);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
font-size: 12px;
box-shadow: var(--cart--box--shadow);
transition: opacity 0.2s ease;
white-space: pre-wrap;
pointer-events: none;
}
.tooltip-text::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid var(--primary--body--color);
}
.tooltip-text-mirror::before {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--primary--body--color);
}
.tooltip-container:hover .tooltip-text, .tooltip-container:focus-within .tooltip-text {
visibility: visible;
opacity: 1;
}
.tooltip-container:hover .tooltip-text-up, .tooltip-container:focus-within .tooltip-text-up {
visibility: visible;
opacity: 1;
}
.tooltip-container:hover .tooltip-text-path, .tooltip-container:focus-within .tooltip-text-path {
visibility: visible;
opacity: 1;
}
.table>:not(caption)>*>* {
background-color: transparent !important;
}
.node-exclamation::after {
content: "!";
position: absolute;
top: -6px;
right: -6px;
font-size: 20px;
color: red;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
table th, tr, td {
padding: 0.75rem !important;
font-size: 12px !important;
}
th {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: var(--table--box--shadow);
}
.tree li, .selected-routes .path-node {
position: relative;
}
.tree li:hover, .selected-routes .path-node:hover {
z-index: 2147483647;
}
.tooltip-container {
position: relative;
z-index: 2;
}
.tooltip-text {
z-index: 2147483647;
}
.tree li::before, .tree li::after, .tree ul ul::before, .tree ul ul>li::after {
z-index: 0 !important;
}
.node, .circle {
z-index: 3;
}
.tree, .selected-routes {
overflow: hidden;
}
.f-12 {
font-size: 12px !important;
}
.selected-routes, .correlation-path {
position: relative;
overflow: visible;
}
.correlation-path>.circle, .correlation-path>.arrow {
position: relative;
z-index: 1;
}
.circle.tooltip-container {
overflow: visible;
z-index: 2;
}
.circle .tooltip-text {
z-index: 2147483647;
}
.circle.tooltip-container:hover {
z-index: 2147483647;
}
.correlation-path .arrow, .correlation-path .left-arrow {
z-index: 0;
}
.circle:hover {
z-index: 2147483647;
}
.circle .node-title {
margin-top: 6px;
font-size: 13px;
font-weight: 600;
}
.circle .node-sub {
margin-top: 2px;
font-size: 11px;
opacity: 0.75;
}
.tree li::before, .tree li::after, .tree ul ul::before, .tree ul ul>li::after {
z-index: 0 !important;
}
.tree li:hover {
z-index: auto !important;
}
.tree li::before, .tree li::after, .tree ul ul::before, .tree ul ul>li::after {
position: absolute;
z-index: 0 !important;
}
.tree .node {
position: relative;
z-index: 2;
}
.tree li:hover>.node {
z-index: 5;
}
.select-correlation {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--body--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
background-color: var(--input--background);
}
.correlation-menu-2 {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.correlation-menu {
max-height: 330px;
overflow: auto;
}
.correlation-name {
font-size: 11px;
cursor: pointer;
padding: 5px 10px;
margin-bottom: .3rem;
}
.correlation-name[data-hover="false"]:hover {
background-color: var(--secondary--color) !important;
color: #fff !important;
transition: .3s all;
}
.correlation-name[data-hover="false"]:hover .correlation-name-span {
color: #fff !important;
}
.correlation-name[data-hover="false"]:hover .correlation-view-icon {
color: var(--day--remain--color) !important;
}
.correlation-search {
height: 35px;
text-indent: 20px;
}
.correlation-search::placeholder {
text-indent: 20px;
}
.correlation-search:focus {
outline: none;
}
.correlation-search-li {
height: 40px;
padding: 10px;
position: relative;
}
.correlation-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.correlation-name-span {
margin-left: .2rem;
}
.select-correlation::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
opacity: 0.7;
}
.correlation-path {
display: flex;
align-items: center;
gap: 12px;
overflow: visible;
margin-bottom: 30px;
}
.path-scroll {
display: inline-flex;
gap: 20px;
padding: 10px;
flex-wrap: nowrap;
width: 7000px;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.path-scroll::-webkit-scrollbar {
height: 5px;
}
.path-scroll::-webkit-scrollbar-track {
background: transparent;
}
.path-scroll::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 999px;
}
.path-scroll:hover {
scrollbar-color: rgba(160, 170, 190, 0.55) transparent;
}
.path-scroll:hover::-webkit-scrollbar-thumb {
background: rgba(160, 170, 190, 0.55);
}
.path-scroll:hover::-webkit-scrollbar-thumb:hover {
background: rgba(160, 170, 190, 0.8);
}
.path-scroll .circle, .path-scroll .arrow {
flex: 0 0 auto;
scroll-snap-align: start;
}
.graph-scroll {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: .25rem;
scrollbar-width: thin;
scrollbar-color: rgba(160, 170, 190, 0.55) transparent;
}
.graph-scroll>.correlation-graph {
width: max-content;
min-width: 100%;
box-sizing: border-box;
}
.cdk-overlay-container { z-index: 2000; }
.modal-dialog {
max-width: min(95vw, 1200px);
}
.graph-scroll::-webkit-scrollbar {
height: 6px;
}
.graph-scroll::-webkit-scrollbar-track {
background: transparent;
}
.graph-scroll::-webkit-scrollbar-thumb {
background-color: rgba(160, 170, 190, 0.55);
border-radius: 10px;
}
.graph-scroll::-webkit-scrollbar-thumb:hover {
background-color: rgba(160, 170, 190, 0.75);
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-script-correlation/add-script-correlation.component.css (global) ===== */
.tourLineHighlight {
outline: 2px solid rgba(255,255,255,.6);
background: rgb(167, 161, 161);
}
.dark-theme .tourLineHighlight {
outline: 2px solid rgba(255,255,255,.6);
background: rgba(255,255,255,.10);
}
.darkBlue-theme .tourLineHighlight {
outline: 2px solid rgba(255,255,255,.6);
background: rgba(255,255,255,.10);
}
@media (max-width:576px) {
.show-sidebar .input-group-append {
width: 15%;
}
.show-sidebar .input_width {
width: 70%;
}
}
@media (max-width:520px) {
.show-sidebar .oriana-button-add-flag {
width: 140px;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.dark-theme .correlation-add-footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.darkBlue-theme .correlation-add-footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-theme #addCorrelationModal .modal-content.no-border {
border: 2px solid #282828 !important;
}
.darkBlue-theme #addCorrelationModal .modal-content.no-border {
border: none !important;
}
.lightBlue-theme #addCorrelationModal .modal-content.no-border {
border: none !important;
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-script-correlation/add-script-correlation.component.css (scoped) ===== */
app-add-script-correlation {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
}
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
}
.new_input_add_correlation:focus {
outline: none;
}
.new_input_add_correlation:active {
outline: none;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
opacity: 1 !important;
}
.correlation-button-select {
height: 36px;
text-align: left;
}
.correlation-button-select::after {
content: none;
}
.choose_select_correlation {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
}
.choose_select_correlation:focus {
outline: none;
}
.choose_select_correlation:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.new-input-div {
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.overlay-content {
background: var(--body--background);
padding: 16px;
border-radius: 8px;
width: 80%;
max-width: 1400px;
color: var(--primary--body--color);
box-shadow: 0 0 15px rgba(0, 0, 0, .5);
}
.overlay-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
button {
border: none;
background: transparent;
color: #fff;
font-size: 18px;
cursor: pointer;
}
}
.filter-clear-button-correlation {
position: absolute;
right: 12px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: 6px;
padding: 0px;
box-shadow: none;
border: none;
background: transparent;
}
.filter-clear-button-correlation:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-correlation:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
}
.description_area::placeholder {
color: var(--primary--body--color);
opacity: 1 !important;
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-button-add-flag {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 25px;
font-size: 13px;
}
.oriana-button-add-flag:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 25px;
font-size: 13px;
}
.oriana-button-add-flag :active {
color: var(--primary--body--color);
}
.input-group-append {
width: 6%;
}
.input_width {
width: 75%;
}
textarea.form-control.is-valid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
textarea.form-control.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.show-button {
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
cursor: pointer;
color: var(--primary--body--color);
font-size: 13px;
padding: 5px 10px;
}
.ssh-nested-content {
position: relative;
}
.ssh-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 10;
pointer-events: all;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.add_correlation_mail {
position: relative;
}
.add_correlation_mail .message-tooltip {
visibility: hidden;
width: 160px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 5px 5px;
position: absolute;
z-index: 5;
top: 100%;
left: 50%;
margin-left: -80px;
font-size: 10px;
opacity: 0;
transition: opacity .5s;
}
.add_correlation_mail:hover .message-tooltip {
visibility: visible;
opacity: 1;
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.disabled-ssh-button {
pointer-events: none;
opacity: 0.3;
background: transparent;
}
.blinking-exclamation-mark {
color: rgb(236, 77, 77);
animation: blink 2s infinite;
}
@media (max-width: 1200px) {
.correlation-left-area {
width: 100%;
}
.correlation-right-area {
width: 100%;
}
.add-filter-label {
margin-right: 3.8rem !important;
}
.correlation-save {
display: flex !important;
justify-content: right !important;
margin-right: 1rem !important;
position: relative !important;
bottom: 0px !important;
right: 0px !important;
}
.ssh-arrow {
margin: 0px 120px !important;
}
}
@media (max-width: 992px) {
.add-filter-label {
margin-right: 1.5rem !important;
}
.ssh-arrow {
visibility: hidden !important;
margin: 0px !important;
}
}
.correlation-add-footer {
display: flex;
justify-content: flex-end;
gap: 1rem;
border-top: 1px solid #1e1e1e1a;
padding-top: 1rem;
margin-top: 1rem;
}
.cor-log-input .form-control.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
input.ng-invalid.ng-touched, select.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched {
border: 1px solid #dc3545 !important;
}
.modal-ssh.right .modal-dialog {
position: fixed;
margin: auto;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal-ssh.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal-ssh.right .modal-body {
padding: 15px 15px 80px;
}
.modal-ssh.right.fade .modal-dialog {
right: -5px;
width: 50%;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal-ssh.right.fade.in .modal-dialog {
right: 0;
}
.modal-content.dimmed {
opacity: .35;
pointer-events: none;
filter: grayscale(0.2);
}
#addCorrelationModal .base-modal-dim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .55);
opacity: 0;
visibility: hidden;
z-index: 5;
pointer-events: none;
}
#addCorrelationModal .base-modal-dim.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#addCorrelationModal .modal-content.no-border {
border: 1px solid #818181;
}
#sshSettingsModal .modal-dialog {
margin: 0;
margin-left: auto;
height: 100vh;
transform: translateX(100%);
}
#sshSettingsModal.show .modal-dialog {
transform: translateX(0);
}
#sshSettingsModal .modal-content {
height: 100vh;
border-radius: 0;
}
.c-pointer {
cursor: pointer;
}
.ssh-arrow {
opacity: 0;
margin: 0px 15px;
color: #9aa4ad;
transform: translateX(-6px);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
}
.ssh-arrow.visible {
opacity: 1;
transform: translateX(0);
}
.ssh-arrow.visible i {
animation: arrow-pulse 1.4s ease-in-out infinite;
}
.select-server-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
transform: none !important;
}
.dropdown {
position: relative;
width: 100%;
}
.select-server {
position: relative;
width: 100%;
}
.server-name {
font-size: 11px;
cursor: pointer;
}
.server-element {
color: var(--primary--body--color);
}
.server-element:hover {
background-color: #2e89e5;
color: #fff;
}
.server-name-span {
margin-left: .3rem;
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-sigma-rule-correlation/add-sigma-rule-correlation.component.css (scoped) ===== */
app-add-sigma-rule-correlation {
.sigma-rule-section {
position: relative;
}
.sigma-analyzing-overlay {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--body--background, rgba(0, 0, 0, 0.04));
opacity: 0.85;
border-radius: var(--cart--border--radius, 4px);
}
.sigma-analyzing-overlay .spinner-border {
width: 2.5rem;
height: 2.5rem;
color: var(--secondary--color);
}
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
font-weight: 500;
}
.small-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12px;
}
.sigma-yaml-textarea {
color: var(--primary--body--color);
background-color: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
font-size: 13px;
padding: 10px;
resize: vertical;
min-height: 380px;
max-height: 700px;
transition: border-color 0.2s, box-shadow 0.2s;
line-height: 1.5;
}
.sigma-yaml-textarea:focus {
outline: none;
border-color: var(--primary--button--background--color);
box-shadow: 0 0 0 2px var(--primary--button--background--color, #007bff33);
}
.sigma-yaml-textarea::placeholder {
color: var(--primary--body--color);
opacity: 0.6;
}
.sigma-tooltip-container {
position: relative;
display: inline-block;
}
.sigma-tooltip-container i {
transition: color 0.2s, transform 0.2s;
}
.sigma-tooltip-container:hover i {
color: var(--primary--button--background--color);
transform: scale(1.1);
}
.sigma-tooltip-container .message-tooltip {
visibility: hidden;
width: 90vw;
max-width: 560px;
background-color: var(--secondary--color, #333);
color: var(--day--remain--color, #fff);
text-align: left;
border-radius: 6px;
padding: 8px 10px;
position: absolute;
z-index: 99999;
top: 120%;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
line-height: 1.4;
opacity: 0;
transition: opacity 0.3s ease;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.sigma-tooltip-container:hover .message-tooltip {
visibility: visible;
opacity: 1;
}
.sigma-tooltip-container .message-tooltip code {
font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
font-size: 10px;
}
.form-warning-message {
color: var(--red--color, #dc3545);
margin-top: 4px;
display: block;
}
.cancel_button, .confirm_button {
transition: all 0.2s ease;
}
.cancel_button:hover:not(:disabled), .confirm_button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.cancel_button:disabled, .confirm_button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.confirm_button {
background-color: var(--primary--button--background--color);
color: white;
border: none;
transition: all 0.2s ease;
}
.confirm_button:hover:not(:disabled) {
background-color: var(--primary--button--background--color);
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.confirm_button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cancel_button {
background-color: transparent;
color: var(--primary--body--color);
border: 1px solid var(--cart--border-color, #ddd);
transition: all 0.2s ease;
}
.cancel_button:hover:not(:disabled) {
background-color: var(--secondary--color, #f5f5f5);
transform: translateY(-1px);
}
.predefined-rules-container {
position: relative;
width: 100%;
}
.predefined-accordion-btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 9px 12px;
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.predefined-accordion-btn:hover:not(:disabled) {
border-color: var(--primary--button--background--color);
background-color: var(--input--background);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.08);
}
.predefined-accordion-btn:active:not(:disabled) {
transform: translateY(0.5px);
}
.predefined-accordion-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.accordion-content {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.accordion-icon {
margin-left: 8px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.predefined-rules-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 1000;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
max-height: 420px;
overflow: hidden;
}
.predefined-panel-header {
padding: 10px;
border-bottom: var(--cart--border);
flex-shrink: 0;
background-color: var(--body--background);
}
.predefined-search-input {
width: 100%;
padding: 7px 10px;
background-color: var(--input--background);
color: var(--primary--body--color);
border: 1px solid var(--cart--border-color, #ddd);
border-radius: calc(var(--cart--border--radius) - 2px);
font-size: 12px;
transition: all 0.2s ease;
}
.predefined-search-input:focus {
outline: none;
border-color: var(--primary--button--background--color);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
background-color: var(--input--background);
color: var(--primary--body--color);
}
.predefined-search-input::placeholder {
color: var(--primary--body--color);
opacity: 0.5;
}
.predefined-rules-list-wrapper {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
display: flex;
flex-direction: column;
}
.predefined-rules-list-wrapper::-webkit-scrollbar {
width: 6px;
}
.predefined-rules-list-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.predefined-rules-list-wrapper::-webkit-scrollbar-thumb {
background: var(--primary--body--color);
opacity: 0.2;
border-radius: 3px;
}
.predefined-rules-list-wrapper::-webkit-scrollbar-thumb:hover {
opacity: 0.4;
}
.predefined-rules-list-wrapper {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.predefined-loading-state {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
flex: 1;
color: var(--primary--body--color);
}
.predefined-no-data-state {
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
color: var(--primary--body--color);
opacity: 0.5;
font-size: 12px;
text-align: center;
flex: 1;
}
.predefined-rule-item {
display: flex;
flex-direction: column;
text-align: left;
padding: 9px 12px;
border: none;
background-color: var(--body--background);
color: var(--primary--body--color);
cursor: pointer;
border-bottom: var(--cart--border);
transition: all 0.15s ease;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
gap: 3px;
}
.predefined-rule-item:last-child {
border-bottom: none;
}
.predefined-rule-item:hover {
background-color: var(--secondary--color);
padding-left: 14px;
}
.predefined-rule-item:active {
background-color: var(--secondary--color);
}
.predefined-rule-item.active {
background-color: color-mix(in srgb, var(--primary--button--background--color) 12%, var(--body--background));
padding-left: 9px;
}
.predefined-rule-item.active:hover {
padding-left: 11px;
}
.rule-item-title {
font-weight: 600;
font-size: 13px;
color: var(--primary--body--color);
line-height: 1.3;
}
.rule-item-description {
font-size: 11px;
color: var(--primary--body--color);
line-height: 1.4;
}
.rule-item-id {
font-size: 10px;
color: var(--primary--body--color);
font-family: 'Courier New', monospace;
}
.predefined-panel-footer {
padding: 10px;
border-top: var(--cart--border);
flex-shrink: 0;
background-color: var(--body--background);
}
.predefined-clear-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
padding: 5px 10px;
font-size: 11.5px;
font-weight: 500;
background-color: transparent;
color: var(--primary--body--color);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
opacity: 0.75;
}
.predefined-clear-btn:hover {
background-color: color-mix(in srgb, var(--red--color, #dc3545) 10%, var(--body--background));
border-color: var(--red--color, #dc3545);
color: var(--red--color, #dc3545);
opacity: 1;
}
.predefined-clear-btn:active {
background-color: color-mix(in srgb, var(--red--color, #dc3545) 16%, var(--body--background));
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-ssh-profile-modal/add-ssh-profile-modal.component.css (scoped) ===== */
app-add-ssh-profile-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
}
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
}
.new_input_add_correlation:focus {
outline: none;
}
.new_input_add_correlation:active {
outline: none;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
opacity: 1 !important;
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
textarea.form-control.is-valid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
textarea.form-control.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
input.ng-invalid.ng-touched, select.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched {
border: 1px solid #dc3545 !important;
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-timebased-correlation/add-timebased-correlation.component.css (global) ===== */
.dark-theme .extractor-item {
background: rgb(123 123 123 / 4%) !important;
}
.darkBlue-theme .extractor-item {
background: rgb(61 64 115 / 15%) !important;
}
.dark-theme .extractor-number {
opacity: .8 !important;
color: white !important;
}
.darkBlue-theme .extractor-number {
opacity: .8 !important;
color: white !important;
}
.dark-theme .btn-add-extractor {
color: white !important;
opacity: .6 !important;
}
.darkBlue-theme .btn-add-extractor {
color: white !important;
opacity: .8 !important;
}
.darkBlue-theme .pattern-popover {
background: #2a2e46 !important;
}
.lightBlue-theme .pattern-popover {
background: #c4c4c4 !important;
}
.dark-theme .pattern-item {
background: rgb(0 0 0 / 20%) !important;
}
.darkBlue-theme .pattern-item {
background: rgb(0 0 0 / 23%) !important;
border-radius: 12px;
}
.lightBlue-theme .select-dropdown {
background-color: #ededed !important;
}
.darkBlue-theme .select-dropdown {
background-color: #232939 !important;
}
.lightBlue-theme .option-tooltip-menu {
background-color: #ededed !important;
}
.darkBlue-theme .option-tooltip-menu {
background-color: #171c2a !important;
}
.dark-theme .nav-link:hover {
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.dark-theme .nav-link.active {
background-color: var(--input--background);
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.dark-theme .nav {
border-bottom: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .nav-link:hover {
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .nav-link.active {
background-color: var(--input--background);
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .nav {
border-bottom: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.lightBlue-theme .sms-section-body {
background: var(--input--background) !important;
}
.dark-theme .profile-field-chip.selected, .darkBlue-theme .profile-field-chip.selected {
color: #fff !important;
background: rgb(107 124 255 / 18%) !important;
}
.darkBlue-theme .rule-profiling-toggle {
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: var(--input--background) !important;
}
.darkBlue-theme .rule-profiling-panel-body {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(11, 24, 33, 0.9) !important;
}
.lightBlue-theme .rule-profiling-toggle {
border: 1px solid #c8d3e0 !important;
}
.lightBlue-theme .rule-profiling-panel-body {
border: 1px solid #c8d3e0 !important;
background: #f8fafc !important;
}
.darkBlue-theme .btn-toggle-advanced {
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: var(--input--background) !important;
}
.darkBlue-theme .alert-settings-panel-body {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(11, 24, 33, 0.9) !important;
}
.darkBlue-theme .alert-settings-panel .form-control, .darkBlue-theme .alert-settings-panel input.form-control, .darkBlue-theme .alert-settings-panel select.form-control, .darkBlue-theme .alert-settings-panel .form-select {
border: 1px solid rgba(96, 165, 250, 0.25) !important;
color: #e2edf7 !important;
}
.darkBlue-theme .enrichment-toggle-item {
background: rgba(255, 255, 255, 0.04) !important;
}
.darkBlue-theme .enrichment-toggle-item:hover {
background: rgba(107, 124, 255, 0.1) !important;
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-timebased-correlation/add-timebased-correlation.component.css (scoped) ===== */
app-add-timebased-correlation {
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
font-size: 13px;
box-shadow: var(--cart--box--shadow) !important;
height: 36px;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
}
.small-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12px;
}
.choose_select_correlation {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
}
.form-warning-message {
color: #dc3545;
font-size: 12px;
margin-top: 4px;
}
.extractors-list {
margin-top: 12px;
}
.extractor-item {
position: relative;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
padding: 5px 16px;
margin-bottom: 0;
box-shadow: var(--cart--box--shadow) !important;
}
.extractor-item.is-open {
padding: 16px;
margin-bottom: 12px;
}
.extractor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
}
.extractor-header.is-open-header {
margin-bottom: 12px;
}
.extractor-number {
font-size: 12px;
font-weight: 600;
color: var(--secondary--color);
background: rgba(107, 124, 255, 0.1);
padding: 4px 12px;
border-radius: 12px;
}
.btn-remove {
background: none;
border: none;
color: #dc3545;
cursor: pointer;
padding: 4px 8px;
transition: opacity 0.2s;
}
.btn-remove:hover {
opacity: 0.7;
}
.form-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.checkbox-field {
align-self: end;
}
.extractor-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.full-width {
grid-column: 1 / -1;
}
.drag-icon {
cursor: grab;
opacity: .6;
color: var(--primary--body--color);
}
.extractor-header:active .drag-icon {
cursor: grabbing;
}
.cdk-drag-preview {
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
background: var(--input--background);
padding: 10px;
}
.cdk-drag-placeholder {
opacity: 0.25;
}
.cdk-drop-list-dragging .extractor-item {
transition: transform .12s ease;
}
.btn-add-extractor {
width: 100%;
padding: 12px;
background: var(--input--background);
border: 2px dashed var(--secondary--color);
border-radius: var(--cart--border--radius);
color: var(--secondary--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-add-extractor:hover {
background: rgba(107, 124, 255, 0.1);
}
.extractor-toggle {
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
color: var(--primary--body--color);
}
.extractor-body {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .18s ease, opacity .18s ease;
}
.extractor-body.open {
max-height: 800px;
opacity: 1;
}
.btn-help-sm {
background: none;
border: none;
color: var(--primary--body--color);
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
opacity: var(--opacity--80);
}
.pattern-popover {
width: 420px;
max-width: 90vw;
overflow: auto;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
padding: 12px;
opacity: 0;
transform: translateX(20px) scale(0.98);
transform-origin: right top;
transition: transform .18s ease, opacity .18s ease;
will-change: transform, opacity;
}
.pattern-popover.popover-open {
opacity: 1;
transform: translateX(0) scale(1);
}
.pattern-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
color: var(--primary--body--color);
}
.drawer-close {
background: transparent;
border: 0;
color: var(--primary--body--color);
opacity: .7;
padding: 4px 6px;
border-radius: 6px;
}
.drawer-close:hover {
opacity: 1;
}
.pattern-list {
display: grid;
gap: 8px;
overflow: auto;
padding-right: 4px;
}
.pattern-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.pattern-item code {
font-size: 12px;
color: var(--secondary--color);
font-weight: 600;
}
.pattern-item small {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
}
.form-invalid {
border: 1px solid #dc3545 !important;
}
.tooltip {
position: relative;
display: inline-block;
opacity: 1 !important;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 10px 0;
position: absolute;
z-index: 1;
bottom: 100%;
font-size: 13px;
left: 50%;
margin-left: -125px;
opacity: 0;
transition: opacity .3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.select-trigger {
width: 100%;
min-height: 42px;
padding: 10px 14px;
display: flex;
font-size: 13px;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow) !important;
}
.select-trigger:hover {
opacity: 0.95;
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
}
.custom-select.open .select-trigger {
border-color: var(--secondary--color);
}
.select-trigger-label {
display: inline-flex;
align-items: center;
gap: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-trigger-icon {
flex-shrink: 0;
font-size: 13px;
color: var(--primary--body--color);
opacity: 0.85;
}
.select-arrow {
font-size: 13px;
flex-shrink: 0;
transition: transform 0.2s ease;
color: var(--primary--body--color);
}
.select-arrow.rotated {
transform: rotate(180deg);
}
.select-dropdown {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
width: 100%;
max-height: 400px;
overflow-y: visible;
z-index: 1000;
padding: 8px;
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow) !important;
}
.select-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 5px;
border-radius: calc(var(--cart--border--radius) - 4px);
transition: background-color 0.2s ease;
cursor: pointer;
position: relative;
font-size: 13px;
}
.select-option:hover {
background: rgba(255, 255, 255, 0.04);
}
.option-left {
flex: 1;
min-width: 0;
}
.option-label {
display: block;
font-size: 13px;
color: var(--primary--body--color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.option-right {
display: flex;
align-items: center;
position: relative;
}
.option-menu-area {
position: relative;
display: flex;
align-items: center;
}
.option-icon-btn {
width: 30px;
height: 30px;
border: none;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary--body--color);
border-radius: 50%;
background-color: transparent;
transition: all 0.2s ease;
}
.option-icon-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.option-tooltip-menu {
position: absolute;
right: 38px;
top: 50%;
transform: translateY(-50%);
min-width: 350px;
padding: 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.2s ease;
z-index: 1200;
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow) !important;
}
.option-menu-area:hover .option-tooltip-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mode-btn {
cursor: pointer;
}
.tooltip-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
line-height: 1.4;
color: var(--primary--body--color);
}
.tooltip-item+.tooltip-item {
margin-top: 8px;
}
.empty-area {
padding: 14px 12px;
font-size: 13px;
opacity: 0.7;
color: var(--primary--body--color);
}
.select-dropdown::-webkit-scrollbar {
width: 8px;
}
.select-dropdown::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
}
.select-dropdown::-webkit-scrollbar-track {
background: transparent;
}
.custom-select-wrapper {
width: 100%;
position: relative;
}
.custom-select {
position: relative;
width: 100%;
}
@media (max-width: 768px) {
.extractor-grid {
grid-template-columns: 1fr;
}
.extractor-grid .full-width {
grid-column: span 1;
}
}
.btn-toggle-advanced {
width: 100%;
padding: 10px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}
.alert-settings-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.alert-settings-panel.open {
max-height: 3000px;
opacity: 1;
}
.alert-settings-panel-body {
padding: 16px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.settings-section {
margin-bottom: 20px;
}
.settings-section:last-child {
margin-bottom: 0;
}
.settings-section strong {
display: block;
margin-bottom: 12px;
font-size: 14px;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 12px;
}
.badge-cooldown {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
background: rgba(107, 124, 255, 0.1);
color: var(--primary--body--color);
}
.enrichment-toggles {
display: flex;
flex-direction: column;
gap: 8px;
}
.enrichment-toggle-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgb(0 0 0 / 10%);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.enrichment-toggle-item:hover {
background: rgba(107, 124, 255, 0.05);
}
.enrichment-toggle-item input[type="checkbox"] {
flex-shrink: 0;
cursor: pointer;
}
.enrichment-toggle-content {
display: flex;
align-items: center;
gap: 10px;
}
.enrichment-toggle-content i {
font-size: 16px;
color: var(--secondary--color);
opacity: 0.7;
flex-shrink: 0;
}
.enrichment-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
align-items: start;
}
.enrichment-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
margin: 0;
}
.enrichment-card:hover {
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
background: color-mix(in srgb, var(--secondary--color) 4%, var(--input--background));
}
.enrichment-card-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: color-mix(in srgb, var(--secondary--color) 10%, transparent);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--primary--body--color);
flex-shrink: 0;
}
.enrichment-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.enrichment-card-title {
font-size: 12px;
font-weight: 600;
color: var(--primary--body--color);
opacity: var(--opacity--80);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.enrichment-card-desc {
font-size: 10.5px;
color: var(--primary--body--color);
opacity: 0.45;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.enrichment-card-check {
flex-shrink: 0;
cursor: pointer;
width: 14px;
height: 14px;
}
.enrichment-card--expanded {
flex-direction: column;
align-items: stretch;
}
.enrichment-card--expanded, .enrichment-card--expanded:hover {
background: var(--input--background);
border-color: rgba(128, 128, 128, 0.18);
}
.enrichment-card-row {
display: flex;
align-items: center;
gap: 10px;
}
.enrichment-card-extra {
border-top: 1px solid rgba(128, 128, 128, 0.13);
margin-top: 8px;
padding-top: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.enrichment-card-extra .form-control {
background: transparent !important;
}
@media (max-width: 1100px) {
.enrichment-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.enrichment-cards {
grid-template-columns: 1fr;
}
}
.btn-section-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s ease;
box-shadow: var(--cart--box--shadow);
opacity: var(--opacity--80);
text-align: left;
}
.btn-section-toggle:hover {
opacity: 1;
}
.sms-toggle-icon {
font-size: 14px;
color: var(--primary--body--color);
opacity: 0.85;
flex-shrink: 0;
}
.sms-toggle-label {
flex: 1;
font-size: 14px;
}
.sms-section-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.sms-section-panel.open {
max-height: 2000px;
opacity: 1;
}
.sms-section-body {
padding: 12px;
background: var(--input--background);
border: var(--cart--border);
border-top: none;
border-radius: 0 0 var(--cart--border--radius) var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.mail-fields-toolbar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.mail-fields-info {
flex: 1;
font-size: 10.5px;
color: var(--primary--body--color);
opacity: 0.7;
line-height: 1.4;
display: block;
}
.mail-fields-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(107, 124, 255, 0.1);
color: var(--primary--body--color);
font-size: 10.5px;
font-weight: 600;
flex-shrink: 0;
}
.btn-mail-action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
border: 1px solid var(--secondary--color);
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color);
transition: background 0.15s;
}
.btn-mail-action:hover {
background: color-mix(in srgb, var(--secondary--color) 22%, transparent);
}
.btn-mail-clear {
border-color: rgba(128, 128, 128, 0.35);
background: transparent;
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.btn-mail-clear:hover {
color: #dc3545;
border-color: rgba(220, 53, 69, 0.5);
background: rgba(220, 53, 69, 0.06);
opacity: 1;
}
.mail-fields-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
}
.mail-fields-grid .mail-field-item {
margin: 0;
}
@media (max-width: 1200px) {
.mail-fields-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.mail-fields-grid {
grid-template-columns: 1fr;
}
}
.profile-fields-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.profile-field-chip {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 5px 12px;
font-size: 13px;
color: var(--primary--body--color);
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
opacity: var(--opacity--80);
transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.profile-field-chip:hover {
opacity: 1;
}
.profile-field-chip.selected {
border-color: var(--secondary--color);
color: var(--secondary--color);
background: rgba(107, 124, 255, 0.08);
opacity: 1;
}
.profile-field-chip input[type="checkbox"] {
accent-color: var(--secondary--color);
cursor: pointer;
flex-shrink: 0;
}
.rule-profiling-toggle {
width: 100%;
padding: 10px 14px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
margin-bottom: 0;
}
.rule-profiling-toggle--active {
border-color: rgba(107, 124, 255, 0.35);
}
.rule-profiling-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.rule-profiling-panel.open {
max-height: 3000px;
opacity: 1;
}
.rule-profiling-panel-body {
padding: 16px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-timedelta-correlation-statistics/add-timedelta-correlation-statistics.component.css (global) ===== */
.darkBlue-theme .node {
border: 2px solid #3d325c !important;
}
.dark-theme .node {
border: 2px solid #5e5e5e !important;
}
.darkBlue-theme .circle {
border: 2px solid #3d325c !important;
}
.dark-theme .circle {
border: 2px solid #5e5e5e !important;
}
.darkBlue-theme .edge-mini {
color: #c5d4f7 !important;
}
.dark-theme .edge-mini {
color: #c2c2c2 !important;
}
.dark-theme .left-arrow::after {
border-left: 6px solid #cfcfcf !important;
}
.dark-theme .left-arrow {
background: linear-gradient(90deg, #cbc9c9, #595a5e) !important;
}
.table-event tr td {
padding-left: 5px !important;
}
.table-event tr th {
padding: 15px !important;
}
.table-event tr {
border: var(--cart--border);
box-shadow: var(--table--box--shadow);
}
.lightBlue-theme .table-event tr {
border-color: inherit !important;
border-style: solid !important;
border-width: 0 !important;
}
.darkBlue-theme .table-event tr {
border-style: hidden !important;
}
.table-event tr th {
border-right: var(--cart--border);
}
.table-event th {
opacity: 1;
width: 20%;
background: var(--body--background);
}
.table-event td {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: var(--table--box--shadow);
}
.lightBlue-theme .table-event td {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: var(--table--box--shadow);
}
.dark-theme .correlation-name {
color: #fff;
}
.dark-theme .correlation-name[data-hover="false"]:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .correlation-name {
color: #fff;
}
.darkBlue-theme .correlation-name[data-hover="false"]:hover {
background-color: #2e89e5;
color: #fff;
}
.dark-theme .correlation-buttons {
border-bottom: 1px solid #6e6c6c !important;
}
.darkBlue-theme .correlation-buttons {
border-bottom: 1px solid #3D4073 !important;
}
@page { margin: 12mm; }
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-timedelta-correlation-statistics/add-timedelta-correlation-statistics.component.css (scoped) ===== */
app-add-timedelta-correlation-statistics {
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
}
.small-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12px;
}
.choose_select_correlation {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
}
.choose_select_correlation:focus {
outline: none;
}
.choose_select_correlation:active {
outline: none;
}
.show-more-button {
color: var(--primary--body--color);
cursor: pointer;
font-size: 12.5px;
}
.show-less-button {
color: var(--primary--body--color);
cursor: pointer;
font-size: 12.5px;
}
.paths-viewport {
max-height: min(56vh, 520px);
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
}
.paths-viewport {
scrollbar-width: thin;
scrollbar-color: rgba(160, 170, 190, .55) transparent;
}
.paths-viewport:hover {
scrollbar-color: rgba(160, 170, 190, .55) transparent;
}
.paths-viewport::-webkit-scrollbar {
width: 6px;
}
.paths-viewport::-webkit-scrollbar-track {
background: transparent;
}
.paths-viewport::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 8px;
}
.paths-viewport:hover::-webkit-scrollbar-thumb {
background: rgba(160, 170, 190, .55);
}
.paths-viewport:hover::-webkit-scrollbar-thumb:hover {
background: rgba(160, 170, 190, .8);
}
.search-correlation {
text-indent: 20px;
width: 600px;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
padding: 8px 12px;
}
.search-correlation:focus {
outline: none;
}
.correlation-graph {
--node-size: 130px;
--arrow-h: 12px;
--line-color: #c9ced6;
--node-bg: #fff;
--node-text: #1d2230;
--accent: #6b7cff;
--shadow: 0 6px 18px rgba(25, 33, 61, .08);
--v-gap: 15px;
--join-fix: 1px;
--h-gap: 5px;
width: 100%;
overflow: auto;
padding: 12px 8px 24px;
box-sizing: border-box;
}
.tree ul {
padding-top: var(--v-gap);
position: relative;
padding-left: 0;
margin: 0;
text-align: center;
white-space: nowrap;
display: flex;
justify-content: center;
}
.tree li {
display: inline-block;
vertical-align: top;
list-style: none;
text-align: center;
position: relative;
padding: var(--v-gap) var(--h-gap) 0 var(--h-gap);
margin: 5px;
}
.node--root ul::before {
margin: 5px !important;
}
.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border-left: 2px solid var(--line-color);
height: 20px;
}
.tree li::before, .tree li::after {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 2px;
background: var(--line-color);
}
.tree li::before {
right: 50%;
}
.tree li::after {
left: 50%;
}
.tree li:only-child::before, .tree li:only-child::after {
display: none;
}
.tree ul ul>li {
min-width: 180px;
width: 100%;
position: relative;
}
.tree ul ul>li::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: calc(var(--v-gap) + var(--join-fix));
border-left: 2px solid var(--edge-color, var(--line-color));
border-left-color: var(--edge-color, var(--line-color));
}
.tree ul ul>li>.node {
border-color: var(--edge-color, #e7eaf0) !important;
}
.tree ul ul>li>.node:hover {
box-shadow: 0 10px 24px color-mix(in oklab, var(--edge-color, #000) 25%, transparent);
}
.tree ul ul>li>.node::before {
content: '';
position: absolute;
top: calc(-1 * var(--arrow-h) - var(--join-fix));
left: 50%;
transform: translateX(-50%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top-color: var(--edge-color, var(--line-color));
}
.tree ul ul>li>.edge-label {
border-color: var(--edge-color, var(--line-color));
color: var(--edge-color, #5b6472);
}
.tree>ul>li>.node::before {
display: none;
}
.tree li:first-child::before {
background: none;
}
.tree li:last-child::after {
background: none;
}
.node {
position: relative;
width: var(--node-size);
height: var(--node-size);
margin: 0 auto;
border-radius: 50%;
background: var(--input--background);
border: 2px solid #d8d8d9;
color: var(--node-text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.node::before {
content: '';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
.node-title {
font-size: 12px;
font-weight: 700;
line-height: 1.1;
max-width: calc(var(--node-size) - 18px);
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-word;
}
.node-sub {
margin-top: 4px;
font-size: 11px;
opacity: .75;
line-height: 1.1;
max-width: calc(var(--node-size) - 18px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.node--root {
border-color: var(--accent);
}
.node:hover {
transform: translateY(-2px);
}
.f-15 {
font-size: 12.5px;
}
@media (max-width:1250px) {
.content-area {
flex-wrap: wrap;
}
.content-area div {
width: 100%;
}
.search-correlation {
width: 100% !important;
}
}
@media (max-width:576px) {
.edge-label {
font-size: 10px;
padding: 2px 5px;
}
}
.edge-label {
position: absolute;
top: calc(var(--v-gap) / 2 - 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
font-size: 11px;
line-height: 1;
font-weight: 600;
color: var(--primary--body--color);
background: var(--correlation-label-background);
padding: 3px 6px;
border: 1px solid var(--line-color);
border-radius: 999px;
pointer-events: none;
white-space: nowrap;
opacity: 1;
}
.edge-label-info {
z-index: 2;
width: 120px;
font-size: 11px;
line-height: 1;
font-weight: 600;
background: var(--input--background);
padding: 3px 6px;
border: 1px solid #c9ced6;
border-radius: 999px;
pointer-events: none;
white-space: nowrap;
color: var(--primary--body--color);
}
@media (min-width: 1200px) {
.modal-xl {
max-width: 1500px;
}
}
@media (min-width: 1500px) {
.correlation-modal {
min-width: 1500px;
}
}
.node-starred::after {
content: "★";
position: absolute;
top: -6px;
left: -6px;
font-size: 16px;
color: gold;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.tree-header {
color: var(--primary--body--color);
font-style: italic;
font-size: 16px;
}
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.fa-arrow-right {
color: var(--primary--body--color);
}
.correlation-path {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 20px;
flex-wrap: wrap;
}
.path-node {
display: flex;
align-items: center;
position: relative;
}
.circle {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
background: var(--input--background);
border: 2px solid #d8d8d9;
color: var(--node-text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.arrow {
font-size: 13px;
color: var(--primary--body--color);
margin-left: 16px;
margin-right: 16px;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.label-header.d-block.me-3 {
background: var(--secondary--color);
color: var(--day--remain--color);
border-radius: 12px;
padding: 4px 20px;
display: inline-block;
font-weight: 500;
font-size: 13px;
}
.circle:hover {
transform: translateY(-3px);
transition: 0.2s;
box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.path-node:nth-child(odd) .arrow {
color: var(--edge-color, #6b7cff);
}
.edge-mini {
margin-bottom: 4px;
font-size: 12px;
color: #5a6a91;
}
.left-arrow {
width: 80px;
height: 2px;
background: linear-gradient(90deg, #6b7cff, #a2b4ff);
position: relative;
}
.left-arrow::after {
content: "";
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
border-left: 6px solid #a2b4ff;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.small-info-text {
font-size: 12px;
display: block;
margin-top: 15px;
}
.tooltip-container {
position: relative;
display: inline-block;
z-index: 10;
display: flex;
}
.tooltip-text-path {
visibility: hidden;
opacity: 0;
width: max-content;
min-width: 200px;
background: var(--body--background);
border-radius: var(--cart--border--radius);
position: absolute;
top: 50%;
left: calc(100% + 14px);
transform: translateY(-50%);
font-size: 12px;
box-shadow: var(--cart--box--shadow);
transition: opacity 0.2s ease;
white-space: pre-wrap;
pointer-events: none;
}
.tooltip-text-path::before {
content: "";
position: absolute;
top: 50%;
left: -7px;
transform: translateY(-50%);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 7px solid var(--primary--body--color);
}
.untouchable {
pointer-events: none;
background-color: gray;
opacity: 0.6;
}
.tooltip-text {
visibility: hidden;
opacity: 0;
width: max-content;
min-width: 200px;
background: var(--body--background);
border-radius: var(--cart--border--radius);
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
font-size: 12px;
box-shadow: var(--cart--box--shadow);
transition: opacity 0.2s ease;
white-space: pre-wrap;
pointer-events: none;
}
.tooltip-text-up {
visibility: hidden;
opacity: 0;
width: max-content;
min-width: 200px;
background: var(--body--background);
border-radius: var(--cart--border--radius);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
font-size: 12px;
box-shadow: var(--cart--box--shadow);
transition: opacity 0.2s ease;
white-space: pre-wrap;
pointer-events: none;
}
.tooltip-text::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid var(--primary--body--color);
}
.tooltip-text-mirror::before {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--primary--body--color);
}
.tooltip-container:hover .tooltip-text, .tooltip-container:focus-within .tooltip-text {
visibility: visible;
opacity: 1;
}
.tooltip-container:hover .tooltip-text-up, .tooltip-container:focus-within .tooltip-text-up {
visibility: visible;
opacity: 1;
}
.tooltip-container:hover .tooltip-text-path, .tooltip-container:focus-within .tooltip-text-path {
visibility: visible;
opacity: 1;
}
.table>:not(caption)>*>* {
background-color: transparent !important;
}
.node-exclamation::after {
content: "!";
position: absolute;
top: -6px;
right: -6px;
font-size: 20px;
color: red;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
table th, tr, td {
padding: 0.75rem !important;
font-size: 12px !important;
}
th {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: var(--table--box--shadow);
}
.tree li, .selected-routes .path-node {
position: relative;
}
.tree li:hover, .selected-routes .path-node:hover {
z-index: 2147483647;
}
.tooltip-container {
position: relative;
z-index: 2;
}
.tooltip-text {
z-index: 2147483647;
}
.tree li::before, .tree li::after, .tree ul ul::before, .tree ul ul>li::after {
z-index: 0 !important;
}
.node, .circle {
z-index: 3;
}
.tree, .selected-routes {
overflow: hidden;
}
.f-12 {
font-size: 12px !important;
}
.selected-routes, .correlation-path {
position: relative;
overflow: visible;
}
.correlation-path>.circle, .correlation-path>.arrow {
position: relative;
z-index: 1;
}
.circle.tooltip-container {
overflow: visible;
z-index: 2;
}
.circle .tooltip-text {
z-index: 2147483647;
}
.circle.tooltip-container:hover {
z-index: 2147483647;
}
.correlation-path .arrow, .correlation-path .left-arrow {
z-index: 0;
}
.circle:hover {
z-index: 2147483647;
}
.circle .node-title {
margin-top: 6px;
font-size: 13px;
font-weight: 600;
}
.circle .node-sub {
margin-top: 2px;
font-size: 11px;
opacity: 0.75;
}
.tree li::before, .tree li::after, .tree ul ul::before, .tree ul ul>li::after {
z-index: 0 !important;
}
.tree li:hover {
z-index: auto !important;
}
.tree li::before, .tree li::after, .tree ul ul::before, .tree ul ul>li::after {
position: absolute;
z-index: 0 !important;
}
.tree .node {
position: relative;
z-index: 2;
}
.tree li:hover>.node {
z-index: 5;
}
.select-correlation {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--body--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
background-color: var(--input--background);
}
.correlation-menu-2 {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.correlation-menu {
max-height: 330px;
overflow: auto;
}
.correlation-name {
font-size: 11px;
cursor: pointer;
padding: 5px 10px;
margin-bottom: .3rem;
}
.correlation-name[data-hover="false"]:hover {
background-color: var(--secondary--color) !important;
color: #fff !important;
transition: .3s all;
}
.correlation-name[data-hover="false"]:hover .correlation-name-span {
color: #fff !important;
}
.correlation-name[data-hover="false"]:hover .correlation-view-icon {
color: var(--day--remain--color) !important;
}
.correlation-search {
height: 35px;
text-indent: 20px;
}
.correlation-search::placeholder {
text-indent: 20px;
}
.correlation-search:focus {
outline: none;
}
.correlation-search-li {
height: 40px;
padding: 10px;
position: relative;
}
.correlation-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.correlation-name-span {
margin-left: .2rem;
}
.select-correlation::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
opacity: 0.7;
}
.correlation-path {
display: flex;
align-items: center;
gap: 12px;
overflow: visible;
margin-bottom: 30px;
}
.path-scroll {
display: inline-flex;
gap: 20px;
padding: 10px;
flex-wrap: nowrap;
width: 7000px;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.path-scroll::-webkit-scrollbar {
height: 5px;
}
.path-scroll::-webkit-scrollbar-track {
background: transparent;
}
.path-scroll::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 999px;
}
.path-scroll:hover {
scrollbar-color: rgba(160, 170, 190, 0.55) transparent;
}
.path-scroll:hover::-webkit-scrollbar-thumb {
background: rgba(160, 170, 190, 0.55);
}
.path-scroll:hover::-webkit-scrollbar-thumb:hover {
background: rgba(160, 170, 190, 0.8);
}
.path-scroll .circle, .path-scroll .arrow {
flex: 0 0 auto;
scroll-snap-align: start;
}
.graph-scroll {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: .25rem;
scrollbar-width: thin;
scrollbar-color: rgba(160, 170, 190, 0.55) transparent;
}
.graph-scroll>.correlation-graph {
width: max-content;
min-width: 100%;
box-sizing: border-box;
}
.cdk-overlay-container { z-index: 2000; }
.modal-dialog {
max-width: min(95vw, 1200px);
}
.graph-scroll::-webkit-scrollbar {
height: 6px;
}
.graph-scroll::-webkit-scrollbar-track {
background: transparent;
}
.graph-scroll::-webkit-scrollbar-thumb {
background-color: rgba(160, 170, 190, 0.55);
border-radius: 10px;
}
.graph-scroll::-webkit-scrollbar-thumb:hover {
background-color: rgba(160, 170, 190, 0.75);
}
@media print {
#graphScroll, .correlation-graph { margin: 0 !important; padding: 0 !important; }
.tree { margin: 0 !important; }
.tree > ul { margin: 0 !important; padding: 0 !important; }
.tree, .tree ul, .tree li {
break-inside: auto !important;
page-break-inside: auto !important;
}
.node, .edge-label {
break-inside: avoid !important;
page-break-inside: avoid !important;
}
.tooltip-text { display: none !important; }
.node, .circle { box-shadow: none !important; transform: none !important; }
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-timedelta-correlation/add-timedelta-correlation.component.css (global) ===== */
.dark-theme .extractor-item {
background: rgb(123 123 123 / 4%) !important;
}
.darkBlue-theme .extractor-item {
background: rgb(61 64 115 / 15%) !important;
}
.dark-theme .extractor-number {
opacity: .8 !important;
color: white !important;
}
.darkBlue-theme .extractor-number {
opacity: .8 !important;
color: white !important;
}
.dark-theme .btn-add-extractor {
color: white !important;
opacity: .6 !important;
}
.darkBlue-theme .btn-add-extractor {
color: white !important;
opacity: .8 !important;
}
.dark-theme .pattern-item {
background: rgb(0 0 0 / 20%) !important;
}
.darkBlue-theme .pattern-item {
background: rgb(0 0 0 / 23%) !important;
border-radius: 12px;
}
.darkBlue-theme .pattern-popover {
background: #2a2e46 !important;
}
.lightBlue-theme .pattern-popover {
background: #c4c4c4 !important;
}
.darkBlue-theme .advanced-settings {
background: rgba(11, 24, 33, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.darkBlue-theme .btn-toggle-advanced {
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: var(--input--background) !important;
}
.darkBlue-theme .alert-settings-panel-body {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(11, 24, 33, 0.9) !important;
}
.darkBlue-theme .alert-settings-panel .form-control, .darkBlue-theme .alert-settings-panel input.form-control, .darkBlue-theme .alert-settings-panel select.form-control, .darkBlue-theme .alert-settings-panel .form-select {
border: 1px solid rgba(96, 165, 250, 0.25) !important;
color: #e2edf7 !important;
}
.dark-theme .match-field-item {
background: #5f5f5f3d !important;
color: var(--primary--body--color) !important;
}
.darkBlue-theme .match-field-item {
background: #5f5f5f3d !important;
color: var(--primary--body--color) !important;
}
.dark-theme .match-field-item .field-name {
color: var(--primary--body--color) !important;
}
.darkBlue-theme .match-field-item .field-name {
color: var(--primary--body--color) !important;
}
.lightBlue-theme .chip {
border: 1px solid #bfc8cb !important;
}
.darkBlue-theme .chip {
border: 1px solid #525252 !important;
}
.dark-theme .btn-toggle-manual {
border: 1px dashed rgb(143 142 142) !important;
}
.dark-theme .btn-toggle-manual:hover {
border-color: var(--secondary--color);
color: var(--primary--body--color);
}
.darkBlue-theme .btn-toggle-manual {
border: 1px dashed rgb(125 123 123) !important;
}
.darkBlue-theme .btn-toggle-manual:hover {
border-color: var(--secondary--color);
color: var(--primary--body--color);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.lightBlue-theme .sms-section-body {
background: var(--input--background )!important;
}
.dark-theme .mode-card {
border-color: #5e5e5e;
}
.dark-theme .mode-option.active .mode-card {
background: linear-gradient(135deg, var(--input--background) 0%, rgba(46, 137, 229, 0.2) 100%);
}
.darkBlue-theme .mode-card {
border-color: #3d325c;
}
.darkBlue-theme .mode-option.active .mode-card {
background: linear-gradient(135deg, var(--input--background) 0%, rgba(46, 137, 229, 0.2) 100%);
}
app-add-timedelta-correlation .range-area input[type="range"].form-range::-webkit-slider-runnable-track {
height: 6px;
background: var(--secondary--color);
border-radius: 10px;
}
app-add-timedelta-correlation .range-area input[type="range"].form-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
}
app-add-timedelta-correlation .range-area input[type="range"].form-range::-moz-range-track {
height: 6px;
background: var(--secondary--color);
border-radius: 10px;
}
app-add-timedelta-correlation .range-area input[type="range"].form-range::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: white;
border: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
}
.lightBlue-theme .corr-header {
border-bottom: 1px solid #bfc8cb !important;
}
.darkBlue-theme .corr-header {
border-bottom: 1px solid #f9fdff3b !important;
}
.dark-theme .corr-card-head {
background: #2d3032 !important;
}
.lightBlue-theme .corr-card-head {
background: radial-gradient(circle at 30% 15%, #e0e0e08c 0%, #cecece3b 35%, #d7d9db6e 70%, #6161611f 100%) !important;
}
.darkBlue-theme .corr-card-head {
background: #1c273ec4 !important;
}
.lightBlue-theme .corr-pill {
border: 1px solid #bfc8cb !important;
}
.darkBlue-theme .corr-pill {
border: 1px solid #525252 !important;
}
.lightBlue-theme .select-dropdown {
background-color: #ededed !important;
}
.darkBlue-theme .select-dropdown {
background-color: #232939 !important;
}
.lightBlue-theme .option-tooltip-menu {
background-color: #ededed !important;
}
.darkBlue-theme .option-tooltip-menu {
background-color: #171c2a !important;
}
.dark-theme .nav-link:hover {
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.dark-theme .nav-link.active {
background-color: var(--input--background);
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.dark-theme .nav {
border-bottom: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .nav-link:hover {
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .nav-link.active {
background-color: var(--input--background);
border: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .nav {
border-bottom: 1px solid rgba(143, 142, 142, 0.5) !important;
}
.darkBlue-theme .enrichment-toggle-item {
background: rgba(255, 255, 255, 0.04) !important;
}
.darkBlue-theme .enrichment-toggle-item:hover {
background: rgba(107, 124, 255, 0.1) !important;
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-timedelta-correlation/add-timedelta-correlation.component.css (scoped) ===== */
app-add-timedelta-correlation {
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
font-size: 13px;
box-shadow: var(--cart--box--shadow) !important;
height: 36px;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
}
.small-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12px;
}
.choose_select_correlation {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
}
.fake-disabled {
pointer-events: none;
opacity: 0.55;
cursor: not-allowed;
}
.form-warning-message {
color: #dc3545;
font-size: 12px;
margin-top: 4px;
}
.select-correlation {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color) !important;
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.select-correlation::placeholder {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
}
.correlation-menu-2 {
width: 100%;
--bs-dropdown-bg: var(--body--background);
--bs-dropdown-link-color: var(--primary--body--color);
--bs-dropdown-link-hover-bg: var(--secondary--color);
--bs-dropdown-link-hover-color: var(--day--remain--color);
--bs-dropdown-link-active-bg: var(--secondary--color);
--bs-dropdown-link-active-color: var(--day--remain--color);
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.correlation-menu {
max-height: 330px;
overflow: auto;
}
.correlation-name {
font-size: 11px;
cursor: pointer;
padding: 5px 10px;
margin-bottom: 0.3rem;
}
.untouchable {
pointer-events: none;
background-color: gray;
opacity: 0.6;
}
.correlation-name .correlation-name-li {
color: var(--primary--body--color) !important;
background-color: transparent !important;
}
.correlation-name[data-hover="false"] .correlation-name-li:hover {
background-color: var(--secondary--color) !important;
color: var(--day--remain--color) !important;
}
.correlation-name[data-hover="false"] .correlation-name-li:hover .correlation-name-span, .correlation-name[data-hover="false"] .correlation-name-li:hover .correlation-view-icon {
color: var(--day--remain--color) !important;
}
.search-icon {
position: absolute;
top: 21.5px;
left: 18px;
transform: translateY(1px);
color: var(--primary--body--color);
}
.correlation-search {
height: 35px;
text-indent: 20px;
}
.correlation-search-li {
height: 40px;
padding: 10px;
position: relative;
}
.correlation-search-li:hover {
background-color: transparent !important;
}
.mode-selector {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.mode-option {
cursor: pointer;
position: relative;
}
.mode-option input[type="radio"] {
position: absolute;
opacity: 0;
}
.mode-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 12px;
background: var(--input--background);
border: 2px solid #c1c1c1;
border-radius: var(--cart--border--radius);
transition: all 0.2s ease;
}
.mode-card i {
font-size: 24px;
color: var(--primary--body--color);
opacity: 0.6;
}
.mode-title {
font-size: 13px;
font-weight: 600;
color: var(--primary--body--color);
}
.mode-desc {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
text-align: center;
}
.mode-option:hover .mode-card {
border-color: var(--secondary--color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mode-option.active .mode-card {
border-color: var(--secondary--color);
background: linear-gradient(135deg, var(--input--background) 0%, rgba(107, 124, 255, 0.1) 100%);
}
.mode-option.active .mode-card i {
color: var(--secondary--color);
opacity: 1;
}
.mode-option.mode-disabled {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
.mode-option.mode-disabled .mode-card {
filter: grayscale(0.4);
}
.extractors-list {
margin-top: 12px;
}
.extractor-item {
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
padding: 5px 16px;
margin-bottom: 0px;
box-shadow: var(--cart--box--shadow) !important;
}
.extractor-item.is-open {
padding: 16px 16px;
margin-bottom: 12px;
}
.extractor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0px;
}
.extractor-header.is-open-header {
margin-bottom: 12px;
}
.extractor-number {
font-size: 12px;
font-weight: 600;
color: var(--secondary--color);
background: rgba(107, 124, 255, 0.1);
padding: 4px 12px;
border-radius: 12px;
}
.btn-remove {
background: none;
border: none;
color: #dc3545;
cursor: pointer;
padding: 4px 8px;
transition: opacity 0.2s;
}
.btn-remove:hover {
opacity: 0.7;
}
.form-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.checkbox-field {
align-self: end;
}
.extractor-item {
position: relative;
}
.drag-icon {
cursor: grab;
opacity: .6;
color: var(--primary--body--color);
}
.extractor-header:active .drag-icon {
cursor: grabbing;
}
.cdk-drag-preview {
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
background: var(--input--background);
padding: 10px;
}
.cdk-drag-placeholder {
opacity: 0.25;
}
.cdk-drop-list-dragging .extractor-item {
transition: transform .12s ease;
}
.btn-add-extractor {
width: 100%;
padding: 12px;
background: var(--input--background);
border: 2px dashed var(--secondary--color);
border-radius: var(--cart--border--radius);
color: var(--secondary--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-add-extractor:hover {
background: rgba(107, 124, 255, 0.1);
}
.extractor-toggle {
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
color: var(--primary--body--color);
}
.extractor-body {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .18s ease, opacity .18s ease;
}
.extractor-body.open {
max-height: 800px;
opacity: 1;
}
.btn-help-sm {
background: none;
border: none;
color: var(--primary--body--color);
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
opacity: var(--opacity--80);
}
.pattern-helper {
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
padding: 12px;
margin-bottom: 12px;
}
.pattern-helper-header {
font-size: 13px;
margin-bottom: 8px;
color: var(--primary--body--color);
}
.pattern-list {
display: grid;
gap: 8px;
}
.pattern-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.pattern-item code {
font-size: 12px;
color: var(--secondary--color);
font-weight: 600;
}
.pattern-item small {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
}
.pattern-modal-wrap {
position: relative;
overflow: hidden;
}
.pattern-drawer {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: min(420px, 90%);
background: var(--input--background);
border-left: var(--cart--border);
box-shadow: var(--cart--box--shadow);
padding: 12px;
transform: translateX(110%);
opacity: 0;
pointer-events: none;
transition: transform .22s ease, opacity .22s ease;
z-index: 20;
display: flex;
flex-direction: column;
}
.pattern-drawer.open {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.pattern-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
color: var(--primary--body--color);
font-size: 13px;
}
.drawer-close {
background: transparent;
border: 0;
color: var(--primary--body--color);
opacity: .7;
padding: 4px 6px;
border-radius: 6px;
}
.drawer-close:hover {
opacity: 1;
}
.pattern-list {
display: grid;
gap: 8px;
overflow: auto;
padding-right: 4px;
}
.pattern-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.pattern-item code {
font-size: 12px;
color: var(--secondary--color);
font-weight: 600;
}
.pattern-item small {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
}
.pattern-drawer-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .12);
z-index: 10;
}
.pattern-popover {
width: 420px;
max-width: 90vw;
overflow: auto;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
padding: 12px;
opacity: 0;
transform: translateX(20px) scale(0.98);
transform-origin: right top;
transition: transform .18s ease, opacity .18s ease;
will-change: transform, opacity;
}
.pattern-popover.popover-open {
opacity: 1;
transform: translateX(0) scale(1);
}
.pattern-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
color: var(--primary--body--color);
}
.btn-toggle-advanced {
width: 100%;
padding: 10px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}
.form-invalid {
border: 1px solid #dc3545 !important;
}
.form-valid {
border: 1px solid green !important;
}
.select-correlation::after {
content: none !important;
}
.advanced-settings {
margin-top: 2px;
padding: 16px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.time-delta-input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time-delta-input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.settings-section {
margin-bottom: 20px;
}
.settings-section:last-child {
margin-bottom: 0;
}
.settings-section strong {
display: block;
margin-bottom: 12px;
font-size: 14px;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.match-fields-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 12px;
background: rgba(0, 0, 0, 0.03);
border-radius: 6px;
margin-bottom: 12px;
}
.match-field-item {
padding: 8px;
background: var(--input--background);
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.2s;
}
.match-field-item:hover {
border-color: var(--secondary--color);
box-shadow: 0 2px 8px rgba(107, 124, 255, 0.1);
}
.match-field-item label {
margin: 0;
cursor: pointer;
font-size: 12px;
}
.match-field-item input[type="checkbox"] {
cursor: pointer;
}
.match-field-item .field-name {
font-size: 12px;
font-weight: 600;
color: var(--secondary--color);
}
.empty-match-state {
text-align: center;
padding: 20px;
background: rgba(0, 0, 0, 0.03);
border-radius: 6px;
color: var(--primary--body--color);
opacity: 0.7;
}
.empty-match-state i {
display: block;
font-size: 24px;
margin-bottom: 8px;
color: var(--secondary--color);
}
.selected-match-fields {
margin-top: 12px;
padding: 12px;
background: rgba(107, 124, 255, 0.05);
border-radius: 6px;
border-left: 3px solid var(--secondary--color);
}
.selected-match-fields strong {
display: block;
margin-bottom: 8px;
font-size: 12px;
}
.selected-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--secondary--color);
color: white;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
}
.chip i {
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
}
.chip i:hover {
opacity: 1;
}
.manual-match-entry {
margin-top: 12px;
}
.btn-toggle-manual {
background: none;
border: 1px dashed rgba(0, 0, 0, 0.2);
padding: 8px 12px;
border-radius: 6px;
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
}
.btn-toggle-manual:hover {
border-color: var(--secondary--color);
color: var(--secondary--color);
}
.manual-input-container {
margin-top: 8px;
padding: 12px;
background: rgba(255, 152, 0, 0.05);
border-radius: 6px;
border-left: 3px solid #ff9800;
}
.help-icon {
font-size: 12px;
opacity: 0.6;
cursor: help;
margin-left: 4px;
}
.alert-info-box, .alert-warning-box {
display: flex;
gap: 12px;
padding: 12px;
border-radius: 6px;
margin-bottom: 12px;
font-size: 12px;
}
.alert-info-box {
background: rgba(13, 110, 253, 0.05);
border-left: 3px solid #0d6efd;
}
.alert-info-box i {
color: #0d6efd;
font-size: 18px;
flex-shrink: 0;
}
.alert-warning-box {
background: rgba(255, 193, 7, 0.05);
border-left: 3px solid #ffc107;
}
.alert-warning-box i {
color: #ffc107;
font-size: 18px;
flex-shrink: 0;
}
.alert-info-box strong, .alert-warning-box strong {
display: block;
margin-bottom: 4px;
font-size: 13px;
}
.alert-info-box p, .alert-warning-box p {
margin: 0;
opacity: 0.9;
line-height: 1.4;
}
.btn-build-profile {
width: 100%;
padding: 10px;
background: var(--secondary--color);
border: none;
border-radius: var(--cart--border--radius);
color: white;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: opacity 0.2s;
margin-top: 8px;
}
.btn-build-profile:hover:not(:disabled) {
opacity: 0.9;
}
.btn-build-profile:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-build-profile i.fa-spin {
animation: spin 1s linear infinite;
}
.alert-settings-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.alert-settings-panel.open {
max-height: 3000px;
opacity: 1;
}
.alert-settings-panel-body {
padding: 16px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.badge-cooldown {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
background: rgba(107, 124, 255, 0.1);
color: var(--primary--body--color);
}
.cooldown-preview {
margin-top: 12px;
padding: 10px 12px;
background: rgba(107, 124, 255, 0.05);
border-radius: 6px;
border-left: 3px solid var(--secondary--color);
}
.cooldown-preview-inner {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--primary--body--color);
}
.cooldown-preview-inner i {
color: var(--secondary--color);
font-size: 18px;
flex-shrink: 0;
}
.enrichment-toggles {
display: flex;
flex-direction: column;
gap: 8px;
}
.enrichment-toggle-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgb(0 0 0 / 10%);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.enrichment-toggle-item:hover {
background: rgba(107, 124, 255, 0.05);
}
.enrichment-toggle-item input[type="checkbox"] {
flex-shrink: 0;
cursor: pointer;
}
.enrichment-toggle-content {
display: flex;
align-items: center;
gap: 10px;
}
.enrichment-toggle-content i {
font-size: 16px;
color: var(--secondary--color);
opacity: 0.7;
flex-shrink: 0;
}
.enrichment-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
align-items: start;
}
.enrichment-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
margin: 0;
}
.enrichment-card:hover {
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
background: color-mix(in srgb, var(--secondary--color) 4%, var(--input--background));
}
.enrichment-card-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: color-mix(in srgb, var(--secondary--color) 10%, transparent);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--primary--body--color);
flex-shrink: 0;
}
.enrichment-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.enrichment-card-title {
font-size: 12px;
font-weight: 600;
color: var(--primary--body--color);
opacity: var(--opacity--80);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.enrichment-card-desc {
font-size: 10.5px;
color: var(--primary--body--color);
opacity: 0.45;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.enrichment-card-check {
flex-shrink: 0;
cursor: pointer;
width: 14px;
height: 14px;
}
.enrichment-card--expanded {
flex-direction: column;
align-items: stretch;
}
.enrichment-card--expanded, .enrichment-card--expanded:hover {
background: var(--input--background);
border-color: rgba(128, 128, 128, 0.18);
}
.enrichment-card-row {
display: flex;
align-items: center;
gap: 10px;
}
.enrichment-card-extra {
border-top: 1px solid rgba(128, 128, 128, 0.13);
margin-top: 8px;
padding-top: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.enrichment-card-extra .form-control {
background: transparent !important;
}
@media (max-width: 1100px) {
.enrichment-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.enrichment-cards {
grid-template-columns: 1fr;
}
}
.btn-section-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s ease;
box-shadow: var(--cart--box--shadow);
opacity: var(--opacity--80);
text-align: left;
}
.btn-section-toggle:hover {
opacity: 1;
}
.sms-toggle-icon {
font-size: 14px;
color: var(--primary--body--color);
opacity: 0.85;
flex-shrink: 0;
}
.sms-toggle-label {
flex: 1;
font-size: 14px;
}
.sms-section-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.sms-section-panel.open {
max-height: 2000px;
opacity: 1;
}
.sms-section-body {
padding: 12px;
background: var(--input--background);
border: var(--cart--border);
border-top: none;
border-radius: 0 0 var(--cart--border--radius) var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.mail-fields-toolbar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.mail-fields-info {
flex: 1;
font-size: 10.5px;
color: var(--primary--body--color);
opacity: 0.7;
line-height: 1.4;
display: block;
}
.mail-fields-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(107, 124, 255, 0.1);
color: var(--primary--body--color);
font-size: 10.5px;
font-weight: 600;
flex-shrink: 0;
}
.btn-mail-action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
border: 1px solid var(--secondary--color);
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color);
transition: background 0.15s;
}
.btn-mail-action:hover {
background: color-mix(in srgb, var(--secondary--color) 22%, transparent);
}
.btn-mail-clear {
border-color: rgba(128, 128, 128, 0.35);
background: transparent;
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.btn-mail-clear:hover {
color: #dc3545;
border-color: rgba(220, 53, 69, 0.5);
background: rgba(220, 53, 69, 0.06);
opacity: 1;
}
.mail-fields-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
}
.mail-fields-grid .mail-field-item {
margin: 0;
}
@media (max-width: 1200px) {
.mail-fields-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.mail-fields-grid {
grid-template-columns: 1fr;
}
}
.btn-save-alert-settings {
width: 100%;
padding: 10px;
margin-top: 16px;
background: var(--secondary--color);
border: none;
border-radius: var(--cart--border--radius);
color: white;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: opacity 0.2s;
}
.btn-save-alert-settings:hover {
opacity: 0.9;
}
.alert-danger-box {
display: flex;
gap: 12px;
padding: 12px;
border-radius: 6px;
margin-bottom: 12px;
font-size: 12px;
background: rgba(220, 53, 69, 0.08);
border-left: 3px solid #dc3545;
}
.alert-danger-box i {
color: #dc3545;
font-size: 18px;
flex-shrink: 0;
}
.alert-danger-box strong {
display: block;
margin-bottom: 4px;
font-size: 13px;
color: #dc3545;
}
.alert-danger-box p {
margin: 0;
opacity: 0.9;
line-height: 1.4;
}
@media (max-width: 768px) {
.mode-selector {
grid-template-columns: 1fr;
}
.extractor-grid {
grid-template-columns: 1fr;
}
.extractor-grid .full-width {
grid-column: span 1;
}
.settings-grid {
grid-template-columns: 1fr;
}
}
.tooltip {
position: relative;
display: inline-block;
opacity: 1 !important;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 10px 0;
position: absolute;
z-index: 1;
bottom: 100%;
font-size: 13px;
left: 50%;
margin-left: -125px;
opacity: 0;
transition: opacity .3s;
transition: opacity .3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.modal.right .modal-dialog {
position: fixed;
margin: 0;
height: 100%;
top: 0;
right: 0;
transform: none;
}
.modal.right.fade .modal-dialog {
width: 50%;
right: -50%;
opacity: 0;
transition: right .3s ease-out, opacity .3s linear;
}
.modal.right.fade.show .modal-dialog {
right: 0;
opacity: 1;
}
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.right .modal-body {
padding: 15px 15px 80px;
}
.modal-content {
background-color: var(--body--background);
box-shadow: var(--table--box--shadow);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
}
.modal.right .modal-dialog-right {
position: fixed;
margin: 0;
right: 0;
top: 0;
height: 100%;
width: 700px;
transform: translate3d(100%, 0, 0);
}
.modal.right.show .modal-dialog-right {
transform: translate3d(0, 0, 0);
}
.modal.right .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.corr-modal, .corr-popover, .corr-card {
background: var(--body--background) !important;
color: var(--primary--body--color) !important;
border-radius: 10px !important;
box-shadow: var(--cart--box--shadow) !important;
border: var(--cart--border) !important;
}
.corr-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 10px;
border-bottom: var(--cart--border) !important;
background: var(--body--background) !important;
}
.corr-header-left {
display: flex;
align-items: center;
min-width: 0;
font-size: 13px;
}
.corr-header-right {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
white-space: nowrap;
}
.corr-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
flex: 0 0 auto;
}
.corr-title-row {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
white-space: nowrap;
}
.corr-title {
font-weight: 700;
letter-spacing: .2px;
max-width: 420px;
font-size: 14px;
}
.popover-x {
border: none;
background: transparent;
box-shadow: none;
outline: none;
color: var(--primary--body--color);
width: 38px;
height: 38px;
display: grid;
place-items: center;
padding: 0;
}
.popover-x:hover {
filter: brightness(1.05);
}
.corr-body {
padding: 16px;
overflow: auto;
}
.corr-card {
overflow: hidden;
}
.corr-card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: radial-gradient(circle at 30% 15%, #ffffff 0%, #cecece3b 35%, #eef1f6 70%, #e6eaf1 100%);
}
.corr-card-title {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
white-space: nowrap;
font-size: 13px;
}
.corr-card-body {
padding: 12px;
}
.corr-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 3px 0px;
white-space: nowrap;
overflow: hidden;
}
.corr-row .k {
opacity: .9;
flex: 0 0 auto;
font-size: 13px;
}
.corr-row .v {
min-width: 0;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
}
.green-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}
.red-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #ef4444b2;
box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}
.passive-container {
color: red;
border: 1px solid #ff000059;
padding: 5px 15px;
border-radius: 10px;
}
.active-container {
color: red;
border: 1px solid #ff000059;
padding: 5px 15px;
border-radius: 10px;
}
.corr-desc {
opacity: .9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
padding: 0px 0px;
}
.corr-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.corr-list-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
white-space: nowrap;
overflow: hidden;
}
.corr-list-item .left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
overflow: hidden;
}
.corr-list-item .right {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
font-size: 13px;
}
.extractor-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.extractor-grid-detail {
display: grid;
gap: 10px;
}
.full-width {
grid-column: 1 / -1;
}
.extractor-card {
padding: 3px 0px;
white-space: nowrap;
overflow: hidden;
}
.extractor-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.extractor-head .title {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.extractor-head .name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
}
.extractor-head .badges {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.extractor-grid-detail {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
overflow-x: auto;
}
.extractor-grid-header, .extractor-head {
display: grid;
grid-template-columns: 26px minmax(80px, 3.6fr) minmax(100px, 0.7fr) minmax(190px, 1fr);
align-items: center;
column-gap: 12px;
min-width: 0;
}
.extractor-grid-header {
padding: 0 0 8px 0;
border-bottom: 1px solid var(--cart--border-color, rgba(0, 0, 0, 0.08));
font-size: 12px;
font-weight: 700;
color: var(--primary--body--color);
opacity: .8;
}
.extractor-card {
padding: 6px 0;
border-bottom: 1px solid var(--cart--border-color, rgba(0, 0, 0, 0.06));
overflow: hidden;
}
.col {
min-width: 0;
}
.col-index {
white-space: nowrap;
}
.col-name .name {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
.col-type, .col-meta {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex-wrap: wrap;
}
.idx {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
}
.badge {
max-width: 100%;
white-space: nowrap;
}
@media (max-width: 1100px) {
.extractor-grid-header, .extractor-head {
grid-template-columns: 50px minmax(20px, 1.5fr) minmax(90px, 0.8fr) minmax(150px, 1fr);
column-gap: 10px;
}
}
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 15px;
border-radius: 999px;
border: var(--cart--border);
background: var(--body--background);
color: var(--primary--body--color);
white-space: nowrap;
}
.chip-mail {
margin-right: 7px;
}
.chip-mitre {
border-style: solid;
}
.chip-mitre-id {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.mitre-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0px;
white-space: nowrap;
overflow: hidden;
margin-bottom: 10px;
}
.mitre-label {
opacity: .9;
flex: 0 0 auto;
font-size: 13px;
}
.mitre-val {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: 0;
overflow: hidden;
}
.mitre-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
opacity: .95;
font-size: 13px;
}
.corr-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border-radius: 999px;
border: var(--cart--border);
color: var(--primary--body--color);
white-space: nowrap;
}
.corr-device-pill {
padding: 0px 12px !important;
transform: translateY(2px);
}
.corr-device-pill span {
overflow: hidden;
text-overflow: ellipsis;
}
.idx {
display: inline-flex;
width: 26px;
height: 26px;
align-items: center;
justify-content: center;
font-weight: 700;
flex: 0 0 auto;
font-size: 13px;
}
.corr-empty {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border-radius: 12px;
border: var(--cart--border);
background: var(--input--background);
white-space: nowrap;
}
.muted {
opacity: .7;
}
.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.badge-soft-gray {
border: var(--cart--border);
background: rgba(127, 127, 127, .12);
color: var(--primary--body--color);
font-size: 12px;
}
.badge-soft-success {
border: var(--cart--border);
background: rgba(25, 135, 84, .18);
color: var(--primary--body--color);
font-size: 12px;
}
.badge-soft-warn {
border: var(--cart--border);
background: rgba(255, 193, 7, .18);
color: var(--primary--body--color);
font-size: 12px;
}
.badge-soft-primary {
border: var(--cart--border);
background: rgba(13, 110, 253, .18);
color: var(--primary--body--color);
font-size: 12px;
}
.badge-soft-purple {
border: var(--cart--border);
background: rgba(111, 66, 193, .18);
color: var(--primary--body--color);
font-size: 12px;
}
@media (max-width: 992px) {
.corr-header-right {
justify-content: flex-start;
flex-wrap: wrap;
white-space: normal;
}
.corr-title {
max-width: 100%;
}
.corr-device-pill {
max-width: 100%;
}
.extractor-grid {
grid-template-columns: 1fr;
}
.full-width {
grid-column: auto;
}
}
.corr-list-head, .corr-list-item {
display: grid;
grid-template-columns: 22px 115px 120px 1fr;
gap: 10px;
align-items: center;
white-space: nowrap;
overflow: hidden;
}
.corr-list-head {
padding: 3px 0px;
border-radius: 12px;
margin-bottom: 10px;
}
.corr-list-head .h-col {
font-weight: 700;
opacity: .85;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
}
.corr-list-item {
padding: 3px 0px;
border-radius: 12px;
}
.corr-list-item .left {
grid-column: 1 / 4;
display: grid;
grid-template-columns: 52px 120px 190px;
gap: 10px;
align-items: center;
min-width: 0;
overflow: hidden;
}
.corr-list-item .right {
grid-column: 4 / 5;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.corr-list-item .left .idx, .corr-list-item .left .badge {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
z-index: 1065;
}
#correlationDetailModal {
z-index: 1070;
}
#correlationDetailModal .modal-dialog-right {
z-index: 1071;
}
.custom-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
z-index: 1065;
}
#correlationDetailModal {
position: fixed;
inset: 0;
z-index: 1070;
opacity: 0;
transition: opacity .18s ease;
}
#correlationDetailModal.show {
opacity: 1;
}
#correlationDetailModal .modal-dialog-right {
position: fixed;
right: 0;
top: 0;
height: 100%;
margin: 0;
width: min(500px, 92vw);
transform: translateX(110%);
opacity: 0;
transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .18s ease;
will-change: transform, opacity;
z-index: 1071;
}
#correlationDetailModal.show .modal-dialog-right {
transform: translateX(0);
opacity: 1;
}
#correlationDetailModal .modal-content {
height: 100%;
}
#correlationDetailModal .modal-dialog-right {
height: 100%;
}
#correlationDetailModal .modal-content {
height: 100%;
display: flex;
flex-direction: column;
}
#correlationDetailModal .corr-popover {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#correlationDetailModal .corr-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
#correlationDetailModal .modal-body {
height: auto !important;
}
.corr-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.corr-collapse-btn {
width: 34px;
height: 34px;
border: none;
outline: none;
border-radius: 10px;
background: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease, transform .2s ease, color .2s ease;
flex-shrink: 0;
}
.corr-collapse-btn i {
transition: transform .25s ease;
font-size: 13px;
}
.corr-collapse-btn i.rotated {
transform: rotate(-180deg);
}
.custom-select-wrapper {
width: 100%;
position: relative;
}
.custom-select {
position: relative;
width: 100%;
}
.select-trigger {
width: 100%;
min-height: 42px;
padding: 10px 14px;
display: flex;
font-size: 13px;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow) !important;
}
.select-trigger:hover {
opacity: 0.95;
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
}
.custom-select.open .select-trigger {
border-color: var(--secondary--color);
}
.select-trigger-label {
display: inline-flex;
align-items: center;
gap: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-trigger-icon {
flex-shrink: 0;
font-size: 13px;
color: var(--primary--body--color);
opacity: 0.85;
}
.selected-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
flex: 1;
font-size: 14px;
}
.select-arrow {
font-size: 13px;
flex-shrink: 0;
transition: transform 0.2s ease;
color: var(--primary--body--color);
}
.select-arrow.rotated {
transform: rotate(180deg);
}
.select-dropdown {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
width: 100%;
max-height: 400px;
overflow-y: visible;
z-index: 1000;
padding: 8px;
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow) !important;
}
.select-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 5px;
border-radius: calc(var(--cart--border--radius) - 4px);
transition: background-color 0.2s ease;
cursor: pointer;
position: relative;
font-size: 13px;
}
.select-option:hover {
background: rgba(255, 255, 255, 0.04);
}
.option-left {
flex: 1;
min-width: 0;
}
.option-label {
display: block;
font-size: 13px;
color: var(--primary--body--color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.option-right {
display: flex;
align-items: center;
position: relative;
}
.option-menu-area {
position: relative;
display: flex;
align-items: center;
}
.option-icon-btn {
width: 30px;
height: 30px;
border: none;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary--body--color);
border-radius: 50%;
background-color: transparent;
transition: all 0.2s ease;
}
.option-icon-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.option-tooltip-menu {
position: absolute;
right: 38px;
top: 50%;
transform: translateY(-50%);
min-width: 350px;
padding: 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.2s ease;
z-index: 1200;
color: var(--primary--body--color);
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow) !important;
}
.option-menu-area:hover .option-tooltip-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.tooltip-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
color: var(--primary--body--color);
}
.mode-btn {
cursor: pointer;
}
.tooltip-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
line-height: 1.4;
color: var(--primary--body--color);
}
.tooltip-item+.tooltip-item {
margin-top: 8px;
}
.empty-area {
padding: 14px 12px;
font-size: 13px;
opacity: 0.7;
color: var(--primary--body--color);
}
.select-dropdown::-webkit-scrollbar {
width: 8px;
}
.select-dropdown::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
}
.select-dropdown::-webkit-scrollbar-track {
background: transparent;
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-timedelta-correlation/profile-status-widget/profile-status-widget.component.css (scoped) ===== */
app-profile-status-widget {
.profile-status-widget {
background: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
padding: 12px;
margin-bottom: 16px;
}
.status-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.status-badge.learning {
background-color: #fff3cd;
color: #856404;
}
.status-badge.active {
background-color: #d4edda;
color: #155724;
}
.status-badge.stale {
background-color: #f8d7da;
color: #721c24;
}
.status-badge.none {
background-color: #e2e3e5;
color: #383d41;
}
.status-date {
font-size: 11px;
opacity: 0.7;
color: var(--primary--body--color);
}
.progress-section {
margin-top: 12px;
}
.progress-info {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
font-size: 12px;
color: var(--primary--body--color);
}
.percentage {
font-weight: 600;
color: var(--secondary--color);
}
.progress-bar-container {
height: 8px;
background-color: rgba(0,0,0,0.1);
border-radius: 4px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #6b7cff, #44c4a1);
transition: width 0.3s ease;
}
.stats-section {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid rgba(0,0,0,0.1);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-label {
font-size: 11px;
opacity: 0.7;
color: var(--primary--body--color);
}
.stat-value {
font-size: 14px;
font-weight: 600;
color: var(--primary--body--color);
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/add-yara-rule-correlation/add-yara-rule-correlation.component.css (scoped) ===== */
app-add-yara-rule-correlation {
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
}
.small-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12px;
}
.new_input_add_correlation {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
font-size: 13px;
height: 36px;
}
.new_input_add_correlation::placeholder {
color: var(--primary--body--color);
}
.select-correlation {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.correlation-menu-2 {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.correlation-menu {
max-height: 330px;
overflow: auto;
}
.correlation-name {
font-size: 11px;
cursor: pointer;
padding: 5px 10px;
margin-bottom: .3rem;
}
.correlation-name[data-hover="false"]:hover {
background-color: var(--secondary--color) !important;
color: #fff !important;
transition: .3s all;
}
.correlation-name[data-hover="false"]:hover .correlation-name-span {
color: #fff !important;
}
.correlation-search {
height: 35px;
text-indent: 20px;
}
.correlation-search::placeholder {
text-indent: 20px;
}
.correlation-search:focus {
outline: none;
}
.correlation-search-li {
height: 40px;
padding: 10px;
position: relative;
}
.correlation-search-li:hover {
background-color: transparent !important;
}
.search-icon {
position: absolute;
top: 21.5px;
left: 18px;
transform: translateY(1px);
color: var(--primary--body--color);
}
.device-item {
text-decoration: none;
color: var(--primary--body--color);
}
.device-sub {
opacity: .7;
font-size: 10px;
margin-left: 6px;
}
.rule-editor {
width: 100%;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 12px;
padding: 10px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
line-height: 1.35;
}
.rule-editor:focus {
outline: none;
}
.mailto-wrap { display: block; }
.mailto-input-area {
display: flex;
gap: 10px;
align-items: center;
}
.mail-add-btn {
height: 36px;
white-space: nowrap;
}
.mailto-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
border: var(--cart--border);
background: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: 999px;
padding: 6px 10px;
color: var(--primary--body--color);
font-size: 12px;
}
.chip-close {
cursor: pointer;
opacity: .7;
}
.chip-close:hover {
opacity: 1;
}
.confirm_button { cursor: pointer; }
.cancel_button { cursor: pointer; }
.delete_button {
cursor: pointer;
background: rgba(255, 0, 0, 0.08);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
padding: 8px 12px;
}
@media (max-width: 768px) {
.mailto-input-area { flex-direction: column; align-items: stretch; }
.mail-add-btn { width: 100%; }
}
.sigma-tooltip-container {
position: relative;
display: inline-block;
}
.sigma-tooltip-container .message-tooltip {
visibility: hidden;
width: 90vw;
max-width: 560px;
background-color: var(--secondary--color, #333);
color: var(--day--remain--color, #fff);
text-align: left;
border-radius: 6px;
padding: 6px 8px;
position: absolute;
z-index: 99999;
top: 120%;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
opacity: 0;
transition: opacity .3s;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.sigma-tooltip-container:hover .message-tooltip {
visibility: visible;
opacity: 1;
}
.rule-editor {
color: var(--primary--body--color);
background-color: var(--input--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
font-size: 13px;
padding: 10px;
resize: vertical;
min-height: 380px;
max-height: 700px;
transition: border-color 0.2s;
}
.rule-editor:focus {
outline: none;
border-color: var(--primary--button--background--color);
box-shadow: 0 0 0 2px var(--primary--button--background--color, #007bff33);
}
.rule-editor::placeholder {
color: var(--primary--body--color);
opacity: 0.6;
}
.confirm_button {
background-color: var(--primary--button--background--color);
color: white;
border: none;
transition: all 0.2s ease;
}
.confirm_button:hover:not(:disabled) {
background-color: var(--primary--button--background--color);
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.confirm_button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cancel_button {
background-color: transparent;
color: var(--primary--body--color);
border: 1px solid var(--cart--border-color, #ddd);
transition: all 0.2s ease;
}
.cancel_button:hover:not(:disabled) {
background-color: var(--secondary--color, #f5f5f5);
transform: translateY(-1px);
}
.cancel_button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/correlation-modal/correlation-modal.component.css (global) ===== */
.darkBlue-theme .tooltip_td {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.darkBlue-theme .tooltip_th {
border: 1px solid rgb(97, 97, 97) !important;
border-radius: 10px;
}
.lightBlue-theme .tooltip_td {
border: 1px solid var(--primary--body--color) !important;
}
.lightBlue-theme .tooltip_th {
border: 1px solid var(--primary--body--color) !important;
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/correlation-modal/correlation-modal.component.css (scoped) ===== */
app-correlation-modal {
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
border-bottom: var(--cart--border);
background-color: var(--body--background);
}
.label-header {
color: var(--primary--body--color);
}
.header-bottom {
border-bottom: 1px solid var(--primary--body--color);
}
.modal-body {
padding: 0px;
}
.modal-fullscreen {
height: auto !important;
}
#tooltip_filter {
display: none;
padding: 20px;
min-width: 300px;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
position: absolute;
color: var(--primary--body--color);
transition: .25s all ease;
transition-delay: 0s;
}
.tooltip_th {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_td {
background-color: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
}
.tooltip_level {
color: var(--primary--body--color);
}
.tooltip_color {
width: 20px;
height: 20px;
border-radius: 50%;
transform: translateY(2px);
}
.tooltip_td_first {
background-color: var(--body--background);
}
.tooltip_table {
background-color: var(--body--background);
}
.tooltip_close_button {
color: var(--primary--body--color);
cursor: pointer;
}
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
border-bottom: var(--cart--border);
background-color: var(--body--background);
}
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/filter/filter.component.css (global) ===== */
.dark-theme .fc-card {
background: rgb(123 123 123 / 4%) !important;
}
.darkBlue-theme .fc-card {
background: rgb(61 64 115 / 15%) !important;
}
.dark-theme .fc-op-item--contains:hover, .dark-theme .fc-op-item--startswith:hover, .dark-theme .fc-op-item--endswith:hover, .darkBlue-theme .fc-op-item--contains:hover, .darkBlue-theme .fc-op-item--startswith:hover, .darkBlue-theme .fc-op-item--endswith:hover {
background-color: rgba(60, 130, 255, 0.22) !important;
}
.dark-theme .fc-op-item--doesnotcontains:hover, .dark-theme .fc-op-item--notstartswith:hover, .dark-theme .fc-op-item--notendswith:hover, .darkBlue-theme .fc-op-item--doesnotcontains:hover, .darkBlue-theme .fc-op-item--notstartswith:hover, .darkBlue-theme .fc-op-item--notendswith:hover {
background-color: rgba(255, 80, 80, 0.2) !important;
}
.dark-theme .add-filter-cta, .darkBlue-theme .add-filter-cta {
border-color: color-mix(in srgb, var(--secondary--color) 32%, rgba(255, 255, 255, 0.08));
background:
linear-gradient(135deg,
color-mix(in srgb, var(--secondary--color) 18%, rgba(255, 255, 255, 0.06)),
color-mix(in srgb, var(--body--background) 96%, rgba(255, 255, 255, 0.02)));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.dark-theme .add-filter-cta__label, .darkBlue-theme .add-filter-cta__label {
color: rgba(255, 255, 255, 0.92);
}
.lightBlue-theme .add-filter-cta {
border: none;
background: linear-gradient(135deg, #ffffff, #f4fbfb);
box-shadow: 0 10px 24px rgba(44, 71, 74, 0.12);
}
.lightBlue-theme .add-filter-cta__icon {
background: #50787b;
}
.lightBlue-theme .fc-input {
border : 1px solid #d8d8d8 !important;
}
/* ===== admin-components/dwh-base-modals/add-correlation-modal/filter/filter.component.css (scoped) ===== */
app-filter {
.fc-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.fc-section-header {
display: flex;
align-items: center;
gap: 10px;
}
.fc-section-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--secondary--color);
font-size: 13px;
}
.fc-section-titles {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.fc-section-title {
font-size: 14px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.92;
}
.fc-section-desc {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.55;
line-height: 1.3;
}
.fc-card {
position: relative;
overflow: visible;
background: var(--input--background);
border: var(--cart--border);
border-radius:10px;
box-shadow: var(--cart--box--shadow) !important;
transition: border-color 0.2s ease;
}
.fc-card:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent);
}
.fc-main-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
padding: 10px 12px;
}
.fc-drag {
flex-shrink: 0;
cursor: grab;
color: var(--primary--body--color);
opacity: 0.25;
font-size: 14px;
padding: 0 2px;
line-height: 1;
transition: opacity 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.fc-drag:hover {
opacity: 0.6;
}
.fc-num {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--secondary--color);
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1;
opacity: 0.9;
}
.fc-value-area {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
.fc-field-wrap {
position: relative;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
}
.fc-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.35;
font-size: 12px;
pointer-events: none;
z-index: 1;
}
.fc-input {
width: 100%;
height: 32px;
background-color: color-mix(in srgb, var(--input--background) 88%, var(--body--background) 12%) !important;
border: var(--cart--border) !important;
border-radius: 6px !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color);
font-size: 13px;
padding-left: 30px;
padding-right: 28px;
transition: border-color 0.15s ease;
}
.fc-input:focus {
outline: none;
border-color: var(--secondary--color) !important;
}
.fc-operator-wrap {
flex-shrink: 1;
flex-basis: 140px;
min-width: 90px;
position: relative;
z-index: 2;
}
.fc-operator-wrap--open {
z-index: 20;
}
.fc-op-btn {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
height: 32px;
padding: 0 10px;
background-color: color-mix(in srgb, var(--input--background) 88%, var(--body--background) 12%);
border: var(--cart--border);
border-radius: 6px;
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
text-align: left;
transition: border-color 0.15s;
}
.fc-operator-wrap--open .fc-op-btn {
border-color: var(--secondary--color);
}
.fc-op-btn:focus {
outline: none;
box-shadow: none;
}
.fc-op-caret {
margin-left: auto;
font-size: 10px;
opacity: 0.5;
flex-shrink: 0;
transition: transform 0.15s;
}
.fc-op-caret--open {
transform: rotate(180deg);
}
.fc-op-icon {
font-size: 11px;
font-family: monospace;
font-weight: 700;
color: var(--primary--body--color);
flex-shrink: 0;
min-width: 24px;
text-align: center;
}
.fc-op-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12.5px;
}
.fc-op-menu {
min-width: 200px;
max-height: 50vh;
overflow-y: auto;
list-style: none;
margin: 0;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
padding: 4px;
}
.fc-op-menu li {
list-style: none;
margin: 0;
padding: 0;
}
.fc-op-item {
display: flex !important;
align-items: center;
gap: 8px;
padding: 7px 10px !important;
border-radius: 5px;
color: var(--primary--body--color) !important;
font-size: 13px;
transition: background-color 0.08s linear;
border: none !important;
background: transparent !important;
width: 100%;
box-sizing: border-box;
text-align: left;
}
.fc-op-item:hover {
background-color: var(--input--background) !important;
}
.fc-op-item--contains:hover, .fc-op-item--startswith:hover, .fc-op-item--endswith:hover {
background-color: rgba(46, 137, 229, 0.16) !important;
}
.fc-op-item--doesnotcontains:hover, .fc-op-item--notstartswith:hover, .fc-op-item--notendswith:hover {
background-color: rgba(220, 53, 69, 0.13) !important;
}
.fc-op-item--between:hover {
background-color: rgba(155, 89, 224, 0.16) !important;
}
.fc-op-item--inlist:hover {
background-color: rgba(40, 167, 69, 0.15) !important;
}
.fc-op-item--notinlist:hover {
background-color: rgba(255, 152, 0, 0.16) !important;
}
.fc-op-icon-sm {
font-size: 11px;
font-family: monospace;
font-weight: 700;
color: var(--primary--body--color);
min-width: 26px;
text-align: center;
flex-shrink: 0;
}
.fc-op-item-label {
flex: 1;
}
.fc-op-check {
margin-left: auto;
color: var(--primary--body--color);
font-size: 11px;
flex-shrink: 0;
}
.fc-op-icon--negated {
text-decoration: line-through;
}
.fc-case-wrap {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
flex-basis: auto;
}
.fc-case-switch {
width: 28px;
height: 18px;
margin: 0;
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.fc-case-badge {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
border: var(--cart--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
color: var(--primary--body--color);
opacity: 0.5;
transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.fc-case-badge--active {
background: var(--secondary--color);
color: #fff;
border-color: var(--secondary--color);
opacity: 1;
}
.fc-case-badge--inactive::before {
position: absolute;
content: "";
left: 4px;
top: 50%;
width: 22px;
border-top: 1px solid currentColor;
transform: rotate(-45deg);
}
.fc-delete-btn {
background: transparent;
border: none;
padding: 6px 8px;
cursor: pointer;
color: #dc3545;
opacity: 0.45;
font-size: 13px;
border-radius: 6px;
line-height: 1;
flex-shrink: 0;
transition: opacity 0.15s;
}
.fc-delete-btn:hover {
opacity: 1;
}
.fc-warn-tooltip {
flex-shrink: 0;
display: flex;
align-items: center;
}
.tooltip {
position: relative;
display: inline-block;
opacity: 1 !important;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 30;
bottom: 100%;
right: 0;
margin-bottom: 6px;
opacity: 0;
transition: opacity .2s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.fc-fieldtype-wrap {
flex-basis: 95px;
min-width: 70px;
}
.fc-extra-input {
flex: 1;
min-width: 50px;
height: 32px !important;
padding-left: 10px !important;
}
.fc-range-sep {
font-size: 15px;
color: var(--primary--body--color);
opacity: 0.4;
flex-shrink: 0;
user-select: none;
}
.fc-connector {
display: flex;
align-items: center;
justify-content: center;
padding: 2px 0;
}
.fc-logic-wrap {
flex: 0 0 auto;
width: auto;
min-width: 0;
}
.fc-logic-btn {
height: 22px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .02em;
padding: 0 10px;
gap: 4px;
background-color: color-mix(in srgb, var(--secondary--color) 10%, var(--input--background));
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: none;
color: var(--primary--body--color);
}
.fc-logic-btn .fc-op-label {
flex: 0 0 auto;
font-size: 10.5px;
overflow: visible;
}
.fc-logic-btn .fc-op-caret {
font-size: 8px;
}
.fc-logic-btn:hover {
background-color: color-mix(in srgb, var(--secondary--color) 18%, var(--input--background));
border-color: color-mix(in srgb, var(--secondary--color) 38%, transparent);
}
.fc-logic-wrap.fc-operator-wrap--open .fc-logic-btn, .fc-logic-btn:focus-visible {
border-color: var(--secondary--color);
box-shadow: 0 0 0 2px rgba(46, 137, 229, 0.12);
}
.fc-logic-menu {
min-width: 150px;
}
.fc-logic-select {
height: 28px !important;
min-width: 76px;
font-size: 12px !important;
border-radius: 20px !important;
background-color: var(--body--background) !important;
}
.fc-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 16px;
border: 1px dashed rgba(128, 128, 128, 0.25);
border-radius: 8px;
text-align: center;
}
.fc-empty-icon {
font-size: 20px;
color: var(--primary--body--color);
opacity: 0.2;
}
.fc-empty-text {
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.45;
}
.add-filter-cta-wrap {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.add-filter-cta {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 38px;
padding: 7px 16px 7px 12px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background:
linear-gradient(135deg,
color-mix(in srgb, var(--secondary--color) 14%, var(--input--background)),
color-mix(in srgb, var(--body--background) 82%, transparent));
box-shadow: var(--cart--box--shadow), 0 10px 24px rgba(0, 0, 0, 0.08);
color: var(--primary--body--color);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.add-filter-cta:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent);
box-shadow: var(--cart--box--shadow), 0 14px 28px rgba(0, 0, 0, 0.12);
}
.add-filter-cta:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 62%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.add-filter-cta:active {
transform: translateY(0);
}
.add-filter-cta__icon {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: color-mix(in srgb, var(--secondary--color) 85%, transparent);
color: #fff;
font-size: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.add-filter-cta__label {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--primary--body--color);
opacity: 0.92;
}
.ip-mode-switch {
display: flex;
align-items: center;
overflow: hidden;
height: 32px;
background-color: color-mix(in srgb, var(--input--background) 90%, var(--body--background) 10%);
border: var(--cart--border);
border-radius: 6px;
box-shadow: var(--cart--box--shadow);
padding: 3px;
gap: 2px;
user-select: none;
flex-shrink: 0;
}
.ip-mode-label {
height: 24px;
width: 20px;
font-size: 11px;
font-weight: 700;
border-radius: 4px;
line-height: 24px;
text-align: center;
cursor: pointer;
color: var(--primary--body--color);
opacity: var(--opacity--60, 0.6);
transition: background-color 0.15s, opacity 0.15s;
white-space: nowrap;
}
.ip-mode-label--active {
background-color: var(--secondary--color);
color: #fff;
opacity: 1;
}
.choose_select_correlation {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
}
.choose_select_correlation:focus, .choose_select_correlation:active {
outline: none;
}
.filter-clear-button-correlation {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 14px;
padding: 0 4px;
box-shadow: none;
border: none;
background: transparent;
line-height: 1;
}
.filter-clear-button-correlation:active, .filter-clear-button-correlation:focus {
border: none;
outline: none;
box-shadow: none;
}
input.ng-invalid.ng-touched, select.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched {
border: 1px solid #dc3545 !important;
}
@media (max-width: 1650px) {
.fc-main-row .fc-operator-wrap .fc-op-label, .fc-main-row .fc-fieldtype-wrap .fc-op-label {
display: none;
}
.fc-main-row .fc-operator-wrap {
flex-basis: 40px;
min-width: 36px;
}
.fc-main-row .fc-fieldtype-wrap {
flex-basis: 36px;
min-width: 32px;
}
.fc-main-row .fc-op-btn {
justify-content: center;
padding: 0 4px;
gap: 2px;
}
.fc-main-row .fc-op-caret {
margin-left: 0;
}
.fc-case-wrap {
gap: 4px;
}
.fc-field-wrap {
min-width: 50px;
}
.fc-extra-input {
min-width: 36px;
}
}
@media (max-width: 1300px) {
.fc-case-badge {
display: none;
}
}
}
/* ===== admin-components/dwh-base-modals/add-device-flag-modal/add-device-flag-modal.component.css (global) ===== */
.dark-theme .adf-modal-content-add-device-flag, .darkBlue-theme .adf-modal-content-add-device-flag {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .adf-widget-header-add-device-flag, .darkBlue-theme .adf-widget-header-add-device-flag {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
.dark-theme .adf-form-section-add-device-flag {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .adf-form-section-add-device-flag {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .adf-form-section-add-device-flag__head, .darkBlue-theme .adf-form-section-add-device-flag__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .adf-input-add-device-flag, .darkBlue-theme .adf-input-add-device-flag, .dark-theme .adf-select-add-device-flag, .darkBlue-theme .adf-select-add-device-flag, .dark-theme .adf-select-btn-add-device-flag, .darkBlue-theme .adf-select-btn-add-device-flag, .dark-theme .adf-array-delete-add-device-flag, .darkBlue-theme .adf-array-delete-add-device-flag {
border: none !important;
}
.dark-theme .adf-array-delete-add-device-flag, .darkBlue-theme .adf-array-delete-add-device-flag, .dark-theme .adf-information-add-device-flag, .darkBlue-theme .adf-information-add-device-flag {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme .adf-dropdown-menu-add-device-flag, .darkBlue-theme .adf-dropdown-menu-add-device-flag {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .adf-brand-item-add-device-flag, .darkBlue-theme .adf-brand-item-add-device-flag {
color: rgba(255, 255, 255, 0.88);
}
.lightBlue-theme .adf-modal-content-add-device-flag {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .adf-widget-header-add-device-flag {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .adf-form-section-add-device-flag {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .adf-input-add-device-flag, .lightBlue-theme .adf-select-add-device-flag, .lightBlue-theme .adf-select-btn-add-device-flag, .lightBlue-theme .adf-array-delete-add-device-flag {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .adf-dropdown-menu-add-device-flag {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .adf-search-input-add-device-flag {
background-color: #f0f4f6;
border-color: #c8d8de;
}
.darkBlue-theme .adf-regex-capture-hint-device-flag code {
color: white !important;
}
.darkBlue-theme .adf-regex-test-toggle-device-flag {
color: white !important;
}
.darkBlue-theme .adf-regex-test-log-device-flag .hit {
background-color: white !important;
color: black !important;
}
/* ===== admin-components/dwh-base-modals/add-device-flag-modal/add-device-flag-modal.component.css (scoped) ===== */
app-add-device-flag-modal {
.adf-modal-content-add-device-flag {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: hidden;
}
.adf-form-add-device-flag {
min-height: 100%;
}
.adf-widget-shell-add-device-flag {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.adf-widget-header-add-device-flag {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
}
.adf-widget-title-add-device-flag {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.adf-header-icon-add-device-flag {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.adf-title-text-add-device-flag {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.adf-widget-close-add-device-flag {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.adf-widget-close-add-device-flag:hover {
transform: translateY(-1px);
opacity: 1;
}
.adf-widget-close-add-device-flag:focus, .adf-widget-close-add-device-flag:active {
outline: none !important;
box-shadow: none !important;
}
.adf-modal-body-add-device-flag {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.adf-modal-body-add-device-flag::-webkit-scrollbar, .adf-dropdown-menu-add-device-flag::-webkit-scrollbar {
width: 4px;
}
.adf-modal-body-add-device-flag::-webkit-scrollbar-thumb, .adf-dropdown-menu-add-device-flag::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.adf-form-section-add-device-flag {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.adf-form-section-add-device-flag__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.adf-form-section-add-device-flag__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.adf-form-section-add-device-flag__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.adf-field-add-device-flag {
margin-bottom: 12px;
}
.adf-field-last-add-device-flag {
margin-bottom: 0 !important;
}
.adf-label-add-device-flag {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.adf-input-add-device-flag, .adf-select-add-device-flag, .adf-select-btn-add-device-flag {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.adf-input-add-device-flag::placeholder, .adf-search-input-add-device-flag::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.adf-input-add-device-flag:focus, .adf-select-add-device-flag:focus, .adf-select-btn-add-device-flag.show, .adf-select-btn-add-device-flag:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.adf-select-wrap-add-device-flag {
width: 100%;
}
.adf-select-btn-add-device-flag {
text-align: left;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 0 12px;
}
.adf-select-btn-add-device-flag::after {
margin-left: auto !important;
flex-shrink: 0;
}
.adf-placeholder-add-device-flag {
opacity: 0.45;
font-size: 12px;
}
.adf-dropdown-menu-add-device-flag {
width: 100%;
max-height: 330px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.adf-search-li-add-device-flag {
position: relative;
padding: 4px 6px;
margin-bottom: 4px;
}
.adf-search-li-add-device-flag:hover, .adf-no-result-li-add-device-flag:hover {
background-color: transparent !important;
}
.adf-search-icon-add-device-flag {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.4;
font-size: 11px;
pointer-events: none;
}
.adf-search-input-add-device-flag {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 6px;
background-color: color-mix(in srgb, var(--input--background) 80%, transparent);
color: var(--primary--body--color);
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
transition: border-color 0.15s ease;
}
.adf-search-input-add-device-flag:focus {
border-color: color-mix(in srgb, var(--secondary--color) 50%, transparent);
}
.adf-brand-item-add-device-flag {
padding: 0;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.adf-brand-link-add-device-flag {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
color: inherit;
text-decoration: none;
}
.adf-brand-item-add-device-flag:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.adf-no-result-li-add-device-flag {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.6;
pointer-events: none;
}
.adf-no-result-li-add-device-flag i {
color: #e74c3c;
opacity: 1;
}
.adf-information-add-device-flag {
padding: 9px 10px;
font-size: 12.5px;
margin-bottom: 10px;
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 13%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 76%, var(--body--background));
opacity: 0.78;
}
.adf-array-row-add-device-flag {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 8px;
align-items: center;
}
.adf-array-input-wrap-add-device-flag {
position: relative;
min-width: 0;
}
.adf-array-input-add-device-flag {
padding-right: 34px;
}
.adf-array-clear-add-device-flag {
position: absolute;
top: 53%;
right: 4px;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.55;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 11px;
line-height: 1;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.adf-array-clear-add-device-flag:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.adf-array-delete-add-device-flag {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.adf-array-delete-add-device-flag:hover {
transform: translateY(-1px);
opacity: 1;
color: #dc3545;
}
.adf-array-clear-add-device-flag:focus, .adf-array-clear-add-device-flag:active, .adf-array-delete-add-device-flag:focus, .adf-array-delete-add-device-flag:active, .adf-add-array-add-device-flag:focus, .adf-add-array-add-device-flag:active {
outline: none;
box-shadow: none;
}
.adf-add-array-add-device-flag {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.adf-add-array-add-device-flag:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.adf-modal-footer-add-device-flag {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 0 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--body--background) 96%, transparent) 28%, var(--body--background));
}
.adf-action-btn-add-device-flag {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.adf-action-btn-add-device-flag:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.adf-action-btn-add-device-flag--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
@media (max-width: 722px) {
.adf-modal-footer-add-device-flag {
flex-direction: column;
align-items: stretch;
}
.adf-action-btn-add-device-flag {
width: 100%;
}
}
@media (max-width: 576px) {
.adf-modal-body-add-device-flag {
padding: 12px 12px 0;
}
.adf-form-section-add-device-flag {
padding: 14px;
}
.adf-array-row-add-device-flag {
grid-template-columns: minmax(0, 1fr) 36px;
}
}
.adf-array-row-add-device-flag.adf-array-row-regex-device-flag {
grid-template-columns: minmax(0, 1fr) 38px 38px;
}
.adf-regex-toggle-device-flag {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 12px;
font-weight: 700;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.adf-regex-toggle-device-flag:hover {
transform: translateY(-1px);
opacity: 1;
}
.adf-regex-toggle-device-flag.active {
background-color: var(--secondary--color);
border-color: transparent;
color: #ffffff;
opacity: 1;
}
.adf-regex-toggle-device-flag:focus, .adf-regex-toggle-device-flag:active {
outline: none;
box-shadow: none;
}
.adf-regex-hint-device-flag {
display: block;
margin-top: 4px;
font-size: 11px;
color: #dc3545;
}
@media (max-width: 576px) {
.adf-array-row-add-device-flag.adf-array-row-regex-device-flag {
grid-template-columns: minmax(0, 1fr) 36px 36px;
}
}
.adf-regex-capture-hint-device-flag {
display: block;
margin-top: 4px;
font-size: 11px;
color: color-mix(in srgb, var(--primary--body--color) 65%, transparent);
}
.adf-regex-capture-hint-device-flag code {
padding: 1px 5px;
border-radius: 4px;
background-color: color-mix(in srgb, var(--secondary--color) 16%, transparent);
color: var(--secondary--color);
font-family: 'Consolas', 'Courier New', monospace;
font-weight: 700;
}
.adf-modal-content-add-device-flag {
max-height: calc(100vh - 3rem);
}
.adf-regex-test-device-flag {
margin-top: 14px;
}
.adf-regex-test-toggle-device-flag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: transparent;
color: var(--secondary--color);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.adf-regex-test-toggle-device-flag:hover, .adf-regex-test-toggle-device-flag.active {
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
border-style: solid;
}
.adf-regex-test-panel-device-flag {
margin-top: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 55%, var(--body--background));
}
.adf-regex-test-input-device-flag {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
padding: 8px 10px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 12px;
line-height: 1.55;
min-height: 62px;
max-height: 120px;
resize: vertical;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.adf-regex-test-input-device-flag::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-family: inherit;
font-size: 12px;
}
.adf-regex-test-input-device-flag:focus {
outline: none;
color: var(--primary--body--color);
background-color: var(--input--background);
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.adf-regex-test-result-device-flag {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 9px;
}
.adf-regex-test-status-device-flag {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 700;
color: #dc3545;
}
.adf-regex-test-status-device-flag.ok {
color: #1a9e5f;
}
.adf-regex-test-log-device-flag {
max-height: 108px;
overflow: auto;
padding: 9px 11px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 72%, transparent);
font-family: 'Consolas', 'Courier New', monospace;
font-size: 11.5px;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-all;
}
.adf-regex-test-log-device-flag .hit {
border-radius: 3px;
padding: 1px 2px;
background-color: color-mix(in srgb, var(--secondary--color) 34%, transparent);
color: var(--primary--body--color);
font-weight: 700;
}
.adf-regex-test-rows-device-flag {
list-style: none;
margin: 0;
padding: 0;
max-height: 96px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 5px;
}
.adf-regex-test-rows-device-flag li {
display: flex;
align-items: baseline;
gap: 7px;
font-size: 11.5px;
color: #1a9e5f;
}
.adf-regex-test-rows-device-flag li.fail {
color: #dc3545;
}
.adf-regex-test-rows-device-flag code {
padding: 1px 5px;
border-radius: 4px;
background-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 85%, transparent);
font-family: 'Consolas', 'Courier New', monospace;
word-break: break-all;
}
.adf-regex-test-captures-device-flag {
color: color-mix(in srgb, var(--primary--body--color) 62%, transparent);
font-family: 'Consolas', 'Courier New', monospace;
word-break: break-all;
}
.adf-regex-test-log-device-flag::-webkit-scrollbar, .adf-regex-test-rows-device-flag::-webkit-scrollbar, .adf-regex-test-input-device-flag::-webkit-scrollbar {
width: 4px;
}
.adf-regex-test-log-device-flag::-webkit-scrollbar-thumb, .adf-regex-test-rows-device-flag::-webkit-scrollbar-thumb, .adf-regex-test-input-device-flag::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.adf-regex-test-preview-device-flag {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed color-mix(in srgb, var(--primary--body--color) 16%, transparent);
display: flex;
flex-direction: column;
gap: 6px;
}
.adf-regex-test-preview-label-device-flag {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: color-mix(in srgb, var(--primary--body--color) 55%, transparent);
}
.adf-regex-test-preview-text-device-flag {
padding: 9px 11px;
border-left: 3px solid var(--secondary--color);
border-radius: 0 8px 8px 0;
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.5;
word-break: break-word;
}
.adf-select-btn-add-device-flag.is-invalid {
border-color: #dc3545 !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, #dc3545 13%, transparent);
}
.adf-split-add-device-flag {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.adf-split-col-add-device-flag {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
@media (max-width: 991.98px) {
.adf-split-add-device-flag {
grid-template-columns: minmax(0, 1fr);
}
}
}
/* ===== admin-components/dwh-base-modals/add-device-flag-modal/device-flag-modal/device-flag-modal.component.css (global) ===== */
.modal-fullscreen {
height: auto !important;
}
/* ===== admin-components/dwh-base-modals/add-device-flag-modal/device-flag-modal/device-flag-modal.component.css (scoped) ===== */
app-device-flag-modal {
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
border-bottom: none;
background-color: var(--body--background);
}
.label-header {
color: var(--primary--body--color);
}
.header-bottom {
border-bottom: 1px solid var(--primary--body--color);
}
.modal-body {
padding: 0px;
}
}
/* ===== admin-components/dwh-base-modals/add-device-flag-modal/device-flag-modal/edit-device-flag-modal/edit-device-flag-modal.component.css (global) ===== */
.dark-theme .edf-modal-content-edit-device-flag, .darkBlue-theme .edf-modal-content-edit-device-flag {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .edf-widget-header-edit-device-flag, .darkBlue-theme .edf-widget-header-edit-device-flag {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .edf-form-section-edit-device-flag {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .edf-form-section-edit-device-flag {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .edf-form-section-edit-device-flag__head, .darkBlue-theme .edf-form-section-edit-device-flag__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .edf-input-edit-device-flag, .darkBlue-theme .edf-input-edit-device-flag, .dark-theme .edf-select-edit-device-flag, .darkBlue-theme .edf-select-edit-device-flag, .dark-theme .edf-array-delete-edit-device-flag, .darkBlue-theme .edf-array-delete-edit-device-flag {
border: none !important;
}
.dark-theme .edf-array-delete-edit-device-flag, .darkBlue-theme .edf-array-delete-edit-device-flag, .dark-theme .edf-information-edit-device-flag, .darkBlue-theme .edf-information-edit-device-flag {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme .edf-modal-content-edit-device-flag {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .edf-widget-header-edit-device-flag {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .edf-form-section-edit-device-flag {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .edf-input-edit-device-flag, .lightBlue-theme .edf-select-edit-device-flag, .lightBlue-theme .edf-array-delete-edit-device-flag {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .edf-information-edit-device-flag {
border: none;
background-color: #ffffff;
}
/* ===== admin-components/dwh-base-modals/add-device-flag-modal/device-flag-modal/edit-device-flag-modal/edit-device-flag-modal.component.css (scoped) ===== */
app-edit-device-flag-modal {
.edf-modal-content-edit-device-flag {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: hidden;
}
.edf-form-edit-device-flag {
min-height: 100%;
}
.edf-widget-shell-edit-device-flag {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.edf-widget-header-edit-device-flag {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.edf-widget-title-edit-device-flag {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.edf-header-icon-edit-device-flag {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.edf-title-text-edit-device-flag {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.edf-widget-close-edit-device-flag {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.edf-widget-close-edit-device-flag:hover {
transform: translateY(-1px);
opacity: 1;
}
.edf-widget-close-edit-device-flag:focus, .edf-widget-close-edit-device-flag:active {
outline: none !important;
box-shadow: none !important;
}
.edf-modal-body-edit-device-flag {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.edf-modal-body-edit-device-flag::-webkit-scrollbar {
width: 4px;
}
.edf-modal-body-edit-device-flag::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.edf-form-section-edit-device-flag {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.edf-form-section-edit-device-flag__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.edf-form-section-edit-device-flag__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.edf-form-section-edit-device-flag__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.edf-field-edit-device-flag {
margin-bottom: 12px;
}
.edf-field-last-edit-device-flag {
margin-bottom: 0 !important;
}
.edf-label-edit-device-flag {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.edf-input-edit-device-flag, .edf-select-edit-device-flag {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.edf-input-edit-device-flag::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.edf-input-edit-device-flag:focus, .edf-select-edit-device-flag:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.edf-select-wrap-edit-device-flag {
width: 100%;
}
.edf-information-edit-device-flag {
padding: 9px 10px;
font-size: 12.5px;
margin-bottom: 10px;
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 13%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 76%, var(--body--background));
opacity: 0.78;
}
.edf-array-row-edit-device-flag {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 8px;
align-items: center;
}
.edf-array-input-wrap-edit-device-flag {
position: relative;
min-width: 0;
}
.edf-array-input-edit-device-flag {
padding-right: 34px;
}
.edf-array-clear-edit-device-flag {
position: absolute;
top: 53%;
right: 4px;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.55;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 11px;
line-height: 1;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.edf-array-clear-edit-device-flag:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.edf-array-delete-edit-device-flag {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.edf-array-delete-edit-device-flag:hover {
transform: translateY(-1px);
opacity: 1;
color: #dc3545;
}
.edf-array-clear-edit-device-flag:focus, .edf-array-clear-edit-device-flag:active, .edf-array-delete-edit-device-flag:focus, .edf-array-delete-edit-device-flag:active, .edf-add-array-edit-device-flag:focus, .edf-add-array-edit-device-flag:active {
outline: none;
box-shadow: none;
}
.edf-add-array-edit-device-flag {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.edf-add-array-edit-device-flag:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.edf-modal-footer-edit-device-flag {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 16px 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--body--background) 96%, transparent) 28%,
var(--body--background));
}
.edf-action-btn-edit-device-flag {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.edf-action-btn-edit-device-flag:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
@media (max-width: 722px) {
.edf-modal-footer-edit-device-flag {
flex-direction: column;
align-items: stretch;
}
.edf-action-btn-edit-device-flag {
width: 100%;
}
}
@media (max-width: 576px) {
.edf-modal-body-edit-device-flag {
padding: 12px 12px 0;
}
.edf-form-section-edit-device-flag {
padding: 14px;
}
.edf-array-row-edit-device-flag {
grid-template-columns: minmax(0, 1fr) 36px;
}
}
.edf-array-row-edit-device-flag.edf-array-row-regex-device-flag {
grid-template-columns: minmax(0, 1fr) 38px 38px;
}
.edf-regex-toggle-device-flag {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 12px;
font-weight: 700;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.edf-regex-toggle-device-flag:hover {
transform: translateY(-1px);
opacity: 1;
}
.edf-regex-toggle-device-flag.active {
background-color: var(--secondary--color);
border-color: transparent;
color: #ffffff;
opacity: 1;
}
.edf-regex-toggle-device-flag:focus, .edf-regex-toggle-device-flag:active {
outline: none;
box-shadow: none;
}
.edf-regex-hint-device-flag {
display: block;
margin-top: 4px;
font-size: 11px;
color: #dc3545;
}
@media (max-width: 576px) {
.edf-array-row-edit-device-flag.edf-array-row-regex-device-flag {
grid-template-columns: minmax(0, 1fr) 36px 36px;
}
}
.edf-regex-capture-hint-device-flag {
display: block;
margin-top: 4px;
font-size: 11px;
color: color-mix(in srgb, var(--primary--body--color) 65%, transparent);
}
.edf-regex-capture-hint-device-flag code {
padding: 1px 5px;
border-radius: 4px;
background-color: color-mix(in srgb, var(--secondary--color) 16%, transparent);
color: var(--secondary--color);
font-family: 'Consolas', 'Courier New', monospace;
font-weight: 700;
}
.edf-modal-content-edit-device-flag {
max-height: calc(100vh - 3rem);
}
.edf-regex-test-device-flag {
margin-top: 14px;
}
.edf-regex-test-toggle-device-flag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: transparent;
color: var(--secondary--color);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.edf-regex-test-toggle-device-flag:hover, .edf-regex-test-toggle-device-flag.active {
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
border-style: solid;
}
.edf-regex-test-panel-device-flag {
margin-top: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 55%, var(--body--background));
}
.edf-regex-test-input-device-flag {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
padding: 8px 10px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 12px;
line-height: 1.55;
min-height: 62px;
max-height: 120px;
resize: vertical;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.edf-regex-test-input-device-flag::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-family: inherit;
font-size: 12px;
}
.edf-regex-test-input-device-flag:focus {
outline: none;
color: var(--primary--body--color);
background-color: var(--input--background);
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.edf-regex-test-result-device-flag {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 9px;
}
.edf-regex-test-status-device-flag {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 700;
color: #dc3545;
}
.edf-regex-test-status-device-flag.ok {
color: #1a9e5f;
}
.edf-regex-test-log-device-flag {
max-height: 108px;
overflow: auto;
padding: 9px 11px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 72%, transparent);
font-family: 'Consolas', 'Courier New', monospace;
font-size: 11.5px;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-all;
}
.edf-regex-test-log-device-flag .hit {
border-radius: 3px;
padding: 1px 2px;
background-color: color-mix(in srgb, var(--secondary--color) 34%, transparent);
color: var(--primary--body--color);
font-weight: 700;
}
.edf-regex-test-rows-device-flag {
list-style: none;
margin: 0;
padding: 0;
max-height: 96px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 5px;
}
.edf-regex-test-rows-device-flag li {
display: flex;
align-items: baseline;
gap: 7px;
font-size: 11.5px;
color: #1a9e5f;
}
.edf-regex-test-rows-device-flag li.fail {
color: #dc3545;
}
.edf-regex-test-rows-device-flag code {
padding: 1px 5px;
border-radius: 4px;
background-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 85%, transparent);
font-family: 'Consolas', 'Courier New', monospace;
word-break: break-all;
}
.edf-regex-test-captures-device-flag {
color: color-mix(in srgb, var(--primary--body--color) 62%, transparent);
font-family: 'Consolas', 'Courier New', monospace;
word-break: break-all;
}
.edf-regex-test-log-device-flag::-webkit-scrollbar, .edf-regex-test-rows-device-flag::-webkit-scrollbar, .edf-regex-test-input-device-flag::-webkit-scrollbar {
width: 4px;
}
.edf-regex-test-log-device-flag::-webkit-scrollbar-thumb, .edf-regex-test-rows-device-flag::-webkit-scrollbar-thumb, .edf-regex-test-input-device-flag::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.edf-regex-test-preview-device-flag {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed color-mix(in srgb, var(--primary--body--color) 16%, transparent);
display: flex;
flex-direction: column;
gap: 6px;
}
.edf-regex-test-preview-label-device-flag {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: color-mix(in srgb, var(--primary--body--color) 55%, transparent);
}
.edf-regex-test-preview-text-device-flag {
padding: 9px 11px;
border-left: 3px solid var(--secondary--color);
border-radius: 0 8px 8px 0;
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.5;
word-break: break-word;
}
.edf-split-edit-device-flag {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.edf-split-col-edit-device-flag {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
@media (max-width: 991.98px) {
.edf-split-edit-device-flag {
grid-template-columns: minmax(0, 1fr);
}
}
}
/* ===== admin-components/dwh-base-modals/add-matched-data-modal/add-matched-data-modal.component.css (global) ===== */
.dark-theme .amd-modal-content-add-matched-data, .darkBlue-theme .amd-modal-content-add-matched-data {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.dark-theme .amd-widget-header-add-matched-data, .darkBlue-theme .amd-widget-header-add-matched-data {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .amd-form-section-add-matched-data {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .amd-form-section-add-matched-data {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .amd-form-section-add-matched-data__head, .darkBlue-theme .amd-form-section-add-matched-data__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .amd-input-add-matched-data, .darkBlue-theme .amd-input-add-matched-data, .dark-theme .amd-select-btn-add-matched-data, .darkBlue-theme .amd-select-btn-add-matched-data, .dark-theme .amd-search-input-add-matched-data, .darkBlue-theme .amd-search-input-add-matched-data, .dark-theme .amd-filter-delete-add-matched-data, .darkBlue-theme .amd-filter-delete-add-matched-data {
border: none !important;
}
.dark-theme .amd-filter-delete-add-matched-data, .darkBlue-theme .amd-filter-delete-add-matched-data {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme .amd-dropdown-menu-add-matched-data, .darkBlue-theme .amd-dropdown-menu-add-matched-data {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .amd-brand-item-add-matched-data, .darkBlue-theme .amd-brand-item-add-matched-data {
color: rgba(255, 255, 255, 0.88);
}
.lightBlue-theme .amd-modal-content-add-matched-data {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .amd-widget-header-add-matched-data {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .amd-form-section-add-matched-data {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .amd-input-add-matched-data, .lightBlue-theme .amd-select-btn-add-matched-data, .lightBlue-theme .amd-search-input-add-matched-data, .lightBlue-theme .amd-filter-delete-add-matched-data {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .amd-dropdown-menu-add-matched-data {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
/* ===== admin-components/dwh-base-modals/add-matched-data-modal/add-matched-data-modal.component.css (scoped) ===== */
app-add-matched-data-modal {
.amd-modal-content-add-matched-data {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: visible !important;
}
.amd-form-add-matched-data {
min-height: 100%;
}
.amd-widget-shell-add-matched-data {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: visible;
}
.amd-widget-header-add-matched-data {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-radius: 14px !important;
}
.amd-widget-title-add-matched-data {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.amd-header-icon-add-matched-data {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.amd-title-text-add-matched-data {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.amd-widget-close-add-matched-data {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.amd-widget-close-add-matched-data:hover {
transform: translateY(-1px);
opacity: 1;
}
.amd-widget-close-add-matched-data:focus, .amd-widget-close-add-matched-data:active {
outline: none !important;
box-shadow: none !important;
}
.amd-modal-body-add-matched-data {
flex: 1;
overflow: visible;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.amd-modal-body-add-matched-data::-webkit-scrollbar, .amd-dropdown-menu-add-matched-data::-webkit-scrollbar {
width: 4px;
}
.amd-modal-body-add-matched-data::-webkit-scrollbar-thumb, .amd-dropdown-menu-add-matched-data::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.amd-form-section-add-matched-data {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
overflow: visible;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.amd-form-section-add-matched-data__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.amd-form-section-add-matched-data__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.amd-form-section-add-matched-data__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.amd-field-add-matched-data {
margin-bottom: 12px;
}
.amd-field-last-add-matched-data {
margin-bottom: 0 !important;
}
.amd-label-add-matched-data {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.amd-input-add-matched-data, .amd-select-btn-add-matched-data, .amd-search-input-add-matched-data {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.amd-input-add-matched-data::placeholder, .amd-search-input-add-matched-data::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.amd-input-add-matched-data:focus, .amd-select-btn-add-matched-data.show, .amd-select-btn-add-matched-data:focus, .amd-search-input-add-matched-data:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.amd-select-wrap-add-matched-data {
width: 100%;
}
.amd-select-btn-add-matched-data {
text-align: left;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 0 12px;
}
.amd-select-btn-add-matched-data::after {
margin-left: auto !important;
flex-shrink: 0;
}
.amd-placeholder-add-matched-data {
opacity: 0.45;
font-size: 12px;
}
.amd-dropdown-menu-add-matched-data {
width: 100%;
max-height: 330px;
overflow-y: auto;
z-index: 1065;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.amd-dropdown-menu-add-matched-data--compact {
max-height: 250px;
}
.amd-brand-item-add-matched-data {
padding: 0;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.amd-brand-link-add-matched-data {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
color: inherit;
text-decoration: none;
}
.amd-brand-item-add-matched-data:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.amd-search-li-add-matched-data {
position: relative;
padding: 4px 6px;
margin-bottom: 4px;
}
.amd-search-li-add-matched-data:hover, .amd-no-result-li-add-matched-data:hover {
background-color: transparent !important;
}
.amd-search-icon-add-matched-data {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.4;
font-size: 11px;
pointer-events: none;
}
.amd-search-input-add-matched-data {
height: 32px;
padding: 0 10px 0 28px;
box-shadow: none;
}
.amd-no-result-li-add-matched-data {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.6;
pointer-events: none;
}
.amd-no-result-li-add-matched-data i {
color: #e74c3c;
opacity: 1;
}
.amd-filter-row-add-matched-data {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(150px, 0.75fr) 38px;
gap: 8px;
align-items: center;
}
.amd-filter-input-wrap-add-matched-data {
position: relative;
min-width: 0;
}
.amd-filter-brand-add-matched-data {
min-width: 0;
}
.amd-filter-input-add-matched-data {
padding-right: 34px;
}
.amd-filter-clear-add-matched-data {
position: absolute;
top: 54%;
right: 4px;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.55;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 11px;
line-height: 1;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.amd-filter-clear-add-matched-data:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.amd-filter-delete-add-matched-data {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.amd-filter-delete-add-matched-data:hover {
transform: translateY(-1px);
opacity: 1;
color: #dc3545;
}
.amd-filter-clear-add-matched-data:focus, .amd-filter-clear-add-matched-data:active, .amd-filter-delete-add-matched-data:focus, .amd-filter-delete-add-matched-data:active, .amd-add-filter-add-matched-data:focus, .amd-add-filter-add-matched-data:active {
outline: none;
box-shadow: none;
}
.amd-add-filter-add-matched-data {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.amd-add-filter-add-matched-data:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.amd-modal-footer-add-matched-data {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 0 16px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
background: linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--body--background) 96%, transparent) 28%,
var(--body--background));
}
.amd-action-btn-add-matched-data {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.amd-action-btn-add-matched-data:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.amd-action-btn-add-matched-data--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
.amd-input-add-matched-data:-webkit-autofill, .amd-input-add-matched-data:-webkit-autofill:hover, .amd-input-add-matched-data:-webkit-autofill:focus, .amd-input-add-matched-data:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: var(--primary--body--color);
transition: background-color 5000s ease-in-out 0s;
font-size: 13px;
}
@media (max-width: 722px) {
.amd-filter-row-add-matched-data {
grid-template-columns: minmax(0, 1fr) 38px;
}
.amd-filter-brand-add-matched-data {
grid-column: 1 / -1;
}
.amd-modal-footer-add-matched-data {
flex-direction: column;
align-items: stretch;
}
.amd-action-btn-add-matched-data {
width: 100%;
}
}
@media (max-width: 576px) {
.amd-modal-body-add-matched-data {
padding: 12px 12px 0;
}
.amd-form-section-add-matched-data {
padding: 14px;
}
.amd-filter-row-add-matched-data {
grid-template-columns: minmax(0, 1fr) 36px;
}
}
}
/* ===== admin-components/dwh-base-modals/add-matched-data-modal/matched-data-modal/edit-matched-data-modal/edit-matched-data-modal.component.css (global) ===== */
.dark-theme .emd-modal-content-edit-matched-data, .darkBlue-theme .emd-modal-content-edit-matched-data {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.dark-theme .emd-widget-header-edit-matched-data, .darkBlue-theme .emd-widget-header-edit-matched-data {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .emd-form-section-edit-matched-data {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .emd-form-section-edit-matched-data {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .emd-form-section-edit-matched-data__head, .darkBlue-theme .emd-form-section-edit-matched-data__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .emd-input-edit-matched-data, .darkBlue-theme .emd-input-edit-matched-data, .dark-theme .emd-select-btn-edit-matched-data, .darkBlue-theme .emd-select-btn-edit-matched-data {
border: none !important;
}
.dark-theme .emd-dropdown-menu-edit-matched-data, .darkBlue-theme .emd-dropdown-menu-edit-matched-data {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .emd-brand-item-edit-matched-data, .darkBlue-theme .emd-brand-item-edit-matched-data {
color: rgba(255, 255, 255, 0.88);
}
.lightBlue-theme .emd-modal-content-edit-matched-data {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .emd-widget-header-edit-matched-data {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .emd-form-section-edit-matched-data {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .emd-input-edit-matched-data, .lightBlue-theme .emd-select-btn-edit-matched-data {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .emd-dropdown-menu-edit-matched-data {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
/* ===== admin-components/dwh-base-modals/add-matched-data-modal/matched-data-modal/edit-matched-data-modal/edit-matched-data-modal.component.css (scoped) ===== */
app-edit-matched-data-modal {
.emd-modal-content-edit-matched-data {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: visible !important;
}
.emd-form-edit-matched-data {
min-height: 100%;
}
.emd-widget-shell-edit-matched-data {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: visible;
}
.emd-widget-header-edit-matched-data {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-radius: 14px !important;
}
.emd-widget-title-edit-matched-data {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.emd-header-icon-edit-matched-data {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.emd-title-text-edit-matched-data {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.emd-widget-close-edit-matched-data {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.emd-widget-close-edit-matched-data:hover {
transform: translateY(-1px);
opacity: 1;
}
.emd-widget-close-edit-matched-data:focus, .emd-widget-close-edit-matched-data:active {
outline: none !important;
box-shadow: none !important;
}
.emd-modal-body-edit-matched-data {
flex: 1;
overflow: visible;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.emd-dropdown-menu-edit-matched-data::-webkit-scrollbar {
width: 4px;
}
.emd-dropdown-menu-edit-matched-data::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.emd-form-section-edit-matched-data {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
overflow: visible;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.emd-form-section-edit-matched-data__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.emd-form-section-edit-matched-data__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.emd-form-section-edit-matched-data__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.emd-field-edit-matched-data {
margin-bottom: 12px;
}
.emd-field-last-edit-matched-data {
margin-bottom: 0 !important;
}
.emd-label-edit-matched-data {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.emd-input-edit-matched-data, .emd-select-btn-edit-matched-data {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.emd-input-edit-matched-data {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.emd-input-edit-matched-data::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.emd-input-edit-matched-data:focus, .emd-select-btn-edit-matched-data.show, .emd-select-btn-edit-matched-data:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.emd-select-btn-edit-matched-data {
text-align: left;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 0 12px;
}
.emd-select-btn-edit-matched-data::after {
margin-left: auto !important;
flex-shrink: 0;
}
.emd-placeholder-edit-matched-data {
opacity: 0.45;
font-size: 12px;
}
.emd-dropdown-menu-edit-matched-data {
width: 100%;
max-height: 330px;
overflow-y: auto;
z-index: 1065;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.emd-brand-item-edit-matched-data {
padding: 0;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.emd-device-placeholder-edit-matched-data {
padding: 8px 10px;
}
.emd-disabled-brand-edit-matched-data {
background-color: color-mix(in srgb, var(--primary--body--color) 12%, transparent);
cursor: not-allowed;
pointer-events: none;
}
.emd-brand-link-edit-matched-data {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
color: inherit;
text-decoration: none;
}
.emd-brand-item-edit-matched-data:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.emd-filter-row-edit-matched-data {
display: grid;
grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1fr);
gap: 8px;
align-items: center;
}
.emd-filter-brand-edit-matched-data, .emd-filter-input-wrap-edit-matched-data {
min-width: 0;
}
.emd-add-filter-edit-matched-data {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.emd-add-filter-edit-matched-data:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.emd-add-filter-edit-matched-data:focus, .emd-add-filter-edit-matched-data:active {
outline: none;
box-shadow: none;
}
.emd-modal-footer-edit-matched-data {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 0 16px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
background: linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--body--background) 96%, transparent) 28%,
var(--body--background));
}
.emd-action-btn-edit-matched-data {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.emd-action-btn-edit-matched-data:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.emd-action-btn-edit-matched-data--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
.emd-input-edit-matched-data:-webkit-autofill, .emd-input-edit-matched-data:-webkit-autofill:hover, .emd-input-edit-matched-data:-webkit-autofill:focus, .emd-input-edit-matched-data:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: var(--primary--body--color);
transition: background-color 5000s ease-in-out 0s;
font-size: 13px;
}
@media (max-width: 576px) {
.emd-modal-body-edit-matched-data {
padding: 12px 12px 0;
}
.emd-form-section-edit-matched-data {
padding: 14px;
}
}
}
/* ===== admin-components/dwh-base-modals/add-matched-data-modal/matched-data-modal/matched-data-modal.component.css (scoped) ===== */
app-matched-data-modal {
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
border-bottom: var(--cart--border);
background-color: var(--body--background);
}
.label-header {
color: var(--primary--body--color);
}
.modal-body {
padding: 0px;
}
.header-bottom {
border-bottom: 1px solid var(--primary--body--color);
}
}
/* ===== admin-components/dwh-base-modals/add-report-store-modal/add-report-store-modal.component.css (global) ===== */
.dark-theme .ars-modal-content-add-report-store, .darkBlue-theme .ars-modal-content-add-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.dark-theme .ars-widget-header-add-report-store, .darkBlue-theme .ars-widget-header-add-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
.darkBlue-theme .ars-form-section-add-report-store {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.dark-theme .dropdown-menu-use-template, .darkBlue-theme .dropdown-menu-use-template {
border: none;
background-color: var(--body--background);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .dropdown-menu-use-template .dropdown-item, .darkBlue-theme .dropdown-menu-use-template .dropdown-item {
color: rgba(255, 255, 255, 0.88);
}
.dark-theme .dropdown-menu-use-template .dropdown-item:hover, .dark-theme .dropdown-menu-use-template .dropdown-item:focus, .darkBlue-theme .dropdown-menu-use-template .dropdown-item:hover, .darkBlue-theme .dropdown-menu-use-template .dropdown-item:focus {
background-color: var(--secondary--color) !important;
color: #fff;
}
.lightBlue-theme .dropdown-menu-use-template {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .dropdown-menu-use-template .dropdown-item:hover, .lightBlue-theme .dropdown-menu-use-template .dropdown-item:focus {
background-color: #50787b !important;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
}
to {
opacity: 1;
max-height: 500px;
margin-top: 6px;
padding-top: 12px;
padding-bottom: 12px;
}
}
.dark-theme .ars-filter-advanced-row-add-report-store, .darkBlue-theme .ars-filter-advanced-row-add-report-store {
background-color: rgba(60, 130, 255, 0.12);
border-color: rgba(60, 130, 255, 0.25);
}
.dark-theme .ars-filter-separator-add-report-store, .darkBlue-theme .ars-filter-separator-add-report-store {
opacity: 0.6;
color: rgba(255, 255, 255, 0.85);
}
.dark-theme .ars-filter-row-add-report-store, .darkBlue-theme .ars-filter-row-add-report-store {
background-color: rgba(60, 130, 255, 0.08);
border-color: rgba(60, 130, 255, 0.15);
}
.dark-theme .ars-filter-row-add-report-store:hover, .darkBlue-theme .ars-filter-row-add-report-store:hover {
background-color: rgba(60, 130, 255, 0.14);
border-color: rgba(60, 130, 255, 0.28);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}
.dark-theme .ars-filter-case-add-report-store, .darkBlue-theme .ars-filter-case-add-report-store, .dark-theme .ars-filter-delete-add-report-store, .darkBlue-theme .ars-filter-delete-add-report-store {
background-color: color-mix(in srgb, var(--input--background) 75%, white 2%);
border-color: rgba(255, 255, 255, 0.08);
}
.dark-theme .ars-add-filter-add-report-store, .darkBlue-theme .ars-add-filter-add-report-store {
border-color: rgba(60, 130, 255, 0.32);
background: linear-gradient(135deg, rgba(60, 130, 255, 0.12), rgba(255, 255, 255, 0.03));
}
.dark-theme .ars-add-filter-add-report-store:hover, .darkBlue-theme .ars-add-filter-add-report-store:hover {
border-color: rgba(60, 130, 255, 0.54);
background: linear-gradient(135deg, rgba(60, 130, 255, 0.18), rgba(255, 255, 255, 0.05));
box-shadow: 0 8px 24px rgba(60, 130, 255, 0.18);
}
.darkBlue-theme .ars-form-section-add-report-store__head {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .ars-form-section-add-report-store__head, .darkBlue-theme .ars-form-section-add-report-store__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .ars-input-add-report-store, .darkBlue-theme .ars-input-add-report-store, .dark-theme .ars-select-add-report-store, .darkBlue-theme .ars-select-add-report-store, .dark-theme .ars-select-btn-add-report-store, .darkBlue-theme .ars-select-btn-add-report-store, .dark-theme .ars-filter-delete-add-report-store, .darkBlue-theme .ars-filter-delete-add-report-store, .dark-theme .ars-filter-case-add-report-store, .darkBlue-theme .ars-filter-case-add-report-store {
border: none !important;
}
.dark-theme .ars-filter-delete-add-report-store, .darkBlue-theme .ars-filter-delete-add-report-store, .dark-theme .ars-filter-case-add-report-store, .darkBlue-theme .ars-filter-case-add-report-store {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme .ars-title-input-add-report-store, .darkBlue-theme .ars-title-input-add-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 90%, white 3%), color-mix(in srgb, var(--input--background) 99%, white 1%));
}
.dark-theme .ars-dropdown-menu-add-report-store, .darkBlue-theme .ars-dropdown-menu-add-report-store {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .ars-brand-item-add-report-store, .darkBlue-theme .ars-brand-item-add-report-store {
color: rgba(255, 255, 255, 0.88);
}
.lightBlue-theme .ars-modal-content-add-report-store {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .ars-widget-header-add-report-store {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .ars-form-section-add-report-store {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .ars-input-add-report-store, .lightBlue-theme .ars-select-add-report-store, .lightBlue-theme .ars-select-btn-add-report-store, .lightBlue-theme .ars-filter-delete-add-report-store, .lightBlue-theme .ars-filter-case-add-report-store {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .ars-dropdown-menu-add-report-store {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.dark-theme .filter-list {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.lightBlue-theme .filter-list {
box-shadow: none;
}
.darkBlue-theme .filter-list {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.lightBlue-theme .summary-chip {
background: rgba(80, 120, 123, 0.15);
}
.lightBlue-theme .summary-chip--op {
background: rgba(80, 120, 123, 0.28);
}
.dark-theme .summary-chip, .darkBlue-theme .summary-chip {
background: rgba(60, 130, 255, 0.16);
}
.dark-theme .summary-chip--op, .darkBlue-theme .summary-chip--op {
background: rgba(60, 130, 255, 0.3);
}
.dark-theme .connector-line, .darkBlue-theme .connector-line {
background: rgba(255, 255, 255, 0.10);
}
.lightBlue-theme .logic-select {
background-color: #ffffff !important;
color: var(--primary--body--color);
border: none !important;
}
.dark-theme .logic-select, .darkBlue-theme .logic-select {
background-color: var(--input--background);
border: none !important;
color: #fff;
}
.dark-theme .filter-missing-indicator, .darkBlue-theme .filter-missing-indicator {
background-color: rgba(255, 176, 32, 0.22);
color: #ffc857;
box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.35);
}
.dark-theme .choose_select_filter_modal, .darkBlue-theme .choose_select_filter_modal {
border: none !important;
}
.lightBlue-theme .choose_select_filter_modal {
border: none !important;
background-color: #ffffff !important;
}
.dark-theme .choose_select_filter_modal.is-invalid, .darkBlue-theme .choose_select_filter_modal.is-invalid, .lightBlue-theme .choose_select_filter_modal.is-invalid {
border: 1px solid #dc3545 !important;
box-shadow: var(--cart--box--shadow), 0 0 0 2px rgba(220, 53, 69, 0.16) !important;
}
.dark-theme .add-filter-cta, .darkBlue-theme .add-filter-cta {
border-color: color-mix(in srgb, var(--secondary--color) 32%, rgba(255, 255, 255, 0.08));
background: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color) 18%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--body--background) 96%, rgba(255, 255, 255, 0.02)));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.dark-theme .add-filter-cta__label, .darkBlue-theme .add-filter-cta__label {
color: rgba(255, 255, 255, 0.92);
}
.lightBlue-theme .add-filter-cta {
border: none;
background: linear-gradient(135deg, #ffffff, #f4fbfb);
box-shadow: 0 10px 24px rgba(44, 71, 74, 0.12);
}
.lightBlue-theme .add-filter-cta__icon {
background: #50787b;
}
/* ===== admin-components/dwh-base-modals/add-report-store-modal/add-report-store-modal.component.css (scoped) ===== */
app-add-report-store-modal {
.ars-modal-dialog-add-report-store {
margin: 1.2rem auto;
}
.ars-modal-content-add-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: visible !important;
}
.ars-form-add-report-store {
min-height: 100%;
}
.ars-widget-shell-add-report-store {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: visible;
}
.ars-widget-header-add-report-store {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
}
.ars-widget-title-add-report-store {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.ars-header-icon-add-report-store {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.ars-title-text-add-report-store {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.ars-widget-close-add-report-store {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.ars-widget-close-add-report-store:hover {
transform: translateY(-1px);
opacity: 1;
}
.ars-widget-close-add-report-store:focus, .ars-widget-close-add-report-store:active {
outline: none !important;
box-shadow: none !important;
}
.ars-modal-body-add-report-store {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px 18px 0;
min-height: 0;
}
.ars-modal-body-add-report-store:has(.dropdown-menu.show) {
overflow: visible;
}
.ars-modal-body-add-report-store::-webkit-scrollbar, .ars-dropdown-menu-add-report-store::-webkit-scrollbar {
width: 4px;
}
.ars-modal-body-add-report-store::-webkit-scrollbar-thumb, .ars-dropdown-menu-add-report-store::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.ars-form-section-add-report-store {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 18px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ars-form-section-add-report-store:hover {
box-shadow: var(--cart--box--shadow), 0 4px 12px color-mix(in srgb, var(--secondary--color) 8%, transparent);
}
.ars-form-section-add-report-store__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 90%, white 10%), color-mix(in srgb, var(--body--background) 96%, transparent));
}
.ars-form-section-add-report-store__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.ars-form-section-add-report-store__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.92;
letter-spacing: 0.01em;
}
.ars-field-add-report-store {
margin-bottom: 12px;
}
.ars-field-last-add-report-store {
margin-bottom: 0 !important;
}
.ars-label-add-report-store {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.ars-input-add-report-store, .ars-select-add-report-store, .ars-select-btn-add-report-store {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.15s ease;
}
.ars-input-add-report-store::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.ars-input-add-report-store:focus, .ars-select-add-report-store:focus, .ars-select-btn-add-report-store.show, .ars-select-btn-add-report-store:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.ars-select-wrap-add-report-store {
width: 100%;
}
.ars-title-input-add-report-store {
height: 38px;
padding: 0 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 96%, white 4%), var(--input--background));
}
.ars-title-input-add-report-store::placeholder {
font-weight: 500;
}
.ars-title-input-add-report-store:focus {
transform: none;
}
.ars-select-btn-add-report-store {
text-align: left;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 0 12px;
}
.ars-select-btn-add-report-store::after {
margin-left: auto !important;
flex-shrink: 0;
}
.ars-placeholder-add-report-store {
opacity: 0.45;
font-size: 12px;
}
.ars-dropdown-menu-add-report-store {
width: 100%;
max-height: 330px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.ars-brand-item-add-report-store {
padding: 0;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.ars-brand-link-add-report-store {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
color: inherit;
text-decoration: none;
}
.ars-brand-item-add-report-store:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.ars-filter-row-add-report-store {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
padding: 12px;
margin: 8px 0;
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 55%, transparent);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
transition: all 0.15s ease;
}
.ars-filter-row-add-report-store:hover {
background-color: color-mix(in srgb, var(--input--background) 70%, transparent);
border-color: color-mix(in srgb, var(--secondary--color) 20%, transparent);
box-shadow: 0 3px 10px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.ars-filter-row-add-report-store--last {
flex-wrap: wrap;
}
.ars-input-div {
position: relative;
min-width: 0;
flex: 1 1 160px;
}
.ars-filter-input-wrap-add-report-store {
position: relative;
min-width: 0;
flex: 1 1 160px;
display: flex;
align-items: center;
gap: 6px;
}
.ars-filter-number-label-add-report-store {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 6px;
background-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
color: var(--secondary--color);
font-size: 11.5px;
font-weight: 700;
flex-shrink: 0;
margin: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.ars-filter-input-add-report-store {
flex: 1;
min-width: 0;
height: 36px;
padding: 8px 32px 8px 10px;
}
.ars-filter-clear-add-report-store {
position: absolute;
top: 50%;
right: 8px;
width: 22px;
height: 22px;
transform: translateY(-50%);
border: none;
border-radius: 5px;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.5;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 12px;
line-height: 1;
transition: all 0.12s ease;
}
.ars-filter-clear-add-report-store:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 20%, transparent);
color: var(--secondary--color);
}
.ars-filter-logic-add-report-store, .ars-filter-operator-add-report-store {
flex: 0 1 140px;
min-width: 100px;
}
.ars-select-add-report-store {
width: 100%;
height: 36px;
padding: 7px 32px 7px 12px;
}
.ars-filter-case-add-report-store {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 10px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 85%, var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
flex-shrink: 0;
}
.ars-case-label-add-report-store {
position: relative;
margin: 0;
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12px;
line-height: 1;
cursor: default;
}
.ars-case-switch-add-report-store {
width: 32px;
height: 20px;
margin: 0;
flex-shrink: 0;
}
.ars-strikethrough-add-report-store::before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
width: 30px;
border-top: 1.5px solid;
border-color: inherit;
transform: rotate(-45deg);
}
.ars-filter-delete-add-report-store {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 85%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.75;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s ease;
font-size: 14px;
}
.ars-filter-delete-add-report-store:hover {
transform: translateY(-2px) scale(1.06);
opacity: 1;
color: #dc3545;
background-color: rgba(220, 53, 69, 0.14);
border-color: rgba(220, 53, 69, 0.32);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
}
.ars-filter-delete-add-report-store:active {
transform: translateY(0) scale(0.98);
}
.ars-filter-clear-add-report-store:focus, .ars-filter-clear-add-report-store:active, .ars-filter-delete-add-report-store:focus, .ars-filter-delete-add-report-store:active, .ars-add-filter-add-report-store:focus, .ars-add-filter-add-report-store:active {
outline: none;
box-shadow: none;
}
.ars-add-filter-add-report-store {
width: 100%;
min-height: 38px;
border: 2px dashed color-mix(in srgb, var(--secondary--color) 48%, transparent);
border-radius: 10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color) 10%, var(--input--background) 15%), color-mix(in srgb, var(--body--background) 88%, transparent));
color: var(--primary--body--color);
font-size: 13px;
font-weight: 650;
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.ars-add-filter-add-report-store:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--secondary--color) 68%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color) 16%, var(--input--background) 20%), color-mix(in srgb, var(--body--background) 82%, transparent));
box-shadow: 0 6px 16px color-mix(in srgb, var(--secondary--color) 16%, transparent);
}
.ars-add-filter-add-report-store:active {
transform: translateY(0);
}
.ars-modal-footer-add-report-store {
position: sticky;
bottom: 0;
z-index: 10;
padding: 14px 2px 18px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--body--background) 96%, transparent) 28%, var(--body--background));
}
.ars-action-btn-add-report-store {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ars-action-btn-add-report-store:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.ars-action-btn-add-report-store--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
.ars-filter-operator-add-report-store {
flex: 0 1 140px;
min-width: 100px;
position: relative;
}
.ars-filter-operator-add-report-store .dropdown {
width: 100%;
}
.ars-filter-operator-add-report-store .op-select-btn {
width: 100%;
height: 36px;
padding: 0 12px;
text-align: left;
display: flex;
align-items: center;
cursor: pointer;
}
.ars-filter-operator-add-report-store .op-select-btn::after {
margin-left: auto !important;
flex-shrink: 0;
}
.dropdown-menu-use-template {
min-width: 230px;
padding: 6px;
overflow: hidden;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
}
.dropdown-menu-use-template.show {
z-index: 2000 !important;
}
.dropdown-menu-use-template .dropdown-item {
min-height: 34px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 7px;
margin-bottom: 2px;
padding: 7px 10px;
cursor: pointer;
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.2;
white-space: nowrap;
transition: background-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.dropdown-menu-use-template .dropdown-item:last-child {
margin-bottom: 0;
}
.dropdown-menu-use-template .dropdown-item:hover, .dropdown-menu-use-template .dropdown-item:focus {
background-color: var(--secondary--color) !important;
color: #fff;
transform: translateX(2px);
}
.filter-clear-button {
color: var(--primary--body--color) !important;
cursor: pointer;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
transition: opacity 0.15s ease, color 0.15s ease;
opacity: 0.6;
}
.filter-clear-button:hover {
color: var(--secondary--color) !important;
opacity: 1;
}
.ars-filter-advanced-row-add-report-store {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px;
margin: 6px 0 0 0;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 10%, var(--input--background) 30%);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
animation: slideDown 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.ars-filter-between-input-wrap-add-report-store {
flex: 1 1 120px;
min-width: 0;
}
.ars-filter-between-input-wrap-add-report-store .ars-input-add-report-store {
font-size: 13px;
height: 34px;
padding: 7px 10px;
}
.ars-filter-separator-add-report-store {
flex: 0 0 auto;
text-align: center;
color: var(--primary--body--color);
opacity: 0.5;
font-weight: 700;
font-size: 16px;
line-height: 1;
padding: 0 4px;
}
.ars-filter-list-input-wrap-add-report-store {
width: 100%;
min-width: 0;
}
.ars-filter-list-input-wrap-add-report-store .ars-input-add-report-store {
font-size: 13px;
height: 34px;
padding: 7px 10px;
width: 100%;
}
.ars-filter-rule-card {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px;
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 35%, transparent);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
flex-wrap: wrap;
}
.ars-filter-index-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
color: var(--secondary--color);
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.ars-input-div {
position: relative;
min-width: 160px;
flex: 1 1 160px;
}
.ars-input-div .form-control {
height: 36px;
padding: 8px 32px 8px 10px;
}
.ars-contain-div {
flex: 0 1 115px;
min-width: 100px;
}
.ars-contain-div .dropdown {
width: 100%;
}
.ars-contain-div .op-select-btn {
height: 36px;
width: 100%;
padding: 7px 10px;
}
.ars-logic-div {
flex: 0 1 100px;
min-width: 80px;
}
.ars-logic-div .form-control {
height: 36px;
width: 100%;
padding: 7px 10px;
}
.ars-filter-case-add-report-store {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 10px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 85%, var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
flex-shrink: 0;
height: 36px;
}
.ars-case-label-add-report-store {
margin: 0;
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12px;
line-height: 1;
cursor: default;
position: relative;
}
.ars-remove-div {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-left: auto;
flex-shrink: 0;
}
.ars-remove-div svg {
cursor: pointer;
opacity: 0.6;
transition: opacity 0.15s ease, color 0.15s ease;
color: var(--primary--body--color);
}
.ars-remove-div svg:hover {
opacity: 1;
color: var(--secondary--color);
}
.filter-list {
display: flex;
flex-direction: column;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 6px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.filter-list-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-height: 24px;
margin: -30px 4px 6px 0;
}
.filter-toggle-all-btn {
width: 28px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 7px;
background-color: var(--input--background);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.filter-toggle-all-btn:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
opacity: 1;
}
.filter-remove-all-btn:hover {
border-color: rgba(255, 80, 80, 0.45);
color: rgb(255, 80, 80);
}
.filter-row {
margin: 0;
position: relative;
}
.filter-card {
position: relative;
padding: 10px 8px;
}
.filter-card-row {
min-height: 36px;
cursor: pointer;
position: relative;
}
.filter-card-row.filter-acc-hidden {
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.filter-card--collapsed {
background: transparent;
box-shadow: none;
}
.filter-card-row--between.filter-acc-visible, .filter-card-row--list.filter-acc-visible {
flex-wrap: nowrap !important;
gap: 5px !important;
}
.filter-card-row--between>.index-circle, .filter-card-row--list>.index-circle {
flex: 0 0 20px;
}
.filter-card-row--between>.log-input, .filter-card-row--list>.log-input {
width: 108px !important;
flex: 0 1 108px;
min-width: 92px;
}
.filter-card-row--between>div[style*="width:115px"] {
width: 115px !important;
flex: 0 0 115px;
}
.filter-card-row--between>div[style*="width:110px"] {
width: 78px !important;
flex: 0 0 78px;
}
.filter-card-row--between>div[style*="width:90px"] {
width: 62px !important;
flex: 0 0 62px;
}
.filter-card-row--between>div[style*="width:100px"] {
width: 74px !important;
flex: 0 0 74px;
}
.filter-card-row--between>div[style*="width:190px"] {
width: 128px !important;
flex: 0 1 128px;
min-width: 112px;
}
.filter-card-row--between>div[style*="width:210px"] {
width: 142px !important;
flex: 0 1 142px;
min-width: 120px;
}
.filter-card-row--list>div[style*="width:115px"] {
width: 108px !important;
flex: 0 0 108px;
}
.filter-card-row--list>div[style*="width:190px"] {
width: 128px !important;
flex: 0 1 128px;
min-width: 112px;
}
.filter-card-row--between .label-header.d-flex {
flex: 0 0 auto;
padding-left: 1px !important;
padding-right: 1px !important;
}
.filter-card-row--between .filter-card-end, .filter-card-row--list .filter-card-end {
margin-left: auto !important;
gap: 6px !important;
}
.filter-card-row--between .filter-card-end .label-header, .filter-card-row--list .filter-card-end .label-header {
font-size: 11px;
}
.filter-card-row--between .filter-card-end .switch, .filter-card-row--list .filter-card-end .switch {
width: 25px !important;
margin-left: 1px !important;
margin-right: 1px !important;
}
.filter-card-row--between .filter-card-end .filter-card-trash, .filter-card-row--list .filter-card-end .filter-card-trash {
width: 22px;
height: 22px;
}
.filter-card-row--between .choose_select_filter_modal, .filter-card-row--list .choose_select_filter_modal {
width: 100%;
min-width: 0;
padding-left: 7px;
padding-right: 7px;
font-size: 12px;
}
.filter-row:has(.dropdown-menu.show), .filter-card:has(.dropdown-menu.show), .filter-card-row:has(.dropdown-menu.show) {
z-index: 1200;
}
.filter-list:has(.dropdown-menu.show), .ars-form-section-add-report-store:has(.dropdown-menu.show) {
overflow: visible !important;
}
.filter-acc-pane {
overflow: hidden;
transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-acc-pane:has(.dropdown-menu.show) {
overflow: visible !important;
}
.filter-card-summary.filter-acc-visible {
max-height: 48px;
opacity: 1;
transform: none;
pointer-events: auto;
}
.filter-card-row.filter-acc-visible {
max-height: 250px;
opacity: 1;
transform: none;
pointer-events: auto;
}
.filter-acc-hidden {
max-height: 0 !important;
opacity: 0 !important;
transform: translateY(-4px);
pointer-events: none !important;
}
.filter-card-summary {
overflow: hidden;
}
.filter-chevron {
font-size: 9px;
opacity: 0.45;
color: var(--primary--body--color);
flex-shrink: 0;
transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-chevron--expanded {
transform: rotate(90deg);
}
.filter-card-summary:hover .filter-chevron {
opacity: 0.8;
transform: translateX(2px);
}
.summary-chip {
font-size: 12px;
color: var(--primary--body--color);
background: rgba(97, 144, 203, 0.13);
border-radius: 5px;
padding: 2px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
opacity: var(--opacity--80);
flex-shrink: 1;
}
.summary-chip--op {
background: rgba(97, 144, 203, 0.24);
font-weight: 600;
max-width: none;
flex-shrink: 0;
}
.summary-chip--case {
margin-left: auto;
background: rgba(52, 168, 83, 0.16);
font-weight: 600;
flex-shrink: 0;
}
.summary-chip--case-off {
background: rgba(255, 80, 80, 0.13);
opacity: 0.78;
}
.summary-sep {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.35;
flex-shrink: 0;
}
.filter-card-trash {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
color: var(--primary--body--color);
opacity: var(--opacity--60);
transition: background-color 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}
.filter-card-trash:hover {
background: rgba(255, 80, 80, 0.15);
color: rgb(255, 80, 80);
opacity: 1;
}
.filter-card-end {
display: flex;
align-items: center;
gap: 2px;
}
.filter-logic-connector {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 0 4px;
}
.connector-line {
flex: 1;
height: 1px;
background: rgba(169, 169, 169, 0.45);
}
.logic-select-wrapper {
position: relative;
display: inline-flex;
}
.logic-select-wrapper::after {
content: '\25BE';
position: absolute;
right: 9px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: var(--primary--body--color);
opacity: 0.7;
pointer-events: none;
}
.logic-select {
width: 80px;
height: 26px;
border-radius: 14px !important;
text-align: center;
text-align-last: center;
font-size: 11.5px;
font-weight: 600;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
cursor: pointer;
padding: 0 18px 0 10px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
letter-spacing: .3px;
}
.logic-select:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.logic-select option {
background-color: var(--body--background);
color: var(--primary--body--color);
}
.index-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--secondary--color);
color: var(--day--remain--color);
}
.filter-missing-indicator {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background-color: rgba(255, 176, 32, 0.18);
color: #f0a000;
font-size: 10px;
box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.32);
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
width: 30px;
border-top: 1px solid;
border-color: inherit;
transform: rotate(-45deg);
}
.log-input {
position: relative;
}
.log-input .form-control {
height: 36px;
}
.log-input .form-control.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.choose_select_filter_modal {
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.op-select-btn {
text-align: left;
display: flex;
align-items: center;
height: 36px;
padding: 0 12px;
}
.op-select-btn::after {
margin-left: auto !important;
flex-shrink: 0;
}
.choose_select_filter_modal::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.choose_select_filter_modal:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.choose_select_filter_modal.is-invalid {
border-color: #dc3545 !important;
box-shadow: var(--cart--box--shadow), 0 0 0 2px rgba(220, 53, 69, 0.16) !important;
}
.choose_select_filter_modal.is-invalid:focus {
border-color: #dc3545 !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}
.new_filter {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.add-filter-cta-wrap {
display: flex;
justify-content: flex-end;
}
.add-filter-cta {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 38px;
padding: 7px 16px 7px 12px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color) 14%, var(--input--background)), color-mix(in srgb, var(--body--background) 82%, transparent));
box-shadow: var(--cart--box--shadow), 0 10px 24px rgba(0, 0, 0, 0.08);
color: var(--primary--body--color);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.add-filter-cta:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent);
box-shadow: var(--cart--box--shadow), 0 14px 28px rgba(0, 0, 0, 0.12);
}
.add-filter-cta:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 62%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.add-filter-cta:active {
transform: translateY(0);
}
.add-filter-cta__icon {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: color-mix(in srgb, var(--secondary--color) 85%, transparent);
color: #fff;
font-size: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.add-filter-cta__label {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--primary--body--color);
opacity: 0.92;
}
}
/* ===== admin-components/dwh-base-modals/add-report-store-modal/report-store-modal/edit-report-store-modal/edit-report-store-modal.component.css (global) ===== */
.dark-theme .drse-modal-content-edit-report-store, .darkBlue-theme .drse-modal-content-edit-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.dark-theme .drse-widget-header-edit-report-store, .darkBlue-theme .drse-widget-header-edit-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
.dark-theme .drse-form-section-edit-report-store {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .drse-form-section-edit-report-store {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .drse-form-section-edit-report-store__head, .darkBlue-theme .drse-form-section-edit-report-store__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .drse-input-edit-report-store, .darkBlue-theme .drse-input-edit-report-store, .dark-theme .drse-select-edit-report-store, .darkBlue-theme .drse-select-edit-report-store, .dark-theme .drse-filter-delete-edit-report-store, .darkBlue-theme .drse-filter-delete-edit-report-store {
border: none !important;
}
.dark-theme .drse-filter-delete-edit-report-store, .darkBlue-theme .drse-filter-delete-edit-report-store {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme .drse-modal-content-edit-report-store {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .drse-widget-header-edit-report-store {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .drse-form-section-edit-report-store {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .drse-input-edit-report-store, .lightBlue-theme .drse-select-edit-report-store, .lightBlue-theme .drse-filter-delete-edit-report-store {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/dwh-base-modals/add-report-store-modal/report-store-modal/edit-report-store-modal/edit-report-store-modal.component.css (scoped) ===== */
app-edit-report-store-modal {
.drse-modal-content-edit-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: hidden;
}
.drse-form-edit-report-store {
min-height: 100%;
}
.drse-widget-shell-edit-report-store {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.drse-widget-header-edit-report-store {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
}
.drse-widget-title-edit-report-store {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.drse-header-icon-edit-report-store {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.drse-title-text-edit-report-store {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.drse-widget-close-edit-report-store {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.drse-widget-close-edit-report-store:hover {
transform: translateY(-1px);
opacity: 1;
}
.drse-widget-close-edit-report-store:focus, .drse-widget-close-edit-report-store:active {
outline: none !important;
box-shadow: none !important;
}
.drse-modal-body-edit-report-store {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.drse-modal-body-edit-report-store::-webkit-scrollbar {
width: 4px;
}
.drse-modal-body-edit-report-store::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.drse-form-section-edit-report-store {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.drse-form-section-edit-report-store__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.drse-form-section-edit-report-store__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.drse-form-section-edit-report-store__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.drse-field-edit-report-store {
margin-bottom: 12px;
}
.drse-field-last-edit-report-store {
margin-bottom: 0 !important;
}
.drse-label-edit-report-store {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.drse-input-edit-report-store, .drse-select-edit-report-store {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.drse-input-edit-report-store::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.drse-input-edit-report-store:focus, .drse-select-edit-report-store:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.drse-filter-row-edit-report-store {
display: grid;
grid-template-columns: minmax(120px, 1.45fr) minmax(120px, 0.95fr) minmax(76px, 0.65fr) 38px;
gap: 8px;
align-items: center;
}
.drse-filter-input-wrap-edit-report-store {
position: relative;
min-width: 0;
}
.drse-filter-input-edit-report-store {
padding-right: 34px;
}
.drse-filter-clear-edit-report-store {
position: absolute;
top: 52%;
right: 5px;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.55;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 11px;
line-height: 1;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.drse-filter-clear-edit-report-store:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.drse-filter-delete-edit-report-store {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.drse-filter-delete-edit-report-store:hover {
transform: translateY(-1px);
opacity: 1;
color: #dc3545;
}
.drse-filter-clear-edit-report-store:focus, .drse-filter-clear-edit-report-store:active, .drse-filter-delete-edit-report-store:focus, .drse-filter-delete-edit-report-store:active, .drse-add-filter-edit-report-store:focus, .drse-add-filter-edit-report-store:active {
outline: none;
box-shadow: none;
}
.drse-add-filter-edit-report-store {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.drse-add-filter-edit-report-store:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.drse-modal-footer-edit-report-store {
z-index: 10;
padding: 12px 0 16px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--body--background) 96%, transparent) 28%, var(--body--background));
}
.drse-action-btn-edit-report-store {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.drse-action-btn-edit-report-store:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.drse-action-btn-edit-report-store--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
}
/* ===== admin-components/dwh-base-modals/add-report-store-modal/report-store-modal/report-store-modal.component.css (scoped) ===== */
app-report-store-modal {
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
border-bottom: var(--cart--border);
background-color: var(--body--background);
}
.label-header {
color: var(--primary--body--color);
}
.header-bottom {
border-bottom: 1px solid var(--primary--body--color);
}
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/add-filter-shortcut-category-modal/add-filter-shortcut-category-modal.component.css (global) ===== */
.dark-theme .nd-modal-content-add-fshortcut-category, .darkBlue-theme .nd-modal-content-add-fshortcut-category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.dark-theme .nd-widget-header-add-fshortcut-category, .darkBlue-theme .nd-widget-header-add-fshortcut-category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .nd-form-section-add-sh {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .nd-form-section-add-sh {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .nd-input-add-fshortcut-category, .darkBlue-theme .nd-input-add-fshortcut-category, .dark-theme .nd-textarea-add-fshortcut-category, .darkBlue-theme .nd-textarea-add-fshortcut-category, .dark-theme .new_input_add_shortcut, .darkBlue-theme .new_input_add_shortcut, .dark-theme .description_area-add-fshortcut-category, .darkBlue-theme .description_area-add-fshortcut-category {
border: none !important;
}
.lightBlue-theme .nd-modal-content-add-fshortcut-category {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-widget-header-add-fshortcut-category {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nd-form-section-add-sh {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-input-add-fshortcut-category, .lightBlue-theme .nd-textarea-add-fshortcut-category, .lightBlue-theme .new_input_add_shortcut, .lightBlue-theme .description_area-add-fshortcut-category {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/add-filter-shortcut-category-modal/add-filter-shortcut-category-modal.component.css (scoped) ===== */
app-add-filter-shortcut-category-modal {
.modal.right .nd-modal-dialog-add-fshortcut-category {
position: fixed;
right: 0;
margin: 0;
height: 100%;
transform: translate3d(0%, 0, 0);
}
.nd-modal-dialog-add-fshortcut-category {
width: min(480px, 100vw);
max-width: min(480px, 100vw);
}
.modal.right .nd-modal-content-add-fshortcut-category {
height: 100%;
overflow: hidden;
border-radius: 0;
border: none;
}
.modal.right.fade .nd-modal-dialog-add-fshortcut-category {
right: -480px;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.right.show .nd-modal-dialog-add-fshortcut-category {
right: 0;
}
.nd-modal-content-add-fshortcut-category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.15);
color: var(--primary--body--color);
}
.nd-nd-modal-content-add-fshortcut-category {
min-height: 100%;
}
.nd-widget-shell-add-fshortcut-category {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.nd-widget-header-add-fshortcut-category {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.nd-widget-title-add-fshortcut-category {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.nd-header-icon-add-fshortcut-category {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nd-title-text-add-fshortcut-category {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-add-fshortcut-category {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.nd-widget-close-add-fshortcut-category:hover {
transform: translateY(-1px);
opacity: 0.85;
}
.nd-modal-body-add-fshortcut-category {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 10px;
}
.nd-modal-body-add-fshortcut-category::-webkit-scrollbar {
width: 4px;
}
.nd-modal-body-add-fshortcut-category::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.nd-form-section-add-sh {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nd-form-section-add-sh__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nd-form-section-add-sh__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nd-form-section-add-sh__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-add-fshortcut-category {
margin-bottom: 12px;
}
.nd-field-last-add-fshortcut-category {
margin-bottom: 0 !important;
}
.nd-label-add-fshortcut-category, .label-header-add-fshortcut-category {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.nd-label-add-fshortcut-category {
display: block;
font-size: 12.5px;
font-weight: 650;
margin-bottom: 6px;
}
.nd-input-add-fshortcut-category, .nd-textarea-add-fshortcut-category, .new_input_add_shortcut, .description_area-add-fshortcut-category {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-add-fshortcut-category, .new_input_add_shortcut {
min-height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.nd-textarea-add-fshortcut-category, .description_area-add-fshortcut-category {
min-height: 108px;
resize: vertical;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.new_input_add_shortcut::placeholder, .description_area-add-fshortcut-category::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-add-fshortcut-category:focus, .nd-textarea-add-fshortcut-category:focus, .new_input_add_shortcut:focus, .description_area-add-fshortcut-category:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-modal-footer-add-fshortcut-category {
position: fixed;
bottom: 0;
right: 0;
z-index: 10;
padding: 12px 18px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.nd-submit-btn-add-fshortcut-category {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-add-fshortcut-category:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
textarea.form-control.is-valid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
textarea.form-control.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.add-category-input.is-invalid, .add-category-input.is-valid {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: var(--primary--body--color);
transition: background-color 5000s ease-in-out 0s;
font-size: 13px;
}
@media only screen and (max-width: 600px) {
.nd-modal-dialog-add-fshortcut-category {
width: 100vw !important;
max-width: 100vw !important;
}
.nd-submit-btn-add-fshortcut-category {
width: 100%;
}
}
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/add-filter-shortcut-modal/add-filter-shortcut-modal.component.css (global) ===== */
.dark-theme .afsm-modal-content-add-filter-shortcut, .darkBlue-theme .afsm-modal-content-add-filter-shortcut {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.dark-theme .afsm-widget-header-add-filter-shortcut, .darkBlue-theme .afsm-widget-header-add-filter-shortcut {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
.dark-theme .afsm-form-section-add-filter-shortcut {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .afsm-form-section-add-filter-shortcut {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .afsm-form-section-add-filter-shortcut__head, .darkBlue-theme .afsm-form-section-add-filter-shortcut__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .afsm-input-add-filter-shortcut, .darkBlue-theme .afsm-input-add-filter-shortcut, .dark-theme .afsm-select-add-filter-shortcut, .darkBlue-theme .afsm-select-add-filter-shortcut, .dark-theme .afsm-select-btn-add-filter-shortcut, .darkBlue-theme .afsm-select-btn-add-filter-shortcut, .dark-theme .afsm-filter-delete-add-filter-shortcut, .darkBlue-theme .afsm-filter-delete-add-filter-shortcut {
border: none !important;
}
.dark-theme .afsm-filter-delete-add-filter-shortcut, .darkBlue-theme .afsm-filter-delete-add-filter-shortcut {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme .afsm-dropdown-menu-add-filter-shortcut, .darkBlue-theme .afsm-dropdown-menu-add-filter-shortcut {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .afsm-brand-item-add-filter-shortcut, .darkBlue-theme .afsm-brand-item-add-filter-shortcut {
color: rgba(255, 255, 255, 0.88);
}
.lightBlue-theme .afsm-modal-content-add-filter-shortcut {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .afsm-widget-header-add-filter-shortcut {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .afsm-form-section-add-filter-shortcut {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .afsm-input-add-filter-shortcut, .lightBlue-theme .afsm-select-add-filter-shortcut, .lightBlue-theme .afsm-select-btn-add-filter-shortcut, .lightBlue-theme .afsm-filter-delete-add-filter-shortcut {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .afsm-dropdown-menu-add-filter-shortcut {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/add-filter-shortcut-modal/add-filter-shortcut-modal.component.css (scoped) ===== */
app-add-filter-shortcut-modal {
.afsm-modal-content-add-filter-shortcut {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: hidden;
}
.afsm-form-add-filter-shortcut {
min-height: 100%;
}
.afsm-widget-shell-add-filter-shortcut {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.afsm-widget-header-add-filter-shortcut {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
}
.afsm-widget-title-add-filter-shortcut {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.afsm-header-icon-add-filter-shortcut {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.afsm-title-text-add-filter-shortcut {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.afsm-widget-close-add-filter-shortcut {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.afsm-widget-close-add-filter-shortcut:hover {
transform: translateY(-1px);
opacity: 1;
}
.afsm-widget-close-add-filter-shortcut:focus, .afsm-widget-close-add-filter-shortcut:active {
outline: none !important;
box-shadow: none !important;
}
.afsm-modal-body-add-filter-shortcut {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.afsm-modal-body-add-filter-shortcut::-webkit-scrollbar, .afsm-dropdown-menu-add-filter-shortcut::-webkit-scrollbar {
width: 4px;
}
.afsm-modal-body-add-filter-shortcut::-webkit-scrollbar-thumb, .afsm-dropdown-menu-add-filter-shortcut::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.afsm-form-section-add-filter-shortcut {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.afsm-form-section-add-filter-shortcut__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.afsm-form-section-add-filter-shortcut__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.afsm-form-section-add-filter-shortcut__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.afsm-field-add-filter-shortcut {
margin-bottom: 12px;
}
.afsm-field-last-add-filter-shortcut {
margin-bottom: 0 !important;
}
.afsm-field-header-add-filter-shortcut {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.afsm-label-add-filter-shortcut {
display: block;
font-size: 12.5px !important;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.afsm-field-header-add-filter-shortcut .afsm-label-add-filter-shortcut {
margin-bottom: 0;
}
.afsm-field-action-add-filter-shortcut {
border: none;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.85;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
white-space: nowrap;
cursor: pointer;
padding: 0;
transition: opacity 0.15s ease;
}
.afsm-field-action-add-filter-shortcut:hover {
opacity: 1;
text-decoration: underline;
}
.afsm-field-action-add-filter-shortcut:focus, .afsm-field-action-add-filter-shortcut:active {
outline: none;
box-shadow: none;
}
.afsm-input-add-filter-shortcut, .afsm-select-add-filter-shortcut, .afsm-select-btn-add-filter-shortcut {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.afsm-input-add-filter-shortcut::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.afsm-input-add-filter-shortcut:focus, .afsm-select-add-filter-shortcut:focus, .afsm-select-btn-add-filter-shortcut.show, .afsm-select-btn-add-filter-shortcut:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.afsm-select-wrap-add-filter-shortcut {
width: 100%;
}
.afsm-select-btn-add-filter-shortcut {
text-align: left;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 0 12px;
}
.afsm-select-btn-add-filter-shortcut::after {
margin-left: auto !important;
flex-shrink: 0;
}
.afsm-placeholder-add-filter-shortcut {
opacity: 0.45;
font-size: 12px;
}
.afsm-dropdown-menu-add-filter-shortcut {
width: 100%;
max-height: 330px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.afsm-brand-item-add-filter-shortcut {
padding: 0;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.afsm-device-reset-add-filter-shortcut {
padding: 8px 10px;
}
.afsm-brand-link-add-filter-shortcut {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
color: inherit;
text-decoration: none;
}
.afsm-category-item-add-filter-shortcut {
min-height: 34px;
}
.afsm-category-link-add-filter-shortcut {
gap: 0;
padding: 8px 10px;
font-weight: 500;
}
.afsm-brand-item-add-filter-shortcut:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.afsm-filter-row-add-filter-shortcut {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 8px;
align-items: center;
}
.afsm-filter-input-wrap-add-filter-shortcut {
position: relative;
min-width: 0;
}
.afsm-filter-input-add-filter-shortcut {
padding-right: 34px;
}
.afsm-filter-clear-add-filter-shortcut {
position: absolute;
top: 54%;
right: 4px;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.55;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 11px;
line-height: 1;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.afsm-filter-clear-add-filter-shortcut:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.afsm-filter-delete-add-filter-shortcut {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.afsm-filter-delete-add-filter-shortcut:hover {
transform: translateY(-1px);
opacity: 1;
color: #dc3545;
}
.afsm-filter-clear-add-filter-shortcut:focus, .afsm-filter-clear-add-filter-shortcut:active, .afsm-filter-delete-add-filter-shortcut:focus, .afsm-filter-delete-add-filter-shortcut:active, .afsm-add-filter-add-filter-shortcut:focus, .afsm-add-filter-add-filter-shortcut:active {
outline: none;
box-shadow: none;
}
.afsm-add-filter-add-filter-shortcut {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.afsm-add-filter-add-filter-shortcut:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.afsm-modal-footer-add-filter-shortcut {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 0 16px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--body--background) 96%, transparent) 28%, var(--body--background));
}
.afsm-action-btn-add-filter-shortcut {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.afsm-action-btn-add-filter-shortcut:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.afsm-action-btn-add-filter-shortcut--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
@media (max-width: 722px) {
.afsm-modal-footer-add-filter-shortcut {
flex-direction: column;
align-items: stretch;
}
.afsm-action-btn-add-filter-shortcut {
width: 100%;
}
}
@media (max-width: 576px) {
.afsm-modal-body-add-filter-shortcut {
padding: 12px 12px 0;
}
.afsm-form-section-add-filter-shortcut {
padding: 14px;
}
.afsm-filter-row-add-filter-shortcut {
grid-template-columns: minmax(0, 1fr) 36px;
}
}
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/edit-filter-shortcut-modal/edit-filter-shortcut-modal.component.css (global) ===== */
.dark-theme .nd-modal-content-edit-fshortcut, .darkBlue-theme .nd-modal-content-edit-fshortcut {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.dark-theme .nd-widget-header-edit-fshortcut, .darkBlue-theme .nd-widget-header-edit-fshortcut {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
.dark-theme .nd-form-section-edit-sh {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .nd-form-section-edit-sh {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .nd-input-edit-fshortcut, .darkBlue-theme .nd-input-edit-fshortcut, .dark-theme .nd-select-edit-fshortcut, .darkBlue-theme .nd-select-edit-fshortcut, .dark-theme .new_input_edit_filter_shortcut-edit-fshortcut, .darkBlue-theme .new_input_edit_filter_shortcut-edit-fshortcut, .dark-theme .choose_select_edit_shortcut, .darkBlue-theme .choose_select_edit_shortcut, .dark-theme .edit-filter-row, .darkBlue-theme .edit-filter-row, .dark-theme .filter-clear-button-edit-shortcut, .darkBlue-theme .filter-clear-button-edit-shortcut, .dark-theme .filter-button, .darkBlue-theme .filter-button {
border: none !important;
}
.lightBlue-theme .nd-modal-content-edit-fshortcut {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-widget-header-edit-fshortcut {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nd-form-section-edit-sh {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-input-edit-fshortcut, .lightBlue-theme .nd-select-edit-fshortcut, .lightBlue-theme .new_input_edit_filter_shortcut-edit-fshortcut, .lightBlue-theme .choose_select_edit_shortcut, .lightBlue-theme .edit-filter-row, .lightBlue-theme .filter-clear-button-edit-shortcut, .lightBlue-theme .filter-button {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/edit-filter-shortcut-modal/edit-filter-shortcut-modal.component.css (scoped) ===== */
app-edit-filter-shortcut-modal {
.modal.right .nd-modal-dialog-edit-fshortcut {
position: fixed;
right: 0;
margin: 0;
height: 100%;
transform: translate3d(0%, 0, 0);
}
.modal.right .nd-modal-content-edit-fshortcut {
height: 100%;
overflow: hidden;
border-radius: 0;
border: none;
}
.modal.right.fade .nd-modal-dialog-edit-fshortcut {
right: -560px;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.right.show .nd-modal-dialog-edit-fshortcut {
right: 0;
}
.nd-modal-content-edit-fshortcut {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.15);
color: var(--primary--body--color);
}
.nd-nd-modal-content-edit-fshortcut {
min-height: 100%;
}
.nd-widget-shell-edit-fshortcut {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.nd-widget-header-edit-fshortcut {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
}
.nd-widget-title-edit-fshortcut {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.nd-header-icon-edit-fshortcut {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nd-title-text-edit-fshortcut {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-edit-fshortcut {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.nd-widget-close-edit-fshortcut:hover {
transform: translateY(-1px);
opacity: 0.85;
}
.nd-modal-body-edit-fshortcut {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.nd-modal-body-edit-fshortcut::-webkit-scrollbar {
width: 4px;
}
.nd-modal-body-edit-fshortcut::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.nd-form-section-edit-sh {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nd-form-section-edit-sh__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nd-form-section-edit-sh__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nd-form-section-edit-sh__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-edit-fshortcut {
margin-bottom: 12px;
}
.nd-field-last-edit-fshortcut {
margin-bottom: 0 !important;
}
.nd-label-edit-fshortcut, .label-header-edit-fshortcut {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.nd-label-edit-fshortcut {
display: block;
font-size: 12.5px;
font-weight: 650;
margin-bottom: 6px;
}
.nd-input-edit-fshortcut, .nd-select-edit-fshortcut, .new_input_edit_filter_shortcut-edit-fshortcut, .choose_select_edit_shortcut {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
min-height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_edit_filter_shortcut-edit-fshortcut::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-edit-fshortcut:focus, .nd-select-edit-fshortcut:focus, .new_input_edit_filter_shortcut-edit-fshortcut:focus, .choose_select_edit_shortcut:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.filter-row-field:last-of-type {
margin-bottom: 0;
}
.edit-filter-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 32px 32px;
align-items: center;
gap: 8px;
padding: 8px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 72%, var(--body--background));
}
.filter-row-index {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color);
font-size: 12px;
font-weight: 700;
}
.input_delete_area {
min-width: 0;
padding-right: 12px;
}
.filter-clear-button-edit-shortcut, .filter-button {
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background));
color: var(--primary--body--color) !important;
cursor: pointer;
transition: background-color 0.14s ease, transform 0.14s ease;
}
.filter-clear-button-edit-shortcut:hover, .filter-button:hover {
transform: translateY(-1px);
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.delete-icon {
color: color-mix(in srgb, #dc3545 76%, var(--primary--body--color)) !important;
}
.delete-icon:hover {
background-color: color-mix(in srgb, #dc3545 12%, transparent);
}
.nd-add-filter-btn {
width: 100%;
height: 38px;
margin-top: 12px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 42%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
font-weight: 650;
cursor: pointer;
transition: background-color 0.14s ease, transform 0.14s ease;
}
.nd-add-filter-btn:hover {
transform: translateY(-1px);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-modal-footer-edit-fshortcut {
z-index: 10;
padding: 12px 18px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
.nd-submit-btn-edit-fshortcut, .nd-secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
min-height: 36px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-edit-fshortcut:hover, .nd-secondary-btn:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.nd-secondary-btn {
background-color: var(--input--background) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
@media only screen and (max-width: 600px) {
.nd-modal-dialog-edit-fshortcut {
width: 100vw !important;
max-width: 100vw !important;
}
.edit-filter-row {
grid-template-columns: 30px minmax(0, 1fr) 32px;
}
.filter-clear-button-edit-shortcut {
display: none;
}
.nd-modal-footer-edit-fshortcut {
justify-content: stretch;
}
.nd-submit-btn-edit-fshortcut, .nd-secondary-btn {
flex: 1 1 100%;
}
}
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/filter-shortcut-category-modal/edit-category-modal/edit-category-modal.component.css (global) ===== */
.dark-theme .nd-modal-content-edit-fshortcut-category, .darkBlue-theme .nd-modal-content-edit-fshortcut-category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.dark-theme .nd-widget-header-edit-fshortcut-category, .darkBlue-theme .nd-widget-header-edit-fshortcut-category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .nd-form-section-edit-category {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .nd-form-section-edit-category {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .nd-input-edit-fshortcut-category, .darkBlue-theme .nd-input-edit-fshortcut-category, .dark-theme .nd-textarea-edit-fshortcut-category, .darkBlue-theme .nd-textarea-edit-fshortcut-category, .dark-theme .new_input_edit_filter_shortcut-edit-fshortcut-category, .darkBlue-theme .new_input_edit_filter_shortcut-edit-fshortcut-category, .dark-theme .description_area-edit-fshortcut-category, .darkBlue-theme .description_area-edit-fshortcut-category {
border: none !important;
}
.lightBlue-theme .nd-modal-content-edit-fshortcut-category {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-widget-header-edit-fshortcut-category {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nd-form-section-edit-category {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-input-edit-fshortcut-category, .lightBlue-theme .nd-textarea-edit-fshortcut-category, .lightBlue-theme .new_input_edit_filter_shortcut-edit-fshortcut-category, .lightBlue-theme .description_area-edit-fshortcut-category {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/filter-shortcut-category-modal/edit-category-modal/edit-category-modal.component.css (scoped) ===== */
app-edit-category-modal {
.modal.right .nd-modal-dialog-edit-fshortcut-category {
position: fixed;
right: 0;
margin: 0;
height: 100%;
transform: translate3d(0%, 0, 0);
}
.nd-modal-dialog-edit-fshortcut-category {
width: min(480px, 100vw);
max-width: min(480px, 100vw);
}
.modal.right .nd-modal-content-edit-fshortcut-category {
height: 100%;
overflow: hidden;
border-radius: 0;
border: none;
}
.modal.right.fade .nd-modal-dialog-edit-fshortcut-category {
right: -480px;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.right.show .nd-modal-dialog-edit-fshortcut-category {
right: 0;
}
.nd-modal-content-edit-fshortcut-category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.15);
color: var(--primary--body--color);
}
.nd-modal-content-edit-fshortcut-category {
min-height: 100%;
}
.nd-widget-shell-edit-fshortcut-category {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.nd-widget-header-edit-fshortcut-category {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.nd-widget-title-edit-fshortcut-category {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.nd-header-icon-edit-fshortcut-category {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nd-title-text-edit-fshortcut-category {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-edit-fshortcut-category {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.nd-widget-close-edit-fshortcut-category:hover {
transform: translateY(-1px);
opacity: 0.85;
}
.nd-modal-body-edit-fshortcut-category {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.nd-modal-body-edit-fshortcut-category::-webkit-scrollbar {
width: 4px;
}
.nd-modal-body-edit-fshortcut-category::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.nd-form-section-edit-category {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nd-form-section-edit-category__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nd-form-section-edit-category__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nd-form-section-edit-category__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-edit-fshortcut-category {
margin-bottom: 12px;
}
.nd-field-last-edit-fshortcut-category {
margin-bottom: 0 !important;
}
.nd-label-edit-fshortcut-category, .label-header-edit-fshortcut-category {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.nd-label-edit-fshortcut-category {
display: block;
font-size: 12.5px;
font-weight: 650;
margin-bottom: 6px;
}
.nd-input-edit-fshortcut-category, .nd-textarea-edit-fshortcut-category, .new_input_edit_filter_shortcut-edit-fshortcut-category, .description_area-edit-fshortcut-category {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-edit-fshortcut-category, .new_input_edit_filter_shortcut-edit-fshortcut-category {
min-height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.nd-textarea-edit-fshortcut-category, .description_area-edit-fshortcut-category {
min-height: 108px;
resize: vertical;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.new_input_edit_filter_shortcut-edit-fshortcut-category::placeholder, .description_area-edit-fshortcut-category::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-edit-fshortcut-category:focus, .nd-textarea-edit-fshortcut-category:focus, .new_input_edit_filter_shortcut-edit-fshortcut-category:focus, .description_area-edit-fshortcut-category:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.form-control.is-valid, .form-control.is-invalid {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
textarea.form-control.is-valid, textarea.form-control.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.nd-modal-footer-edit-fshortcut-category {
position: fixed;
bottom: 0;
right: 0;
z-index: 10;
padding: 12px 18px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.nd-submit-btn-edit-fshortcut-category {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-edit-fshortcut-category:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
@media only screen and (max-width: 600px) {
.nd-modal-dialog-edit-fshortcut-category {
width: 100vw !important;
max-width: 100vw !important;
}
.nd-submit-btn-edit-fshortcut-category {
width: 100%;
}
}
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/filter-shortcut-category-modal/filter-shortcut-category-modal.component.css (global) ===== */
.modal-fullscreen {
height: auto !important;
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/filter-shortcut-category-modal/filter-shortcut-category-modal.component.css (scoped) ===== */
app-filter-shortcut-category-modal {
.close_btnx {
font-size: 20px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btnx:focus {
outline: none !important;
}
.close_btnx:active {
outline: none !important;
}
.modal-header {
background-color: var(--body--background);
}
.label-header {
color: var(--primary--body--color);
}
.modal-body {
padding: 0px;
}
.modal-dialog-category {
margin-left: 0px !important;
margin-right: 0px !important;
}
.header-bottom {
border-bottom: 1px solid var(--primary--body--color);
}
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/filter-shortcut-modal.component.css (global) ===== */
.dark-theme .nd-modal-content-fshortcut, .darkBlue-theme .nd-modal-content-fshortcut {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.dark-theme .nd-widget-header-fshortcut, .darkBlue-theme .nd-widget-header-fshortcut {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .nd-form-section-new-d-fshortcut__head, .darkBlue-theme .nd-form-section-new-d-fshortcut__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .nd-input-fshortcut, .darkBlue-theme .nd-input-fshortcut, .dark-theme .new_input, .darkBlue-theme .new_input, .dark-theme .nd-select-btn-fshortcut, .darkBlue-theme .nd-select-btn-fshortcut, .dark-theme .choose_select_taxo_filter_shortcut, .darkBlue-theme .choose_select_taxo_filter_shortcut, .dark-theme .shortcut-action-toggle, .darkBlue-theme .shortcut-action-toggle {
border: none !important;
}
.dark-theme .nd-dropdown-menu-fshortcut, .darkBlue-theme .nd-dropdown-menu-fshortcut, .dark-theme .device-brand-menu-fshortcut, .darkBlue-theme .device-brand-menu-fshortcut, .dark-theme .drop-menu, .darkBlue-theme .drop-menu {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .nd-brand-item-fshortcut, .darkBlue-theme .nd-brand-item-fshortcut {
color: rgba(255, 255, 255, 0.88);
}
.dark-theme .accordion_element, .darkBlue-theme .accordion_element, .dark-theme .shortcut-action-toggle, .darkBlue-theme .shortcut-action-toggle {
border: none;
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme .nd-modal-content-fshortcut {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-widget-header-fshortcut {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nd-input-fshortcut, .lightBlue-theme .new_input, .lightBlue-theme .nd-select-btn-fshortcut, .lightBlue-theme .choose_select_taxo_filter_shortcut, .lightBlue-theme .shortcut-action-toggle {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .nd-dropdown-menu-fshortcut, .lightBlue-theme .device-brand-menu-fshortcut, .lightBlue-theme .drop-menu {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-search-input-fshortcut {
background-color: #f0f4f6;
border-color: #c8d8de;
}
.lightBlue-theme .accordion_element {
border: none;
background-color: #ffffff;
}
/* ===== admin-components/dwh-base-modals/filter-shortcut-modal/filter-shortcut-modal.component.css (scoped) ===== */
app-filter-shortcut-modal {
.modal.right .nd-modal-dialog-fshortcut {
position: fixed;
right: 0;
margin: 0;
height: 100%;
transform: translate3d(0%, 0, 0);
}
.nd-modal-dialog-fshortcut {
width: min(560px, 100vw);
max-width: min(560px, 100vw);
}
.modal.right .nd-modal-content-fshortcut {
height: 100%;
overflow: hidden;
border-radius: 0;
border: none;
}
.modal.right.fade .nd-modal-dialog-fshortcut {
right: -560px;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.right.show .nd-modal-dialog-fshortcut {
right: 0;
}
.nd-modal-content-fshortcut {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.15);
color: var(--primary--body--color);
}
.nd-nd-modal-content-fshortcut {
min-height: 100%;
}
.nd-widget-shell-fshortcut {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.nd-widget-header-fshortcut {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.nd-widget-title-fshortcut {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.nd-header-icon-fshortcut {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nd-title-text-fshortcut {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-fshortcut {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.nd-widget-close-fshortcut:hover {
transform: translateY(-1px);
opacity: 0.85;
}
.nd-modal-body-fshortcut {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 15px 15px 80px;
}
.nd-modal-body-fshortcut::-webkit-scrollbar, .nd-dropdown-menu-fshortcut::-webkit-scrollbar {
width: 4px;
}
.nd-modal-body-fshortcut::-webkit-scrollbar-thumb, .nd-dropdown-menu-fshortcut::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.nd-form-section-new-d-fshortcut__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nd-form-section-new-d-fshortcut__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nd-form-section-new-d-fshortcut__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-fshortcut {
margin-bottom: 12px;
}
.nd-field-last-fshortcut {
margin-bottom: 0 !important;
}
.nd-label-fshortcut {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.label-header-fshortcut {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.nd-input-fshortcut, .nd-select-btn-fshortcut, .new_input, .choose_select_taxo_filter_shortcut {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
min-height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-fshortcut::placeholder, .new_input::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-fshortcut:focus, .new_input:focus, .nd-select-btn-fshortcut.show, .nd-select-btn-fshortcut:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-select-btn-fshortcut {
width: 100%;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
height: 36px;
cursor: pointer;
padding: 0 12px;
}
.nd-select-btn-fshortcut::after, .device-select::after {
margin-left: auto !important;
flex-shrink: 0;
}
.nd-placeholder-fshortcut {
opacity: 0.45;
font-size: 12px;
}
.nd-dropdown-menu-fshortcut, .device-brand-menu-fshortcut, .drop-menu {
width: 100%;
max-height: 330px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.nd-search-li-fshortcut {
position: relative;
padding: 4px 6px;
margin-bottom: 4px;
list-style: none;
}
.nd-search-li-fshortcut:hover {
background-color: transparent !important;
}
.nd-search-icon-fshortcut, .search-icon-filter-shortcut {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.4;
font-size: 11px;
pointer-events: none;
}
.nd-search-input-fshortcut {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 6px !important;
background-color: color-mix(in srgb, var(--input--background) 80%, transparent);
color: var(--primary--body--color);
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
box-shadow: none;
}
.nd-search-input-fshortcut:focus {
border-color: color-mix(in srgb, var(--secondary--color) 50%, transparent);
}
.nd-brand-item-fshortcut {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.nd-brand-item-fshortcut:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.brand-name-span-fshortcut {
margin-left: 0;
}
.nd-no-result-li-fshortcut {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.6;
pointer-events: none;
list-style: none;
}
.nd-no-result-li-fshortcut i {
color: #e74c3c;
opacity: 1;
}
.shortcut-search-field {
position: relative;
}
.search-input {
height: 36px;
padding-left: 34px;
}
.shortcut-list-section {
flex: 1;
}
.shortcut-accordion {
display: flex;
flex-direction: column;
gap: 8px;
}
.accordion_element {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 78%, var(--body--background));
color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
}
.card-fshortcut-header {
border-bottom: none;
background: transparent;
}
.shortcut-category-button {
min-height: 42px;
margin: 0;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--primary--body--color);
text-decoration: none;
font-size: 13px;
font-weight: 500;
text-align: left;
}
.shortcut-category-button:hover, .shortcut-category-button:focus, .shortcut-category-button:active {
color: var(--primary--body--color);
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
box-shadow: none;
}
.shortcut-category-button i {
font-size: 11px;
opacity: 0.55;
transition: transform 0.18s ease;
}
.shortcut-category-button[aria-expanded="true"] i {
transform: rotate(180deg);
}
.accordion_inner {
border: 0;
background-color: transparent;
color: var(--primary--body--color);
}
.accordion_inner_body {
padding: 0;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.shortcut-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 8px 8px 10px;
}
.shortcut-name {
min-width: 0;
flex: 1;
min-height: 34px;
padding: 0 8px;
border: none;
border-radius: 8px;
background-color: transparent;
color: var(--primary--body--color);
display: flex;
align-items: center;
gap: 6px;
text-align: left;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.14s ease;
}
.shortcut-name span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shortcut-name mat-icon {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px;
color: var(--secondary--color);
flex-shrink: 0;
}
.shortcut-name:hover {
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.shortcut-actions {
flex-shrink: 0;
}
.accordion_element:has(.shortcut-actions .dropdown-menu.show), .accordion_inner:has(.shortcut-actions .dropdown-menu.show), .accordion_inner_body:has(.shortcut-actions .dropdown-menu.show) {
overflow: visible;
}
.shortcut-action-toggle {
width: 32px;
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.shortcut-action-toggle::after {
display: none;
}
.shortcut-action-toggle:hover, .shortcut-action-toggle:focus {
border-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.drop-menu {
width: max-content;
min-width: 210px;
max-height: none;
padding: 9px;
cursor: pointer;
border-radius: 12px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 9%, transparent), transparent 48%),
color-mix(in srgb, var(--body--background) 92%, var(--input--background) 8%);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 13%, transparent);
box-shadow:
var(--cart--box--shadow),
0 16px 32px color-mix(in srgb, #000 14%, transparent);
}
.shortcut-menu-item {
display: flex;
align-items: center;
padding: 0px 11px;
border: 1px solid transparent !important;
border-radius: 10px !important;
color: var(--primary--body--color);
font-size: 13px;
height: auto !important;
background-color: color-mix(in srgb, var(--input--background) 62%, transparent);
transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.shortcut-menu-item + .shortcut-menu-item {
margin-top: 7px;
}
.shortcut-menu-item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 24%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 12%, var(--input--background));
}
.delete_button {
color: var(--primary--body--color);
background-color: color-mix(in srgb, #dc3545 5%, var(--input--background));
}
.delete_button .menu-icon, .delete_button .menu-text {
color: white;
}
.delete_button:hover {
border-color: color-mix(in srgb, #dc3545 28%, transparent);
background-color: color-mix(in srgb, #dc3545 10%, var(--input--background));
}
.menu-text {
color: var(--primary--body--color);
font-weight: 650;
font-size: 13px;
}
.menu-icon {
width: 30px;
height: 30px;
line-height: 30px;
color: var(--primary--body--color);
font-size: 17px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
flex-shrink: 0;
}
@media only screen and (max-width: 600px) {
.nd-modal-dialog-fshortcut {
width: 100vw !important;
max-width: 100vw !important;
}
.shortcut-name span {
white-space: normal;
}
}
}
/* ===== admin-components/modals/confirmation-modal/confirmation-modal.component.css (scoped) ===== */
app-confirmation-modal {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-confirm-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-confirm-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
}
/* ===== admin-components/report-content/add-report-content/add-report-content.component.css (global) ===== */
.mat-stepper-next {
background: transparent;
box-shadow: none;
border: none;
color: var(--primary--sidebar--color) !important;
}
.mat-step-label.mat-step-label-active {
color: var(--primary--body--color) !important;
}
.mat-step-icon-selected {
background-color: var(--primary--body--color) !important;
}
.mat-step-label {
color: var(--primary--body--color) !important;
}
.mat-step-icon {
background-color: var(--primary--body--color) !important;
color: var(--body--background) !important;
}
.mat-stepper-horizontal-line {
border-top-color: var(--primary--body--color) !important;
}
.mat-step-header:hover {
background-color: var(--secondary--color) !important;
transition: .3s all;
}
.mat-step-header:hover .mat-step-label {
color: var(--day--remain--color) !important;
}
.mat-step-header:hover .mat-step-icon {
color: var(--primary--body--color) !important;
background-color: var(--body--background) !important;
;
}
#addReportContent mat-stepper {
background: transparent !important;
}
#addReportContent .mat-horizontal-stepper-wrapper {
background: transparent !important;
}
#addReportContent .mat-horizontal-content-container {
padding: 16px 0 0 !important;
}
#addReportContent .mat-step-header {
border-radius: 10px;
transition: background-color 0.18s ease;
}
#addReportContent .mat-step-label {
font-size: 12.5px;
font-weight: 650;
opacity: 0.86;
}
.dark-theme #addReportContent .modal-content, .darkBlue-theme #addReportContent .modal-content {
border-color: rgba(255, 255, 255, 0.08) !important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 84%, white 4%),
var(--body--background)) !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important;
}
.dark-theme #addReportContent .modal-header, .darkBlue-theme #addReportContent .modal-header {
border-bottom-color: rgba(255, 255, 255, 0.07) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme #addReportContent .form-card, .dark-theme #addReportContent .arc-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme #addReportContent .form-card, .darkBlue-theme #addReportContent .arc-form-section {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme #addReportContent .report-content-input, .dark-theme #addReportContent .report-content-select, .dark-theme #addReportContent .report-content-area, .darkBlue-theme #addReportContent .report-content-input, .darkBlue-theme #addReportContent .report-content-select, .darkBlue-theme #addReportContent .report-content-area {
border: none !important;
}
.darkBlue-theme #addReportContent .close_btn {
color: #fff !important;
}
.lightBlue-theme #addReportContent .modal-content {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #f8fbfd !important;
}
.lightBlue-theme #addReportContent .modal-header {
border-bottom-color: rgba(117, 145, 155, 0.18) !important;
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme #addReportContent .form-card, .lightBlue-theme #addReportContent .arc-form-section {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme #addReportContent .report-content-input, .lightBlue-theme #addReportContent .report-content-select, .lightBlue-theme #addReportContent .report-content-area {
border-color: rgba(117, 145, 155, 0.24) !important;
background-color: #fff !important;
}
/* ===== admin-components/report-content/add-report-content/add-report-content.component.css (scoped) ===== */
app-add-report-content {
.report-content-input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
text-indent: 4px;
}
.report-content-input:focus {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
text-indent: 4px;
}
.report-content-input::placeholder {
color: var(--primary--body--color);
}
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), .25) !important;
}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), .25) !important;
}
.report-content-select {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
outline: none;
height: 36px;
}
.report-content-area {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
outline: none;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.report-content-area::placeholder {
color: var(--primary--body--color);
}
.add-item-report {
outline: none;
box-shadow: none;
border: none;
cursor: pointer;
color: var(--primary--body--color);
padding: 0px;
}
.add-item-report:hover {
outline: none;
box-shadow: none;
border: none;
cursor: pointer;
color: var(--primary--body--color);
padding: 0px;
}
.add-item-report:focus {
outline: none;
box-shadow: none;
border: none;
cursor: pointer;
color: var(--primary--body--color);
padding: 0px;
}
.report-content-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.report-content-button:hover {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.report-content-button:focus {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
@media only screen and (max-width:992px) {
.report-content-button {
margin-top: 1rem;
}
.mobile_row {
margin-top: 2rem;
}
.header-col {
margin-bottom: .3rem;
}
}
.content-label-header {
color: var(--primary--body--color);
}
.modal-content {
background-color: var(--body--background) !important;
height: auto;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
border-radius: var(--cart--border--radius) !important;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.modal-header {
border-bottom: var(--cart--border);
margin-top: .2rem;
box-shadow: var(--cart--box--shadow);
}
.modal-header h6 {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-content {
overflow: hidden;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14) !important;
}
.modal-header {
align-items: center;
min-height: 64px;
padding: 16px 18px !important;
margin-top: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
box-shadow: none !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.modal-header .label-header {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.close_btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--primary--body--color) !important;
opacity: 0.86 !important;
transition: transform 0.18s ease, background-color 0.18s ease;
}
.close_btn:hover {
transform: translateY(-1px);
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.modal-body {
padding: 16px 18px 18px !important;
}
.arc-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.report-content-input, .report-content-select, .report-content-area {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 8px !important;
background-color: var(--input--background) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: 1 !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.report-content-input::placeholder, .report-content-area::placeholder {
color: color-mix(in srgb, var(--primary--body--color) 52%, transparent);
}
.report-content-input:hover, .report-content-select:hover, .report-content-area:hover {
border-color: color-mix(in srgb, var(--secondary--color) 32%, transparent) !important;
}
.report-content-input:focus, .report-content-select:focus, .report-content-area:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent) !important;
outline: none !important;
}
.content-label-header {
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.report-image-file {
width: 100%;
}
.add-item-report {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 6px 10px !important;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent) !important;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color) !important;
font-size: 12px;
font-weight: 600;
}
.add-item-report:hover, .add-item-report:focus {
border-color: color-mix(in srgb, var(--secondary--color) 52%, transparent) !important;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
button.confirm_button, button.cancel_button, .confirm_button>button {
border-radius: 8px !important;
}
button.cancel_button {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 13%, transparent) !important;
background-color: color-mix(in srgb, var(--input--background) 70%, transparent) !important;
color: var(--primary--body--color) !important;
}
button.confirm_button, .confirm_button>button {
max-width: 100px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
button.confirm_button:hover, .confirm_button>button:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
@media only screen and (max-width: 576px) {
.modal-body {
padding: 14px !important;
}
.arc-form-section {
padding: 12px;
}
}
}
/* ===== admin-components/report-content/report-content-navbar/report-content-navbar.component.css (global) ===== */
.dark-theme .report_content_settings_item, .darkBlue-theme .report_content_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .useddevice_panel_search input, .darkBlue-theme .useddevice_panel_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .report_content_settings_item, .lightBlue-theme .useddevice_panel_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
/* ===== admin-components/report-content/report-content-navbar/report-content-navbar.component.css (scoped) ===== */
app-report-content-navbar {
.report_content_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.report_content_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.report_content_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.report_content_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.report_content_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
}
/* ===== admin-components/report-content/update-report-content/update-report-content.component.css (global) ===== */
.mat-stepper-next {
background: transparent;
box-shadow: none;
border: none;
color: var(--primary--sidebar--color) !important;
}
.mat-step-label.mat-step-label-active {
color: var(--primary--body--color) !important;
}
.mat-step-icon-selected {
background-color: var(--primary--body--color) !important;
}
.mat-step-label {
color: var(--primary--body--color) !important;
}
.mat-step-icon {
background-color: var(--primary--body--color) !important;
color: var(--body--background) !important;
}
.mat-stepper-horizontal-line {
border-top-color: var(--primary--body--color) !important;
}
.mat-step-header:hover {
background-color: var(--secondary--color) !important;
transition: .3s all;
}
.mat-step-header:hover .mat-step-label {
color: var(--day--remain--color) !important;
}
.mat-step-header:hover .mat-step-icon {
color: var(--primary--body--color) !important;
background-color: var(--body--background) !important;
;
}
.mat-horizontal-stepper-header {
pointer-events: none !important;
}
#updateReportContentModal .urc-stepper, #updateReportContentModal .mat-horizontal-stepper-wrapper {
background: transparent !important;
}
#updateReportContentModal .mat-horizontal-content-container {
padding: 16px 0 0 !important;
}
#updateReportContentModal .mat-step-header {
border-radius: 10px;
transition: background-color 0.18s ease;
}
#updateReportContentModal .mat-step-label {
font-size: 12.5px;
font-weight: 650;
opacity: 0.86;
}
.dark-theme #updateReportContentModal .urc-modal-content, .darkBlue-theme #updateReportContentModal .urc-modal-content {
border-color: rgba(255, 255, 255, 0.08) !important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 84%, white 4%),
var(--body--background)) !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important;
}
.dark-theme #updateReportContentModal .urc-modal-header, .darkBlue-theme #updateReportContentModal .urc-modal-header {
border-bottom-color: rgba(255, 255, 255, 0.07) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme #updateReportContentModal .urc-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme #updateReportContentModal .urc-form-section {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme #updateReportContentModal .urc-input, .dark-theme #updateReportContentModal .urc-select, .dark-theme #updateReportContentModal .urc-area, .darkBlue-theme #updateReportContentModal .urc-input, .darkBlue-theme #updateReportContentModal .urc-select, .darkBlue-theme #updateReportContentModal .urc-area {
border: none !important;
}
.darkBlue-theme #updateReportContentModal .urc-close-button {
color: #fff !important;
}
.lightBlue-theme #updateReportContentModal .urc-modal-content {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #f8fbfd !important;
}
.lightBlue-theme #updateReportContentModal .urc-modal-header {
border-bottom-color: rgba(117, 145, 155, 0.18) !important;
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme #updateReportContentModal .urc-form-section {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme #updateReportContentModal .urc-input, .lightBlue-theme #updateReportContentModal .urc-select, .lightBlue-theme #updateReportContentModal .urc-area {
border-color: rgba(117, 145, 155, 0.24) !important;
background-color: #fff !important;
}
/* ===== admin-components/report-content/update-report-content/update-report-content.component.css (scoped) ===== */
app-update-report-content {
.content-label-header {
color: var(--primary--body--color);
}
.modal-content {
background-color: var(--body--background) !important;
height: auto;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
border-radius: var(--cart--border--radius) !important;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.modal-header {
border-bottom: var(--cart--border);
margin-top: .2rem;
box-shadow: var(--cart--box--shadow);
}
.modal-header h6 {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.report-content-input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
text-indent: 4px;
}
.report-content-input:focus {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
text-indent: 4px;
}
.report-content-input::placeholder {
color: var(--primary--body--color);
}
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), .25) !important;
}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), .25) !important;
}
.report-content-select {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
outline: none;
height: 36px;
}
.report-content-area {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
outline: none;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.report-content-area::placeholder {
color: var(--primary--body--color);
}
.add-item-report {
outline: none;
box-shadow: none;
border: none;
cursor: pointer;
color: var(--primary--body--color);
padding: 0px;
}
.add-item-report:hover {
outline: none;
box-shadow: none;
border: none;
cursor: pointer;
color: var(--primary--body--color);
padding: 0px;
}
.add-item-report:focus {
outline: none;
box-shadow: none;
border: none;
cursor: pointer;
color: var(--primary--body--color);
padding: 0px;
}
.report-content-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.report-content-button:hover {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.report-content-button:focus {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.urc-modal-content {
overflow: hidden;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14) !important;
}
.urc-modal-header {
align-items: center;
min-height: 64px;
padding: 16px 18px !important;
margin-top: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
box-shadow: none !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.urc-header-title {
display: flex;
align-items: center;
gap: 10px;
}
.urc-header-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.urc-title-text {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.urc-close-button {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary--body--color) !important;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, background-color 0.18s ease;
}
.urc-close-button:hover {
transform: translateY(-1px);
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.urc-close-button:focus, .urc-close-button:active {
outline: none !important;
}
.urc-modal-body {
padding: 16px 18px 18px !important;
}
.urc-form {
display: block;
}
.urc-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.urc-input, .urc-select, .urc-area {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 8px !important;
background-color: var(--input--background) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
font-size: 13px;
opacity: 1 !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.urc-input {
min-height: 36px;
height: 36px;
}
.urc-select {
height: 36px;
}
.urc-input::placeholder, .urc-area::placeholder {
color: color-mix(in srgb, var(--primary--body--color) 52%, transparent);
}
.urc-input:hover, .urc-select:hover, .urc-area:hover {
border-color: color-mix(in srgb, var(--secondary--color) 32%, transparent) !important;
}
.urc-input:focus, .urc-select:focus, .urc-area:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent) !important;
outline: none !important;
}
#updateReportContentModal .content-label-header {
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
#updateReportContentModal .report-image-file {
width: 100%;
}
.urc-add-chart-button {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 6px 10px !important;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent) !important;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color) !important;
font-size: 12px;
font-weight: 600;
}
.urc-add-chart-button:hover, .urc-add-chart-button:focus {
border-color: color-mix(in srgb, var(--secondary--color) 52%, transparent) !important;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.urc-step-actions {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
}
.urc-cancel-button, .urc-confirm-button, .urc-next-action, .urc-next-action>button {
border-radius: 8px !important;
}
.urc-cancel-button {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 13%, transparent) !important;
background-color: color-mix(in srgb, var(--input--background) 70%, transparent) !important;
color: var(--primary--body--color) !important;
}
.urc-confirm-button, .urc-next-action {
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.urc-confirm-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.urc-confirm-button:hover, .urc-next-action:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
@media only screen and (max-width: 576px) {
.urc-modal-body {
padding: 14px !important;
}
.urc-form-section {
padding: 12px;
}
}
}
/* ===== admin-components/report-template/add-report-template/add-report-template.component.css (global) ===== */
.dark-theme .art-modal-content, .darkBlue-theme .art-modal-content {
border-color: rgba(255, 255, 255, 0.08) !important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 84%, white 4%),
var(--body--background)) !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important;
}
.dark-theme .art-header, .darkBlue-theme .art-header {
border-bottom-color: rgba(255, 255, 255, 0.07) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .art-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .art-form-section {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .art-form-section__head, .darkBlue-theme .art-form-section__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .art-input, .dark-theme .art-select, .darkBlue-theme .art-input, .darkBlue-theme .art-select {
border: none !important;
}
.darkBlue-theme .art-close-button {
color: #fff !important;
}
.lightBlue-theme .art-modal-content {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #f8fbfd !important;
}
.lightBlue-theme .art-header {
border-bottom-color: rgba(117, 145, 155, 0.18) !important;
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .art-form-section {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .art-input, .lightBlue-theme .art-select {
border-color: rgba(117, 145, 155, 0.24) !important;
background-color: #fff !important;
}
/* ===== admin-components/report-template/add-report-template/add-report-template.component.css (scoped) ===== */
app-add-report-template {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input_add_template {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
}
.new_input_add_template::placeholder {
color: var(--primary--body--color);
}
.choose_select_add_template {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
}
.choose_select_add_template:focus {
outline: none;
}
.choose_select_add_template:active {
outline: none;
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
padding: 0px;
}
.oriana-button-add-template {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 25px;
font-size: 13px;
margin: 0px;
}
.oriana-button-add-template:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 25px;
font-size: 13px;
margin: 0px;
}
.add-report-content-div {
color: var(--primary--body--color);
cursor: pointer;
}
.art-modal-content {
overflow: hidden;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14) !important;
}
.art-header {
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.art-header-title {
display: flex;
align-items: center;
gap: 10px;
}
.art-header-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.art-title-text {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.art-modal-header {
align-items: center;
min-height: 56px;
padding: 14px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
box-shadow: none !important;
background: color-mix(in srgb, var(--input--background) 38%, transparent);
}
.art-modal-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.95;
}
.art-close-button {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary--body--color) !important;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.art-close-button:hover {
transform: translateY(-1px);
}
.art-modal-body {
padding: 16px 18px 4px !important;
display: flex;
flex-direction: column;
gap: 12px;
}
.art-form {
display: flex;
flex-direction: column;
}
.art-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.art-form-section__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.art-form-section__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.art-form-section__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.art-field-group {
margin-bottom: 14px !important;
}
.art-field-last {
margin-bottom: 0 !important;
}
.art-field-header {
gap: 10px;
}
.art-field-label {
display: block;
margin-bottom: 6px;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.art-input, .art-select {
width: 100%;
min-height: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 8px !important;
background-color: var(--input--background) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
font-size: 13px;
opacity: 1 !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.art-input::placeholder {
color: color-mix(in srgb, var(--primary--body--color) 52%, transparent);
}
.art-input:hover, .art-select:hover {
border-color: color-mix(in srgb, var(--secondary--color) 32%, transparent) !important;
}
.art-input:focus, .art-select:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent) !important;
outline: none !important;
}
.art-select-wrap {
position: relative;
}
.art-select-wrap::after {
color: color-mix(in srgb, var(--primary--body--color) 66%, transparent);
}
.art-add-content-button {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 6px 10px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.art-add-content-button span {
font-size: 12px !important;
}
.art-add-content-button:hover {
border-color: color-mix(in srgb, var(--secondary--color) 52%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
opacity: 1;
}
.art-modal-footer {
padding: 14px 18px 16px;
border-top: none;
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.art-cancel-button, .art-confirm-button {
min-width: 86px;
height: 36px;
border-radius: 8px !important;
font-size: 13px;
font-weight: 700;
}
.art-cancel-button {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 13%, transparent) !important;
background-color: color-mix(in srgb, var(--input--background) 70%, transparent) !important;
color: var(--primary--body--color) !important;
}
.art-confirm-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
background: var(--secondary--color) !important;
color: #fff !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.art-confirm-button:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.art-form:not(.art-template-submitted) .art-input.is-invalid:not(.ng-touched):not(.ng-dirty), .art-form:not(.art-template-submitted) .art-select.is-invalid:not(.ng-touched):not(.ng-dirty):not(.art-visible-invalid) {
border-color: color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
background-image: none !important;
}
.art-form.art-template-submitted .art-input.is-invalid, .art-form.art-template-submitted .art-select.is-invalid, .art-select.art-visible-invalid, .art-input.is-invalid.ng-touched, .art-input.is-invalid.ng-dirty, .art-select.is-invalid.ng-touched, .art-select.is-invalid.ng-dirty {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image:
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
background-position: right 11px center !important;
}
.art-form.art-template-submitted .art-input.is-invalid, .art-input.is-invalid.ng-touched, .art-input.is-invalid.ng-dirty {
padding-right: 34px !important;
}
.art-form.art-template-submitted .art-select.is-invalid, .art-select.art-visible-invalid, .art-select.is-invalid.ng-touched, .art-select.is-invalid.ng-dirty {
padding-right: 42px !important;
background-position: right 28px center !important;
}
@media only screen and (max-width: 576px) {
.art-modal-body {
padding: 14px !important;
}
.art-form-section {
padding: 12px;
}
.art-field-header {
align-items: flex-start !important;
flex-direction: column;
}
.art-add-content-button {
width: 100%;
justify-content: center;
}
}
}
/* ===== admin-components/report-template/edit-report-template/edit-report-template.component.css (global) ===== */
.dark-theme .ert-modal-content, .darkBlue-theme .ert-modal-content {
border-color: rgba(255, 255, 255, 0.08) !important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 84%, white 4%),
var(--body--background)) !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important;
}
.dark-theme .ert-header, .darkBlue-theme .ert-header {
border-bottom-color: rgba(255, 255, 255, 0.07) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .ert-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .ert-form-section {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .ert-form-section__head, .darkBlue-theme .ert-form-section__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .ert-input, .dark-theme .ert-select, .darkBlue-theme .ert-input, .darkBlue-theme .ert-select {
border: none !important;
}
.darkBlue-theme .ert-close-button {
color: #fff !important;
}
.lightBlue-theme .ert-modal-content {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #f8fbfd !important;
}
.lightBlue-theme .ert-header {
border-bottom-color: rgba(117, 145, 155, 0.18) !important;
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .ert-form-section {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .ert-input, .lightBlue-theme .ert-select {
border-color: rgba(117, 145, 155, 0.24) !important;
background-color: #fff !important;
}
/* ===== admin-components/report-template/edit-report-template/edit-report-template.component.css (scoped) ===== */
app-edit-report-template {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input_edit_template {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
}
.new_input_edit_template::placeholder {
color: var(--primary--body--color);
}
.choose_select_edit_template {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
}
.choose_select_edit_template:focus {
outline: none;
}
.choose_select_edit_template:active {
outline: none;
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
padding: 0px;
}
.oriana-button-edit-template {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 15px;
font-size: 13px;
margin: 0px;
}
.oriana-button-edit-template:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 15px;
font-size: 13px;
margin: 0px;
}
.ert-modal-content {
overflow: hidden;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14) !important;
}
.ert-header {
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.ert-header-title {
display: flex;
align-items: center;
gap: 10px;
}
.ert-header-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.ert-title-text {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.ert-close-button {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary--body--color) !important;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.ert-close-button:hover {
transform: translateY(-1px);
}
.ert-close-button:focus, .ert-close-button:active {
outline: none !important;
}
.ert-form {
display: flex;
flex-direction: column;
}
.ert-modal-body {
padding: 16px 18px 4px !important;
display: flex;
flex-direction: column;
gap: 12px;
}
.ert-form-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.ert-form-section__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.ert-form-section__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.ert-form-section__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.ert-field-group {
margin-bottom: 14px !important;
}
.ert-field-last {
margin-bottom: 0 !important;
}
.ert-field-label {
display: block;
margin-bottom: 6px;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.ert-input, .ert-select {
width: 100%;
min-height: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 8px !important;
background-color: var(--input--background) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
font-size: 13px;
opacity: 1 !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.ert-input::placeholder {
color: color-mix(in srgb, var(--primary--body--color) 52%, transparent);
}
.ert-input:hover, .ert-select:hover {
border-color: color-mix(in srgb, var(--secondary--color) 32%, transparent) !important;
}
.ert-input:focus, .ert-select:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent) !important;
outline: none !important;
}
.ert-select-wrap {
position: relative;
}
.ert-select-wrap::after {
color: color-mix(in srgb, var(--primary--body--color) 66%, transparent);
}
.ert-modal-footer {
padding: 14px 18px 16px;
border-top: none;
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.ert-cancel-button, .ert-confirm-button {
min-width: 86px;
height: 36px;
border-radius: 8px !important;
font-size: 13px;
font-weight: 700;
}
.ert-cancel-button {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 13%, transparent) !important;
background-color: color-mix(in srgb, var(--input--background) 70%, transparent) !important;
color: var(--primary--body--color) !important;
}
.ert-confirm-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
background: var(--secondary--color) !important;
color: #fff !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ert-confirm-button:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.ert-input.is-invalid, .ert-select.is-invalid {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
}
@media only screen and (max-width: 576px) {
.ert-modal-body {
padding: 14px !important;
}
.ert-form-section {
padding: 12px;
}
}
}
/* ===== admin-components/report-template/report-template-navbar/report-template-navbar.component.css (global) ===== */
.dark-theme .report_template_settings_item, .darkBlue-theme .report_template_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .useddevice_panel_search input, .darkBlue-theme .useddevice_panel_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .report_template_settings_item, .lightBlue-theme .useddevice_panel_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
/* ===== admin-components/report-template/report-template-navbar/report-template-navbar.component.css (scoped) ===== */
app-report-template-navbar {
.report_template_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.report_template_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.report_template_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.report_template_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.report_template_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
}
/* ===== admin-components/reports/add-report-components/new-daily-report/new-daily-report.component.css (global) ===== */
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.mat-form-field-flex {
background: #e9ecef;
border-radius: 5px;
padding-left: 12px;
padding-right: 12px;
font-size: 13px;
color: black;
}
.darkBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid #8ca9b46e;
}
.darkBlue-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .template-col-div {
border-bottom: 1.5px solid #8ca9b46e;
}
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.mat-date-range-picker {
z-index: 9999 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--body--background) !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
border-radius: var(--cart--border--radius) !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color) !important;
}
.mat-datepicker-content {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mdc-icon-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-mdc-form-field-infix {
padding-top: 5px !important;
}
.mat-mdc-text-field-wrapper {
height: 36px !important;
}
.time_input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time_input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:930px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
.show-sidebar .f-left-mobile {
float: left;
}
}
@media only screen and (max-width:531px) {
.show-sidebar .label-small {
font-size: 13px;
}
}
@media only screen and (max-width: 1450px) {
.show-sidebar .report-col {
width: 100%;
}
}
@media only screen and (max-width: 1330px) {
.show-sidebar .report-col-daily {
width: 100%;
}
.show-sidebar .mobile-screen-add-button {
display: block;
}
.show-sidebar .normal-screen-add-button {
display: none;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.ndr-page-daily-report .mat-mdc-text-field-wrapper {
height: 34px !important;
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
}
.ndr-page-daily-report .mat-mdc-form-field-flex, .ndr-page-daily-report .mat-mdc-text-field-wrapper {
height: 34px !important;
}
.ndr-page-daily-report .mat-mdc-form-field-infix {
min-height: 34px !important;
padding-top: 6px !important;
}
.dark-theme .ndr-title-daily-report, .darkBlue-theme .ndr-title-daily-report {
background: transparent;
}
.dark-theme .ndr-panel-daily-report>.row, .darkBlue-theme .ndr-panel-daily-report>.row {
border-color: rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, color-mix(in srgb, white 4%, var(--body--background)), var(--body--background));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.dark-theme .ndr-page-daily-report .choose_select_add_daily_report, .dark-theme .ndr-page-daily-report .new_input_add_daily_report, .dark-theme .ndr-page-daily-report .description_area_add_daily_report, .dark-theme .ndr-page-daily-report .select-device-brand, .darkBlue-theme .ndr-page-daily-report .choose_select_add_daily_report, .darkBlue-theme .ndr-page-daily-report .new_input_add_daily_report, .darkBlue-theme .ndr-page-daily-report .description_area_add_daily_report, .darkBlue-theme .ndr-page-daily-report .select-device-brand {
border-color: rgba(255, 255, 255, 0.07) !important;
background: color-mix(in srgb, white 5%, var(--input--background)) !important;
}
.dark-theme .ndr-brand-menu-daily-report, .darkBlue-theme .ndr-brand-menu-daily-report {
border-color: rgba(255, 255, 255, 0.10) !important;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 12%, transparent), transparent 42%), color-mix(in srgb, white 5%, var(--body--background)) !important;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36) !important;
}
.dark-theme .ndr-filter-card-daily-report, .darkBlue-theme .ndr-filter-card-daily-report {
border-color: rgba(255, 255, 255, 0.07) !important;
background-color: color-mix(in srgb, var(--body--background) 76%, #242b36 24%) !important;
}
.dark-theme .ndr-filter-body-daily-report, .darkBlue-theme .ndr-filter-body-daily-report, .dark-theme .ndr-page-daily-report .col-6.mb-2 .form-group, .darkBlue-theme .ndr-page-daily-report .col-6.mb-2 .form-group {
border-color: rgba(255, 255, 255, 0.055);
background-color: rgba(255, 255, 255, 0.035);
}
.dark-theme .ndr-empty-filter-card-daily-report, .darkBlue-theme .ndr-empty-filter-card-daily-report {
border-color: rgba(255, 255, 255, 0.10);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
}
.dark-theme .ndr-empty-filter-icon-daily-report, .darkBlue-theme .ndr-empty-filter-icon-daily-report {
background-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.darkBlue-theme .ndr-panel-daily-report>.row {
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 14%, transparent), transparent 40%), color-mix(in srgb, white 5%, var(--body--background));
}
.lightBlue-theme .ndr-panel-daily-report>.row {
border-color: rgba(117, 145, 155, 0.20);
background: #ffffff;
box-shadow: 0 12px 26px rgba(63, 164, 172, 0.08);
}
.lightBlue-theme .ndr-page-daily-report .choose_select_add_daily_report, .lightBlue-theme .ndr-page-daily-report .new_input_add_daily_report, .lightBlue-theme .ndr-page-daily-report .description_area_add_daily_report, .lightBlue-theme .ndr-page-daily-report .select-device-brand {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #fbfdfe !important;
}
.lightBlue-theme .ndr-brand-menu-daily-report {
border-color: rgba(117, 145, 155, 0.28) !important;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), #ffffff !important;
box-shadow: var(--cart--box--shadow), 0 18px 34px rgba(63, 164, 172, 0.12) !important;
}
.lightBlue-theme .ndr-filter-card-daily-report {
border-color: rgba(117, 145, 155, 0.24) !important;
background-color: #f7fbfc !important;
}
.lightBlue-theme .ndr-filter-body-daily-report, .lightBlue-theme .ndr-page-daily-report .col-6.mb-2 .form-group {
border-color: rgba(117, 145, 155, 0.18);
background-color: rgba(63, 164, 172, 0.035);
}
.lightBlue-theme .ndr-empty-filter-card-daily-report {
border-color: rgba(63, 164, 172, 0.28);
background: linear-gradient(180deg, rgba(63, 164, 172, 0.045), rgba(255, 255, 255, 0.92));
}
.lightBlue-theme .ndr-empty-filter-icon-daily-report {
background-color: rgba(63, 164, 172, 0.12);
color: #2f8e96;
}
/* ===== admin-components/reports/add-report-components/new-daily-report/new-daily-report.component.css (scoped) ===== */
app-new-daily-report {
.each-reprot-item-title {
width: 100%;
color: black;
border-bottom: 1.5px solid #3658757c;
margin-bottom: 13px;
font-weight: 500;
padding: 5px;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
.template-col-div {
height: 35px;
margin-bottom: 0.7rem;
border-bottom: 1.5px solid #3658757c;
}
.template-label {
border-bottom: none !important;
}
.add-report-template-div {
color: var(--primary--body--color);
cursor: pointer;
text-align: right;
width: 100%;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
.new-report-daily-card {
background-color: transparent;
border: none;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.each-reprot-item-title {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.choose_select_add_daily_report {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
border-top-left-radius: var(--cart--border--radius) !important;
border-bottom-left-radius: var(--cart--border--radius) !important;
}
.choose_select_add_daily_report:focus {
outline: none;
}
.choose_select_add_daily_report:active {
outline: none;
}
.new_input_add_daily_report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
outline: none;
}
.new_input_add_daily_report::placeholder {
color: var(--primary--body--color);
}
.description_area_add_daily_report {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.description_area_add_daily_report::placeholder {
color: var(--primary--body--color);
font-size: 13px;
}
.report-title-input {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.oriana-button-add-daily-report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.oriana-button-add-daily-report:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
@media only screen and (max-width:690px) {
.filter-header-col {
width: 50% !important;
}
.f-left-mobile {
float: left;
}
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: -5px;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.mobile-screen-add-button {
display: none;
}
@media only screen and (min-width: 992px) and (max-width:1350px) {
.filter-header {
font-size: 11.5px;
}
}
@media only screen and (max-width: 1120px) {
.report-col-daily {
width: 100%;
}
.mobile-screen-add-button {
display: block;
}
.normal-screen-add-button {
display: none;
}
}
.select-device-brand {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.select-device-brand::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
opacity: .7;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
cursor: pointer;
}
.brand-name-span {
margin-left: .3rem;
font-size: 13.5px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.filter-div {
float: left;
}
.accordion-columns-button {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
height: 50px;
}
.accordion-columns-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion-button:focus {
z-index: 0
}
.tooltip-add-report-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 83%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
z-index: 99999;
}
.tooltip-add-report:hover .tooltip-add-report-text {
visibility: visible;
z-index: 99999;
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-daily-report {
max-height: 330px;
overflow: auto;
}
.ndr-page-daily-report {
position: relative;
padding: 8px 0 22px;
}
.ndr-card-daily-report {
overflow: visible;
}
.ndr-body-daily-report {
padding: 10px;
overflow: visible;
}
.ndr-title-daily-report {
width: auto;
margin: 0 0 14px !important;
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--primary--body--color);
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
}
.ndr-layout-daily-report {
row-gap: 16px;
align-items: stretch;
}
.ndr-panel-daily-report>.row {
width: 100%;
height: 100%;
margin: 0;
padding: 16px 0px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 98%, var(--input--background)), var(--body--background));
box-shadow: 0 10px 28px color-mix(in srgb, #000000 7%, transparent);
}
.ndr-config-panel-daily-report {
padding-right: 8px;
}
.ndr-filter-panel-daily-report {
padding-left: 8px;
}
.ndr-panel-grid-daily-report, .ndr-filter-grid-daily-report {
align-content: flex-start;
}
.ndr-page-daily-report .form-group, .ndr-page-daily-report .button-div {
margin-bottom: 12px;
}
.ndr-page-daily-report .each-reprot-item-title {
width: 100%;
margin-bottom: 5px;
padding: 0;
border-bottom: none !important;
color: color-mix(in srgb, var(--primary--body--color) 86%, transparent);
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0;
opacity: 1;
}
.ndr-page-daily-report .choose_select_add_daily_report, .ndr-page-daily-report .new_input_add_daily_report, .ndr-page-daily-report .description_area_add_daily_report, .ndr-page-daily-report .select-device-brand {
min-height: 34px;
height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
color: var(--primary--body--color) !important;
font-size: 12.5px;
opacity: 1;
outline: none !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.ndr-page-daily-report .choose_select_add_daily_report:hover, .ndr-page-daily-report .new_input_add_daily_report:hover, .ndr-page-daily-report .description_area_add_daily_report:hover, .ndr-page-daily-report .select-device-brand:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent) !important;
}
.ndr-page-daily-report .choose_select_add_daily_report:focus, .ndr-page-daily-report .new_input_add_daily_report:focus, .ndr-page-daily-report .description_area_add_daily_report:focus, .ndr-page-daily-report .select-device-brand:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
}
.ndr-page-daily-report .new_input_add_daily_report.is-invalid, .ndr-page-daily-report .description_area_add_daily_report.is-invalid, .ndr-page-daily-report .choose_select_add_daily_report.is-invalid, .ndr-page-daily-report .select-device-brand.is-invalid {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.ndr-page-daily-report:not(.ndr-report-submitted-daily-report) .new_input_add_daily_report.is-invalid:not(.ng-touched):not(.ng-dirty), .ndr-page-daily-report:not(.ndr-report-submitted-daily-report) .description_area_add_daily_report.is-invalid:not(.ng-touched):not(.ng-dirty), .ndr-page-daily-report:not(.ndr-report-submitted-daily-report) .choose_select_add_daily_report.is-invalid:not(.ng-touched):not(.ng-dirty), .ndr-page-daily-report:not(.ndr-report-submitted-daily-report) .select-device-brand.is-invalid:not(.ng-touched):not(.ng-dirty) {
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
background-image: none !important;
}
.ndr-page-daily-report.ndr-report-submitted-daily-report .new_input_add_daily_report.is-invalid, .ndr-page-daily-report.ndr-report-submitted-daily-report .select-device-brand.is-invalid, .ndr-page-daily-report .new_input_add_daily_report.is-invalid.ng-touched, .ndr-page-daily-report .new_input_add_daily_report.is-invalid.ng-dirty, .ndr-page-daily-report .select-device-brand.is-invalid.ng-touched, .ndr-page-daily-report .select-device-brand.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 21px center !important;
}
.ndr-page-daily-report.ndr-report-submitted-daily-report .description_area_add_daily_report.is-invalid, .ndr-page-daily-report .description_area_add_daily_report.is-invalid.ng-touched, .ndr-page-daily-report .description_area_add_daily_report.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 11px top 10px !important;
}
.ndr-page-daily-report.ndr-report-submitted-daily-report .choose_select_add_daily_report.is-invalid, .ndr-page-daily-report .choose_select_add_daily_report.is-invalid.ng-touched, .ndr-page-daily-report .choose_select_add_daily_report.is-invalid.ng-dirty {
padding-right: 42px !important;
background-position: right 28px center !important;
}
.ndr-page-daily-report .description_area_add_daily_report {
height: auto;
min-height: 76px;
line-height: 1.45;
resize: vertical;
}
.ndr-page-daily-report .select_arrow {
position: relative;
}
.ndr-page-daily-report .select_arrow::after {
right: 12px;
opacity: 0.7;
}
.ndr-page-daily-report .col-6.mb-2 .form-group {
min-height: 58px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 44%, transparent);
}
.ndr-brand-dropdown-daily-report {
position: relative;
z-index: 60;
}
.ndr-brand-dropdown-daily-report:has(.ndr-brand-menu-daily-report.show), .ndr-brand-dropdown-daily-report:focus-within {
z-index: 1500;
}
.ndr-brand-toggle-daily-report {
display: flex;
align-items: center;
gap: 8px;
padding-right: 34px;
}
.ndr-brand-menu-daily-report {
width: 100%;
max-height: 330px;
padding: 5px !important;
z-index: 1600 !important;
overflow: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent) !important;
border-radius: 9px !important;
background: var(--body--background) !important;
box-shadow: 0 18px 34px color-mix(in srgb, #000000 16%, transparent) !important;
}
.ndr-brand-search-daily-report {
padding: 5px !important;
margin-bottom: 4px !important;
border-radius: 6px;
}
.ndr-brand-search-daily-report i {
top: 50%;
transform: translateY(-50%) !important;
}
.ndr-brand-item-daily-report, .ndr-brand-empty-daily-report {
min-height: 32px;
margin-bottom: 2px;
padding: 6px 8px !important;
border-radius: 6px;
color: var(--primary--body--color);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ndr-brand-item-daily-report:hover {
transform: translateX(2px);
background-color: color-mix(in srgb, var(--secondary--color) 13%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.ndr-template-action-daily-report {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: var(--primary--body--color);
opacity: 0.72;
}
.ndr-template-action-daily-report:hover {
opacity: 1;
}
.ndr-page-daily-report .template-col-div {
align-items: center;
height: auto;
min-height: 31px;
margin-bottom: 8px;
border-bottom: none !important;
}
.ndr-filter-title-daily-report {
padding-bottom: 8px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
font-size: 13.5px !important;
}
.ndr-filter-title-row-daily-report {
margin-top: .3rem !important;
}
.ndr-filter-scroll-daily-report {
max-height: 560px !important;
padding: 2px 4px 2px 0;
}
.ndr-filter-card-daily-report {
margin-bottom: 8px;
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent) !important;
background-color: transparent !important;
}
.ndr-filter-summary-daily-report {
min-height: 42px;
padding: 8px 11px !important;
}
.ndr-filter-summary-daily-report h6 {
margin: 0;
color: var(--primary--body--color);
font-size: 11.5px !important;
font-weight: 650;
opacity: 0.82;
}
.ndr-filter-body-daily-report {
padding: 12px 10px 2px;
background-color: color-mix(in srgb, var(--input--background) 35%, transparent);
}
.ndr-filter-body-daily-report .row {
row-gap: 8px;
}
.ndr-filter-body-daily-report .input-group {
margin-bottom: 0 !important;
}
.ndr-add-filter-daily-report {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 38%, transparent) !important;
border-radius: 7px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
opacity: 1;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ndr-add-filter-daily-report:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 62%, transparent) !important;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.ndr-empty-filter-wrap-daily-report {
width: 100%;
}
.ndr-empty-filter-card-daily-report {
display: flex;
align-items: center;
gap: 14px;
min-height: 112px;
padding: 18px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 48%, transparent), color-mix(in srgb, var(--body--background) 94%, var(--input--background)));
}
.ndr-empty-filter-icon-daily-report {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 9px;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
color: var(--secondary--color);
font-size: 17px;
}
.ndr-empty-filter-content-daily-report {
display: grid;
gap: 3px;
flex: 1;
min-width: 0;
}
.ndr-empty-filter-title-daily-report {
color: var(--primary--body--color);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.ndr-empty-filter-text-daily-report {
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.35;
opacity: 0.64;
}
.ndr-action-row-daily-report .confirm_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ndr-action-row-daily-report .confirm_button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.ndr-final-action-row-daily-report {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding: 0;
margin-top: 2px !important;
}
.ndr-final-action-row-daily-report .form-group {
margin-bottom: 0 !important;
}
.ndr-final-add-button-daily-report {
min-width: 118px;
}
@media only screen and (max-width: 1160px) {
.ndr-config-panel-daily-report, .ndr-filter-panel-daily-report {
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (max-width: 720px) {
.ndr-empty-filter-card-daily-report {
align-items: flex-start;
flex-direction: column;
}
.ndr-body-daily-report {
padding: 14px 12px 18px;
}
.ndr-panel-daily-report>.row {
padding: 12px;
}
.ndr-title-daily-report {
width: 100%;
justify-content: center;
}
}
}
/* ===== admin-components/reports/add-report-components/new-instant-report/new-instant-report.component.css (global) ===== */
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.darkBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid #8ca9b46e;
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
background-color: var(--input--background) !important;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.mat-date-range-picker {
z-index: 9999 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--body--background) !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
border-radius: var(--cart--border--radius) !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color) !important;
}
.mat-datepicker-content {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mdc-icon-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-mdc-form-field-infix {
padding-top: 5px !important;
}
.mat-mdc-text-field-wrapper {
height: 36px !important;
}
.time_input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time_input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:930px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
}
@media only screen and (max-width: 1330px) {
.show-sidebar .report-col-instant {
width: 100%;
}
.show-sidebar .mobile-screen-add-button {
display: block;
}
.show-sidebar .normal-screen-add-button {
display: none;
}
}
@media only screen and (max-width:531px) {
.show-sidebar .label-small {
font-size: 13px;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .template-col-div {
border-bottom: 1.5px solid #8ca9b46e;
}
.nir-page-instant-report .mat-mdc-text-field-wrapper {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent) !important;
border-radius: 8px !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background)) !important;
box-shadow: none !important;
}
.dark-theme .nir-title-instant-report, .darkBlue-theme .nir-title-instant-report, .dark-theme .nir-panel-instant-report>.row, .darkBlue-theme .nir-panel-instant-report>.row {
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 40%), color-mix(in srgb, white 4%, var(--body--background));
}
.dark-theme .nir-page-instant-report .choose_select_add_instant_report, .dark-theme .nir-page-instant-report .new_input_add_instant_report, .dark-theme .nir-page-instant-report .description_area_add_instant_report, .dark-theme .nir-page-instant-report .select-device-brand, .darkBlue-theme .nir-page-instant-report .choose_select_add_instant_report, .darkBlue-theme .nir-page-instant-report .new_input_add_instant_report, .darkBlue-theme .nir-page-instant-report .description_area_add_instant_report, .darkBlue-theme .nir-page-instant-report .select-device-brand {
border-color: rgba(255, 255, 255, 0.08) !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 88%, white 5%), var(--input--background)) !important;
}
.dark-theme .nir-brand-menu-instant-report, .darkBlue-theme .nir-brand-menu-instant-report {
border-color: rgba(255, 255, 255, 0.10) !important;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 12%, transparent), transparent 42%), color-mix(in srgb, white 5%, var(--body--background)) !important;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36) !important;
}
.dark-theme .nir-filter-card-instant-report, .darkBlue-theme .nir-filter-card-instant-report {
border-color: rgba(255, 255, 255, 0.07) !important;
background-color: color-mix(in srgb, var(--body--background) 76%, #242b36 24%) !important;
}
.dark-theme .nir-empty-filter-card-instant-report, .darkBlue-theme .nir-empty-filter-card-instant-report {
border-color: rgba(255, 255, 255, 0.10);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
}
.dark-theme .nir-empty-filter-icon-instant-report, .darkBlue-theme .nir-empty-filter-icon-instant-report {
background-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.dark-theme .nir-filter-body-instant-report, .darkBlue-theme .nir-filter-body-instant-report {
background-color: color-mix(in srgb, var(--body--background) 88%, #202833 12%);
}
.darkBlue-theme .nir-title-instant-report, .darkBlue-theme .nir-panel-instant-report>.row {
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 14%, transparent), transparent 40%), color-mix(in srgb, white 5%, var(--body--background));
}
.lightBlue-theme .nir-title-instant-report, .lightBlue-theme .nir-panel-instant-report>.row {
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), #ffffff;
}
.lightBlue-theme .nir-page-instant-report .choose_select_add_instant_report, .lightBlue-theme .nir-page-instant-report .new_input_add_instant_report, .lightBlue-theme .nir-page-instant-report .description_area_add_instant_report, .lightBlue-theme .nir-page-instant-report .select-device-brand {
border-color: rgba(117, 145, 155, 0.28) !important;
background: #ffffff !important;
}
.lightBlue-theme .nir-brand-menu-instant-report {
border-color: rgba(117, 145, 155, 0.28) !important;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), #ffffff !important;
box-shadow: var(--cart--box--shadow), 0 18px 34px rgba(63, 164, 172, 0.12) !important;
}
.lightBlue-theme .nir-filter-card-instant-report {
border-color: rgba(117, 145, 155, 0.24) !important;
background-color: #f7fbfc !important;
}
.lightBlue-theme .nir-empty-filter-card-instant-report {
border-color: rgba(63, 164, 172, 0.28);
background: linear-gradient(180deg, rgba(63, 164, 172, 0.045), rgba(255, 255, 255, 0.92));
}
.lightBlue-theme .nir-empty-filter-icon-instant-report {
background-color: rgba(63, 164, 172, 0.12);
color: #2f8e96;
}
.lightBlue-theme .nir-filter-body-instant-report {
background-color: #ffffff;
}
.nir-page-instant-report .mat-mdc-text-field-wrapper {
height: 34px !important;
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
}
.nir-page-instant-report .mat-mdc-form-field-flex, .nir-page-instant-report .mat-mdc-text-field-wrapper {
height: 34px !important;
}
.nir-page-instant-report .mat-mdc-form-field-infix {
min-height: 34px !important;
padding-top: 6px !important;
}
.dark-theme .nir-title-instant-report, .darkBlue-theme .nir-title-instant-report {
background: transparent;
}
.dark-theme .nir-panel-instant-report>.row, .darkBlue-theme .nir-panel-instant-report>.row {
border-color: rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, color-mix(in srgb, white 4%, var(--body--background)), var(--body--background));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.dark-theme .nir-page-instant-report .choose_select_add_instant_report, .dark-theme .nir-page-instant-report .new_input_add_instant_report, .dark-theme .nir-page-instant-report .description_area_add_instant_report, .dark-theme .nir-page-instant-report .select-device-brand, .darkBlue-theme .nir-page-instant-report .choose_select_add_instant_report, .darkBlue-theme .nir-page-instant-report .new_input_add_instant_report, .darkBlue-theme .nir-page-instant-report .description_area_add_instant_report, .darkBlue-theme .nir-page-instant-report .select-device-brand {
border-color: rgba(255, 255, 255, 0.07) !important;
background: color-mix(in srgb, white 5%, var(--input--background)) !important;
}
.dark-theme .nir-filter-body-instant-report, .darkBlue-theme .nir-filter-body-instant-report, .dark-theme .nir-page-instant-report .col-6.mb-2 .form-group, .darkBlue-theme .nir-page-instant-report .col-6.mb-2 .form-group {
background-color: rgba(255, 255, 255, 0.035);
border-color: rgba(255, 255, 255, 0.055);
}
.lightBlue-theme .nir-panel-instant-report>.row {
border-color: rgba(117, 145, 155, 0.20);
background: #ffffff;
box-shadow: 0 12px 26px rgba(63, 164, 172, 0.08);
}
.lightBlue-theme .nir-page-instant-report .choose_select_add_instant_report, .lightBlue-theme .nir-page-instant-report .new_input_add_instant_report, .lightBlue-theme .nir-page-instant-report .description_area_add_instant_report, .lightBlue-theme .nir-page-instant-report .select-device-brand {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #fbfdfe !important;
}
.lightBlue-theme .nir-filter-body-instant-report, .lightBlue-theme .nir-page-instant-report .col-6.mb-2 .form-group {
border-color: rgba(117, 145, 155, 0.18);
background-color: rgba(63, 164, 172, 0.035);
}
/* ===== admin-components/reports/add-report-components/new-instant-report/new-instant-report.component.css (scoped) ===== */
app-new-instant-report {
.each-reprot-item-title {
width: 100%;
color: black;
border-bottom: 1.5px solid #3658757c;
margin-bottom: 13px;
font-weight: 500;
padding: 5px;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
.new-report-instant-card {
background-color: transparent;
border: none;
}
.nir-filter-loading-overlay {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
background: var(--input--background);
opacity: 0.85;
border-radius: 6px;
}
.nir-filter-loading-overlay i {
font-size: 1.6rem;
color: var(--primary--body--color);
opacity: 0.8;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.each-reprot-item-title {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.choose_select_add_instant_report {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
border-top-left-radius: var(--cart--border--radius) !important;
border-bottom-left-radius: var(--cart--border--radius) !important;
}
.choose_select_add_instant_report:focus {
outline: none;
}
.choose_select_add_instant_report:active {
outline: none;
}
.new_input_add_instant_report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
height: 36px;
outline: none;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.new_input_add_instant_report::placeholder {
color: var(--primary--body--color);
}
.description_area_add_instant_report {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.description_area_add_instant_report::placeholder {
color: var(--primary--body--color);
font-size: 13px;
}
.report-title-input {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.oriana-button-add-instant-report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.margin-filter {
margin-bottom: 1rem !important;
}
.oriana-button-add-instant-report:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
@media only screen and (max-width:720px) {
.filter-header-col {
width: 50% !important;
}
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.choose_select_add_instant_report::after {
content: none;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.filter-header {
font-size: 11.5px;
}
}
.mobile-screen-add-button {
display: none;
}
.select-device-brand {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 13px;
}
.select-device-brand::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
opacity: 0.7;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
cursor: pointer;
}
.brand-name-span {
margin-left: .3rem;
font-size: 11.5px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.filter-div {
float: left;
}
.accordion-columns-button {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
height: 50px;
}
.accordion-columns-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion-button:focus {
z-index: 0
}
.tooltip-add-report-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 83%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
z-index: 99999;
}
.tooltip-add-report:hover .tooltip-add-report-text {
visibility: visible;
z-index: 99999;
}
@media only screen and (max-width: 1160px) {
.report-col-instant {
width: 100%;
}
.mobile-screen-add-button {
display: block;
}
.normal-screen-add-button {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width:1400px) {
.filter-header {
font-size: 11.5px;
}
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-instant-report {
max-height: 330px;
overflow: auto;
}
.template-col-div {
height: 35px;
border-bottom: 1.5px solid #3658757c;
}
.template-label {
border-bottom: none !important;
}
.add-report-template-div {
color: var(--primary--body--color);
cursor: pointer;
text-align: right;
width: 100%;
}
.nir-page-instant-report {
position: relative;
padding: 12px 4px 24px;
}
.nir-card-instant-report {
overflow: visible;
}
.nir-body-instant-report {
padding: 18px 20px 22px;
overflow: visible;
}
.nir-title-instant-report {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
margin-bottom: 18px !important;
padding: 8px 12px;
border-radius: 8px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
box-shadow: var(--cart--box--shadow);
font-size: 15px;
font-weight: 700;
}
.nir-layout-instant-report {
row-gap: 16px;
}
.nir-panel-instant-report {
overflow: visible;
}
.nir-panel-instant-report>.row {
height: 100%;
margin: 0;
padding: 16px 0px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 10px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 8%, transparent), transparent 38%), color-mix(in srgb, var(--body--background) 96%, var(--input--background));
box-shadow: var(--cart--box--shadow);
}
.nir-filter-panel-instant-report {
padding-right: 0;
}
.nir-panel-grid-instant-report, .nir-filter-grid-instant-report {
align-content: flex-start;
}
.nir-page-instant-report .form-group, .nir-page-instant-report .button-div {
margin-bottom: 14px;
}
.nir-page-instant-report .each-reprot-item-title {
width: 100%;
margin-bottom: 7px;
padding: 0;
border-bottom: none !important;
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0;
opacity: 0.82;
}
.nir-page-instant-report .choose_select_add_instant_report, .nir-page-instant-report .new_input_add_instant_report, .nir-page-instant-report .description_area_add_instant_report, .nir-page-instant-report .select-device-brand {
min-height: 38px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent) !important;
border-radius: 8px !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background)) !important;
box-shadow: none !important;
color: var(--primary--body--color) !important;
opacity: 1;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.nir-page-instant-report .choose_select_add_instant_report:focus, .nir-page-instant-report .new_input_add_instant_report:focus, .nir-page-instant-report .description_area_add_instant_report:focus, .nir-page-instant-report .select-device-brand:focus {
border-color: color-mix(in srgb, var(--secondary--color) 56%, transparent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
outline: none !important;
}
.nir-page-instant-report .description_area_add_instant_report {
min-height: 94px;
padding: 10px 12px;
resize: vertical;
}
.nir-page-instant-report .select_arrow {
position: relative;
}
.nir-page-instant-report .select_arrow::after {
right: 12px;
opacity: 0.7;
}
.nir-brand-dropdown-instant-report {
position: relative;
z-index: 60;
}
.nir-brand-dropdown-instant-report:has(.nir-brand-menu-instant-report.show), .nir-brand-dropdown-instant-report:focus-within {
z-index: 1500;
}
.nir-brand-toggle-instant-report {
display: flex;
align-items: center;
gap: 8px;
padding-right: 34px;
}
.nir-brand-menu-instant-report {
width: 100%;
max-height: 330px;
padding: 6px !important;
z-index: 1600 !important;
overflow: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent) !important;
border-radius: 8px !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background)) !important;
box-shadow: var(--cart--box--shadow), 0 18px 36px color-mix(in srgb, #000000 14%, transparent) !important;
}
.nir-brand-search-instant-report {
padding: 8px !important;
border-radius: 6px;
}
.nir-brand-search-instant-report i {
top: 50%;
transform: translateY(-50%) !important;
}
.nir-brand-item-instant-report, .nir-brand-empty-instant-report {
min-height: 34px;
margin-bottom: 2px;
padding: 7px 9px !important;
border-radius: 6px;
color: var(--primary--body--color);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.nir-brand-item-instant-report:hover {
transform: translateX(2px);
background-color: color-mix(in srgb, var(--secondary--color) 13%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.nir-template-action-instant-report {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: var(--primary--body--color);
opacity: 0.72;
}
.nir-template-action-instant-report:hover {
opacity: 1;
}
.nir-page-instant-report .template-col-div {
align-items: center;
height: auto;
min-height: 31px;
border-bottom: none !important;
}
.nir-page-instant-report .mat-mdc-form-field {
margin-bottom: 12px;
}
.nir-page-instant-report .switch {
margin-top: 3px;
}
.nir-action-row-instant-report {
margin-top: 4px;
}
.nir-filter-title-row-instant-report {
margin-bottom: 10px !important;
}
.nir-filter-title-instant-report {
display: inline-flex;
align-items: center;
width: auto !important;
margin: 0 !important;
padding: 6px 0 !important;
font-size: 14px !important;
}
.nir-filter-scroll-instant-report {
width: 100%;
padding-right: 5px;
}
.nir-filter-scroll-instant-report::-webkit-scrollbar, .nir-brand-menu-instant-report::-webkit-scrollbar {
width: 4px;
}
.nir-filter-scroll-instant-report::-webkit-scrollbar-thumb, .nir-brand-menu-instant-report::-webkit-scrollbar-thumb {
border-radius: 999px;
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
}
.nir-filter-card-instant-report {
overflow: hidden;
margin-bottom: 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
border-radius: 8px !important;
background-color: color-mix(in srgb, var(--input--background) 70%, var(--body--background)) !important;
box-shadow: none !important;
}
.nir-filter-summary-instant-report {
min-height: 48px;
border-bottom: none !important;
background-color: transparent !important;
color: var(--primary--body--color) !important;
}
.nir-filter-summary-instant-report[aria-expanded="true"] {
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary--body--color) 10%, transparent);
}
.nir-filter-body-instant-report {
padding: 14px 12px 4px;
background-color: color-mix(in srgb, var(--body--background) 96%, var(--input--background));
}
.nir-filter-body-instant-report .input-group {
display: block;
width: 100%;
}
.nir-add-filter-row-instant-report {
width: 100%;
}
.nir-add-filter-instant-report {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 8px 11px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 38%, transparent) !important;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
opacity: 1;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nir-add-filter-instant-report:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 62%, transparent) !important;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.nir-empty-filter-wrap-instant-report {
width: 100%;
}
.nir-empty-filter-card-instant-report {
display: flex;
align-items: center;
gap: 14px;
min-height: 112px;
padding: 18px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 48%, transparent), color-mix(in srgb, var(--body--background) 94%, var(--input--background)));
}
.nir-empty-filter-icon-instant-report {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 9px;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
color: var(--secondary--color);
font-size: 17px;
}
.nir-empty-filter-content-instant-report {
display: grid;
gap: 3px;
flex: 1;
min-width: 0;
}
.nir-empty-filter-title-instant-report {
color: var(--primary--body--color);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.nir-empty-filter-text-instant-report {
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.35;
opacity: 0.64;
}
@media only screen and (max-width: 1160px) {
.nir-config-panel-instant-report, .nir-filter-panel-instant-report {
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (max-width: 760px) {
.nir-empty-filter-card-instant-report {
align-items: flex-start;
flex-direction: column;
}
}
@media only screen and (max-width: 720px) {
.nir-body-instant-report {
padding: 14px 12px 18px;
}
.nir-panel-instant-report>.row {
padding: 12px;
}
.nir-title-instant-report {
width: 100%;
justify-content: center;
}
}
.nir-page-instant-report {
padding: 8px 0 22px;
}
.nir-body-instant-report {
padding: 10px;
}
.nir-title-instant-report {
width: auto;
margin: 0 0 14px !important;
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--primary--body--color);
font-size: 18px;
letter-spacing: 0;
}
.nir-panel-instant-report>.row {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 98%, var(--input--background)), var(--body--background));
box-shadow: 0 10px 28px color-mix(in srgb, #000000 7%, transparent);
}
.nir-config-panel-instant-report {
padding-right: 8px;
}
.nir-filter-panel-instant-report {
padding-left: 8px;
}
.nir-page-instant-report .form-group, .nir-page-instant-report .button-div {
margin-bottom: 12px;
}
.nir-page-instant-report .each-reprot-item-title {
margin-bottom: 5px;
color: color-mix(in srgb, var(--primary--body--color) 86%, transparent);
font-size: 11.5px;
font-weight: 650;
}
.nir-page-instant-report .choose_select_add_instant_report, .nir-page-instant-report .new_input_add_instant_report, .nir-page-instant-report .description_area_add_instant_report, .nir-page-instant-report .select-device-brand {
min-height: 34px;
height: 34px;
padding: 6px 10px;
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
font-size: 12.5px;
}
.nir-page-instant-report .choose_select_add_instant_report:hover, .nir-page-instant-report .new_input_add_instant_report:hover, .nir-page-instant-report .description_area_add_instant_report:hover, .nir-page-instant-report .select-device-brand:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent) !important;
}
.nir-page-instant-report .choose_select_add_instant_report:focus, .nir-page-instant-report .new_input_add_instant_report:focus, .nir-page-instant-report .description_area_add_instant_report:focus, .nir-page-instant-report .select-device-brand:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
}
.nir-page-instant-report:not(.nir-report-submitted-instant-report) .new_input_add_instant_report.is-invalid:not(.ng-touched):not(.ng-dirty), .nir-page-instant-report:not(.nir-report-submitted-instant-report) .description_area_add_instant_report.is-invalid:not(.ng-touched):not(.ng-dirty), .nir-page-instant-report:not(.nir-report-submitted-instant-report) .choose_select_add_instant_report.is-invalid:not(.ng-touched):not(.ng-dirty), .nir-page-instant-report:not(.nir-report-submitted-instant-report) .select-device-brand.is-invalid:not(.ng-touched):not(.ng-dirty) {
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
background-image: none !important;
}
.nir-page-instant-report.nir-report-submitted-instant-report .new_input_add_instant_report.is-invalid, .nir-page-instant-report.nir-report-submitted-instant-report .description_area_add_instant_report.is-invalid, .nir-page-instant-report.nir-report-submitted-instant-report .choose_select_add_instant_report.is-invalid, .nir-page-instant-report.nir-report-submitted-instant-report .select-device-brand.is-invalid, .nir-page-instant-report .new_input_add_instant_report.is-invalid.ng-touched, .nir-page-instant-report .new_input_add_instant_report.is-invalid.ng-dirty, .nir-page-instant-report .description_area_add_instant_report.is-invalid.ng-touched, .nir-page-instant-report .description_area_add_instant_report.is-invalid.ng-dirty, .nir-page-instant-report .choose_select_add_instant_report.is-invalid.ng-touched, .nir-page-instant-report .choose_select_add_instant_report.is-invalid.ng-dirty, .nir-page-instant-report .select-device-brand.is-invalid.ng-touched, .nir-page-instant-report .select-device-brand.is-invalid.ng-dirty {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.nir-page-instant-report.nir-report-submitted-instant-report .new_input_add_instant_report.is-invalid, .nir-page-instant-report.nir-report-submitted-instant-report .select-device-brand.is-invalid, .nir-page-instant-report .new_input_add_instant_report.is-invalid.ng-touched, .nir-page-instant-report .new_input_add_instant_report.is-invalid.ng-dirty, .nir-page-instant-report .select-device-brand.is-invalid.ng-touched, .nir-page-instant-report .select-device-brand.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 21px center !important;
}
.nir-page-instant-report.nir-report-submitted-instant-report .description_area_add_instant_report.is-invalid, .nir-page-instant-report .description_area_add_instant_report.is-invalid.ng-touched, .nir-page-instant-report .description_area_add_instant_report.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 11px top 10px !important;
}
.nir-page-instant-report.nir-report-submitted-instant-report .choose_select_add_instant_report.is-invalid, .nir-page-instant-report .choose_select_add_instant_report.is-invalid.ng-touched, .nir-page-instant-report .choose_select_add_instant_report.is-invalid.ng-dirty {
padding-right: 42px !important;
background-position: right 28px center !important;
}
.nir-page-instant-report .description_area_add_instant_report {
height: auto;
min-height: 76px;
line-height: 1.45;
}
.nir-page-instant-report .col-6.mb-2 .form-group {
min-height: 58px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 44%, transparent);
}
.nir-brand-menu-instant-report {
padding: 5px !important;
border-radius: 9px !important;
background: var(--body--background) !important;
box-shadow: 0 18px 34px color-mix(in srgb, #000000 16%, transparent) !important;
}
.nir-brand-search-instant-report {
padding: 5px !important;
margin-bottom: 4px !important;
}
.nir-brand-item-instant-report, .nir-brand-empty-instant-report {
min-height: 32px;
padding: 6px 8px !important;
}
.nir-filter-title-instant-report {
padding-bottom: 8px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
font-size: 13.5px !important;
}
.nir-filter-scroll-instant-report {
max-height: 560px !important;
padding: 2px 4px 2px 0;
}
.nir-filter-card-instant-report {
margin-bottom: 8px;
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent) !important;
background-color: transparent !important;
}
.nir-filter-summary-instant-report {
min-height: 42px;
padding: 8px 11px !important;
}
.nir-filter-summary-instant-report h6 {
margin: 0;
color: var(--primary--body--color);
font-size: 11.5px !important;
font-weight: 650;
opacity: 0.82;
}
.nir-filter-body-instant-report {
padding: 12px 10px 2px;
background-color: color-mix(in srgb, var(--input--background) 35%, transparent);
}
.nir-filter-body-instant-report .row {
row-gap: 8px;
}
.nir-filter-body-instant-report .input-group {
margin-bottom: 0 !important;
}
.nir-add-filter-instant-report {
padding: 7px 10px;
border-radius: 7px;
font-size: 12.5px;
}
.nir-action-row-instant-report .confirm_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nir-action-row-instant-report .confirm_button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.nir-action-row-instant-report .confirm_button:hover {
box-shadow: 0 10px 20px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.nir-final-action-row-instant-report {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding: 0;
margin-top: 2px !important;
}
.nir-final-action-row-instant-report .form-group {
margin-bottom: 0 !important;
}
.nir-final-add-button-instant-report {
min-width: 118px;
}
@media only screen and (max-width: 1160px) {
.nir-config-panel-instant-report, .nir-filter-panel-instant-report {
padding-right: 0;
padding-left: 0;
}
}
}
/* ===== admin-components/reports/add-report-components/new-monthly-report/new-monthly-report.component.css (global) ===== */
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.darkBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid #8ca9b46e;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.mat-date-range-picker {
z-index: 9999 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--body--background) !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
border-radius: var(--cart--border--radius) !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color) !important;
}
.mat-datepicker-content {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mdc-icon-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-mdc-form-field-infix {
padding-top: 5px !important;
}
.mat-mdc-text-field-wrapper {
height: 36px !important;
}
.time_input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time_input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:531px) {
.show-sidebar .label-small {
font-size: 13px;
}
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:610px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
@media only screen and (max-width:930px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
.show-sidebar .f-left-mobile {
float: left;
}
}
@media only screen and (max-width: 1450px) {
.show-sidebar .report-col {
width: 100%;
}
}
@media only screen and (max-width: 1330px) {
.show-sidebar .report-col-monthly {
width: 100%;
}
.show-sidebar .mobile-screen-add-button {
display: block;
}
.show-sidebar .normal-screen-add-button {
display: none;
}
}
@media only screen and (max-width:610px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
}
.darkBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .template-col-div {
border-bottom: 1.5px solid #8ca9b46e;
}
.nmr-page-monthly-report .mat-mdc-text-field-wrapper {
height: 34px !important;
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
}
.nmr-page-monthly-report .mat-mdc-form-field-flex, .nmr-page-monthly-report .mat-mdc-text-field-wrapper {
height: 34px !important;
}
.nmr-page-monthly-report .mat-mdc-form-field-infix {
min-height: 34px !important;
padding-top: 6px !important;
}
.dark-theme .nmr-title-monthly-report, .darkBlue-theme .nmr-title-monthly-report {
background: transparent;
}
.dark-theme .nmr-panel-monthly-report>.row, .darkBlue-theme .nmr-panel-monthly-report>.row {
border-color: rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, color-mix(in srgb, white 4%, var(--body--background)), var(--body--background));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.dark-theme .nmr-page-monthly-report .choose_select_add_monthly_report, .dark-theme .nmr-page-monthly-report .new_input_add_monthly_report, .dark-theme .nmr-page-monthly-report .description_area_add_monthly_report, .dark-theme .nmr-page-monthly-report .select-device-brand, .darkBlue-theme .nmr-page-monthly-report .choose_select_add_monthly_report, .darkBlue-theme .nmr-page-monthly-report .new_input_add_monthly_report, .darkBlue-theme .nmr-page-monthly-report .description_area_add_monthly_report, .darkBlue-theme .nmr-page-monthly-report .select-device-brand {
border-color: rgba(255, 255, 255, 0.07) !important;
background: color-mix(in srgb, white 5%, var(--input--background)) !important;
}
.dark-theme .nmr-brand-menu-monthly-report, .darkBlue-theme .nmr-brand-menu-monthly-report {
border-color: rgba(255, 255, 255, 0.10) !important;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 12%, transparent), transparent 42%), color-mix(in srgb, white 5%, var(--body--background)) !important;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36) !important;
}
.dark-theme .nmr-filter-card-monthly-report, .darkBlue-theme .nmr-filter-card-monthly-report {
border-color: rgba(255, 255, 255, 0.07) !important;
background-color: color-mix(in srgb, var(--body--background) 76%, #242b36 24%) !important;
}
.dark-theme .nmr-filter-body-monthly-report, .darkBlue-theme .nmr-filter-body-monthly-report, .dark-theme .nmr-page-monthly-report .col-6.mb-2 .form-group, .darkBlue-theme .nmr-page-monthly-report .col-6.mb-2 .form-group {
border-color: rgba(255, 255, 255, 0.055);
background-color: rgba(255, 255, 255, 0.035);
}
.dark-theme .nmr-empty-filter-card-monthly-report, .darkBlue-theme .nmr-empty-filter-card-monthly-report {
border-color: rgba(255, 255, 255, 0.10);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
}
.dark-theme .nmr-empty-filter-icon-monthly-report, .darkBlue-theme .nmr-empty-filter-icon-monthly-report {
background-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.darkBlue-theme .nmr-panel-monthly-report>.row {
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 14%, transparent), transparent 40%), color-mix(in srgb, white 5%, var(--body--background));
}
.lightBlue-theme .nmr-panel-monthly-report>.row {
border-color: rgba(117, 145, 155, 0.20);
background: #ffffff;
box-shadow: 0 12px 26px rgba(63, 164, 172, 0.08);
}
.lightBlue-theme .nmr-page-monthly-report .choose_select_add_monthly_report, .lightBlue-theme .nmr-page-monthly-report .new_input_add_monthly_report, .lightBlue-theme .nmr-page-monthly-report .description_area_add_monthly_report, .lightBlue-theme .nmr-page-monthly-report .select-device-brand {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #fbfdfe !important;
}
.lightBlue-theme .nmr-brand-menu-monthly-report {
border-color: rgba(117, 145, 155, 0.28) !important;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), #ffffff !important;
box-shadow: var(--cart--box--shadow), 0 18px 34px rgba(63, 164, 172, 0.12) !important;
}
.lightBlue-theme .nmr-filter-card-monthly-report {
border-color: rgba(117, 145, 155, 0.24) !important;
background-color: #f7fbfc !important;
}
.lightBlue-theme .nmr-filter-body-monthly-report, .lightBlue-theme .nmr-page-monthly-report .col-6.mb-2 .form-group {
border-color: rgba(117, 145, 155, 0.18);
background-color: rgba(63, 164, 172, 0.035);
}
.lightBlue-theme .nmr-empty-filter-card-monthly-report {
border-color: rgba(63, 164, 172, 0.28);
background: linear-gradient(180deg, rgba(63, 164, 172, 0.045), rgba(255, 255, 255, 0.92));
}
.lightBlue-theme .nmr-empty-filter-icon-monthly-report {
background-color: rgba(63, 164, 172, 0.12);
color: #2f8e96;
}
/* ===== admin-components/reports/add-report-components/new-monthly-report/new-monthly-report.component.css (scoped) ===== */
app-new-monthly-report {
.each-reprot-item-title {
width: 100%;
color: black;
border-bottom: 1.5px solid #3658757c;
margin-bottom: 13px;
font-weight: 500;
padding: 5px;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
.new-report-monthly-card {
background-color: transparent;
border: none;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.each-reprot-item-title {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.choose_select_add_monthly_report {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
border-top-left-radius: var(--cart--border--radius) !important;
border-bottom-left-radius: var(--cart--border--radius) !important;
}
.choose_select_add_monthly_report:focus {
outline: none;
}
.choose_select_add_monthly_report:active {
outline: none;
}
.new_input_add_monthly_report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
outline: none;
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.new_input_add_monthly_report::placeholder {
color: var(--primary--body--color);
}
.description_area_add_monthly_report {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.description_area_add_monthly_report::placeholder {
color: var(--primary--body--color);
font-size: 13px;
}
.report-title-input {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.oriana-button-add-monthly-report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.oriana-button-add-monthly-report:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.mobile-screen-add-button {
display: none;
}
.select-device-brand {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.select-device-brand::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
opacity: 0.7;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
cursor: pointer;
}
.brand-name-span {
margin-left: .3rem;
font-size: 13.5px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.filter-div {
float: left;
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media only screen and (min-width: 992px) and (max-width:1310px) {
.filter-header {
font-size: 11.5px;
}
}
@media only screen and (max-width: 1160px) {
.report-col-monthly {
width: 100%;
}
.mobile-screen-add-button {
display: block;
}
.normal-screen-add-button {
display: none;
}
}
@media only screen and (max-width:720px) {
.filter-header-col {
width: 50% !important;
}
.f-left-mobile {
float: left;
}
}
.accordion-columns-button {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
height: 50px;
}
.accordion-columns-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion-button:focus {
z-index: 0
}
.tooltip-add-report-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 83%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
z-index: 99999;
}
.tooltip-add-report:hover .tooltip-add-report-text {
visibility: visible;
z-index: 99999;
}
@media only screen and (min-width: 992px) and (max-width:1400px) {
.filter-header {
font-size: 11.5px;
}
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-monthly-report {
max-height: 330px;
overflow: auto;
}
.template-col-div {
height: 35px;
margin-bottom: 0.7rem;
border-bottom: 1.5px solid #3658757c;
}
.template-label {
border-bottom: none !important;
}
.add-report-template-div {
color: var(--primary--body--color);
cursor: pointer;
text-align: right;
width: 100%;
}
.nmr-page-monthly-report {
position: relative;
padding: 8px 0 22px;
}
.nmr-card-monthly-report {
overflow: visible;
}
.nmr-body-monthly-report {
padding: 10px;
overflow: visible;
}
.nmr-title-monthly-report {
width: auto;
margin: 0 0 14px !important;
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--primary--body--color);
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
}
.nmr-layout-monthly-report {
row-gap: 16px;
align-items: stretch;
}
.nmr-panel-monthly-report {
display: flex;
overflow: visible;
}
.nmr-panel-monthly-report>.row {
width: 100%;
height: 100%;
margin: 0;
padding: 16px 0px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 98%, var(--input--background)), var(--body--background));
box-shadow: 0 10px 28px color-mix(in srgb, #000000 7%, transparent);
}
.nmr-config-panel-monthly-report {
padding-right: 8px;
}
.nmr-panel-grid-monthly-report, .nmr-filter-grid-monthly-report {
align-content: flex-start;
}
.nmr-page-monthly-report .form-group, .nmr-page-monthly-report .button-div {
margin-bottom: 12px;
}
.nmr-page-monthly-report .each-reprot-item-title {
width: 100%;
margin-bottom: 5px;
padding: 0;
border-bottom: none !important;
color: color-mix(in srgb, var(--primary--body--color) 86%, transparent);
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0;
opacity: 1;
}
.nmr-page-monthly-report .choose_select_add_monthly_report, .nmr-page-monthly-report .new_input_add_monthly_report, .nmr-page-monthly-report .description_area_add_monthly_report, .nmr-page-monthly-report .select-device-brand {
min-height: 34px;
height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
color: var(--primary--body--color) !important;
font-size: 12.5px;
opacity: 1;
outline: none !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.nmr-page-monthly-report .choose_select_add_monthly_report:hover, .nmr-page-monthly-report .new_input_add_monthly_report:hover, .nmr-page-monthly-report .description_area_add_monthly_report:hover, .nmr-page-monthly-report .select-device-brand:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent) !important;
}
.nmr-page-monthly-report .choose_select_add_monthly_report:focus, .nmr-page-monthly-report .new_input_add_monthly_report:focus, .nmr-page-monthly-report .description_area_add_monthly_report:focus, .nmr-page-monthly-report .select-device-brand:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
}
.nmr-page-monthly-report .new_input_add_monthly_report.is-invalid, .nmr-page-monthly-report .description_area_add_monthly_report.is-invalid, .nmr-page-monthly-report .choose_select_add_monthly_report.is-invalid, .nmr-page-monthly-report .select-device-brand.is-invalid {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.nmr-page-monthly-report:not(.nmr-report-submitted-monthly-report) .new_input_add_monthly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .nmr-page-monthly-report:not(.nmr-report-submitted-monthly-report) .description_area_add_monthly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .nmr-page-monthly-report:not(.nmr-report-submitted-monthly-report) .choose_select_add_monthly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .nmr-page-monthly-report:not(.nmr-report-submitted-monthly-report) .select-device-brand.is-invalid:not(.ng-touched):not(.ng-dirty) {
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
background-image: none !important;
}
.nmr-page-monthly-report.nmr-report-submitted-monthly-report .new_input_add_monthly_report.is-invalid, .nmr-page-monthly-report.nmr-report-submitted-monthly-report .select-device-brand.is-invalid, .nmr-page-monthly-report .new_input_add_monthly_report.is-invalid.ng-touched, .nmr-page-monthly-report .new_input_add_monthly_report.is-invalid.ng-dirty, .nmr-page-monthly-report .select-device-brand.is-invalid.ng-touched, .nmr-page-monthly-report .select-device-brand.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 21px center !important;
}
.nmr-page-monthly-report.nmr-report-submitted-monthly-report .description_area_add_monthly_report.is-invalid, .nmr-page-monthly-report .description_area_add_monthly_report.is-invalid.ng-touched, .nmr-page-monthly-report .description_area_add_monthly_report.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 11px top 10px !important;
}
.nmr-page-monthly-report.nmr-report-submitted-monthly-report .choose_select_add_monthly_report.is-invalid, .nmr-page-monthly-report .choose_select_add_monthly_report.is-invalid.ng-touched, .nmr-page-monthly-report .choose_select_add_monthly_report.is-invalid.ng-dirty {
padding-right: 42px !important;
background-position: right 28px center !important;
}
.nmr-page-monthly-report .description_area_add_monthly_report {
height: auto;
min-height: 76px;
line-height: 1.45;
resize: vertical;
}
.nmr-page-monthly-report .select_arrow {
position: relative;
}
.nmr-page-monthly-report .select_arrow::after {
right: 12px;
opacity: 0.7;
}
.nmr-page-monthly-report .col-6.mb-2 .form-group {
min-height: 58px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 44%, transparent);
}
.nmr-brand-dropdown-monthly-report {
position: relative;
z-index: 60;
}
.nmr-brand-dropdown-monthly-report:has(.nmr-brand-menu-monthly-report.show), .nmr-brand-dropdown-monthly-report:focus-within {
z-index: 1500;
}
.nmr-brand-toggle-monthly-report {
display: flex;
align-items: center;
gap: 8px;
padding-right: 34px;
}
.nmr-brand-menu-monthly-report {
width: 100%;
max-height: 330px;
padding: 5px !important;
z-index: 1600 !important;
overflow: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent) !important;
border-radius: 9px !important;
background: var(--body--background) !important;
box-shadow: 0 18px 34px color-mix(in srgb, #000000 16%, transparent) !important;
}
.nmr-brand-search-monthly-report {
padding: 5px !important;
margin-bottom: 4px !important;
border-radius: 6px;
}
.nmr-brand-search-monthly-report i {
top: 50%;
transform: translateY(-50%) !important;
}
.nmr-brand-item-monthly-report, .nmr-brand-empty-monthly-report {
min-height: 32px;
margin-bottom: 2px;
padding: 6px 8px !important;
border-radius: 6px;
color: var(--primary--body--color);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.nmr-brand-item-monthly-report:hover {
transform: translateX(2px);
background-color: color-mix(in srgb, var(--secondary--color) 13%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.nmr-template-action-monthly-report {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: var(--primary--body--color);
opacity: 0.72;
}
.nmr-template-action-monthly-report:hover {
opacity: 1;
}
.nmr-page-monthly-report .template-col-div {
align-items: center;
height: auto;
min-height: 31px;
margin-bottom: 8px;
border-bottom: none !important;
}
.nmr-filter-title-monthly-report {
padding-bottom: 8px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
font-size: 13.5px !important;
}
.nmr-filter-title-row-monthly-report {
margin-top: .3rem !important;
}
.nmr-filter-scroll-monthly-report {
max-height: 560px !important;
padding: 2px 4px 2px 0;
}
.nmr-filter-card-monthly-report {
margin-bottom: 8px;
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent) !important;
background-color: transparent !important;
}
.nmr-filter-summary-monthly-report {
min-height: 42px;
padding: 8px 11px !important;
}
.nmr-filter-summary-monthly-report h6 {
margin: 0;
color: var(--primary--body--color);
font-size: 11.5px !important;
font-weight: 650;
opacity: 0.82;
}
.nmr-filter-body-monthly-report {
padding: 12px 10px 2px;
background-color: color-mix(in srgb, var(--input--background) 35%, transparent);
}
.nmr-filter-body-monthly-report .row {
row-gap: 8px;
}
.nmr-filter-body-monthly-report .input-group {
margin-bottom: 0 !important;
}
.nmr-add-filter-monthly-report {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 38%, transparent) !important;
border-radius: 7px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
opacity: 1;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nmr-add-filter-monthly-report:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 62%, transparent) !important;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.nmr-empty-filter-wrap-monthly-report {
width: 100%;
}
.nmr-empty-filter-card-monthly-report {
display: flex;
align-items: center;
gap: 14px;
min-height: 112px;
padding: 18px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 48%, transparent), color-mix(in srgb, var(--body--background) 94%, var(--input--background)));
}
.nmr-empty-filter-icon-monthly-report {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 9px;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
color: var(--secondary--color);
font-size: 17px;
}
.nmr-empty-filter-content-monthly-report {
display: grid;
gap: 3px;
flex: 1;
min-width: 0;
}
.nmr-empty-filter-title-monthly-report {
color: var(--primary--body--color);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.nmr-empty-filter-text-monthly-report {
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.35;
opacity: 0.64;
}
.nmr-action-row-monthly-report .confirm_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nmr-action-row-monthly-report .confirm_button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.nmr-final-action-row-monthly-report {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding: 0;
margin-top: 2px !important;
}
.nmr-final-action-row-monthly-report .form-group {
margin-bottom: 0 !important;
}
.nmr-final-add-button-monthly-report {
min-width: 118px;
}
@media only screen and (max-width: 1160px) {
.nmr-config-panel-monthly-report, .nmr-filter-panel-monthly-report {
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (max-width: 720px) {
.nmr-empty-filter-card-monthly-report {
align-items: flex-start;
flex-direction: column;
}
.nmr-body-monthly-report {
padding: 14px 12px 18px;
}
.nmr-panel-monthly-report>.row {
padding: 12px;
}
.nmr-title-monthly-report {
width: 100%;
justify-content: center;
}
}
}
/* ===== admin-components/reports/add-report-components/new-weekly-report/new-weekly-report.component.css (global) ===== */
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.mat-form-field-flex {
background: #e9ecef;
border-radius: 5px;
padding-left: 12px;
padding-right: 12px;
font-size: 13px;
color: black;
}
.darkBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid #8ca9b46e;
}
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.mat-date-range-picker {
z-index: 9999 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--body--background) !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
border-radius: var(--cart--border--radius) !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color) !important;
}
.mat-datepicker-content {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mdc-icon-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-mdc-form-field-infix {
padding-top: 5px !important;
}
.mat-mdc-text-field-wrapper {
height: 36px !important;
}
.time_input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time_input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:610px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
}
@media only screen and (max-width:531px) {
.show-sidebar .label-small {
font-size: 13px;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
@media only screen and (max-width: 1330px) {
.show-sidebar .report-col-weekly {
width: 100%;
}
.show-sidebar .mobile-screen-add-button {
display: block;
}
.show-sidebar .normal-screen-add-button {
display: none;
}
}
@media only screen and (max-width:930px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
.show-sidebar .f-left-mobile {
float: left;
}
}
@media only screen and (max-width: 1450px) {
.show-sidebar .report-col {
width: 100%;
}
}
.darkBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .template-col-div {
border-bottom: 1.5px solid #8ca9b46e;
}
.nwr-page-weekly-report .mat-mdc-text-field-wrapper {
height: 34px !important;
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
}
.nwr-page-weekly-report .mat-mdc-form-field-flex, .nwr-page-weekly-report .mat-mdc-text-field-wrapper {
height: 34px !important;
}
.nwr-page-weekly-report .mat-mdc-form-field-infix {
min-height: 34px !important;
padding-top: 6px !important;
}
.dark-theme .nwr-title-weekly-report, .darkBlue-theme .nwr-title-weekly-report {
background: transparent;
}
.dark-theme .nwr-panel-weekly-report>.row, .darkBlue-theme .nwr-panel-weekly-report>.row {
border-color: rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, color-mix(in srgb, white 4%, var(--body--background)), var(--body--background));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.dark-theme .nwr-page-weekly-report .choose_select_add_weekly_report, .dark-theme .nwr-page-weekly-report .new_input_add_weekly_report, .dark-theme .nwr-page-weekly-report .description_area_add_weekly_report, .dark-theme .nwr-page-weekly-report .select-device-brand, .darkBlue-theme .nwr-page-weekly-report .choose_select_add_weekly_report, .darkBlue-theme .nwr-page-weekly-report .new_input_add_weekly_report, .darkBlue-theme .nwr-page-weekly-report .description_area_add_weekly_report, .darkBlue-theme .nwr-page-weekly-report .select-device-brand {
border-color: rgba(255, 255, 255, 0.07) !important;
background: color-mix(in srgb, white 5%, var(--input--background)) !important;
}
.dark-theme .nwr-brand-menu-weekly-report, .darkBlue-theme .nwr-brand-menu-weekly-report {
border-color: rgba(255, 255, 255, 0.10) !important;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 12%, transparent), transparent 42%), color-mix(in srgb, white 5%, var(--body--background)) !important;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36) !important;
}
.dark-theme .nwr-filter-card-weekly-report, .darkBlue-theme .nwr-filter-card-weekly-report {
border-color: rgba(255, 255, 255, 0.07) !important;
background-color: color-mix(in srgb, var(--body--background) 76%, #242b36 24%) !important;
}
.dark-theme .nwr-filter-body-weekly-report, .darkBlue-theme .nwr-filter-body-weekly-report, .dark-theme .nwr-page-weekly-report .col-6.mb-2 .form-group, .darkBlue-theme .nwr-page-weekly-report .col-6.mb-2 .form-group {
border-color: rgba(255, 255, 255, 0.055);
background-color: rgba(255, 255, 255, 0.035);
}
.dark-theme .nwr-empty-filter-card-weekly-report, .darkBlue-theme .nwr-empty-filter-card-weekly-report {
border-color: rgba(255, 255, 255, 0.10);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
}
.dark-theme .nwr-empty-filter-icon-weekly-report, .darkBlue-theme .nwr-empty-filter-icon-weekly-report {
background-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.darkBlue-theme .nwr-panel-weekly-report>.row {
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 14%, transparent), transparent 40%), color-mix(in srgb, white 5%, var(--body--background));
}
.lightBlue-theme .nwr-panel-weekly-report>.row {
border-color: rgba(117, 145, 155, 0.20);
background: #ffffff;
box-shadow: 0 12px 26px rgba(63, 164, 172, 0.08);
}
.lightBlue-theme .nwr-page-weekly-report .choose_select_add_weekly_report, .lightBlue-theme .nwr-page-weekly-report .new_input_add_weekly_report, .lightBlue-theme .nwr-page-weekly-report .description_area_add_weekly_report, .lightBlue-theme .nwr-page-weekly-report .select-device-brand {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #fbfdfe !important;
}
.lightBlue-theme .nwr-brand-menu-weekly-report {
border-color: rgba(117, 145, 155, 0.28) !important;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), #ffffff !important;
box-shadow: var(--cart--box--shadow), 0 18px 34px rgba(63, 164, 172, 0.12) !important;
}
.lightBlue-theme .nwr-filter-card-weekly-report {
border-color: rgba(117, 145, 155, 0.24) !important;
background-color: #f7fbfc !important;
}
.lightBlue-theme .nwr-filter-body-weekly-report, .lightBlue-theme .nwr-page-weekly-report .col-6.mb-2 .form-group {
border-color: rgba(117, 145, 155, 0.18);
background-color: rgba(63, 164, 172, 0.035);
}
.lightBlue-theme .nwr-empty-filter-card-weekly-report {
border-color: rgba(63, 164, 172, 0.28);
background: linear-gradient(180deg, rgba(63, 164, 172, 0.045), rgba(255, 255, 255, 0.92));
}
.lightBlue-theme .nwr-empty-filter-icon-weekly-report {
background-color: rgba(63, 164, 172, 0.12);
color: #2f8e96;
}
/* ===== admin-components/reports/add-report-components/new-weekly-report/new-weekly-report.component.css (scoped) ===== */
app-new-weekly-report {
.each-reprot-item-title {
width: 100%;
color: black;
border-bottom: 1.5px solid #3658757c;
margin-bottom: 13px;
font-weight: 500;
padding: 5px;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
.new-report-weekly-card {
background-color: transparent;
border: none;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.each-reprot-item-title {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.choose_select_add_weekly_report {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
border-top-left-radius: var(--cart--border--radius) !important;
border-bottom-left-radius: var(--cart--border--radius) !important;
}
.choose_select_add_weekly_report:focus {
outline: none;
}
.choose_select_add_weekly_report:active {
outline: none;
}
.new_input_add_weekly_report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
outline: none;
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.new_input_add_weekly_report::placeholder {
color: var(--primary--body--color);
}
.description_area_add_weekly_report {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.description_area_add_weekly_report::placeholder {
color: var(--primary--body--color);
font-size: 13px;
}
.report-title-input {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.oriana-button-add-weekly-report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.oriana-button-add-weekly-report:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.select-device-brand {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.select-device-brand::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
opacity: 0.7;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
cursor: pointer;
}
.brand-name-span {
margin-left: .3rem;
font-size: 13.5px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.filter-div {
float: left;
}
.mobile-screen-add-button {
display: none;
}
@media only screen and (max-width: 1160px) {
.report-col-instant {
width: 100%;
}
.mobile-screen-add-button {
display: block;
}
.normal-screen-add-button {
display: none;
}
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media only screen and (min-width: 992px) and (max-width:1310px) {
.filter-header {
font-size: 11.5px;
}
}
@media only screen and (max-width: 1150px) {
.report-col-weekly {
width: 100%;
}
}
@media only screen and (max-width:720px) {
.filter-header-col {
width: 50% !important;
}
.f-left-mobile {
float: left;
}
}
.accordion-columns-button {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
height: 50px;
}
.accordion-columns-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion-button:focus {
z-index: 0
}
.tooltip-add-report-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 83%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
z-index: 99999;
}
.tooltip-add-report:hover .tooltip-add-report-text {
visibility: visible;
z-index: 99999;
}
@media only screen and (min-width: 992px) and (max-width:1400px) {
.filter-header {
font-size: 11.5px;
}
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-weekly-report {
max-height: 330px;
overflow: auto;
}
.template-col-div {
height: 35px;
margin-bottom: 0.7rem;
border-bottom: 1.5px solid #3658757c;
}
.template-label {
border-bottom: none !important;
}
.add-report-template-div {
color: var(--primary--body--color);
cursor: pointer;
text-align: right;
width: 100%;
}
.nwr-page-weekly-report {
position: relative;
padding: 8px 0 22px;
}
.nwr-card-weekly-report {
overflow: visible;
}
.nwr-body-weekly-report {
padding: 10px;
overflow: visible;
}
.nwr-title-weekly-report {
width: auto;
margin: 0 0 14px !important;
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--primary--body--color);
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
}
.nwr-layout-weekly-report {
row-gap: 16px;
align-items: stretch;
}
.nwr-panel-weekly-report {
display: flex;
overflow: visible;
}
.nwr-panel-weekly-report>.row {
width: 100%;
height: 100%;
margin: 0;
padding: 16px 0px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 98%, var(--input--background)), var(--body--background));
box-shadow: 0 10px 28px color-mix(in srgb, #000000 7%, transparent);
}
.nwr-config-panel-weekly-report {
padding-right: 8px;
}
.nwr-filter-panel-weekly-report {
padding-left: 8px;
}
.nwr-panel-grid-weekly-report, .nwr-filter-grid-weekly-report {
align-content: flex-start;
}
.nwr-page-weekly-report .form-group, .nwr-page-weekly-report .button-div {
margin-bottom: 12px;
}
.nwr-page-weekly-report .each-reprot-item-title {
width: 100%;
margin-bottom: 5px;
padding: 0;
border-bottom: none !important;
color: color-mix(in srgb, var(--primary--body--color) 86%, transparent);
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0;
opacity: 1;
}
.nwr-page-weekly-report .choose_select_add_weekly_report, .nwr-page-weekly-report .new_input_add_weekly_report, .nwr-page-weekly-report .description_area_add_weekly_report, .nwr-page-weekly-report .select-device-brand {
min-height: 34px;
height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
color: var(--primary--body--color) !important;
font-size: 12.5px;
opacity: 1;
outline: none !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.nwr-page-weekly-report .choose_select_add_weekly_report:hover, .nwr-page-weekly-report .new_input_add_weekly_report:hover, .nwr-page-weekly-report .description_area_add_weekly_report:hover, .nwr-page-weekly-report .select-device-brand:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent) !important;
}
.nwr-page-weekly-report .choose_select_add_weekly_report:focus, .nwr-page-weekly-report .new_input_add_weekly_report:focus, .nwr-page-weekly-report .description_area_add_weekly_report:focus, .nwr-page-weekly-report .select-device-brand:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
}
.nwr-page-weekly-report .new_input_add_weekly_report.is-invalid, .nwr-page-weekly-report .description_area_add_weekly_report.is-invalid, .nwr-page-weekly-report .choose_select_add_weekly_report.is-invalid, .nwr-page-weekly-report .select-device-brand.is-invalid {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.nwr-page-weekly-report:not(.nwr-report-submitted-weekly-report) .new_input_add_weekly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .nwr-page-weekly-report:not(.nwr-report-submitted-weekly-report) .description_area_add_weekly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .nwr-page-weekly-report:not(.nwr-report-submitted-weekly-report) .choose_select_add_weekly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .nwr-page-weekly-report:not(.nwr-report-submitted-weekly-report) .select-device-brand.is-invalid:not(.ng-touched):not(.ng-dirty) {
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
background-image: none !important;
}
.nwr-page-weekly-report.nwr-report-submitted-weekly-report .new_input_add_weekly_report.is-invalid, .nwr-page-weekly-report.nwr-report-submitted-weekly-report .select-device-brand.is-invalid, .nwr-page-weekly-report .new_input_add_weekly_report.is-invalid.ng-touched, .nwr-page-weekly-report .new_input_add_weekly_report.is-invalid.ng-dirty, .nwr-page-weekly-report .select-device-brand.is-invalid.ng-touched, .nwr-page-weekly-report .select-device-brand.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 21px center !important;
}
.nwr-page-weekly-report.nwr-report-submitted-weekly-report .description_area_add_weekly_report.is-invalid, .nwr-page-weekly-report .description_area_add_weekly_report.is-invalid.ng-touched, .nwr-page-weekly-report .description_area_add_weekly_report.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 11px top 10px !important;
}
.nwr-page-weekly-report.nwr-report-submitted-weekly-report .choose_select_add_weekly_report.is-invalid, .nwr-page-weekly-report .choose_select_add_weekly_report.is-invalid.ng-touched, .nwr-page-weekly-report .choose_select_add_weekly_report.is-invalid.ng-dirty {
padding-right: 42px !important;
background-position: right 28px center !important;
}
.nwr-page-weekly-report .description_area_add_weekly_report {
height: auto;
min-height: 76px;
line-height: 1.45;
resize: vertical;
}
.nwr-page-weekly-report .select_arrow {
position: relative;
}
.nwr-page-weekly-report .select_arrow::after {
right: 12px;
opacity: 0.7;
}
.nwr-page-weekly-report .col-6.mb-2 .form-group {
min-height: 58px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 44%, transparent);
}
.nwr-brand-dropdown-weekly-report {
position: relative;
z-index: 60;
}
.nwr-brand-dropdown-weekly-report:has(.nwr-brand-menu-weekly-report.show), .nwr-brand-dropdown-weekly-report:focus-within {
z-index: 1500;
}
.nwr-brand-toggle-weekly-report {
display: flex;
align-items: center;
gap: 8px;
padding-right: 34px;
}
.nwr-brand-menu-weekly-report {
width: 100%;
max-height: 330px;
padding: 5px !important;
z-index: 1600 !important;
overflow: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent) !important;
border-radius: 9px !important;
background: var(--body--background) !important;
box-shadow: 0 18px 34px color-mix(in srgb, #000000 16%, transparent) !important;
}
.nwr-brand-search-weekly-report {
padding: 5px !important;
margin-bottom: 4px !important;
border-radius: 6px;
}
.nwr-brand-search-weekly-report i {
top: 50%;
transform: translateY(-50%) !important;
}
.nwr-brand-item-weekly-report, .nwr-brand-empty-weekly-report {
min-height: 32px;
margin-bottom: 2px;
padding: 6px 8px !important;
border-radius: 6px;
color: var(--primary--body--color);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.nwr-brand-item-weekly-report:hover {
transform: translateX(2px);
background-color: color-mix(in srgb, var(--secondary--color) 13%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.nwr-template-action-weekly-report {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: var(--primary--body--color);
opacity: 0.72;
}
.nwr-template-action-weekly-report:hover {
opacity: 1;
}
.nwr-page-weekly-report .template-col-div {
align-items: center;
height: auto;
min-height: 31px;
margin-bottom: 8px;
border-bottom: none !important;
}
.nwr-filter-title-weekly-report {
padding-bottom: 8px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
font-size: 13.5px !important;
}
.nwr-filter-title-row-weekly-report {
margin-top: .3rem !important;
}
.nwr-filter-scroll-weekly-report {
max-height: 560px !important;
padding: 2px 4px 2px 0;
}
.nwr-filter-card-weekly-report {
margin-bottom: 8px;
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent) !important;
background-color: transparent !important;
}
.nwr-filter-summary-weekly-report {
min-height: 42px;
padding: 8px 11px !important;
}
.nwr-filter-summary-weekly-report h6 {
margin: 0;
color: var(--primary--body--color);
font-size: 11.5px !important;
font-weight: 650;
opacity: 0.82;
}
.nwr-filter-body-weekly-report {
padding: 12px 10px 2px;
background-color: color-mix(in srgb, var(--input--background) 35%, transparent);
}
.nwr-filter-body-weekly-report .row {
row-gap: 8px;
}
.nwr-filter-body-weekly-report .input-group {
margin-bottom: 0 !important;
}
.nwr-add-filter-weekly-report {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 38%, transparent) !important;
border-radius: 7px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
opacity: 1;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nwr-add-filter-weekly-report:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 62%, transparent) !important;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.nwr-empty-filter-wrap-weekly-report {
width: 100%;
}
.nwr-empty-filter-card-weekly-report {
display: flex;
align-items: center;
gap: 14px;
min-height: 112px;
padding: 18px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 48%, transparent), color-mix(in srgb, var(--body--background) 94%, var(--input--background)));
}
.nwr-empty-filter-icon-weekly-report {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 9px;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
color: var(--secondary--color);
font-size: 17px;
}
.nwr-empty-filter-content-weekly-report {
display: grid;
gap: 3px;
flex: 1;
min-width: 0;
}
.nwr-empty-filter-title-weekly-report {
color: var(--primary--body--color);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.nwr-empty-filter-text-weekly-report {
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.35;
opacity: 0.64;
}
.nwr-action-row-weekly-report .confirm_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nwr-action-row-weekly-report .confirm_button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.nwr-final-action-row-weekly-report {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding: 0;
margin-top: 2px !important;
}
.nwr-final-action-row-weekly-report .form-group {
margin-bottom: 0 !important;
}
.nwr-final-add-button-weekly-report {
min-width: 118px;
}
@media only screen and (max-width: 1160px) {
.nwr-config-panel-weekly-report, .nwr-filter-panel-weekly-report {
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (max-width: 720px) {
.nwr-empty-filter-card-weekly-report {
align-items: flex-start;
flex-direction: column;
}
.nwr-body-weekly-report {
padding: 14px 12px 18px;
}
.nwr-panel-weekly-report>.row {
padding: 12px;
}
.nwr-title-weekly-report {
width: 100%;
justify-content: center;
}
}
}
/* ===== admin-components/reports/created-report/created-report.component.css (global) ===== */
.cell-vertical-align-text-left {
display: flex!important;
align-items: center;
justify-content: center;
height: 100%;
}
/* ===== admin-components/reports/edit-report-components/edit-daily-report/edit-daily-report.component.css (global) ===== */
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.mat-form-field-flex {
background: #e9ecef;
border-radius: 5px;
padding-left: 12px;
padding-right: 12px;
font-size: 13px;
color: black;
}
.darkBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid #8ca9b46e;
}
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.mat-date-range-picker {
z-index: 9999 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--body--background) !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
border-radius: var(--cart--border--radius) !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color) !important;
}
.mat-datepicker-content {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mdc-icon-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-mdc-form-field-infix {
padding-top: 5px !important;
}
.mat-mdc-text-field-wrapper {
height: 36px !important;
}
.time_input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time_input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:610px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
}
@media only screen and (max-width:531px) {
.show-sidebar .label-small {
font-size: 13px;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
@media only screen and (max-width: 1450px) {
.show-sidebar .report-col {
width: 100%;
}
}
@media only screen and (max-width: 1330px) {
.show-sidebar .report-col-edit-daily {
width: 100%;
}
.show-sidebar .mobile-screen-add-button {
display: block;
}
.show-sidebar .normal-screen-add-button {
display: none;
}
}
.darkBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .template-col-div {
border-bottom: 1.5px solid #8ca9b46e;
}
.dark-theme .edr-panel-daily-report>.row, .darkBlue-theme .edr-panel-daily-report>.row {
border-color: rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, color-mix(in srgb, white 4%, var(--body--background)), var(--body--background));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.lightBlue-theme .edr-panel-daily-report>.row {
border-color: rgba(117, 145, 155, 0.20);
background: #ffffff;
box-shadow: 0 12px 26px rgba(63, 164, 172, 0.08);
}
/* ===== admin-components/reports/edit-report-components/edit-daily-report/edit-daily-report.component.css (scoped) ===== */
app-edit-daily-report {
.each-reprot-item-title {
width: 100%;
color: black;
border-bottom: 1.5px solid #3658757c;
margin-bottom: 13px;
font-weight: 500;
padding: 5px;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
.edit-report-daily-card {
background-color: transparent;
border: none;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 11.5px;
}
.each-reprot-item-title {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 11.5px;
}
.choose_select_edit_daily_report {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
border-top-left-radius: var(--cart--border--radius) !important;
border-bottom-left-radius: var(--cart--border--radius) !important;
}
.choose_select_edit_daily_report:focus {
outline: none;
}
.choose_select_edit_daily_report:active {
outline: none;
}
.new_input_edit_daily_report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
outline: none;
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.new_input_edit_daily_report::placeholder {
color: var(--primary--body--color);
}
.description_area_add_daily_report {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.description_area_add_daily_report::placeholder {
color: var(--primary--body--color);
font-size: 13px;
}
.report-title-input {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.oriana-button-edit-daily-report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.oriana-button-edit-daily-report:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.mobile-screen-add-button {
display: none;
}
.select-device-brand {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.select-device-brand::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
cursor: pointer;
}
.brand-name-span {
margin-left: .3rem;
font-size: 13.5px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
@media only screen and (min-width: 992px) and (max-width:1310px) {
.filter-header {
font-size: 11.5px;
}
}
@media only screen and (max-width: 1150px) {
.report-col-edit-daily {
width: 100%;
}
.mobile-screen-add-button {
display: block;
}
.normal-screen-add-button {
display: none;
}
}
@media only screen and (max-width:870px) {
.filter-header-col {
width: 50% !important;
}
.f-left-mobile {
float: left;
}
}
.accordion-columns-button {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
height: 50px;
}
.accordion-columns-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion-button:focus {
z-index: 0
}
.tooltip-add-report-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 83%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
z-index: 99999;
}
.tooltip-add-report:hover .tooltip-add-report-text {
visibility: visible;
z-index: 99999;
}
@media only screen and (min-width: 992px) and (max-width:1400px) {
.filter-header {
font-size: 11.5px;
}
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-edit-daily-report {
max-height: 330px;
overflow: auto;
}
.template-col-div {
height: 35px;
margin-bottom: 0.7rem;
border-bottom: 1.5px solid #3658757c;
}
.template-label {
border-bottom: none !important;
}
.add-report-template-div {
color: var(--primary--body--color);
cursor: pointer;
text-align: right;
width: 100%;
}
.edr-page-daily-report {
position: relative;
z-index: 20;
padding: 8px 0 22px;
}
.edr-card-daily-report, .edr-body-daily-report {
overflow: visible;
}
.edr-body-daily-report {
padding: 10px;
}
.edr-title-daily-report {
width: auto;
margin: 0 0 14px !important;
padding: 0 0 10px;
border: 0;
background: transparent;
box-shadow: none;
color: var(--primary--body--color);
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
}
.edr-layout-daily-report {
row-gap: 16px;
align-items: stretch;
}
.edr-panel-daily-report {
display: flex;
overflow: visible;
}
.edr-panel-daily-report>.row {
width: 100%;
height: 100%;
margin: 0;
padding: 16px 0px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 98%, var(--input--background)), var(--body--background));
box-shadow: 0 10px 28px color-mix(in srgb, #000000 7%, transparent);
}
.edr-config-panel-daily-report {
padding-right: 8px;
}
.edr-filter-panel-daily-report {
padding-left: 8px;
}
.edr-panel-grid-daily-report, .edr-filter-grid-daily-report {
align-content: flex-start;
}
.edr-page-daily-report .form-group, .edr-page-daily-report .button-div {
margin-bottom: 12px;
}
.edr-page-daily-report .each-reprot-item-title, .edr-page-daily-report .label-header {
width: 100%;
margin-bottom: 5px;
border-bottom: none !important;
color: color-mix(in srgb, var(--primary--body--color) 86%, transparent);
font-weight: 650;
letter-spacing: 0;
opacity: 1;
}
.edr-page-daily-report .choose_select_edit_daily_report, .edr-page-daily-report .new_input_edit_daily_report, .edr-page-daily-report .description_area_add_daily_report, .edr-page-daily-report .select-device-brand {
min-height: 34px;
height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
color: var(--primary--body--color) !important;
font-size: 12.5px;
opacity: 1;
outline: none !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.edr-page-daily-report .choose_select_edit_daily_report:hover, .edr-page-daily-report .new_input_edit_daily_report:hover, .edr-page-daily-report .description_area_add_daily_report:hover, .edr-page-daily-report .select-device-brand:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent) !important;
}
.edr-page-daily-report .choose_select_edit_daily_report:focus, .edr-page-daily-report .new_input_edit_daily_report:focus, .edr-page-daily-report .description_area_add_daily_report:focus, .edr-page-daily-report .select-device-brand:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
}
.edr-page-daily-report .new_input_edit_daily_report.is-invalid, .edr-page-daily-report .description_area_add_daily_report.is-invalid, .edr-page-daily-report .choose_select_edit_daily_report.is-invalid, .edr-page-daily-report .select-device-brand.is-invalid {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.edr-page-daily-report:not(.edr-report-submitted-daily-report) .new_input_edit_daily_report.is-invalid:not(.ng-touched):not(.ng-dirty), .edr-page-daily-report:not(.edr-report-submitted-daily-report) .description_area_add_daily_report.is-invalid:not(.ng-touched):not(.ng-dirty), .edr-page-daily-report:not(.edr-report-submitted-daily-report) .choose_select_edit_daily_report.is-invalid:not(.ng-touched):not(.ng-dirty), .edr-page-daily-report:not(.edr-report-submitted-daily-report) .select-device-brand.is-invalid:not(.ng-touched):not(.ng-dirty) {
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
background-image: none !important;
}
.edr-page-daily-report.edr-report-submitted-daily-report .new_input_edit_daily_report.is-invalid, .edr-page-daily-report.edr-report-submitted-daily-report .select-device-brand.is-invalid, .edr-page-daily-report .new_input_edit_daily_report.is-invalid.ng-touched, .edr-page-daily-report .new_input_edit_daily_report.is-invalid.ng-dirty, .edr-page-daily-report .select-device-brand.is-invalid.ng-touched, .edr-page-daily-report .select-device-brand.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 21px center !important;
}
.edr-page-daily-report.edr-report-submitted-daily-report .description_area_add_daily_report.is-invalid, .edr-page-daily-report .description_area_add_daily_report.is-invalid.ng-touched, .edr-page-daily-report .description_area_add_daily_report.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 11px top 10px !important;
}
.edr-page-daily-report.edr-report-submitted-daily-report .choose_select_edit_daily_report.is-invalid, .edr-page-daily-report .choose_select_edit_daily_report.is-invalid.ng-touched, .edr-page-daily-report .choose_select_edit_daily_report.is-invalid.ng-dirty, .edr-page-daily-report.edr-design-selection-touched-daily-report .edr-template-select-daily-report.is-invalid, .edr-page-daily-report.edr-design-selection-touched-daily-report .edr-html-template-select-daily-report.is-invalid {
padding-right: 42px !important;
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-position: right 28px center !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.edr-page-daily-report .description_area_add_daily_report {
height: auto;
min-height: 76px;
line-height: 1.45;
resize: vertical;
}
.edr-page-daily-report .col-6.mb-2 .form-group {
min-height: 58px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 44%, transparent);
}
.edr-brand-dropdown-daily-report {
position: relative;
z-index: 60;
}
.edr-brand-dropdown-daily-report:has(.edr-brand-menu-daily-report.show), .edr-brand-dropdown-daily-report:focus-within {
z-index: 1500;
}
.edr-brand-toggle-daily-report {
display: flex;
align-items: center;
gap: 8px;
padding-right: 34px;
}
.edr-brand-menu-daily-report {
width: 100%;
max-height: 330px;
padding: 5px !important;
z-index: 1600 !important;
overflow: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent) !important;
border-radius: 9px !important;
background: var(--body--background) !important;
box-shadow: 0 18px 34px color-mix(in srgb, #000000 16%, transparent) !important;
}
.edr-brand-search-daily-report {
padding: 5px !important;
margin-bottom: 4px !important;
border-radius: 6px;
}
.edr-brand-search-daily-report i {
top: 50%;
transform: translateY(-50%) !important;
}
.edr-brand-item-daily-report, .edr-brand-empty-daily-report {
min-height: 32px;
margin-bottom: 2px;
padding: 6px 8px !important;
border-radius: 6px;
color: var(--primary--body--color);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.edr-brand-item-daily-report:hover {
transform: translateX(2px);
background-color: color-mix(in srgb, var(--secondary--color) 13%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.edr-template-action-daily-report {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: var(--primary--body--color);
opacity: 0.72;
font-size: 12px;
}
.edr-page-daily-report .template-col-div {
align-items: center;
height: auto;
min-height: 31px;
margin-bottom: 8px;
border-bottom: none !important;
}
.edr-filter-title-daily-report {
padding-bottom: 8px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
font-size: 13.5px !important;
}
.edr-filter-scroll-daily-report {
max-height: 560px !important;
padding: 2px 4px 2px 0;
}
.edr-filter-card-daily-report {
margin-bottom: 8px;
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent) !important;
background-color: transparent !important;
}
.edr-filter-summary-daily-report {
min-height: 42px;
padding: 8px 11px !important;
}
.edr-filter-summary-daily-report h6 {
margin: 0;
color: var(--primary--body--color);
font-size: 11.5px !important;
font-weight: 650;
opacity: 0.82;
}
.edr-filter-body-daily-report {
padding: 12px 10px 2px;
background-color: color-mix(in srgb, var(--input--background) 35%, transparent);
}
.edr-filter-body-daily-report .row {
row-gap: 8px;
}
.edr-filter-body-daily-report .input-group {
margin-bottom: 0 !important;
}
.edr-add-filter-daily-report {
display: inline-flex !important;
align-items: center;
gap: 7px;
width: auto !important;
padding: 7px 10px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 38%, transparent) !important;
border-radius: 7px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
opacity: 1;
white-space: nowrap;
}
.edr-empty-filter-wrap-daily-report {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.edr-empty-filter-card-daily-report {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: flex-start;
gap: 14px;
min-height: 112px;
padding: 18px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 48%, transparent), color-mix(in srgb, var(--body--background) 94%, var(--input--background)));
}
.edr-empty-filter-icon-daily-report {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 9px;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
color: var(--secondary--color);
font-size: 17px;
}
.edr-empty-filter-content-daily-report {
display: grid;
gap: 3px;
min-width: 0;
}
.edr-empty-filter-card-daily-report .edr-add-filter-daily-report {
grid-column: 2;
justify-self: start;
}
.edr-add-filter-row-daily-report {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.edr-empty-filter-title-daily-report {
color: var(--primary--body--color);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.edr-empty-filter-text-daily-report {
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.35;
opacity: 0.64;
}
.edr-action-row-daily-report .confirm_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
}
.edr-final-action-row-daily-report {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding: 0;
margin-top: 2px !important;
}
.edr-final-action-row-daily-report .form-group {
margin-bottom: 0 !important;
}
.edr-final-update-button-daily-report {
min-width: 118px;
}
@media only screen and (max-width: 1160px) {
.edr-config-panel-daily-report, .edr-filter-panel-daily-report {
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (max-width: 720px) {
.edr-empty-filter-card-daily-report {
align-items: flex-start;
grid-template-columns: 1fr;
}
.edr-empty-filter-card-daily-report .edr-add-filter-daily-report {
grid-column: 1;
}
.edr-body-daily-report {
padding: 14px 12px 18px;
}
.edr-panel-daily-report>.row {
padding: 12px;
}
}
}
/* ===== admin-components/reports/edit-report-components/edit-instant-report/edit-instant-report.component.css (global) ===== */
.mat-form-field-infix {
padding: 10px 0!important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em!important;
color: #c1c1c1;
}
.mat-form-field-flex {
background: #e9ecef;
border-radius: 5px;
padding-left: 12px;
padding-right: 12px;
font-size: 13px;
color: black;
}
.darkBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid #8ca9b46e;
}
.mat-form-field-infix {
padding: 10px 0!important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em!important;
color: #c1c1c1;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.mat-date-range-picker {
z-index: 9999 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--body--background) !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
border-radius: var(--cart--border--radius) !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color) !important;
}
.mat-datepicker-content {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mdc-icon-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-mdc-form-field-infix {
padding-top: 5px !important;
}
.mat-mdc-text-field-wrapper {
height: 36px !important;
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
background-color: var(--input--background) !important;
}
.time_input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time_input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:610px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
@media only screen and (max-width:531px) {
.show-sidebar .label-small {
font-size: 13px;
}
}
@media only screen and (max-width: 1450px) {
.show-sidebar .report-col {
width: 100%;
}
}
@media only screen and (max-width: 1330px) {
.show-sidebar .report-col-edit-instant {
width: 100%;
}
.show-sidebar .mobile-screen-add-button {
display: block;
}
.show-sidebar .normal-screen-add-button {
display: none;
}
}
.darkBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .template-col-div {
border-bottom: 1.5px solid #8ca9b46e;
}
.eir-page-instant-report .eir-date-range-field-instant-report .mat-mdc-text-field-wrapper {
min-height: 34px !important;
height: 34px !important;
padding: 0 10px !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
color: var(--primary--body--color) !important;
opacity: 1 !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.eir-page-instant-report .eir-date-range-field-instant-report .mat-mdc-text-field-wrapper:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent) !important;
}
.eir-page-instant-report .eir-date-range-field-instant-report.mat-focused .mat-mdc-text-field-wrapper {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
}
.eir-page-instant-report .eir-date-range-field-instant-report .mat-mdc-form-field-flex {
height: 34px !important;
align-items: center;
}
.eir-page-instant-report .eir-date-range-field-instant-report .mat-mdc-form-field-infix {
min-height: 34px !important;
height: 34px !important;
padding: 7px 0 0 !important;
}
.eir-page-instant-report .eir-date-range-field-instant-report .mat-date-range-input {
color: var(--primary--body--color) !important;
font-size: 12.5px;
opacity: 1;
}
.eir-page-instant-report .eir-date-range-field-instant-report .mat-date-range-input-inner, .eir-page-instant-report .eir-date-range-field-instant-report .mat-date-range-input-separator {
color: var(--primary--body--color) !important;
font-size: 12.5px !important;
opacity: 0.92 !important;
}
.eir-page-instant-report .eir-date-range-field-instant-report .mat-datepicker-toggle {
color: var(--primary--body--color) !important;
opacity: 0.8 !important;
}
.eir-page-instant-report .eir-date-range-field-instant-report .mat-datepicker-toggle-default-icon {
width: 18px !important;
height: 18px !important;
color: var(--primary--body--color) !important;
}
.eir-page-instant-report .eir-date-range-field-instant-report .mdc-line-ripple, .eir-page-instant-report .eir-date-range-field-instant-report .mat-mdc-form-field-subscript-wrapper {
display: none !important;
}
.dark-theme .eir-page-instant-report .eir-date-range-field-instant-report .mat-mdc-text-field-wrapper, .darkBlue-theme .eir-page-instant-report .eir-date-range-field-instant-report .mat-mdc-text-field-wrapper {
border-color: rgba(255, 255, 255, 0.07) !important;
background: color-mix(in srgb, white 5%, var(--input--background)) !important;
}
.lightBlue-theme .eir-page-instant-report .eir-date-range-field-instant-report .mat-mdc-text-field-wrapper {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #fbfdfe !important;
}
.dark-theme .eir-panel-instant-report>.row, .darkBlue-theme .eir-panel-instant-report>.row {
border-color: rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, color-mix(in srgb, white 4%, var(--body--background)), var(--body--background));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.lightBlue-theme .eir-panel-instant-report>.row {
border-color: rgba(117, 145, 155, 0.20);
background: #ffffff;
box-shadow: 0 12px 26px rgba(63, 164, 172, 0.08);
}
/* ===== admin-components/reports/edit-report-components/edit-instant-report/edit-instant-report.component.css (scoped) ===== */
app-edit-instant-report {
.each-reprot-item-title {
width: 100%;
color: black;
border-bottom: 1.5px solid #3658757c;
margin-bottom: 13px;
font-weight: 500;
padding: 5px;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
.edit-report-instant-card {
background-color: transparent;
border: none;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.each-reprot-item-title {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.choose_select_edit_instant_report {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
border-top-left-radius: var(--cart--border--radius) !important;
border-bottom-left-radius: var(--cart--border--radius) !important;
}
.choose_select_edit_instant_report:focus {
outline: none;
}
.choose_select_edit_instant_report:active {
outline: none;
}
.new_input_edit_instant_report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
outline: none;
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.new_input_edit_instant_report::placeholder {
color: var(--primary--body--color);
}
.description_area_add_daily_report {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.description_area_add_daily_report::placeholder {
color: var(--primary--body--color);
font-size: 13px;
}
.report-title-input {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.oriana-button-edit-instant-report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.oriana-button-edit-instant-report:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.mobile-screen-add-button {
display: none;
}
.select-device-brand {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.select-device-brand::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
cursor: pointer;
}
.brand-name-span {
margin-left: .3rem;
font-size: 13.5px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
@media only screen and (min-width: 992px) and (max-width:1310px) {
.filter-header {
font-size: 11.5px;
}
}
@media only screen and (max-width: 1150px) {
.report-col-edit-instant {
width: 100%;
}
.mobile-screen-add-button {
display: block;
}
.normal-screen-add-button {
display: none;
}
}
@media only screen and (max-width:870px) {
.filter-header-col {
width: 50% !important;
}
.f-left-mobile {
float: left;
}
}
.accordion-columns-button {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
height: 50px;
}
.accordion-columns-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion-button:focus {
z-index: 0
}
.tooltip-add-report-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 83%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
z-index: 99999;
}
.tooltip-add-report:hover .tooltip-add-report-text {
visibility: visible;
z-index: 99999;
}
@media only screen and (min-width: 992px) and (max-width:1400px) {
.filter-header {
font-size: 11.5px;
}
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-edit-instant-report {
max-height: 330px;
overflow: auto;
}
.template-col-div {
height: 35px;
margin-bottom: 0.7rem;
border-bottom: 1.5px solid #3658757c;
}
.template-label {
border-bottom: none !important;
}
.add-report-template-div {
color: var(--primary--body--color);
cursor: pointer;
text-align: right;
width: 100%;
}
.eir-page-instant-report {
position: relative;
z-index: 20;
padding: 8px 0 22px;
}
.eir-card-instant-report, .eir-body-instant-report {
overflow: visible;
}
.eir-body-instant-report {
padding: 10px;
}
.eir-title-instant-report {
width: auto;
margin: 0 0 14px !important;
padding: 0 0 10px;
border: 0;
background: transparent;
box-shadow: none;
color: var(--primary--body--color);
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
}
.eir-layout-instant-report {
row-gap: 16px;
align-items: stretch;
}
.eir-panel-instant-report {
display: flex;
overflow: visible;
}
.eir-panel-instant-report>.row {
width: 100%;
height: 100%;
margin: 0;
padding: 16px 0px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 98%, var(--input--background)), var(--body--background));
box-shadow: 0 10px 28px color-mix(in srgb, #000000 7%, transparent);
}
.eir-config-panel-instant-report {
padding-right: 8px;
}
.eir-filter-panel-instant-report {
padding-left: 8px;
}
.eir-panel-grid-instant-report, .eir-filter-grid-instant-report {
align-content: flex-start;
}
.eir-page-instant-report .form-group, .eir-page-instant-report .button-div {
margin-bottom: 12px;
}
.eir-page-instant-report .each-reprot-item-title, .eir-page-instant-report .label-header {
margin-bottom: 5px;
border-bottom: none !important;
color: color-mix(in srgb, var(--primary--body--color) 86%, transparent);
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0;
opacity: 1;
}
.eir-page-instant-report .choose_select_edit_instant_report, .eir-page-instant-report .new_input_edit_instant_report, .eir-page-instant-report .description_area_add_daily_report, .eir-page-instant-report .select-device-brand {
min-height: 34px;
height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
color: var(--primary--body--color) !important;
font-size: 12.5px;
opacity: 1;
outline: none !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.eir-page-instant-report .choose_select_edit_instant_report:hover, .eir-page-instant-report .new_input_edit_instant_report:hover, .eir-page-instant-report .description_area_add_daily_report:hover, .eir-page-instant-report .select-device-brand:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent) !important;
}
.eir-page-instant-report .choose_select_edit_instant_report:focus, .eir-page-instant-report .new_input_edit_instant_report:focus, .eir-page-instant-report .description_area_add_daily_report:focus, .eir-page-instant-report .select-device-brand:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
}
.eir-page-instant-report .new_input_edit_instant_report.is-invalid, .eir-page-instant-report .description_area_add_daily_report.is-invalid, .eir-page-instant-report .choose_select_edit_instant_report.is-invalid, .eir-page-instant-report .select-device-brand.is-invalid {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.eir-page-instant-report:not(.eir-report-submitted-instant-report) .new_input_edit_instant_report.is-invalid:not(.ng-touched):not(.ng-dirty), .eir-page-instant-report:not(.eir-report-submitted-instant-report) .description_area_add_daily_report.is-invalid:not(.ng-touched):not(.ng-dirty), .eir-page-instant-report:not(.eir-report-submitted-instant-report) .choose_select_edit_instant_report.is-invalid:not(.ng-touched):not(.ng-dirty), .eir-page-instant-report:not(.eir-report-submitted-instant-report) .select-device-brand.is-invalid:not(.ng-touched):not(.ng-dirty) {
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
background-image: none !important;
}
.eir-page-instant-report.eir-report-submitted-instant-report .new_input_edit_instant_report.is-invalid, .eir-page-instant-report.eir-report-submitted-instant-report .select-device-brand.is-invalid, .eir-page-instant-report .new_input_edit_instant_report.is-invalid.ng-touched, .eir-page-instant-report .new_input_edit_instant_report.is-invalid.ng-dirty, .eir-page-instant-report .select-device-brand.is-invalid.ng-touched, .eir-page-instant-report .select-device-brand.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 21px center !important;
}
.eir-page-instant-report.eir-report-submitted-instant-report .description_area_add_daily_report.is-invalid, .eir-page-instant-report .description_area_add_daily_report.is-invalid.ng-touched, .eir-page-instant-report .description_area_add_daily_report.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 11px top 10px !important;
}
.eir-page-instant-report.eir-report-submitted-instant-report .choose_select_edit_instant_report.is-invalid, .eir-page-instant-report .choose_select_edit_instant_report.is-invalid.ng-touched, .eir-page-instant-report .choose_select_edit_instant_report.is-invalid.ng-dirty, .eir-page-instant-report.eir-design-selection-touched-instant-report .eir-template-select-instant-report.is-invalid, .eir-page-instant-report.eir-design-selection-touched-instant-report .eir-html-template-select-instant-report.is-invalid {
padding-right: 42px !important;
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-position: right 28px center !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.eir-page-instant-report .description_area_add_daily_report {
height: auto;
min-height: 76px;
line-height: 1.45;
resize: vertical;
}
.eir-page-instant-report .eir-date-range-field-instant-report {
display: block;
margin-bottom: 12px;
}
.eir-page-instant-report .col-6.mb-2 .form-group {
min-height: 58px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 44%, transparent);
}
.eir-brand-dropdown-instant-report {
position: relative;
z-index: 60;
}
.eir-brand-dropdown-instant-report:has(.eir-brand-menu-instant-report.show), .eir-brand-dropdown-instant-report:focus-within {
z-index: 1500;
}
.eir-brand-toggle-instant-report {
display: flex;
align-items: center;
gap: 8px;
padding-right: 34px;
}
.eir-brand-menu-instant-report {
width: 100%;
max-height: 330px;
padding: 5px !important;
z-index: 1600 !important;
overflow: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent) !important;
border-radius: 9px !important;
background: var(--body--background) !important;
box-shadow: 0 18px 34px color-mix(in srgb, #000000 16%, transparent) !important;
}
.eir-brand-search-instant-report {
padding: 5px !important;
margin-bottom: 4px !important;
border-radius: 6px;
}
.eir-brand-search-instant-report i {
top: 50%;
transform: translateY(-50%) !important;
}
.eir-brand-item-instant-report, .eir-brand-empty-instant-report {
min-height: 32px;
margin-bottom: 2px;
padding: 6px 8px !important;
border-radius: 6px;
color: var(--primary--body--color);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.eir-brand-item-instant-report:hover {
transform: translateX(2px);
background-color: color-mix(in srgb, var(--secondary--color) 13%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.eir-template-action-instant-report {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: var(--primary--body--color);
opacity: 0.72;
font-size: 12px;
}
.eir-page-instant-report .template-col-div {
align-items: center;
height: auto;
min-height: 31px;
margin-bottom: 8px;
border-bottom: none !important;
}
.eir-filter-title-instant-report {
padding-bottom: 8px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
font-size: 13.5px !important;
}
.eir-filter-scroll-instant-report {
max-height: 560px !important;
padding: 2px 4px 2px 0;
}
.eir-filter-card-instant-report {
margin-bottom: 8px;
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent) !important;
background-color: transparent !important;
}
.eir-filter-summary-instant-report {
min-height: 42px;
padding: 8px 11px !important;
}
.eir-filter-summary-instant-report h6 {
margin: 0;
color: var(--primary--body--color);
font-size: 11.5px !important;
font-weight: 650;
opacity: 0.82;
}
.eir-filter-body-instant-report {
padding: 12px 10px 2px;
background-color: color-mix(in srgb, var(--input--background) 35%, transparent);
}
.eir-filter-body-instant-report .row {
row-gap: 8px;
}
.eir-filter-body-instant-report .input-group {
margin-bottom: 0 !important;
}
.eir-add-filter-instant-report {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 38%, transparent) !important;
border-radius: 7px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
opacity: 1;
}
.eir-empty-filter-card-instant-report {
display: flex;
align-items: center;
gap: 14px;
min-height: 112px;
padding: 18px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 48%, transparent), color-mix(in srgb, var(--body--background) 94%, var(--input--background)));
}
.eir-empty-filter-icon-instant-report {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 9px;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
color: var(--secondary--color);
font-size: 17px;
}
.eir-empty-filter-content-instant-report {
display: grid;
gap: 3px;
flex: 1;
min-width: 0;
}
.eir-empty-filter-title-instant-report {
color: var(--primary--body--color);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.eir-empty-filter-text-instant-report {
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.35;
opacity: 0.64;
}
.eir-action-row-instant-report .confirm_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
}
.eir-final-action-row-instant-report {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding: 0;
margin-top: 2px !important;
}
.eir-final-action-row-instant-report .form-group {
margin-bottom: 0 !important;
}
.eir-final-update-button-instant-report {
min-width: 118px;
}
@media only screen and (max-width: 1160px) {
.eir-config-panel-instant-report, .eir-filter-panel-instant-report {
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (max-width: 720px) {
.eir-empty-filter-card-instant-report {
align-items: flex-start;
flex-direction: column;
}
.eir-body-instant-report {
padding: 14px 12px 18px;
}
.eir-panel-instant-report>.row {
padding: 12px;
}
}
}
/* ===== admin-components/reports/edit-report-components/edit-monthly-report/edit-monthly-report.component.css (global) ===== */
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.mat-form-field-flex {
background: #e9ecef;
border-radius: 5px;
padding-left: 12px;
padding-right: 12px;
font-size: 13px;
color: black;
}
.darkBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid #8ca9b46e;
}
.mat-form-field-infix {
padding: 10px 0 !important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em !important;
color: #c1c1c1;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.mat-date-range-picker {
z-index: 9999 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--body--background) !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
border-radius: var(--cart--border--radius) !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color) !important;
}
.mat-datepicker-content {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mdc-icon-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-mdc-form-field-infix {
padding-top: 5px !important;
}
.mat-mdc-text-field-wrapper {
height: 36px !important;
}
.time_input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time_input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:610px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
@media only screen and (max-width:531px) {
.show-sidebar .label-small {
font-size: 13px;
}
}
@media only screen and (max-width: 1450px) {
.show-sidebar .report-col {
width: 100%;
}
}
@media only screen and (max-width: 1705px) {
.show-sidebar .report-col-edit-monthly {
width: 100%;
}
.show-sidebar .mobile-screen-add-button {
display: block;
}
.show-sidebar .normal-screen-add-button {
display: none;
}
}
.darkBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .template-col-div {
border-bottom: 1.5px solid #8ca9b46e;
}
.dark-theme .emr-title-monthly-report, .darkBlue-theme .emr-title-monthly-report {
background: transparent;
}
.dark-theme .emr-panel-monthly-report>.row, .darkBlue-theme .emr-panel-monthly-report>.row {
border-color: rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, color-mix(in srgb, white 4%, var(--body--background)), var(--body--background));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.dark-theme .emr-page-monthly-report .choose_select_edit_monthly_report, .dark-theme .emr-page-monthly-report .new_input_edit_monthly_report, .dark-theme .emr-page-monthly-report .description_area_add_daily_report, .dark-theme .emr-page-monthly-report .select-device-brand, .darkBlue-theme .emr-page-monthly-report .choose_select_edit_monthly_report, .darkBlue-theme .emr-page-monthly-report .new_input_edit_monthly_report, .darkBlue-theme .emr-page-monthly-report .description_area_add_daily_report, .darkBlue-theme .emr-page-monthly-report .select-device-brand {
border-color: rgba(255, 255, 255, 0.07) !important;
background: color-mix(in srgb, white 5%, var(--input--background)) !important;
}
.dark-theme .emr-filter-body-monthly-report, .darkBlue-theme .emr-filter-body-monthly-report, .dark-theme .emr-page-monthly-report .col-6.mb-2 .form-group, .darkBlue-theme .emr-page-monthly-report .col-6.mb-2 .form-group {
border-color: rgba(255, 255, 255, 0.055);
background-color: rgba(255, 255, 255, 0.035);
}
.lightBlue-theme .emr-panel-monthly-report>.row {
border-color: rgba(117, 145, 155, 0.20);
background: #ffffff;
box-shadow: 0 12px 26px rgba(63, 164, 172, 0.08);
}
.lightBlue-theme .emr-page-monthly-report .choose_select_edit_monthly_report, .lightBlue-theme .emr-page-monthly-report .new_input_edit_monthly_report, .lightBlue-theme .emr-page-monthly-report .description_area_add_daily_report, .lightBlue-theme .emr-page-monthly-report .select-device-brand {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #fbfdfe !important;
}
/* ===== admin-components/reports/edit-report-components/edit-monthly-report/edit-monthly-report.component.css (scoped) ===== */
app-edit-monthly-report {
.each-reprot-item-title {
width: 100%;
color: black;
border-bottom: 1.5px solid #3658757c;
margin-bottom: 13px;
font-weight: 500;
padding: 5px;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
.edit-report-monthly-card {
background-color: transparent;
border: none;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.each-reprot-item-title {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.choose_select_edit_monthly_report {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
border-top-left-radius: var(--cart--border--radius) !important;
border-bottom-left-radius: var(--cart--border--radius) !important;
}
.choose_select_edit_monthly_report:focus {
outline: none;
}
.choose_select_edit_monthly_report:active {
outline: none;
}
.new_input_edit_monthly_report {
outline: none;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.new_input_edit_monthly_report::placeholder {
color: var(--primary--body--color);
}
.description_area_add_daily_report {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.description_area_add_daily_report::placeholder {
color: var(--primary--body--color);
font-size: 13px;
}
.report-title-input {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.oriana-button-edit-monthly-report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.oriana-button-edit-monthly-report:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.select-device-brand {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.select-device-brand::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
cursor: pointer;
}
.brand-name-span {
margin-left: .3rem;
font-size: 13.5px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
@media only screen and (min-width: 992px) and (max-width:1310px) {
.filter-header {
font-size: 11.5px;
}
}
.mobile-screen-add-button {
display: none;
}
@media only screen and (max-width: 1150px) {
.report-col-edit-monthly {
width: 100%;
}
.mobile-screen-add-button {
display: block;
}
.normal-screen-add-button {
display: none;
}
}
@media only screen and (max-width:870px) {
.filter-header-col {
width: 50% !important;
}
.f-left-mobile {
float: left;
}
}
.accordion-columns-button {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
height: 50px;
}
.accordion-columns-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion-button:focus {
z-index: 0
}
.tooltip-add-report-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 83%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
z-index: 99999;
}
.tooltip-add-report:hover .tooltip-add-report-text {
visibility: visible;
z-index: 99999;
}
@media only screen and (min-width: 992px) and (max-width:1400px) {
.filter-header {
font-size: 11.5px;
}
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-edit-monthly-report {
max-height: 330px;
overflow: auto;
}
.template-col-div {
height: 35px;
margin-bottom: 0.7rem;
border-bottom: 1.5px solid #3658757c;
}
.template-label {
border-bottom: none !important;
}
.add-report-template-div {
color: var(--primary--body--color);
cursor: pointer;
text-align: right;
width: 100%;
}
.emr-page-monthly-report {
position: relative;
z-index: 20;
padding: 8px 0 22px;
}
.emr-card-monthly-report {
overflow: visible;
}
.emr-body-monthly-report {
padding: 10px;
overflow: visible;
}
.emr-title-monthly-report {
width: auto;
margin: 0 0 14px !important;
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--primary--body--color);
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
}
.emr-layout-monthly-report {
row-gap: 16px;
align-items: stretch;
}
.emr-panel-monthly-report {
display: flex;
overflow: visible;
}
.emr-panel-monthly-report>.row {
width: 100%;
height: 100%;
margin: 0;
padding: 16px 0px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 98%, var(--input--background)), var(--body--background));
box-shadow: 0 10px 28px color-mix(in srgb, #000000 7%, transparent);
}
.emr-config-panel-monthly-report {
padding-right: 8px;
}
.emr-filter-panel-monthly-report {
padding-left: 8px;
}
.emr-panel-grid-monthly-report, .emr-filter-grid-monthly-report {
align-content: flex-start;
}
.emr-page-monthly-report .form-group, .emr-page-monthly-report .button-div {
margin-bottom: 12px;
}
.emr-page-monthly-report .each-reprot-item-title {
width: 100%;
margin-bottom: 5px;
padding: 0;
border-bottom: none !important;
color: color-mix(in srgb, var(--primary--body--color) 86%, transparent);
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0;
opacity: 1;
}
.emr-page-monthly-report .choose_select_edit_monthly_report, .emr-page-monthly-report .new_input_edit_monthly_report, .emr-page-monthly-report .description_area_add_daily_report, .emr-page-monthly-report .select-device-brand {
min-height: 34px;
height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
color: var(--primary--body--color) !important;
font-size: 12.5px;
opacity: 1;
outline: none !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.emr-page-monthly-report .choose_select_edit_monthly_report:hover, .emr-page-monthly-report .new_input_edit_monthly_report:hover, .emr-page-monthly-report .description_area_add_daily_report:hover, .emr-page-monthly-report .select-device-brand:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent) !important;
}
.emr-page-monthly-report .choose_select_edit_monthly_report:focus, .emr-page-monthly-report .new_input_edit_monthly_report:focus, .emr-page-monthly-report .description_area_add_daily_report:focus, .emr-page-monthly-report .select-device-brand:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
}
.emr-page-monthly-report .new_input_edit_monthly_report.is-invalid, .emr-page-monthly-report .description_area_add_daily_report.is-invalid, .emr-page-monthly-report .choose_select_edit_monthly_report.is-invalid, .emr-page-monthly-report .select-device-brand.is-invalid {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.emr-page-monthly-report:not(.emr-report-submitted-monthly-report) .new_input_edit_monthly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .emr-page-monthly-report:not(.emr-report-submitted-monthly-report) .description_area_add_daily_report.is-invalid:not(.ng-touched):not(.ng-dirty), .emr-page-monthly-report:not(.emr-report-submitted-monthly-report) .choose_select_edit_monthly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .emr-page-monthly-report:not(.emr-report-submitted-monthly-report) .select-device-brand.is-invalid:not(.ng-touched):not(.ng-dirty) {
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
background-image: none !important;
}
.emr-page-monthly-report.emr-report-submitted-monthly-report .new_input_edit_monthly_report.is-invalid, .emr-page-monthly-report.emr-report-submitted-monthly-report .select-device-brand.is-invalid, .emr-page-monthly-report .new_input_edit_monthly_report.is-invalid.ng-touched, .emr-page-monthly-report .new_input_edit_monthly_report.is-invalid.ng-dirty, .emr-page-monthly-report .select-device-brand.is-invalid.ng-touched, .emr-page-monthly-report .select-device-brand.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 21px center !important;
}
.emr-page-monthly-report.emr-report-submitted-monthly-report .description_area_add_daily_report.is-invalid, .emr-page-monthly-report .description_area_add_daily_report.is-invalid.ng-touched, .emr-page-monthly-report .description_area_add_daily_report.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 11px top 10px !important;
}
.emr-page-monthly-report.emr-report-submitted-monthly-report .choose_select_edit_monthly_report.is-invalid, .emr-page-monthly-report .choose_select_edit_monthly_report.is-invalid.ng-touched, .emr-page-monthly-report .choose_select_edit_monthly_report.is-invalid.ng-dirty {
padding-right: 42px !important;
background-position: right 28px center !important;
}
.emr-page-monthly-report.emr-design-selection-touched-monthly-report .emr-template-select-monthly-report.is-invalid, .emr-page-monthly-report.emr-design-selection-touched-monthly-report .emr-html-template-select-monthly-report.is-invalid {
padding-right: 42px !important;
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-position: right 28px center !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.emr-page-monthly-report .description_area_add_daily_report {
height: auto;
min-height: 76px;
line-height: 1.45;
resize: vertical;
}
.emr-page-monthly-report .select_arrow {
position: relative;
}
.emr-page-monthly-report .select_arrow::after {
right: 12px;
opacity: 0.7;
}
.emr-page-monthly-report .col-6.mb-2 .form-group {
min-height: 58px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 44%, transparent);
}
.emr-brand-dropdown-monthly-report {
position: relative;
z-index: 60;
}
.emr-brand-dropdown-monthly-report:has(.emr-brand-menu-monthly-report.show), .emr-brand-dropdown-monthly-report:focus-within {
z-index: 1500;
}
.emr-brand-toggle-monthly-report {
display: flex;
align-items: center;
gap: 8px;
padding-right: 34px;
}
.emr-brand-menu-monthly-report {
width: 100%;
max-height: 330px;
padding: 5px !important;
z-index: 1600 !important;
overflow: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent) !important;
border-radius: 9px !important;
background: var(--body--background) !important;
box-shadow: 0 18px 34px color-mix(in srgb, #000000 16%, transparent) !important;
}
.emr-brand-search-monthly-report {
padding: 5px !important;
margin-bottom: 4px !important;
border-radius: 6px;
}
.emr-brand-search-monthly-report i {
top: 50%;
transform: translateY(-50%) !important;
}
.emr-brand-item-monthly-report, .emr-brand-empty-monthly-report {
min-height: 32px;
margin-bottom: 2px;
padding: 6px 8px !important;
border-radius: 6px;
color: var(--primary--body--color);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.emr-brand-item-monthly-report:hover {
transform: translateX(2px);
background-color: color-mix(in srgb, var(--secondary--color) 13%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.emr-template-action-monthly-report {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: var(--primary--body--color);
opacity: 0.72;
font-size: 12px;
}
.emr-template-action-monthly-report:hover {
opacity: 1;
}
.emr-page-monthly-report .template-col-div {
align-items: center;
height: auto;
min-height: 31px;
margin-bottom: 8px;
border-bottom: none !important;
}
.emr-filter-title-monthly-report {
padding-bottom: 8px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
font-size: 13.5px !important;
}
.emr-filter-title-row-monthly-report {
margin-top: .3rem !important;
}
.emr-filter-scroll-monthly-report {
max-height: 560px !important;
padding: 2px 4px 2px 0;
}
.emr-filter-card-monthly-report {
margin-bottom: 8px;
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent) !important;
background-color: transparent !important;
}
.emr-filter-summary-monthly-report {
min-height: 42px;
padding: 8px 11px !important;
}
.emr-filter-summary-monthly-report h6 {
margin: 0;
color: var(--primary--body--color);
font-size: 11.5px !important;
font-weight: 650;
opacity: 0.82;
}
.emr-filter-body-monthly-report {
padding: 12px 10px 2px;
background-color: color-mix(in srgb, var(--input--background) 35%, transparent);
}
.emr-filter-body-monthly-report .row {
row-gap: 8px;
}
.emr-filter-body-monthly-report .input-group {
margin-bottom: 0 !important;
}
.emr-add-filter-monthly-report {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 38%, transparent) !important;
border-radius: 7px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
opacity: 1;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.emr-add-filter-monthly-report:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 62%, transparent) !important;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.emr-empty-filter-wrap-monthly-report {
width: 100%;
}
.emr-empty-filter-card-monthly-report {
display: flex;
align-items: center;
gap: 14px;
min-height: 112px;
padding: 18px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 48%, transparent), color-mix(in srgb, var(--body--background) 94%, var(--input--background)));
}
.emr-empty-filter-icon-monthly-report {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 9px;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
color: var(--secondary--color);
font-size: 17px;
}
.emr-empty-filter-content-monthly-report {
display: grid;
gap: 3px;
flex: 1;
min-width: 0;
}
.emr-empty-filter-title-monthly-report {
color: var(--primary--body--color);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.emr-empty-filter-text-monthly-report {
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.35;
opacity: 0.64;
}
.emr-action-row-monthly-report .confirm_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.emr-action-row-monthly-report .confirm_button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.emr-final-action-row-monthly-report {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding: 0;
margin-top: 2px !important;
}
.emr-final-action-row-monthly-report .form-group {
margin-bottom: 0 !important;
}
.emr-final-update-button-monthly-report {
min-width: 118px;
}
@media only screen and (max-width: 1160px) {
.emr-config-panel-monthly-report, .emr-filter-panel-monthly-report {
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (max-width: 720px) {
.emr-empty-filter-card-monthly-report {
align-items: flex-start;
flex-direction: column;
}
.emr-body-monthly-report {
padding: 14px 12px 18px;
}
.emr-panel-monthly-report>.row {
padding: 12px;
}
.emr-title-monthly-report {
width: 100%;
justify-content: center;
}
}
}
/* ===== admin-components/reports/edit-report-components/edit-weekly-report/edit-weekly-report.component.css (global) ===== */
.mat-form-field-infix {
padding: 10px 0!important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em!important;
color: #c1c1c1;
}
.mat-form-field-flex {
background: #e9ecef;
border-radius: 5px;
padding-left: 12px;
padding-right: 12px;
font-size: 13px;
color: black;
}
.darkBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .each-reprot-item-title {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .each-reprot-item-title {
border-bottom: 1.5px solid #8ca9b46e;
}
.mat-form-field-infix {
padding: 10px 0!important;
border-top: none;
}
button:focus {
outline: none;
outline: none;
}
mat-form-field svg {
width: 1.5em!important;
color: #c1c1c1;
}
.lightBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(75%) sepia(6%) saturate(975%) hue-rotate(151deg) brightness(86%) contrast(90%);
}
.darkBlue-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(137deg) brightness(105%) contrast(108%);
}
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(83%) sepia(3%) saturate(17%) hue-rotate(231deg) brightness(99%) contrast(91%);
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(14%) sepia(64%) saturate(1314%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.mat-date-range-picker {
z-index: 9999 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--body--background) !important;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
border-radius: var(--cart--border--radius) !important;
}
.mat-date-range-input-inner {
color: var(--primary--body--color) !important;
}
.mat-date-range-input-separator {
color: var(--primary--body--color) !important;
}
.mat-datepicker-toggle-default-icon {
color: var(--primary--body--color) !important;
}
.mat-datepicker-content {
background-color: var(--body--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.mdc-button__label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-cell-content {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-table-header tr th {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mat-calendar-body-label {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.mdc-icon-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-calendar-arrow {
fill: var(--primary--body--color) !important;
opacity: var(--opacity--80) !important;
}
.mat-mdc-form-field-infix {
padding-top: 5px !important;
}
.mat-mdc-text-field-wrapper {
height: 36px !important;
}
.time_input.is-valid {
background-position: right calc(.375em + .1875rem) center !important;
}
.time_input.is-invalid {
background-position: right calc(.375em + .1875rem) center !important;
}
.mat-mdc-form-field-flex {
height: 36px !important;
}
.mat-mdc-form-field-infix {
padding-top: 7px !important;
padding-bottom: 0px !important;
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:1186px) {
.show-sidebar .filter-header {
font-size: 12px;
}
}
@media only screen and (max-width:610px) {
.show-sidebar .filter-header-col {
width: 50% !important;
}
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
@media only screen and (max-width:531px) {
.show-sidebar .label-small {
font-size: 13px;
}
}
@media only screen and (max-width: 1450px) {
.show-sidebar .report-col {
width: 100%;
}
}
@media only screen and (max-width: 1705px) {
.show-sidebar .report-col-edit-weekly {
width: 100%;
}
.show-sidebar .mobile-screen-add-button {
display: block;
}
.show-sidebar .normal-screen-add-button {
display: none;
}
}
.darkBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.dark-theme .template-col-div {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.521);
}
.lightBlue-theme .template-col-div {
border-bottom: 1.5px solid #8ca9b46e;
}
.dark-theme .ewr-title-weekly-report, .darkBlue-theme .ewr-title-weekly-report {
background: transparent;
}
.dark-theme .ewr-panel-weekly-report>.row, .darkBlue-theme .ewr-panel-weekly-report>.row {
border-color: rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, color-mix(in srgb, white 4%, var(--body--background)), var(--body--background));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.dark-theme .ewr-page-weekly-report .choose_select_edit_weekly_report, .dark-theme .ewr-page-weekly-report .new_input_edit_weekly_report, .dark-theme .ewr-page-weekly-report .description_area_add_daily_report, .dark-theme .ewr-page-weekly-report .select-device-brand, .darkBlue-theme .ewr-page-weekly-report .choose_select_edit_weekly_report, .darkBlue-theme .ewr-page-weekly-report .new_input_edit_weekly_report, .darkBlue-theme .ewr-page-weekly-report .description_area_add_daily_report, .darkBlue-theme .ewr-page-weekly-report .select-device-brand {
border-color: rgba(255, 255, 255, 0.07) !important;
background: color-mix(in srgb, white 5%, var(--input--background)) !important;
}
.dark-theme .ewr-filter-body-weekly-report, .darkBlue-theme .ewr-filter-body-weekly-report, .dark-theme .ewr-page-weekly-report .col-6.mb-2 .form-group, .darkBlue-theme .ewr-page-weekly-report .col-6.mb-2 .form-group {
border-color: rgba(255, 255, 255, 0.055);
background-color: rgba(255, 255, 255, 0.035);
}
.lightBlue-theme .ewr-panel-weekly-report>.row {
border-color: rgba(117, 145, 155, 0.20);
background: #ffffff;
box-shadow: 0 12px 26px rgba(63, 164, 172, 0.08);
}
.lightBlue-theme .ewr-page-weekly-report .choose_select_edit_weekly_report, .lightBlue-theme .ewr-page-weekly-report .new_input_edit_weekly_report, .lightBlue-theme .ewr-page-weekly-report .description_area_add_daily_report, .lightBlue-theme .ewr-page-weekly-report .select-device-brand {
border-color: rgba(117, 145, 155, 0.22) !important;
background: #fbfdfe !important;
}
/* ===== admin-components/reports/edit-report-components/edit-weekly-report/edit-weekly-report.component.css (scoped) ===== */
app-edit-weekly-report {
.each-reprot-item-title {
width: 100%;
color: black;
border-bottom: 1.5px solid #3658757c;
margin-bottom: 13px;
font-weight: 500;
padding: 5px;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
label.switch {
border-bottom: 0px solid #d7d3d3;
}
.edit-report-weekly-card {
background-color: transparent;
border: none;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.each-reprot-item-title {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.choose_select_edit_weekly_report {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
border-top-left-radius: var(--cart--border--radius) !important;
border-bottom-left-radius: var(--cart--border--radius) !important;
}
.choose_select_edit_weekly_report:focus {
outline: none;
}
.choose_select_edit_weekly_report:active {
outline: none;
}
.new_input_edit_weekly_report {
outline: none;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.new_input_edit_weekly_report::placeholder {
color: var(--primary--body--color);
}
.description_area_add_daily_report {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
font-size: 13px;
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.description_area_add_daily_report::placeholder {
color: var(--primary--body--color);
font-size: 13px;
}
.report-title-input {
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.oriana-button-edit-weekly-report {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.oriana-button-edit-weekly-report:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 40px;
font-size: 13px;
}
.mobile-screen-add-button {
display: none;
}
.select-device-brand {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.select-device-brand::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
cursor: pointer;
}
.brand-name-span {
margin-left: .3rem;
font-size: 13.5px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
@media only screen and (min-width: 992px) and (max-width:1310px) {
.filter-header {
font-size: 11.5px;
}
}
@media only screen and (max-width: 1150px) {
.report-col-edit-weekly {
width: 100%;
}
.mobile-screen-add-button {
display: block;
}
.normal-screen-add-button {
display: none;
}
}
@media only screen and (max-width:870px) {
.filter-header-col {
width: 50% !important;
}
.f-left-mobile {
float: left;
}
}
.accordion-columns-button {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
height: 50px;
}
.accordion-columns-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion-button:focus {
z-index: 0
}
.tooltip-add-report-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 83%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
z-index: 99999;
}
.tooltip-add-report:hover .tooltip-add-report-text {
visibility: visible;
z-index: 99999;
}
@media only screen and (min-width: 992px) and (max-width:1400px) {
.filter-header {
font-size: 11.5px;
}
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-weekly-report {
max-height: 330px;
overflow: auto;
}
.template-col-div {
height: 35px;
margin-bottom: 0.7rem;
border-bottom: 1.5px solid #3658757c;
}
.template-label {
border-bottom: none !important;
}
.add-report-template-div {
color: var(--primary--body--color);
cursor: pointer;
text-align: right;
width: 100%;
}
.ewr-page-weekly-report {
position: relative;
z-index: 20;
padding: 8px 0 22px;
}
.ewr-card-weekly-report {
overflow: visible;
}
.ewr-body-weekly-report {
padding: 10px;
overflow: visible;
}
.ewr-title-weekly-report {
width: auto;
margin: 0 0 14px !important;
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--primary--body--color);
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
}
.ewr-layout-weekly-report {
row-gap: 16px;
align-items: stretch;
}
.ewr-panel-weekly-report {
display: flex;
overflow: visible;
}
.ewr-panel-weekly-report>.row {
width: 100%;
height: 100%;
margin: 0;
padding: 16px 0px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 98%, var(--input--background)), var(--body--background));
box-shadow: 0 10px 28px color-mix(in srgb, #000000 7%, transparent);
}
.ewr-config-panel-weekly-report {
padding-right: 8px;
}
.ewr-filter-panel-weekly-report {
padding-left: 8px;
}
.ewr-panel-grid-weekly-report, .ewr-filter-grid-weekly-report {
align-content: flex-start;
}
.ewr-page-weekly-report .form-group, .ewr-page-weekly-report .button-div {
margin-bottom: 12px;
}
.ewr-page-weekly-report .each-reprot-item-title {
width: 100%;
margin-bottom: 5px;
padding: 0;
border-bottom: none !important;
color: color-mix(in srgb, var(--primary--body--color) 86%, transparent);
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0;
opacity: 1;
}
.ewr-page-weekly-report .choose_select_edit_weekly_report, .ewr-page-weekly-report .new_input_edit_weekly_report, .ewr-page-weekly-report .description_area_add_daily_report, .ewr-page-weekly-report .select-device-brand {
min-height: 34px;
height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background)) !important;
box-shadow: none !important;
color: var(--primary--body--color) !important;
font-size: 12.5px;
opacity: 1;
outline: none !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.ewr-page-weekly-report .choose_select_edit_weekly_report:hover, .ewr-page-weekly-report .new_input_edit_weekly_report:hover, .ewr-page-weekly-report .description_area_add_daily_report:hover, .ewr-page-weekly-report .select-device-brand:hover {
border-color: color-mix(in srgb, var(--secondary--color) 30%, transparent) !important;
}
.ewr-page-weekly-report .choose_select_edit_weekly_report:focus, .ewr-page-weekly-report .new_input_edit_weekly_report:focus, .ewr-page-weekly-report .description_area_add_daily_report:focus, .ewr-page-weekly-report .select-device-brand:focus {
border-color: color-mix(in srgb, var(--secondary--color) 54%, transparent) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary--color) 12%, transparent) !important;
}
.ewr-page-weekly-report .new_input_edit_weekly_report.is-invalid, .ewr-page-weekly-report .description_area_add_daily_report.is-invalid, .ewr-page-weekly-report .choose_select_edit_weekly_report.is-invalid, .ewr-page-weekly-report .select-device-brand.is-invalid {
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.ewr-page-weekly-report:not(.ewr-report-submitted-weekly-report) .new_input_edit_weekly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .ewr-page-weekly-report:not(.ewr-report-submitted-weekly-report) .description_area_add_daily_report.is-invalid:not(.ng-touched):not(.ng-dirty), .ewr-page-weekly-report:not(.ewr-report-submitted-weekly-report) .choose_select_edit_weekly_report.is-invalid:not(.ng-touched):not(.ng-dirty), .ewr-page-weekly-report:not(.ewr-report-submitted-weekly-report) .select-device-brand.is-invalid:not(.ng-touched):not(.ng-dirty) {
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
background-image: none !important;
}
.ewr-page-weekly-report.ewr-report-submitted-weekly-report .new_input_edit_weekly_report.is-invalid, .ewr-page-weekly-report.ewr-report-submitted-weekly-report .select-device-brand.is-invalid, .ewr-page-weekly-report .new_input_edit_weekly_report.is-invalid.ng-touched, .ewr-page-weekly-report .new_input_edit_weekly_report.is-invalid.ng-dirty, .ewr-page-weekly-report .select-device-brand.is-invalid.ng-touched, .ewr-page-weekly-report .select-device-brand.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 21px center !important;
}
.ewr-page-weekly-report.ewr-report-submitted-weekly-report .description_area_add_daily_report.is-invalid, .ewr-page-weekly-report .description_area_add_daily_report.is-invalid.ng-touched, .ewr-page-weekly-report .description_area_add_daily_report.is-invalid.ng-dirty {
padding-right: 34px !important;
background-position: right 11px top 10px !important;
}
.ewr-page-weekly-report.ewr-report-submitted-weekly-report .choose_select_edit_weekly_report.is-invalid, .ewr-page-weekly-report .choose_select_edit_weekly_report.is-invalid.ng-touched, .ewr-page-weekly-report .choose_select_edit_weekly_report.is-invalid.ng-dirty {
padding-right: 42px !important;
background-position: right 28px center !important;
}
.ewr-page-weekly-report.ewr-design-selection-touched-weekly-report .ewr-template-select-weekly-report.is-invalid, .ewr-page-weekly-report.ewr-design-selection-touched-weekly-report .ewr-html-template-select-weekly-report.is-invalid {
padding-right: 42px !important;
border-color: color-mix(in srgb, #dc3545 72%, transparent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8 1.333 15.333 14H.667L8 1.333Zm0 4.334a.667.667 0 0 0-.667.666v3.334a.667.667 0 1 0 1.334 0V6.333A.667.667 0 0 0 8 5.667Zm0 6.666a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z'/%3e%3c/svg%3e") !important;
background-position: right 28px center !important;
background-repeat: no-repeat !important;
background-size: 15px 15px !important;
}
.ewr-page-weekly-report .description_area_add_daily_report {
height: auto;
min-height: 76px;
line-height: 1.45;
resize: vertical;
}
.ewr-page-weekly-report .select_arrow {
position: relative;
}
.ewr-page-weekly-report .select_arrow::after {
right: 12px;
opacity: 0.7;
}
.ewr-page-weekly-report .col-6.mb-2 .form-group {
min-height: 58px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 44%, transparent);
}
.ewr-brand-dropdown-weekly-report {
position: relative;
z-index: 60;
}
.ewr-brand-dropdown-weekly-report:has(.ewr-brand-menu-weekly-report.show), .ewr-brand-dropdown-weekly-report:focus-within {
z-index: 1500;
}
.ewr-brand-toggle-weekly-report {
display: flex;
align-items: center;
gap: 8px;
padding-right: 34px;
}
.ewr-brand-menu-weekly-report {
width: 100%;
max-height: 330px;
padding: 5px !important;
z-index: 1600 !important;
overflow: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent) !important;
border-radius: 9px !important;
background: var(--body--background) !important;
box-shadow: 0 18px 34px color-mix(in srgb, #000000 16%, transparent) !important;
}
.ewr-brand-search-weekly-report {
padding: 5px !important;
margin-bottom: 4px !important;
border-radius: 6px;
}
.ewr-brand-search-weekly-report i {
top: 50%;
transform: translateY(-50%) !important;
}
.ewr-brand-item-weekly-report, .ewr-brand-empty-weekly-report {
min-height: 32px;
margin-bottom: 2px;
padding: 6px 8px !important;
border-radius: 6px;
color: var(--primary--body--color);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ewr-brand-item-weekly-report:hover {
transform: translateX(2px);
background-color: color-mix(in srgb, var(--secondary--color) 13%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.ewr-template-action-weekly-report {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: var(--primary--body--color);
opacity: 0.72;
font-size: 12px;
}
.ewr-template-action-weekly-report:hover {
opacity: 1;
}
.ewr-page-weekly-report .template-col-div {
align-items: center;
height: auto;
min-height: 31px;
margin-bottom: 8px;
border-bottom: none !important;
}
.ewr-filter-title-weekly-report {
padding-bottom: 8px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent) !important;
font-size: 13.5px !important;
}
.ewr-filter-title-row-weekly-report {
margin-top: .3rem !important;
}
.ewr-filter-scroll-weekly-report {
max-height: 560px !important;
padding: 2px 4px 2px 0;
}
.ewr-filter-card-weekly-report {
margin-bottom: 8px;
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent) !important;
background-color: transparent !important;
}
.ewr-filter-summary-weekly-report {
min-height: 42px;
padding: 8px 11px !important;
}
.ewr-filter-summary-weekly-report h6 {
margin: 0;
color: var(--primary--body--color);
font-size: 11.5px !important;
font-weight: 650;
opacity: 0.82;
}
.ewr-filter-body-weekly-report {
padding: 12px 10px 2px;
background-color: color-mix(in srgb, var(--input--background) 35%, transparent);
}
.ewr-filter-body-weekly-report .row {
row-gap: 8px;
}
.ewr-filter-body-weekly-report .input-group {
margin-bottom: 0 !important;
}
.ewr-add-filter-weekly-report {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 38%, transparent) !important;
border-radius: 7px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
opacity: 1;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ewr-add-filter-weekly-report:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 62%, transparent) !important;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.ewr-empty-filter-wrap-weekly-report {
width: 100%;
}
.ewr-empty-filter-card-weekly-report {
display: flex;
align-items: center;
gap: 14px;
min-height: 112px;
padding: 18px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 48%, transparent), color-mix(in srgb, var(--body--background) 94%, var(--input--background)));
}
.ewr-empty-filter-icon-weekly-report {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 9px;
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
color: var(--secondary--color);
font-size: 17px;
}
.ewr-empty-filter-content-weekly-report {
display: grid;
gap: 3px;
flex: 1;
min-width: 0;
}
.ewr-empty-filter-title-weekly-report {
color: var(--primary--body--color);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.ewr-empty-filter-text-weekly-report {
color: var(--primary--body--color);
font-size: 12.5px;
line-height: 1.35;
opacity: 0.64;
}
.ewr-action-row-weekly-report .confirm_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ewr-action-row-weekly-report .confirm_button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.ewr-final-action-row-weekly-report {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding: 0;
margin-top: 2px !important;
}
.ewr-final-action-row-weekly-report .form-group {
margin-bottom: 0 !important;
}
.ewr-final-update-button-weekly-report {
min-width: 118px;
}
@media only screen and (max-width: 1160px) {
.ewr-config-panel-weekly-report, .ewr-filter-panel-weekly-report {
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (max-width: 720px) {
.ewr-empty-filter-card-weekly-report {
align-items: flex-start;
flex-direction: column;
}
.ewr-body-weekly-report {
padding: 14px 12px 18px;
}
.ewr-panel-weekly-report>.row {
padding: 12px;
}
.ewr-title-weekly-report {
width: 100%;
justify-content: center;
}
}
}
/* ===== admin-components/reports/filter-result-report/filter-result-report-navbar/filter-result-report-navbar.component.css (global) ===== */
.dark-theme .filter_result_navbar_settings_item, .darkBlue-theme .filter_result_navbar_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .useddevice_panel_search input, .darkBlue-theme .useddevice_panel_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .filter_result_navbar_settings_item, .lightBlue-theme .useddevice_panel_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
/* ===== admin-components/reports/filter-result-report/filter-result-report-navbar/filter-result-report-navbar.component.css (scoped) ===== */
app-filter-result-report-navbar {
.filter_result_navbar_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.filter_result_navbar_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.filter_result_navbar_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.filter_result_navbar_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.filter_result_navbar_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
}
/* ===== admin-components/reports/raw-log-report-record/raw-log-report-record.component.css (global) ===== */
app-raw-log-report-record .rlr-row-info-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--rlr-panel-border-color);
border-radius: 6px;
background: var(--rlr-panel-button-bg);
color: var(--primary--body--color);
cursor: pointer;
transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
app-raw-log-report-record .rlr-row-info-button:hover {
border-color: color-mix(in srgb, var(--secondary--color) 48%, var(--rlr-panel-border-color));
background: var(--rlr-panel-soft-bg);
transform: translateY(-1px);
}
app-raw-log-report-record .rlr-row-info-button .material-icons {
font-size: 19px;
}
@keyframes rlrFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes rlrSlideInFromRight {
from {
transform: translateX(104%);
}
to {
transform: translateX(0);
}
}
/* ===== admin-components/reports/raw-log-report-record/raw-log-report-record.component.css (scoped) ===== */
app-raw-log-report-record {
& {
--rlr-panel-bg: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 96%, white 4%),
var(--body--background));
--rlr-panel-card-bg: color-mix(in srgb, var(--input--background) 72%, transparent);
--rlr-panel-soft-bg: #f7fafc;
--rlr-panel-device-bg: var(--rlr-panel-soft-bg);
--rlr-panel-button-bg: var(--rlr-panel-card-bg);
--rlr-filter-group-bg: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
--rlr-filter-group-head-bg: linear-gradient(135deg, rgba(4, 46, 82, .10), rgba(76, 126, 170, .08));
--rlr-filter-rule-bg: #f8fbfd;
--rlr-filter-log-bg: rgba(4, 46, 82, .08);
--rlr-filter-op-bg: rgba(4, 46, 82, .14);
--rlr-filter-badge-bg: rgba(4, 46, 82, .06);
--rlr-panel-border-color: rgba(4, 46, 82, .14);
--rlr-panel-muted-color: color-mix(in srgb, var(--primary--body--color) 58%, transparent);
--rlr-panel-strong-color: color-mix(in srgb, var(--primary--body--color) 92%, white 8%);
--rlr-panel-shadow: var(--cart--box--shadow);
--rlr-panel-backdrop: rgba(0, 0, 0, .24);
}
.dark-theme &, .darkBlue-theme & {
--rlr-panel-bg: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 88%, white 7%),
var(--body--background));
--rlr-panel-card-bg: color-mix(in srgb, var(--input--background) 72%, transparent);
--rlr-panel-soft-bg: color-mix(in srgb, var(--input--background) 78%, var(--secondary--color) 22%);
--rlr-panel-device-bg: var(--rlr-panel-soft-bg);
--rlr-panel-button-bg: var(--rlr-panel-card-bg);
--rlr-panel-border-color: color-mix(in srgb, var(--primary--body--color) 14%, transparent);
--rlr-panel-muted-color: color-mix(in srgb, var(--primary--body--color) 62%, transparent);
--rlr-panel-strong-color: color-mix(in srgb, var(--primary--body--color) 94%, white 6%);
--rlr-panel-shadow: -18px 0 42px rgba(0, 0, 0, .38);
--rlr-panel-backdrop: rgba(0, 0, 0, .42);
}
.dark-theme & {
--rlr-filter-group-bg: linear-gradient(180deg, rgba(48, 52, 54, .96), rgba(36, 40, 42, .96));
--rlr-filter-group-head-bg: linear-gradient(135deg, rgba(90, 94, 96, .42), rgba(58, 62, 64, .68));
--rlr-filter-rule-bg: rgba(42, 46, 48, .96);
--rlr-filter-log-bg: rgba(92, 104, 112, .44);
--rlr-filter-op-bg: rgba(107, 112, 116, .58);
--rlr-filter-badge-bg: rgba(66, 70, 72, .92);
--rlr-panel-border-color: rgba(204, 204, 204, .18);
--rlr-panel-muted-color: rgba(204, 204, 204, .62);
--rlr-panel-strong-color: rgba(235, 235, 235, .9);
}
.darkBlue-theme & {
--rlr-panel-bg: linear-gradient(180deg, #0a1b23 0%, #06151a 100%);
--rlr-panel-card-bg: linear-gradient(180deg, rgba(22, 42, 55, .92), rgba(11, 29, 38, .92));
--rlr-panel-soft-bg: linear-gradient(135deg, rgba(61, 64, 115, .34), rgba(18, 42, 55, .62));
--rlr-panel-device-bg: linear-gradient(135deg, rgba(63, 164, 172, .18), rgba(61, 64, 115, .30));
--rlr-panel-button-bg: rgba(61, 64, 115, .28);
--rlr-filter-group-bg: linear-gradient(180deg, rgba(14, 38, 51, .98), rgba(8, 27, 36, .98));
--rlr-filter-group-head-bg: linear-gradient(135deg, rgba(37, 83, 104, .62), rgba(31, 44, 86, .66));
--rlr-filter-rule-bg: rgba(17, 48, 62, .92);
--rlr-filter-log-bg: rgba(63, 164, 172, .24);
--rlr-filter-op-bg: rgba(92, 95, 170, .58);
--rlr-filter-badge-bg: rgba(34, 74, 92, .72);
--rlr-panel-border-color: rgba(127, 132, 190, .24);
--rlr-panel-muted-color: rgba(255, 255, 255, .58);
--rlr-panel-strong-color: rgba(255, 255, 255, .92);
--rlr-panel-shadow: -18px 0 48px rgba(0, 0, 0, .45), inset 1px 0 0 rgba(255, 255, 255, .035);
--rlr-panel-backdrop: rgba(6, 21, 26, .54);
}
.lightBlue-theme & {
--rlr-panel-bg: linear-gradient(180deg, #ffffff 0%, #f1f7fa 100%);
--rlr-panel-card-bg: rgba(140, 169, 180, .12);
--rlr-panel-soft-bg: rgba(140, 169, 180, .18);
--rlr-panel-device-bg: var(--rlr-panel-soft-bg);
--rlr-panel-button-bg: var(--rlr-panel-card-bg);
--rlr-filter-group-bg: linear-gradient(180deg, #ffffff 0%, #f3f8fa 100%);
--rlr-filter-group-head-bg: linear-gradient(135deg, rgba(140, 169, 180, .22), rgba(63, 164, 172, .10));
--rlr-filter-rule-bg: rgba(140, 169, 180, .15);
--rlr-filter-log-bg: rgba(63, 164, 172, .14);
--rlr-filter-op-bg: rgba(63, 164, 172, .24);
--rlr-filter-badge-bg: rgba(140, 169, 180, .18);
--rlr-panel-border-color: rgba(140, 169, 180, .38);
--rlr-panel-muted-color: rgba(35, 53, 59, .58);
--rlr-panel-strong-color: #23353b;
--rlr-panel-shadow: 0 3px 20px rgba(0, 0, 0, .15);
--rlr-panel-backdrop: rgba(12, 36, 62, .22);
}
.rlr-filter-cell {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
height: 100%;
color: var(--primary--body--color);
font-size: 12px;
}
.rlr-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
color: var(--primary--body--color);
font-weight: 700;
opacity: .86;
}
.rlr-filter-meta {
flex: 0 0 auto;
opacity: .68;
white-space: nowrap;
}
.rlr-filter-preview {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
overflow: hidden;
}
.rlr-filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 150px;
border-radius: 4px;
padding: 4px 7px;
background: rgba(66, 94, 137, .58);
color: var(--primary--body--color);
line-height: 1;
}
.rlr-filter-pill span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rlr-filter-pill b {
opacity: .82;
font-size: 11px;
font-weight: 700;
}
.rlr-info-backdrop {
position: fixed;
inset: 0;
z-index: 1050;
background: var(--rlr-panel-backdrop);
animation: rlrFadeIn .18s ease;
}
.rlr-info-panel {
position: fixed;
top: 0;
right: 0;
left: auto;
z-index: 1051;
display: flex;
flex-direction: column;
width: min(520px, calc(100vw - 28px));
height: 100vh;
min-height: 0;
border-left: 1px solid var(--rlr-panel-border-color);
background: var(--rlr-panel-bg);
box-shadow: var(--rlr-panel-shadow);
color: var(--primary--body--color);
transform: translateX(104%);
transition: transform .24s ease;
}
.rlr-info-panel--wide {
width: min(820px, calc(100vw - 28px));
}
.rlr-info-panel--open {
transform: translateX(0);
animation: rlrSlideInFromRight .24s ease both;
}
.rlr-panel-resize-button {
position: absolute;
left: -18px;
top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 52px;
border: 1px solid var(--rlr-panel-border-color);
border-right: none;
border-radius: 10px 0 0 10px;
background: var(--rlr-panel-button-bg);
color: var(--primary--body--color);
box-shadow: var(--rlr-panel-shadow);
cursor: pointer;
transform: translateY(-50%);
}
.rlr-panel-resize-button:hover {
background: var(--rlr-panel-soft-bg);
}
.rlr-panel-resize-button .material-icons {
font-size: 24px;
}
.rlr-info-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 22px 22px 18px;
border-bottom: 1px solid var(--rlr-panel-border-color);
}
.rlr-info-eyebrow {
margin-bottom: 6px;
color: var(--rlr-panel-muted-color);
font-size: 11px;
font-weight: 800;
letter-spacing: .6px;
text-transform: uppercase;
}
.rlr-info-header h3 {
margin: 0;
color: var(--rlr-panel-strong-color);
font-size: 17px;
font-weight: 700;
line-height: 1.35;
word-break: break-word;
}
.rlr-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 auto;
border: 1px solid var(--rlr-panel-border-color);
border-radius: 7px;
background: var(--rlr-panel-button-bg);
color: var(--primary--body--color);
cursor: pointer;
}
.rlr-icon-button:hover {
background: var(--rlr-panel-soft-bg);
}
.rlr-icon-button .material-icons {
font-size: 20px;
}
.rlr-info-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
gap: 14px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
padding: 18px 18px 24px;
}
.rlr-info-section {
border: 1px solid var(--rlr-panel-border-color);
border-radius: 8px;
background: var(--rlr-panel-card-bg);
padding: 14px;
}
.rlr-section-title {
margin-bottom: 12px;
color: var(--rlr-panel-strong-color);
font-size: 12px;
font-weight: 800;
letter-spacing: .3px;
}
.rlr-filter-detail-section {
padding: 0;
overflow: visible;
}
.rlr-section-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: none;
background: transparent;
color: var(--rlr-panel-strong-color);
cursor: pointer;
padding: 14px;
text-align: left;
}
.rlr-section-toggle span:first-child {
font-size: 12px;
font-weight: 800;
letter-spacing: .3px;
}
.rlr-section-toggle .material-icons {
color: var(--rlr-panel-muted-color);
font-size: 22px;
}
.rlr-section-toggle:hover {
background: var(--rlr-panel-soft-bg);
}
.rlr-filter-detail-body {
border-top: 1px solid var(--rlr-panel-border-color);
max-height: 430px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
padding: 12px;
}
.rlr-filter-detail-body--open {
max-height: 430px;
overflow-y: auto;
}
.rlr-filter-tree {
color: var(--rlr-panel-strong-color);
}
.rlr-filter-tree-header, .rlr-filter-group-head, .rlr-filter-rule, .rlr-filter-join {
display: flex;
align-items: center;
}
.rlr-filter-tree-header {
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.rlr-filter-tree-header strong {
display: block;
font-size: 14px;
font-weight: 800;
}
.rlr-filter-tree-header span, .rlr-filter-group-head span {
display: block;
margin-top: 2px;
color: var(--rlr-panel-muted-color);
font-size: 11px;
}
.rlr-filter-tree-header b, .rlr-filter-join b {
border: 1px solid var(--rlr-panel-border-color);
border-radius: 14px;
background: var(--rlr-panel-soft-bg);
color: var(--rlr-panel-strong-color);
padding: 5px 12px;
font-size: 11px;
font-weight: 800;
}
.rlr-filter-group {
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
margin-top: 12px;
border: 1px solid var(--rlr-panel-border-color);
border-radius: 8px;
background: var(--rlr-filter-group-bg, var(--rlr-panel-card-bg));
}
.rlr-filter-group--nested {
margin-left: 10px !important;
width: calc(100% - 10px);
border-left: 3px solid var(--secondary--color);
}
.rlr-filter-group-head {
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--rlr-panel-border-color);
background: var(--rlr-filter-group-head-bg, var(--rlr-panel-soft-bg));
}
.rlr-filter-group-head strong {
display: block;
color: var(--rlr-panel-strong-color);
font-size: 11px;
font-weight: 800;
letter-spacing: .3px;
}
.rlr-filter-chevron, .rlr-filter-index {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.rlr-filter-chevron {
width: 24px;
height: 24px;
border: 1px solid var(--rlr-panel-border-color);
border-radius: 7px;
color: var(--rlr-panel-strong-color);
font-size: 18px;
line-height: 24px;
text-align: center;
}
.rlr-filter-rule {
position: relative;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) max-content max-content;
gap: 8px;
margin: 10px 12px;
min-height: 0;
border: 1px solid var(--rlr-panel-border-color);
border-radius: 8px;
background: var(--rlr-filter-rule-bg, var(--rlr-panel-soft-bg));
padding: 10px;
color: var(--rlr-panel-strong-color);
font-size: 12px;
}
.rlr-filter-index {
grid-column: 1;
grid-row: 1 / 3;
width: 20px;
height: 20px;
align-self: center;
border-radius: 50%;
background: color-mix(in srgb, var(--secondary--color) 28%, transparent);
color: var(--rlr-panel-strong-color);
font-weight: 700;
}
.rlr-filter-log, .rlr-filter-op, .rlr-filter-type, .rlr-filter-case {
border-radius: 4px;
padding: 4px 7px;
font-size: 11px;
line-height: 1.1;
white-space: nowrap;
}
.rlr-filter-log {
grid-column: 2;
grid-row: 1;
align-self: center;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
background: var(--rlr-filter-log-bg, color-mix(in srgb, var(--secondary--color) 36%, transparent));
width: fit-content;
max-width: 100%;
}
.rlr-filter-arrow {
display: none;
}
.rlr-filter-op {
grid-column: 3;
grid-row: 1;
align-self: center;
background: var(--rlr-filter-op-bg, color-mix(in srgb, var(--secondary--color) 44%, transparent));
font-weight: 700;
}
.rlr-filter-values {
grid-column: 2 / 5;
grid-row: 2;
min-width: 0;
display: block;
color: var(--rlr-panel-muted-color);
overflow-wrap: anywhere;
white-space: normal;
}
.rlr-filter-type {
grid-column: 3;
grid-row: 2;
width: fit-content;
background: var(--rlr-filter-badge-bg, var(--rlr-panel-soft-bg));
color: var(--rlr-panel-muted-color);
}
.rlr-filter-case {
grid-column: 4;
grid-row: 1;
align-self: center;
justify-self: end;
background: var(--rlr-filter-badge-bg, color-mix(in srgb, var(--secondary--color) 28%, transparent));
font-weight: 700;
}
.rlr-filter-join {
gap: 10px;
padding: 2px 12px;
}
.rlr-filter-join span {
height: 1px;
flex: 1;
background: var(--rlr-panel-border-color);
}
.rlr-filter-empty {
border-radius: 7px;
background: var(--rlr-panel-soft-bg);
color: var(--rlr-panel-muted-color);
padding: 12px;
font-size: 12px;
}
.rlr-info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.rlr-info-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rlr-info-grid--single {
grid-template-columns: 1fr;
}
.rlr-device-summary {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
border-radius: 8px;
background: var(--rlr-panel-device-bg);
padding: 12px;
}
.rlr-device-summary img {
width: 46px;
height: 46px;
flex: 0 0 auto;
border-radius: 8px;
object-fit: contain;
background: color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 18%);
padding: 6px;
}
.rlr-device-summary strong, .rlr-device-summary span {
display: block;
overflow-wrap: anywhere;
}
.rlr-device-summary strong {
color: var(--rlr-panel-strong-color);
font-size: 13px;
font-weight: 700;
}
.rlr-device-summary span {
margin-top: 4px;
color: var(--rlr-panel-muted-color);
font-size: 12px;
}
.rlr-info-item, .rlr-info-list div {
min-width: 0;
border-radius: 7px;
background: var(--rlr-panel-soft-bg);
padding: 10px;
}
.rlr-info-item span, .rlr-info-list span {
display: block;
margin-bottom: 6px;
color: var(--rlr-panel-muted-color);
font-size: 11px;
font-weight: 700;
}
.rlr-info-item strong, .rlr-info-list strong {
display: block;
min-width: 0;
color: var(--rlr-panel-strong-color);
font-size: 12px;
font-weight: 600;
line-height: 1.35;
overflow-wrap: anywhere;
}
.rlr-info-list {
display: grid;
gap: 10px;
}
.rlr-status-badge {
display: inline-flex !important;
width: fit-content;
border-radius: 14px;
padding: 5px 9px;
background: color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.rlr-status-completed {
background: rgba(72, 143, 101, .32);
color: white;
}
.rlr-status-error {
background: rgba(179, 74, 74, .28);
color: #f2b8b8 !important;
}
.rlr-error-box {
border-radius: 7px;
background: color-mix(in srgb, #b34a4a 15%, var(--body--background));
padding: 10px;
}
.rlr-error-box strong {
color: #f2b8b8;
font-size: 12px;
}
.rlr-error-box pre {
max-height: 220px;
overflow: auto;
margin: 10px 0 0;
color: var(--rlr-panel-strong-color);
font-size: 11px;
white-space: pre-wrap;
}
@media (max-width: 620px) {
.rlr-info-grid, .rlr-info-grid--two {
grid-template-columns: 1fr;
}
.rlr-filter-rule {
grid-template-columns: 24px minmax(0, 1fr);
}
.rlr-filter-op, .rlr-filter-case {
grid-column: 2;
justify-self: start;
}
.rlr-filter-values, .rlr-filter-type, .rlr-filter-case {
grid-column: 2;
width: fit-content;
max-width: 100%;
}
}
}
/* ===== admin-components/reports/report-analysis-confirmation-modal/report-analysis-confirmation-modal.component.css (global) ===== */
@keyframes analysisModalIn {
from {
opacity: 0;
transform: translateY(12px) scale(.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ===== admin-components/reports/report-analysis-confirmation-modal/report-analysis-confirmation-modal.component.css (scoped) ===== */
app-report-analysis-confirmation-modal {
.analysis-confirmation-dialog {
width: min(360px, calc(100vw - 28px));
}
.analysis-confirmation {
width: 100%;
padding: 22px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 12px;
background: linear-gradient(180deg, #16242e 0%, #101921 100%);
color: #f8fafc;
box-shadow: 0 24px 54px rgba(0, 0, 0, .34);
text-align: center;
animation: analysisModalIn .2s cubic-bezier(.34, 1.2, .5, 1);
}
.analysis-modal-icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
border-radius: 14px;
background: rgba(239, 68, 68, .14);
color: #fca5a5;
font-size: 18px;
}
.analysis-confirmation h5 {
margin: 0;
color: #ffffff;
font-size: 15px;
font-weight: 900;
line-height: 1.35;
}
.analysis-confirmation-text p {
margin: 9px 0 0;
color: #aeb8c2;
font-size: 12px;
font-weight: 600;
line-height: 1.55;
}
.analysis-confirmation-text strong {
color: #ffffff;
font-weight: 900;
}
.analysis-confirm-actions {
display: flex;
gap: 9px;
margin-top: 18px;
}
.analysis-confirm-btn {
flex: 1;
min-height: 34px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 8px;
font-size: 12px;
font-weight: 900;
cursor: pointer;
transition: transform .16s ease, border-color .16s ease, background-color .16s ease, opacity .16s ease;
}
.analysis-confirm-btn:hover:not(:disabled) {
transform: translateY(-1px);
}
.analysis-confirm-btn-secondary {
background: rgba(255, 255, 255, .06);
color: #f8fafc;
}
.analysis-confirm-btn-secondary:hover {
background: rgba(255, 255, 255, .09);
}
.analysis-confirm-btn-primary {
border-color: rgba(239, 68, 68, .45);
background: rgba(239, 68, 68, .15);
color: #fecaca;
}
.analysis-confirm-btn-primary:hover:not(:disabled) {
background: rgba(239, 68, 68, .22);
}
.analysis-confirm-btn:disabled {
cursor: wait;
opacity: .52;
transform: none;
}
@media (max-width: 420px) {
.analysis-confirmation {
padding: 20px;
}
}
}
/* ===== admin-components/reports/report-dynamic-edit-modal/report-dynamic-edit-modal.component.css (global) ===== */
@keyframes rdeFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes rdeIn {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ===== admin-components/reports/report-dynamic-edit-modal/report-dynamic-edit-modal.component.css (scoped) ===== */
app-report-dynamic-edit-modal {
.rde-overlay {
position: fixed;
inset: 0;
background: rgba(8, 10, 14, .55);
z-index: 1900;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
animation: rdeFade .18s ease;
}
.rde-frame {
width: 96vw;
height: 94vh;
display: flex;
flex-direction: column;
background: var(--input--background);
border: 1px solid var(--cart--border);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
animation: rdeIn .22s cubic-bezier(.34, 1.2, .5, 1);
}
.rde-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--cart--border);
flex: 0 0 auto;
}
.rde-title {
font-size: 14px;
font-weight: 700;
color: var(--primary--body--color);
}
.rde-title i {
margin-right: 7px;
color: var(--secondary--color);
}
.rde-actions {
display: flex;
align-items: center;
gap: 10px;
}
.rde-save-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 18px;
font-size: 12.5px;
font-weight: 700;
color: #fff;
background: var(--secondary--color);
border: 1px solid var(--secondary--color);
border-radius: 10px;
cursor: pointer;
transition: filter .15s ease, opacity .15s ease, transform .15s ease;
}
.rde-save-btn:hover:not(:disabled) {
filter: brightness(1.08);
transform: translateY(-1px);
}
.rde-save-btn:disabled {
opacity: .5;
cursor: not-allowed;
}
.rde-save-btn i {
font-size: 12px;
}
.rde-view-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 16px;
font-size: 12.5px;
font-weight: 700;
color: var(--secondary--color);
background: transparent;
border: 1px solid var(--secondary--color);
border-radius: 10px;
cursor: pointer;
transition: background .15s ease, color .15s ease, opacity .15s ease, transform .15s ease;
}
.rde-view-btn:hover:not(:disabled) {
background: var(--secondary--color);
color: #fff;
transform: translateY(-1px);
}
.rde-view-btn:disabled {
opacity: .5;
cursor: not-allowed;
}
.rde-view-btn i {
font-size: 12px;
}
.rde-close {
border: none;
background: transparent;
color: var(--primary--body--color);
font-size: 18px;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 8px;
transition: background .15s ease;
}
.rde-close:hover {
background: color-mix(in srgb, var(--primary--body--color) 12%, transparent);
}
.rde-body {
flex: 1;
min-height: 0;
overflow: auto;
position: relative;
}
}
/* ===== admin-components/reports/report-flag-picker/report-flag-picker.component.css (global) ===== */
@keyframes rfpFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes rfpIn {
from {
opacity: 0;
transform: translateY(16px) scale(.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ===== admin-components/reports/report-flag-picker/report-flag-picker.component.css (scoped) ===== */
app-report-flag-picker {
& {
display: inline-flex;
align-items: center;
justify-content: flex-end;
--rfp-overlay-bg: rgba(4, 18, 32, 0.58);
--rfp-modal-bg: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 94%, #ffffff 6%), color-mix(in srgb, var(--body--background) 97%, #ffffff 3%));
--rfp-modal-border: color-mix(in srgb, var(--primary--body--color) 10%, transparent);
--rfp-modal-shadow: 0 28px 72px rgba(4, 24, 42, 0.28);
--rfp-head-bg: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color) 12%, #ffffff), color-mix(in srgb, var(--input--background) 96%, #ffffff 4%) 68%);
--rfp-head-icon-bg: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color) 92%, #ffffff 8%), color-mix(in srgb, var(--secondary--color) 66%, #0f2744 34%));
--rfp-search-bg: color-mix(in srgb, var(--input--background) 92%, #ffffff 8%);
--rfp-search-border: color-mix(in srgb, var(--primary--body--color) 9%, transparent);
--rfp-search-focus-ring: color-mix(in srgb, var(--secondary--color) 18%, transparent);
--rfp-row-bg: color-mix(in srgb, var(--input--background) 98%, #ffffff 2%);
--rfp-row-hover-bg: color-mix(in srgb, var(--secondary--color) 6%, var(--input--background));
--rfp-row-border: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
--rfp-token-bg: color-mix(in srgb, var(--secondary--color) 10%, transparent);
--rfp-foot-bg: color-mix(in srgb, var(--primary--body--color) 3%, var(--input--background));
--rfp-muted-text: color-mix(in srgb, var(--primary--body--color) 68%, transparent);
--rfp-pick-fg: var(--secondary--color);
--rfp-pick-hover-fg: #fff;
}
.lightBlue-theme & {
--rfp-overlay-bg: rgba(13, 36, 62, 0.36);
--rfp-modal-bg: linear-gradient(180deg, #f8fbfc, #eef5f7);
--rfp-modal-border: rgba(140, 169, 180, 0.32);
--rfp-modal-shadow: 0 24px 64px rgba(12, 36, 62, 0.16);
--rfp-head-bg: linear-gradient(135deg, rgba(63, 164, 172, 0.18), rgba(255, 255, 255, 0.92) 70%);
--rfp-head-icon-bg: linear-gradient(135deg, #3fa4ac, #2d7b82);
--rfp-search-bg: rgba(255, 255, 255, 0.9);
--rfp-search-border: rgba(140, 169, 180, 0.34);
--rfp-search-focus-ring: rgba(63, 164, 172, 0.22);
--rfp-row-bg: rgba(255, 255, 255, 0.9);
--rfp-row-hover-bg: rgba(63, 164, 172, 0.08);
--rfp-row-border: rgba(140, 169, 180, 0.24);
--rfp-token-bg: rgba(63, 164, 172, 0.11);
--rfp-foot-bg: rgba(255, 255, 255, 0.72);
--rfp-muted-text: rgba(35, 53, 59, 0.7);
}
.dark-theme & {
--rfp-overlay-bg: rgba(2, 4, 6, 0.7);
--rfp-modal-bg: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 88%, #484848 12%), color-mix(in srgb, var(--body--background) 96%, #101010 4%));
--rfp-modal-border: rgba(255, 255, 255, 0.08);
--rfp-modal-shadow: 0 30px 80px rgba(0, 0, 0, 0.52);
--rfp-head-bg: linear-gradient(135deg, rgba(125, 125, 125, 0.2), rgba(56, 56, 56, 0.9) 72%);
--rfp-head-icon-bg: linear-gradient(135deg, #9b9b9b, #676767);
--rfp-search-bg: rgba(32, 32, 32, 0.9);
--rfp-search-border: rgba(255, 255, 255, 0.09);
--rfp-search-focus-ring: rgba(165, 169, 171, 0.22);
--rfp-row-bg: rgba(43, 47, 49, 0.95);
--rfp-row-hover-bg: rgba(125, 125, 125, 0.12);
--rfp-row-border: rgba(255, 255, 255, 0.08);
--rfp-token-bg: rgba(165, 169, 171, 0.12);
--rfp-foot-bg: rgba(22, 24, 25, 0.88);
--rfp-muted-text: rgba(204, 204, 204, 0.66);
--rfp-pick-fg: #fff;
--rfp-pick-hover-fg: #fff;
}
.darkBlue-theme & {
--rfp-overlay-bg: rgba(3, 10, 18, 0.74);
--rfp-modal-bg: radial-gradient(circle at top right, rgba(61, 64, 115, 0.24), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--input--background) 84%, #10172b 16%), color-mix(in srgb, var(--body--background) 96%, #09101c 4%));
--rfp-modal-border: rgba(142, 154, 255, 0.14);
--rfp-modal-shadow: 0 32px 84px rgba(0, 0, 0, 0.56);
--rfp-head-bg: linear-gradient(135deg, rgba(61, 64, 115, 0.44), rgba(14, 23, 41, 0.94) 74%);
--rfp-head-icon-bg: linear-gradient(135deg, #5e66b7, #333b80);
--rfp-search-bg: rgba(13, 22, 38, 0.92);
--rfp-search-border: rgba(142, 154, 255, 0.16);
--rfp-search-focus-ring: rgba(111, 123, 226, 0.22);
--rfp-row-bg: rgba(15, 24, 41, 0.94);
--rfp-row-hover-bg: rgba(61, 64, 115, 0.18);
--rfp-row-border: rgba(142, 154, 255, 0.12);
--rfp-token-bg: rgba(92, 101, 188, 0.16);
--rfp-foot-bg: rgba(8, 15, 28, 0.92);
--rfp-muted-text: rgba(255, 255, 255, 0.68);
--rfp-pick-fg: #fff;
--rfp-pick-hover-fg: #fff;
}
.rfp-btn {
display: inline-flex;
align-items: center;
gap: 7px;
justify-content: center;
min-height: 34px;
padding: 6px 11px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
color: #fff;
background: linear-gradient(135deg, color-mix(in srgb, var(--secondary--color) 94%, #ffffff 6%), color-mix(in srgb, var(--secondary--color) 70%, #041a2d 30%));
border: 1px solid color-mix(in srgb, var(--secondary--color) 78%, #ffffff 22%);
border-radius: 10px;
cursor: pointer;
box-shadow: 0 10px 20px color-mix(in srgb, var(--secondary--color) 18%, transparent);
transition: filter .15s ease, opacity .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rfp-btn:hover:not(:disabled) {
filter: brightness(1.04);
transform: translateY(-1px);
box-shadow: 0 14px 28px color-mix(in srgb, var(--secondary--color) 24%, transparent);
}
.rfp-btn:disabled {
opacity: .72;
cursor: not-allowed;
background: color-mix(in srgb, var(--input--background) 88%, transparent);
border-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
box-shadow: none;
color: var(--secondary--color);
}
.rfp-btn i {
font-size: 11px;
}
.rfp-overlay {
position: fixed;
inset: 0;
background: var(--rfp-overlay-bg);
backdrop-filter: blur(5px);
z-index: 2000000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: rfpFade .18s ease;
}
.rfp-modal {
width: min(1000px, calc(100vw - 48px));
max-height: 88vh;
flex: 0 0 auto;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--rfp-modal-bg);
border: 1px solid var(--rfp-modal-border);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--rfp-modal-shadow);
animation: rfpIn .24s cubic-bezier(.34, 1.3, .5, 1);
}
.rfp-head {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
padding: 18px 20px;
background: var(--rfp-head-bg);
border-bottom: 1px solid var(--rfp-modal-border);
}
.rfp-head-icon {
width: 42px;
height: 42px;
flex: 0 0 auto;
border-radius: 14px;
background: var(--rfp-head-icon-bg);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: 0 10px 20px color-mix(in srgb, var(--secondary--color) 28%, transparent);
}
.rfp-head-text {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.rfp-title {
font-size: 14.5px;
font-weight: 700;
color: var(--primary--body--color);
}
.rfp-subtitle {
font-size: 12px;
font-weight: 600;
color: var(--rfp-muted-text);
text-transform: uppercase;
letter-spacing: .08em;
}
.rfp-close {
border: 1px solid transparent;
background: color-mix(in srgb, var(--primary--body--color) 5%, transparent);
color: var(--primary--body--color);
font-size: 17px;
cursor: pointer;
width: 34px;
height: 34px;
border-radius: 10px;
flex: 0 0 auto;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.rfp-close:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 22%, transparent);
background: color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.rfp-search {
display: flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
margin: 14px 18px 10px;
padding: 11px 14px;
border: 1px solid var(--rfp-search-border);
border-radius: 14px;
background: var(--rfp-search-bg);
transition: border-color .15s ease, box-shadow .15s ease;
}
.rfp-search:focus-within {
border-color: var(--secondary--color);
box-shadow: 0 0 0 4px var(--rfp-search-focus-ring);
}
.rfp-search>i {
color: var(--primary--body--color);
opacity: .56;
font-size: 12px;
}
.rfp-search input {
flex: 1;
border: none;
outline: none;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
}
.rfp-search-clear {
cursor: pointer;
opacity: .5 !important;
transition: opacity .15s ease;
}
.rfp-search-clear:hover {
opacity: 1 !important;
}
.rfp-selected {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 0 0 auto;
max-height: min(140px, 26vh);
overflow-y: auto;
padding: 8px 12px;
margin: 0 12px 4px 12px;
border: 1px solid var(--rfp-row-border);
border-radius: 10px;
background: var(--rfp-foot-bg);
}
.rfp-selected-chip {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 3px 4px 3px 10px;
border-radius: 999px;
background: var(--rfp-token-bg);
font-size: 12px;
color: var(--rfp-pick-fg);
}
.rfp-selected-name {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rfp-selected-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 50%;
cursor: pointer;
background: transparent;
color: var(--rfp-muted-text);
transition: background 0.15s ease, color 0.15s ease;
}
.rfp-selected-remove:hover {
background: var(--rfp-row-hover-bg);
color: var(--rfp-pick-hover-fg);
}
.rfp-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 2px 12px 10px 12px;
}
.rfp-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 6px 0;
}
.rfp-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--rfp-row-border);
border-radius: 14px;
background: var(--rfp-row-bg);
cursor: pointer;
transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.rfp-row:hover {
border-color: var(--secondary--color);
background: var(--rfp-row-hover-bg);
transform: translateY(-1px);
box-shadow: 0 12px 24px color-mix(in srgb, #000000 9%, transparent);
}
.rfp-row-main {
flex: 1;
min-width: 0;
}
.rfp-name {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
margin-bottom: 6px;
}
.rfp-tokens {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.rfp-token {
display: inline-block;
padding: 3px 8px;
font-size: 10.5px;
font-family: 'Consolas', 'Courier New', monospace;
color: var(--primary--body--color);
background: var(--rfp-token-bg);
border: 1px solid color-mix(in srgb, var(--secondary--color) 12%, transparent);
border-radius: 999px;
word-break: break-all;
}
.rfp-lvl {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
color: #fff;
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .18);
}
.rfp-lvl-high {
background: linear-gradient(135deg, #d64545, #b02a2a);
}
.rfp-lvl-mid {
background: linear-gradient(135deg, #d9a441, #c07f1f);
}
.rfp-lvl-low {
background: linear-gradient(135deg, #5aa661, #3f8248);
}
.rfp-pick {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--rfp-pick-fg);
font-size: 12px;
transition: background .14s ease, color .14s ease, transform .14s ease;
}
.rfp-row:hover .rfp-pick {
background: var(--secondary--color);
color: var(--rfp-pick-hover-fg);
transform: scale(1.1);
}
.rfp-loading, .rfp-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 54px 22px;
color: var(--rfp-muted-text);
font-size: 13px;
text-align: center;
}
.rfp-loading i {
font-size: 24px;
color: var(--secondary--color);
}
.rfp-empty i {
font-size: 30px;
}
.rfp-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex: 0 0 auto;
padding: 12px 18px;
border-top: 1px solid var(--rfp-modal-border);
background: var(--rfp-foot-bg);
font-size: 11.5px;
color: var(--primary--body--color);
}
.rfp-foot span:first-child {
font-weight: 700;
}
.rfp-foot-hint {
color: var(--rfp-muted-text);
}
@media (max-width: 767px) {
& {
width: 100%;
}
.rfp-btn {
width: 100%;
}
.rfp-overlay {
padding: 14px;
}
.rfp-modal {
width: 100%;
max-height: 92vh;
border-radius: 18px;
}
.rfp-head, .rfp-foot {
padding-left: 14px;
padding-right: 14px;
}
.rfp-search {
margin-left: 14px;
margin-right: 14px;
}
.rfp-row {
align-items: flex-start;
flex-wrap: wrap;
}
.rfp-row-main {
width: calc(100% - 50px);
}
.rfp-pick {
margin-left: auto;
}
.rfp-foot {
flex-direction: column;
align-items: flex-start;
}
}
.rfp-foot i {
margin-right: 5px;
}
.rfp-foot-hint {
opacity: .55;
text-transform: uppercase;
letter-spacing: .5px;
font-size: 10px;
font-weight: 600;
}
}
/* ===== admin-components/reports/report-html-preview/report-html-preview.component.css (global) ===== */
@keyframes rhpFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes rhpIn {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ===== admin-components/reports/report-html-preview/report-html-preview.component.css (scoped) ===== */
app-report-html-preview {
.rhp-overlay {
position: fixed;
inset: 0;
background: rgba(8, 10, 14, .6);
backdrop-filter: blur(2px);
z-index: 2100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: rhpFade .18s ease;
}
.rhp-frame {
width: min(920px, 95vw);
height: 90vh;
display: flex;
flex-direction: column;
background: var(--input--background);
border: 1px solid var(--cart--border);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
animation: rhpIn .22s cubic-bezier(.34, 1.2, .5, 1);
}
.rhp-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--cart--border);
flex: 0 0 auto;
}
.rhp-title {
font-size: 14px;
font-weight: 700;
color: var(--primary--body--color);
}
.rhp-title i {
margin-right: 8px;
color: var(--secondary--color);
}
.rhp-close {
border: none;
background: transparent;
color: var(--primary--body--color);
font-size: 18px;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 8px;
transition: background .15s ease;
}
.rhp-close:hover {
background: color-mix(in srgb, var(--primary--body--color) 12%, transparent);
}
.rhp-body {
flex: 1;
min-height: 0;
position: relative;
background: #eef1f5;
}
.rhp-frame-iframe {
width: 100%;
height: 100%;
border: none;
}
.rhp-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary--color);
font-size: 26px;
}
}
/* ===== admin-components/reports/report-navbar/report-navbar.component.css (global) ===== */
.dark-theme .report_navbar_settings_item, .darkBlue-theme .report_navbar_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .rpn-menu-report-navbar {
border-color: color-mix(in srgb, #7d7d7d 34%, transparent);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 9%, transparent),
transparent 42%),
color-mix(in srgb, white 5%, var(--body--background));
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}
.darkBlue-theme .rpn-menu-report-navbar {
border-color: color-mix(in srgb, #3D4073 45%, transparent);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 12%, transparent),
transparent 42%),
color-mix(in srgb, white 6%, var(--body--background));
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}
.dark-theme .rpn-item-report-navbar:hover, .dark-theme .rpn-item-report-navbar:focus {
background-color: rgba(255, 255, 255, 0.10) !important;
}
.darkBlue-theme .rpn-item-report-navbar:hover, .darkBlue-theme .rpn-item-report-navbar:focus {
background-color: color-mix(in srgb, white 10%, var(--body--background)) !important;
}
.dark-theme .useddevice_list_search input, .darkBlue-theme .useddevice_list_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .report_navbar_settings_item, .lightBlue-theme .useddevice_list_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
.lightBlue-theme .rpn-menu-report-navbar {
border-color: color-mix(in srgb, #3fa4ac 35%, transparent);
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
#ffffff;
box-shadow:
var(--cart--box--shadow),
0 18px 34px rgba(63, 164, 172, 0.12);
}
.lightBlue-theme .rpn-item-report-navbar:hover, .lightBlue-theme .rpn-item-report-navbar:focus {
background-color: color-mix(in srgb, #3FA4AC 18%, var(--body--background)) !important;
color: #23353b !important;
}
/* ===== admin-components/reports/report-navbar/report-navbar.component.css (scoped) ===== */
app-report-navbar {
.report_settings_item {
height: 36px;
float: left;
margin-right: .5rem;
padding: 0.2rem 1rem;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
cursor: pointer;
color: var(--primary--body--color);
}
.report_settings_item_a {
text-decoration: none;
color: var(--primary--body--color);
}
.report_settings_main {
margin-top: 1rem;
margin-bottom: 1rem;
position: relative;
}
.report_settings_main:has(.rpn-menu-report-navbar.show), .report_settings_main:focus-within {
z-index: 1400;
}
.report_navbar_settings_item {
position: relative;
z-index: 300;
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.report_navbar_settings_item:has(.rpn-menu-report-navbar.show), .report_navbar_settings_item:focus-within {
z-index: 1300;
}
.rpn-dropdown-report-navbar {
position: relative;
}
.rpn-toggle-report-navbar {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
color: var(--primary--body--color) !important;
font-size: 13px;
}
.rpn-chevron-report-navbar {
width: 14px;
height: 14px;
opacity: 0.68;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.rpn-dropdown-report-navbar.show .rpn-chevron-report-navbar, .rpn-toggle-report-navbar[aria-expanded="true"] .rpn-chevron-report-navbar {
transform: rotate(180deg);
opacity: 1;
}
.rpn-menu-report-navbar {
min-width: 230px;
padding: 6px !important;
margin-top: 8px !important;
z-index: 1350 !important;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent);
border-radius: 8px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
box-shadow:
var(--cart--box--shadow),
0 18px 36px color-mix(in srgb, #000000 14%, transparent);
}
.rpn-list-report-navbar {
display: grid;
gap: 3px;
list-style: none;
}
.rpn-item-report-navbar {
display: flex !important;
align-items: center;
gap: 9px;
min-height: 34px;
padding: 8px 10px !important;
border-radius: 6px;
background-color: transparent !important;
color: var(--primary--body--color) !important;
font-size: 13px;
line-height: 1.25;
cursor: pointer;
transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.rpn-item-report-navbar:hover, .rpn-item-report-navbar:focus {
transform: translateX(2px);
background-color: color-mix(in srgb, var(--secondary--color) 12%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.rpn-icon-report-navbar {
min-width: 15px;
color: var(--primary--body--color);
font-size: 13px;
opacity: 0.62;
text-align: center;
}
.rpn-item-report-navbar:hover .rpn-icon-report-navbar, .rpn-item-report-navbar:focus .rpn-icon-report-navbar {
opacity: 1;
color: var(--secondary--color);
}
.report_navbar_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.report_navbar_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.report_navbar_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
}
/* ===== admin-components/reports/report-preset-pane/report-preset-pane.component.css (global) ===== */
.pp-wrap .pp-body:has(.rtg-collapse:not(.rtg-collapse-open)) {
padding: 0;
}
.pp-wrap .pp-body:has(.rtg-collapse:not(.rtg-collapse-open)) .rtg-wrap {
margin: 0;
}
.pp-wrap .pp-body:has(.rtg-collapse:not(.rtg-collapse-open)) .rtg-toggle {
border: none;
border-radius: 0 0 11px 11px;
}
/* ===== admin-components/reports/report-preset-pane/report-preset-pane.component.css (scoped) ===== */
app-report-preset-pane {
.pp-wrap {
position: relative;
border: 1px solid var(--cart--border);
border-radius: 12px;
background: var(--input--background);
box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
margin-top: 6px;
transition: border-color .25s ease, box-shadow .25s ease;
}
.pp-selected {
border-color: var(--pp-accent);
box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
.pp-strip {
display: block;
height: 5px;
border-radius: 11px 11px 0 0;
transition: background .3s ease;
}
.pp-body {
padding: 12px 14px 14px 14px;
transition: padding .2s ease;
}
.pp-body > *:first-child {
display: block;
}
}
/* ===== admin-components/reports/report-preview/report-preview.component.css (global) ===== */
@keyframes rpIn {
from { opacity: 0; transform: translateY(14px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ===== admin-components/reports/report-preview/report-preview.component.css (scoped) ===== */
app-report-preview {
.rp-overlay {
position: fixed;
inset: 0;
background: rgba(10, 12, 15, .62);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.rp-frame {
width: min(860px, 94vw);
max-height: 92vh;
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
background: var(--input--background);
box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
animation: rpIn .25s cubic-bezier(.4, 0, .2, 1);
}
.rp-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 14px 12px 14px;
border-bottom: 1px solid var(--cart--border);
}
.rp-toolbar-title {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
}
.rp-toolbar-title i {
margin-right: 6px;
color: var(--secondary--color);
}
.darkBlue-theme & .rp-toolbar-title, .darkBlue-theme & .rp-toolbar-title i {
color: #ffffff;
}
.rp-toolbar-note {
flex: 1;
font-size: 11px;
color: var(--primary--body--color);
opacity: .55;
text-align: right;
}
.rp-close {
border: none;
background: transparent;
color: var(--primary--body--color);
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.rp-close:hover {
background: rgba(128, 128, 128, .15);
}
.rp-scroll {
overflow-y: auto;
padding: 18px;
background: rgba(128, 128, 128, .08);
}
.rp-page > .orx-section:first-child {
margin-top: 0;
}
.rp-page {
--orx-ink: #1e2430;
--orx-muted: #66707c;
--orx-line: #e3e6ea;
--orx-panel: #f6f7f9;
--orx-stripe: #fbfbfc;
--orx-card: #ffffff;
--orx-chip: color-mix(in srgb, var(--orx-accent) 10%, #ffffff);
--orx-soft: color-mix(in srgb, var(--orx-accent) 18%, #ffffff);
position: relative;
background: #ffffff;
color: var(--orx-ink);
font-family: "Roboto", "Segoe UI", sans-serif;
padding: 34px 38px 40px 38px;
border-radius: 6px;
box-shadow: 0 3px 14px rgba(0, 0, 0, .18);
overflow: hidden;
}
.rp-page-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: .06;
pointer-events: none;
z-index: 0;
}
.rp-page > .orx-toc, .rp-page > .orx-section {
position: relative;
z-index: 1;
}
.rp-page.rp-dark {
--orx-ink: #e8eaed;
--orx-muted: #9aa4ad;
--orx-line: #3d4449;
--orx-panel: #2a3338;
--orx-stripe: #2b3236;
--orx-card: #21262a;
--orx-chip: color-mix(in srgb, var(--orx-accent) 18%, #21262a);
--orx-soft: color-mix(in srgb, var(--orx-accent) 30%, #21262a);
background: #252a2d;
}
.rp-coverpage {
position: relative;
aspect-ratio: 210 / 297;
background: #1a1e23;
background-image: radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .05) 0, transparent 42%),
radial-gradient(circle at 15% 60%, rgba(255, 255, 255, .035) 0, transparent 38%);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 3px 14px rgba(0, 0, 0, .18);
margin-bottom: 18px;
}
.rp-cover-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.rp-cover-has-img .rp-cover-shade {
height: 100%;
background: linear-gradient(180deg, rgba(15, 18, 22, .25) 0%, rgba(15, 18, 22, .5) 45%, rgba(15, 18, 22, .92) 100%);
}
.rp-cover-logo {
position: absolute;
top: 26px;
right: 30px;
max-width: 120px;
max-height: 60px;
object-fit: contain;
z-index: 2;
}
.rp-cover-shade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 62%;
background: linear-gradient(180deg, rgba(15, 18, 22, 0) 0%, rgba(15, 18, 22, .55) 35%, rgba(15, 18, 22, .93) 100%);
}
.rp-cover-band {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 44px 44px 44px;
z-index: 2;
}
.rp-cover-kicker {
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: 3px;
color: #fff;
background: var(--orx-accent);
padding: 5px 12px;
border-radius: 4px;
}
.rp-cover-title {
margin: 15px 0 4px 0;
font-size: 30px;
font-weight: 800;
color: #fff;
line-height: 1.15;
letter-spacing: .3px;
}
.rp-cover-sub {
font-size: 13px;
color: rgba(255, 255, 255, .85);
}
.rp-cover-rule {
width: 58px;
height: 4px;
background: var(--orx-accent);
border-radius: 2px;
margin: 17px 0;
}
.rp-cover-meta {
display: flex;
gap: 36px;
}
.rp-cover-meta span {
font-size: 12px;
font-weight: 600;
color: #fff;
}
.rp-cover-meta b {
display: block;
font-size: 8px;
font-weight: 700;
letter-spacing: 1.4px;
color: rgba(255, 255, 255, .55);
margin-bottom: 3px;
}
.orx-toc {
counter-reset: tocitem;
}
.orx-toc-kicker {
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
color: var(--orx-accent);
text-transform: uppercase;
display: block;
}
.orx-toc-title {
font-size: 24px;
font-weight: 800;
margin: 2px 0 4px 0;
color: var(--orx-ink);
}
.orx-toc-sub {
font-size: 11.5px;
color: var(--orx-muted);
margin-bottom: 18px;
}
.orx-toc-item {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px;
border: 1px solid var(--orx-line);
border-radius: 10px;
margin-bottom: 7px;
background: var(--orx-card);
counter-increment: tocitem;
}
.rp-dark .orx-toc-item {
background: var(--orx-panel);
}
.orx-toc-num {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--orx-accent);
color: #fff;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.orx-toc-num::before {
content: counter(tocitem);
}
.orx-toc-ico {
color: var(--orx-accent);
width: 16px;
text-align: center;
font-size: 12px;
}
.orx-toc-item a {
text-decoration: none;
color: var(--orx-ink);
font-weight: 600;
font-size: 12.5px;
}
.orx-toc-desc {
font-size: 10px;
color: var(--orx-muted);
display: block;
margin-top: 1px;
}
.rp-style2 .orx-toc-item { border-radius: 4px; }
.rp-style2 .orx-toc-num { border-radius: 6px; }
.rp-style3 .orx-toc-item { border-radius: 0; }
.rp-style3 .orx-toc-num { border-radius: 4px; }
.rp-style4 .orx-toc-item { border-radius: 16px; }
.rp-style4 .orx-toc-num {
background: var(--orx-chip);
color: var(--orx-accent);
border: 1px solid var(--orx-accent);
}
.orx-section {
margin-top: 44px;
}
.orx-section-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px 0;
}
.orx-section-icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--orx-accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex: 0 0 auto;
}
.orx-section-title {
font-size: 16px;
font-weight: 700;
letter-spacing: .4px;
color: var(--orx-ink);
white-space: nowrap;
}
.orx-section-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, var(--orx-accent) 0%, var(--orx-line) 70%);
border-radius: 2px;
}
.orx-table-wrap {
border: 1px solid var(--orx-line);
border-radius: 10px;
overflow: hidden;
background: var(--orx-card);
}
table.orx-table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
table.orx-table thead th {
background: var(--orx-panel);
color: var(--orx-muted);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .7px;
padding: 9px 12px;
border-bottom: 2px solid var(--orx-accent);
text-align: left;
}
table.orx-table tbody td {
padding: 8px 12px;
border-bottom: 1px solid var(--orx-line);
color: var(--orx-ink);
font-size: 10.5px;
vertical-align: middle;
word-break: break-word;
background: var(--orx-card);
}
table.orx-table tbody tr:nth-child(even) td {
background: var(--orx-stripe);
}
table.orx-table tbody tr:last-child td {
border-bottom: none;
}
.rp-meta-key {
font-weight: 700;
color: var(--orx-muted) !important;
width: 190px;
}
.orx-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 20px;
font-size: 9px;
font-weight: 700;
letter-spacing: .4px;
line-height: 1.5;
white-space: nowrap;
}
.orx-badge--group {
background: var(--orx-chip);
color: var(--orx-accent);
border: 1px solid var(--orx-accent);
}
.orx-badge--op {
background: var(--orx-panel);
color: var(--orx-ink);
border: 1px solid var(--orx-line);
}
.orx-badge--logic {
background: #eef3f9;
color: #1d5b9b;
border: 1px solid #c9dcf0;
text-transform: uppercase;
}
.rp-dark .orx-badge--logic {
background: #253649;
color: #8fbce8;
border-color: #35516d;
}
.orx-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 4px;
}
.orx-kpi-card {
border: 1px solid var(--orx-line);
border-left: 3px solid var(--orx-accent);
border-radius: 10px;
padding: 10px 12px;
background: var(--orx-panel);
}
.orx-kpi-value {
display: block;
font-size: 15px;
font-weight: 800;
color: var(--orx-ink);
line-height: 1.35;
}
.orx-kpi-label {
display: block;
font-size: 8px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--orx-muted);
margin-top: 3px;
}
.orx-insights {
margin-top: 18px;
border: 1px solid var(--orx-line);
border-radius: 10px;
padding: 12px 14px;
background: var(--orx-panel);
}
.orx-insights-title {
font-size: 12px;
font-weight: 700;
color: var(--orx-ink);
margin-bottom: 6px;
}
.orx-insights-title i {
color: var(--orx-accent);
margin-right: 6px;
}
.orx-insights ul {
margin: 0;
padding-left: 16px;
}
.orx-insights li {
font-size: 11px;
color: var(--orx-ink);
line-height: 1.75;
margin-bottom: 3px;
}
.orx-sev-row {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.orx-sev-chip {
border: 1px solid var(--orx-line);
border-radius: 10px;
padding: 8px 14px;
background: var(--orx-panel);
min-width: 88px;
}
.orx-sev-count {
display: block;
font-size: 15px;
font-weight: 800;
color: var(--orx-ink);
line-height: 1.3;
}
.orx-sev-label {
display: block;
font-size: 8px;
font-weight: 700;
letter-spacing: .7px;
text-transform: uppercase;
color: var(--orx-muted);
margin-top: 2px;
}
.orx-sevb-total { border-left: 4px solid var(--orx-accent); }
.orx-sevb-3 { border-left: 4px solid #c9922a; }
.orx-sevb-4 { border-left: 4px solid #cf6a2d; }
.orx-sevb-5 { border-left: 4px solid #b93434; }
.orx-lvl {
display: inline-block;
padding: 2px 9px;
border-radius: 20px;
font-size: 9px;
font-weight: 700;
letter-spacing: .4px;
white-space: nowrap;
color: #fff;
}
.orx-lvl-3 { background: #c9922a; }
.orx-lvl-4 { background: #cf6a2d; }
.orx-lvl-5 { background: #b93434; }
.orx-chart-card {
border: 1px solid var(--orx-line);
border-radius: 12px;
padding: 16px 16px 12px 16px;
margin-top: 18px;
background: var(--orx-card);
}
.rp-dark .orx-chart-card {
background: var(--orx-panel);
}
.orx-chart-title {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--orx-ink);
}
.orx-chart-desc {
display: block;
font-size: 11px;
color: var(--orx-muted);
margin-bottom: 10px;
}
.rp-canvas {
height: 260px;
width: 100%;
position: relative;
}
.rp-canvas-pie {
height: 240px;
width: 240px;
margin: 0 auto;
position: relative;
}
.orx-bar {
width: 100%;
height: 8px;
background: var(--orx-line);
border-radius: 4px;
overflow: hidden;
}
.orx-bar-fill {
height: 100%;
background: var(--orx-accent);
border-radius: 4px;
max-width: 100%;
}
.orx-topn-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.orx-topn-card {
border: 1px solid var(--orx-line);
border-radius: 10px;
overflow: hidden;
background: var(--orx-card);
}
.orx-topn-title {
padding: 8px 12px;
font-size: 11px;
font-weight: 700;
color: var(--orx-ink);
background: var(--orx-panel);
border-bottom: 2px solid var(--orx-accent);
}
.orx-topn-title i {
color: var(--orx-accent);
margin-right: 6px;
}
.orx-log-cell {
font-family: 'Consolas', 'Courier New', monospace;
font-size: 9px;
word-break: break-all;
line-height: 1.55;
}
.orx-summary {
font-size: 12px;
line-height: 1.9;
color: var(--orx-ink);
text-align: justify;
margin: 0;
}
.orx-prepared-wrap {
display: flex;
justify-content: flex-end;
margin-top: 34px;
}
.orx-prepared {
display: flex;
align-items: center;
gap: 14px;
width: 260px;
min-height: 95px;
padding: 16px 18px;
border: 1px solid var(--orx-line);
border-left: 4px solid var(--orx-accent);
border-radius: 10px;
background: var(--orx-panel);
}
.orx-prepared-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--orx-accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
flex: 0 0 auto;
}
.orx-prepared-label {
display: block;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--orx-muted);
margin-bottom: 3px;
}
.orx-prepared-name {
display: block;
font-size: 19px;
font-weight: 800;
color: var(--orx-ink);
letter-spacing: .3px;
}
.rp-style2 .orx-section-icon, .rp-style2 .orx-badge { border-radius: 4px; }
.rp-style2 .orx-table-wrap, .rp-style2 .orx-chart-card, .rp-style2 .orx-topn-card, .rp-style2 .orx-kpi-card, .rp-style2 .orx-insights, .rp-style2 .orx-sev-chip, .rp-style2 .orx-prepared { border-radius: 4px; }
.rp-style2 table.orx-table thead th {
background: var(--orx-accent);
color: #fff;
border-bottom: none;
}
.rp-style2 .orx-topn-title {
background: var(--orx-accent);
color: #fff;
border-bottom: none;
}
.rp-style2 .orx-topn-title i { color: rgba(255, 255, 255, .85); }
.rp-style2 .orx-section-line {
background: var(--orx-accent);
height: 3px;
}
.rp-style2 .orx-kpi-card {
border-left: 1px solid var(--orx-line);
border-top: 3px solid var(--orx-accent);
}
.rp-style3 .orx-section-head {
background: var(--orx-panel);
border-left: 6px solid var(--orx-accent);
padding: 8px 12px;
}
.rp-style3 .orx-section-icon {
background: transparent;
color: var(--orx-accent);
font-size: 15px;
}
.rp-style3 .orx-section-line { display: none; }
.rp-style3 .orx-table-wrap, .rp-style3 .orx-chart-card, .rp-style3 .orx-topn-card, .rp-style3 .orx-kpi-card, .rp-style3 .orx-insights, .rp-style3 .orx-sev-chip, .rp-style3 .orx-prepared { border-radius: 0; }
.rp-style3 .orx-badge { border-radius: 4px; }
.rp-style3 .orx-kpi-card { background: var(--orx-card); }
.rp-style4 .orx-table-wrap, .rp-style4 .orx-chart-card, .rp-style4 .orx-topn-card, .rp-style4 .orx-insights, .rp-style4 .orx-sev-chip, .rp-style4 .orx-prepared { border-radius: 16px; }
.rp-style4 .orx-kpi-card {
border-radius: 16px;
border-left: 1px solid var(--orx-line);
background: var(--orx-chip);
}
.rp-style4 .orx-section-icon { border-radius: 50%; }
.rp-style4 table.orx-table thead th {
color: var(--orx-accent);
border-bottom: 1px solid var(--orx-line);
}
}
/* ===== admin-components/reports/report-result/report-result-navbar/report-result-navbar.component.css (global) ===== */
.dark-theme .result_navbar_settings_item, .darkBlue-theme .result_navbar_settings_item {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 88%, white 5%), var(--input--background));
}
.dark-theme .useddevice_panel_search input, .darkBlue-theme .useddevice_panel_search input {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 88%, white 5%), var(--input--background));
}
.lightBlue-theme .result_navbar_settings_item, .lightBlue-theme .useddevice_panel_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
@keyframes queue-pulse {
0%,
100% {
opacity: var(--opacity--50);
}
50% {
opacity: 1;
}
}
@keyframes queue-panel-in {
from {
opacity: 0;
transform: translateY(-6px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.darkBlue-theme .queue-panel {
background: linear-gradient(180deg, color-mix(in srgb, #2a2e46 100%, white 5%), #2a2e46);
}
.dark-theme .queue-panel::before, .darkBlue-theme .queue-panel::before {
background: color-mix(in srgb, var(--input--background) 88%, white 5%);
}
.lightBlue-theme .queue-panel {
background: linear-gradient(180deg, color-mix(in srgb, #ffffff 96%, white 6%), #ffffff) !important;
}
/* ===== admin-components/reports/report-result/report-result-navbar/report-result-navbar.component.css (scoped) ===== */
app-report-result-navbar {
.result_navbar_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.result_navbar_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.result_navbar_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)), var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.result_navbar_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.result_navbar_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
.queue-trigger {
position: relative;
}
.queue-trigger.is-open {
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)), var(--input--background)) !important;
}
.queue-trigger__icon {
animation: queue-pulse 2.4s ease-in-out infinite;
}
.orx-queue-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--secondary--color);
color: #fff !important;
font-size: 11px;
font-weight: 700;
line-height: 1;
opacity: 1 !important;
}
.queue-panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
z-index: 200;
min-width: 280px;
max-width: 360px;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 96%, white 6%), var(--input--background));
box-shadow: 0 18px 38px color-mix(in srgb, var(--secondary--color) 18%, transparent);
cursor: default;
transform-origin: top left;
animation: queue-panel-in 0.18s ease-out;
}
.queue-panel::before {
content: "";
position: absolute;
top: -6px;
left: 20px;
width: 11px;
height: 11px;
background: color-mix(in srgb, var(--input--background) 96%, white 6%);
border-left: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-top: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
transform: rotate(45deg);
}
.queue-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 2px 4px 8px 4px;
border-bottom: 1px solid color-mix(in srgb, var(--secondary--color) 16%, transparent);
}
.queue-panel__title {
font-size: 12px;
font-weight: 600;
color: var(--primary--body--color) !important;
opacity: 0.9;
}
.queue-panel__hint {
font-size: 11px;
font-weight: 700;
color: var(--secondary--color);
opacity: 1;
}
.queue-panel__list {
max-height: 240px;
overflow-y: auto;
padding-top: 6px;
}
.queue-panel__item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 4px;
border-radius: 6px;
transition: background 0.15s ease;
}
.queue-panel__item:hover {
background: color-mix(in srgb, var(--secondary--color) 8%, transparent);
}
.queue-panel__no {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--secondary--color) 40%, transparent);
color: var(--secondary--color);
font-size: 11px;
font-weight: 700;
opacity: 1;
}
.queue-panel__name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: var(--primary--body--color) !important;
}
.queue-panel__time {
flex: 0 0 auto;
font-size: 11px;
color: var(--primary--body--color) !important;
opacity: 0.55;
}
}
/* ===== admin-components/reports/report-result/report-result.component.css (global) ===== */
app-report-result .ag-row.row-cancelling {
animation: row-cancelling-pulse 1.1s ease-in-out infinite;
}
app-report-result .ag-row.row-cancelling .ag-cell {
font-style: italic;
}
@keyframes row-cancelling-pulse {
0%,
100% {
background-color: rgba(255, 152, 0, 0.10);
}
50% {
background-color: rgba(255, 152, 0, 0.35);
}
}
app-report-result .ag-row.row-active {
animation: row-active-pulse 1.8s ease-in-out infinite;
}
@keyframes row-active-pulse {
0%,
100% {
background-color: rgba(76, 175, 80, 0.08);
}
50% {
background-color: rgba(76, 175, 80, 0.24);
}
}
.dark-theme .rr-status-filter, .darkBlue-theme .rr-status-filter {
background: color-mix(in srgb, var(--primary--bg--color, #202938) 88%, #2196f3 12%);
box-shadow: none;
}
app-report-result .rr-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
color: var(--chip);
background: color-mix(in srgb, var(--chip) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--chip) 32%, transparent);
}
app-report-result .rr-chip .rr-chip__icon {
font-size: 16px !important;
width: 16px;
height: 16px;
line-height: 16px;
}
app-report-result .rr-progress {
position: relative;
width: 100%;
max-width: 150px;
height: 18px;
border-radius: 9px;
background: rgba(33, 150, 243, 0.14);
overflow: hidden;
display: flex;
align-items: center;
}
app-report-result .rr-progress__bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: 9px;
background-image: linear-gradient(90deg, #1976d2, #21c1f3), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0.28) 8px, transparent 8px, transparent 16px);
background-blend-mode: overlay;
transition: width 0.6s ease;
animation: rr-progress-stripes 1s linear infinite;
}
app-report-result .rr-progress__label {
position: relative;
z-index: 1;
width: 100%;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0d47a1;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.75);
}
.dark-theme .rr-progress__label, .darkBlue-theme .rr-progress__label {
color: #fff !important;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
app-report-result .rr-progress--cancel {
background: rgba(244, 67, 54, 0.16);
}
app-report-result .rr-progress--cancel .rr-progress__bar {
background-image: linear-gradient(90deg, #d32f2f, #f44336), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0.28) 8px, transparent 8px, transparent 16px);
}
app-report-result .rr-progress--cancel .rr-progress__label {
color: #b71c1c;
}
@keyframes rr-progress-stripes {
from {
background-position: 0 0, 0 0;
}
to {
background-position: 0 0, 32px 0;
}
}
/* ===== admin-components/reports/report-result/report-result.component.css (scoped) ===== */
app-report-result {
.rr-status-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
margin: 4px 0 14px;
padding: 10px 12px;
border: 1px solid var(--primary--border--color, rgba(0, 0, 0, 0.12));
border-radius: 8px;
background: color-mix(in srgb, var(--primary--bg--color, #fff) 92%, #2196f3 8%);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.rr-status-filter__label {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding-right: 4px;
color: var(--primary--body--color, #444);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.rr-status-filter__label-icon {
width: 18px;
height: 18px;
font-size: 18px;
line-height: 18px;
color: #2196f3;
}
.rr-status-filter__options {
display: flex;
align-items: center;
flex: 1 1 420px;
flex-wrap: wrap;
gap: 8px;
}
.rr-status-filter__chip {
--rr-status-color: #2196f3;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 86px;
height: 32px;
border: 1px solid color-mix(in srgb, var(--rr-status-color) 25%, var(--primary--border--color, rgba(0, 0, 0, 0.18)));
background: color-mix(in srgb, var(--rr-status-color) 8%, transparent);
color: var(--primary--body--color, #444);
padding: 0 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.rr-status-filter__dot {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--rr-status-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rr-status-color) 16%, transparent);
}
.rr-status-filter__text {
overflow: hidden;
text-overflow: ellipsis;
}
.rr-status-filter__chip:hover {
border-color: var(--rr-status-color);
color: var(--rr-status-color);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.rr-status-filter__chip.active {
background: var(--rr-status-color);
border-color: var(--rr-status-color);
color: #fff;
box-shadow: 0 5px 14px color-mix(in srgb, var(--rr-status-color) 25%, transparent);
}
.rr-status-filter__chip.active .rr-status-filter__dot {
background: #fff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
.rr-status-filter__chip:focus-visible {
outline: 2px solid color-mix(in srgb, var(--rr-status-color) 40%, #fff);
outline-offset: 2px;
}
@media (max-width: 768px) {
.rr-status-filter {
align-items: stretch;
padding: 10px;
}
.rr-status-filter__label {
width: 100%;
}
.rr-status-filter__options {
flex-basis: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.rr-status-filter__chip {
width: 100%;
}
}
}
/* ===== admin-components/reports/report-section-picker/report-section-picker.component.css (global) ===== */
.darkBlue-theme .rsp-state {
color: var(--primary--body--color);
}
/* ===== admin-components/reports/report-section-picker/report-section-picker.component.css (scoped) ===== */
app-report-section-picker {
.rsp-wrap {
margin: 10px 0 6px 0;
}
.rsp-title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
gap: 10px;
flex-wrap: wrap;
}
.rsp-title {
font-size: 12px;
font-weight: 600;
color: var(--primary--body--color);
opacity: .75;
letter-spacing: .4px;
text-transform: uppercase;
}
.rsp-preview-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 34px;
padding: 6px 14px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .2px;
color: var(--primary--body--color);
background: var(--report-action-surface);
border: 1px solid var(--report-action-border);
border-radius: 999px;
box-shadow: var(--report-action-shadow);
backdrop-filter: blur(6px);
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
margin-top: .5rem;
}
.rsp-title-row .rsp-preview-btn {
margin-top: 0;
}
.rsp-preview-btn:hover {
transform: translateY(-1px);
color: var(--report-action-solid-text);
background: var(--report-action-surface-strong);
box-shadow: var(--report-action-shadow), var(--report-action-glow);
}
.rsp-preview-btn:focus-visible {
outline: none;
box-shadow: var(--report-action-shadow), var(--report-action-glow);
}
.rsp-preview-btn i {
font-size: 11px;
}
.rsp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 7px;
}
.rsp-action-row {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
.rsp-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border: 1px dashed var(--cart--border);
border-radius: 8px;
background: transparent;
cursor: pointer;
user-select: none;
opacity: .55;
transition: opacity .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rsp-item:hover {
border-color: var(--secondary--color);
opacity: .85;
}
.rsp-item-on {
opacity: 1;
border: 1px solid var(--secondary--color);
background: color-mix(in srgb, var(--secondary--color) 14%, var(--input--background));
box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.rsp-ico {
font-size: 11px;
color: var(--secondary--color);
width: 14px;
text-align: center;
}
.rsp-label {
flex: 1;
font-size: 12px;
font-weight: 600;
color: var(--primary--body--color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rsp-state {
font-size: 15px;
color: var(--secondary--color);
}
.rsp-item:not(.rsp-item-on) .rsp-state {
color: var(--primary--body--color);
opacity: .45;
}
@media (max-width: 575.98px) {
.rsp-preview-btn {
width: 100%;
margin-top: 0;
}
.rsp-action-row {
justify-content: stretch;
}
}
}
/* ===== admin-components/reports/report-store/edit-report-store-modal/edit-report-store-modal.component.css (global) ===== */
.dark-theme .filter-button-house {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
width: 6%;
}
.darkBlue-theme .filter-button-house {
margin-top: .2rem !important;
}
.darkBlue-theme .filter-button-house {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
width: 6%;
margin-top: 0rem;
}
.lightBlue-theme .filter-button-house {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
width: 6%;
margin-top: .2rem;
}
@media (max-width:576px) {
.show-sidebar .input-group-append {
width: 15%;
}
.show-sidebar .input_width {
width: 70%;
}
}
@media (max-width:545px) {
.show-sidebar .modal-footer .col-6 {
width: 100%;
}
}
.dark-theme .modal-content, .darkBlue-theme .modal-content {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.dark-theme .modal-header, .darkBlue-theme .modal-header {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .new_input_edit_report_store, .dark-theme .input_delete_area, .dark-theme .choose_select_report_store, .darkBlue-theme .new_input_edit_report_store, .darkBlue-theme .input_delete_area, .darkBlue-theme .choose_select_report_store {
border: none !important;
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.lightBlue-theme .modal-content {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .modal-header {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .new_input_edit_report_store, .lightBlue-theme .input_delete_area, .lightBlue-theme .choose_select_report_store {
border: none !important;
background-color: #ffffff !important;
}
.default-theme .new_input_edit_report_store, .default-theme .input_delete_area, .default-theme .choose_select_report_store {
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
}
.dark-theme .drse-modal-content-edit-report-store, .darkBlue-theme .drse-modal-content-edit-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.dark-theme .drse-widget-header-edit-report-store, .darkBlue-theme .drse-widget-header-edit-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 82%, white 5%), var(--body--background));
}
.dark-theme .drse-form-section-edit-report-store {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 92%, white 2%), color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .drse-form-section-edit-report-store {
border: none;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%), color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .drse-form-section-edit-report-store__head, .darkBlue-theme .drse-form-section-edit-report-store__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .drse-input-edit-report-store, .darkBlue-theme .drse-input-edit-report-store, .dark-theme .drse-select-edit-report-store, .darkBlue-theme .drse-select-edit-report-store, .dark-theme .drse-filter-delete-edit-report-store, .darkBlue-theme .drse-filter-delete-edit-report-store, .dark-theme .drse-case-edit-report-store, .darkBlue-theme .drse-case-edit-report-store {
border: none !important;
}
.dark-theme .drse-filter-delete-edit-report-store, .darkBlue-theme .drse-filter-delete-edit-report-store, .dark-theme .drse-case-edit-report-store, .darkBlue-theme .drse-case-edit-report-store {
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme .drse-dropdown-menu-edit-report-store, .darkBlue-theme .drse-dropdown-menu-edit-report-store {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.lightBlue-theme .drse-modal-content-edit-report-store {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: var(--cart--box--shadow);
}
.lightBlue-theme .drse-widget-header-edit-report-store {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .drse-form-section-edit-report-store {
border: none;
background: radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%), color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .drse-input-edit-report-store, .lightBlue-theme .drse-select-edit-report-store, .lightBlue-theme .drse-filter-delete-edit-report-store, .lightBlue-theme .drse-case-edit-report-store {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .drse-dropdown-menu-edit-report-store {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
/* ===== admin-components/reports/report-store/edit-report-store-modal/edit-report-store-modal.component.css (scoped) ===== */
app-edit-report-store-modal {
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.modal-content {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background));
box-shadow: var(--cart--box--shadow);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
overflow: hidden;
}
.new_input_edit_report_store, .input_delete_area {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
height: 36px;
background-position: right calc(0.375em + 0.1875rem) center !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.new_input_edit_report_store::placeholder, .input_delete_area::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.new_input_edit_report_store:focus, .input_delete_area:focus, .choose_select_report_store:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.input_delete_area.is-valid, .choose_select_report_store.is-valid, .new_input_edit_report_store.is-valid {
border-color: color-mix(in srgb, var(--primary--body--color) 18%, transparent);
background-image: none;
}
.input_delete_area.is-invalid, .choose_select_report_store.is-invalid, .new_input_edit_report_store.is-invalid {
border-color: #dc3545 !important;
}
.choose_select_report_store {
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
font-size: 13px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.new_flag {
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-top: 1.7rem;
margin-bottom: 0rem !important;
cursor: pointer;
}
.new_input::placeholder {
color: var(--primary--color);
opacity: var(--opacity--80);
font-size: 13px;
}
.filter-clear-button-ware {
top: 50%;
position: absolute;
right: 5px;
color: var(--primary--body--color) !important;
z-index: 999;
border: none;
outline: none;
box-shadow: none;
font-size: 14px;
background-color: transparent;
width: 22px;
height: 22px;
border-radius: 50%;
transform: translateY(-50%);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.filter-clear-button-ware:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.filter-clear-button-ware:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-ware:focus {
border: none;
outline: none;
box-shadow: none;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.filter-button-house {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
width: 6%;
margin-top: .3rem;
}
.filter-button-house:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button-house:focus {
border: none;
outline: none;
box-shadow: none;
}
.modal-header {
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
box-shadow: none;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
padding: 16px 18px !important;
}
.modal-footer {
padding: 0px;
display: block;
border-top: none;
background: transparent;
}
.oriana-button {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
width: 100%;
margin-bottom: .5rem;
margin-top: .5rem;
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.oriana-button:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 5px 20px;
font-size: 13px;
}
.dropdown-menu-use-template {
background: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 8px;
box-shadow: var(--cart--box--shadow);
transition: .5s all;
}
.dropdown-menu-use-template a {
color: var(--primary--body--color);
}
.dropdown-menu-use-template a:hover {
background-color: var(--secondary--color);
color: var(--day--remain--color);
}
.oriana-dropdown[aria-expanded=true]::after {
transform: rotate(180deg);
}
.filter-div {
float: left;
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
width: 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.drse-modal-content-edit-report-store {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 94%, white 6%), var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow);
overflow: visible !important;
}
.drse-form-edit-report-store {
min-height: 100%;
}
.drse-widget-shell-edit-report-store {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: visible;
}
.drse-widget-header-edit-report-store {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 14px !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
}
.drse-widget-title-edit-report-store {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.drse-header-icon-edit-report-store {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.drse-title-text-edit-report-store {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.drse-widget-close-edit-report-store {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.drse-widget-close-edit-report-store:hover {
transform: translateY(-1px);
opacity: 1;
}
.drse-widget-close-edit-report-store:focus, .drse-widget-close-edit-report-store:active {
outline: none !important;
box-shadow: none !important;
}
.drse-modal-body-edit-report-store {
flex: 1;
overflow: visible;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 0;
}
.drse-form-section-edit-report-store {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
overflow: visible;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%), color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.drse-form-section-edit-report-store__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.drse-form-section-edit-report-store__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.drse-form-section-edit-report-store__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.drse-field-edit-report-store {
margin-bottom: 12px;
}
.drse-field-last-edit-report-store {
margin-bottom: 0 !important;
}
.drse-label-edit-report-store {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.drse-input-edit-report-store, .drse-select-edit-report-store {
width: 100%;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.drse-input-edit-report-store::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.drse-input-edit-report-store:focus, .drse-select-edit-report-store:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.drse-input-edit-report-store.is-valid, .drse-select-edit-report-store.is-valid {
border-color: color-mix(in srgb, var(--primary--body--color) 18%, transparent);
background-image: none;
}
.drse-input-edit-report-store.is-invalid, .drse-select-edit-report-store.is-invalid {
border-color: #dc3545 !important;
}
.drse-filter-row-edit-report-store {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(120px, 0.7fr) minmax(82px, 0.45fr) minmax(82px, 0.45fr) 38px;
gap: 8px;
align-items: center;
}
.drse-filter-row-edit-report-store--last {
grid-template-columns: minmax(0, 1.25fr) minmax(120px, 0.7fr) minmax(82px, 0.45fr) 38px;
}
.drse-filter-input-wrap-edit-report-store {
position: relative;
min-width: 0;
}
.drse-filter-input-edit-report-store {
padding-right: 34px;
}
.drse-filter-clear-edit-report-store {
position: absolute;
top: 54%;
right: 4px;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.55;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 11px;
line-height: 1;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.drse-filter-clear-edit-report-store:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.drse-case-edit-report-store {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
}
.drse-case-label-edit-report-store {
margin: 0;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.drse-case-switch-edit-report-store {
margin: 0;
transform: translateY(4px);
height: 22px !important;
}
.drse-filter-delete-edit-report-store {
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
color: var(--primary--body--color);
opacity: 0.78;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.drse-filter-delete-edit-report-store:hover {
transform: translateY(-1px);
opacity: 1;
color: #dc3545;
}
.drse-filter-clear-edit-report-store:focus, .drse-filter-clear-edit-report-store:active, .drse-filter-delete-edit-report-store:focus, .drse-filter-delete-edit-report-store:active, .drse-add-filter-edit-report-store:focus, .drse-add-filter-edit-report-store:active {
outline: none;
box-shadow: none;
}
.drse-add-filter-edit-report-store {
width: 100%;
min-height: 36px;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.drse-add-filter-edit-report-store:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 70%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.drse-modal-footer-edit-report-store {
z-index: 10;
padding: 12px 0 16px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--body--background) 96%, transparent) 28%, var(--body--background));
}
.drse-action-btn-edit-report-store {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
border-radius: 8px !important;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.drse-action-btn-edit-report-store:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.drse-action-btn-edit-report-store--secondary {
background-color: color-mix(in srgb, var(--input--background) 80%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
}
.drse-dropdown-menu-edit-report-store {
width: 100%;
min-width: 220px;
padding: 6px;
z-index: 1065;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
}
.drse-dropdown-menu-edit-report-store .dropdown-item {
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
padding: 7px 10px;
}
.drse-dropdown-menu-edit-report-store .dropdown-item:hover {
background-color: var(--secondary--color);
color: #fff;
}
}
/* ===== admin-components/reports/report-store/navbar/navbar.component.css (global) ===== */
.dark-theme .store_navbar_settings_item, .darkBlue-theme .store_navbar_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .useddevice_panel_search input, .darkBlue-theme .useddevice_panel_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .store_navbar_settings_item, .lightBlue-theme .useddevice_panel_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
/* ===== admin-components/reports/report-store/navbar/navbar.component.css (scoped) ===== */
app-navbar {
.result_store_navbar_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.store_navbar_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.store_navbar_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.store_navbar_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.store_navbar_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
.store_navbar_import_item {
padding: 0;
overflow: hidden;
}
.report-store-import-label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
height: 100%;
margin: 0;
padding: 0 12px;
border: 0 !important;
color: var(--primary--body--color);
cursor: pointer;
font-size: 12px;
opacity: 1;
line-height: 1;
white-space: nowrap;
}
.report-store-import-label input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.report-store-import-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.report-store-import-icon i {
font-size: 12.5px;
}
.report-store-import-text {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
.report-store-import-label:hover .report-store-import-icon {
opacity: var(--opacity--100);
}
}
/* ===== admin-components/reports/report-template-gallery/report-template-gallery.component.css (global) ===== */
@keyframes rtgCardsIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== admin-components/reports/report-template-gallery/report-template-gallery.component.css (scoped) ===== */
app-report-template-gallery {
.rtg-wrap {
margin: 6px 0 10px 0;
}
.rtg-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: var(--input--background);
border: 1px solid var(--cart--border);
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: border-color .2s ease, box-shadow .2s ease;
}
.rtg-toggle:hover {
border-color: var(--rtg-accent, #a62a2b);
box-shadow: 0 3px 8px rgba(0, 0, 0, .07);
}
.rtg-toggle-open {
border-color: var(--rtg-accent, #a62a2b);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.rtg-toggle-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--rtg-accent, #a62a2b);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex: 0 0 auto;
transition: background .2s ease;
}
.rtg-toggle-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.rtg-toggle-title {
font-size: 12.5px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
color: var(--primary--body--color);
}
.rtg-toggle-sub {
font-size: 11px;
font-weight: 600;
color: var(--rtg-accent, #a62a2b);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rtg-toggle-sub i {
font-size: 10px;
margin-right: 3px;
}
.rtg-mini-swatches {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.rtg-mini-swatch {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--input--background);
margin-left: -5px;
transition: transform .2s ease;
}
.rtg-mini-swatch:first-child {
margin-left: 0;
}
.rtg-toggle:hover .rtg-mini-swatch {
transform: translateY(-1px);
}
.rtg-mini-swatch-active {
transform: scale(1.25);
z-index: 1;
}
.rtg-chevron {
font-size: 12px;
color: var(--primary--body--color);
opacity: .6;
transition: transform .3s ease;
flex: 0 0 auto;
}
.rtg-toggle-open .rtg-chevron {
transform: rotate(180deg);
}
.rtg-collapse {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}
.rtg-collapse-open {
grid-template-rows: 1fr;
}
.rtg-collapse-inner {
overflow: hidden;
min-height: 0;
}
.rtg-collapse-settled .rtg-collapse-inner {
overflow: visible;
}
.rtg-collapse-open .rtg-grid {
animation: rtgCardsIn .38s cubic-bezier(.4, 0, .2, 1);
}
.rtg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
padding: 12px 10px 10px 10px;
border: 1px solid var(--cart--border);
border-top: none;
border-radius: 0 0 8px 8px;
background: var(--body--background);
}
.rtg-card {
position: relative;
display: flex;
background: var(--input--background);
border: 1px solid var(--cart--border);
border-radius: 8px;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rtg-card:hover {
border-color: var(--rtg-accent);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
z-index: 30;
}
.rtg-card-selected {
border-color: var(--rtg-accent);
box-shadow: 0 0 0 2px var(--rtg-accent) inset;
}
.rtg-accent-bar {
flex: 0 0 5px;
background: var(--rtg-accent);
border-radius: 7px 0 0 7px;
}
.rtg-card-body {
padding: 10px 12px;
min-width: 0;
}
.rtg-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.rtg-card-name {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
}
.rtg-check {
color: var(--rtg-accent);
font-size: 15px;
opacity: 0;
transition: opacity .15s ease;
}
.rtg-card-selected .rtg-check {
opacity: 1;
}
.rtg-audience {
margin-top: 4px;
font-size: 11px;
font-weight: 600;
color: var(--rtg-accent);
}
.rtg-audience i {
font-size: 10px;
margin-right: 3px;
}
.rtg-desc {
margin-top: 5px;
font-size: 11.5px;
line-height: 1.45;
color: var(--primary--body--color);
opacity: .8;
}
.rtg-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 8px;
}
.rtg-chip {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
border: 1px solid var(--cart--border);
color: var(--primary--body--color);
opacity: .85;
}
.rtg-preview {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
width: 216px;
padding: 8px;
background: var(--input--background);
border: 1px solid var(--cart--border);
border-radius: 10px;
box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 40;
}
.rtg-card:hover .rtg-preview {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.rtg-preview {
--pv-page: #ffffff;
--pv-ink: #dbe0e6;
--pv-soft: #eef1f4;
--pv-line: #e3e6ea;
--pv-radius: 6px;
}
.rtg-preview.pv-dark {
--pv-page: #21262a;
--pv-ink: #3d4449;
--pv-soft: #2a3338;
--pv-line: #3d4449;
}
.rtg-preview.pv-style2 {
--pv-radius: 1px;
}
.rtg-preview.pv-style3 {
--pv-radius: 0px;
}
.rtg-preview.pv-style4 {
--pv-radius: 10px;
}
.pv-page {
background: var(--pv-page);
border: 1px solid var(--pv-line);
border-radius: 4px;
padding: 9px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pv-cover {
background: #1a1e23;
border-radius: var(--pv-radius);
padding: 8px 9px;
display: flex;
flex-direction: column;
gap: 4px;
}
.pv-kicker {
width: 34px;
height: 6px;
border-radius: 2px;
background: var(--pv-accent);
}
.pv-line {
height: 5px;
border-radius: 2px;
background: rgba(255, 255, 255, .82);
}
.pv-line-lg {
width: 78%;
}
.pv-line-sm {
width: 46%;
background: rgba(255, 255, 255, .38);
}
.pv-kpis {
display: flex;
gap: 6px;
}
.pv-kpi {
flex: 1;
height: 22px;
background: var(--pv-soft);
border-radius: var(--pv-radius);
border-left: 3px solid var(--pv-accent);
}
.pv-style2 .pv-kpi {
border-left: none;
border-top: 3px solid var(--pv-accent);
}
.pv-style4 .pv-kpi {
border-left: none;
background: color-mix(in srgb, var(--pv-accent) 14%, var(--pv-page));
}
.pv-charts {
display: flex;
align-items: flex-end;
gap: 10px;
padding: 2px 2px 0 2px;
}
.pv-bars {
flex: 1;
height: 44px;
display: flex;
align-items: flex-end;
gap: 4px;
border-bottom: 1px solid var(--pv-line);
padding-bottom: 1px;
}
.pv-bars span {
flex: 1;
border-radius: 2px 2px 0 0;
background: var(--pv-accent);
}
.pv-bars span:nth-child(2) { background: #3a7ca5; }
.pv-bars span:nth-child(3) { background: #e0a63c; }
.pv-bars span:nth-child(4) { background: #3f8f5f; }
.pv-bars span:nth-child(5) { background: #7d5ba6; }
.pv-bars span:nth-child(6) { background: #c97b4e; }
.pv-donut {
width: 34px;
height: 34px;
border-radius: 50%;
background: conic-gradient(var(--pv-accent) 0 40%, #3a7ca5 40% 65%, #e0a63c 65% 85%, #3f8f5f 85% 100%);
-webkit-mask: radial-gradient(circle at center, transparent 8px, #000 8.5px);
mask: radial-gradient(circle at center, transparent 8px, #000 8.5px);
}
.pv-table {
display: flex;
flex-direction: column;
gap: 3px;
}
.pv-th {
height: 7px;
border-radius: var(--pv-radius);
background: var(--pv-soft);
border-bottom: 2px solid var(--pv-accent);
}
.pv-style2 .pv-th {
background: var(--pv-accent);
border-bottom: none;
}
.pv-tr {
height: 5px;
border-radius: var(--pv-radius);
background: var(--pv-ink);
opacity: .55;
}
}
/* ===== admin-components/suggestion-and-complaint/suggestion-and-complaint.component.css (global) ===== */
.darkBlue-theme .radio input+span:after {
background: black !important;
}
.dark-theme .radio input+span:after {
background: black !important;
}
/* ===== admin-components/suggestion-and-complaint/suggestion-and-complaint.component.css (scoped) ===== */
app-suggestion-and-complaint {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input_add_request {
color: var(--primary--body--color);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.new_input_add_request::placeholder {
color: var(--primary--body--color);
}
.description_area_add_request {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
}
.description_area_add_request::placeholder {
color: var(--primary--body--color);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-button-add-request {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 7px 30px;
font-size: 13px;
}
.oriana-button-add-request:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 7px 30px;
font-size: 13px;
}
.radio {
display: block;
cursor: pointer;
user-select: none;
text-align: left;
}
.radio input {
display: none;
}
.radio input+span {
display: inline-block;
position: relative;
padding-left: 20px;
font-size: 13px;
color: var(--primary--body--color);
}
.radio input+span:before {
content: '';
display: block;
position: absolute;
top: 0px;
left: 0px;
border-radius: 50%;
margin-right: 5px;
width: 16px;
height: 16px;
border: 1px solid #ccc;
background: #fff;
transform: translateY(3px);
}
.radio input+span:after {
content: '';
display: block;
width: 10px;
height: 10px;
background: var(--primary--body--color);
position: absolute;
border-radius: 50%;
top: 1px;
left: 3px;
opacity: 0;
transform: scale(0, 0);
transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
.radio input:checked+span:after {
opacity: 1;
transform: translateY(5px);
}
.suggestion-span::after {
left: 3.5px !important;
}
}
/* ===== admin-components/system-log/system-log-navbar/system-log-navbar.component.css (global) ===== */
.dark-theme .system_log_settings_item, .darkBlue-theme .system_log_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .useddevice_panel_search input, .darkBlue-theme .useddevice_panel_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .system_log_settings_item, .lightBlue-theme .useddevice_panel_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
/* ===== admin-components/system-log/system-log-navbar/system-log-navbar.component.css (scoped) ===== */
app-system-log-navbar {
.system_log_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.system_log_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.system_log_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.system_log_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.system_log_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
}
/* ===== admin-components/transaction-log/transaction-log-navbar/transaction-log-navbar.component.css (global) ===== */
.dark-theme .transaction_log_settings_item, .darkBlue-theme .transaction_log_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .useddevice_panel_search input, .darkBlue-theme .useddevice_panel_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .transaction_log_settings_item, .lightBlue-theme .useddevice_panel_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
.dark-theme #filterTransactionLogsModal .modal-content, .darkBlue-theme #filterTransactionLogsModal .modal-content {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0
color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px
color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme #filterTransactionLogsModal .modal-header, .darkBlue-theme #filterTransactionLogsModal .modal-header {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme #filterTransactionLogsModal .modal-body .row > [class*="col-"] {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme #filterTransactionLogsModal .modal-body .row > [class*="col-"] {
border: none !important;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme #filterTransactionLogsModal .transaction-log-input, .darkBlue-theme #filterTransactionLogsModal .transaction-log-input, .dark-theme #filterTransactionLogsModal .confirm_button, .darkBlue-theme #filterTransactionLogsModal .confirm_button, .dark-theme #filterTransactionLogsModal .cancel_button, .darkBlue-theme #filterTransactionLogsModal .cancel_button {
border: none !important;
}
.dark-theme #filterTransactionLogsModal input[type="date"], .darkBlue-theme #filterTransactionLogsModal input[type="date"] {
color-scheme: dark;
}
.dark-theme #filterTransactionLogsModal input[type="date"]::-webkit-calendar-picker-indicator, .darkBlue-theme #filterTransactionLogsModal input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1) brightness(1.15) !important;
opacity: 0.85;
}
.lightBlue-theme #filterTransactionLogsModal .modal-content {
border-radius: var(--tl-filter-radius) !important;
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme #filterTransactionLogsModal .modal-header {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme #filterTransactionLogsModal .modal-body .row > [class*="col-"] {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme #filterTransactionLogsModal .transaction-log-input, .lightBlue-theme #filterTransactionLogsModal .confirm_button, .lightBlue-theme #filterTransactionLogsModal .cancel_button {
border: none !important;
background-color: #ffffff;
}
/* ===== admin-components/transaction-log/transaction-log-navbar/transaction-log-navbar.component.css (scoped) ===== */
app-transaction-log-navbar {
.transaction_log_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.filter-button {
background-color: transparent;
border: none;
box-shadow: none;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
}
.transaction_log_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.transaction_log_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.transaction_log_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.transaction_log_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
#filterTransactionLogsModal {
--tl-filter-radius: 12px;
--tl-filter-card: color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
--tl-filter-border-soft: color-mix(in srgb, var(--primary--body--color) 16%, transparent);
--tl-filter-border-subtle: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
#filterTransactionLogsModal .modal-dialog {
max-width: min(560px, 96vw);
}
#filterTransactionLogsModal .modal-content {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: var(--tl-filter-radius) !important;
box-shadow: var(--cart--box--shadow), 0 18px 42px rgba(0, 0, 0, 0.15);
color: var(--primary--body--color);
overflow: hidden;
}
#filterTransactionLogsModal .modal-header {
padding: 16px 18px !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
}
#filterTransactionLogsModal .modal-header h6 {
margin: 0 !important;
color: var(--primary--body--color);
opacity: 0.9;
font-size: 16px;
font-weight: 700;
}
#filterTransactionLogsModal .close_btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
cursor: pointer;
transition: transform 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}
#filterTransactionLogsModal .modal-body {
max-height: calc(100vh - 220px);
overflow-y: auto;
padding: 16px;
background-color: var(--body--background);
}
#filterTransactionLogsModal .modal-body::-webkit-scrollbar {
width: 4px;
}
#filterTransactionLogsModal .modal-body::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
#filterTransactionLogsModal .modal-body .row {
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
#filterTransactionLogsModal .modal-body .row > [class*="col-"] {
width: 100%;
padding: 14px;
margin: 0 !important;
border: 1px solid var(--tl-filter-border-soft);
border-radius: 12px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
var(--tl-filter-card);
}
#filterTransactionLogsModal .label-header, #filterTransactionLogsModal .dist-search-text {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
font-weight: 650;
margin-bottom: 6px !important;
}
#filterTransactionLogsModal .transaction-log-input {
height: 36px;
padding: 6px 10px;
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#filterTransactionLogsModal .transaction-log-input::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
#filterTransactionLogsModal .transaction-log-input:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
#filterTransactionLogsModal .modal-footer {
padding: 12px 18px;
display: flex;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 80%, transparent),
var(--body--background));
border-top: 1px solid var(--tl-filter-border-subtle);
}
#filterTransactionLogsModal .confirm_button, #filterTransactionLogsModal .cancel_button {
height: 36px;
padding: 0 16px !important;
border-radius: 8px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--primary--sidebar--color);
opacity: var(--opacity--80);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
background-color: var(--input--background);
box-shadow: var(--cart--box--shadow);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
#filterTransactionLogsModal .confirm_button:hover, #filterTransactionLogsModal .cancel_button:hover {
opacity: 1;
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
#filterTransactionLogsModal input[type="date"] {
color-scheme: light;
}
@media (max-width: 600px) {
#filterTransactionLogsModal .modal-footer {
flex-wrap: wrap;
}
#filterTransactionLogsModal .confirm_button, #filterTransactionLogsModal .cancel_button {
flex: 1 1 100%;
}
}
}
/* ===== admin-components/transaction-log/transaction-log.component.css (global) ===== */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.dark-theme .filter-descriptions, .darkBlue-theme .filter-descriptions, .dark-theme .clear-all-button, .darkBlue-theme .clear-all-button {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .hover-box, .darkBlue-theme .hover-box {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .filter-chip-row {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .filter-chip-row {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent);
}
.lightBlue-theme .filter-descriptions, .lightBlue-theme .clear-all-button {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
background: linear-gradient(180deg, #ffffff, #f0f6f8);
}
.lightBlue-theme .hover-box {
border: none;
background: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .filter-chip-row {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
/* ===== admin-components/transaction-log/transaction-log.component.css (scoped) ===== */
app-transaction-log {
.spinner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #605e5e;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
opacity: 0.2;
}
.spinner {
border: 8px solid #f3f3f3;
border-top: 8px solid black;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
.filters {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
max-height: 260px;
overflow-y: auto;
}
.filters::-webkit-scrollbar {
width: 4px;
}
.filters::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.filters-content {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: var(--primary--body--color);
margin-bottom: 12px;
}
.filter-descriptions, .clear-all-button {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
cursor: pointer;
white-space: nowrap;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.filter-descriptions:hover, .clear-all-button:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.filter-descriptions i, .clear-all-button i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.filter-descriptions small, .clear-all-button {
color: var(--primary--body--color) !important;
opacity: var(--opacity--100);
font-size: 13px;
font-weight: 650;
}
.filter-description-chevron {
font-size: 10px !important;
margin-left: 2px;
}
.filter-clear-wrap {
display: inline-flex;
align-items: center;
}
.clear-all-button {
border-color: rgba(248, 81, 73, 0.28);
}
.clear-all-button i {
color: #f85149;
opacity: 1;
}
.hover-box {
position: absolute;
border-radius: 12px;
top: calc(100% + 8px);
min-width: 340px;
max-width: min(520px, 90vw);
left: 0;
background: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
color: var(--primary--body--color) !important;
line-height: 20px;
opacity: 0;
z-index: 999;
visibility: hidden;
overflow: hidden;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
transform: translateY(-4px);
}
.filter-box-title {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 700;
opacity: 0.88;
background: color-mix(in srgb, var(--input--background) 76%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.filter-box-title i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.filter-chip-row {
min-height: 34px;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) 28px;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 8px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
}
.filter-chip-index {
width: 24px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 11px;
font-weight: 700;
}
.filter-chip-text {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
color: var(--primary--body--color);
font-size: 12px;
overflow: hidden;
}
.filter-chip-text strong {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 700;
flex-shrink: 0;
}
.filter-chip-text span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: var(--opacity--80);
}
.filter-chip-remove {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: color-mix(in srgb, var(--secondary--color) 10%, transparent);
color: var(--primary--body--color);
opacity: var(--opacity--80);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.filter-chip-remove:hover {
background: rgba(248, 81, 73, 0.14);
color: #f85149;
opacity: 1;
}
.filter-container:focus-within .hover-box {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.filter-container {
position: relative;
cursor: pointer;
outline: none;
}
@media (max-width: 720px) {
.hover-box {
top: 100%;
left: 0;
}
}
@media (max-width: 420px) {
.hover-box {
top: 100%;
left: 0%;
min-width: 300px;
}
}
}
/* ===== admin-components/used-device/components/device-detail/device-detail.component.css (global) ===== */
.dark-theme .detail-hero, .dark-theme .device-overview-card, .dark-theme .metric-card, .dark-theme .date-card, .dark-theme .chart-panel {
background:
radial-gradient(circle at top right, rgba(189, 190, 190, 0.06), transparent 36%),
linear-gradient(180deg, #242828 0%, #202424 100%);
border: 1px solid rgba(189, 190, 190, 0.16);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 10px;
}
.darkBlue-theme .detail-hero, .darkBlue-theme .device-overview-card, .darkBlue-theme .metric-card, .darkBlue-theme .date-card, .darkBlue-theme .chart-panel {
background:
radial-gradient(circle at top right, rgba(61, 64, 115, 0.16), transparent 36%),
linear-gradient(180deg, #081824 0%, #06151a 100%);
border: none;
border-radius: 10px;
}
.lightBlue-theme .detail-hero, .lightBlue-theme .device-overview-card, .lightBlue-theme .metric-card, .lightBlue-theme .date-card, .lightBlue-theme .chart-panel {
background:
radial-gradient(circle at top right, rgba(140, 169, 180, 0.12), transparent 36%),
linear-gradient(180deg, #ffffff 0%, #f1f7fa 100%);
border: none;
border-radius: 8px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);
}
.darkBlue-theme .tooltip_td, .darkBlue-theme .tooltip_th, .dark-theme .tooltip_td, .dark-theme .tooltip_th {
border-color: rgba(153, 153, 153, 0.35);
}
.lightBlue-theme .tooltip_td, .lightBlue-theme .tooltip_th {
border-color: #cad5d7;
}
@media (max-width: 900px) {
.show-sidebar .detail-workspace {
min-height: auto;
}
.show-sidebar .overview-list, .show-sidebar .date-stack {
grid-template-columns: 1fr;
}
}
/* ===== admin-components/used-device/components/device-detail/device-detail.component.css (scoped) ===== */
app-device-detail {
.device-detail-page {
width: 100%;
min-height: calc(100vh - 92px);
padding: 14px 20px 22px;
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
.detail-hero, .device-overview-card, .metric-card, .date-card, .chart-panel {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 36%),
linear-gradient(180deg, var(--body--background) 0%, color-mix(in srgb, var(--body--background) 94%, var(--secondary--color) 6%) 100%);
}
.detail-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 86px;
margin-bottom: 14px;
padding: 16px 18px;
overflow: hidden;
position: relative;
}
.detail-hero::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--secondary--color);
opacity: 0.85;
}
.hero-device {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.device-logo {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--input--background) 88%, var(--body--background) 12%);
}
.device-logo img {
width: 35px;
height: 35px;
object-fit: contain;
}
.device-heading {
min-width: 0;
}
.device-kicker {
display: block;
margin-bottom: 4px;
color: color-mix(in srgb, var(--primary--body--color) 62%, transparent);
font-size: 12px;
line-height: 1.3;
}
.device-heading h1 {
margin: 0;
color: var(--primary--body--color);
font-size: 22px;
font-weight: 650;
line-height: 1.2;
overflow-wrap: anywhere;
}
.hero-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
padding: 0 14px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 7px;
background: color-mix(in srgb, var(--secondary--color) 10%, var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.hero-action:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 62%, transparent);
box-shadow: 0 6px 16px color-mix(in srgb, var(--secondary--color) 16%, transparent);
color: var(--secondary--color);
}
.detail-workspace {
display: grid;
grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
gap: 14px;
min-height: calc(100vh - 214px);
}
.device-overview-card {
min-width: 0;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
min-height: 100%;
overflow: visible;
}
.section-title {
display: flex;
align-items: center;
gap: 9px;
min-height: 28px;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 650;
}
.section-title i {
color: var(--secondary--color);
}
.overview-list {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 16px;
}
.overview-item {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 70px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 18%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--input--background) 70%, transparent);
}
.overview-icon, .metric-icon {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 8px;
background: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--secondary--color);
}
.overview-copy {
min-width: 0;
}
.overview-label, .metric-label, .date-label {
display: block;
color: color-mix(in srgb, var(--primary--body--color) 60%, transparent);
font-size: 11px;
line-height: 1.35;
}
.overview-value {
display: block;
margin-top: 3px;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 650;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.date-stack {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.date-card {
min-height: 82px;
padding: 13px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
background: color-mix(in srgb, var(--input--background) 68%, transparent);
}
.date-card strong {
color: var(--primary--body--color);
font-size: 14px;
font-weight: 650;
line-height: 1.35;
overflow-wrap: anywhere;
}
.analytics-column {
min-width: 0;
display: grid;
grid-template-rows: auto auto;
gap: 14px;
}
.metric-grid {
display: grid;
grid-template-columns: 1.25fr repeat(3, minmax(145px, 1fr));
gap: 14px;
}
.metric-card {
min-width: 0;
min-height: 138px;
padding: 15px;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
column-gap: 12px;
align-items: start;
overflow: hidden;
position: relative;
}
.metric-card::after {
content: "";
position: absolute;
left: 15px;
right: 15px;
bottom: 12px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--secondary--color), transparent);
opacity: 0.32;
}
.metric-card-primary {
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 18%, transparent), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, var(--body--background) 88%, var(--secondary--color) 12%) 0%, var(--body--background) 100%);
}
.metric-icon {
grid-row: span 2;
}
.metric-label {
min-height: 30px;
}
.metric-card strong {
grid-column: 2;
align-self: end;
display: block;
margin-top: 10px;
color: var(--primary--body--color);
font-size: clamp(22px, 2.2vw, 34px);
font-weight: 750;
line-height: 1.08;
overflow-wrap: anywhere;
}
.metric-unit {
grid-column: 2;
color: color-mix(in srgb, var(--primary--body--color) 55%, transparent);
font-size: 11px;
font-weight: 650;
}
.chart-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: 14px;
align-items: stretch;
}
.chart-panel {
min-width: 0;
min-height: 330px;
height: 100%;
padding: 15px 16px 12px;
display: flex;
flex-direction: column;
}
.chart-body {
width: 100%;
height: 272px;
min-height: 272px;
flex: 0 0 auto;
margin-top: 10px;
}
.tooltip-ip {
position: relative;
display: inline-block;
cursor: pointer;
max-width: 100%;
}
.tooltip-ip .tooltiptext-ip {
visibility: hidden;
position: absolute;
z-index: 20;
top: calc(100% + 10px);
left: 0;
width: max-content;
max-width: 300px;
padding: 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 28%, transparent);
border-radius: 8px;
background: var(--body--background);
box-shadow: 0 10px 28px color-mix(in srgb, #000 18%, transparent);
color: var(--primary--body--color);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}
.tooltip-ip:hover .tooltiptext-ip {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.table-bordered-device-detail {
width: 260px;
margin: 0;
}
.table-bordered-device-detail > :not(caption) > * {
border-width: 0;
}
.tooltip_th, .tooltip_td {
padding: 6px 8px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
background-color: var(--body--background);
color: var(--primary--body--color);
font-size: 12px;
line-height: 1.3;
}
@media (max-width: 1320px) {
.detail-workspace {
grid-template-columns: 1fr;
}
.device-overview-card {
min-height: auto;
}
.overview-list, .date-stack {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1150px) {
.detail-hero {
gap: 14px;
}
.detail-workspace {
min-height: auto;
}
.metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chart-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.chart-panel {
height: auto;
}
.chart-body {
height: 300px;
min-height: 300px;
}
}
@media (max-width: 900px) {
.device-detail-page {
padding: 14px 16px 24px;
}
.detail-workspace {
min-height: auto;
}
}
@media (max-width: 640px) {
.detail-hero {
align-items: flex-start;
flex-direction: column;
}
.hero-action {
width: 100%;
}
.overview-list, .date-stack, .metric-grid {
grid-template-columns: 1fr;
}
.chart-body {
height: 260px;
min-height: 260px;
}
.metric-card {
min-height: 118px;
}
.tooltip-ip:hover .tooltiptext-ip {
visibility: hidden;
opacity: 0;
}
}
}
/* ===== admin-components/used-device/components/device-group/modals/add-device-gorup-modal/add-device-gorup-modal.component.css (global) ===== */
.dark-theme .nsd-modal-content-add-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)
);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .nsd-header-add-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background)
);
}
.dark-theme .nsd-form-section-add-dg {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.dark-theme .nsd-form-section-add-dg__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .nd-input-add-device-group {
border: none !important;
}
.darkBlue-theme .nsd-modal-content-add-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)
);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.darkBlue-theme .nsd-header-add-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background)
);
}
.darkBlue-theme .nsd-form-section-add-dg {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.darkBlue-theme .nsd-form-section-add-dg__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.darkBlue-theme .nd-input-add-device-group {
border: none !important;
}
.lightBlue-theme .nsd-modal-content-add-device-group {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nsd-header-add-device-group {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nsd-form-section-add-dg {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-input-add-device-group {
border-color: rgba(117, 145, 155, 0.24) !important;
background-color: #ffffff !important;
}
/* ===== admin-components/used-device/components/device-group/modals/add-device-gorup-modal/add-device-gorup-modal.component.css (scoped) ===== */
app-add-device-gorup-modal {
.nsd-modal-dialog-add-device-group {
max-width: 480px;
width: min(480px, 94vw);
}
.nsd-modal-content-add-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)
);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14);
border-radius: 14px !important;
overflow: hidden;
}
.nsd-header-add-device-group {
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background)
);
}
.nsd-header-title-add-device-group {
display: flex;
align-items: center;
gap: 10px;
}
.nsd-header-icon-add-device-group {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nsd-title-text-add-device-group {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-add-device-group {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.nd-widget-close-add-device-group:hover {
transform: translateY(-1px);
}
.nsd-modal-body-add-device-group {
padding: 16px 18px 4px;
display: flex;
flex-direction: column;
gap: 12px;
}
.nsd-form-section-add-dg {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nsd-form-section-add-dg__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nsd-form-section-add-dg__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nsd-form-section-add-dg__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-add-device-group {
margin-bottom: 12px;
}
.nd-field-last-add-device-group {
margin-bottom: 0 !important;
}
.nd-label-add-device-group {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.nd-input-add-device-group {
color: var(--primary--body--color) !important;
opacity: 1 !important;
border-radius: 8px !important;
background-color: var(--input--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow) !important;
background-position: right calc(0.375em + 0.1875rem) center !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-add-device-group::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-add-device-group:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nsd-modal-footer-add-device-group {
padding: 14px 18px 16px;
border-top:none;
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.nd-submit-btn-add-device-group {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
min-width: 110px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-add-device-group:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
}
/* ===== admin-components/used-device/components/device-group/modals/add-dg-for-edit-device/add-dg-for-edit-device.component.css (global) ===== */
.dark-theme .nsd-modal-content-add-dg-edit-device {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)
);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .nsd-header-add-dg-edit-device {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background)
);
}
.dark-theme .nsd-form-section-add-edit-dg {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.dark-theme .nsd-form-section-add-edit-dg__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .nd-input-add-dg-edit-device {
border: none !important;
}
.darkBlue-theme .nsd-modal-content-add-dg-edit-device {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)
);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.darkBlue-theme .nsd-header-add-dg-edit-device {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background)
);
}
.darkBlue-theme .nsd-form-section-add-edit-dg {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.darkBlue-theme .nsd-form-section-add-edit-dg__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.darkBlue-theme .nd-input-add-dg-edit-device {
border: none !important;
}
.lightBlue-theme .nsd-modal-content-add-dg-edit-device {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nsd-header-add-dg-edit-device {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nsd-form-section-add-edit-dg {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-input-add-dg-edit-device {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/used-device/components/device-group/modals/add-dg-for-edit-device/add-dg-for-edit-device.component.css (scoped) ===== */
app-add-dg-for-edit-device {
.nsd-modal-dialog-add-dg-edit-device {
max-width: 480px;
width: min(480px, 94vw);
}
.nsd-modal-content-add-dg-edit-device {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)
);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14);
border-radius: 14px !important;
overflow: hidden;
}
.nsd-header-add-dg-edit-device {
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background)
);
}
.nsd-header-title-add-dg-edit-device {
display: flex;
align-items: center;
gap: 10px;
}
.nsd-header-icon-add-dg-edit-device {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nsd-title-text-add-dg-edit-device {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-add-dg-edit-device {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.nd-widget-close-add-dg-edit-device:hover {
transform: translateY(-1px);
}
.nsd-modal-body-add-dg-edit-device {
padding: 16px 18px 4px;
display: flex;
flex-direction: column;
gap: 12px;
}
.nsd-form-section-add-edit-dg {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nsd-form-section-add-edit-dg__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nsd-form-section-add-edit-dg__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nsd-form-section-add-edit-dg__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-add-dg-edit-device {
margin-bottom: 12px;
}
.nd-field-last-add-dg-edit-device {
margin-bottom: 0 !important;
}
.nd-label-add-dg-edit-device {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.nd-input-add-dg-edit-device {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
background-position: right calc(0.375em + 0.1875rem) center !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-add-dg-edit-device::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-add-dg-edit-device:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nsd-modal-footer-add-dg-edit-device {
padding: 14px 18px 16px;
border-top:none;
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.nd-submit-btn-add-dg-edit-device {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
min-width: 110px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-add-dg-edit-device:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
}
/* ===== admin-components/used-device/components/device-group/modals/edit-device-group-modal/edit-device-group-modal.component.css (global) ===== */
.dark-theme .nsd-modal-content-edit-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)
);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .nsd-header-edit-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background)
);
}
.dark-theme .nsd-form-section-edit-dg {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.dark-theme .nsd-form-section-edit-dg__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .nd-input-edit-device-group {
border: none !important;
}
.darkBlue-theme .nsd-modal-content-edit-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)
);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.darkBlue-theme .nsd-header-edit-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background)
);
}
.darkBlue-theme .nsd-form-section-edit-dg {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.darkBlue-theme .nsd-form-section-edit-dg__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.darkBlue-theme .nd-input-edit-device-group {
border: none !important;
}
.lightBlue-theme .nsd-modal-content-edit-device-group {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nsd-header-edit-device-group {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nsd-form-section-edit-dg {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-input-edit-device-group {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/used-device/components/device-group/modals/edit-device-group-modal/edit-device-group-modal.component.css (scoped) ===== */
app-edit-device-group-modal {
.nsd-modal-dialog-edit-device-group {
max-width: 480px;
width: min(480px, 94vw);
}
.nsd-modal-content-edit-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)
);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14);
border-radius: 14px !important;
overflow: hidden;
}
.nsd-header-edit-device-group {
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background)
);
}
.nsd-header-title-edit-device-group {
display: flex;
align-items: center;
gap: 10px;
}
.nsd-header-icon-edit-device-group {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nsd-title-text-edit-device-group {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-edit-device-group {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.nd-widget-close-edit-device-group:hover {
transform: translateY(-1px);
}
.nsd-modal-body-edit-device-group {
padding: 16px 18px 4px;
display: flex;
flex-direction: column;
gap: 12px;
}
.nsd-form-section-edit-dg {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nsd-form-section-edit-dg__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nsd-form-section-edit-dg__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nsd-form-section-edit-dg__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-edit-device-group {
margin-bottom: 12px;
}
.nd-field-last-edit-device-group {
margin-bottom: 0 !important;
}
.nd-label-edit-device-group {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.nd-input-edit-device-group {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
background-position: right calc(0.375em + 0.1875rem) center !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-edit-device-group::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-edit-device-group:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nsd-modal-footer-edit-device-group {
padding: 14px 18px 16px;
border-top:none;
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.nd-submit-btn-edit-device-group {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
min-width: 110px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-edit-device-group:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
}
/* ===== admin-components/used-device/components/discovered-devices/discovered-devices.component.css (global) ===== */
@media screen and (max-width: 1480px) {
.show-sidebar .table-col {
width: 100% !important;
}
.show-sidebar .mobile-nav-header {
display: block !important;
}
.show-sidebar .large-nav {
display: none;
}
.show-sidebar .mobile-nav-header-log {
margin-bottom: 1rem;
}
}
/* ===== admin-components/used-device/components/discovered-devices/discovered-devices.component.css (scoped) ===== */
app-discovered-devices {
@media screen and (max-width: 992px) {
#datatable2 {
margin-top: 1rem ;
}
.large-nav {
display: none;
}
.mobile-nav-header {
display: block !important;
}
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
}
/* ===== admin-components/used-device/components/list-used-device/list-used-device.component.css (global) ===== */
.list_grid .ag-cell:not(:has(canvas)) {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.ag-header-cell .ag-header-cell-text {
margin-left: auto ;
margin-right: auto;
}
.ag-header-cell[col-id="deviceBrand"] .ag-header-cell-text {
margin-left: 0 !important;
margin-right: 0 !important;
}
.list_grid .ag-cell[col-id="deviceBrand"] {
justify-content: start !important;
}
/* ===== admin-components/used-device/components/list-used-device/list-used-device.component.css (scoped) ===== */
app-list-used-device {
.used-device-page {
--pagination-height: 54.67px;
}
.grid-shell {
position: relative;
}
.pagination-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: var(--pagination-height);
padding-top: 8px !important;
padding-bottom: 8px !important;
padding-left: 24px !important;
padding-right: 24px !important;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background-color: var(--body--background);
box-shadow: 0 -10px 24px color-mix(in srgb, #000 8%, transparent);
z-index: 25;
}
.pagination-shell {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 25;
}
.pagination-spacer {
height: calc(var(--pagination-height) + 8px);
}
.pagination-bar span {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.65;
}
.pagination-bar .page-link {
background-color: var(--input--background);
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 4px !important;
font-size: 12px;
padding: 4px 9px;
min-width: 30px;
text-align: center;
line-height: 1.5;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pagination-bar .page-link:hover {
background-color: color-mix(in srgb, var(--secondary--color) 14%, var(--input--background));
color: var(--primary--body--color);
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
}
.pagination-bar .page-item.active .page-link {
background-color: var(--secondary--color);
color: var(--day--remain--color);
border-color: var(--secondary--color);
font-weight: 600;
}
.pagination-bar .page-item.disabled .page-link {
background-color: var(--input--background);
color: color-mix(in srgb, var(--primary--body--color) 35%, transparent);
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
pointer-events: none;
}
.pagination-bar .pagination > .page-item:first-child .page-link, .pagination-bar .pagination > .page-item:nth-child(2) .page-link, .pagination-bar .pagination > .page-item:nth-last-child(2) .page-link, .pagination-bar .pagination > .page-item:last-child .page-link {
font-size: 16px;
line-height: 1;
padding: 4px 10px;
}
@media (max-width: 768px) {
.pagination-bar {
min-height: auto;
padding-top: 6px !important;
padding-bottom: 6px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
}
}
/* ===== admin-components/used-device/components/list-used-device/modals/edit-device-group-modal/edit-device-group-modal.component.css (global) ===== */
.dark-theme .nsd-modal-content-edit-used-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)
);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .nsd-header-edit-used-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background)
);
}
.dark-theme .nsd-form-section-edit-dg-2 {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.dark-theme .nsd-form-section-edit-dg-2__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .nd-input-edit-used-device-group, .dark-theme .nd-select {
border: none !important;
}
.darkBlue-theme .nsd-modal-content-edit-used-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)
);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.darkBlue-theme .nsd-header-edit-used-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background)
);
}
.darkBlue-theme .nsd-form-section-edit-dg-2 {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.darkBlue-theme .nsd-form-section-edit-dg-2__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.darkBlue-theme .nd-input-edit-used-device-group, .darkBlue-theme .nd-select {
border: none !important;
}
.lightBlue-theme .nsd-modal-content-edit-used-device-group {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nsd-header-edit-used-device-group {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nsd-form-section-edit-dg-2 {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-input-edit-used-device-group, .lightBlue-theme .nd-select {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/used-device/components/list-used-device/modals/edit-device-group-modal/edit-device-group-modal.component.css (scoped) ===== */
app-edit-device-group-modal {
.nsd-modal-dialog-edit-used-device-group {
max-width: 480px;
width: min(480px, 94vw);
}
.nsd-modal-content-edit-used-device-group {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)
);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14);
border-radius: 14px !important;
overflow: hidden;
}
.nsd-header-edit-used-device-group {
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background)
);
}
.nsd-header-title-edit-used-device-group {
display: flex;
align-items: center;
gap: 10px;
}
.nsd-header-icon-edit-used-device-group {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nsd-title-text-edit-used-device-group {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-edit-used-device-group {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.nd-widget-close-edit-used-device-group:hover {
transform: translateY(-1px);
}
.nsd-modal-body-edit-used-device-group {
padding: 16px 18px 4px;
display: flex;
flex-direction: column;
gap: 12px;
}
.nsd-form-section-edit-dg-2 {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nsd-form-section-edit-dg-2__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nsd-form-section-edit-dg-2__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nsd-form-section-edit-dg-2__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-edit-used-device-group {
margin-bottom: 12px;
}
.nd-field-last-edit-used-device-group {
margin-bottom: 0 !important;
}
.nd-label-edit-used-device-group {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.nd-input-edit-used-device-group, .nd-select {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-edit-used-device-group::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-edit-used-device-group:focus, .nd-select:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nsd-modal-footer-edit-used-device-group {
padding: 14px 18px 16px;
border-top:none;
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.nd-submit-btn-edit-used-device-group {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
min-width: 110px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-edit-used-device-group:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
}
/* ===== admin-components/used-device/components/list-used-device/modals/edit-used-devcie-modal/edit-used-devcie-modal.component.css (global) ===== */
.dark-theme .nd-modal-content-edit-used-device, .darkBlue-theme .nd-modal-content-edit-used-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: -22px 0 48px rgba(0, 0, 0, 0.38);
}
.dark-theme .nd-widget-header-edit-used-device, .darkBlue-theme .nd-widget-header-edit-used-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .nd-form-section-edit-d {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .nd-form-section-edit-d {
border: none;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent),
transparent 44%),
linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .nd-form-section-edit-d__head, .darkBlue-theme .nd-form-section-edit-d__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .nd-toggle-card, .darkBlue-theme .nd-toggle-card {
border: none;
background-color: color-mix(in srgb, var(--input--background) 86%, white 3%);
}
.dark-theme .nd-input-edit-used-device, .darkBlue-theme .nd-input-edit-used-device, .dark-theme .nd-select-edit-used-device, .darkBlue-theme .nd-select-edit-used-device, .dark-theme .nd-textarea-edit-used-device, .darkBlue-theme .nd-textarea-edit-used-device, .dark-theme .nd-chip-input, .darkBlue-theme .nd-chip-input, .dark-theme .nd-select-btn-edit-used-device, .darkBlue-theme .nd-select-btn-edit-used-device {
border: none !important;
}
.dark-theme .nd-dropdown-menu-edit-used-device, .darkBlue-theme .nd-dropdown-menu-edit-used-device {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .nd-brand-item-edit-used-device, .darkBlue-theme .nd-brand-item-edit-used-device {
color: rgba(255, 255, 255, 0.88);
}
.dark-theme .nd-widget-close-edit-used-device, .darkBlue-theme .nd-widget-close-edit-used-device {
border-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent);
}
.lightBlue-theme .nd-modal-content-edit-used-device {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-form-section-edit-d {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-toggle-card {
border: none;
}
.lightBlue-theme .nd-input-edit-used-device, .lightBlue-theme .nd-select-edit-used-device, .lightBlue-theme .nd-textarea-edit-used-device, .lightBlue-theme .nd-chip-input, .lightBlue-theme .nd-select-btn-edit-used-device {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .nd-dropdown-menu-edit-used-device {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-search-input-edit-used-device {
background-color: #f0f4f6;
border-color: #c8d8de;
}
.lightBlue-theme .nd-widget-header-edit-used-device {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
/* ===== admin-components/used-device/components/list-used-device/modals/edit-used-devcie-modal/edit-used-devcie-modal.component.css (scoped) ===== */
app-edit-used-devcie-modal {
.modal.right .nd-modal-dialog-edit-used-device {
position: fixed;
right: 0;
margin: 0;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.nd-modal-dialog-edit-used-device {
width: min(560px, 100vw);
max-width: min(560px, 100vw);
}
.modal.right .nd-modal-content-edit-used-device {
height: 100%;
overflow-y: hidden;
border-radius: 0;
border: none;
}
.modal.right.fade .nd-modal-dialog-edit-used-device {
right: -560px;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.right.show .nd-modal-dialog-edit-used-device {
right: 0;
}
.nd-modal-content-edit-used-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), -18px 0 42px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.nd-nd-modal-content-edit-used-device {
min-height: 100%;
}
.nd-widget-shell-edit-used-device {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.nd-widget-header-edit-used-device {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 18px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.nd-widget-title-edit-used-device {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.nd-header-icon-edit-used-device {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nd-title-text-edit-used-device {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-edit-used-device {
width: 34px;
height: 34px;
border: none;
border-radius: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.nd-widget-close-edit-used-device:hover {
transform: translateY(-1px);
}
.nd-modal-body-edit-used-device {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.nd-modal-body-edit-used-device::-webkit-scrollbar {
width: 4px;
}
.nd-modal-body-edit-used-device::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 45%, transparent);
border-radius: 999px;
}
.nd-form-section-edit-d {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nd-form-section-edit-d__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nd-form-section-edit-d__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nd-form-section-edit-d__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-edit-used-device {
margin-bottom: 12px;
}
.nd-field-last-edit-used-device {
margin-bottom: 0 !important;
}
.nd-field-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.nd-label-edit-used-device {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.nd-field-header .nd-label-edit-used-device {
margin-bottom: 0;
}
.nd-field-action {
font-size: 11.5px;
color: var(--primary--body--color);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
opacity: 0.85;
white-space: nowrap;
transition: opacity 0.15s ease;
}
.nd-field-action:hover {
opacity: 1;
text-decoration: underline;
}
.nd-field-action i {
font-size: 10px;
}
.nd-hint {
display: block;
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.6;
margin-top: 4px;
}
.nd-input-edit-used-device, .nd-select-edit-used-device {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-edit-used-device::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-edit-used-device:focus, .nd-select-edit-used-device:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-textarea-edit-used-device {
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
resize: vertical;
min-height: 92px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-textarea-edit-used-device::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-textarea-edit-used-device:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-chip-input {
position: relative;
min-height: 38px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 5px 34px 5px 10px;
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-chip-input:focus-within {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-chip-input.is-valid::after, .nd-chip-input.is-invalid::after {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 12px;
pointer-events: none;
}
.nd-chip-input.is-valid::after {
content: "\f00c";
color: #198754;
}
.nd-chip-input.is-invalid::after {
content: "\f00d";
color: #dc3545;
}
.nd-ip-chip {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 32%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 10%, transparent);
color: var(--primary--body--color);
font-size: 12px;
line-height: 1.2;
}
.nd-ip-chip-x {
width: 16px;
height: 16px;
padding: 0;
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--primary--body--color);
opacity: 0.65;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
line-height: 1;
}
.nd-ip-chip-x:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--secondary--color) 18%, transparent);
}
.nd-chip-text {
flex: 1;
min-width: 150px;
height: 26px;
border: none;
outline: none;
background: transparent;
color: var(--primary--body--color);
font-size: 13px;
}
.nd-chip-text::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
textarea.form-control.is-valid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
textarea.form-control.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
}
.nd-select-btn-edit-used-device {
width: 100%;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px !important;
background-color: var(--input--background);
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 13px;
cursor: pointer;
box-shadow: var(--cart--box--shadow);
padding: 0 12px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-select-btn-edit-used-device::after {
margin-left: auto !important;
flex-shrink: 0;
}
.nd-select-btn-edit-used-device.show, .nd-select-btn-edit-used-device:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-placeholder-edit-used-device {
opacity: 0.45;
font-size: 12px;
}
.nd-dropdown-menu-edit-used-device {
width: 100%;
max-height: 260px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.nd-dropdown-menu-edit-used-device::-webkit-scrollbar {
width: 4px;
}
.nd-dropdown-menu-edit-used-device::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.nd-search-li-edit-used-device {
position: relative;
padding: 4px 6px;
margin-bottom: 4px;
}
.nd-search-li-edit-used-device:hover {
background-color: transparent !important;
}
.nd-search-icon-edit-used-device {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.4;
font-size: 11px;
pointer-events: none;
}
.nd-search-input-edit-used-device {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 6px;
background-color: color-mix(in srgb, var(--input--background) 80%, transparent);
color: var(--primary--body--color);
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
transition: border-color 0.15s ease;
}
.nd-search-input-edit-used-device:focus {
border-color: color-mix(in srgb, var(--secondary--color) 50%, transparent);
}
.nd-search-input-edit-used-device::placeholder {
color: var(--primary--body--color);
opacity: 0.4;
}
.nd-brand-item-edit-used-device {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.nd-brand-item-edit-used-device:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.nd-model-item {
justify-content: space-between;
}
.nd-model-edit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
color: var(--secondary--color);
font-size: 12px;
flex-shrink: 0;
transition: background-color 0.14s ease;
}
.nd-model-edit:hover {
background-color: color-mix(in srgb, var(--secondary--color) 15%, transparent);
}
.nd-brand-item-edit-used-device:hover .nd-model-edit {
color: rgba(255, 255, 255, 0.88);
}
.nd-no-result-li-edit-used-device {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.6;
pointer-events: none;
}
.nd-no-result-li-edit-used-device i {
color: #e74c3c;
opacity: 1;
}
.nd-no-result-li-edit-used-device:hover {
background-color: transparent !important;
}
.nd-toggle-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.nd-toggle-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 14px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
}
.nd-toggle-label {
font-size: 12.5px;
font-weight: 650;
line-height: 1.3;
}
.nd-modal-footer-edit-used-device {
position: sticky;
bottom: 0;
z-index: 10;
padding: 12px 18px;
display: flex;
justify-content: flex-end;
}
.nd-submit-btn-edit-used-device {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-edit-used-device:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
.label-header-edit-used-device {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
@media only screen and (max-width: 600px) {
.nd-modal-dialog-edit-used-device {
width: 100vw !important;
max-width: 100vw !important;
}
.nd-toggle-grid {
grid-template-columns: 1fr;
}
.nd-modal-body-edit-used-device {
padding-bottom: 120px;
}
}
}
/* ===== admin-components/used-device/components/list-used-device/modals/edit-used-devcie-modal/update-device-model-modal/update-device-model-modal.component.css (scoped) ===== */
app-update-device-model-modal {
.modal-content {
background-color: var(--body--background) !important;
height: auto;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
border-radius: var(--cart--border--radius) !important;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
}
.modal-header {
border-bottom: none;
padding: 15px;
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.new_input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
text-indent: 10px;
}
.new_input:focus {
outline: none;
}
.new_input::placeholder {
color: var(--primary--body--color);
}
}
/* ===== admin-components/used-device/components/modals/new-device-modal/edit-device-model-modal/edit-device-model-modal.component.css (scoped) ===== */
app-edit-device-model-modal {
.modal-content {
background-color: var(--body--background) !important;
height: auto;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
border-radius: var(--cart--border--radius) !important;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
}
.modal-header {
border-bottom: none;
padding: 15px;
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.new_input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
text-indent: 10px;
}
.new_input:focus {
outline: none;
}
.new_input::placeholder {
color: var(--primary--body--color);
}
}
/* ===== admin-components/used-device/components/modals/new-device-modal/new-d-modal-for-edit/new-d-modal-for-edit.component.css (global) ===== */
.dark-theme .nsd-modal-content-new-device-edit, .darkBlue-theme .nsd-modal-content-new-device-edit {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .nsd-header-new-device-edit, .darkBlue-theme .nsd-header-new-device-edit {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .nsd-form-section-new-d-edit {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .nsd-form-section-new-d-edit {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .nsd-form-section-new-d-edit__head, .darkBlue-theme .nsd-form-section-new-d-edit__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .nd-input-new-device-edit, .darkBlue-theme .nd-input-new-device-edit, .dark-theme .nd-select-btn-new-device-edit, .darkBlue-theme .nd-select-btn-new-device-edit {
border: none !important;
}
.dark-theme .nd-dropdown-menu-new-device-edit, .darkBlue-theme .nd-dropdown-menu-new-device-edit {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .nd-brand-item-new-device-edit, .darkBlue-theme .nd-brand-item-new-device-edit {
color: rgba(255, 255, 255, 0.88);
}
.lightBlue-theme .nsd-modal-content-new-device-edit {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nsd-header-new-device-edit {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nsd-form-section-new-d-edit {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-input-new-device-edit, .lightBlue-theme .nd-select-btn-new-device-edit {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .nd-dropdown-menu-new-device-edit {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-search-input-new-device-edit {
background-color: #f0f4f6;
border-color: #c8d8de;
}
/* ===== admin-components/used-device/components/modals/new-device-modal/new-d-modal-for-edit/new-d-modal-for-edit.component.css (scoped) ===== */
app-new-d-modal-for-edit {
.nsd-modal-dialog-new-device-edit {
max-width: 520px;
width: min(520px, 94vw);
}
.nsd-modal-content-new-device-edit {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14);
border-radius: 14px !important;
overflow: hidden;
}
.nsd-header-new-device-edit {
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.nsd-header-title-new-device-edit {
display: flex;
align-items: center;
gap: 10px;
}
.nsd-header-icon-new-device-edit {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nsd-title-text-new-device-edit {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-new-device-edit {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.nd-widget-close-new-device-edit:hover {
transform: translateY(-1px);
}
.nsd-modal-body-new-device-edit {
padding: 16px 18px 4px;
display: flex;
flex-direction: column;
gap: 12px;
}
.nsd-form-section-new-d-edit {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nsd-form-section-new-d-edit__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nsd-form-section-new-d-edit__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nsd-form-section-new-d-edit__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-new-device-edit {
margin-bottom: 14px;
}
.nd-field-last-new-device-edit {
margin-bottom: 0 !important;
}
.nd-label-new-device-edit {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.nd-input-new-device-edit {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
background-position: right calc(0.375em + 0.1875rem) center !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-new-device-edit::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-new-device-edit:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-select-btn-new-device-edit {
width: 100%;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px !important;
background-color: var(--input--background);
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 13px;
cursor: pointer;
box-shadow: var(--cart--box--shadow);
padding: 0 12px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-select-btn-new-device-edit::after {
margin-left: auto !important;
flex-shrink: 0;
}
.nd-select-btn-new-device-edit.show, .nd-select-btn-new-device-edit:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-placeholder-new-device-edit {
opacity: 0.45;
font-size: 12px;
}
.nd-dropdown-menu-new-device-edit {
width: 100%;
max-height: 240px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.nd-dropdown-menu-new-device-edit::-webkit-scrollbar {
width: 4px;
}
.nd-dropdown-menu-new-device-edit::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.nd-search-li-new-device-edit {
position: relative;
padding: 4px 6px;
margin-bottom: 4px;
}
.nd-search-li-new-device-edit:hover {
background-color: transparent !important;
}
.nd-search-icon-new-device-edit {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.4;
font-size: 11px;
pointer-events: none;
}
.nd-search-input-new-device-edit {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 6px;
background-color: color-mix(in srgb, var(--input--background) 80%, transparent);
color: var(--primary--body--color);
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
transition: border-color 0.15s ease;
}
.nd-search-input-new-device-edit:focus {
border-color: color-mix(in srgb, var(--secondary--color) 50%, transparent);
}
.nd-search-input-new-device-edit::placeholder {
color: var(--primary--body--color);
opacity: 0.4;
}
.nd-brand-item-new-device-edit {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.nd-brand-item-new-device-edit:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.nd-no-result-li-new-device-edit {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.6;
pointer-events: none;
}
.nd-no-result-li-new-device-edit i {
color: #e74c3c;
opacity: 1;
}
.nd-no-result-li-new-device-edit:hover {
background-color: transparent !important;
}
.nsd-file-area-new-device-edit {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.inputfile-new-device-edit {
display: none;
}
.nsd-file-label-new-device-edit {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 40%, transparent);
transition: background-color 0.18s ease, border-color 0.18s ease;
white-space: nowrap;
margin-bottom: 0;
}
.nsd-file-label-new-device-edit:hover {
background-color: color-mix(in srgb, var(--secondary--color) 20%, transparent);
border-color: color-mix(in srgb, var(--secondary--color) 65%, transparent);
}
.nsd-file-name-new-device-edit {
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.6;
word-break: break-all;
}
.nsd-modal-footer-new-device-edit {
padding: 14px 18px 16px;
border-top: none;
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.nd-submit-btn-new-device-edit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
min-width: 110px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-new-device-edit:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
}
/* ===== admin-components/used-device/components/modals/new-device-modal/new-supported-device/new-supported-device.component.css (global) ===== */
.dark-theme .nsd-modal-content-new-supported-device, .darkBlue-theme .nsd-modal-content-new-supported-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .nsd-header-new-supported-device, .darkBlue-theme .nsd-header-new-supported-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .nsd-form-section-new-s-device {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, #0000008a);
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 92%, white 2%),
color-mix(in srgb, var(--body--background) 98%, white 1%));
}
.darkBlue-theme .nsd-form-section-new-s-device {
border: none;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28);
}
.dark-theme .nsd-form-section-new-s-device__head, .darkBlue-theme .nsd-form-section-new-s-device__head {
border-bottom-color: color-mix(in srgb, var(--primary--body--color) 6%, transparent);
}
.dark-theme .nd-input-new-supported-device, .darkBlue-theme .nd-input-new-supported-device, .dark-theme .nd-select-btn-new-supported-device, .darkBlue-theme .nd-select-btn-new-supported-device {
border: none !important;
}
.dark-theme .nd-dropdown-menu-new-supported-device, .darkBlue-theme .nd-dropdown-menu-new-supported-device {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .nd-brand-item-new-supported-device, .darkBlue-theme .nd-brand-item-new-supported-device {
color: rgba(255, 255, 255, 0.88);
}
.lightBlue-theme .nsd-modal-content-new-supported-device {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nsd-header-new-supported-device {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .nsd-form-section-new-s-device {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .nd-input-new-supported-device, .lightBlue-theme .nd-select-btn-new-supported-device {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .nd-dropdown-menu-new-supported-device {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .nd-search-input-new-supported-device {
background-color: #f0f4f6;
border-color: #c8d8de;
}
/* ===== admin-components/used-device/components/modals/new-device-modal/new-supported-device/new-supported-device.component.css (scoped) ===== */
app-new-supported-device {
.nsd-modal-dialog-new-supported-device {
max-width: 520px;
width: min(520px, 94vw);
}
.nsd-modal-content-new-supported-device {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14);
border-radius: 14px !important;
overflow: hidden;
}
.nsd-header-new-supported-device {
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
}
.nsd-header-title-new-supported-device {
display: flex;
align-items: center;
gap: 10px;
}
.nsd-header-icon-new-supported-device {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.nsd-title-text-new-supported-device {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-widget-close-new-supported-device {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.nd-widget-close-new-supported-device:hover {
transform: translateY(-1px);
}
.nsd-modal-body-new-supported-device {
padding: 16px 18px 4px;
display: flex;
flex-direction: column;
gap: 12px;
}
.nsd-form-section-new-s-device {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nsd-form-section-new-s-device__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nsd-form-section-new-s-device__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nsd-form-section-new-s-device__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-field-new-supported-device {
margin-bottom: 14px;
}
.nd-field-last-new-supported-device {
margin-bottom: 0 !important;
}
.nd-label-new-supported-device {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.nd-input-new-supported-device {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
background-position: right calc(0.375em + 0.1875rem) center !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-input-new-supported-device::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-input-new-supported-device:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-select-btn-new-supported-device {
width: 100%;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px !important;
background-color: var(--input--background);
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 13px;
cursor: pointer;
box-shadow: var(--cart--box--shadow);
padding: 0 12px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-select-btn-new-supported-device::after {
margin-left: auto !important;
flex-shrink: 0;
}
.nd-select-btn-new-supported-device.show, .nd-select-btn-new-supported-device:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-placeholder-new-supported-device {
opacity: 0.45;
font-size: 12px;
}
.nd-dropdown-menu-new-supported-device {
width: 100%;
max-height: 240px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.nd-dropdown-menu-new-supported-device::-webkit-scrollbar {
width: 4px;
}
.nd-dropdown-menu-new-supported-device::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.nd-search-li-new-supported-device {
position: relative;
padding: 4px 6px;
margin-bottom: 4px;
}
.nd-search-li-new-supported-device:hover {
background-color: transparent !important;
}
.nd-search-icon-new-supported-device {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.4;
font-size: 11px;
pointer-events: none;
}
.nd-search-input-new-supported-device {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 6px;
background-color: color-mix(in srgb, var(--input--background) 80%, transparent);
color: var(--primary--body--color);
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
transition: border-color 0.15s ease;
}
.nd-search-input-new-supported-device:focus {
border-color: color-mix(in srgb, var(--secondary--color) 50%, transparent);
}
.nd-search-input-new-supported-device::placeholder {
color: var(--primary--body--color);
opacity: 0.4;
}
.nd-brand-item-new-supported-device {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.nd-brand-item-new-supported-device:hover {
background-color: var(--secondary--color) !important;
color: #fff;
}
.nd-no-result-li-new-supported-device {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.6;
pointer-events: none;
}
.nd-no-result-li-new-supported-device i {
color: #e74c3c;
opacity: 1;
}
.nd-no-result-li-new-supported-device:hover {
background-color: transparent !important;
}
.nsd-file-area-new-supported-device {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.inputfile-new-supported-device {
display: none;
}
.nsd-file-label-new-supported-device {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 12%, transparent);
color: var(--primary--body--color);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
border: 1px dashed color-mix(in srgb, var(--secondary--color) 40%, transparent);
transition: background-color 0.18s ease, border-color 0.18s ease;
white-space: nowrap;
margin-bottom: 0;
}
.nsd-file-label-new-supported-device:hover {
background-color: color-mix(in srgb, var(--secondary--color) 20%, transparent);
border-color: color-mix(in srgb, var(--secondary--color) 65%, transparent);
}
.nsd-file-name-new-supported-device {
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.6;
word-break: break-all;
}
.nsd-modal-footer-new-supported-device {
padding: 14px 18px 16px;
border-top: none;
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.nd-submit-btn-new-supported-device {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
min-width: 110px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nd-submit-btn-new-supported-device:hover {
transform: translateY(-1px);
box-shadow: var(--cart--box--shadow),
0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
}
}
/* ===== admin-components/used-device/components/modals/used-device-filter-modal/used-device-filter-modal.component.css (global) ===== */
.dark-theme .nd-modal-content-used-device-filter, .darkBlue-theme .nd-modal-content-used-device-filter {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.dark-theme .modal-header-used-device-filter, .darkBlue-theme .modal-header-used-device-filter {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme .label_header_content, .dark-theme .form-group-filter {
}
.darkBlue-theme .label_header_content, .darkBlue-theme .form-group-filter {
border: none;
}
.dark-theme .form-group-filter .label_header_content, .darkBlue-theme .form-group-filter .label_header_content {
border: none;
background: transparent;
}
.dark-theme .select_device, .darkBlue-theme .select_device, .dark-theme .select-device-brand, .darkBlue-theme .select-device-brand, .dark-theme .new_input_filter_modal, .darkBlue-theme .new_input_filter_modal {
border: none !important;
}
.dark-theme .device-brand-menu-used-device-filter, .darkBlue-theme .device-brand-menu-used-device-filter {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme .brand-name, .darkBlue-theme .brand-name {
color: rgba(255, 255, 255, 0.88);
}
.dark-theme .form-check-input, .darkBlue-theme .form-check-input {
opacity: 0.85;
}
.lightBlue-theme .nd-modal-content-used-device-filter {
border: none;
background: linear-gradient(180deg, #f4f8fa, #fafafa);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
.lightBlue-theme .modal-header-used-device-filter {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme .label_header_content, .lightBlue-theme .form-group-filter {
border: none;
background:
radial-gradient(circle at top right, rgba(63, 164, 172, 0.08), transparent 42%),
color-mix(in srgb, var(--body--background) 88%, #8ca9b4 7%);
}
.lightBlue-theme .select_device, .lightBlue-theme .select-device-brand, .lightBlue-theme .new_input_filter_modal {
border: none !important;
background-color: #ffffff !important;
}
.lightBlue-theme .device-brand-menu-used-device-filter {
border: none;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
/* ===== admin-components/used-device/components/modals/used-device-filter-modal/used-device-filter-modal.component.css (scoped) ===== */
app-used-device-filter-modal {
.modal-dialog-used-device-filter {
max-width: 900px;
width: min(900px, 94vw);
}
.nd-modal-content-used-device-filter {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background));
box-shadow: var(--cart--box--shadow), 0 16px 48px rgba(0, 0, 0, 0.14);
border-radius: 14px !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
overflow: visible !important;
}
.modal-header-used-device-filter {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-radius: 14px 14px 0 0;
box-shadow: none;
}
.modal-title-used-device-filter {
color: var(--primary--body--color);
font-size: 16px;
font-weight: 700;
opacity: 0.9;
margin: 0;
}
.close_modal {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease;
}
.close_modal:hover {
transform: translateY(-1px);
}
.modal-body-used-device-filter {
position: relative;
flex: 1 1 auto;
padding: 16px 18px;
}
.label_header_content, .form-group-filter {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 14px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.col-lg-6 > .form-group-filter {
min-height: 100%;
display: flex;
flex-direction: column;
}
.form-group-filter .label_header_content, .form-group-filter .form-group-filter {
border: none;
padding: 0;
background: transparent;
box-shadow: none;
}
.label_header {
width: 100%;
display: block;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 700 !important;
opacity: 0.88;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.devices {
display: block;
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-size: 12.5px;
font-weight: 650;
margin-bottom: 6px;
padding: 0 !important;
}
.select_device, .select-device-brand, .new_input_filter_modal {
color: var(--primary--body--color);
opacity: var(--opacity--80);
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
height: 36px;
font-size: 13px;
border-radius: 8px !important;
background-position: right calc(0.375em + 0.1875rem) center !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.select_device:focus, .select-device-brand:focus, .new_input_filter_modal:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.select-device-brand {
width: 100%;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
cursor: pointer;
}
.select-device-brand::after {
margin-left: auto !important;
flex-shrink: 0;
}
.drop-filter::after {
content: none !important;
}
.select_box, .select_box2 {
position: relative;
}
.select_box:after, .select_box2:after {
content: none;
}
.device-brand-menu-used-device-filter {
width: 100%;
max-height: 230px;
overflow: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.device-brand-menu-used-device-filter::-webkit-scrollbar {
width: 4px;
}
.device-brand-menu-used-device-filter::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.device-search-li {
position: relative;
padding: 4px 6px;
margin-bottom: 4px !important;
height: auto;
}
.device-search-li:hover, .device-search-li:focus, .device-search-li:active, .no-data-li:hover {
background-color: transparent !important;
color: var(--primary--body--color) !important;
}
.device-search {
height: 32px;
text-indent: 0;
padding-left: 28px;
}
.device-search::placeholder {
text-indent: 0;
color: var(--primary--body--color);
opacity: 0.4;
}
.brand-name {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px !important;
border-radius: 7px;
font-size: 12.5px;
color: var(--primary--body--color);
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.brand-name a {
color: inherit;
text-decoration: none;
display: flex;
align-items: center;
}
.brand-name:hover {
background: color-mix(in srgb, var(--secondary--color) 15%, var(--body--background)) !important;
color: var(--primary--body--color) !important;
}
.brand-name-span-used-device-filter {
font-size: 12.5px !important;
margin-left: 0.5rem;
}
.no-data-li {
color: var(--primary--body--color);
opacity: 0.65;
pointer-events: none;
}
.float-right {
width: 100%;
}
.clearfix {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.filter_area {
width: auto;
float: none;
}
.form-check {
min-height: 56px;
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 9%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 82%, var(--body--background));
}
.form-check-input {
flex-shrink: 0;
margin: 0;
}
.form-check-label, .filter_area label {
font-size: 11.5px;
line-height: 1.25;
color: var(--primary--body--color);
}
.form-check-input:checked {
background-color: var(--secondary--color);
border-color: var(--secondary--color);
box-shadow: none;
}
.form-check-input:active, .form-check-input:focus {
box-shadow: none;
}
@media only screen and (max-width: 992px) {
.label_header {
margin-top: 0;
}
.label_header_content {
display: flex;
flex-direction: column;
align-items: center;
}
.label_header_content .label_header {
align-self: stretch;
}
#chart-device-status {
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (max-width: 600px) {
.clearfix {
grid-template-columns: 1fr;
}
}
}
/* ===== admin-components/used-device/components/panel-used-device/panel-used-device.component.css (global) ===== */
@keyframes blink {
0%, 100% { opacity: 0.15; }
50% { opacity: 1; }
}
.dark-theme .device-card {
background:
radial-gradient(circle at top right, rgba(189, 190, 190, 0.05), transparent 34%),
linear-gradient(180deg, #242828 0%, #202424 100%);
border: 1px solid rgba(189, 190, 190, 0.16);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 10px;
}
.dark-theme .device-card-header, .dark-theme .device-card-footer {
border-color: rgba(189, 190, 190, 0.1);
}
.dark-theme .status-active {
color: #4ade80;
}
.dark-theme .status-passive {
color: #f87171;
}
.darkBlue-theme .device-card {
background:
radial-gradient(circle at top right, rgba(61, 64, 115, 0.14), transparent 34%),
linear-gradient(180deg, #081824 0%, #06151a 100%);
border: none;
border-radius: 10px;
}
.darkBlue-theme .device-card-header, .darkBlue-theme .device-card-footer {
border-color: rgba(61, 64, 115, 0.35);
}
.darkBlue-theme .status-active {
color: #4ade80;
}
.darkBlue-theme .status-passive {
color: #f87171;
}
.lightBlue-theme .device-card {
background:
radial-gradient(circle at top right, rgba(140, 169, 180, 0.12), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #f1f7fa 100%);
border: none;
border-radius: 8px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.16);
}
.lightBlue-theme .device-card-header, .lightBlue-theme .device-card-footer {
border-color: #cad5d7;
}
.lightBlue-theme .action-btn {
border-color: color-mix(in srgb, #3fa4ac 28%, transparent);
}
.lightBlue-theme .action-btn:hover {
border-color: #3fa4ac;
color: #3fa4ac;
}
@media (max-width: 1238px) {
.show-sidebar .content {
width: 100%;
}
}
@media (max-width: 900px) {
.show-sidebar .panel {
padding-left: 16px !important;
}
}
@media (max-width: 650px) {
.show-sidebar .device-actions {
gap: 3px;
}
}
/* ===== admin-components/used-device/components/panel-used-device/panel-used-device.component.css (scoped) ===== */
app-panel-used-device {
.device-card {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background: linear-gradient(180deg, var(--body--background) 0%, color-mix(in srgb, var(--body--background) 94%, var(--secondary--color) 6%) 100%);
overflow: visible;
display: flex;
flex-direction: column;
height: 246px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.device-card:hover {
transform: translateY(-2px);
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.device-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
border-bottom: var(--cart--border);
background: color-mix(in srgb, var(--body--background) 97%, var(--secondary--color) 3%);
flex-shrink: 0;
min-height: 52px;
}
.device-header-left {
display: flex;
align-items: center;
gap: 9px;
flex: 1;
min-width: 0;
}
.device-logo img {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
}
.device-title-wrap {
display: flex;
flex-direction: column;
min-width: 0;
}
.device-name {
font-size: 13px;
font-weight: 600;
color: var(--primary--body--color);
display: block;
max-width: 170px;
line-height: 1.3;
}
.device-brand-model {
font-size: 11px;
color: color-mix(in srgb, var(--primary--body--color) 55%, transparent);
display: block;
max-width: 170px;
line-height: 1.3;
}
.device-header-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 20px;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
}
.status-active {
background: color-mix(in srgb, #22c55e 14%, transparent);
color: #16a34a;
border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
}
.status-passive {
background: color-mix(in srgb, #ef4444 14%, transparent);
color: #dc2626;
border: 1px solid color-mix(in srgb, #ef4444 28%, transparent);
}
.alert-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #f59e0b;
}
.blinking-icon {
animation: blink 1.8s ease-in-out infinite;
}
.device-chart-area {
flex: 1;
min-height: 0;
background-color: var(--body--background);
padding-right: 10px;
}
.device-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 12px;
border-top: var(--cart--border);
background: color-mix(in srgb, var(--body--background) 97%, var(--secondary--color) 3%);
flex-shrink: 0;
min-height: 44px;
gap: 8px;
}
.device-ip {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: color-mix(in srgb, var(--primary--body--color) 65%, transparent);
min-width: 0;
position: relative;
}
.device-ip i {
font-size: 11px;
opacity: 0.7;
flex-shrink: 0;
}
.device-ip-text {
max-width: 132px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: default;
outline: none;
}
.device-ip-list {
position: absolute;
left: 0;
bottom: calc(100% + 8px);
z-index: 20;
min-width: 168px;
max-width: 240px;
max-height: 180px;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 30%, transparent);
border-radius: 8px;
background: var(--body--background);
box-shadow: 0 10px 28px color-mix(in srgb, #000 18%, transparent);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
pointer-events: none;
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}
.device-ip:hover .device-ip-list, .device-ip:focus-within .device-ip-list {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.device-ip-list li {
padding: 4px 7px;
border-radius: 5px;
color: var(--primary--body--color);
line-height: 1.4;
white-space: nowrap;
}
.device-ip-list li:hover {
background: color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.device-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.action-btn {
min-width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 7px;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background)
);
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
text-decoration: none;
padding: 0;
line-height: 1;
}
.action-btn:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)
);
box-shadow: 0 4px 12px color-mix(in srgb, var(--secondary--color) 18%, transparent);
color: var(--secondary--color);
}
.panel {
padding-left: 2px !important;
}
.used-device-page {
--pagination-height: 54.67px;
position: relative;
}
.content {
width: 50%;
padding: 0 6px;
margin-bottom: 14px;
}
.pagination-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
min-height: var(--pagination-height);
padding-top: 8px !important;
padding-bottom: 8px !important;
padding-left: 24px !important;
padding-right: 24px !important;
gap: 12px;
background-color: var(--body--background);
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
box-shadow: 0 -10px 24px color-mix(in srgb, #000 8%, transparent);
z-index: 25;
}
.pagination-shell {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 25;
}
.pagination-spacer {
height: calc(var(--pagination-height) + 8px);
}
.pagination-bar span {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.65;
}
.pagination-bar .page-link {
background-color: var(--input--background);
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 4px !important;
font-size: 12px;
padding: 4px 9px;
min-width: 30px;
text-align: center;
line-height: 1.5;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pagination-bar .page-link:hover {
background-color: color-mix(in srgb, var(--secondary--color) 14%, var(--input--background));
color: var(--primary--body--color);
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
}
.pagination-bar .page-item.active .page-link {
background-color: var(--secondary--color);
color: var(--day--remain--color);
border-color: var(--secondary--color);
font-weight: 600;
}
.pagination-bar .page-item.disabled .page-link {
background-color: var(--input--background);
color: color-mix(in srgb, var(--primary--body--color) 35%, transparent);
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
pointer-events: none;
}
.pagination-bar .pagination > .page-item:first-child .page-link, .pagination-bar .pagination > .page-item:nth-child(2) .page-link, .pagination-bar .pagination > .page-item:nth-last-child(2) .page-link, .pagination-bar .pagination > .page-item:last-child .page-link {
font-size: 16px;
line-height: 1;
padding: 4px 10px;
}
@media (min-width: 2600px) {
.content {
width: 33%;
}
.content:nth-child(3n) {
width: 34%;
}
}
@media (max-width: 1015px) {
.content {
width: 100%;
}
}
@media (max-width: 460px) {
.pagination-bar {
min-height: auto;
padding-top: 6px !important;
padding-bottom: 6px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.device-actions {
gap: 3px;
}
.action-btn {
min-width: 26px;
height: 26px;
font-size: 11px;
}
}
}
/* ===== admin-components/used-device/components/supported-devices/navbar/navbar.component.css (global) ===== */
.dark-theme .supported_devices_item, .darkBlue-theme .supported_devices_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .supported_devices_item, .lightBlue-theme .useddevice_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
/* ===== admin-components/used-device/components/supported-devices/navbar/navbar.component.css (scoped) ===== */
app-navbar {
.supported_devices_settings_main {
margin-top: 1rem;
margin-bottom: 1rem;
}
.supported_devices_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.supported_devices_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.supported_devices_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.supported_devices_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
}
/* ===== admin-components/used-device/components/used-device-navbar/navbar-device-group/navbar-device-group.component.css (global) ===== */
.dark-theme .useddevice_settings_item, .darkBlue-theme .useddevice_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .useddevice_search input, .darkBlue-theme .useddevice_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .useddevice_settings_item, .lightBlue-theme .useddevice_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
@media screen and (min-width: 961px) and (max-width: 1340px) {
.show-sidebar .useddevice_settings {
flex-wrap: wrap;
}
.show-sidebar .useddevice_search {
flex: 1 1 100%;
margin-top: 6px;
}
.show-sidebar .useddevice_settings_item {
display: inline-flex;
}
.show-sidebar .accordion_filters {
display: none;
}
}
@media only screen and (max-width: 544px) {
.show-sidebar .filter_item {
width: 100% !important;
}
}
@media (max-width: 870px) {
.show-sidebar .filter_item {
width: 50% !important;
}
}
@media only screen and (max-width: 601px) {
.show-sidebar .filter_item {
width: 100% !important;
margin-bottom: 4px;
}
}
.show-sidebar .useddevice_settings {
padding-left: 0;
}
/* ===== admin-components/used-device/components/used-device-navbar/navbar-device-group/navbar-device-group.component.css (scoped) ===== */
app-navbar-device-group {
.useddevice_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.useddevice_settings_item {
height: 36px;
padding: 0 12px;
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
box-sizing: border-box;
}
.useddevice_settings_item:has(.dropdown-menu.show), .useddevice_settings_item:focus-within {
z-index: 1300;
}
.useddevice_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.useddevice_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.useddevice_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
line-height: 1.2;
}
.row_count_option {
background: transparent !important;
border: none;
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
outline: none;
padding: 7px 14px;
white-space: nowrap;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.row_count_option:focus {
outline: none !important;
box-shadow: none !important;
}
.row_count_option::after {
margin-left: 6px !important;
}
.dropdown {
position: relative;
max-width: 100%;
min-width: 0;
}
.nd-dropdown-menu {
padding: 6px;
min-width: 100%;
width: max-content;
left: 0;
top: calc(100% + 6px);
z-index: 1050 !important;
border-radius: 10px;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background-color: var(--body--background);
}
.nd-dropdown-item {
list-style: none;
cursor: pointer;
padding: 0 !important;
}
.nd-dropdown-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
line-height: 1;
}
.nd-dropdown-item:hover>.nd-dropdown-link, .nd-dropdown-link:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.nd-dropdown-link i {
width: 20px;
min-width: 20px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.70;
font-size: 13px;
line-height: 1;
}
.useddevice_search {
position: relative;
z-index: 0;
flex: 1;
min-width: 160px;
height: 36px;
}
.useddevice_search .fa-search {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 14px;
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
pointer-events: none;
}
.useddevice_search input {
width: 100%;
height: 36px;
border-radius: 8px;
padding-left: 36px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.useddevice_search input:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
box-shadow: var(--cart--box--shadow), 0 4px 12px color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.useddevice_search input::placeholder, .search-device::placeholder {
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.search-device {
color: var(--primary--body--color) !important;
}
.accordion_filters {
display: none;
position: relative;
z-index: 200;
}
.accordion-button:focus, .accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.accordion {
--bs-accordion-border-width: 0px;
}
.accordion-item {
background-color: var(--body--background);
border: var(--cart--border);
border-radius: 8px !important;
box-shadow: var(--cart--box--shadow);
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
font-size: 13px;
border-radius: 8px !important;
}
.accordion-button:not(.collapsed) {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
position: relative;
z-index: 200;
}
.accordion_settings {
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
margin-bottom: 6px;
padding: 0 10px;
box-sizing: border-box;
text-align: center;
overflow: hidden;
}
.accordion_settings:has(.dropdown) {
overflow: visible;
position: relative;
z-index: 1200;
}
.accordion_settings:has(.dropdown-menu.show) {
z-index: 1300;
}
.accordion_settings:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.accordion_settings i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.accordion_settings span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
line-height: 1.2;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.row_count_option_mobil {
background: transparent;
color: var(--primary--body--color);
border: none;
font-size: 13px;
outline: none;
cursor: pointer;
padding: 7px 14px;
white-space: nowrap;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.row_count_option_mobil:focus {
outline: none !important;
box-shadow: none !important;
}
.row_count_option_mobil::after {
margin-left: 6px !important;
}
@media (max-width: 960px) {
.useddevice_search {
flex-basis: 100%;
order: 10;
margin-top: 6px;
}
.accordion_filters {
display: block;
flex: 1;
min-width: 200px;
}
.useddevice_settings_item:nth-child(1), .useddevice_settings_item:nth-child(2), .useddevice_settings_item:nth-child(3), .useddevice_settings_item:nth-child(4), .useddevice_settings_item:nth-child(5), .useddevice_settings_item:nth-child(6) {
display: none;
}
.useddevice_settings {
flex-wrap: wrap;
justify-content: flex-start;
}
}
@media (max-width: 723px) {
.useddevice_settings {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 552px) {
.useddevice_settings {
flex-wrap: wrap;
justify-content: center;
}
.useddevice_search {
width: 100%;
}
.useddevice_settings_item span {
font-size: 13px;
}
}
@media only screen and (max-width: 544px) {
.useddevice_search {
width: 100%;
}
}
@media (max-width: 455px) {
.useddevice_search {
width: 100%;
}
.device_information span:nth-child(3) {
display: block;
}
}
@media (max-width: 440px) {
.useddevice_search {
width: 100%;
}
.useddevice_settings_item {
max-height: 55px;
}
.useddevice_settings_item span {
font-size: 13px;
}
}
@media (max-width: 330px) {
.useddevice_search {
width: 100%;
}
.device_information span:nth-child(2) {
display: block;
}
}
}
/* ===== admin-components/used-device/components/used-device-navbar/navbar-list/navbar-list.component.css (global) ===== */
.dark-theme .useddevice_settings_item, .darkBlue-theme .useddevice_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .useddevice_list_search input, .darkBlue-theme .useddevice_list_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .useddevice_settings_item, .lightBlue-theme .useddevice_list_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
@media (max-width: 1300px) {
.show-sidebar .useddevice_settings_item:nth-child(1), .show-sidebar .useddevice_settings_item:nth-child(2), .show-sidebar .useddevice_settings_item:nth-child(3), .show-sidebar .useddevice_settings_item:nth-child(4), .show-sidebar .useddevice_settings_item:nth-child(5), .show-sidebar .useddevice_settings_item:nth-child(6), .show-sidebar .useddevice_settings_item:nth-child(7), .show-sidebar .useddevice_settings_item:nth-child(8) {
display: none;
}
.show-sidebar .useddevice_settings {
flex-wrap: wrap;
justify-content: flex-start;
}
.show-sidebar .accordion_filters {
display: block;
}
}
@media screen and (max-width: 1500px) {
.show-sidebar .useddevice_settings {
flex-wrap: wrap;
}
.show-sidebar .useddevice_list_search {
flex: 1 1 100%;
margin-top: 6px;
}
}
@media (max-width: 560px) {
.show-sidebar .list-mobil {
justify-content: center;
}
}
.show-sidebar .useddevice_settings {
padding-left: 0;
}
/* ===== admin-components/used-device/components/used-device-navbar/navbar-list/navbar-list.component.css (scoped) ===== */
app-navbar-list {
.useddevice_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.useddevice_settings_item {
height: 36px;
padding: 0 12px;
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.useddevice_settings_item:has(.dropdown-menu.show), .useddevice_settings_item:focus-within {
z-index: 1300;
}
.useddevice_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.useddevice_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.useddevice_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
.row_count_option {
background: transparent !important;
border: none;
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
outline: none;
padding: 7px 14px;
white-space: nowrap;
display: inline-block;
}
.useddevice-toolbar-dropdown--rowcount > .row_count_option, .useddevice-toolbar-dropdown--rowcount > .row_count_option_mobil {
padding-left: 8px;
padding-right: 8px;
}
.row_count_option:focus {
outline: none !important;
box-shadow: none !important;
}
.row_count_option::after {
margin-left: 6px !important;
}
.bulkButton {
background: transparent;
border: none;
color: var(--primary--body--color);
font-size: 13px;
padding: 0;
cursor: pointer;
white-space: nowrap;
}
.bulk-actions-item .bulkButton {
min-width: 122px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.bulkButton:focus, .bulkButton:active {
outline: none !important;
box-shadow: none !important;
}
.dropdown {
position: relative;
}
.nd-dropdown-menu {
padding: 6px;
min-width: 100%;
width: max-content;
left: 0;
top: calc(100% + 6px);
z-index: 1050 !important;
border: 1px solid
color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background-color: var(--body--background);
border-radius: 10px;
}
.nd-dropdown-menu[data-bs-popper] {
left: 0;
top: calc(100% + 6px);
margin-top: 0;
}
.useddevice-toolbar-dropdown {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.useddevice-toolbar-dropdown > .dropdown-toggle {
height: 100%;
display: inline-flex;
align-items: center;
}
.useddevice-toolbar-dropdown-menu {
min-width: calc(100% + 24px);
}
.useddevice-toolbar-dropdown-menu--rowcount {
min-width: calc(100% + 16px);
}
.useddevice-toolbar-dropdown-menu[data-bs-popper] {
left: -12px !important;
top: calc(100% + 6px) !important;
margin-top: 0 !important;
transform: none !important;
}
.useddevice-toolbar-dropdown-menu--rowcount[data-bs-popper] {
left: -8px !important;
}
.nd-dropdown-item {
list-style: none;
cursor: pointer;
padding: 0 !important;
}
.nd-dropdown-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
color: var(--primary--body--color);
font-size: 13px;
transition: background 0.18s ease, color 0.18s ease;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
}
.useddevice-toolbar-dropdown-menu .nd-dropdown-link {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
}
.useddevice-toolbar-dropdown-menu label.nd-dropdown-link {
margin-bottom: 0;
}
.nd-dropdown-item:hover > .nd-dropdown-link, .nd-dropdown-link:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.nd-dropdown-item:hover > .nd-dropdown-link, .nd-dropdown-link:hover i {
color: var(--sidebar--hover--color) !important;
}
.nd-dropdown-link i {
width: 20px;
min-width: 20px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.70;
font-size: 13px;
flex-shrink: 0;
}
.file-input-hidden {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.useddevice_list_search {
position: relative;
z-index: 0;
flex: 1;
min-width: 160px;
height: 36px;
}
.useddevice_list_search .fa-search {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 14px;
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
pointer-events: none;
}
.useddevice_list_search input {
width: 100%;
height: 36px;
border-radius: 8px;
padding-left: 36px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.useddevice_list_search input:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
box-shadow: var(--cart--box--shadow), 0 4px 12px color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.useddevice_list_search input::placeholder, .search-device::placeholder {
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.search-device {
color: var(--primary--body--color) !important;
}
.accordion_filters {
display: none;
position: relative;
z-index: 200;
}
.accordion-button:focus, .accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.bulk-actions-item {
position: relative;
z-index: 1100;
}
.bulk-actions-item .dropdown {
position: relative;
}
.bulk-actions-item:has(.dropdown-menu.show), .bulk-actions-item:focus-within {
z-index: 1200;
}
.accordion {
--bs-accordion-border-width: 0px;
}
.accordion-item {
background-color: var(--body--background);
border: var(--cart--border);
border-radius: 8px !important;
box-shadow: var(--cart--box--shadow);
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
font-size: 13px;
border-radius: 8px !important;
}
.accordion-button:not(.collapsed) {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
position: relative;
z-index: 200;
}
.accordion_settings {
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
margin-bottom: 6px;
padding: 0 12px;
}
.filter_item:has(.dropdown-menu.show), .accordion_settings:has(.dropdown-menu.show) {
position: relative;
z-index: 1400;
}
.accordion_settings:has(.dropdown) {
overflow: visible;
}
.accordion_settings:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.accordion_settings i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.accordion_settings span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
.row_count_option_mobil {
background: transparent;
color: var(--primary--body--color);
border: none;
font-size: 13px;
outline: none;
cursor: pointer;
padding: 7px 14px;
white-space: nowrap;
display: inline-block;
}
.row_count_option_mobil:focus {
outline: none !important;
box-shadow: none !important;
}
.row_count_option_mobil::after {
margin-left: 6px !important;
}
@media (max-width: 1150px) {
.useddevice_list_search {
flex-basis: 100%;
order: 10;
margin-top: 6px;
}
.accordion_filters {
display: block;
flex: 1;
min-width: 200px;
}
.useddevice_settings_item:nth-child(1), .useddevice_settings_item:nth-child(2), .useddevice_settings_item:nth-child(3), .useddevice_settings_item:nth-child(4), .useddevice_settings_item:nth-child(5), .useddevice_settings_item:nth-child(6), .useddevice_settings_item:nth-child(7), .useddevice_settings_item:nth-child(8) {
display: none;
}
.useddevice_settings {
flex-wrap: wrap;
justify-content: flex-start;
}
}
@media (max-width: 723px) {
.useddevice_settings {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 552px) {
.useddevice_settings {
flex-wrap: wrap;
justify-content: center;
}
.useddevice_list_search {
width: 100%;
}
.useddevice_settings_item span {
font-size: 12px;
}
}
@media only screen and (max-width: 544px) {
.useddevice_list_search {
width: 100%;
}
}
@media (max-width: 455px) {
.useddevice_list_search {
width: 100%;
}
.device_information span:nth-child(3) {
display: block;
}
}
@media (max-width: 440px) {
.useddevice_list_search {
width: 100%;
}
.useddevice_settings_item {
max-height: 55px;
}
.useddevice_settings_item span {
font-size: 12px;
}
}
@media (max-width: 330px) {
.useddevice_list_search {
width: 100%;
}
.device_information span:nth-child(2) {
display: block;
}
}
@media (max-width: 912px) {
.useddevice_list_search {
margin-top: 6px;
}
}
}
/* ===== admin-components/used-device/components/used-device-navbar/navbar-panel/navbar-panel.component.css (global) ===== */
.dark-theme .useddevice_settings_item, .darkBlue-theme .useddevice_settings_item {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.dark-theme .useddevice_panel_search input, .darkBlue-theme .useddevice_panel_search input {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 88%, white 5%),
var(--input--background));
}
.lightBlue-theme .useddevice_settings_item, .lightBlue-theme .useddevice_panel_search input {
border-color: color-mix(in srgb, #3fa4ac 30%, transparent);
}
.dark-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
.darkBlue-theme .accordion-button::after {
background-image: url("data:image/svg+xml,") !important;
}
@media (max-width: 956px) {
.show-sidebar .useddevice_settings_item:nth-child(1), .show-sidebar .useddevice_settings_item:nth-child(2), .show-sidebar .useddevice_settings_item:nth-child(3), .show-sidebar .useddevice_settings_item:nth-child(4), .show-sidebar .useddevice_settings_item:nth-child(5), .show-sidebar .useddevice_settings_item:nth-child(6) {
display: none;
}
.show-sidebar .useddevice_settings {
flex-wrap: wrap;
justify-content: flex-start;
}
.show-sidebar .accordion_filters {
display: block;
}
}
@media screen and (max-width: 1300px) {
.show-sidebar .useddevice_settings {
flex-wrap: wrap;
}
.show-sidebar .useddevice_panel_search {
flex: 1 1 100%;
margin-top: 6px;
}
}
@media screen and (max-width: 790px) {
.show-sidebar .filter_item {
width: 50% !important;
}
}
@media only screen and (max-width: 560px) {
.show-sidebar .filter_item {
width: 250px !important;
}
.show-sidebar .accordion_settings span {
font-size: 12px;
}
.show-sidebar .panel-mobil {
justify-content: center;
}
.show-sidebar .row_count_option, .show-sidebar .row_count_option_mobil, .show-sidebar .bulkButton {
font-size: 12px;
}
.show-sidebar .accordion_settings i {
font-size: 12px;
}
}
.show-sidebar .useddevice_settings {
padding-left: 0;
}
/* ===== admin-components/used-device/components/used-device-navbar/navbar-panel/navbar-panel.component.css (scoped) ===== */
app-navbar-panel {
.useddevice_settings {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
padding-left: 2px;
position: relative;
z-index: 100;
}
.useddevice_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 12px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.useddevice_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background)) !important;
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent) !important;
}
.bulk-actions-item {
position: relative;
z-index: 1100;
}
.bulk-actions-item .dropdown {
position: relative;
}
.bulk-actions-item:has(.dropdown-menu.show), .bulk-actions-item:focus-within {
z-index: 1200;
}
.useddevice_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.useddevice_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
}
.row_count_option {
background: transparent !important;
border: none;
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
outline: none;
padding: 7px 14px;
white-space: nowrap;
display: inline-block;
}
.useddevice-toolbar-dropdown--rowcount>.row_count_option, .useddevice-toolbar-dropdown--rowcount>.row_count_option_mobil {
padding-left: 8px;
padding-right: 8px;
}
.row_count_option:focus {
outline: none !important;
box-shadow: none !important;
}
.row_count_option::after {
margin-left: 6px !important;
}
.bulkButton {
background: transparent;
border: none;
color: var(--primary--body--color);
font-size: 12px;
padding: 0;
cursor: pointer;
white-space: nowrap;
}
.bulk-actions-item .bulkButton {
min-width: 118px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.bulkButton:focus, .bulkButton:active {
outline: none !important;
box-shadow: none !important;
}
.dropdown {
position: relative;
}
.nd-dropdown-menu {
padding: 6px;
min-width: 100%;
width: max-content;
left: 0;
top: calc(100% + 6px);
z-index: 1050 !important;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background-color: var(--body--background);
}
.nd-dropdown-menu[data-bs-popper] {
left: 0;
top: calc(100% + 6px);
margin-top: 0;
}
.useddevice-toolbar-dropdown {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.useddevice-toolbar-dropdown>.dropdown-toggle {
height: 100%;
display: inline-flex;
align-items: center;
}
.useddevice-toolbar-dropdown-menu {
min-width: calc(100% + 24px);
}
.useddevice-toolbar-dropdown-menu--rowcount {
min-width: calc(100% + 16px);
}
.useddevice-toolbar-dropdown-menu[data-bs-popper] {
left: -12px !important;
top: calc(100% + 6px) !important;
margin-top: 0 !important;
transform: none !important;
}
.useddevice-toolbar-dropdown-menu--rowcount[data-bs-popper] {
left: -8px !important;
}
.nd-dropdown-item {
list-style: none;
cursor: pointer;
padding: 0 !important;
}
.nd-dropdown-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
color: var(--primary--body--color);
font-size: 12px;
transition: background 0.18s ease, color 0.18s ease;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
}
.useddevice-toolbar-dropdown-menu .nd-dropdown-link {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
}
.useddevice-toolbar-dropdown-menu label.nd-dropdown-link {
color: var(--primary--body--color);
margin-bottom: 0;
}
.nd-dropdown-item:hover>.nd-dropdown-link, .nd-dropdown-link:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.nd-dropdown-item:hover>.nd-dropdown-link, .nd-dropdown-link:hover i {
color: var(--sidebar--hover--color) !important;
}
.nd-dropdown-link i {
width: 20px;
min-width: 20px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.70;
font-size: 13px;
flex-shrink: 0;
}
.file-input-hidden {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.useddevice_panel_search {
position: relative;
z-index: 1;
flex: 1;
min-width: 160px;
height: 36px;
}
.useddevice_panel_search .fa-search {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 14px;
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
pointer-events: none;
}
.useddevice_panel_search input {
width: 100%;
height: 36px;
border-radius: 8px;
padding-left: 36px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.useddevice_panel_search input:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
box-shadow: var(--cart--box--shadow), 0 4px 12px color-mix(in srgb, var(--secondary--color) 12%, transparent);
}
.useddevice_panel_search input::placeholder, .search-device::placeholder {
color: var(--primary--body--color);
opacity: var(--opacity--50);
}
.search-device {
color: var(--primary--body--color) !important;
}
.accordion_filters {
display: none;
position: relative;
z-index: 200;
}
.accordion-button:focus, .accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.accordion {
--bs-accordion-border-width: 0px;
}
.accordion-item {
background-color: var(--body--background);
border: var(--cart--border);
border-radius: 8px !important;
box-shadow: var(--cart--box--shadow);
}
.accordion-button {
background-color: var(--body--background);
color: var(--primary--body--color);
font-size: 13px;
border-radius: 8px !important;
}
.accordion-button:not(.collapsed) {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
}
.accordion-body {
background-color: var(--body--background);
color: var(--primary--body--color);
position: relative;
z-index: 200;
}
.accordion_settings {
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
margin-bottom: 6px;
padding: 0 12px;
}
.filter_item:has(.dropdown-menu.show), .accordion_settings:has(.dropdown-menu.show) {
position: relative;
z-index: 1400;
}
.accordion_settings:has(.dropdown) {
overflow: visible;
}
.accordion_settings:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.accordion_settings i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.accordion_settings span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 12px;
}
.row_count_option_mobil {
background: transparent;
color: var(--primary--body--color);
border: none;
font-size: 12px;
outline: none;
cursor: pointer;
padding: 7px 14px;
white-space: nowrap;
display: inline-block;
}
.row_count_option_mobil:focus {
outline: none !important;
box-shadow: none !important;
}
.row_count_option_mobil::after {
margin-left: 6px !important;
}
@media (max-width: 1050px) {
.useddevice_panel_search {
flex-basis: 100%;
order: 10;
margin-top: 6px;
}
.accordion_filters {
display: block;
flex: 1;
min-width: 200px;
}
.useddevice_settings_item:nth-child(1), .useddevice_settings_item:nth-child(2), .useddevice_settings_item:nth-child(3), .useddevice_settings_item:nth-child(4), .useddevice_settings_item:nth-child(5), .useddevice_settings_item:nth-child(6) {
display: none;
}
.useddevice_settings {
flex-wrap: wrap;
justify-content: flex-start;
}
}
@media (max-width: 552px) {
.useddevice_settings {
flex-wrap: wrap;
justify-content: center;
}
.useddevice_panel_search {
width: 100%;
}
.useddevice_settings_item span {
font-size: 12px;
}
}
@media only screen and (max-width: 560px) {
.useddevice_panel_search {
width: 100%;
}
}
@media (max-width: 455px) {
.useddevice_panel_search {
width: 100%;
}
.device_information span:nth-child(3) {
display: block;
}
}
@media (max-width: 330px) {
.useddevice_panel_search {
width: 100%;
}
.device_information span:nth-child(2) {
display: block;
}
}
}
/* ===== admin-components/used-device/used-device.component.css (global) ===== */
.lightBlue-theme .table-multiple-device tr {
border-color: inherit !important;
border-style: solid !important;
border-width: 0 !important;
}
.darkBlue-theme .table-multiple-device tr {
border-style: hidden !important;
}
.darkBlue-theme .table-multiple-device th {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: 0px 0px 5px #31354a80;
}
.lightBlue-theme .table-multiple-device td {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.15);
}
.dark-theme :is(#bulkActionsModal, #exportDevicesModal) .modal-content, .darkBlue-theme :is(#bulkActionsModal, #exportDevicesModal) .modal-content {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 90%, white 5%),
var(--body--background)) !important;
border: none !important;
box-shadow: 0 22px 62px rgba(0, 0, 0, 0.42) !important;
}
.dark-theme :is(#bulkActionsModal, #exportDevicesModal) .modal-header, .darkBlue-theme :is(#bulkActionsModal, #exportDevicesModal) .modal-header {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 82%, white 5%),
var(--body--background));
}
.dark-theme :is(#bulkActionsModal, #exportDevicesModal) .custom-scroll, .darkBlue-theme :is(#bulkActionsModal, #exportDevicesModal) .custom-scroll {
border: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}
.dark-theme :is(#bulkActionsModal, #exportDevicesModal) .multiple-device-input, .darkBlue-theme :is(#bulkActionsModal, #exportDevicesModal) .multiple-device-input {
border: none !important;
}
.lightBlue-theme :is(#bulkActionsModal, #exportDevicesModal) .modal-content {
border: none !important;
background: linear-gradient(180deg, #f4f8fa, #fafafa) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1) !important;
}
.lightBlue-theme :is(#bulkActionsModal, #exportDevicesModal) .modal-header {
background: linear-gradient(180deg, #f0f6f8, #fafafa);
}
.lightBlue-theme :is(#bulkActionsModal, #exportDevicesModal) .multiple-device-input {
border: none !important;
background-color: #ffffff !important;
}
/* ===== admin-components/used-device/used-device.component.css (scoped) ===== */
app-used-device {
.modal-content {
background-color: var(--body--background) !important;
height: auto;
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow) !important;
border-radius: var(--cart--border--radius) !important;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.table-multiple-device tr {
border: var(--cart--border);
}
.table-multiple-device tr th {
border-right: var(--cart--border);
}
table th, tr, td {
font-size: 12px !important;
}
.table-multiple-device td, th {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: var(--table--box--shadow) !important;
border: var(--cart--border);
}
th {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.15);
}
.custom-scroll {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
box-shadow: var(--table--box--shadow);
}
.custom-scroll::-webkit-scrollbar {
height: 8px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}
.has-search .form-control {
padding-left: 2.375rem;
}
.has-search .form-control-feedback-device {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: var(--primary--body--color);
}
.multiple-device-input {
height: 36px;
border-radius: var(--cart--border--radius);
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border) !important;
box-shadow: var(--cart--box--shadow);
}
.multiple-device-input::placeholder {
color: var(--primary--body--color);
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-content {
background: linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 94%, white 6%),
var(--body--background)) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 14px !important;
box-shadow: var(--cart--box--shadow), 0 18px 54px rgba(0, 0, 0, 0.16) !important;
overflow: hidden;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-header {
padding: 12px 16px !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
box-shadow: none;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 !important;
font-size: 15px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-title::before {
content: "\f0ae";
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-family: "Font Awesome 6 Free";
font-size: 13px;
font-weight: 900;
flex-shrink: 0;
}
:is(#bulkActionsModal, #exportDevicesModal) .close_btn {
width: 30px;
height: 30px;
margin: 0;
border: none;
background-color: transparent;
color: var(--primary--body--color) !important;
opacity: 1 !important;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s ease;
}
:is(#bulkActionsModal, #exportDevicesModal) .close_btn:hover {
transform: translateY(-1px);
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-body {
padding: 12px 16px;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-body > ng-container, :is(#bulkActionsModal, #exportDevicesModal) .modal-body .row {
min-width: 0;
}
:is(#bulkActionsModal, #exportDevicesModal) .has-search {
position: relative;
}
:is(#bulkActionsModal, #exportDevicesModal) .form-control-feedback-device {
left: 0;
top: 0;
opacity: 0.45;
}
:is(#bulkActionsModal, #exportDevicesModal) .multiple-device-input {
height: 36px;
border-radius: 8px !important;
background-color: var(--input--background);
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
box-shadow: var(--cart--box--shadow);
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
:is(#bulkActionsModal, #exportDevicesModal) .multiple-device-input:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
:is(#bulkActionsModal, #exportDevicesModal) .mt-3.mb-1 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-select-devices-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 30px;
padding: 6px 11px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 24%, transparent);
border-radius: 8px !important;
background-color: color-mix(in srgb, var(--secondary--color) 10%, var(--body--background));
color: var(--primary--body--color);
box-shadow: none;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-select-devices-btn:hover {
border-color: color-mix(in srgb, var(--secondary--color) 42%, transparent);
background-color: color-mix(in srgb, var(--secondary--color) 16%, var(--body--background));
transform: translateY(-1px);
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-select-devices-btn i {
font-size: 11px;
color: var(--secondary--color);
}
:is(#bulkActionsModal, #exportDevicesModal) .custom-scroll {
overflow-x: auto;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 12px;
box-shadow: var(--cart--box--shadow);
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 5%, transparent), transparent 36%),
color-mix(in srgb, var(--body--background) 92%, var(--input--background) 8%);
}
:is(#bulkActionsModal, #exportDevicesModal) .table-multiple-device {
border-collapse: separate;
border-spacing: 0;
margin: 0;
min-width: 760px;
}
:is(#bulkActionsModal, #exportDevicesModal) .table-multiple-device thead th {
position: sticky;
top: 0;
z-index: 1;
background: color-mix(in srgb, var(--input--background) 78%, var(--body--background)) !important;
color: var(--primary--body--color);
font-size: 11.5px !important;
font-weight: 700;
opacity: 0.85;
padding: 9px 12px !important;
border: none !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent) !important;
box-shadow: none !important;
white-space: nowrap;
}
:is(#bulkActionsModal, #exportDevicesModal) .table-multiple-device tbody td, :is(#bulkActionsModal, #exportDevicesModal) .table-multiple-device tfoot td {
background: transparent !important;
color: var(--primary--body--color);
font-size: 12.5px !important;
padding: 9px 12px !important;
border: none !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent) !important;
box-shadow: none !important;
vertical-align: middle;
}
:is(#bulkActionsModal, #exportDevicesModal) .table-multiple-device tbody tr {
border: none;
transition: background-color 0.14s ease;
}
:is(#bulkActionsModal, #exportDevicesModal) .table-multiple-device tbody tr:hover {
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
}
:is(#bulkActionsModal, #exportDevicesModal) .table-multiple-device tbody tr:last-child td {
border-bottom: none !important;
}
:is(#bulkActionsModal, #exportDevicesModal) .table-multiple-device tfoot td {
background: color-mix(in srgb, var(--secondary--color) 8%, transparent) !important;
font-weight: 700;
border-top: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent) !important;
}
:is(#bulkActionsModal, #exportDevicesModal) .table-multiple-device img {
width: 26px !important;
height: 26px;
object-fit: contain;
margin-right: 8px;
border-radius: 6px;
background-color: color-mix(in srgb, var(--input--background) 70%, transparent);
}
:is(#bulkActionsModal, #exportDevicesModal) input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--secondary--color);
cursor: pointer;
}
:is(#bulkActionsModal, #exportDevicesModal) .d-flex:has(> input[type="checkbox"]) {
align-items: center;
color: var(--primary--body--color);
opacity: 0.85;
font-size: 12px;
}
:is(#bulkActionsModal, #exportDevicesModal) .fa-exclamation {
color: #e74c3c !important;
}
:is(#bulkActionsModal, #exportDevicesModal) .pagination-bar {
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
}
:is(#bulkActionsModal, #exportDevicesModal) .pagination-bar span {
font-size: 12px;
color: var(--primary--body--color);
opacity: 0.65;
}
:is(#bulkActionsModal, #exportDevicesModal) .pagination {
margin: 0;
gap: 2px;
}
:is(#bulkActionsModal, #exportDevicesModal) .page-link {
background-color: var(--input--background);
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 4px !important;
font-size: 12px;
padding: 4px 9px;
min-width: 30px;
text-align: center;
line-height: 1.5;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
:is(#bulkActionsModal, #exportDevicesModal) .page-link:hover {
background-color: color-mix(in srgb, var(--secondary--color) 14%, var(--input--background));
color: var(--primary--body--color);
border-color: color-mix(in srgb, var(--secondary--color) 35%, transparent);
}
:is(#bulkActionsModal, #exportDevicesModal) .page-item.active .page-link {
background-color: var(--secondary--color);
color: var(--day--remain--color);
border-color: var(--secondary--color);
font-weight: 600;
}
:is(#bulkActionsModal, #exportDevicesModal) .page-item.active .page-link:hover {
background-color: var(--secondary--color);
color: var(--day--remain--color);
}
:is(#bulkActionsModal, #exportDevicesModal) .page-item.disabled .page-link {
background-color: var(--input--background);
color: color-mix(in srgb, var(--primary--body--color) 35%, transparent);
border-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
cursor: not-allowed;
pointer-events: none;
}
:is(#bulkActionsModal, #exportDevicesModal) .pagination > .page-item:first-child .page-link, :is(#bulkActionsModal, #exportDevicesModal) .pagination > .page-item:nth-child(2) .page-link, :is(#bulkActionsModal, #exportDevicesModal) .pagination > .page-item:nth-last-child(2) .page-link, :is(#bulkActionsModal, #exportDevicesModal) .pagination > .page-item:last-child .page-link {
font-size: 16px;
line-height: 1;
padding: 4px 10px;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-footer {
padding: 10px 16px 12px;
border-top: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
background: color-mix(in srgb, var(--body--background) 96%, var(--input--background) 4%);
gap: 10px;
flex-wrap: wrap;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-footer > div {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-footer .confirm_button, :is(#bulkActionsModal, #exportDevicesModal) .modal-footer .cancel_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px !important;
margin: 0 !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-footer .confirm_button:hover, :is(#bulkActionsModal, #exportDevicesModal) .modal-footer .cancel_button:hover {
transform: translateY(-1px);
}
:is(#bulkActionsModal, #exportDevicesModal) .spinner-border {
color: var(--secondary--color);
}
:is(#bulkActionsModal, #exportDevicesModal) .d-flex.justify-content-center.flex-column.align-items-center {
min-height: 220px;
gap: 10px;
color: var(--primary--body--color);
}
@media only screen and (max-width: 768px) {
:is(#bulkActionsModal, #exportDevicesModal) .modal-footer {
justify-content: stretch !important;
}
:is(#bulkActionsModal, #exportDevicesModal) .modal-footer > div, :is(#bulkActionsModal, #exportDevicesModal) .modal-footer button {
width: 100%;
}
}
}
/* ===== ag-grid/device-flag-level/device-flag-level.component.css (scoped) ===== */
app-device-flag-level {
.tooltipx {
}
.tooltipx .tooltiptextx {
visibility: hidden;
width: 100%;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right:-60%;
}
.tooltipx .tooltiptextx::after {
content: "";
position: absolute;
top: 100%;
right: 800%;
margin-top: -5px;
}
.tooltipx:hover .tooltiptextx {
visibility: visible;
}
}
/* ===== forgot-password/forgot-password.component.css (global) ===== */
@keyframes indeterminateAnimation {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
}
100% {
transform: translateX(100%) scaleX(0.5);
}
}
@keyframes bounce {
0% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
@-webkit-keyframes bounce {
0% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
/* ===== forgot-password/forgot-password.component.css (scoped) ===== */
app-forgot-password {
#auth-description {
font-weight: 300;
color: #fff;
}
.form-group input {
background: #e8f0fe !important;
height: 40px;
border-radius: 8px;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 15px;
transition: all .5s;
margin-bottom: 1.3rem;
color: black !important;
}
.form-group input:valid {
background-color: #010d19 !important;
color: #fff !important;
}
.auth-container .auth-header {
padding: 10px 30px;
}
.loading {
cursor: auto;
opacity: 0.5;
pointer-events: none;
}
.auth-title {
text-align: center;
}
.auth-body {
padding: 30px;
}
.sign-btn {
background-color: #800000;
height: 50px;
border-radius: 0;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 16px;
transition: all .5s;
margin-bottom: 1.3rem;
}
.sign-btn a {
color: #fff;
text-decoration: none;
}
.forgot-password-btn {
background-color: #000;
height: 50px;
border-radius: 0;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 16px;
transition: all .5s;
}
.forgot-password-btn a {
color: #fff;
text-decoration: none;
}
.auth-container .auth-header {
padding: 10px 30px;
}
.turn-back-btn {
background-color: #010d19;
height: 50px;
border-radius: 0;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;
font-size: 16px;
transition: all .5s;
}
.turn-back-btn a {
color: #fff;
text-decoration: none;
}
.process-bar-container {
position: absolute;
top: 50%;
width: 450px;
margin: auto;
left: 50%;
transform: translate(-50%, -50%);
}
.progress-bar {
height: 4px;
background-color: rgba(5, 114, 206, 0.2);
width: 100%;
overflow: hidden;
}
.progress-bar-value {
width: 100%;
height: 100%;
background-color: white;
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 50%;
}
header {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid #34495E;
}
h1, h3 {
margin: 10px;
}
.servers {
display: block;
}
.servers div span:nth-child(2) {
margin-left: 30px;
line-height: 35px;
}
.server-up {
display: block;
height: 35px;
position: relative;
color: #2ECC71;
}
.server-slow {
display: block;
height: 35px;
position: relative;
color: #F1C40F;
}
.server-down {
display: block;
height: 35px;
position: relative;
color: #E74C3C;
}
.server-status {
left: 10px;
top: 50%;
margin-left: 0px;
margin-top: -5px;
position: absolute;
vertical-align: middle;
width: 10px;
height: 10px;
border-radius: 50%;
}
.server-status::before, .server-status::after {
left: 0;
top: 50%;
margin-left: -1px;
margin-top: -6px;
position: absolute;
vertical-align: middle;
width: 12px;
height: 12px;
border-radius: 50%;
}
.server-status[type="up"], .server-status[type="up"]::before, .server-status[type="up"]::after {
background: #2ECC71;
}
.server-status[type="down"], .server-status[type="down"]::before, .server-status[type="down"]::after {
background: #E74C3C;
}
.server-status[type="slow"], .server-status[type="slow"]::before, .server-status[type="slow"]::after {
background: #F1C40F;
}
.server-status::before {
content: "";
animation: bounce 1.5s infinite;
}
.server-status::after {
content: "";
animation: bounce 1.5s -0.4s infinite;
}
#particles-js {
width: 100%;
height: 100%;
background-color: #040d21;
background-image: radial-gradient(circle,
#051937,
#001d2e,
#001c1e,
#081a12,
#14160f);
background-repeat: no-repeat;
background-attachment: absolute;
background-position: 50% 50%;
}
}
/* ===== license-agreement/license-agreement.component.css (scoped) ===== */
app-license-agreement {
.agreement-back-bar {
padding: 16px 10%;
padding-bottom: 0;
}
h1 {
text-align: center;
margin: 30px 0;
}
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 20%, transparent);
text-align: left;
}
tr, th, td {
color: var(--primary--body--color);
}
th {
background-color: var(--input--background);
}
.header {
color: var(--primary--body--color);
}
}
/* ===== license/license.component.css (scoped) ===== */
app-license {
.mat-icon {
-webkit-user-select: none;
-moz-user-select: none;
transform: translateY(4px);
user-select: none;
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
label#file-label {
width: 100%;
line-height: 2.5em;
text-align: left;
color: black;
background: white;
border-radius: 5px;
text-indent: 4px;
}
label#file-label:hover {
cursor: pointer;
}
input#apply {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
input#apply-second {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
textarea {
font-weight: 400;
color: white;
}
textarea:focus {
font-weight: 400;
color: white;
}
}
/* ===== setting-components/correlation-filter-seperators/add-correlation-column/add-correlation-column.component.css (global) ===== */
.dark-theme .extractor-number {
opacity: .8 !important;
color: white !important;
}
.darkBlue-theme .extractor-number {
opacity: .8 !important;
color: white !important;
}
.dark-theme .btn-add-extractor {
color: white !important;
opacity: .6 !important;
}
.darkBlue-theme .btn-add-extractor {
color: white !important;
opacity: .8 !important;
}
.dark-theme .content-add-correlation-column .brand-name, .dark-theme .content-add-correlation-column .brand-name a, .dark-theme .content-add-correlation-column .brand-name span, .dark-theme .content-add-correlation-column .theme-select-item, .dark-theme .content-add-correlation-column .theme-select-item button, .darkBlue-theme .content-add-correlation-column .brand-name, .darkBlue-theme .content-add-correlation-column .brand-name a, .darkBlue-theme .content-add-correlation-column .brand-name span, .darkBlue-theme .content-add-correlation-column .theme-select-item, .darkBlue-theme .content-add-correlation-column .theme-select-item button {
color: #fff !important;
opacity: 0.86 !important;
}
.dark-theme .content-add-correlation-column .new_input_add_correlation_column, .dark-theme .content-add-correlation-column .description_area_add_device_column, .dark-theme .content-add-correlation-column .select-device-brand-edit-device, .dark-theme .content-add-correlation-column .choose_select_add_correlation_column, .dark-theme .content-add-correlation-column .device-search, .dark-theme .content-add-correlation-column .nd-search-input, .dark-theme .content-add-correlation-column .device-brand-menu, .dark-theme .content-add-correlation-column .theme-select-menu, .dark-theme .content-add-correlation-column .nd-dropdown-menu {
border: none !important;
}
.dark-theme .new_input_add_correlation_column {
border: none;
box-shadow: none;
background-color: var(--input--background) !important;
}
/* ===== setting-components/correlation-filter-seperators/add-correlation-column/add-correlation-column.component.css (scoped) ===== */
app-add-correlation-column {
.modal-content {
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 700;
font-size: 14px;
}
.new_input_add_correlation_column {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_add_correlation_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.new_input_add_correlation_column::placeholder {
color: var(--primary--body--color);
}
.choose_select_add_correlation_column {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_add_correlation_column:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.choose_select_add_correlation_column {
background-position: right 1.3rem center, center right 2.25rem !important;
}
.theme-select-dropdown {
width: 100%;
}
.theme-select-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-right: 2.2rem;
text-align: left;
font-family: inherit;
}
.theme-select-toggle::after {
margin-left: auto;
border-top-color: currentColor;
}
.theme-select-toggle:focus, .theme-select-toggle:active {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.theme-select-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.theme-select-menu {
width: 100%;
min-width: 100%;
padding: 6px;
background: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 10px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
font-family: inherit;
}
.theme-select-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
color: var(--primary--sidebar--color);
font-size: 13px;
opacity: 0.80;
transition: background 0.18s ease, color 0.18s ease;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
background: transparent;
border: none;
font-family: inherit;
font-weight: 600;
}
.theme-select-item:hover, .theme-select-item:focus, .theme-select-item.is-selected {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.filter-button-add-device-column {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
}
.filter-button-add-device-column:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button-add-device-column:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area_add_device_column {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
}
.description_area_add_device_column::placeholder {
color: var(--primary--body--color);
}
.filter-clear-button-logs {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-logs:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-logs:focus {
border: none;
outline: none;
box-shadow: none;
}
.modal-header {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 14px 20px;
}
.modal-footer {
border-top: none;
}
.oriana-button-add-device-column {
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
border-radius: 8px;
height: 36px;
padding: 7px 30px;
font-size: 13px;
font-weight: 600;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.oriana-button-add-device-column:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.oriana-button-add-device-column:active {
transform: translateY(0);
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.brand-name {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
color: var(--primary--sidebar--color);
font-size: 13px;
opacity: 0.80;
transition: background 0.18s ease, color 0.18s ease;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
border: none;
background: transparent;
}
.brand-name:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.brand-name-span {
margin-left: 0;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.select-device-brand-edit-device:disabled {
cursor: not-allowed;
opacity: 0.55;
background-color: var(--input--background);
color: var(--primary--body--color);
box-shadow: none;
}
.select-device-brand-edit-device:disabled:hover {
background-color: var(--input--background);
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.device-button-select::after {
content: none;
}
.device-button-select {
height: 36px;
text-align: left;
}
.content-add-device-parser {
overflow: visible !important;
}
.device-search {
height: 35px;
text-indent: 25px;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
}
.device-search:active {
outline: none;
}
.device-search:focus {
outline: none;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-column {
max-height: 375px;
overflow: auto;
}
.correlation-column-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.correlation-column-card {
background: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
overflow: hidden;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease,
background-color 0.25s ease;
padding: 5px 16px;
overflow: visible;
}
.correlation-column-card.is-open-card {
box-shadow: var(--cart--box--shadow);
padding: 10px;
}
.correlation-column-header {
min-height: 56px;
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.25s ease;
}
.correlation-column-header .btn, .correlation-column-header button, .correlation-column-header span, .correlation-column-header i {
color: var(--primary--body--color) !important;
}
.column-chevron {
display: inline-block;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.correlation-column-body {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 0.35s ease,
opacity 0.25s ease;
}
.correlation-column-body>.row {
overflow: hidden;
padding: 0 16px;
transition: padding 0.35s ease;
}
.correlation-column-body.is-open {
grid-template-rows: 1fr;
opacity: 1;
}
.extractor-toggle {
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
color: var(--primary--body--color);
}
.correlation-column-card .form-control, .correlation-column-card .form-select, .correlation-column-card textarea {
background: var(--body--background);
color: var(--primary--body--color);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: none;
font-size: 13px;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background-color 0.25s ease,
color 0.25s ease;
}
.correlation-column-card .form-control:focus, .correlation-column-card .form-select:focus, .correlation-column-card textarea:focus {
background: var(--body--background);
color: var(--primary--body--color);
box-shadow: var(--cart--box--shadow);
outline: none;
}
.correlation-column-card .form-check-input {
transition: all 0.2s ease;
}
.correlation-column-card .form-check-label, .correlation-column-card label, .correlation-column-card .label-header {
color: var(--primary--body--color);
}
.correlation-column-card .btn-danger, .correlation-column-card .btn-primary, .correlation-column-card .btn-success, .correlation-column-card .btn-light, .correlation-column-card .btn-link {
transition:
transform 0.2s ease,
opacity 0.2s ease,
box-shadow 0.2s ease;
}
.correlation-column-card .btn-danger:hover, .correlation-column-card .btn-primary:hover, .correlation-column-card .btn-success:hover, .correlation-column-card .btn-light:hover, .correlation-column-card .btn-link:hover {
transform: translateY(-1px);
}
.cdk-drag-preview {
background: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
overflow: hidden;
}
.cdk-drag-placeholder {
opacity: 0.22;
}
.cdk-drag-animating {
transition: transform 250ms ease;
}
.correlation-column-list.cdk-drop-list-dragging .correlation-column-card:not(.cdk-drag-placeholder) {
transition: transform 250ms ease;
}
.cdk-drag-handle {
background-color: transparent !important;
border: none !important;
}
.index-button {
font-size: 12px;
font-weight: 600;
color: var(--secondary--color) !important;
background: rgba(107, 124, 255, 0.1);
padding: 4px 12px;
border-radius: 12px;
}
.index-button:focus {
background: rgba(107, 124, 255, 0.1);
}
.index-button:active {
background: rgba(107, 124, 255, 0.1);
}
.extractor-header:active .drag-icon {
cursor: grabbing;
}
.extractor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0px;
}
.extractor-header.is-open-header {
margin-bottom: 12px;
}
.btn-remove {
background: none;
border: none;
color: #dc3545;
cursor: pointer;
padding: 4px 8px;
transition: opacity 0.2s;
}
.btn-remove:hover {
opacity: 0.7;
}
.extractor-number {
font-size: 12px;
font-weight: 600;
color: var(--secondary--color);
background: rgba(107, 124, 255, 0.1);
padding: 4px 12px;
}
.nd-dropdown-menu {
width: 100%;
max-height: 260px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.nd-dropdown-menu::-webkit-scrollbar {
width: 4px;
}
.nd-dropdown-menu::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.nd-search-li {
position: relative;
padding: 4px 6px;
margin-bottom: 4px;
}
.nd-search-li:hover {
background-color: transparent !important;
}
.nd-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.4;
font-size: 11px;
pointer-events: none;
}
.nd-search-input {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 6px;
background-color: color-mix(in srgb, var(--input--background) 80%, transparent);
color: var(--primary--body--color);
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
}
.btn-add-extractor {
width: 100%;
padding: 12px;
background: var(--input--background);
border: 2px dashed var(--secondary--color);
border-radius: var(--cart--border--radius);
color: var(--secondary--color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-add-extractor:hover {
background: rgba(107, 124, 255, 0.1);
}
.tooltip {
position: relative;
display: inline-block;
opacity: 1 !important;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background-color: var(--secondary--color);
color: var(--day--remain--color);
text-align: center;
border-radius: 6px;
padding: 10px 0;
position: absolute;
z-index: 1;
bottom: 100%;
font-size: 13px;
left: 50%;
margin-left: -125px;
opacity: 0;
transition: opacity .3s;
transition: opacity .3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.form-invalid {
border: 1px solid #dc3545 !important;
}
.form-valid {
border: 1px solid green !important;
}
.select-device-brand-edit-device {
width: 100%;
text-align: left;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
background-color: var(--input--background);
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
opacity: 0.7;
}
.content-add-correlation-column {
overflow: visible !important;
}
.acc-header-add-correlation-column {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.acc-header-title-add-correlation-column {
display: flex;
align-items: center;
gap: 10px;
}
.acc-header-icon-add-correlation-column {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.acc-title-text-add-correlation-column {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.acc-widget-close-add-correlation-column {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.acc-widget-close-add-correlation-column:hover {
transform: translateY(-1px);
}
.acc-widget-close-add-correlation-column:focus, .acc-widget-close-add-correlation-column:active {
outline: none !important;
box-shadow: none !important;
}
.content-add-correlation-column .select_arrow::after {
pointer-events: none;
}
.correlation-column-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.correlation-column-action-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.correlation-column-action-btn:active {
transform: translateY(0);
}
.content-add-correlation-column .new_input_add_correlation_column, .content-add-correlation-column .select-device-brand-edit-device, .content-add-correlation-column .choose_select_add_correlation_column, .content-add-correlation-column .device-search, .content-add-correlation-column .nd-search-input {
height: 36px;
color: var(--primary--body--color) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background)) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 8px !important;
box-shadow: none !important;
font-size: 13px;
opacity: var(--opacity--80);
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.content-add-correlation-column .new_input_add_correlation_column:focus, .content-add-correlation-column .select-device-brand-edit-device:focus, .content-add-correlation-column .choose_select_add_correlation_column:focus, .content-add-correlation-column .device-search:focus, .content-add-correlation-column .nd-search-input:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent) !important;
}
.content-add-correlation-column .device-search, .content-add-correlation-column .nd-search-input {
padding-left: 34px;
text-indent: 0;
}
.content-add-correlation-column .device-search::placeholder, .content-add-correlation-column .nd-search-input::placeholder, .content-add-correlation-column .new_input_add_correlation_column::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
text-indent: 0;
}
.content-add-correlation-column .device-brand-menu, .content-add-correlation-column .theme-select-menu, .content-add-correlation-column .nd-dropdown-menu {
background: var(--body--background) !important;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent) !important;
border-radius: 10px !important;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent) !important;
color: var(--primary--body--color) !important;
}
.content-add-correlation-column .brand-name, .content-add-correlation-column .brand-name a, .content-add-correlation-column .brand-name span, .content-add-correlation-column .theme-select-item, .content-add-correlation-column .theme-select-item button, .content-add-correlation-column .nd-brand-item, .content-add-correlation-column .nd-brand-item button {
color: var(--primary--body--color) !important;
opacity: 0.9 !important;
}
.content-add-correlation-column .brand-name:hover, .content-add-correlation-column .theme-select-item:hover, .content-add-correlation-column .theme-select-item:focus, .content-add-correlation-column .theme-select-item.is-selected, .content-add-correlation-column .nd-brand-item:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1 !important;
border-radius: 5px;
}
.content-add-correlation-column .brand-name:hover a, .content-add-correlation-column .brand-name:hover span, .content-add-correlation-column .theme-select-item:hover button, .content-add-correlation-column .theme-select-item:focus button, .content-add-correlation-column .theme-select-item.is-selected button, .content-add-correlation-column .nd-brand-item:hover button {
color: var(--sidebar--hover--color) !important;
}
.content-add-correlation-column .device-search-li:hover, .content-add-correlation-column .nd-search-li:hover {
background: transparent !important;
color: inherit !important;
opacity: 1 !important;
}
.content-add-correlation-column .device-search-li:hover input, .content-add-correlation-column .nd-search-li:hover input, .content-add-correlation-column .device-search-li:hover i, .content-add-correlation-column .nd-search-li:hover i {
color: var(--primary--body--color) !important;
}
.content-add-correlation-column .brand-name img {
margin-right: 6px;
flex-shrink: 0;
}
.content-add-correlation-column .new_input_add_correlation_column, .content-add-correlation-column .select-device-brand-edit-device, .content-add-correlation-column .choose_select_add_correlation_column {
height: 36px;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
border-radius: 8px !important;
background: var(--input--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
box-shadow: var(--cart--box-shadow) !important;
font-size: 13px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.content-add-correlation-column .select-device-brand-edit-device, .content-add-correlation-column .choose_select_add_correlation_column {
display: flex;
align-items: center;
gap: 8px;
text-align: left;
padding-right: 34px;
}
.content-add-correlation-column .new_input_add_correlation_column:focus, .content-add-correlation-column .select-device-brand-edit-device:focus, .content-add-correlation-column .choose_select_add_correlation_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: var(--cart--box-shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent) !important;
}
.content-add-correlation-column .new_input_add_correlation_column::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.content-add-correlation-column .device-search, .content-add-correlation-column .nd-search-input {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent) !important;
border-radius: 6px !important;
background: color-mix(in srgb, var(--input--background) 80%, transparent) !important;
color: var(--primary--body--color) !important;
box-shadow: none !important;
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
}
.content-add-correlation-column .device-search:focus, .content-add-correlation-column .nd-search-input:focus {
border-color: color-mix(in srgb, var(--secondary--color) 50%, transparent) !important;
box-shadow: none !important;
}
.content-add-correlation-column .device-search::placeholder, .content-add-correlation-column .nd-search-input::placeholder {
color: var(--primary--body--color);
opacity: 0.4;
font-size: 12px;
}
.content-add-correlation-column .device-brand-menu, .content-add-correlation-column .theme-select-menu, .content-add-correlation-column .nd-dropdown-menu {
max-height: 240px;
overflow-y: auto;
background-color: var(--body--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent) !important;
border-radius: 10px !important;
box-shadow: var(--cart--box-shadow), 0 8px 24px rgba(0, 0, 0, 0.1) !important;
padding: 6px;
}
.dark-theme & .content-add-correlation-column input, .dark-theme & .content-add-correlation-column textarea, .dark-theme & .content-add-correlation-column .form-control, .dark-theme & .content-add-correlation-column .dropdown-toggle, .dark-theme & .content-add-correlation-column .dropdown-menu, .darkBlue-theme & .content-add-correlation-column input, .darkBlue-theme & .content-add-correlation-column textarea, .darkBlue-theme & .content-add-correlation-column .form-control, .darkBlue-theme & .content-add-correlation-column .dropdown-toggle, .darkBlue-theme & .content-add-correlation-column .dropdown-menu {
border: none !important;
}
.dark-theme & .content-add-correlation-column, .darkBlue-theme & .content-add-correlation-column {
border: none !important;
box-shadow: none !important;
}
.dark-theme & .content-add-correlation-column .device-brand-menu, .darkBlue-theme & .content-add-correlation-column .device-brand-menu {
border: 1px solid color-mix(in srgb, var(--secondary--color) 28%, white 8%) !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.device-brand-menu {
max-height: 330px;
overflow: auto;
scrollbar-gutter: stable;
}
}
/* ===== setting-components/correlation-filter-seperators/correlation-filter-seperators.component.css (global) ===== */
.brand-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
background: var(--input--background, #f0f0f0);
border: 1px solid rgba(0,0,0,0.08);
cursor: pointer;
}
.brand-toggle-btn i {
font-size: 11px;
color: var(--primary--body--color);
opacity: 0.7;
}
.brand-toggle-btn:hover {
background: var(--secondary--color, #1976d2);
border-color: var(--secondary--color, #1976d2);
}
.brand-toggle-btn:hover i {
color: #fff;
opacity: 1;
}
.brand-toggle-btn.expanded i {
transform: rotate(90deg);
}
.brand-toggle-inline {
width: 100%;
overflow: hidden;
}
.brand-parent-toggle-slot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.brand-toggle-inline-label {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.brand-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
border-radius: 10px;
background: var(--secondary--color, #1976d2);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 0 6px;
margin-left: auto;
flex-shrink: 0;
}
.ag-row.brand-parent-row {
border-left: 3px solid var(--secondary--color, #1976d2) !important;
font-weight: 600 !important;
}
.ag-row.brand-parent-odd, .ag-row.brand-parent-odd.ag-row-selected, .ag-row.brand-parent-odd.ag-row-focus {
background-color: var(--ag-odd-row-background-color) !important;
--ag-selected-row-background-color: var(--ag-odd-row-background-color) !important;
}
.ag-row.brand-parent-even, .ag-row.brand-parent-even.ag-row-selected, .ag-row.brand-parent-even.ag-row-focus {
background-color: var(--ag-background-color) !important;
--ag-selected-row-background-color: var(--ag-background-color) !important;
}
.ag-row.brand-parent-row .ag-cell {
cursor: default;
}
.ag-row.brand-parent-expanded {
background: rgba(0, 128, 0, 0.45) !important;
--ag-selected-row-background-color: rgba(0, 128, 0, 0.45);
}
.ag-row.brand-parent-expanded.ag-row-selected, .ag-row.brand-parent-expanded.ag-row-focus {
background: rgba(0, 128, 0, 0.45) !important;
--ag-selected-row-background-color: rgba(0, 128, 0, 0.45) !important;
}
.ag-row.brand-detail-row {
border-left: 3px solid rgba(25, 118, 210, 0.25) !important;
--ag-selected-row-background-color: transparent !important;
}
.ag-row.brand-detail-parent-odd, .ag-row.brand-detail-parent-odd.ag-row-selected, .ag-row.brand-detail-parent-odd.ag-row-focus {
background-color: var(--ag-odd-row-background-color) !important;
--ag-selected-row-background-color: var(--ag-odd-row-background-color) !important;
}
.ag-row.brand-detail-parent-even, .ag-row.brand-detail-parent-even.ag-row-selected, .ag-row.brand-detail-parent-even.ag-row-focus {
background-color: var(--ag-background-color) !important;
--ag-selected-row-background-color: var(--ag-background-color) !important;
}
/* ===== setting-components/correlation-filter-seperators/correlation-filter-seperators.component.css (scoped) ===== */
app-correlation-filter-seperators {
.correlation-toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.correlation-toolbar app-navbar {
flex: 1;
min-width: 0;
}
.collapse-all-fab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
margin-top: 1rem;
border-radius: 8px;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background: var(--body--background);
color: var(--primary--body--color);
cursor: pointer;
font-size: 13px;
font-weight: 600;
opacity: 0.92;
white-space: nowrap;
flex-shrink: 0;
}
.collapse-all-fab i {
font-size: 13px;
opacity: 0.7;
}
.collapse-all-fab:hover {
background: var(--secondary--color, #1976d2);
border-color: var(--secondary--color, #1976d2);
color: #fff;
opacity: 1;
}
.collapse-all-fab:hover i {
opacity: 1;
}
}
/* ===== setting-components/correlation-filter-seperators/edit-correlation-column/edit-correlation-column.component.css (global) ===== */
.dark-theme .content-edit-correlation-column .brand-name, .dark-theme .content-edit-correlation-column .brand-name a, .dark-theme .content-edit-correlation-column .brand-name span, .dark-theme .content-edit-correlation-column .theme-select-item, .dark-theme .content-edit-correlation-column .theme-select-item button, .darkBlue-theme .content-edit-correlation-column .brand-name, .darkBlue-theme .content-edit-correlation-column .brand-name a, .darkBlue-theme .content-edit-correlation-column .brand-name span, .darkBlue-theme .content-edit-correlation-column .theme-select-item, .darkBlue-theme .content-edit-correlation-column .theme-select-item button {
color: #fff !important;
opacity: 0.86 !important;
}
.dark-theme .content-edit-correlation-column .new_input_edit_correlation_column, .dark-theme .content-edit-correlation-column .description_area_edit_device_column, .dark-theme .content-edit-correlation-column .select-device-brand-edit-device, .dark-theme .content-edit-correlation-column .choose_select_edit_correlation_column, .dark-theme .content-edit-correlation-column .device-search, .dark-theme .content-edit-correlation-column .nd-search-input {
border: none !important;
}
/* ===== setting-components/correlation-filter-seperators/edit-correlation-column/edit-correlation-column.component.css (scoped) ===== */
app-edit-correlation-column {
.modal-content {
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 700;
font-size: 14px;
}
.new_input_edit_correlation_column {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_edit_correlation_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.new_input_edit_correlation_column::placeholder {
color: var(--primary--body--color);
}
.choose_select_edit_correlation_column {
background-position: right 1.3rem center, center right 2.25rem !important;
}
.choose_select_edit_correlation_column {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_edit_correlation_column:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.choose_select_edit_correlation_column:focus {
outline: none;
}
.choose_select_edit_correlation_column:active {
outline: none;
}
.theme-select-dropdown {
width: 100%;
}
.theme-select-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-right: 2.2rem;
text-align: left;
font-family: inherit;
}
.theme-select-toggle::after {
margin-left: auto;
border-top-color: currentColor;
}
.theme-select-toggle:focus, .theme-select-toggle:active {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.theme-select-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.theme-select-menu {
width: 100%;
min-width: 100%;
padding: 6px;
background: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 10px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
font-family: inherit;
}
.theme-select-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
color: var(--primary--sidebar--color);
font-size: 13px;
opacity: 0.80;
transition: background 0.18s ease, color 0.18s ease;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
background: transparent;
border: none;
font-family: inherit;
font-weight: 600;
}
.theme-select-item:hover, .theme-select-item:focus, .theme-select-item.is-selected {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.filter-button-edit-device-column {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
}
.filter-button-edit-device-column:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button-edit-device-column:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area_edit_device_column {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px;
box-shadow: none;
background-color: var(--input--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.description_area_edit_device_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
outline: none;
}
.description_area_edit_device_column::placeholder {
color: var(--primary--body--color);
}
.modal-header {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 14px 20px;
}
.modal-footer {
border-top: none;
}
.oriana-button-edit-device-column {
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
border-radius: 8px;
height: 36px;
padding: 7px 30px;
font-size: 13px;
font-weight: 600;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.oriana-button-edit-device-column:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.oriana-button-edit-device-column:active {
transform: translateY(0);
}
::-webkit-scrollbar-thumb {
background-color: var(--primary--body--color) !important;
border-radius: 5px !important;
}
.no-column {
text-align: center;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
padding: 10px;
margin-top: 1rem;
border-radius: var(--cart--border--radius);
}
.brand-image {
display: inline;
position: absolute;
width: 30px;
left: 5px;
top: 5px;
z-index: 99;
}
.select-device-brand-edit-device {
width: 100%;
text-align: left;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
box-shadow: none;
color: var(--primary--body--color);
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
height: 36px;
opacity: var(--opacity--80);
font-size: 12px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.select-device-brand-edit-device:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
opacity: 0.7;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.brand-name {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
color: var(--primary--sidebar--color);
font-size: 13px;
opacity: 0.80;
transition: background 0.18s ease, color 0.18s ease;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
border: none;
background: transparent;
}
.brand-name:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.brand-name-span {
margin-left: 0;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.select-device-brand-edit-device:disabled {
cursor: not-allowed;
opacity: 0.55;
background-color: var(--input--background);
color: var(--primary--body--color);
box-shadow: none;
}
.select-device-brand-edit-device:disabled:hover {
background-color: var(--input--background);
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
box-sizing: border-box;
color: var(--primary--sidebar--color);
font-size: 13px;
opacity: 0.80;
transition: background 0.18s ease, color 0.18s ease;
cursor: pointer;
justify-content: flex-start;
text-align: left;
text-decoration: none;
margin-bottom: 2px;
border: none;
background: transparent;
}
.brand-name:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1;
border-radius: 5px;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.device-button-select::after {
content: none;
}
.device-button-select {
height: 36px;
text-align: left;
}
.content-add-device-parser {
overflow: visible !important;
}
.device-search {
height: 35px;
text-indent: 25px;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
color: var(--primary--body--color);
}
.device-search:active {
outline: none;
}
.device-search:focus {
outline: none;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.nd-dropdown-menu {
width: 100%;
max-height: 260px;
overflow-y: auto;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px;
}
.nd-dropdown-menu::-webkit-scrollbar {
width: 4px;
}
.nd-dropdown-menu::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.nd-search-li {
position: relative;
padding: 4px 6px;
margin-bottom: 4px;
}
.nd-search-li:hover {
background-color: transparent !important;
}
.nd-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.4;
font-size: 11px;
pointer-events: none;
}
.nd-search-input {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 6px;
background-color: color-mix(in srgb, var(--input--background) 80%, transparent);
color: var(--primary--body--color);
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-column {
max-height: 375px;
overflow: auto;
}
.correlation-column-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.correlation-column-card {
background: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
overflow: hidden;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease,
background-color 0.25s ease;
padding: 5px 16px;
overflow: visible;
}
.correlation-column-card.is-open-card {
box-shadow: var(--cart--box--shadow);
padding: 10px;
}
.correlation-column-header {
min-height: 56px;
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.25s ease;
}
.correlation-column-header .btn, .correlation-column-header button, .correlation-column-header span, .correlation-column-header i {
color: var(--primary--body--color) !important;
}
.column-chevron {
display: inline-block;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.correlation-column-body {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 0.35s ease,
opacity 0.25s ease;
}
.correlation-column-body>.row {
overflow: hidden;
padding: 0 16px;
transition: padding 0.35s ease;
}
.correlation-column-body.is-open {
grid-template-rows: 1fr;
opacity: 1;
}
.content-edit-correlation-column {
overflow: visible !important;
}
.ecc-header-edit-correlation-column {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.ecc-header-title-edit-correlation-column {
display: flex;
align-items: center;
gap: 10px;
}
.ecc-header-icon-edit-correlation-column {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.ecc-title-text-edit-correlation-column {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.ecc-widget-close-edit-correlation-column {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.ecc-widget-close-edit-correlation-column:hover {
transform: translateY(-1px);
}
.ecc-widget-close-edit-correlation-column:focus, .ecc-widget-close-edit-correlation-column:active {
outline: none !important;
box-shadow: none !important;
}
.content-edit-correlation-column .select_arrow::after {
pointer-events: none;
}
.correlation-column-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.correlation-column-action-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.correlation-column-action-btn:active {
transform: translateY(0);
}
.content-edit-correlation-column .new_input_edit_correlation_column, .content-edit-correlation-column .description_area_edit_device_column, .content-edit-correlation-column .select-device-brand-edit-device, .content-edit-correlation-column .choose_select_edit_correlation_column, .content-edit-correlation-column .device-search, .content-edit-correlation-column .nd-search-input {
color: var(--primary--body--color) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background)) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 8px !important;
box-shadow: none !important;
font-size: 13px;
opacity: var(--opacity--80);
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.content-edit-correlation-column .new_input_edit_correlation_column, .content-edit-correlation-column .select-device-brand-edit-device, .content-edit-correlation-column .choose_select_edit_correlation_column, .content-edit-correlation-column .device-search, .content-edit-correlation-column .nd-search-input {
height: 36px;
}
.content-edit-correlation-column .new_input_edit_correlation_column:focus, .content-edit-correlation-column .description_area_edit_device_column:focus, .content-edit-correlation-column .select-device-brand-edit-device:focus, .content-edit-correlation-column .choose_select_edit_correlation_column:focus, .content-edit-correlation-column .device-search:focus, .content-edit-correlation-column .nd-search-input:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent) !important;
}
.content-edit-correlation-column .device-search, .content-edit-correlation-column .nd-search-input {
padding-left: 34px;
text-indent: 0;
}
.content-edit-correlation-column .device-search::placeholder, .content-edit-correlation-column .nd-search-input::placeholder, .content-edit-correlation-column .new_input_edit_correlation_column::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
text-indent: 0;
}
.content-edit-correlation-column .device-brand-menu, .content-edit-correlation-column .theme-select-menu, .content-edit-correlation-column .nd-dropdown-menu {
background: var(--body--background) !important;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent) !important;
border-radius: 10px !important;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent) !important;
color: var(--primary--body--color) !important;
}
.content-edit-correlation-column .device-brand-menu {
max-height: 240px !important;
overflow: auto !important;
scrollbar-gutter: stable;
}
.content-edit-correlation-column .brand-name, .content-edit-correlation-column .brand-name a, .content-edit-correlation-column .brand-name span, .content-edit-correlation-column .theme-select-item, .content-edit-correlation-column .theme-select-item button, .content-edit-correlation-column .nd-brand-item, .content-edit-correlation-column .nd-brand-item button {
color: var(--primary--body--color) !important;
opacity: 0.9 !important;
}
.content-edit-correlation-column .brand-name:hover, .content-edit-correlation-column .theme-select-item:hover, .content-edit-correlation-column .theme-select-item:focus, .content-edit-correlation-column .theme-select-item.is-selected, .content-edit-correlation-column .nd-brand-item:hover {
background-color: var(--secondary--color) !important;
color: var(--sidebar--hover--color) !important;
opacity: 1 !important;
border-radius: 5px;
}
.content-edit-correlation-column .brand-name:hover a, .content-edit-correlation-column .brand-name:hover span, .content-edit-correlation-column .theme-select-item:hover button, .content-edit-correlation-column .theme-select-item:focus button, .content-edit-correlation-column .theme-select-item.is-selected button, .content-edit-correlation-column .nd-brand-item:hover button {
color: var(--sidebar--hover--color) !important;
}
.content-edit-correlation-column .device-search-li:hover, .content-edit-correlation-column .nd-search-li:hover {
background: transparent !important;
color: inherit !important;
opacity: 1 !important;
}
.content-edit-correlation-column .device-search-li:hover input, .content-edit-correlation-column .nd-search-li:hover input, .content-edit-correlation-column .device-search-li:hover i, .content-edit-correlation-column .nd-search-li:hover i {
color: var(--primary--body--color) !important;
}
.content-edit-correlation-column .brand-name img {
margin-right: 6px;
flex-shrink: 0;
}
.content-edit-correlation-column .new_input_edit_correlation_column, .content-edit-correlation-column .description_area_edit_device_column, .content-edit-correlation-column .select-device-brand-edit-device, .content-edit-correlation-column .choose_select_edit_correlation_column {
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
border-radius: 8px !important;
background: var(--input--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
box-shadow: var(--cart--box-shadow) !important;
font-size: 13px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.content-edit-correlation-column .new_input_edit_correlation_column, .content-edit-correlation-column .select-device-brand-edit-device, .content-edit-correlation-column .choose_select_edit_correlation_column {
height: 36px;
}
.content-edit-correlation-column .select-device-brand-edit-device, .content-edit-correlation-column .choose_select_edit_correlation_column {
display: flex;
align-items: center;
gap: 8px;
text-align: left;
padding-right: 34px;
}
.content-edit-correlation-column .new_input_edit_correlation_column:focus, .content-edit-correlation-column .description_area_edit_device_column:focus, .content-edit-correlation-column .select-device-brand-edit-device:focus, .content-edit-correlation-column .choose_select_edit_correlation_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: var(--cart--box-shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent) !important;
}
.content-edit-correlation-column .new_input_edit_correlation_column::placeholder, .content-edit-correlation-column .description_area_edit_device_column::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.content-edit-correlation-column .device-search, .content-edit-correlation-column .nd-search-input {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent) !important;
border-radius: 6px !important;
background: color-mix(in srgb, var(--input--background) 80%, transparent) !important;
color: var(--primary--body--color) !important;
box-shadow: none !important;
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
}
.content-edit-correlation-column .device-search:focus, .content-edit-correlation-column .nd-search-input:focus {
border-color: color-mix(in srgb, var(--secondary--color) 50%, transparent) !important;
box-shadow: none !important;
}
.content-edit-correlation-column .device-search::placeholder, .content-edit-correlation-column .nd-search-input::placeholder {
color: var(--primary--body--color);
opacity: 0.4;
font-size: 12px;
}
.content-edit-correlation-column .device-brand-menu, .content-edit-correlation-column .theme-select-menu, .content-edit-correlation-column .nd-dropdown-menu {
max-height: 240px;
overflow-y: auto;
background-color: var(--body--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent) !important;
border-radius: 10px !important;
box-shadow: var(--cart--box-shadow), 0 8px 24px rgba(0, 0, 0, 0.1) !important;
padding: 6px;
}
.dark-theme & .content-edit-correlation-column input, .dark-theme & .content-edit-correlation-column textarea, .dark-theme & .content-edit-correlation-column .form-control, .dark-theme & .content-edit-correlation-column .dropdown-toggle, .dark-theme & .content-edit-correlation-column .dropdown-menu, .darkBlue-theme & .content-edit-correlation-column input, .darkBlue-theme & .content-edit-correlation-column textarea, .darkBlue-theme & .content-edit-correlation-column .form-control, .darkBlue-theme & .content-edit-correlation-column .dropdown-toggle, .darkBlue-theme & .content-edit-correlation-column .dropdown-menu {
border: none !important;
}
.dark-theme & .content-edit-correlation-column, .darkBlue-theme & .content-edit-correlation-column {
border: none !important;
box-shadow: none !important;
}
.dark-theme & .content-edit-correlation-column .device-brand-menu, .darkBlue-theme & .content-edit-correlation-column .device-brand-menu {
border: 1px solid color-mix(in srgb, var(--secondary--color) 28%, white 8%) !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}
}
/* ===== setting-components/correlation-filter-seperators/navbar/navbar.component.css (scoped) ===== */
app-navbar {
.image {
margin-top: 1rem;
width: 100%;
height: 100vh;
background-size: cover;
}
.data_taxonomies_settings_main {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 2px;
}
.data_taxonomies_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.data_taxonomies_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.data_taxonomies_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.data_taxonomies_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
.dropdown_filter {
background-color: var(--body--background) !important;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
margin: 10px !important;
}
.form-check-label {
color: var(--primary--body--color);
}
.form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.filter_button {
padding: 0px 5px !important;
}
.filter_button:focus {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button:active {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button::after {
color: var(--primary--body--color);
margin-left: .5rem;
}
}
/* ===== setting-components/customer-information/customer-information.component.css (global) ===== */
.darkBlue-theme .nd-ci-section {
border: none !important;
background: radial-gradient(circle at top right,
color-mix(in srgb, var(--secondary--color) 16%, transparent), transparent 44%), linear-gradient(180deg,
color-mix(in srgb, var(--body--background) 82%, var(--secondary--color) 8%),
color-mix(in srgb, var(--body--background) 94%, white 2%)) !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), inset 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 14px 32px rgba(0, 0, 0, 0.28) !important;
}
.nd-ci-select-btn {
width: 100%;
text-align: left;
display: flex !important;
align-items: center;
gap: 8px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent) !important;
border-radius: 8px !important;
background-color: var(--input--background) !important;
color: var(--primary--body--color) !important;
opacity: var(--opacity--80);
font-size: 13px;
cursor: pointer;
box-shadow: var(--cart--box--shadow);
padding: 0 12px !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
outline: none;
}
.nd-ci-select-btn::after {
margin-left: auto !important;
flex-shrink: 0;
}
.nd-ci-select-btn.show, .nd-ci-select-btn:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent) !important;
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-ci-dd-placeholder {
opacity: 0.45;
font-size: 12px;
}
.nd-ci-dropdown-menu {
width: 100%;
max-height: 260px;
overflow-y: auto;
background-color: var(--body--background) !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent) !important;
border-radius: 10px !important;
box-shadow: var(--cart--box--shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 6px !important;
}
.nd-ci-dropdown-menu::-webkit-scrollbar {
width: 4px;
}
.nd-ci-dropdown-menu::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--secondary--color) 40%, transparent);
border-radius: 999px;
}
.nd-ci-search-li {
position: relative;
padding: 4px 6px;
margin-bottom: 4px;
}
.nd-ci-search-li:hover {
background-color: transparent !important;
}
.nd-ci-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--primary--body--color);
opacity: 0.4;
font-size: 11px;
pointer-events: none;
}
.nd-ci-search-input {
height: 32px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 14%, transparent);
border-radius: 6px;
background-color: color-mix(in srgb, var(--input--background) 80%, transparent);
color: var(--primary--body--color);
font-size: 12px;
padding: 0 10px 0 28px;
outline: none;
transition: border-color 0.15s ease;
}
.nd-ci-search-input:focus {
border-color: color-mix(in srgb, var(--secondary--color) 50%, transparent);
}
.nd-ci-search-input::placeholder {
color: var(--primary--body--color);
opacity: 0.4;
}
.nd-ci-dropdown-item {
display: flex !important;
align-items: center;
padding: 7px 10px !important;
border-radius: 7px !important;
font-size: 12.5px;
color: var(--primary--body--color) !important;
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
margin-bottom: 2px;
}
.nd-ci-dropdown-item:hover {
background-color: var(--secondary--color) !important;
color: #fff !important;
}
/* ===== setting-components/customer-information/customer-information.component.css (scoped) ===== */
app-customer-information {
.nd-ci-page {
padding: 12px 28px;
}
.nd-ci-page-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.nd-ci-page-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.nd-ci-page-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.customer-info-btn {
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.customer-info-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.nd-ci-page-title {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.nd-ci-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.nd-ci-reveal-btn {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 15px;
transition: opacity 0.18s ease;
cursor: pointer;
}
.nd-ci-reveal-btn:hover {
opacity: 1;
}
.nd-ci-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.nd-ci-section {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 16%, transparent);
border-radius: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--secondary--color) 7%, transparent), transparent 40%),
color-mix(in srgb, var(--body--background) 90%, var(--input--background) 10%);
box-shadow: var(--cart--box--shadow);
}
.nd-ci-section__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
}
.nd-ci-section__head i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--primary--body--color);
font-size: 12px;
flex-shrink: 0;
}
.nd-ci-section__head span {
font-size: 13px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.88;
}
.nd-ci-fields-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.nd-field-ci {
display: flex;
flex-direction: column;
}
.nd-field-last-ci {
margin-bottom: 0 !important;
}
.nd-ci-full-span {
grid-column: 1 / -1;
}
.nd-ci-label {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--primary--body--color);
opacity: var(--opacity--80);
margin-bottom: 6px;
}
.nd-ci-input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-ci-input::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-ci-input:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-ci-select {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
font-size: 13px;
height: 36px;
box-shadow: var(--cart--box--shadow);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
cursor: pointer;
}
.nd-ci-select:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-ci-textarea {
color: var(--primary--body--color);
font-size: 13px;
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: var(--cart--box--shadow);
resize: vertical;
min-height: 80px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-ci-textarea::placeholder {
color: var(--primary--body--color);
opacity: 0.45;
font-size: 12px;
}
.nd-ci-textarea:focus {
outline: none;
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: var(--cart--box--shadow), 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.nd-ci-form-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px !important;
margin-bottom: 8px !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: var(--primary--body--color);
transition: background-color 5000s ease-in-out 0s;
font-size: 13px;
}
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
padding: 0px;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus, .close_btn:active {
outline: none !important;
}
.confirmPassword_input {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
background-position: right calc(0.375em + 0.4875rem) center !important;
height: 36px;
outline: none;
}
.confirmPassword_input::placeholder {
color: var(--primary--body--color);
}
.disabled {
pointer-events: none;
opacity: var(--opacity--50);
cursor: not-allowed;
}
@media (max-width: 768px) {
.nd-ci-fields-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.nd-ci-page {
padding: 12px 16px;
}
.nd-ci-fields-grid {
grid-template-columns: 1fr;
}
.nd-ci-full-span {
grid-column: 1;
}
}
}
/* ===== setting-components/device-column/add-device-column/add-device-column.component.css (global) ===== */
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .content-add-device-column {
box-shadow: none;
border: none;
}
/* ===== setting-components/device-column/add-device-column/add-device-column.component.css (scoped) ===== */
app-add-device-column {
.modal-content {
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 700;
font-size: 14px;
}
.new_input_add_device_column {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_add_device_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.new_input_add_device_column::placeholder {
color: var(--primary--body--color);
}
.choose_select_add_device_column {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_add_device_column:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.choose_select_add_device_column:focus {
outline: none;
}
.choose_select_add_device_column:active {
outline: none;
}
.filter-button-add-device-column {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
}
.filter-button-add-device-column:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button-add-device-column:focus {
border: none;
outline: none;
box-shadow: none;
}
.adc-column-row {
display: grid;
grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) minmax(150px, 1.25fr) 38px;
gap: 8px;
align-items: start;
margin-bottom: 8px;
}
.adc-column-row .filter-button-add-device-column {
min-width: 34px;
height: 36px;
padding: 0;
}
.device-column-regex-cell {
min-width: 0;
}
.device-column-regex-hint {
display: block;
margin-top: 4px;
color: #ff9d50;
font-size: 11px;
line-height: 1.25;
}
.device-column-regex-hint-row {
grid-column: 1 / -1;
width: 100%;
margin-top: -2px;
padding: 6px 8px;
border-left: 2px solid #ff9d50;
border-radius: 6px;
background-color: color-mix(in srgb, #ff9d50 10%, transparent);
}
.device-column-example {
border: 1px solid color-mix(in srgb, var(--secondary--color) 20%, transparent);
border-radius: 18px;
background: linear-gradient(145deg, color-mix(in srgb, var(--input--background) 94%, white 6%) 0%, color-mix(in srgb, var(--body--background) 96%, var(--secondary--color) 4%) 100%);
box-shadow: 0 14px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
overflow: hidden;
}
.device-column-example-head {
min-height: 34px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 16px 18px 14px;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent);
}
.device-column-example-title {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 800;
}
.device-column-example-title i {
color: #ff9d50;
font-size: 14px;
}
.device-column-example-subtitle {
margin: 6px 0 0;
color: color-mix(in srgb, var(--primary--body--color) 72%, transparent);
font-size: 12px;
line-height: 1.45;
}
.device-column-example-toggle {
width: 32px;
height: 32px;
flex: 0 0 auto;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 82%, white 18%);
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.device-column-example-toggle.is-open i {
transform: rotate(90deg);
}
.device-column-example-toggle i {
font-size: 11px;
transition: transform .2s ease;
}
.device-column-example-toggle:focus {
outline: none;
}
.device-column-example-toggle:hover {
border-color: color-mix(in srgb, var(--secondary--color) 42%, transparent);
box-shadow: 0 8px 18px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.device-column-example-body {
max-height: 0;
overflow: hidden;
opacity: 0;
border-top: 1px solid transparent;
padding: 0 18px;
display: grid;
gap: 14px;
transition: max-height .24s ease, opacity .18s ease, padding .24s ease, border-color .24s ease;
}
.device-column-example-body.is-open {
max-height: 520px;
opacity: 1;
border-top-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
padding: 0 18px 18px;
}
.device-column-example-intro {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 76%, transparent);
font-size: 12px;
line-height: 1.45;
}
.device-column-example-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
padding: 4px 8px;
border-radius: 999px;
background-color: color-mix(in srgb, #ff9d50 16%, transparent);
color: #ff9d50;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.device-column-example-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.device-column-example-item {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
border-radius: 14px;
background-color: color-mix(in srgb, var(--input--background) 84%, white 16%);
color: var(--primary--body--color);
font-size: 12px;
line-height: 1.45;
}
.device-column-example-item strong {
color: #ff9d50;
font-size: 13px;
}
.device-column-example-badge {
display: inline-flex;
width: max-content;
padding: 4px 9px;
border-radius: 999px;
background-color: color-mix(in srgb, #ff9d50 14%, transparent);
color: #ff9d50;
font-size: 11px;
font-weight: 800;
}
.device-column-example-badge-muted {
background-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 74%, transparent);
}
.device-column-example-row {
display: grid;
grid-template-columns: 62px 1fr;
gap: 10px;
align-items: start;
}
.device-column-example-row-result {
margin-top: 2px;
padding-top: 10px;
border-top: 1px dashed color-mix(in srgb, var(--secondary--color) 22%, transparent);
}
.device-column-example-label {
color: color-mix(in srgb, var(--primary--body--color) 56%, transparent);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.device-column-example-value {
font-family: 'Consolas', 'Courier New', monospace;
font-size: 12px;
line-height: 1.45;
word-break: break-word;
}
@media (max-width: 768px) {
.device-column-example-head {
padding: 14px;
}
.device-column-example-intro {
align-items: flex-start;
flex-direction: column;
}
.device-column-example-grid {
grid-template-columns: 1fr;
}
.device-column-example-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
.description_area_add_device_column {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px;
box-shadow: none;
background-color: var(--input--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.description_area_add_device_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
outline: none;
}
.description_area_add_device_column::placeholder {
color: var(--primary--body--color);
}
.filter-clear-button-logs {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-logs:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-logs:focus {
border: none;
outline: none;
box-shadow: none;
}
.modal-header {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 14px 20px;
}
.adc-header-add-column {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.adc-header-title-add-column {
display: flex;
align-items: center;
gap: 10px;
}
.adc-header-icon-add-column {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.adc-title-text-add-column {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.adc-widget-close-add-column {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.adc-widget-close-add-column:hover {
transform: translateY(-1px);
}
.adc-widget-close-add-column:focus, .adc-widget-close-add-column:active {
outline: none !important;
box-shadow: none !important;
}
.modal-footer {
border-top: none;
}
.oriana-button-add-device-column {
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
border-radius: 8px;
height: 36px;
padding: 7px 30px;
font-size: 13px;
font-weight: 600;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.oriana-button-add-device-column:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)), var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.oriana-button-add-device-column:active {
transform: translateY(0);
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
min-height: 35px;
}
.device-button-select::after {
content: none;
}
.device-button-select {
height: 36px;
text-align: left;
}
.new-input-div {
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.model-input-disabled {
opacity: .5 !important;
}
.content-add-device-parser {
overflow: visible !important;
}
.content-add-device-column {
overflow: visible !important;
}
.add-device-column-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.add-device-column-action-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.add-device-column-action-btn:active {
transform: translateY(0);
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-column {
max-height: 375px;
overflow: auto;
}
}
/* ===== setting-components/device-column/copy-device-column/copy-device-column.component.css (global) ===== */
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
/* ===== setting-components/device-column/copy-device-column/copy-device-column.component.css (scoped) ===== */
app-copy-device-column {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input_copy_device_column {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
}
.new_input_copy_device_column::placeholder {
color: var(--primary--body--color);
}
.choose_select_copy_device_column {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
}
.choose_select_copy_device_column:focus {
outline: none;
}
.choose_select_copy_device_column:active {
outline: none;
}
.filter-button-copy-device-column {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
}
.filter-button-copy-device-column:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button-copy-device-column:focus {
border: none;
outline: none;
box-shadow: none;
}
.cdc-column-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
gap: 8px;
align-items: start;
}
.cdc-column-header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
gap: 8px;
align-items: center;
margin-top: 4px;
margin-bottom: 6px;
color: var(--primary--body--color);
opacity: 0.72;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.cdc-column-row-with-regex {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 36px;
}
.cdc-column-header-with-regex {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 36px;
}
.cdc-column-row .filter-button-copy-device-column {
min-width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.device-column-regex-cell {
min-width: 0;
}
.device-column-regex-hint {
display: block;
margin-top: 4px;
color: #ff9d50;
font-size: 11px;
line-height: 1.25;
}
.device-column-regex-hint-row {
grid-column: 1 / -1;
width: 100%;
margin-top: -2px;
padding: 6px 8px;
border-left: 2px solid #ff9d50;
border-radius: 6px;
background-color: color-mix(in srgb, #ff9d50 10%, transparent);
}
.device-column-example {
border: 1px solid color-mix(in srgb, var(--secondary--color) 20%, transparent);
border-radius: 18px;
background: linear-gradient(145deg, color-mix(in srgb, var(--input--background) 94%, white 6%) 0%, color-mix(in srgb, var(--body--background) 96%, var(--secondary--color) 4%) 100%);
box-shadow: 0 14px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
overflow: hidden;
}
.device-column-example-head {
min-height: 34px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 16px 18px 14px;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent);
}
.device-column-example-title {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 800;
}
.device-column-example-title i {
color: #ff9d50;
font-size: 14px;
}
.device-column-example-subtitle {
margin: 6px 0 0;
color: color-mix(in srgb, var(--primary--body--color) 72%, transparent);
font-size: 12px;
line-height: 1.45;
}
.device-column-example-toggle {
width: 32px;
height: 32px;
flex: 0 0 auto;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 82%, white 18%);
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.device-column-example-toggle.is-open i {
transform: rotate(90deg);
}
.device-column-example-toggle i {
font-size: 11px;
transition: transform .2s ease;
}
.device-column-example-toggle:focus {
outline: none;
}
.device-column-example-toggle:hover {
border-color: color-mix(in srgb, var(--secondary--color) 42%, transparent);
box-shadow: 0 8px 18px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.device-column-example-body {
max-height: 0;
overflow: hidden;
opacity: 0;
border-top: 1px solid transparent;
padding: 0 18px;
display: grid;
gap: 14px;
transition: max-height .24s ease, opacity .18s ease, padding .24s ease, border-color .24s ease;
}
.device-column-example-body.is-open {
max-height: 520px;
opacity: 1;
border-top-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
padding: 0 18px 18px;
}
.device-column-example-intro {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 76%, transparent);
font-size: 12px;
line-height: 1.45;
}
.device-column-example-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
padding: 4px 8px;
border-radius: 999px;
background-color: color-mix(in srgb, #ff9d50 16%, transparent);
color: #ff9d50;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.device-column-example-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.device-column-example-item {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
border-radius: 14px;
background-color: color-mix(in srgb, var(--input--background) 84%, white 16%);
color: var(--primary--body--color);
font-size: 12px;
line-height: 1.45;
}
.device-column-example-item strong {
color: #ff9d50;
font-size: 13px;
}
.device-column-example-badge {
display: inline-flex;
width: max-content;
padding: 4px 9px;
border-radius: 999px;
background-color: color-mix(in srgb, #ff9d50 14%, transparent);
color: #ff9d50;
font-size: 11px;
font-weight: 800;
}
.device-column-example-badge-muted {
background-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 74%, transparent);
}
.device-column-example-row {
display: grid;
grid-template-columns: 62px 1fr;
gap: 10px;
align-items: start;
}
.device-column-example-row-result {
margin-top: 2px;
padding-top: 10px;
border-top: 1px dashed color-mix(in srgb, var(--secondary--color) 22%, transparent);
}
.device-column-example-label {
color: color-mix(in srgb, var(--primary--body--color) 56%, transparent);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.device-column-example-value {
font-family: 'Consolas', 'Courier New', monospace;
font-size: 12px;
line-height: 1.45;
word-break: break-word;
}
@media (max-width: 768px) {
.device-column-example-head {
padding: 14px;
}
.device-column-example-intro {
align-items: flex-start;
flex-direction: column;
}
.device-column-example-grid {
grid-template-columns: 1fr;
}
.device-column-example-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
.description_area_copy_device_column {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
}
.description_area_copy_device_column::placeholder {
color: var(--primary--body--color);
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-button-copy-device-column {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 7px 30px;
font-size: 13px;
}
.oriana-button-copy-device-column:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 7px 30px;
font-size: 13px;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
min-height: 35px;
}
.device-button-select::after {
content: none;
}
.device-button-select {
height: 36px;
text-align: left;
}
.new-input-div {
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-copy-column {
max-height: 375px;
overflow: auto;
}
::-webkit-scrollbar-thumb {
background-color: var(--primary--body--color) !important;
border-radius: 5px !important;
}
.no-column {
text-align: center;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
padding: 10px;
margin-top: 1rem;
border-radius: var(--cart--border--radius);
}
.content-copy-device-column {
overflow: visible !important;
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.device-column-modal-loader {
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary--color);
}
.device-column-modal-loader .spinner-border {
width: 2.5rem;
height: 2.5rem;
}
.cdc-header-copy-column {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.cdc-header-title-copy-column {
display: flex;
align-items: center;
gap: 10px;
}
.cdc-header-icon-copy-column {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.cdc-title-text-copy-column {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.cdc-widget-close-copy-column {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.cdc-widget-close-copy-column:hover {
transform: translateY(-1px);
}
.cdc-widget-close-copy-column:focus, .cdc-widget-close-copy-column:active {
outline: none !important;
box-shadow: none !important;
}
.new_input_copy_device_column {
border-radius: 8px !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_copy_device_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.choose_select_copy_device_column {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_copy_device_column:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.description_area_copy_device_column {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px;
box-shadow: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.description_area_copy_device_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
outline: none;
}
.device-brand-menu {
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.content-copy-device-column .select_arrow::after {
pointer-events: none;
}
.device-brand-menu-copy-column.show {
transform: translate(0px, 38px) !important;
}
.copy-device-column-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.copy-device-column-action-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.copy-device-column-action-btn:active {
transform: translateY(0);
}
.cdc-column-header {
padding: 0 10px;
}
}
/* ===== setting-components/device-column/edit-device-column/edit-device-column.component.css (scoped) ===== */
app-edit-device-column {
.modal-content {
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 700;
font-size: 14px;
}
.new_input_edit_device_column {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_edit_device_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.new_input_edit_device_column::placeholder {
color: var(--primary--body--color);
}
.choose_select_edit_device_column {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_edit_device_column:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.choose_select_edit_device_column:focus {
outline: none;
}
.choose_select_edit_device_column:active {
outline: none;
}
.filter-button-edit-device-column {
color: var(--primary--body--color) !important;
background-color: var(--body--background);
border: none;
}
.filter-button-edit-device-column:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button-edit-device-column:focus {
border: none;
outline: none;
box-shadow: none;
}
.edc-column-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
gap: 8px;
align-items: start;
}
.edc-column-header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
gap: 8px;
align-items: center;
margin-top: 4px;
margin-bottom: 6px;
color: var(--primary--body--color);
opacity: 0.72;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.edc-column-row-with-regex {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 36px;
}
.edc-column-header-with-regex {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 36px;
}
.edc-column-row .filter-button-edit-device-column {
min-width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.device-column-regex-cell {
min-width: 0;
}
.device-column-regex-hint {
display: block;
margin-top: 4px;
color: #ff9d50;
font-size: 11px;
line-height: 1.25;
}
.device-column-regex-hint-row {
grid-column: 1 / -1;
width: 100%;
margin-top: -2px;
padding: 6px 8px;
border-left: 2px solid #ff9d50;
border-radius: 6px;
background-color: color-mix(in srgb, #ff9d50 10%, transparent);
}
.device-column-example {
border: 1px solid color-mix(in srgb, var(--secondary--color) 20%, transparent);
border-radius: 18px;
background: linear-gradient(145deg, color-mix(in srgb, var(--input--background) 94%, white 6%) 0%, color-mix(in srgb, var(--body--background) 96%, var(--secondary--color) 4%) 100%);
box-shadow: 0 14px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
overflow: hidden;
}
.device-column-example-head {
min-height: 34px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 16px 18px 14px;
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 10%, transparent), transparent);
}
.device-column-example-title {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary--body--color);
font-size: 13px;
font-weight: 800;
}
.device-column-example-title i {
color: #ff9d50;
font-size: 14px;
}
.device-column-example-subtitle {
margin: 6px 0 0;
color: color-mix(in srgb, var(--primary--body--color) 72%, transparent);
font-size: 12px;
line-height: 1.45;
}
.device-column-example-toggle {
width: 32px;
height: 32px;
flex: 0 0 auto;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 12%, transparent);
border-radius: 10px;
background-color: color-mix(in srgb, var(--input--background) 82%, white 18%);
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.device-column-example-toggle.is-open i {
transform: rotate(90deg);
}
.device-column-example-toggle i {
font-size: 11px;
transition: transform .2s ease;
}
.device-column-example-toggle:focus {
outline: none;
}
.device-column-example-toggle:hover {
border-color: color-mix(in srgb, var(--secondary--color) 42%, transparent);
box-shadow: 0 8px 18px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.device-column-example-body {
max-height: 0;
overflow: hidden;
opacity: 0;
border-top: 1px solid transparent;
padding: 0 18px;
display: grid;
gap: 14px;
transition: max-height .24s ease, opacity .18s ease, padding .24s ease, border-color .24s ease;
}
.device-column-example-body.is-open {
max-height: 520px;
opacity: 1;
border-top-color: color-mix(in srgb, var(--primary--body--color) 8%, transparent);
padding: 0 18px 18px;
}
.device-column-example-intro {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background-color: color-mix(in srgb, var(--secondary--color) 8%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 76%, transparent);
font-size: 12px;
line-height: 1.45;
}
.device-column-example-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
padding: 4px 8px;
border-radius: 999px;
background-color: color-mix(in srgb, #ff9d50 16%, transparent);
color: #ff9d50;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.device-column-example-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.device-column-example-item {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 8%, transparent);
border-radius: 14px;
background-color: color-mix(in srgb, var(--input--background) 84%, white 16%);
color: var(--primary--body--color);
font-size: 12px;
line-height: 1.45;
}
.device-column-example-item strong {
color: #ff9d50;
font-size: 13px;
}
.device-column-example-badge {
display: inline-flex;
width: max-content;
padding: 4px 9px;
border-radius: 999px;
background-color: color-mix(in srgb, #ff9d50 14%, transparent);
color: #ff9d50;
font-size: 11px;
font-weight: 800;
}
.device-column-example-badge-muted {
background-color: color-mix(in srgb, var(--primary--body--color) 10%, transparent);
color: color-mix(in srgb, var(--primary--body--color) 74%, transparent);
}
.device-column-example-row {
display: grid;
grid-template-columns: 62px 1fr;
gap: 10px;
align-items: start;
}
.device-column-example-row-result {
margin-top: 2px;
padding-top: 10px;
border-top: 1px dashed color-mix(in srgb, var(--secondary--color) 22%, transparent);
}
.device-column-example-label {
color: color-mix(in srgb, var(--primary--body--color) 56%, transparent);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.device-column-example-value {
font-family: 'Consolas', 'Courier New', monospace;
font-size: 12px;
line-height: 1.45;
word-break: break-word;
}
@media (max-width: 768px) {
.device-column-example-head {
padding: 14px;
}
.device-column-example-intro {
align-items: flex-start;
flex-direction: column;
}
.device-column-example-grid {
grid-template-columns: 1fr;
}
.device-column-example-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
.description_area_edit_device_column {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px;
box-shadow: none;
background-color: var(--input--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.description_area_edit_device_column:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
outline: none;
}
.description_area_edit_device_column::placeholder {
color: var(--primary--body--color);
}
.modal-header {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 14px 20px;
}
.modal-footer {
border-top: none;
}
.oriana-button-edit-device-column {
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
border-radius: 8px;
height: 36px;
padding: 7px 30px;
font-size: 13px;
font-weight: 600;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.oriana-button-edit-device-column:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)), var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.oriana-button-edit-device-column:active {
transform: translateY(0);
}
::-webkit-scrollbar-thumb {
background-color: var(--primary--body--color) !important;
border-radius: 5px !important;
}
.no-column {
text-align: center;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
color: var(--primary--body--color);
padding: 10px;
margin-top: 1rem;
border-radius: var(--cart--border--radius);
}
.brand-image {
display: inline;
position: absolute;
width: 30px;
left: 5px;
top: 5px;
z-index: 99;
}
.content-edit-device-column {
overflow: visible !important;
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.device-column-modal-loader {
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary--color);
}
.device-column-modal-loader .spinner-border {
width: 2.5rem;
height: 2.5rem;
}
.edc-header-edit-column {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.edc-header-title-edit-column {
display: flex;
align-items: center;
gap: 10px;
}
.edc-header-icon-edit-column {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.edc-title-text-edit-column {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.edc-widget-close-edit-column {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.edc-widget-close-edit-column:hover {
transform: translateY(-1px);
}
.edc-widget-close-edit-column:focus, .edc-widget-close-edit-column:active {
outline: none !important;
box-shadow: none !important;
}
.edit-device-column-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.edit-device-column-action-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.edit-device-column-action-btn:active {
transform: translateY(0);
}
.edc-column-header {
padding: 0 10px;
}
}
/* ===== setting-components/device-column/navbar/navbar.component.css (scoped) ===== */
app-navbar {
.image {
margin-top: 1rem;
width: 100%;
height: 100vh;
background-size: cover;
}
.data_taxonomies_settings_main {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 2px;
}
.data_taxonomies_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.data_taxonomies_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.data_taxonomies_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.data_taxonomies_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
.dropdown_filter {
background-color: var(--body--background) !important;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
margin: 10px !important;
}
.form-check-label {
color: var(--primary--body--color);
}
.form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.filter_button {
padding: 0px 5px !important;
}
.filter_button:focus {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button:active {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button::after {
color: var(--primary--body--color);
margin-left: .5rem;
}
}
/* ===== setting-components/device-parser/add-device-parser/add-device-parser.component.css (global) ===== */
.darkBlue-theme .new_input_add_parser {
border: none !important;
box-shadow: var(--cart--box--shadow) !important;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .content-add-device-parser {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.lightBlue-theme .content-add-device-parser .col-lg-6:last-child .container {
background: color-mix(in srgb, var(--body--background) 86%, #8ca9b4 14%);
border: 1px solid color-mix(in srgb, #5f7f8c 42%, transparent);
border-radius: 12px;
padding: 14px;
box-shadow: var(--cart--box--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.lightBlue-theme .content-add-device-parser .accordion-item-column {
border: 1px solid color-mix(in srgb, #5f7f8c 62%, transparent);
border-left: 4px solid #5f7f8c;
background: color-mix(in srgb, var(--body--background) 82%, white 18%);
box-shadow: 0 8px 18px rgba(95, 127, 140, 0.18);
margin-bottom: 10px;
}
.lightBlue-theme .content-add-device-parser .accordion-columns-button {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 78%, white 22%), color-mix(in srgb, var(--body--background) 84%, #8ca9b4 16%));
}
.dark-theme .content-add-device-parser .accordion-columns-button {
background: #383838 !important;
}
.darkBlue-theme .content-add-device-parser .accordion-columns-button {
background: #232a3d !important;
}
.lightBlue-theme .content-add-device-parser .col-lg-6:last-child .container, .lightBlue-theme .content-add-device-parser .accordion-item-column, .dark-theme .content-add-device-parser .col-lg-6:last-child .container, .dark-theme .content-add-device-parser .accordion-item-column, .darkBlue-theme .content-add-device-parser .col-lg-6:last-child .container, .darkBlue-theme .content-add-device-parser .accordion-item-column {
box-shadow: none !important;
}
.dark-theme .content-add-device-parser .col-lg-6:last-child .container {
border-radius: 12px !important;
}
.dark-theme .content-add-device-parser .accordion-item-column {
border-radius: 8px !important;
overflow: hidden;
}
.dark-theme .content-add-device-parser .col-lg-6:last-child .container, .darkBlue-theme .content-add-device-parser .col-lg-6:last-child .container {
border-color: color-mix(in srgb, var(--secondary--color) 42%, white 8%);
box-shadow: var(--cart--box--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dark-theme .content-add-device-parser .col-lg-6:last-child .container {
background: #383838;
}
.darkBlue-theme .content-add-device-parser .col-lg-6:last-child .container {
background: #232a3d;
}
.dark-theme .content-add-device-parser .accordion-item-column, .darkBlue-theme .content-add-device-parser .accordion-item-column {
border-color: color-mix(in srgb, var(--secondary--color) 48%, white 10%);
border-left-color: color-mix(in srgb, var(--secondary--color) 82%, white 18%);
background: color-mix(in srgb, var(--body--background) 88%, white 5%);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.dark-theme .content-add-device-parser .accordion-columns-button, .darkBlue-theme .content-add-device-parser .accordion-columns-button {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 84%, white 6%), color-mix(in srgb, var(--body--background) 88%, var(--secondary--color) 12%));
}
/* ===== setting-components/device-parser/add-device-parser/add-device-parser.component.css (scoped) ===== */
app-add-device-parser {
.modal-content {
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 700;
font-size: 14px;
}
.new_input_add_parser {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_add_parser:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.new_input_add_parser::placeholder {
color: var(--primary--body--color);
}
.choose_select_add_parser {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_add_parser:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.choose_select_add_parser:focus {
outline: none;
}
.choose_select_add_parser:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area_add_parser {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px;
box-shadow: none;
background-color: var(--input--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.description_area_add_parser:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
outline: none;
}
.description_area_add_parser::placeholder {
color: var(--primary--body--color);
}
.filter-clear-button-logs {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-logs:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-logs:focus {
border: none;
outline: none;
box-shadow: none;
}
.adp-header-add-parser {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.adp-header-title-add-parser {
display: flex;
align-items: center;
gap: 10px;
}
.adp-header-icon-add-parser {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.adp-title-text-add-parser {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.adp-widget-close-add-parser {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.adp-widget-close-add-parser:hover {
transform: translateY(-1px);
}
.adp-widget-close-add-parser:focus, .adp-widget-close-add-parser:active {
outline: none !important;
box-shadow: none !important;
}
.modal-footer {
border-top: none;
}
.oriana-button-add-parser {
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
border-radius: 8px;
height: 36px;
padding: 7px 30px;
font-size: 13px;
font-weight: 600;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.oriana-button-add-parser:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)), var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.oriana-button-add-parser:active {
transform: translateY(0);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)), var(--input--background));
}
.accordion-columns-button {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
}
.accordion-columns-button[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
min-height: 35px;
}
.device-button-select::after {
content: none;
}
.device-button-select {
height: 36px;
text-align: left;
}
.content-add-device-parser .select_arrow::after {
pointer-events: none;
}
.new-input-div {
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.model-input-disabled {
opacity: .5 !important;
}
.tooltip-add-parser-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 78%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
z-index: 99999;
}
.tooltip-add-parser:hover .tooltip-add-parser-text {
visibility: visible;
z-index: 99999;
}
.accordion-button:focus {
z-index: 0
}
.nsd-header-title-new-supported-device {
display: flex;
align-items: center;
gap: 10px;
}
.content-add-device-parser {
overflow: visible !important;
}
.device-search {
height: 35px;
text-indent: 25px;
}
.add-parser-btn {
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.add-parser-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-parser {
max-height: 375px;
overflow: auto;
}
.device-brand-menu-add-parser.show {
transform: translate(0px, 38px) !important;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: .4;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.column-drag-handle {
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
padding: 2px 5px;
cursor: move;
color: var(--primary--body--color);
opacity: var(--opacity--50, .5);
}
.column-drag-handle:hover {
opacity: 1;
}
.example-box .accordion-columns-button {
padding-left: 26px;
}
.column-title-wrapper {
max-width: calc(100% - 60px);
overflow: hidden;
}
.column-title-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.column-delete-btn {
position: absolute;
right: 34px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: var(--primary--body--color);
opacity: var(--opacity--50, .5);
font-size: 12px;
cursor: pointer;
transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.column-delete-btn:hover {
opacity: 1;
color: #e74c3c;
background: color-mix(in srgb, #e74c3c 15%, transparent);
}
.accordion-columns-button:hover {
cursor: pointer !important;
}
.content-add-device-parser .col-lg-6:last-child .container {
background: color-mix(in srgb, var(--body--background) 90%, var(--secondary--color) 10%);
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 12px;
padding: 14px;
box-shadow: var(--cart--box--shadow), inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
}
.content-add-device-parser .accordion-item-column {
border: 1px solid color-mix(in srgb, var(--secondary--color) 44%, transparent);
border-left: 4px solid color-mix(in srgb, var(--secondary--color) 78%, var(--primary--body--color) 22%);
background: color-mix(in srgb, var(--body--background) 86%, var(--input--background) 14%);
box-shadow: 0 8px 18px color-mix(in srgb, var(--secondary--color) 16%, transparent);
margin-bottom: 10px;
}
.content-add-device-parser .accordion-columns-button {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 90%, white 10%), color-mix(in srgb, var(--body--background) 90%, var(--secondary--color) 10%));
border-radius: 8px 8px 0 0 !important;
}
.content-add-device-parser .col-lg-6:last-child .container, .content-add-device-parser .accordion-item-column {
box-shadow: none !important;
}
.content-add-device-parser .col-lg-6:last-child .container {
border-radius: 12px !important;
}
.content-add-device-parser .accordion-item-column {
border-radius: 8px !important;
overflow: hidden;
}
}
/* ===== setting-components/device-parser/copy-device-parser/copy-device-parser.component.css (global) ===== */
.darkBlue-theme .new_input_copy_parser {
border: none !important;
box-shadow: var(--cart--box--shadow) !important;
}
.darkBlue-theme .accordion-columns-button-copy[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button-copy[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button-copy[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button-copy[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button-copy::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button-copy::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button-copy::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .content-copy-device-parser {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.lightBlue-theme .content-copy-device-parser .col-lg-6:last-child .container {
background: color-mix(in srgb, var(--body--background) 86%, #8ca9b4 14%);
border: 1px solid color-mix(in srgb, #5f7f8c 42%, transparent);
border-radius: 12px;
padding: 14px;
box-shadow: var(--cart--box--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.lightBlue-theme .content-copy-device-parser .accordion-item-column {
border: 1px solid color-mix(in srgb, #5f7f8c 62%, transparent);
border-left: 4px solid #5f7f8c;
background: color-mix(in srgb, var(--body--background) 82%, white 18%);
box-shadow: 0 8px 18px rgba(95, 127, 140, 0.18);
margin-bottom: 10px;
}
.lightBlue-theme .content-copy-device-parser .accordion-columns-button-copy {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 78%, white 22%), color-mix(in srgb, var(--body--background) 84%, #8ca9b4 16%));
}
.dark-theme .content-copy-device-parser .accordion-columns-button-copy {
background: #383838 !important;
}
.darkBlue-theme .content-copy-device-parser .accordion-columns-button-copy {
background: #232a3d !important;
}
.lightBlue-theme .content-copy-device-parser .col-lg-6:last-child .container, .lightBlue-theme .content-copy-device-parser .accordion-item-column, .dark-theme .content-copy-device-parser .col-lg-6:last-child .container, .dark-theme .content-copy-device-parser .accordion-item-column, .darkBlue-theme .content-copy-device-parser .col-lg-6:last-child .container, .darkBlue-theme .content-copy-device-parser .accordion-item-column {
box-shadow: none !important;
}
.dark-theme .content-copy-device-parser .col-lg-6:last-child .container {
border-radius: 12px !important;
}
.dark-theme .content-copy-device-parser .accordion-item-column {
border-radius: 8px !important;
overflow: hidden;
}
.dark-theme .content-copy-device-parser .col-lg-6:last-child .container, .darkBlue-theme .content-copy-device-parser .col-lg-6:last-child .container {
border-color: color-mix(in srgb, var(--secondary--color) 42%, white 8%);
box-shadow: var(--cart--box--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dark-theme .content-copy-device-parser .col-lg-6:last-child .container {
background: #383838;
}
.darkBlue-theme .content-copy-device-parser .col-lg-6:last-child .container {
background: #232a3d;
}
.dark-theme .content-copy-device-parser .accordion-item-column, .darkBlue-theme .content-copy-device-parser .accordion-item-column {
border-color: color-mix(in srgb, var(--secondary--color) 48%, white 10%);
border-left-color: color-mix(in srgb, var(--secondary--color) 82%, white 18%);
background: color-mix(in srgb, var(--body--background) 88%, white 5%);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.dark-theme .content-copy-device-parser .accordion-columns-button-copy, .darkBlue-theme .content-copy-device-parser .accordion-columns-button-copy {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 84%, white 6%), color-mix(in srgb, var(--body--background) 88%, var(--secondary--color) 12%));
}
/* ===== setting-components/device-parser/copy-device-parser/copy-device-parser.component.css (scoped) ===== */
app-copy-device-parser {
.modal-content {
background-color: var(--body--background);
height: auto;
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
}
.new_input_copy_parser {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: var(--cart--border--radius) !important;
background-color: var(--input--background);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
font-size: 13px;
height: 36px;
outline: none;
background-position: right calc(0.375em + 0.1875rem) center !important;
}
.new_input_copy_parser::placeholder {
color: var(--primary--body--color);
}
.choose_select_copy_parser {
background-color: var(--input--background);
color: var(--primary--body--color);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
opacity: var(--opacity--80);
font-size: 13px;
}
.choose_select_add_parser:focus {
outline: none;
}
.choose_select_add_parser:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area_copy_parser {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
}
.description_area_copy_parser::placeholder {
color: var(--primary--body--color);
}
.filter-clear-button-logs {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-logs:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-logs:focus {
border: none;
outline: none;
box-shadow: none;
}
.modal-header {
border-bottom: var(--cart--border);
box-shadow: var(--cart--box--shadow);
}
.modal-footer {
border-top: none;
}
.oriana-button-copy-parser {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 7px 30px;
font-size: 13px;
}
.oriana-button-copy-parser:active {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border: var(--cart--border);
box-shadow: var(--cart--box--shadow);
background-color: var(--input--background);
border-radius: var(--cart--border--radius);
height: 36px;
padding: 7px 30px;
font-size: 13px;
}
.accordion-columns-button-copy {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
}
.accordion-button:not(.collapsed)::after {
transform: rotate(0deg) !important;
}
.accordion-button.collapsed::after {
transform: rotate(180deg) !important;
}
.accordion-columns-button-copy[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
min-height: 35px;
}
.device-button-select::after {
content: none;
}
.device-button-select {
height: 36px;
text-align: left;
}
.new-input-div {
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.model-input-disabled {
opacity: .5 !important;
}
.tooltip-copy-parser-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 78%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.tooltip-copy-parser:hover .tooltip-copy-parser-text {
visibility: visible;
}
.accordion-button:focus {
z-index: 0
}
.content-add-device-parser {
overflow: visible !important;
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-copy-parser {
max-height: 375px;
overflow: auto;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: .4;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.accordion-columns-button-copy:hover {
cursor: pointer !important;
}
.column-drag-handle {
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
padding: 2px 5px;
cursor: move;
color: var(--primary--body--color);
opacity: var(--opacity--50, .5);
}
.column-drag-handle:hover {
opacity: 1;
}
.example-box .accordion-columns-button-copy {
padding-left: 26px;
}
.column-title-wrapper {
max-width: calc(100% - 60px);
overflow: hidden;
}
.column-title-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.column-delete-btn {
position: absolute;
right: 34px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: var(--primary--body--color);
opacity: var(--opacity--50, .5);
font-size: 12px;
cursor: pointer;
transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.column-delete-btn:hover {
opacity: 1;
color: #e74c3c;
background: color-mix(in srgb, #e74c3c 15%, transparent);
}
.content-copy-device-parser {
overflow: visible !important;
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.cdp-header-copy-parser {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.cdp-header-title-copy-parser {
display: flex;
align-items: center;
gap: 10px;
}
.cdp-header-icon-copy-parser {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.cdp-title-text-copy-parser {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.cdp-widget-close-copy-parser {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.cdp-widget-close-copy-parser:hover {
transform: translateY(-1px);
}
.cdp-widget-close-copy-parser:focus, .cdp-widget-close-copy-parser:active {
outline: none !important;
box-shadow: none !important;
}
.label-header {
font-weight: 700;
font-size: 14px;
}
.new_input_copy_parser {
border-radius: 8px !important;
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_copy_parser:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.choose_select_copy_parser {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_copy_parser:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.choose_select_copy_parser:focus, .choose_select_copy_parser:active {
outline: none;
}
.description_area_copy_parser {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px;
box-shadow: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.description_area_copy_parser:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
outline: none;
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.accordion-columns-button-copy {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
}
.device-brand-menu {
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.content-copy-device-parser .select_arrow::after {
pointer-events: none;
}
.device-brand-menu-copy-parser.show {
transform: translate(0px, 38px) !important;
}
.add-parser-btn {
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.add-parser-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.content-copy-device-parser .col-lg-6:last-child .container {
background: color-mix(in srgb, var(--body--background) 90%, var(--secondary--color) 10%);
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 12px;
padding: 14px;
box-shadow: var(--cart--box--shadow), inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
}
.content-copy-device-parser .accordion-item-column {
border: 1px solid color-mix(in srgb, var(--secondary--color) 44%, transparent);
border-left: 4px solid color-mix(in srgb, var(--secondary--color) 78%, var(--primary--body--color) 22%);
background: color-mix(in srgb, var(--body--background) 86%, var(--input--background) 14%);
box-shadow: 0 8px 18px color-mix(in srgb, var(--secondary--color) 16%, transparent);
margin-bottom: 10px;
}
.content-copy-device-parser .accordion-columns-button-copy {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 90%, white 10%), color-mix(in srgb, var(--body--background) 90%, var(--secondary--color) 10%));
border-radius: 8px 8px 0 0 !important;
}
.content-copy-device-parser .col-lg-6:last-child .container, .content-copy-device-parser .accordion-item-column {
box-shadow: none !important;
}
.content-copy-device-parser .col-lg-6:last-child .container {
border-radius: 12px !important;
}
.content-copy-device-parser .accordion-item-column {
border-radius: 8px !important;
overflow: hidden;
}
}
/* ===== setting-components/device-parser/edit-device-parser/edit-device-parser.component.css (global) ===== */
.darkBlue-theme .accordion-columns-button-copy[aria-expanded="true"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button-copy[aria-expanded="true"] {
border-bottom: 1px solid #8ca9b4;
}
.darkBlue-theme .accordion-columns-button-copy[aria-expanded="false"] {
border-bottom: 1px solid #404b61;
}
.lightBlue-theme .accordion-columns-button-copy[aria-expanded="false"] {
border-bottom: 1px solid #8ca9b4;
}
.lightBlue-theme .accordion-columns-button-copy::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.darkBlue-theme .accordion-columns-button-copy::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .accordion-columns-button-copy::after {
opacity: var(--opacity--50) !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
box-shadow: none;
}
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .content-edit-device-parser {
background: linear-gradient(180deg, color-mix(in srgb, var(--body--background) 90%, white 5%), var(--body--background));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: none;
}
.lightBlue-theme .content-edit-device-parser .col-lg-6:last-child .container {
background: color-mix(in srgb, var(--body--background) 86%, #8ca9b4 14%);
border: 1px solid color-mix(in srgb, #5f7f8c 42%, transparent);
border-radius: 12px;
padding: 14px;
box-shadow: var(--cart--box--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.lightBlue-theme .content-edit-device-parser .accordion-item-column {
border: 1px solid color-mix(in srgb, #5f7f8c 62%, transparent);
border-left: 4px solid #5f7f8c;
background: color-mix(in srgb, var(--body--background) 82%, white 18%);
box-shadow: 0 8px 18px rgba(95, 127, 140, 0.18);
margin-bottom: 10px;
}
.lightBlue-theme .content-edit-device-parser .accordion-columns-button-copy {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 78%, white 22%), color-mix(in srgb, var(--body--background) 84%, #8ca9b4 16%));
}
.dark-theme .content-edit-device-parser .accordion-columns-button-copy {
background: #383838 !important;
}
.darkBlue-theme .content-edit-device-parser .accordion-columns-button-copy {
background: #232a3d !important;
}
.lightBlue-theme .content-edit-device-parser .col-lg-6:last-child .container, .lightBlue-theme .content-edit-device-parser .accordion-item-column, .dark-theme .content-edit-device-parser .col-lg-6:last-child .container, .dark-theme .content-edit-device-parser .accordion-item-column, .darkBlue-theme .content-edit-device-parser .col-lg-6:last-child .container, .darkBlue-theme .content-edit-device-parser .accordion-item-column {
box-shadow: none !important;
}
.dark-theme .content-edit-device-parser .col-lg-6:last-child .container {
border-radius: 12px !important;
}
.dark-theme .content-edit-device-parser .accordion-item-column {
border-radius: 8px !important;
overflow: hidden;
}
.dark-theme .content-edit-device-parser .col-lg-6:last-child .container, .darkBlue-theme .content-edit-device-parser .col-lg-6:last-child .container {
border-color: color-mix(in srgb, var(--secondary--color) 42%, white 8%);
box-shadow: var(--cart--box--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dark-theme .content-edit-device-parser .col-lg-6:last-child .container {
background: #383838;
}
.darkBlue-theme .content-edit-device-parser .col-lg-6:last-child .container {
background: #232a3d;
}
.dark-theme .content-edit-device-parser .accordion-item-column, .darkBlue-theme .content-edit-device-parser .accordion-item-column {
border-color: color-mix(in srgb, var(--secondary--color) 48%, white 10%);
border-left-color: color-mix(in srgb, var(--secondary--color) 82%, white 18%);
background: color-mix(in srgb, var(--body--background) 88%, white 5%);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.dark-theme .content-edit-device-parser .accordion-columns-button-copy, .darkBlue-theme .content-edit-device-parser .accordion-columns-button-copy {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 84%, white 6%), color-mix(in srgb, var(--body--background) 88%, var(--secondary--color) 12%));
}
/* ===== setting-components/device-parser/edit-device-parser/edit-device-parser.component.css (scoped) ===== */
app-edit-device-parser {
.modal-content {
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 700;
font-size: 14px;
}
.new_input_edit_parser {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_edit_parser:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.new_input_edit_parser::placeholder {
color: var(--primary--body--color);
}
.choose_select_edit_parser {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_edit_parser:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.choose_select_add_parser:focus {
outline: none;
}
.choose_select_add_parser:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area_edit_parser {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px;
box-shadow: none;
background-color: var(--input--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.description_area_edit_parser:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
outline: none;
}
.description_area_edit_parser::placeholder {
color: var(--primary--body--color);
}
.filter-clear-button-logs {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-logs:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-logs:focus {
border: none;
outline: none;
box-shadow: none;
}
.modal-header {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 14px 20px;
}
.modal-footer {
border-top: none;
}
.oriana-button-edit-parser {
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--input--background));
border-radius: 8px;
height: 36px;
padding: 7px 30px;
font-size: 13px;
font-weight: 600;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.oriana-button-edit-parser:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)), var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.oriana-button-edit-parser:active {
transform: translateY(0);
}
.accordion-columns-button-copy {
background-color: var(--body--background);
color: var(--primary--body--color);
box-shadow: none;
padding: 10px;
}
.accordion-columns-button-copy[aria-expanded="true"] {
border-bottom: var(--cart--border);
}
.accordion-item-column {
border: var(--cart--border);
border-radius: var(--cart--border--radius) !important;
background-color: var(--body--background);
box-shadow: var(--cart--box--shadow);
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
min-height: 35px;
}
.device-button-select::after {
content: none;
}
.device-button-select {
height: 36px;
text-align: left;
}
.new-input-div {
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.model-input-disabled {
opacity: .5 !important;
}
.tooltip-edit-parser-text {
visibility: hidden;
width: 120px;
background-color: var(--body--background);
color: var(--primary--body--color);
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 78%;
margin-left: -60px;
font-size: 12px;
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.tooltip-edit-parser:hover .tooltip-edit-parser-text {
visibility: visible;
}
.accordion-columns-button-copy[aria-expanded="false"]::after {
transform: rotate(0deg);
}
.content-add-device-parser {
overflow: visible !important;
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-edit-parser {
max-height: 375px;
overflow: auto;
}
.accordion-columns-button-copy:hover {
cursor: pointer !important;
}
.column-drag-handle {
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
padding: 2px 5px;
cursor: move;
color: var(--primary--body--color);
opacity: var(--opacity--50, .5);
}
.column-drag-handle:hover {
opacity: 1;
}
.example-box .accordion-columns-button-copy {
padding-left: 26px;
}
.column-title-wrapper {
max-width: calc(100% - 60px);
overflow: hidden;
}
.column-title-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.column-delete-btn {
position: absolute;
right: 34px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: var(--primary--body--color);
opacity: var(--opacity--50, .5);
font-size: 12px;
cursor: pointer;
transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.column-delete-btn:hover {
opacity: 1;
color: #e74c3c;
background: color-mix(in srgb, #e74c3c 15%, transparent);
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: .4;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.content-edit-device-parser {
overflow: visible !important;
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.edp-header-edit-parser {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 92%, white 8%), var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.edp-header-title-edit-parser {
display: flex;
align-items: center;
gap: 10px;
}
.edp-header-icon-edit-parser {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.edp-title-text-edit-parser {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.edp-widget-close-edit-parser {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.edp-widget-close-edit-parser:hover {
transform: translateY(-1px);
}
.edp-widget-close-edit-parser:focus, .edp-widget-close-edit-parser:active {
outline: none !important;
box-shadow: none !important;
}
.choose_select_edit_parser {
height: 36px;
}
.choose_select_edit_parser:focus, .choose_select_edit_parser:active {
outline: none;
}
.device-brand-menu {
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.content-edit-device-parser .select_arrow::after {
pointer-events: none;
}
.device-brand-menu-edit-parser.show {
transform: translate(0px, 38px) !important;
}
.add-parser-btn {
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.add-parser-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.content-edit-device-parser .col-lg-6:last-child .container {
background: color-mix(in srgb, var(--body--background) 90%, var(--secondary--color) 10%);
border: 1px solid color-mix(in srgb, var(--secondary--color) 34%, transparent);
border-radius: 12px;
padding: 14px;
box-shadow: var(--cart--box--shadow), inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
}
.content-edit-device-parser .accordion-item-column {
border: 1px solid color-mix(in srgb, var(--secondary--color) 44%, transparent);
border-left: 4px solid color-mix(in srgb, var(--secondary--color) 78%, var(--primary--body--color) 22%);
background: color-mix(in srgb, var(--body--background) 86%, var(--input--background) 14%);
box-shadow: 0 8px 18px color-mix(in srgb, var(--secondary--color) 16%, transparent);
margin-bottom: 10px;
}
.content-edit-device-parser .accordion-columns-button-copy {
background: linear-gradient(180deg, color-mix(in srgb, var(--input--background) 90%, white 10%), color-mix(in srgb, var(--body--background) 90%, var(--secondary--color) 10%));
border-radius: 8px 8px 0 0 !important;
}
.visibility-quick-actions {
border: 1px solid color-mix(in srgb, var(--secondary--color) 28%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--secondary--color) 6%, var(--body--background));
padding: 10px 14px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.vqa-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.vqa-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
white-space: nowrap;
}
.vqa-icon {
color: var(--secondary--color);
font-size: 13px;
opacity: 0.85;
}
.vqa-buttons {
display: flex;
gap: 6px;
}
.vqa-btn {
font-size: 11.5px;
font-weight: 600;
border-radius: 7px;
padding: 4px 10px;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
display: flex;
align-items: center;
gap: 5px;
color: var(--primary--body--color);
background: var(--input--background);
border-color: color-mix(in srgb, var(--secondary--color) 25%, transparent);
}
.vqa-btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px color-mix(in srgb, var(--secondary--color) 20%, transparent);
}
.vqa-btn--on:hover {
background: color-mix(in srgb, #27ae60 18%, var(--input--background));
border-color: #27ae60;
color: #27ae60;
}
.vqa-btn--off:hover {
background: color-mix(in srgb, #e74c3c 15%, var(--input--background));
border-color: #e74c3c;
color: #e74c3c;
}
.visibility-card {
border: 1px solid color-mix(in srgb, var(--secondary--color) 30%, transparent);
border-radius: 9px;
background: color-mix(in srgb, var(--secondary--color) 5%, var(--body--background));
overflow: hidden;
}
.visibility-card-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 14px;
}
.visibility-card-divider {
height: 1px;
background: color-mix(in srgb, var(--secondary--color) 18%, transparent);
margin: 0 10px;
}
.visibility-card-icon {
font-size: 13px;
color: var(--secondary--color);
opacity: 0.8;
}
.content-edit-device-parser .col-lg-6:last-child .container, .content-edit-device-parser .accordion-item-column {
box-shadow: none !important;
}
.content-edit-device-parser .col-lg-6:last-child .container {
border-radius: 12px !important;
}
.content-edit-device-parser .accordion-item-column {
border-radius: 8px !important;
overflow: hidden;
}
}
/* ===== setting-components/device-parser/navbar/navbar.component.css (scoped) ===== */
app-navbar {
.image {
margin-top: 1rem;
width: 100%;
height: 100vh;
background-size: cover;
}
.data_taxonomies_settings_main {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 2px;
}
.data_taxonomies_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.data_taxonomies_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.data_taxonomies_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.data_taxonomies_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
.dropdown_filter {
background-color: var(--body--background) !important;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
margin: 10px !important;
}
.form-check-label {
color: var(--primary--body--color);
}
.form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.filter_button {
padding: 0px 5px !important;
}
.filter_button:focus {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button:active {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button::after {
color: var(--primary--body--color);
margin-left: .5rem;
}
label#file-label {
display: inline-block;
max-height: 100%;
margin-top: 5px;
border-radius: 2px;
font-size: 1em;
line-height: 2.5em;
justify-content: center;
}
label#file-label:hover {
cursor: pointer;
}
input#apply {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
input#apply-second {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
}
/* ===== setting-components/log-category/add-log-category/add-log-category.component.css (global) ===== */
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .content-add-log-category {
box-shadow: none;
border: none;
}
/* ===== setting-components/log-category/add-log-category/add-log-category.component.css (scoped) ===== */
app-add-log-category {
.modal-content {
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 700;
font-size: 14px;
}
.new_input_add_log_category {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_add_log_category:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.new_input_add_log_category::placeholder {
color: var(--primary--body--color);
}
.choose_select_add_log_category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_add_log_category:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.choose_select_add_log_category:focus {
outline: none;
}
.choose_select_add_log_category:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area_add_parser {
border: var(--cart--border);
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
background-color: var(--body--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
}
.description_area_add_parser::placeholder {
color: var(--primary--body--color);
}
.filter-clear-button-logs {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-logs:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-logs:focus {
border: none;
outline: none;
box-shadow: none;
}
.modal-header {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 14px 20px;
}
.modal-footer {
border-top: none;
}
.oriana-button-add-log-category {
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
border-radius: 8px;
height: 36px;
padding: 7px 30px;
font-size: 13px;
font-weight: 600;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.oriana-button-add-log-category:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.oriana-button-add-log-category:active {
transform: translateY(0);
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
min-height: 35px;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
min-height: 35px;
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.content-log {
overflow: visible !important;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.device-button-select::after {
content: none;
}
.device-button-select {
height: 36px;
text-align: left;
}
.new-input-div {
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.model-input-disabled {
opacity: .5 !important;
}
.content-add-device-parser {
overflow: visible !important;
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-log-category {
max-height: 275px;
overflow: auto;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-add-log-category {
max-height: 200px;
overflow: auto;
}
.content-add-log-category {
overflow: visible !important;
}
.alc-header-add-log-category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.alc-header-title-add-log-category {
display: flex;
align-items: center;
gap: 10px;
}
.alc-header-icon-add-log-category {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.alc-title-text-add-log-category {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.alc-widget-close-add-log-category {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.alc-widget-close-add-log-category:hover {
transform: translateY(-1px);
}
.alc-widget-close-add-log-category:focus, .alc-widget-close-add-log-category:active {
outline: none !important;
box-shadow: none !important;
}
.content-add-log-category .select_arrow::after {
pointer-events: none;
}
.device-brand-menu-add-log-category.show {
transform: translate(0px, 38px) !important;
}
.log-category-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.log-category-action-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.log-category-action-btn:active {
transform: translateY(0);
}
}
/* ===== setting-components/log-category/edit-log-category/edit-log-category.component.css (global) ===== */
.dark-theme .brand-name {
color: #fff;
}
.dark-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .brand-name {
color: #fff;
}
.darkBlue-theme .brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.darkBlue-theme .content-edit-log-category {
box-shadow: none;
border: none;
}
/* ===== setting-components/log-category/edit-log-category/edit-log-category.component.css (scoped) ===== */
app-edit-log-category {
.modal-content {
background-color: var(--body--background);
height: auto;
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
box-shadow: var(--cart--box--shadow), 0 8px 32px color-mix(in srgb, var(--secondary--color) 8%, transparent);
border-radius: 12px;
}
.close_btn {
color: var(--primary--body--color) !important;
opacity: var(--opacity--50) !important;
cursor: pointer;
}
.close_btn:focus {
outline: none !important;
}
.close_btn:active {
outline: none !important;
}
.label-header {
color: var(--primary--body--color);
opacity: var(--opacity--80);
font-weight: 700;
font-size: 14px;
}
.new_input_edit_log_category {
color: var(--primary--body--color);
opacity: var(--opacity--80);
border-radius: 8px !important;
background-color: var(--input--background);
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
box-shadow: none;
font-size: 13px;
background-position: right calc(0.375em + 0.1875rem) center !important;
height: 36px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new_input_edit_log_category:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
}
.new_input_edit_log_category::placeholder {
color: var(--primary--body--color);
}
.choose_select_edit_log_category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
border-radius: 8px;
opacity: var(--opacity--80);
font-size: 13px;
height: 36px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.choose_select_edit_log_category:hover {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 10%, transparent);
}
.choose_select_edit_log_category:focus {
outline: none;
}
.choose_select_edit_log_category:active {
outline: none;
}
.filter-button {
color: var(--primary--body--color) !important;
margin-left: 1rem;
background-color: var(--body--background);
border: none;
}
.filter-button:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-button:focus {
border: none;
outline: none;
box-shadow: none;
}
.description_area_add_parser {
border: 1px solid color-mix(in srgb, var(--primary--body--color) 18%, transparent);
border-radius: 8px;
box-shadow: none;
background-color: var(--body--background);
color: var(--primary--body--color);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem) !important;
font-size: 13px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.description_area_add_parser:focus {
border-color: color-mix(in srgb, var(--secondary--color) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary--color) 13%, transparent);
outline: none;
}
.description_area_add_parser::placeholder {
color: var(--primary--body--color);
}
.filter-clear-button-logs {
position: absolute;
right: 40px;
color: var(--primary--body--color) !important;
z-index: 999;
font-size: 18px;
bottom: -1px;
}
.filter-clear-button-logs:active {
border: none;
outline: none;
box-shadow: none;
}
.filter-clear-button-logs:focus {
border: none;
outline: none;
box-shadow: none;
}
.modal-header {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 14px 20px;
}
.modal-footer {
border-top: none;
}
.oriana-button-edit-log-category {
color: var(--primary--body--color);
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
box-shadow: none;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
border-radius: 8px;
height: 36px;
padding: 7px 30px;
font-size: 13px;
font-weight: 600;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.oriana-button-edit-log-category:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.oriana-button-edit-log-category:active {
transform: translateY(0);
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
min-height: 35px;
}
.device-brand-menu {
width: 100%;
background-color: var(--body--background);
border: 1px solid color-mix(in srgb, var(--secondary--color) 22%, transparent);
border-radius: 10px;
box-shadow: var(--cart--box--shadow), 0 8px 24px color-mix(in srgb, var(--secondary--color) 10%, transparent);
min-height: 35px;
}
.brand-name {
font-size: 11px;
cursor: pointer;
padding: 0px 10px;
margin-bottom: .3rem;
}
.content-log {
overflow: visible !important;
}
.brand-name:hover {
background-color: #2e89e5;
color: #fff;
}
.brand-name-span {
margin-left: .3rem;
}
.select-device-brand-edit-device::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--primary--body--color);
font-size: 16px;
}
.dropdown-item.brand-name {
display: flex;
align-items: center;
}
.device-button-select::after {
content: none;
}
.device-button-select {
height: 36px;
text-align: left;
}
.new-input-div {
border-radius: var(--cart--border--radius);
box-shadow: var(--cart--box--shadow);
}
.model-input-disabled {
opacity: .5 !important;
}
.content-add-device-parser {
overflow: visible !important;
}
.device-search {
height: 35px;
text-indent: 25px;
}
.device-search::placeholder {
text-indent: 25px;
}
.device-search-li {
height: 35px;
padding: 10px;
position: relative;
}
.device-search-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.no-data-li:hover {
background-color: transparent !important;
}
.device-brand-menu-edit-log-category {
max-height: 275px;
overflow: auto;
}
.content-edit-log-category {
overflow: visible !important;
}
.elc-header-edit-log-category {
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--body--background));
border-bottom: 1px solid color-mix(in srgb, var(--primary--body--color) 10%, transparent);
border-radius: 12px 12px 0 0;
padding: 16px 18px;
}
.elc-header-title-edit-log-category {
display: flex;
align-items: center;
gap: 10px;
}
.elc-header-icon-edit-log-category {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: color-mix(in srgb, var(--secondary--color) 14%, transparent);
color: var(--secondary--color);
font-size: 14px;
flex-shrink: 0;
}
.elc-title-text-edit-log-category {
margin: 0 !important;
font-size: 16px;
font-weight: 700;
color: var(--primary--body--color);
opacity: 0.9;
}
.elc-widget-close-edit-log-category {
width: 34px;
height: 34px;
border: none;
background-color: transparent;
color: var(--primary--body--color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.elc-widget-close-edit-log-category:hover {
transform: translateY(-1px);
}
.elc-widget-close-edit-log-category:focus, .elc-widget-close-edit-log-category:active {
outline: none !important;
box-shadow: none !important;
}
.content-edit-log-category .select_arrow::after {
pointer-events: none;
}
.device-brand-menu-edit-log-category.show {
transform: translate(0px, 38px) !important;
}
.log-category-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.log-category-action-btn:hover {
box-shadow: var(--cart--box--shadow), 0 10px 22px color-mix(in srgb, var(--secondary--color) 18%, transparent) !important;
transform: translateY(-1px);
}
.log-category-action-btn:active {
transform: translateY(0);
}
}
/* ===== setting-components/log-category/navbar/navbar.component.css (scoped) ===== */
app-navbar {
.image {
margin-top: 1rem;
width: 100%;
height: 100vh;
background-size: cover;
}
.data_taxonomies_settings_main {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 2px;
}
.data_taxonomies_settings_item {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--secondary--color) 26%, transparent);
border-radius: 8px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--input--background) 92%, white 8%),
var(--input--background));
color: var(--primary--body--color);
font-size: 13px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
flex-shrink: 0;
}
.data_taxonomies_settings_item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--secondary--color) 58%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--secondary--color) 12%, var(--input--background)),
var(--input--background));
box-shadow: var(--cart--box--shadow), 0 14px 28px color-mix(in srgb, var(--secondary--color) 14%, transparent);
}
.data_taxonomies_settings_item i {
color: var(--primary--body--color);
opacity: var(--opacity--50);
font-size: 13px;
}
.data_taxonomies_settings_item span {
color: var(--primary--body--color);
opacity: var(--opacity--100);
font-size: 13px;
}
.dropdown_filter {
background-color: var(--body--background) !important;
box-shadow: var(--cart--box--shadow);
border-radius: var(--cart--border--radius);
border: var(--cart--border);
margin: 10px !important;
}
.form-check-label {
color: var(--primary--body--color);
}
.form-check-input:checked {
background-color: var(--primary--body--color);
border-color: white;
}
.filter_button {
padding: 0px 5px !important;
}
.filter_button:focus {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button:active {
outline: none !important;
border: none !important;
padding: 0px 5px !important;
}
.filter_button::after {
color: var(--primary--body--color);
margin-left: .5rem;
}
}