HTML, BODY, DIV, SPAN, APPLET, OBJECT, IFRAME, H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE, A, ABBR, ACRONYM, ADDRESS, BIG, CITE, CODE, DEL, DFN, EM, IMG, INS, KBD, Q, S, SAMP, SMALL, STRIKE, STRONG, SUB, SUP, TT, VAR, B, U, I, CENTER, DL, DT, DD, FIELDSET, FORM, LABEL, LEGEND, TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD, ARTICLE, ASIDE, CANVAS, DETAILS, EMBED, FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP, MENU, NAV, OUTPUT, RUBY, SECTION, SUMMARY, TIME, MARK, AUDIO, VIDEO {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
OL, UL, LI {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
OL, UL {
margin-top: 1em;
margin-bottom: 0;
}
P + OL, P + UL {
margin-top: 0;
}
ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE, FOOTER, HEADER, HGROUP, MENU, NAV, SECTION {
display: block;
}
BLOCKQUOTE, Q {
quotes: none;
}
BLOCKQUOTE:before, Q:before, BLOCKQUOTE:after, Q:after {
content: '';
content: none;
}
TABLE {
border-collapse: collapse;
border-spacing: 0;
}
IMG, INPUT[type=image], VIDEO, EMBED, IFRAME, MARQUEE, OBJECT {
aspect-ratio: attr(width) / attr(height);
}
FORM, TEXTAREA, INPUT[type=text], INPUT[type=button], INPUT[type=submit], SELECT {
-webkit-appearance: none;
border-radius: 0;
outline: none;
}
INPUT[type=checkbox] {
-webkit-appearance: checkbox;
}
INPUT[type=radio] {
-webkit-appearance: radio;
}
B, STRONG {
font-weight: bolder;
}
I, EM {
font-style: italic;
}
P {
margin: 1em 0 0;
padding: 0
}
:root {
--font-size: 16px;
--line-height: 1;
--font-family: 'Geomanist', Arial, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--size-xxxs: 4px;
--size-xxs: 8px;
--size-xs: 12px;
--size-s: 16px;
--size-m: 24px;
--size-l: 32px;
--size-xl: 48px;
--size-xxl: 60px;
--size-xxxl: 90px;
--color-main-blue: #3066B0;
--color-main-teal: #239AA5;
--color-main-orange: #FF9434;
--color-main-yellow: #FFB334;
--color-main-grey: #ECEFF1;
--color-green: #3AAA35;
--color-yellow: var(--color-main-yellow);
--color-red: #E31306;
--color-blue-grey-100: #F9FAFB;
--color-blue-grey-200: #F5F6F7;
--color-blue-grey-300: var(--color-main-grey);
--color-blue-grey-400: #CFD8DC;
--color-blue-grey-500: #90A4AE;
--color-blue-grey-600: #728892;
--color-blue-grey-700: #546E7A;
--color-blue-grey-800: #37474F;
--color-blue-grey-900: #2E3A40;
--color-blue-grey-1000: #263238;
--color-blue-grey-1100: #1F292E;
--color-blue-grey-1200: #101518;
--color-logo-grey: var(--color-blue-grey-700);
--color-medium-grey: var(--color-blue-grey-600);
--color-text-grey: var(--color-blue-grey-900);
--color-light-orange: #FFAF67;
--color-light-blue: #8CB5ED;
--color-light-teal: #3EC9D6;
--color-grey-1: #B5B9BB;
--color-grey-2: #999999;
--color-grey-3: #585859;
--color-bg-red: #FDECEB;
--color-bg-red-dark: #40373C;
--color-logo-main: var(--color-main-blue);
--color-logo-secondary: var(--color-logo-grey);
--color-bg: var(--color-blue-grey-100);
--color-text: var(--color-grey-3);
--color-btn-light-grey: var(--color-blue-grey-500);
--color-btn-grey: var(--color-blue-grey-600);
--color-btn-red: var(--color-main-orange);
--color-btn-green: var(--color-main-teal);
--color-menu-bg: var(--color-blue-grey-200);
--color-menu-bg-inset: var(--color-blue-grey-100);
--color-menu-text: var(--color-blue-grey-600);
--color-menu-text-hover: var(--color-blue-grey-900);
--color-menu-text-active: var(--color-main-blue);
--color-menu-border: var(--color-blue-grey-400);
--color-menu-separator-menu: var(--color-blue-grey-500);
--color-menu-toggle-icon: var(--color-blue-grey-600);
--color-menu-toggle-border: var(--color-blue-grey-400);
--color-menu-toggle-bg: var(--color-blue-grey-200);
--color-menu-toggle-bg-hover: #ffffff;
--color-submenu-bg: var(--color-blue-grey-300);
--color-submenu-text: var(--color-blue-grey-700);
--color-submenu-text-hover: var(--color-blue-grey-900);
--color-dropdown-bg: var(--color-blue-grey-100);
--color-dropdown-bg-2: var(--color-blue-grey-300);
--color-dropdown-text: var(--color-grey-3);
--color-dropdown-text-hover: var(--color-main-blue);
--color-dropdown-text-heading: var(--color-grey-2);
--color-dropdown-text-2: var(--color-blue-grey-600);
--color-dropdown-text-2-hover: var(--color-main-blue);
--color-dropdown-separator: var(--color-blue-grey-300);
--color-top-bar-clusters-text: var(--color-blue-grey-800);
--color-top-bar-icon: var(--color-blue-grey-600);
--color-top-bar-search-results-title: var(--color-grey-2);
--color-top-bar-search-results-text: var(--color-blue-grey-600);
--color-top-bar-search-results-text-hover: var(--color-main-blue);
--color-top-bar-notifications-number-bg: var(--color-main-blue);
--color-notification-text: var(--color-grey-3);
--color-dashboard-block-bg: var(--color-blue-grey-200);
--color-dashboard-block-text: var(--color-blue-grey-600);
--color-nodes-graph-separator: var(--color-blue-grey-400);
--color-filter-bg: var(--color-blue-grey-100);
--color-filter-text: var(--color-blue-grey-600);
--color-filter-button-bg: var(--color-main-teal);
--color-filter-button-text: #ffffff;
--color-cluster-bg: var(--color-blue-grey-300);
--color-cluster-bg-2: var(--color-blue-grey-200);
--color-cluster-bg-fail: var(--color-bg-red);
--color-cluster-main-bg: #ffffff;
--color-cluster-main-bg-warning: var(--color-cluster-main-bg);
--color-cluster-main-bg-error: var(--color-bg-red);
--color-cluster-main-text: var(--color-grey-3);
--color-cluster-main-namespace: var(--color-blue-grey-600);
--color-cluster-main-namespace-bg: transparent;
--color-cluster-main-namespace-hover: #ffffff;
--color-cluster-main-namespace-hover-bg: var(--color-cluster-main-namespace);
--color-cluster-main-text-error: var(--color-red);
--color-cluster-main-text-error-title: var(--color-grey-2);
--color-cluster-main-border: var(--color-blue-grey-300);
--color-cluster-main-border-warning: var(--color-yellow);
--color-cluster-main-border-error: var(--color-red);
--color-cluster-text: var(--color-grey-3);
--color-cluster-text-title: var(--color-grey-2);
--color-cluster-ddg-title: var(--color-blue-grey-600);
--color-cluster-ddg-border: var(--color-blue-grey-600);
--color-cluster-toggle-icon: var(--color-grey-3);
--color-cluster-toggle-border: var(--color-blue-grey-300);
--color-cluster-toggle-bg: #ffffff;
--color-cluster-toggle-bg-hover: var(--color-blue-grey-200);
--color-cluster-topology: var(--color-blue-grey-600);
--color-cluster-topology-bg: transparent;
--color-cluster-type-standalone-bg: var(--color-main-blue);
--color-cluster-type-standalone-text: #ffffff;
--color-cluster-type-daa-bg: var(--color-blue-grey-400);
--color-cluster-type-daa-text: var(--color-blue-grey-700);
--color-cluster-type-cap-bg: var(--color-blue-grey-700);
--color-cluster-type-cap-text: #ffffff;
--color-cluster-type-caa-bg: var(--color-blue-grey-500);
--color-cluster-type-caa-text: #ffffff;
--color-cluster-type-subservice-bg: var(--color-blue-grey-1200);
--color-cluster-type-subservice-text: #ffffff;
--color-cluster-type-active-bg: var(--color-light-teal);
--color-cluster-type-active-text: #ffffff;
--color-cluster-type-passive-bg: var(--color-main-blue);
--color-cluster-type-passive-text: #ffffff;
--color-cluster-add-btn-text: var(--color-blue-grey-400);
--color-datatable-bg: #ffffff;
--color-datatable-border: var(--color-blue-grey-300);
--color-datatable-header-border: var(--color-grey-1);
--color-datatable-text: var(--color-grey-3);
--color-datatable-text-title: var(--color-grey-2);
--color-datatable-icon: var(--color-blue-grey-500);
--color-datatable-icon-copy: var(--color-main-blue);
--color-bg-info: var(--color-blue-grey-500);
--color-totop-bg: var(--color-blue-grey-400);
--color-totop-icon: var(--color-blue-grey-500);
--color-help-bg: var(--color-blue-grey-100);
--color-help-text: var(--color-grey-3);
--color-help-icon: #ffffff;
--color-form-bg: #ffffff;
--color-form-text: var(--color-grey-3);
--color-form-text-title: var(--color-blue-grey-600);
--color-form-text-edit: var(--color-main-blue);
--color-form-text-label: var(--color-grey-2);
--color-form-text-description: var(--color-blue-grey-500);
--color-form-border: var(--color-blue-grey-300);
--color-form-separator: var(--color-blue-grey-300);
--color-form-element-active-bg: var(--color-main-teal);
--color-form-element-active: #ffffff;
--color-cluster-add-btn-bg: var(--color-blue-grey-200);
--color-cluster-add-btn-text: var(--color-blue-grey-500);
--gradient-cluster-shadow: linear-gradient(0deg, rgba(88,88,89,0) 0%, rgba(88,88,89,0.04) 100%);
--gradient-notification-border: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
--gradient-submenu-shadow: linear-gradient(0deg, rgba(38,50,56,0) 0%, rgba(38,50,56,0.02) 20%);
--image-cluster-blocked-bg: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%3E%3CclipPath%20id%3D%22clip%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url%28%23clip%29%22%3E%3Crect%20x%3D%22-5.1%22%20y%3D%22-58.2%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2012.5325%20-5.2562%29%22%20fill%3D%22%23ECEFF1%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3Crect%20x%3D%2219.9%22%20y%3D%22-33.2%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2037.5325%20-15.6116%29%22%20fill%3D%22%23DDE3E6%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3Crect%20x%3D%2244.9%22%20y%3D%22-8.2%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2062.5325%20-25.9669%29%22%20fill%3D%22%23ECEFF1%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3Crect%20x%3D%2269.7%22%20y%3D%2216.8%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2087.4674%20-36.1651%29%22%20fill%3D%22%23DDE3E6%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--shadow-inner: inset 2px 2px 4px -2px rgba(0,0,0,0.15);
--shadow-inner-hover: inset 0 0 0 0 rgba(0,0,0,0.15), 2px 2px 4px -2px rgba(0,0,0,0.15);
--shadow-inner-small: inset 2px 2px 2px -1px rgba(0,0,0,0.1);
--shadow-inner-small-hover: inset 0 0 0 0 rgba(0,0,0,0.1), 2px 2px 2px -1px rgba(0,0,0,0.1);
--shadow-outer: 0 2px 5px 0 rgba(0,0,0,0.15);
--shadow-outer-small: 0 2px 2px 0 rgba(0,0,0,0.1);
}
HTML, BODY {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
text-align: left;
font-size: var(--font-size);
line-height: var(--line-height);
font-family: var(--font-family);
font-weight: var(--font-weight-normal);
color: var(--color-text);
background: var(--color-bg);
box-sizing: border-box;
scroll-behavior: smooth;
}
BODY {
padding-top: 3.75em;
padding-right: 0;
padding-bottom: 0;
padding-left: 4.625em;
transition: padding 0.2s;
position: relative;
}
BODY * {
box-sizing: border-box;
scroll-behavior: smooth;
}
A, SPAN.a {
color: var(--color-main-blue);
text-decoration: none;
cursor: pointer;
}
A:hover, SPAN.a:hover {
text-decoration: underline;
}
B, STRONG {
font-weight: var(--font-weight-medium);
}
.clear:after, .container:after {
content: '';
display: block;
clear: both;
visibility: hidden;
font-size: 0;
line-height: 0;
}
.btn, A.btn, INPUT[type=submit], INPUT[type=button], .button, A.button {
--btn-border-color: transparent;
--btn-bg-color: transparent;
--btn-text-color: currentColor;
font-size: 1rem;
line-height: 1.5;
display: inline-block;
padding: calc(0.5em - 1px) calc(1.3em - 1px);
border: 1px solid var(--btn-border-color);
background: var(--btn-bg-color);
color: var(--btn-text-color);
border-radius: 1.25em;
text-decoration: none;
cursor: pointer;
text-align: center;
transition: all 0.2s;
}
.btn:not(:disabled):hover, A.btn:not(:disabled):hover, INPUT[type=submit]:not(:disabled):hover, INPUT[type=button]:not(:disabled):hover, .button:not(:disabled):hover, A.button:not(:disabled):hover {
--btn-text-color: var(--btn-bg-color);
background: transparent;
}
INPUT[type=submit] {
--btn-border-color: var(--color-main-teal);
--btn-bg-color: var(--color-main-teal);
--btn-text-color: #ffffff;
}
.btn.grey, A.btn.grey, INPUT[type=submit].grey, INPUT[type=button].grey, .button.grey, A.button.grey {
--btn-border-color: var(--color-btn-grey);
--btn-bg-color: var(--color-btn-grey);
--btn-text-color: #ffffff;
}
.btn.teal, A.btn.teal, INPUT[type=submit].teal, INPUT[type=button].teal, .button.teal, A.button.teal {
--btn-border-color: var(--color-btn-green);
--btn-bg-color: var(--color-btn-green);
--btn-text-color: #ffffff;
}
.btn.orange, A.btn.orange, INPUT[type=submit].orange, INPUT[type=button].orange, .button.orange, A.button.orange {
--btn-border-color: var(--color-btn-red);
--btn-bg-color: var(--color-btn-red);
--btn-text-color: #ffffff;
}
.btn.transparent, A.btn.transparent, INPUT[type=submit].transparent, INPUT[type=button].transparent, .button.transparent, A.button.transparent {
--btn-border-color: transparent;
--btn-bg-color: transparent;
--btn-text-color: currentColor;
}
.btn.transparent_grey, A.btn.transparent_grey, INPUT[type=submit].transparent_grey, INPUT[type=button].transparent_grey, .button.teal, A.button.transparent_grey {
--btn-border-color: var(--color-btn-light-grey);
--btn-bg-color: transparent;
--btn-text-color: var(--color-btn-light-grey);
}
.btn.transparent_teal, A.btn.transparent_teal, INPUT[type=submit].transparent_teal, INPUT[type=button].transparent_teal, .button.teal, A.button.transparent_teal {
--btn-border-color: var(--color-btn-green);
--btn-bg-color: transparent;
--btn-text-color: var(--color-btn-green);
}
.btn.transparent_orange, A.btn.transparent_orange, INPUT[type=submit].transparent_orange, INPUT[type=button].transparent_orange, .button.transparent_orange, A.button.transparent_orange {
--btn-border-color: var(--color-btn-red);
--btn-bg-color: transparent;
--btn-text-color: var(--color-btn-red);
}
.btn.transparent_grey:not(:disabled):hover, A.btn.transparent_grey:not(:disabled):hover, INPUT[type=submit].transparent_grey:not(:disabled):hover, INPUT[type=button].transparent_grey:not(:disabled):hover, .button.transparent_grey:not(:disabled):hover, A.button.transparent_grey:not(:disabled):hover, .btn.transparent_teal:not(:disabled):hover, A.btn.transparent_teal:not(:disabled):hover, INPUT[type=submit].transparent_teal:not(:disabled):hover, INPUT[type=button].transparent_teal:not(:disabled):hover, .button.transparent_teal:not(:disabled):hover, A.button.transparent_teal:not(:disabled):hover, .btn.transparent_orange:not(:disabled):hover, A.btn.transparent_orange:not(:disabled):hover, INPUT[type=submit].transparent_orange:not(:disabled):hover, INPUT[type=button].transparent_orange:not(:disabled):hover, .button.transparent_orange:not(:disabled):hover, A.button.transparent_orange:not(:disabled):hover {
--btn-text-color: #ffffff;
background: var(--btn-border-color);
}
.btn.transparent:not(:disabled):hover, A.btn.transparent:not(:disabled):hover, INPUT[type=submit].transparent:not(:disabled):hover, INPUT[type=button].transparent:not(:disabled):hover, .button.transparent:not(:disabled):hover, A.button.transparent:not(:disabled):hover {
--btn-border-color: currentColor;
--btn-bg-color: transparent;
--btn-text-color: currentColor;
}
.btn .icon, A.btn .icon, INPUT[type=submit] .icon, INPUT[type=button] .icon, .button .icon, A.button .icon {
display: inline-block;
width: 1em;
margin-left: -0.5em;
margin-right: 0.25em;
font-weight: var(--font-weight-bold);
}
.btn.disabled, A.btn.disabled, INPUT[type=submit]:disabled, INPUT[type=button]:disabled, .button.disabled, A.button.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.hidden {
display: none;
}
.invisible {
visibility: hidden;
}
.center {
margin-left: auto;
margin-right: auto;
}
.align_left {
text-align: left;
}
.align_center {
text-align: center;
}
.align_right {
text-align: right;
}
.inner_shadow {
position: relative;
overflow: hidden;
transition: all 0.2s;
}
.inner_shadow:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: -500px;
right: -500px;
border-radius: inherit;
box-shadow: var(--shadow-inner);
transition: all 0.2s;
}
.inner_shadow_small:after {
box-shadow: var(--shadow-inner-small);
}
.inner_shadow_bg {
box-shadow: var(--shadow-inner);
transition: all 0.3s;
}
.inner_shadow_bg_small {
box-shadow: var(--shadow-inner-small);
}
.shadow {
box-shadow: var(--shadow-outer);
}
.help_item {
display: none;
}
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3.75em;
border-bottom: 1px solid var(--color-menu-border);
z-index: 10;
padding: 0.875em 1.5em 0.875em 14.525em;
background: var(--color-menu-bg);
color: var(--color-blue-grey-700);
display: flex;
gap: 5em;
justify-content: space-between;
text-align: left;
}
#header .side {
display: flex;
gap: 1.5em;
}
#header .side.right {
gap: 0.75em;
justify-content: flex-end;
}
#header .side > * {
flex-shrink: 0;
flex-grow: 0;
}
#header DIV.logo {
position: absolute;
top: 50%;
left: 0;
width: 13.125em;
height: 1.875em;
transform: translateY(-50%);
text-align: center;
}
#header DIV.logo svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: var(--color-logo-main);
fill: var(--color-logo-secondary);
}
#header .cluster_shortcuts {
flex-grow: 1;
display: flex;
gap: 0.75em;
}
#header .cluster_shortcuts A {
display: block;
font-size: 1.125em;
line-height: 1.7778em;
height: 1.7778em;
text-decoration: none;
color: var(--color-top-bar-clusters-text);
background: var(--color-menu-bg-inset);
border-radius: 0.8889em;
padding: 0 0.6667em;
}
#header .cluster_shortcuts A.warning.active {
background: var(--color-yellow);
color: #ffffff;
}
#header .cluster_shortcuts A.error.active {
background: var(--color-red);
color: #ffffff;
}
#header .cluster_shortcuts A:hover:after {
box-shadow: var(--shadow-inner-hover);
}
#header .cluster_shortcuts A .number {
display: inline-block;
font-size: 1.333em;
line-height: 1.3333em;
min-width: 0.5em;
text-align: center;
font-weight: var(--font-weight-medium);
}
#header .search {
position: relative;
}
#header .search .icon {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 2em;
border-radius: 1em;
color: var(--color-top-bar-icon);
z-index: 1;
}
#header .search .icon svg {
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
transform: translate(-50%,-50%);
}
#header .search .form-item {
position: relative;
height: 2em;
border-radius: 1em;
color: var(--color-top-bar-icon);
background: var(--color-menu-bg-inset);
}
#header .search INPUT[type=text] {
position: relative;
z-index: 2;
width: 0;
background: transparent;
padding: 0 0 0 2em;
height: 2em;
border: 0;
font-size: 1rem;
font-family: var(--font-family);
color: var(--color-filter-text);
transition: all 0.2s 0.3s;
}
#header .search INPUT[type=text]:focus {
width: 20em;
padding-right: 1em;
transition: all 0.2s;
}
#header .search .results {
position: absolute;
top: 80%;
left: 0;
right: 0;
padding: 0.75em;
text-align: left;
background: var(--color-menu-bg-inset);
border-radius: 0.75em;
visibility: hidden;
opacity: 0;
transition: all 0.2s 0.3s;
}
#header .search .results.active {
top: calc(100% + 0.5em);
visibility: visible;
opacity: 1;
}
#header .search:not(:has(INPUT[type=text]:focus)) .results.active {
top: 80%;
visibility: hidden;
opacity: 0;
}
#header .search .results .section:not(:first-child) {
margin-top: 1em;
}
#header .search .results .section > .title {
font-weight: var(--font-weight-light);
font-size: 1.2em;
color: var(--color-top-bar-search-results-title)
}
#header .search .results .section .items {
margin-top: 0.75em;
}
#header .search .results .section .items > * {
display: block;
margin-top: 0.5em;
}
#header .search .results .section .items A {
color: var(--color-top-bar-search-results-text);
text-decoration: none;
}
#header .search .results .section .items A:hover {
color: var(--color-top-bar-search-results-text-hover);
text-decoration: none;
}
#header .search .results .section .items .cluster .namespace {
display: inline-block;
padding: 0.25em 0.5em;
border-radius: 0.8125em;
color: var(--color-top-bar-search-results-text);
border: 1px solid var(--color-top-bar-search-results-text);
}
#header .show_help {
display: block;
position: relative;
width: 2em;
height: 2em;
border-radius: 1em;
color: var(--color-top-bar-icon);
background: var(--color-menu-bg-inset);
}
#header .show_help:hover:after {
box-shadow: var(--shadow-inner-hover);
}
#header .show_help svg {
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
transform: translate(-50%,-50%);
}
#header .notifications {
position: relative;
width: 2em;
height: 2em;
text-align: center;
cursor: pointer;
}
#header .notifications .icon {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 1em;
color: var(--color-top-bar-icon);
background: var(--color-menu-bg-inset);
}
#header .notifications:hover .icon:after {
box-shadow: var(--shadow-inner-hover);
}
#header .notifications .icon svg {
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
transform: translate(-50%,-50%);
}
#header .notifications .number {
opacity: 0;
position: absolute;
top: -0.25rem;
right: -0.25rem;
padding: 0 0.25rem;
min-width: 1rem;
height: 1rem;
border-radius: 0.5rem;
font-size: 0.875em;
line-height: 1;
color: #ffffff;
background: var(--color-top-bar-notifications-number-bg);
text-align: center;
transition: all 0.1s;
}
#header .notifications .number.active {
opacity: 1;
}
#header .mobile_menu_icon {
display: none;
position: absolute;
top: 50%;
left: 1em;
width: 2em;
height: 2em;
transform: translateY(-50%);
cursor: pointer;
}
#header .mobile_menu_icon .menu_icon_line {
position: absolute;
left: 0.125em;
transform-origin: 50% 50%;
transform: rotate(0deg);
opacity: 1;
background: currentColor;
width: 1.75em;
height: 0.25em;
border-radius: 0.125em;
}
#sidebar {
position: fixed;
top: calc(3.75em - 1px);
left: 0;
bottom: 0;
z-index: 10;
width: 4.625em;
padding: 1.5em 0em 1em 1em;
background: var(--color-menu-bg);
color: var(--color-menu-text);
border-right: 1px solid var(--color-menu-border);
text-align: left;
transition: all 0.2s;
}
#sidebar .content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.5em;
}
#sidebar .content .navigation {
height: 100%;
overflow-y: auto;
scrollbar-width: thin;
}
#sidebar .content .navigation:-webkit-scrollbar {
width: 4px;
height: 4px;
}
#sidebar .content .navigation:-webkit-scrollbar-thumb {
background: var(--color-blue-grey-500);
border-radius: 4px;
}
#sidebar .content .info {
height: 10.625em;
position: relative;
flex-shrink: 0;
}
#sidebar .content .info .wr {
position: absolute;
bottom: 0;
left: 0;
width: 14.16667em;
font-size: 0.75em;
color: var(--color-blue-grey-500);
transform-origin: bottom left;
transform: rotate(-90deg) translateY(100%);
transition: all 0.2s;
}
#sidebar .toggle {
position: absolute;
right: 0;
bottom: 4em;
width: 1.5em;
height: 1.5em;
transform: translateX(50%);
cursor: pointer;
border-radius: 0.75em;
color: var(--color-menu-toggle-icon);
border: 1px solid var(--color-menu-toggle-border);
background: var(--color-menu-toggle-bg);
box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
opacity: 0;
z-index: 1;
transition: all 0.2s;
}
#sidebar .toggle:hover {
background: var(--color-menu-toggle-bg-hover);
box-shadow: var(--shadow-outer-small);
}
#sidebar .toggle .icon {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
transform: translate(-40%, -50%);
z-index: 1;
transition: all 0.2s;
}
#sidebar .toggle .icon svg {
width: 100%;
height: 100%;
fill: var(--color-menu-toggle-icon);
opacity: 1;
transition: all 0.2s;
}
#sidebar .menu {
margin-right: 1em;
}
#sidebar .menu UL, #sidebar .menu UL LI {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar .menu UL LI {
margin-top: 1.5em;
color: var(--color-menu-text);
padding-right: 2em;
}
#sidebar .menu UL LI:hover {
color: var(--color-menu-text-hover);
}
#sidebar .menu UL LI.active, #sidebar .menu UL LI.active:hover {
color: var(--color-menu-text-active);
}
#sidebar .menu A {
position: relative;
display: block;
color: currentColor;
padding-left: 1.625em;
line-height: 1.4444em;
overflow: hidden;
white-space: nowrap;
}
#sidebar .menu A:hover {
text-decoration: none;
}
#sidebar .menu A > .icon {
display: block;
position: absolute;
top: 50%;
left: 0.625em;
width: 1.125em;
height: 1.125em;
transform: translate(-50%, -50%);
}
#sidebar .menu A .arrow {
display: none;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 0.5em;
height: 1em;
background: var(--color-menu-bg);
}
#sidebar .menu A .arrow .icon {
display: block;
position: absolute;
top: 50%;
right: 0;
transform-origin: 50% 50%;
transform: translateY(-50%);
width: 100%;
height: 100%;
}
#sidebar .menu UL LI > UL {
display: none;
position: absolute;
top: 0;
left: 100%;
transform: translateY(0.2em);
padding: 0.75em;
background: var(--color-dropdown-bg);
border-radius: 4px;
box-shadow: var(--shadow-outer);
z-index: 2;
}
#sidebar .menu UL LI > UL:before {
content: "";
display: block;
position: absolute;
top: 1.45em;
left: 0;
transform: translateX(-100%);
line-height: 0;
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-right: 0.5em solid var(--color-dropdown-bg);
border-bottom: 0.5em solid transparent;
}
#sidebar .menu UL LI > UL:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: -2em;
width: 2em;
background: transparent;
}
#sidebar .menu UL LI > UL LI {
color: var(--color-dropdown-text);
padding-left: 0;
padding-right: 0;
margin-top: 0;
}
#sidebar .menu UL LI > UL LI:not(:first-child) {
margin-top: 0.25em;
}
#sidebar .menu UL LI > UL LI:hover {
color: var(--color-dropdown-text-hover);
}
#sidebar .menu UL LI > UL LI A {
padding-left: 0;
}
#sidebar .menu UL LI > UL LI.separator {
position: relative;
padding-top: 0.5em;
padding-bottom: 0.25em;
}
#sidebar .menu UL LI > UL LI.separator:after {
content: "";
display: block;
position: absolute;
top: 0.5em;
left: 0;
right: 0;
border-top: 1px solid var(--color-menu-border);
}
#sidebar .menu UL LI > UL LI.add_more {
color: var(--color-dropdown-text-2);
}
#sidebar .menu UL LI > UL LI.add_more:hover {
color: var(--color-dropdown-text-2-hover);
}
#sidebar .menu UL LI > UL LI.w_submenu {
position: relative;
}
#sidebar .menu UL LI > UL LI.w_submenu > A {
padding-right: 1.5em;
}
#sidebar .menu UL LI > UL LI.w_submenu > A > .arrow {
background: none;
}
#sidebar .menu UL LI > UL LI.w_submenu > UL {
top: 0;
transform: translateY(-1em);
left: calc(100% - 0.15em);
}
#sidebar .menu UL LI.w_submenu > A {
padding-right: 0.5em;
}
#sidebar .menu UL LI.w_submenu > A > .arrow {
display: block;
}
#sidebar .menu UL LI.w_submenu:hover > UL {
display: block;
}
#sidebar .menu.main_menu > UL > LI:first-of-type {
margin-top: 0;
}
/** ALTERED CLUSTER SIDEBAR IN MENU **/
/** fixes cluster list loading to one row on firefox on the first hover */
#sidebar .menu.main_menu UL LI.clusters:hover > UL {
visibility: visible;
}
#sidebar .menu.main_menu UL LI.clusters > UL {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(auto-fit, minmax(23px, 1fr));
visibility: hidden;
max-height: calc(100% - 6em);
padding-left: 0;
padding-right: 0;
padding-top: 0.5em;
}
#sidebar .menu UL LI > UL LI {
margin-top: 0.25em;
}
#sidebar .menu.main_menu UL LI.clusters > UL > LI {
display: block;
margin-left: 1em;
margin-right: 1em;
}
/** END ALTERED CLUSTER SIDEBAR IN MENU **/
#sidebar .menu.main_menu UL LI.clusters > UL > LI > A {
white-space: nowrap;
}
#sidebar .menu.main_menu UL LI > UL {
transform: translateY(0.5em);
}
#sidebar .menu.main_menu > UL > LI > A {
font-size: 1.125em;
line-height: 1.4444em;
padding-left: 2.1111em;
}
#sidebar .menu.main_menu A > .icon {
left: 0.7222em;
width: 1.4444em;
height: 1.4444em;
}
#sidebar .menu.secondary_menu {
margin-top: 2em;
border-top: 1px solid var(--color-menu-border);
padding-top: 0.667em;
}
#sidebar_closer {
position: fixed;
left: 13.125em;
bottom: 4em;
width: 2em;
height: 2em;
transform: translateX(-50%);
z-index: 10000;
}
#notifications .sidebar {
position: fixed;
top: calc(3.75em - 1px);
right: 0;
bottom: 0;
z-index: 11;
width: 12.75em;
padding: 0.75em;
background: var(--color-menu-bg);
color: var(--color-menu-text);
border-left: 1px solid var(--color-menu-border);
text-align: left;
transform: translateX(100%);
transition: all 0.2s;
}
#notifications .sidebar:-webkit-scrollbar {
width: 4px;
height: 4px;
}
#notifications .sidebar:-webkit-scrollbar-thumb {
background: var(--color-medium-light-grey);
border-radius: 4px;
}
#notifications .sidebar .clear_all {
text-align: right;
font-size: 0.75em;
cursor: pointer;
}
#notifications .sidebar .list {
padding: 0 0 1em 1em;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
#notifications .toggle {
position: absolute;
left: 0;
bottom: 4em;
width: 1.5em;
height: 1.5em;
transform: translateX(-50%);
cursor: pointer;
border-radius: 0.75em;
color: var(--color-menu-toggle-icon);
border: 1px solid var(--color-menu-toggle-border);
background: var(--color-menu-toggle-bg);
box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
z-index: 1;
opacity: 0;
transition: all 0.2s;
}
#notifications .toggle:hover {
background: var(--color-menu-toggle-bg-hover);
box-shadow: var(--shadow-outer-small);
}
#notifications .toggle .icon {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
transform: translate(-60%, -50%) scaleX(-1);
z-index: 1;
transition: all 0.2s;
}
#notifications .toggle .icon svg {
width: 100%;
height: 100%;
fill: var(--color-menu-toggle-icon);
opacity: 1;
transition: all 0.2s;
}
#notifications .floating {
position: fixed;
top: 3.75em;
right: 0;
z-index: 11;
width: 12em;
max-height: calc(100% - 3.75em);
padding: 0 1em;
overflow: hidden;
transform: translateX(0);
opacity: 1;
transition: all 0.3s;
}
#notifications .notification {
position: relative;
margin-top: 0.75em;
background: rgba(255,255,255,0.05);
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border: 1px solid;
border-left: 0;
border-right: 0;
border-bottom: 0;
border-image-slice: 1;
border-image-source: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
-webkit-backdrop-filter: blur(50px);
backdrop-filter: blur(50px);
box-shadow: inset -16px -16px 16px -20px rgba(84,110,122,0.1), inset -5px -6px 3px -6px rgba(84,110,122,0.1), inset 0 6px 3px -6px #ffffff;
transition: all 0.2s;
}
#notifications .notification .text {
position: relative;
font-size: 0.75em;
padding: 0.6667em 0.6667em 0.6667em 1.3333em;
text-align: left;
color: var(--color-notification-text);
border-radius: 0.5em;
transform: translateX(0);
opacity: 1;
transition: all 0.2s;
}
#notifications .notification .text .text_inner {
max-height: 5.75em;
overflow: hidden;
text-overflow: ellipsis;
}
#notifications .notification .text .learn_more {
display: none;
}
#notifications .notification.truncated .text {
cursor: pointer;
}
#notifications .notification.truncated .learn_more {
display: inline;
}
#notifications .notification.away {
transform: translateX(calc(100% + 2em));
zoom: 1;
opacity: 0;
visibility: hidden;
}
#notifications .notification.away ~ #notifications .notification {
transform: translateY(-100%);
}
#notifications .notification.zoomed .text {
font-size: 1rem;
}
#notifications .notification.zoomed .text .text_inner {
max-height: none;
}
#notifications .notification.zoomed .learn_more {
font-size: 0;
}
#notifications .notification .close {
position: absolute;
top: -1px;
right: 100%;
bottom: 0;
width: 0.5em;
border-top: 1px solid #ffffff;
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
color: #ffffff;
box-shadow: inset 2px 6px 3px -6px #ffffff;
cursor: pointer;
transition: all 0.2s;
}
#notifications .notification.type_info .close {
background: var(--color-main-blue);
}
#notifications .notification.type_ok .close {
background: var(--color-green);
}
#notifications .notification.type_warning .close {
background: var(--color-yellow);
}
#notifications .notification.type_error .close {
background: var(--color-red);
}
#notifications .notification .close .icon {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%,-50%);
transition: all 0.2s;
}
#notifications .notification .close:hover {
width: 1em;
}
#notifications .notification .close:hover .icon {
width: 0.5em;
height: 0.5em;
}
#bg_info {
position: absolute;
padding: 3em;
bottom: 0;
right: 0;
left: 5.625em;
color: var(--color-bg-info);
display: flex;
gap: 1em 3em;
flex-wrap: wrap;
justify-content: space-between;
opacity: 0.5;
z-index: 0;
transition: all 0.2s;
}
#bg_info .logo {
width: 8em;
height: 1.25em;
}
#bg_info .logo svg {
width: 100%;
height: 100%;
fill: currentColor;
}
#bg_info .copyright {
font-size: 0.75em;
text-align: left;
flex: 1;
min-width: 18em;
max-width: 45em;
}
#submenu {
display: none;
position: fixed;
top: 3.75em;
left: 4.625em;
right: 0;
height: 2.625em;
z-index: 2;
padding: 0 1.5em;
background: var(--color-submenu-bg);
color: var(--color-submenu-text);
justify-content: space-between;
gap: 1em;
transition: all 0.2s;
}
#submenu .side {
display: flex;
gap: 1em;
}
#submenu .block {
display: flex;
align-items: center;
gap: 1em;
}
#submenu .item {
position: relative;
padding-left: 1.875em;
display: block;
height: 2.25em;
line-height: 2.25em;
cursor: default;
}
#submenu .item.no_icon {
padding-left: 0;
}
#submenu .item .icon {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
display: block;
width: 1.375em;
}
#submenu .item.switch {
padding-left: 0;
}
#submenu .item.switch .state {
position: relative;
opacity: 0;
z-index: 1;
padding-left: 1.875em;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
#submenu .item.switch .state:hover {
color: var(--color-submenu-text-hover);
}
#submenu .item.switch .state:not(:first-child) {
transform: translateY(-100%);
}
#submenu .item.switch .state.active {
opacity: 1;
z-index: 2;
}
#submenu .item.switch .state.no_icon {
padding-left: 0;
}
#submenu .item.filter {
max-width: 20em;
min-width: 12em;
height: 2em;
background: var(--color-filter-bg);
color: var(--color-filter-text);
border-radius: 1em;
padding: 1px 1px 1px 1em;
}
#submenu .item.filter FORM {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 2em;
position: relative;
z-index: 2;
}
#submenu .item.filter FORM .icon {
width: 1.35em;
}
#submenu .item.filter .form-item {
font-size: 0;
line-height: 0;
flex-grow: 1;
height: 100%;
}
#submenu .item.filter .form-item INPUT {
width: 100%;
height: 1.875em;
padding: 0;
border: 0;
background: none;
font-size: 1rem;
font-family: var(--font-family);
color: var(--color-filter-text);
}
#submenu .item.filter .form-actions {
font-size: 0;
line-height: 0;
}
#submenu .item.filter .form-actions INPUT {
height: 1.875em;
padding: 0 0.9375em;
border-radius: 0.9375em;
background: var(--color-filter-button-bg);
border: 1px solid var(--color-filter-button-bg);
color: var(--color-filter-button-text);
transition: all 0.2s;
}
#submenu .item.filter .form-actions INPUT:hover {
background: var(--color-filter-button-text);
color: var(--color-filter-button-bg);
}
BODY.show_submenu {
padding-top: 6.375em;
}
BODY.show_submenu #submenu {
display: flex;
}
#main {
padding: 1.5em;
position: relative;
z-index: 1;
}
#main.dashboard {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 1.5em;
}
#main.dashboard .block {
background: var(--color-dashboard-block-bg);
color: var(--color-dashboard-block-text);
border-radius: 0.5em;
padding: 1.5em;
position: relative;
}
#main.dashboard .block .shadow_render {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
overflow: hidden;
}
#main.dashboard .block .shadow_render:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: -500px;
right: -500px;
border-radius: inherit;
box-shadow: var(--shadow-inner);
}
#main.dashboard .block.col1 {
grid-column-start: span 1;
}
#main.dashboard .block.col2 {
grid-column-start: span 2;
}
#main.dashboard .block.col3 {
grid-column-start: span 3;
}
#main.dashboard .block.col4 {
grid-column-start: span 4;
}
#main.dashboard .block.col5 {
grid-column-start: span 5;
}
#main.dashboard .block.col6 {
grid-column-start: span 6;
}
#main.dashboard .block.col7 {
grid-column-start: span 7;
}
#main.dashboard .block.col8 {
grid-column-start: span 8;
}
#main.dashboard .block.col9 {
grid-column-start: span 9;
}
#main.dashboard .block.col10 {
grid-column-start: span 10;
}
#main.dashboard .block.col11 {
grid-column-start: span 11;
}
#main.dashboard .block.col12 {
grid-column-start: span 12;
}
#main.dashboard .block > .title {
font-size: 1.5em;
font-weight: var(--font-weight-light);
margin-bottom: 1.5em;
}
#main.dashboard .block > .subtitle {
font-size: 1.25em;
margin-bottom: 1.5em;
}
#main.dashboard .block > .content {
position: relative;
}
#main.dashboard .block > .buttons {
position: absolute;
top: 1.2em;
right: 1.2em;
}
#main.dashboard .block > .buttons .btn {
margin-left: 0.5em;
}
#main.dashboard .block.info TABLE {
border: none;
}
#main.dashboard .block.info TABLE TD {
padding: 0.5em 0.5em 0;
margin: 0;
white-space: nowrap;
}
#main.dashboard .block.info TABLE TR:first-child TD {
padding-top: 0;
}
#main.dashboard .block.info TABLE TD:first-child {
padding-left: 0;
}
#main.dashboard .block.info TABLE TD:last-child {
padding-right: 0;
}
#main.dashboard .block.clusters > .content:not(.empty) {
display: flex;
flex-wrap: wrap;
gap: 1.5em;
}
#main.dashboard .block.clusters > .content .btn_wr:not(:first-child) {
margin-top: 1em;
}
#main.dashboard .block.clusters > .content .btn {
background: var(--color-cluster-main-bg);
color: var(--color-cluster-main-text);
border: 1px solid var(--color-cluster-main-border);
}
#main.dashboard .block.clusters > .content .btn.inner_shadow_bg:hover {
box-shadow: var(--shadow-inner-hover);
}
#main.dashboard .block.configuration .content {
display: flex;
justify-content: center;
}
#main.dashboard .block.configuration FORM .textfield .field-content {
max-width: 288px;
}
#main.clusters .filters_wr {
display: flex;
justify-content: space-between;
gap: var(--size-m) var(--size-xl);
margin-bottom: 1.5em;
align-items: flex-end;
flex-wrap: wrap;
}
#main.clusters .filters_wr .filters {
min-width: 288px;
flex-grow: 1;
}
#main.clusters .filters_wr .sort {
text-align: right;
}
#main.clusters .filters_wr .title {
font-size: 0.625em;
color: var(--color-cluster-text-title);
text-align: left;
}
#main.clusters .filters_wr .filters .content {
display: flex;
gap: var(--size-xxs);
flex-wrap: wrap;
margin-top: var(--size-xxxs);
}
#main.clusters .filters_wr .filters .content .item {
padding: 0.25em 0.5em;
border-radius: 0.8125em;
border: 1px solid var(--color-blue-grey-600);
transition: all 0.2s;
}
#main.clusters .filters_wr .filters .content .item .icon {
display: inline-block;
vertical-align: middle;
vertical-align: 0.05em;
width: 0.65em;
height: 0.65em;
cursor: pointer;
color: var(--color-blue-grey-600);
transition: all 0.2s;
}
#main.clusters .filters_wr .filters .content .item:has(.icon:hover) {
background: var(--color-blue-grey-600);
color: #ffffff;
}
#main.clusters .filters_wr .filters .content .item .icon:hover {
color: #ffffff;
}
#main.clusters .filters_wr .filters .content .item.add {
display: none; /* temporarily */
padding: 0.25em 0.25em;
width: calc(1.5em + 2px);
text-align: center;
cursor: pointer;
color: var(--color-blue-grey-600);
transition: all 0.2s;
}
#main.clusters .filters_wr .filters .content .item.add .icon {
transform: rotate(45deg);
color: currentColor;
}
#main.clusters .filters_wr .filters .content .item.add:hover {
background: var(--color-blue-grey-600);
color: #ffffff;
}
#main.clusters .filters_wr .sort {
display: none; /* temporarily */
}
#main.clusters .filters_wr .sort .content {
position: relative;
}
#main.clusters .filters_wr .sort SELECT {
position: relative;
z-index: 2;
border: none;
background: none;
padding: 0 0.75rem 0 0;
font-family: var(--font-family);
}
#main.clusters .filters_wr .sort .icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 0.5rem;
height: 0.5rem;
z-index: 1;
}
BODY.sidebar_expanded {
padding-left: 13.125em;
}
BODY.sidebar_expanded #sidebar {
width: 13.125em;
}
BODY.sidebar_expanded #sidebar .content .info {
height: 2.25em;
}
BODY.sidebar_expanded #sidebar .content .info .wr {
transform: rotate(0deg) translateY(0);
}
BODY.sidebar_expanded #sidebar .toggle {
opacity: 1;
}
BODY.sidebar_expanded #sidebar .toggle .icon {
transform: translate(-60%, -50%) scaleX(-1);
}
BODY.sidebar_expanded #sidebar .menu UL LI {
padding-right: 0;
}
BODY.sidebar_expanded #sidebar .menu UL LI > UL {
left: 100%;
}
BODY.sidebar_expanded #bg_info {
left: 14.525em;
}
BODY.sidebar_expanded #submenu {
left: 13.125em;
}
BODY:not(.sidebar_expanded):has(#sidebar:hover) {
/* padding-left: 13.125em;*/
}
BODY:not(.sidebar_expanded):has(#sidebar:hover) #sidebar {
width: 13.125em;
}
BODY:not(.sidebar_expanded):has(#sidebar:hover) #sidebar .content .info {
height: 2.25em;
}
BODY:not(.sidebar_expanded):has(#sidebar:hover) #sidebar .content .info .wr {
transform: rotate(0deg) translateY(0);
}
BODY:not(.sidebar_expanded):has(#sidebar:hover) #sidebar .toggle {
opacity: 1;
}
BODY:not(.sidebar_expanded):has(#sidebar:hover) #sidebar .menu UL LI {
padding-right: 0;
}
BODY:not(.sidebar_expanded):has(#sidebar:hover) #sidebar .menu UL LI > UL {
left: 100%;
}
BODY.notifications_expanded {
padding-right: 12.725em;
}
BODY.notifications_expanded #notifications .sidebar {
transform: translateX(0);
}
BODY.notifications_expanded #notifications .toggle {
opacity: 1;
}
BODY.notifications_expanded #notifications .toggle .icon {
transform: translate(-40%, -50%);
}
BODY.notifications_expanded #notifications .floating {
transform: translateX(100%);
}
BODY.notifications_expanded #bg_info {
right: 14.025em;
}
BODY.notifications_expanded #submenu {
right: 12.75em;
}
.icon {
position: relative;
aspect-ratio: 1/1;
}
.icon.green {
color: var(--color-green) !important;
}
.icon.yellow {
color: var(--color-yellow) !important;
}
.icon.red {
color: var(--color-red) !important;
}
.icon svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: currentColor;
}
.w_info_popup {
white-space: nowrap;
}
.w_info_popup .info_popup {
position: relative;
display: inline-block;
cursor: help;
}
.w_info_popup .info_popup:hover .icon {
position: relative;
z-index: 2;
}
.w_info_popup .info_popup:hover .popup {
display: block;
}
.w_info_popup .info_popup .icon {
display: block;
width: 0.8333em;
height: 0.8333em;
}
.w_info_popup .info_popup .popup {
display: none;
position: absolute;
right: -0.5em;
top: 100%;
width: minmax(150px, 100%);
background: var(--color-dropdown-bg);
color: var(--color-dropdown-text);
padding: 0.75em;
line-height: 1.5;
white-space: normal;
border-radius: 0.3333em;
box-shadow: var(--shadow-outer);
transform: translateY(0.6em);
z-index: 3;
}
.w_info_popup .info_popup .popup.text {
min-width: 15em;
max-width: 100%;
}
.w_info_popup .info_popup .popup:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0.4em;
transform: translateY(-100%);
line-height: 0;
width: 0;
height: 0;
border-right: 0.5em solid transparent;
border-bottom: 0.5em solid var(--color-dropdown-bg);
border-left: 0.5em solid transparent;
}
.w_info_popup .info_popup .popup:after {
content: "";
display: block;
position: absolute;
top: -0.8em;
right: 0;
width: 4em;
height: 1em;
background: transparent;
}
.w_info_popup .info_popup.align_left .popup {
left: -0.5em;
right: auto;
}
.w_info_popup .info_popup.align_left .popup:before {
left: 0.4em;
right: auto;
}
.w_info_popup .info_popup.align_left .popup:after {
left: 0;
right: auto;
}
.connections.w_info_popup .info_popup .popup TABLE {
border: none;
}
.connections.w_info_popup .info_popup .popup TABLE TD {
padding: 0 0.5em;
margin: 0;
white-space: nowrap;
}
.connections.w_info_popup .info_popup .popup TABLE TD:first-child {
padding-left: 0;
}
.connections.w_info_popup .info_popup .popup TABLE TD:last-child {
padding-right: 0;
text-align: right
}
.w_popup {
white-space: nowrap;
position: relative;
display: inline-block;
cursor: help;
}
.w_popup .popup {
display: none;
position: absolute;
right: -0.2em;
top: 100%;
width: clamp(150px, 15em, 100%);
background: var(--color-dropdown-bg);
color: var(--color-dropdown-text);
padding: 0.75em;
line-height: 1.5;
white-space: normal;
border-radius: 0.3333em;
box-shadow: var(--shadow-outer);
transform: translateY(0.6em);
z-index: 3;
}
.w_popup .popup.text {
min-width: 15em;
max-width: 100%;
}
.w_popup .popup:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0.4em;
transform: translateY(-100%);
line-height: 0;
width: 0;
height: 0;
border-right: 0.5em solid transparent;
border-bottom: 0.5em solid var(--color-dropdown-bg);
border-left: 0.5em solid transparent;
}
.w_popup .popup:after {
content: "";
display: block;
position: absolute;
top: -0.8em;
right: 0;
width: 4em;
height: 1em;
background: transparent;
}
.w_popup:hover .popup {
display: block;
}
.cluster_small {
border-radius: 0.5em;
color: var(--color-cluster-main-text);
background: var(--color-cluster-main-bg);
border: 1px solid var(--color-cluster-main-border);
padding: 1em;
display: flex;
align-items: center;
gap: 0.75em;
}
.cluster_small.status_warning {
background: var(--color-cluster-main-bg-warning);
border-color: var(--color-cluster-main-border-warning);
}
.cluster_small.status_error {
background: var(--color-cluster-main-bg-error);
border-color: var(--color-cluster-main-border-error);
}
.cluster_small.error {
background: var(--color-cluster-main-bg-error);
border-color: var(--color-cluster-main-border-error);
}
.cluster_small .status_icon {
width: 1em;
aspect-ratio: 1/1;
flex-grow: 0;
border-radius: 0.5em;
background: var(--color-green);
}
.cluster_small.status_warning .status_icon {
background: var(--color-yellow);
}
.cluster_small.status_error .status_icon {
background: var(--color-red);
}
.cluster_small .topology {
font-weight: var(--font-weight-light);
line-height: 1.25em;
border: 1px solid var(--color-cluster-topology);
border-radius: 0.3333em;
color: var(--color-cluster-topology);
padding: 0 0.2em;
background: var(--color-cluster-topology-bg);
}
.cluster_small .info {
flex-basis: 50%;
flex-grow: 1;
line-height: 1;
align-self: center;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.75em;
}
.cluster_small .info .line {
display: flex;
gap: 0.5em;
justify-content: flex-start;
align-items: center;
}
.cluster_small .name {
font-size: 0.875em;
font-weight: var(--font-weight-bold);
}
.cluster_small .name A {
color: currentColor;
}
.cluster_small .namespace A {
flex: 0;
padding: 0.125em 0.5em;
margin-left: 0.5em;
border-radius: 0.8125em;
color: var(--color-cluster-main-namespace);
border: 1px solid var(--color-cluster-main-namespace);
background: var(--color-cluster-main-namespace-bg);
}
.cluster_small .namespace A:hover {
text-decoration: none;
color: var(--color-cluster-main-namespace-hover);
border: 1px solid var(--color-cluster-main-namespace-hover-bg);
background: var(--color-cluster-main-namespace-hover-bg);
}
.cluster_small .spacer {
flex-grow: 1;
}
.cluster_small .connections {
font-size: 0.75em;
white-space: nowrap;
margin-left: 1em;
}
.cluster_small .nodes_graph {
font-size: 0.75em;
white-space: nowrap;
}
.cluster_small .nodes_graph .node {
position: relative;
}
.cluster_small .nodes_graph .node .pimp {
display: none;
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -0.5em);
line-height: 0;
width: 0;
height: 0;
border-right: 0.5em solid transparent;
border-bottom: 0.5em solid var(--color-dropdown-bg);
border-left: 0.5em solid transparent;
}
.cluster_small .nodes_graph .node .popup {
display: none;
position: absolute;
left: -5em;
top: 100%;
min-width: 150px;
max-width: calc(100vh - 16px);
background: var(--color-dropdown-bg);
color: var(--color-dropdown-text);
padding: 0.75em;
line-height: 1.5;
white-space: normal;
border-radius: 0.3333em;
box-shadow: var(--shadow-outer);
z-index: 3;
}
.cluster_small .nodes_graph .node:hover .pimp, .cluster_small .nodes_graph .node:hover .popup {
display: block;
}
.cluster_small .nodes_graph .node .popup:after {
content: "";
display: block;
position: absolute;
top: -0.8em;
left: 0;
width: 1em;
height: 1em;
background: transparent;
}
.cluster_small .nodes_graph .node .popup TABLE {
border: none;
}
.cluster_small .nodes_graph .node .popup TABLE TD {
padding: 0 0.5em;
margin: 0;
white-space: nowrap;
}
.cluster_small .nodes_graph .node .popup TABLE TD:first-child {
padding-left: 0;
}
.cluster_small .nodes_graph .node .popup TABLE TD:last-child {
padding-right: 0;
}
.cluster_small .nodes_graph .node .popup TABLE TD.green {
color: var(--color-green) !important;
}
.cluster_small .nodes_graph .node .popup TABLE TD.yellow {
color: var(--color-yellow) !important;
}
.cluster_small .nodes_graph .node .popup TABLE TD.red {
color: var(--color-red) !important;
}
.cluster_small.error .status_icon {
display: none;
}
.cluster_small.error .topology {
display: none;
}
.cluster_small.error .type {
display: none;
}
.cluster_small.error .status {
font-size: 0.75em;
color: var(--color-cluster-main-text-error);
white-space: nowrap;
margin-left: 1em;
}
.cluster_small.error .error_text {
font-size: 0.75em;
}
.cluster_small.error .error_text .title {
color: var(--color-cluster-main-text-error-title);
}
.nodes_graph {
display: flex;
gap: 0.5em;
}
.nodes_graph .subcluster {
display: flex;
gap: 0.5em;
}
.nodes_graph .subcluster:not(:first-child) {
border-left: 1px solid var(--color-nodes-graph-separator);
padding-left: 0.5em;
}
.nodes_graph .icon {
display: block;
width: 0.5em;
aspect-ratio: 6/17;
}
.nodes_graph .icon svg {
width: 100%;
height: 100%;
}
#main .cluster {
background: var(--color-cluster-bg);
color: var(--color-cluster-text);
border-radius: 0.25em;
position: relative;
}
#main .cluster:not(:first-child) {
margin-top: 1.5em;
}
#main .cluster .cluster {
background: var(--color-cluster-bg-2);
}
#main .cluster .cluster .cluster {
background: var(--color-cluster-bg);
}
.cluster .main {
background: var(--color-cluster-main-bg);
color: var(--color-cluster-text);
border-radius: inherit;
border: 1px solid var(--color-cluster-main-border);
position: relative;
padding: 1em 1em 1em 2.5em;
min-height: 4.25em;
display: flex;
gap: 2em;
align-items: center;
justify-content: space-between;
}
.cluster .main .type_plate {
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
width: 1em;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.cluster .main .type_plate .text {
position: absolute;
top: 0;
left: 0;
width: 6.8em;
transform-origin: top left;
transform: rotate(-90deg) translateX(-100%);
font-size: 0.625em;
line-height: 1.6em;
text-align: center;
text-transform: uppercase;
}
.cluster .main .side {
display: flex;
gap: 1em 2em;
align-items: center;
flex-wrap: wrap;
flex-grow: 0;
}
.cluster .main .side.right {
justify-content: flex-end;
flex-wrap: nowrap;
}
.cluster .main .item {
flex-grow: 1;
flex-shrink: 0;
}
.cluster .main .item > .title {
font-size: 0.625em;
color: var(--color-cluster-text-title);
}
.cluster .main .item .content {
font-size: 0.875em;
}
.cluster .main .item.dropdown_selector {
position: relative;
}
.cluster .main .item.dropdown_selector .content {
cursor: pointer;
}
.cluster .main .item.dropdown_selector .content .arrow {
display: inline-block;
width: 0.5rem;
margin-left: 0.25rem;
}
.cluster .main .item.dropdown_selector .dropdown {
display: flex;
flex-direction: column;
font-size: 0.875em;
position: absolute;
top: 100%;
left: -0.5em;
background: var(--color-cluster-main-bg);
border-bottom-left-radius: 0.25em;
border-bottom-right-radius: 0.25em;
box-shadow: var(--shadow-outer-small);
z-index: 20;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
}
.cluster .main .item.dropdown_selector.active .dropdown {
opacity: 1;
visibility: visible;
}
.cluster .main .item.dropdown_selector .dropdown_item {
cursor: pointer;
padding: 0.25em 0.5em;
}
.cluster .main .item.dropdown_selector .dropdown_item.active {
display: none;
}
.cluster .dropdown_menu {
white-space: nowrap;
cursor: pointer;
font-size: 1rem;
}
.cluster .dropdown_menu > .icon {
display: inline-block;
width: 1.25em;
vertical-align: middle;
}
.cluster .dropdown_menu .dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
}
.cluster .dropdown_menu.active .dropdown .icon {
position: relative;
z-index: 2;
}
.cluster .dropdown_menu.active .dropdown .popup {
display: block;
cursor: default;
}
.cluster .dropdown_menu .dropdown .icon {
display: block;
width: 0.5em;
}
.dropdown_menu .dropdown .popup, .node_dropdown_popup {
display: none;
position: absolute;
right: -0.5em;
top: 100%;
background: var(--color-dropdown-bg);
color: var(--color-dropdown-text-heading);
line-height: 1.5;
white-space: normal;
border-radius: 0.3333em;
box-shadow: var(--shadow-outer);
transform: translateY(0.6em);
z-index: 3;
}
.node_dropdown_popup {
display: block;
transform: translate(-0.5em,1.8em);
}
.dropdown_menu .dropdown .popup:before, .node_dropdown_popup:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0.4em;
transform: translateY(-100%);
line-height: 0;
width: 0;
height: 0;
border-right: 0.5em solid transparent;
border-bottom: 0.5em solid var(--color-dropdown-bg);
border-left: 0.5em solid transparent;
}
.dropdown_menu .dropdown .popup UL, .dropdown_menu .dropdown .popup UL LI, .node_dropdown_popup UL, .node_dropdown_popup UL LI {
padding: 0;
margin: 0;
list-style: none;
}
.dropdown_menu .dropdown .popup UL, .node_dropdown_popup UL {
padding: 0.75em;
}
.dropdown_menu .dropdown .popup UL.secondary, .node_dropdown_popup UL.secondary {
background: var(--color-dropdown-bg-2);
}
.dropdown_menu .dropdown .popup UL LI, .node_dropdown_popup UL LI {
margin-top: 0.1667em;
white-space: nowrap;
font-size: 0.75em;
}
.dropdown_menu .dropdown .popup UL LI.title, .node_dropdown_popup UL LI.title {
color: var(--color-dropdown-text-heading);
margin-bottom: 0.5em;
}
.dropdown_menu .dropdown .popup UL LI.separator, .node_dropdown_popup UL LI.separator {
height: 1px;
background: var(--color-dropdown-separator);
margin: 1em 0;
}
.dropdown_menu .dropdown .popup UL LI A, .node_dropdown_popup UL LI A {
color: var(--color-dropdown-text);
}
.dropdown_menu .dropdown .popup UL LI A:hover, .node_dropdown_popup UL LI A:hover {
color: var(--color-dropdown-text-hover);
}
.cluster .main .item.status_icon {
width: 1em;
aspect-ratio: 1/1;
flex-grow: 0;
border-radius: 0.5em;
}
.cluster .main .item.name {
font-weight: var(--font-weight-medium);
font-size: 1rem;
flex-grow: 2;
}
.cluster .main .item.status_icon ~ .item.name {
margin-left: -1em;
}
.cluster .main .item.name .title {
font-weight: var(--font-weight-normal);
}
.cluster .main .item.status {
display: none;
}
.cluster .main .item.status.active {
display: block;
}
.cluster .main .item.status.green .content {
color: var(--color-green);
}
.cluster .main .item.status.yellow .content {
color: var(--color-yellow);
}
.cluster .main .item.status.yellow .content {
color: var(--color-yellow);
}
.cluster .main .item.status.red .content {
color: var(--color-red);
}
.cluster .main .item.status.green .content .info_popup, .cluster .main .item.status.yellow .content .info_popup, .cluster .main .item.status.red .content .info_popup {
color: var(--color-text);
}
.cluster .main .item.error {
display: none;
}
.cluster .main .item.error.active {
display: block;
}
.cluster .main .item.policy .content {
color: var(--color-yellow);
}
.cluster .main .item.policy .content .icon {
color: var(--color-cluster-text);
}
.cluster .main .item.policy.automatic .content {
color: var(--color-green);
}
.cluster .main .item.namespace {
flex: 0;
padding: 0.25em 0.5em;
border-radius: 0.8125em;
color: var(--color-cluster-main-namespace);
border: 1px solid var(--color-cluster-main-namespace);
cursor: default;
}
.cluster .main .item.status_icons {
display: flex;
gap: 0.75em;
flex-direction: row;
flex-wrap: nowrap;
}
.cluster .main .item.status_icons .icon {
display: none;
width: 1.3125em;
}
.cluster .main .item.status_icons .icon.active {
display: block;
}
.cluster .main .item.status_icons .icon.pointer {
cursor: pointer;
}
.cluster .main .item.lock .content {
min-width: 7em;
}
.cluster .main .item.lock .content .text {
white-space: nowrap;
}
.cluster .main .item.lock .content .text .icon {
font-size: 1rem;
display: inline-block;
width: 1em;
margin-right: 0.25em;
}
.cluster .main .item.lock .dropdown_item {
white-space: nowrap;
}
.cluster .main .item.lock .dropdown_item .icon {
font-size: 1rem;
display: inline-block;
width: 1em;
margin-right: 0.25em;
}
.cluster .main .item.dropdown_menu {
white-space: nowrap;
cursor: pointer;
margin-right: 0;
}
.cluster .main .toggle {
position: absolute;
left: 2.4em;
bottom: 0;
width: 1.5em;
height: 1.5em;
transform: translateY(50%);
cursor: pointer;
border-radius: 0.75em;
color: var(--color-cluster-toggle-icon);
border: 1px solid var(--color-cluster-toggle-border);
background: var(--color-cluster-toggle-bg);
box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
z-index: 1;
opacity: 1;
transition: all 0.2s;
}
.cluster .main .toggle:hover {
background: var(--color-cluster-toggle-bg-hover);
box-shadow: var(--shadow-outer-small);
}
.cluster .main .toggle .icon {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
transform: translate(-50%, -40%);
z-index: 1;
transition: all 0.2s;
}
.cluster .main .toggle .icon svg {
width: 100%;
height: 100%;
fill: var(--color-cluster-toggle-icon);
opacity: 1;
transition: all 0.2s;
}
.cluster.expanded > .main .toggle .icon {
transform: translate(-50%, -60%) scaleY(-1);
}
.cluster.error > .main .toggle {
display: none;
}
.cluster.standalone > .main .type_plate {
background: var(--color-cluster-type-standalone-bg);
color: var(--color-cluster-type-standalone-text);
}
.cluster.daa > .main .type_plate {
background: var(--color-cluster-type-daa-bg);
color: var(--color-cluster-type-daa-text);
}
.cluster.cap > .main .type_plate {
background: var(--color-cluster-type-cap-bg);
color: var(--color-cluster-type-cap-text);
}
.cluster.caa > .main .type_plate {
background: var(--color-cluster-type-caa-bg);
color: var(--color-cluster-type-caa-text);
}
.cluster.subservice > .main .type_plate {
background: var(--color-cluster-type-subservice-bg);
color: var(--color-cluster-type-subservice-text);
}
.cluster.active > .main .type_plate {
background: var(--color-cluster-type-active-bg);
color: var(--color-cluster-type-active-text);
}
.cluster.passive > .main .type_plate {
background: var(--color-cluster-type-passive-bg);
color: var(--color-cluster-type-passive-text);
}
.cluster.status_ok > .main .item.status_icon {
background: var(--color-green);
}
.cluster.status_warning > .main {
border-color: var(--color-yellow);
}
.cluster.status_warning > .main .item.status_icon {
background: var(--color-yellow);
}
.cluster.status_error > .main {
border-color: var(--color-red);
}
.cluster.status_error > .main .item.status_icon {
background: var(--color-red);
}
.cluster.error > .main {
border-color: var(--color-red);
background: var(--color-cluster-bg-fail);
}
.cluster.error > .main .type_plate {
display: none;
}
.cluster.error > .main .item:not(.namespace) {
display: none;
}
.cluster.error > .main .item.name {
display: block;
}
.cluster.error > .main .item.status {
display: block;
}
.cluster.error > .main .item.error {
display: block;
}
.cluster.error > .main .item.status {
color: var(--color-red);
}
.cluster.error > .main .item.status_icons {
display: flex;
}
.cluster.error > .main .item.actions {
display: block;
}
.cluster.error > .inner {
display: none;
}
.cluster .inner {
position: relative;
border-radius: inherit;
}
.cluster > .inner > .content {
display: none;
padding: 1em;
}
.cluster > .inner > .content > .edit_cluster {
display: none;
}
.cluster.expanded > .inner:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1em;
background: var(--gradient-cluster-shadow);
}
.cluster.expanded > .inner > .content {
display: block;
}
.cluster.expanded.edit > .inner > .content > * {
display: none;
}
.cluster.expanded.edit > .inner > .content > .edit_cluster {
display: block;
}
.cluster .inner .ddg {
padding: 0.75em;
border: 1px dashed var(--color-cluster-ddg-border);
border-radius: 0.5em;
}
.cluster .inner .ddg:not(:first-child) {
margin-top: 1em;
}
.cluster .inner .ddg > .title {
color: var(--color-cluster-ddg-title);
font-size: 0.875em;
font-weight: var(--font-weight-medium);
margin-bottom: 0.5714em;
}
.cluster .inner .subservice_wr {
margin-top: 1em;
padding-left: 1.25em;
position: relative;
}
.cluster .inner .subservice_wr > .icon {
display: block;
position: absolute;
top: 2em;
left: 0;
width: 1em;
transform: translateY(-50%);
opacity: 0.5;
}
.cluster > .block {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
justify-content: center;
align-items: center;
}
.cluster > .block:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
opacity: 0.5;
z-index: 1;
background: var(--image-cluster-blocked-bg) 0px 0px repeat;
background-size: 100px 100px;
animation: blocked_cluster_bg linear 1s infinite;
}
@keyframes blocked_cluster_bg {
0% {
background-position: 0px 0px;
}
100% {
background-position: 100px 0px;
}
}
.cluster > .block > * {
position: relative;
z-index: 2;
}
.cluster > .block .btn:hover {
background: var(--color-main-grey);
}
.cluster.blocked {
position: relative;
}
.cluster.blocked > .block {
display: flex;
}
.cluster.blocked .toggle {
opacity: 0;
}
.datatable {
overflow-x: auto;
scrollbar-width: thin;
}
.datatable:-webkit-scrollbar {
width: 8px;
height: 8px;
}
.datatable:-webkit-scrollbar-thumb {
background: var(--color-blue-grey-500);
border-radius: 8px;
}
.datatable TABLE {
border: none;
background: none;
border-collapse: separate;
margin: 0;
padding: 0;
width: 100%;
text-align: left;
color: var(--color-datatable-text);
}
.datatable TABLE TR {
height: 3em;
position: relative;
}
.datatable TABLE TH, .datatable TABLE TD {
vertical-align: middle;
white-space: nowrap;
background: var(--color-datatable-bg);
}
.datatable TABLE TH {
color: var(--color-datatable-text-title);
}
.datatable TABLE TH.separator, .datatable TABLE TD.separator {
width: 1px;
position: relative;
}
.datatable TABLE TH.separator:after, .datatable TABLE TD.separator:after {
content: "";
display: block;
position: absolute;
top: 0.4em;
bottom: 0.4em;
left: 0;
width: 1px;
background: var(--color-datatable-border);
}
.datatable TABLE TH.separator:after {
background: var(--color-datatable-header-border);
}
.datatable TABLE THEAD {
font-size: 0.6875em;
}
.datatable TABLE THEAD TR {
height: 3em;
}
.datatable TABLE THEAD TH {
padding: 0 0.5455em;
background: none;
}
.datatable TABLE THEAD TH:first-child {
padding-left: 1.0909em;
}
.datatable TABLE THEAD TH:last-child {
padding-right: 1.0909em;
}
.datatable TABLE TBODY {
font-size: 0.75em;
}
.datatable TABLE TBODY TR:first-child TD {
border-top: 1px solid var(--color-datatable-bg);
}
.datatable TABLE TBODY TR:first-child TD:first-child {
border-top-left-radius: 3px;
}
.datatable TABLE TBODY TR:first-child TD:last-child {
border-top-right-radius: 3px;
}
.datatable TABLE TBODY TR:last-child TD:first-child {
border-bottom-left-radius: 3px;
}
.datatable TABLE TBODY TR:last-child TD:last-child {
border-bottom-right-radius: 3px;
}
.datatable TABLE TBODY TR.status_warning ~ TR TD, .datatable TABLE TBODY TR.status_error ~ TR TD {
border-top: 1px solid var(--color-datatable-bg);
}
.datatable TABLE TBODY TR.status_warning TD {
border-color: var(--color-yellow) !important;
}
.datatable TABLE TBODY TR.status_error TD {
border-color: var(--color-red) !important;
}
.datatable TABLE TBODY TD {
padding: 0 0.5em;
border-top: 1px solid var(--color-datatable-border);
border-bottom: 1px solid var(--color-datatable-bg);
}
.datatable TABLE TBODY TD:first-child {
padding-left: 1em;
border-left: 1px solid var(--color-datatable-bg);
}
.datatable TABLE TBODY TD:last-child {
padding-right: 1em;
border-right: 1px solid var(--color-datatable-bg);
}
.datatable TABLE TBODY TD.green, .datatable TABLE TBODY TD .green {
color: var(--color-green);
}
.datatable TABLE TBODY TD.yellow, .datatable TABLE TBODY TD .yellow {
color: var(--color-yellow);
}
.datatable TABLE TBODY TD.red, .datatable TABLE TBODY TD .red {
color: var(--color-red);
}
.datatable TABLE TBODY TD.light_grey, .datatable TABLE TBODY TD .light_grey {
color: var(--color-datatable-text-title);
}
.datatable TABLE TBODY TD.name {
font-weight: var(--font-weight-medium);
}
.datatable.nodes TABLE TBODY TD.role {
padding-left: 0.5em;
text-transform: capitalize;
color: var(--color-datatable-text-title);
line-height: 1.417em;
}
.datatable.nodes TABLE TBODY TD.role .icon {
display: inline-block;
vertical-align: -0.3em;
width: 1.417em;
height: 1.417em;
}
.datatable.nodes TABLE TBODY TD.status_icons {
padding-left: 0;
font-size: 0;
}
.datatable.nodes TABLE TBODY TD.status_icons > * {
display: none;
font-size: 1rem;
width: 1em;
height: 1em;
margin: 0 0.125em;
color: var(--color-datatable-icon);
}
.datatable.nodes TABLE TBODY TD.status_icons > .active {
display: inline-block;
}
.datatable.nodes TABLE TBODY TD.status_icons > .note {
cursor: help;
}
.datatable.nodes TABLE TBODY TD.pipeline_src .icon {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
color: var(--color-datatable-icon-copy);
cursor: pointer;
}
.datatable.nodes TABLE TBODY TD.dropdown_menu {
text-align: right;
}
.datatable.nodes TABLE TBODY TD.dropdown_menu.active .dropdown .popup {
display: none;
}
.note_popup {
display: block;
position: absolute;
background: var(--color-dropdown-bg);
color: var(--color-dropdown-text);
line-height: 1.5;
white-space: normal;
border-radius: 0.3333em;
padding: 0.75em;
box-shadow: var(--shadow-outer);
transform: translate(0.3em,1.6em);
z-index: 3;
}
.note_popup:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0.4em;
transform: translateY(-100%);
line-height: 0;
width: 0;
height: 0;
border-right: 0.5em solid transparent;
border-bottom: 0.5em solid var(--color-dropdown-bg);
border-left: 0.5em solid transparent;
}
.note_popup:after {
content: "";
display: block;
position: absolute;
top: -0.75em;
left: 0;
right: 0;
height: 0.75em;
background: transparent;
}
.note_popup .text {
font-size: 0.75em;
}
.datatable.nodes TABLE TBODY TR.note_edit {
position: relative;
}
.datatable.nodes TABLE TBODY TR.note_edit TD {
text-align: center;
border-top: none;
padding: 0.75em;
}
.datatable.nodes TABLE TBODY TR.note_edit .form {
text-align: left;
margin: 0 auto;
width: calc(100vw - 8em);
max-width: 40em;
padding: 1em;
background: var(--color-cluster-bg-2);
border-radius: 1em;
}
.datatable.nodes TABLE TBODY TR.note_edit .form .textarea .field-content {
background: var(--color-datatable-bg);
border-radius: 0.75em;
}
BODY.simple_view .datatable.nodes .applied,
BODY.simple_view .datatable.nodes .relative,
BODY.simple_view .datatable.nodes .min_stored,
BODY.simple_view .datatable.nodes .max_stored,
BODY.simple_view .datatable.nodes .pipeline_src {
display: none;
}
#main FORM {
}
#main FORM > .title {
font-size: 1.25rem;
font-weight: var(--font-weight-light);
color: var(--color-form-text-title);
}
#main FORM .form-group:not(:first-child), #main FORM .form-item:not(:first-child) {
margin-top: 1em;
}
#main FORM .form-group .form-item:not(:first-child) {
margin-top: 1em;
}
#main FORM .form-item > LABEL, #main FORM .form-item .field-label {
padding: 0.375rem 1rem;
text-align: left;
font-size: 0.875em;
}
#main FORM .form-item > LABEL > .description, #main FORM .form-item .field-label > .description {
font-size: 0.875em;
color: var(--color-form-text-description);
}
#main FORM .form-item > LABEL SPAN.required, #main FORM .form-item .field-label SPAN.required {
color: var(--color-main-orange);
vertical-align: super;
font-size: 0.75em;
}
#main FORM .form-item .field-description {
padding: 0 1rem 0.375rem;
text-align: left;
font-size: 0.75em;
color: var(--color-form-text-description);
}
#main FORM .form-item .field-content {
min-width: 14em;
text-align: left;
line-height: 2.25em;
}
#main FORM .form-item.textfield .field-content {
border-radius: 1.125em;
border: 1px solid var(--color-form-border);
background: var(--color-form-bg);
}
#main FORM .form-item.password .field-content {
border-radius: 1.125em;
border: 1px solid var(--color-form-border);
background: var(--color-form-bg);
}
#main FORM .form-item.textarea .field-content {
border-radius: 1.125em;
border: 1px solid var(--color-form-border);
background: var(--color-form-bg);
}
#main FORM .form-item.select .field-content {
border-radius: 1.125em;
border: 1px solid var(--color-form-border);
background: var(--color-form-bg);
}
#main FORM .form-item .field-content .field-item {
position: relative;
display: inline;
}
#main FORM .form-item .field-content LABEL {
margin-right: 1em;
padding-left: 1.25em;
position: relative;
cursor: pointer;
color: var(--color-form-text-label);
}
#main FORM .form-item INPUT[type=text], #main FORM .form-item INPUT[type=email], #main FORM .form-item INPUT[type=password], #main FORM .form-item INPUT[type=number], #main FORM .form-item TEXTAREA {
font: 1rem/2.25 var(--font-family);
padding: 0 1.125em;
background: transparent;
color: var(--color-form-text);
width: 100%;
border: none;
border-radius: 1.125em;
}
#main FORM .form-item TEXTAREA {
line-height: 1.5em;
padding: 0.375em 0.75em;
resize: none;
border-radius: inherit;
}
#main FORM .form-item SELECT {
font: 1rem/2.25 var(--font-family);
height: 2.25em;
padding: 0 2.125em 0 1em;
background: transparent;
color: var(--color-form-text);
width: 100%;
border: none;
border-radius: 1.125em;
position: relative;
z-index: 10;
}
#main FORM .form-item.password .field-content:has(.show_password) {
position: relative;
}
#main FORM .form-item.password .show_password {
position: absolute;
display: block;
top: 50%;
right: 1em;
transform: translateY(-50%);
width: 1em;
height: 1em;
opacity: 0.5;
z-index: 10;
transition: all 0.2s;
}
#main FORM .form-item.password .show_password.active {
opacity: 1;
cursor: pointer;
}
#main FORM .form-item.password .show_password svg {
width: 100%;
height: 100%;
fill: currentColor;
}
#main FORM .form-item.password .show_password .icon.show {
display: block;
}
#main FORM .form-item.password .show_password .icon.hide {
display: none;
}
#main FORM .form-item.password.shown .show_password .icon.show {
display: none;
}
#main FORM .form-item.password.shown .show_password .icon.hide {
display: block;
}
#main FORM .form-item.password INPUT[type=password] {
padding-right: 2.125em;
}
#main FORM .form-item.select .field-content {
position: relative;
}
#main FORM .form-item.select .field-content:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 1em;
transform: translateY(-0.25em);
line-height: 0;
width: 0;
height: 0;
border-right: 0.5em solid transparent;
border-top: 0.5em solid var(--color-form-text);
border-left: 0.5em solid transparent;
}
#main FORM .form-item.radios LABEL:before, #main FORM .form-item.radios LABEL:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
#main FORM .form-item.radios LABEL:before {
width: 0.875em;
height: 0.875em;
border: 1px solid var(--color-form-border);
border-radius: 0.4375em;
}
#main FORM .form-item.radios LABEL:after {
width: 0.625em;
height: 0.625em;
left: 0.1875em;
background: var(--color-form-text);
border-radius: 0.3125em;
opacity: 0;
}
#main FORM .form-item.radios LABEL:hover:after {
opacity: 0.3;
}
#main FORM .form-item.radios LABEL:after {
background: var(--color-main-teal);
opacity: 1;
}
#main FORM .form-item.radios INPUT[type=radio] {
opacity: 0;
position: absolute;
}
#main FORM .form-item.radio_group .field-content {
display: inline-block;
border-radius: 1.125rem;
border: 1px solid var(--color-form-border);
background: var(--color-form-bg);
font-size: 0;
overflow: hidden;
}
#main FORM .form-item.radio_group LABEL {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0 1.25em;
line-height: 2.25em;
}
#main FORM .form-item.radio_group LABEL:not(:first-of-type) {
border-left: 1px solid var(--color-form-border);
}
#main FORM .form-item.radio_group LABEL:has(INPUT:checked) {
background: var(--color-form-element-active-bg);
color: var(--color-form-element-active);
}
#main FORM .form-item.radio_group LABEL.w_icon {
padding-left: 2.5em;
position: relative;
}
#main FORM .form-item.radio_group LABEL.w_icon .icon {
display: block;
position: absolute;
width: 1rem;
aspect-ratio: 1 / 1;
top: 50%;
left: 1rem;
transform: translateY(-50%);
}
#main FORM .form-item.radio_group LABEL.w_icon .icon svg {
fill: currentColor;
}
#main FORM .form-item.radio_group INPUT[type=radio] {
opacity: 0;
position: absolute;
pointer-events: none;
}
#main FORM .form-item.checkbox .field-label {
padding: 0 1rem;
line-height: 1;
}
#main FORM .form-item.checkbox LABEL {
margin: 0;
padding: 0;
}
#main FORM .form-item.checkbox INPUT {
margin-left: 0;
}
#main FORM .form-actions {
margin-top: 1em;
display: flex;
gap: 1em;
justify-content: center;
}
#main FORM .form-actions INPUT[type=button], #main FORM .form-actions INPUT[type=submit] {
font-size: 1rem;
height: 2.25em;
padding: 0 1em;
min-width: 0;
}
#main FORM .separator {
margin-top: 1.5em;
margin-bottom: 1em;
border-top: 1px solid var(--color-form-separator);
}
#main .form.cluster_form {
background: var(--color-form-bg);
color: var(--color-form-text);
padding: 1em;
border-radius: 0.75em;
max-width: 34em;
margin: 0 auto;
}
#main .form.cluster_form .title {
font-size: 1.25rem;
font-weight: var(--font-weight-light);
color: var(--color-form-text-title);
}
#main .form.cluster_form .flex_wr {
display: flex;
flex-wrap: wrap;
gap: 1em;
margin-top: 1em;
}
#main .form.cluster_form .flex_wr .line {
flex-basis: 30%;
flex-grow: 1;
flex-shrink: 1;
display: flex;
gap: 1em;
}
#main .form.cluster_form .flex_wr .form-item, #main .form.cluster_form .flex_wr .form-group {
margin: 0;
flex-basis: 40%;
flex-grow: 1;
flex-shrink: 1;
}
#main .form.cluster_form .test_connection .field-content {
position: relative;
text-align: center;
}
#main .form.cluster_form .test_connection .result {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
white-space: nowrap;
transition: all 0.2s;
z-index: -1;
}
#main .form.cluster_form .test_connection .result.active {
top: -2.25em;
z-index: 2;
}
#main .form.cluster_form .test_connection .result.fade {
top: -4px;
opacity: 0;
}
#main .form.cluster_form .test_connection .result > * {
color: #ffffff;
border-radius: 1em;
padding: 0.5em 1em;
line-height: 1;
opacity: 0;
transition: all 0.2s;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#main .form.cluster_form .test_connection .result.active .active {
opacity: 1;
}
#main .form.cluster_form .test_connection .result .success {
background: var(--color-green);
}
#main .form.cluster_form .test_connection .result .error {
background: var(--color-red);
}
#main .form.cluster_form .test_connection .result .icon {
display: inline-block;
width: 1em;
vertical-align: -0.1em;
}
#main .form.cluster_form .section {
padding-top: 1em;
position: relative;
}
#main .form.cluster_form .section:not(:first-child) {
border-top: 1px solid var(--color-form-separator);
margin-top: 1em;
}
#main .form.cluster_form .section .title {
font-size: 1em;
font-weight: var(--font-weight-light);
color: var(--color-form-text-title);
}
#main .form.cluster_form .section .edit {
position: absolute;
top: 50%;
right: 0;
color: var(--color-form-text-edit);
cursor: pointer;
text-decoration: underline dashed;
}
#main .form.cluster_form .section:not(.filled) .edit {
display: none;
}
#main .form.cluster_form .section .content {
display: none;
}
#main .form.cluster_form .section.active .content {
display: block;
}
#main .form.cluster_form .section.active .content.flex_wr {
display: flex;
}
#main .form.cluster_form .section .content {
margin-top: 1em;
}
#main .form.cluster_form .section .form-group .form-item.checkbox + .form-subgroup {
margin-top: 0;
}
#main .form.cluster_form .section .form-group .form-item.checkbox:not(:has(INPUT:checked)) + .form-subgroup {
display: none;
}
#main .form.cluster_form .section .form-group TEXTAREA {
resize: vertical;
min-height: 10em;
}
#main .form.cluster_form .section .form-item.markup.cert_info {
display: none;
padding: 0 1rem;
margin-top: 0.5em;
}
#main .form.cluster_form .section .form-item.markup.cert_info.active {
display: block;
}
#main .form.cluster_form .section .form-item.markup.cert_info .field-content {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
#main .form.cluster_form .section .form-item.markup.cert_info .block {
flex-basis: 40%;
flex-grow: 1;
flex-shrink: 0;
}
#main .form.cluster_form .section .form-item.markup.cert_info .title {
font-size: 0.875em;
line-height: 1em;
}
#main .form.cluster_form .section .form-item.markup.cert_info .content {
line-height: 1em;
margin-top: 0.25em;
}
#main .form.cluster_form .section .form-item.markup.cert_info .content UL, #main .form.cluster_form .section .form-item.markup.cert_info .content UL LI {
margin: 0;
padding: 0;
list-style: none;
}
#main .form.cluster_form .section .form-item.markup.cert_info .content UL LI {
margin-top: 0.5em;
}
#main .form.cluster_form .section .form-item.markup.cert_info .content UL LI .label {
font-size: 0.75em;
line-height: 1em;
font-weight: var(--font-weight-light);
}
#main .form.cluster_form .section .spacer {
min-width: 15em;
}
#main .form.cluster_form .actions {
text-align: center;
}
#main .form.cluster_form .section.filled .actions.next {
display: none;
}
#main.clusters .add_cluster {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2em;
position: relative;
height: 2.5em;
}
#main.clusters .add_cluster .add_cluster_start {
background: var(--color-cluster-add-btn-bg);
color: var(--color-cluster-add-btn-text);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
opacity: 1;
z-index: 2;
transition: all 0.2s;
}
#main.clusters .add_cluster .add_cluster_start:hover {
border-color: transparent;
box-shadow: var(--shadow-inner-small-hover);
}
#main.clusters .edit_cluster .form {
position: relative;
}
#main.clusters .add_cluster .form {
max-width: 34em;
opacity: 0;
position: relative;
z-index: 1;
transform-origin: top center;
transform: scale(0.25, 0.1);
transition: all 0.2s;
}
#main.clusters .add_cluster.active {
height: auto;
}
#main.clusters .add_cluster.active .add_cluster_start {
opacity: 0;
z-index: 1;
}
#main.clusters .add_cluster.active .close,
#main.clusters .edit_cluster .close {
position: absolute;
right: -0.5em;
top: -0.5em;
width: 1.5em;
height: 1.5em;
cursor: pointer;
border-radius: 0.75em;
color: var(--color-cluster-toggle-icon);
border: 1px solid var(--color-cluster-toggle-border);
background: var(--color-cluster-toggle-bg);
box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
z-index: 1;
opacity: 1;
transition: all 0.2s;
}
#main.clusters .add_cluster.active .close:hover {
background: var(--color-cluster-toggle-bg-hover);
box-shadow: var(--shadow-outer-small);
}
#main.clusters .add_cluster.active .close .icon,
#main.clusters .edit_cluster .close .icon {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
z-index: 1;
transition: all 0.2s;
}
#main.clusters .add_cluster.active .form {
opacity: 1;
z-index: 2;
transform: scale(1, 1);
}
HTML:has(#main.error_404), BODY:has(#main.error_404), #main.error_404 {
height: 100%;
}
#main.error_404 {
display: flex;
align-items: center;
}
#main.error_404 .container {
flex-grow: 1;
display: flex;
gap: 2em;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
}
#main.error_404 .container .image {
flex-basis: 20em;
min-width: 288px;
flex-grow: 0;
flex-shrink: 1;
}
#main.error_404 .container .content {
flex-basis: 40em;
min-width: 288px;
flex-grow: 0;
flex-shrink: 2;
}
#main.error_404 .container .title {
font-size: 1.5em;
font-weight: var(--font-weight-light);
color: var(--color-blue-grey-600);
}
#main.error_404 .container .text {
margin-top: 1.5em;
}
BODY:has(#main.login) {
padding: 0;
background: url(../img/login_bg.svg) 50% 50% no-repeat;
background-size: cover;
}
BODY:has(#main.login) #header {
display: none;
}
BODY:has(#main.login) #sidebar {
display: none;
}
BODY:has(#main.login) #bg_info {
display: none;
}
#main.login {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
height: 100%;
}
#main.login .form {
display: flex;
flex-direction: column;
gap: 4em;
align-items: center;
justify-content: center;
}
#main.login .logo {
width: 25em;
color: #ffffff;
}
#main.login .logo svg {
fill: #ffffff;
}
#main.login FORM .form-item .field-label {
display: none;
}
#main.login FORM .form-item .field-content {
background: var(--color-blue-grey-100);
border: 1px solid var(--color-blue-grey-100);
}
A.btn_scroll_up {
position: fixed;
z-index: 100;
bottom: 0;
right: 1em;
width: 10em;
height: 10em;
background-color: var(--color-totop-bg);
opacity: 0.3;
border-radius: 10em;
transform: translateY(8em);
transition: all 0.3s;
}
A.btn_scroll_up:before {
content: '';
display: block;
line-height: 0;
width: 0;
height: 0;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 1em solid var(--color-totop-icon);
position: absolute;
top: 0.5em;
left: 50%;
transform: translateX(-50%);
}
A.btn_scroll_up:after {
content: 'Back to Top';
display: block;
position: absolute;
top: 1.8em;
left: 50%;
color: var(--color-totop-icon);
white-space: nowrap;
transform: translateX(-50%);
}
A.btn_scroll_up:hover {
opacity: 0.9;
bottom: 1.5em;
}
A.btn_scroll_up.disabled {
bottom: -2em;
}
BODY.theme_dark {
--color-logo-main: #ffffff;
--color-logo-secondary: #ffffff;
--color-bg: var(--color-blue-grey-1100);
--color-text: var(--color-blue-grey-300);
--color-btn-red: var(--color-light-orange);
--color-btn-green: var(--color-light-teal);
--color-menu-bg: var(--color-blue-grey-1000);
--color-menu-bg-inset: var(--color-blue-grey-800);
--color-menu-text: var(--color-blue-grey-400);
--color-menu-text-hover: #ffffff;
--color-menu-text-active: var(--color-light-teal);
--color-menu-border: var(--color-blue-grey-800);
--color-menu-separator-menu: var(--color-blue-grey-1000);
--color-menu-toggle-icon: var(--color-blue-grey-400);
--color-menu-toggle-border: var(--color-blue-grey-800);
--color-menu-toggle-bg: var(--color-blue-grey-1000);
--color-menu-toggle-bg-hover: var(--color-blue-grey-800);
--color-submenu-bg: var(--color-blue-grey-900);
--color-submenu-text: var(--color-blue-grey-400);
--color-submenu-text-hover: #ffffff;
--color-dropdown-bg: var(--color-blue-grey-900);
--color-dropdown-bg-2: var(--color-blue-grey-1000);
--color-dropdown-text: var(--color-blue-grey-400);
--color-dropdown-text-hover: #ffffff;
--color-dropdown-text-heading: var(--color-blue-grey-500);
--color-dropdown-text-2: var(--color-blue-grey-500);
--color-dropdown-text-2-hover: #ffffff;
--color-dropdown-separator: var(--color-blue-grey-800);
--color-top-bar-clusters-text: #ffffff;
--color-top-bar-icon: #ffffff;
--color-top-bar-search-results-title: var(--color-blue-grey-500);
--color-top-bar-search-results-text: var(--color-blue-grey-400);
--color-top-bar-search-results-text-hover: var(--color-light-teal);
--color-top-bar-notifications-number-bg: var(--color-light-teal);
--color-notification-text: var(--color-grey-1);
--color-dashboard-block-bg: var(--color-blue-grey-900);
--color-dashboard-block-text: #ffffff;
--color-nodes-graph-separator: var(--color-blue-grey-400);
--color-filter-bg: var(--color-blue-grey-800);
--color-filter-text: var(--color-blue-grey-300);
--color-filter-button-bg: var(--color-light-teal);
--color-filter-button-text: #ffffff;
--color-cluster-bg: var(--color-blue-grey-900);
--color-cluster-bg-2: var(--color-blue-grey-1100);
--color-cluster-bg-fail: var(--color-bg-red-dark);
--color-cluster-main-bg: var(--color-blue-grey-1000);
--color-cluster-main-bg-warning: var(--color-cluster-main-bg);
--color-cluster-main-bg-error: var(--color-bg-red-dark);
--color-cluster-main-text: #ffffff;
--color-cluster-main-namespace: var(--color-blue-grey-400);
--color-cluster-main-namespace-hover: var(--color-blue-grey-1000);
--color-cluster-main-text-error-title: var(--color-blue-grey-400);
--color-cluster-main-border: var(--color-blue-grey-700);
--color-cluster-text: var(--color-blue-grey-300);
--color-cluster-text-title: var(--color-blue-grey-500);
--color-cluster-ddg-title: var(--color-blue-grey-500);
--color-cluster-ddg-border: var(--color-blue-grey-500);
--color-cluster-toggle-icon: #ffffff;
--color-cluster-toggle-border: var(--color-blue-grey-700);
--color-cluster-toggle-bg: var(--color-blue-grey-1000);
--color-cluster-toggle-bg-hover: var(--color-blue-grey-800);
--color-cluster-topology: var(--color-blue-grey-400);
--color-cluster-topology-bg: transparent;
--color-cluster-type-active-bg: var(--color-main-teal);
--color-datatable-bg: var(--color-blue-grey-1000);
--color-datatable-border: var(--color-blue-grey-700);
--color-datatable-header-border: var(--color-grey-1);
--color-datatable-text: var(--color-blue-grey-300);
--color-datatable-text-title: var(--color-grey-2);
--color-datatable-icon: var(--color-blue-grey-500);
--color-datatable-icon-copy: var(--color-light-teal);
--color-bg-info: var(--color-blue-grey-500);
--color-form-bg: var(--color-blue-grey-1000);
--color-form-text: var(--color-blue-grey-300);
--color-form-text-edit: var(--color-light-teal);
--color-form-text-label: var(--color-blue-grey-300);
--color-form-text-description: var(--color-blue-grey-400);
--color-form-border: var(--color-blue-grey-500);
--color-form-separator: var(--color-blue-grey-800);
--color-form-element-active-bg: var(--color-light-teal);
--color-form-element-active: #ffffff;
--color-cluster-add-btn-bg: var(--color-blue-grey-1000);
--color-cluster-add-btn-text: var(--color-blue-grey-500);
--image-cluster-blocked-bg: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%3E%3CclipPath%20id%3D%22clip%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url%28%23clip%29%22%3E%3Crect%20x%3D%22-5.1%22%20y%3D%22-58.2%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2012.5325%20-5.2562%29%22%20fill%3D%22%2337474F%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3Crect%20x%3D%2219.9%22%20y%3D%22-33.2%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2037.5325%20-15.6116%29%22%20fill%3D%22%23546E7A%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3Crect%20x%3D%2244.9%22%20y%3D%22-8.2%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2062.5325%20-25.9669%29%22%20fill%3D%22%2337474F%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3Crect%20x%3D%2269.7%22%20y%3D%2216.8%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2087.4674%20-36.1651%29%22%20fill%3D%22%23546E7A%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
BODY.theme_dark A, BODY.theme_dark SPAN.a {
color: var(--color-light-teal);
}
BODY.v9 {
--color-menu-border: var(--color-blue-grey-300);
padding-top: 4.75em;
padding-left: 5.625em;
}
BODY.v9.sidebar_expanded {
padding-left: 14.125em;
}
BODY.v9.show_submenu {
padding-top: 8.375em;
}
BODY.v9.notifications_expanded {
padding-right: 0;
}
BODY.v9 #header {
top: 1em;
left: 1em;
right: 1em;
border: 1px solid var(--color-menu-border);
border-radius: 0.25em;
box-shadow: var(--shadow-outer);
}
BODY.v9 #sidebar {
top: 5.75em;
left: 1em;
bottom: 1em;
border: 1px solid var(--color-menu-border);
border-radius: 0.25em;
box-shadow: var(--shadow-outer);
}
BODY.v9 #notifications .sidebar {
top: 4.75em;
border: none;
background: none;
padding: 0 1em 0 0;
}
BODY.v9.notifications_expanded #notifications .toggle {
display: none;
}
BODY.v9.notifications_expanded #bg_info {
right: 0;
}
BODY.v9 #notifications .sidebar .clear_all {
display: none;
}
BODY.v9.notifications_expanded #header .notifications .icon {
background: var(--color-light-blue);
color: #ffffff;
}
BODY.v9 #submenu {
top: 5.75em;
left: 6.625em;
right: 1em;
background: var(--color-menu-bg);
border: 1px solid var(--color-menu-border);
border-radius: 0.25em;
box-shadow: var(--shadow-outer);
}
BODY.v9.sidebar_expanded #submenu {
left: 15.125em;
}
BODY.v9 #main {
padding: 1em;
}
BODY.v9 #main:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 5.75em;
background: transparent;
backdrop-filter: blur(10px);
mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 10%, rgb(0, 0, 0) 50%);
z-index: 2;
}
BODY.v9.show_submenu #main:before {
height: 9.375em;
}
BODY.v9 #main .cluster {
box-shadow: var(--shadow-outer-small);
}
BODY.v9 #main.dashboard .block {
border-radius: 0.25em;
box-shadow: var(--shadow-outer-small);
}
BODY.v9 #main.dashboard .block .shadow_render:before {
display: none;
}
@media (prefers-color-scheme: dark) {
BODY.theme_auto {
--color-logo-main: #ffffff;
--color-logo-secondary: #ffffff;
--color-bg: var(--color-blue-grey-1100);
--color-text: var(--color-blue-grey-300);
--color-btn-red: var(--color-light-orange);
--color-btn-green: var(--color-light-teal);
--color-menu-bg: var(--color-blue-grey-1000);
--color-menu-bg-inset: var(--color-blue-grey-800);
--color-menu-text: var(--color-blue-grey-400);
--color-menu-text-hover: #ffffff;
--color-menu-text-active: var(--color-light-teal);
--color-menu-border: var(--color-blue-grey-800);
--color-menu-separator-menu: var(--color-blue-grey-1000);
--color-menu-toggle-icon: var(--color-blue-grey-400);
--color-menu-toggle-border: var(--color-blue-grey-800);
--color-menu-toggle-bg: var(--color-blue-grey-1000);
--color-menu-toggle-bg-hover: var(--color-blue-grey-800);
--color-submenu-bg: var(--color-blue-grey-900);
--color-submenu-text: var(--color-blue-grey-400);
--color-submenu-text-hover: #ffffff;
--color-dropdown-bg: var(--color-blue-grey-900);
--color-dropdown-bg-2: var(--color-blue-grey-1000);
--color-dropdown-text: var(--color-blue-grey-400);
--color-dropdown-text-hover: #ffffff;
--color-dropdown-text-heading: var(--color-blue-grey-500);
--color-dropdown-text-2: var(--color-blue-grey-500);
--color-dropdown-text-2-hover: #ffffff;
--color-dropdown-separator: var(--color-blue-grey-800);
--color-top-bar-clusters-text: #ffffff;
--color-top-bar-icon: #ffffff;
--color-top-bar-search-results-title: var(--color-blue-grey-500);
--color-top-bar-search-results-text: var(--color-blue-grey-400);
--color-top-bar-search-results-text-hover: var(--color-light-teal);
--color-top-bar-notifications-number-bg: var(--color-light-teal);
--color-notification-text: var(--color-grey-1);
--color-dashboard-block-bg: var(--color-blue-grey-900);
--color-dashboard-block-text: #ffffff;
--color-nodes-graph-separator: var(--color-blue-grey-400);
--color-filter-bg: var(--color-blue-grey-800);
--color-filter-text: var(--color-blue-grey-300);
--color-filter-button-bg: var(--color-light-teal);
--color-filter-button-text: #ffffff;
--color-cluster-bg: var(--color-blue-grey-900);
--color-cluster-bg-2: var(--color-blue-grey-1100);
--color-cluster-bg-fail: var(--color-bg-red-dark);
--color-cluster-main-bg: var(--color-blue-grey-1000);
--color-cluster-main-bg-warning: var(--color-cluster-main-bg);
--color-cluster-main-bg-error: var(--color-bg-red-dark);
--color-cluster-main-text: #ffffff;
--color-cluster-main-namespace: var(--color-blue-grey-400);
--color-cluster-main-namespace-hover: var(--color-blue-grey-1000);
--color-cluster-main-text-error-title: var(--color-blue-grey-400);
--color-cluster-main-border: var(--color-blue-grey-700);
--color-cluster-text: var(--color-blue-grey-300);
--color-cluster-text-title: var(--color-blue-grey-500);
--color-cluster-ddg-title: var(--color-blue-grey-500);
--color-cluster-ddg-border: var(--color-blue-grey-500);
--color-cluster-toggle-icon: #ffffff;
--color-cluster-toggle-border: var(--color-blue-grey-700);
--color-cluster-toggle-bg: var(--color-blue-grey-1000);
--color-cluster-toggle-bg-hover: var(--color-blue-grey-800);
--color-cluster-topology: var(--color-blue-grey-400);
--color-cluster-topology-bg: transparent;
--color-cluster-type-active-bg: var(--color-main-teal);
--color-datatable-bg: var(--color-blue-grey-1000);
--color-datatable-border: var(--color-blue-grey-700);
--color-datatable-header-border: var(--color-grey-1);
--color-datatable-text: var(--color-blue-grey-300);
--color-datatable-text-title: var(--color-grey-2);
--color-datatable-icon: var(--color-blue-grey-500);
--color-datatable-icon-copy: var(--color-light-teal);
--color-bg-info: var(--color-blue-grey-500);
--color-form-bg: var(--color-blue-grey-1000);
--color-form-text: var(--color-blue-grey-300);
--color-form-text-edit: var(--color-light-teal);
--color-form-text-label: var(--color-blue-grey-300);
--color-form-text-description: var(--color-blue-grey-400);
--color-form-border: var(--color-blue-grey-500);
--color-form-separator: var(--color-blue-grey-800);
--color-form-element-active-bg: var(--color-light-teal);
--color-form-element-active: #ffffff;
--color-cluster-add-btn-bg: var(--color-blue-grey-1000);
--color-cluster-add-btn-text: var(--color-blue-grey-500);
--image-cluster-blocked-bg: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%3E%3CclipPath%20id%3D%22clip%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url%28%23clip%29%22%3E%3Crect%20x%3D%22-5.1%22%20y%3D%22-58.2%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2012.5325%20-5.2562%29%22%20fill%3D%22%2337474F%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3Crect%20x%3D%2219.9%22%20y%3D%22-33.2%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2037.5325%20-15.6116%29%22%20fill%3D%22%23546E7A%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3Crect%20x%3D%2244.9%22%20y%3D%22-8.2%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2062.5325%20-25.9669%29%22%20fill%3D%22%2337474F%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3Crect%20x%3D%2269.7%22%20y%3D%2216.8%22%20transform%3D%22matrix%280.7071%200.7071%20-0.7071%200.7071%2087.4674%20-36.1651%29%22%20fill%3D%22%23546E7A%22%20width%3D%2235.4%22%20height%3D%22141.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
BODY.theme_auto A, BODY.theme_auto SPAN.a {
color: var(--color-light-teal);
}
}
@media only screen and (max-width: 1068px) {
BODY.sidebar_expanded .cluster .main .side.right, BODY.notifications_expanded .cluster .main .side.right {
align-self: flex-start;
flex-direction: column-reverse;
align-items: flex-end;
position: relative;
}
BODY.sidebar_expanded .cluster .main .item.status_icons, BODY.notifications_expanded .cluster .main .item.status_icons {
position: absolute;
top: 0;
right: 100%;
}
BODY.sidebar_expanded .cluster .main .item.lock, BODY.notifications_expanded .cluster .main .item.lock {
margin: 0;
}
BODY.sidebar_expanded .cluster .main .item.lock .content, BODY.notifications_expanded .cluster .main .item.lock .content {
min-width: 0;
white-space: nowrap;
}
BODY.sidebar_expanded .cluster .main .item.lock .content .text, BODY.notifications_expanded .cluster .main .item.lock .content .text {
font-size: 0;
}
BODY.sidebar_expanded .cluster .main .item.lock .content .arrow, BODY.notifications_expanded .cluster .main .item.lock .content .arrow {
margin-left: 0;
}
BODY.sidebar_expanded .cluster .main .item.lock .dropdown_item, BODY.notifications_expanded .cluster .main .item.lock .dropdown_item {
font-size: 0;
white-space: nowrap;
margin: 0;
}
}
@media only screen and (max-width: 968px) {
.cluster .main .side.right {
align-self: flex-start;
flex-direction: column-reverse;
align-items: flex-end;
position: relative;
}
.cluster .main .item.status_icons {
position: absolute;
top: 0;
right: 100%;
}
.cluster .main .item.lock {
margin: 0;
}
.cluster .main .item.lock .content {
min-width: 0;
white-space: nowrap;
}
.cluster .main .item.lock .content .text {
font-size: 0;
}
.cluster .main .item.lock .content .arrow {
margin-left: 0;
}
.cluster .main .item.lock .dropdown_item {
white-space: nowrap;
margin: 0;
}
.cluster .main .item.lock .dropdown_item .text {
font-size: 0;
}
}
@media only screen and (max-width: 768px) {
BODY {
padding-left: 0;
}
#header {
padding: 0.875em 0.875em 0.875em 5em;
gap: 0;
}
#header DIV.logo {
left: 50%;
transform: translate(-50%,-50%);
}
#header .cluster_shortcuts A {
display: none;
padding: 0 0.5em;
min-width: 1.7778em;
}
#header .cluster_shortcuts A.active {
display: block;
}
#header .cluster_shortcuts A .text {
display: none;
}
#header .show_help {
display: none;
}
#header .mobile_menu_icon {
display: block;
}
#header .mobile_menu_icon .menu_icon_line1 {
top: 0.375em;
transition: transform 0.1s, top 0.1s 0.1s;
}
#header .mobile_menu_icon .menu_icon_line2 {
top: 0.875em;
transition: opacity 0.01s 0.1s;
}
#header .mobile_menu_icon .menu_icon_line3 {
top: 1.375em;
transition: transform 0.1s, top 0.1s 0.1s;
}
#sidebar {
padding: 1.5em 1em 1em;
width: 13.125em;
transform: translateX(-100%);
z-index: 20;
}
#sidebar .content .info {
height: 2.25em;
}
#sidebar .content .info .wr {
transform: rotate(0deg) translateY(0);
}
#sidebar .toggle {
display: none;
}
#sidebar .menu {
margin-right: 0;
}
#sidebar .menu A {
white-space: normal;
}
#sidebar .menu UL LI.w_submenu > A > .arrow {
width: 1em;
}
#sidebar .menu UL LI.w_submenu > A > .arrow .icon {
transition: all 0.2s;
}
#sidebar .menu UL LI.w_submenu.open > A > .arrow .icon {
transform: translateY(-50%) rotate(90deg);
}
#sidebar .menu UL LI > UL:before {
display: none;
}
#sidebar .menu UL LI > UL:after {
display: none;
}
#sidebar .menu UL LI.w_submenu > UL {
position: static;
background: none;
box-shadow: none;
padding: 0 0 0 1.65em;
}
#sidebar .menu UL LI.w_submenu.open > UL {
display: block;
}
#sidebar .menu UL LI.w_submenu:hover > UL {
display: none;
}
#sidebar .menu UL LI.w_submenu.open:hover > UL {
display: block;
}
#sidebar .menu.main_menu UL LI.clusters > A .arrow {
display: none;
}
#sidebar .menu.main_menu UL LI.clusters > UL {
display: none;
}
#sidebar .menu.main_menu UL LI.clusters:hover > UL {
display: none;
}
#sidebar .menu UL LI > UL LI:not(:first-child) {
margin-top: 0.5em;
}
#notifications .sidebar {
padding-left: 1.75em;
}
#notifications .sidebar .toggle {
display: none;
}
#bg_info {
left: 0;
padding: 2em 1em;
}
#submenu {
left: 0;
padding: 0 1em;
}
#submenu .item.filter FORM {
padding-left: 0;
}
#submenu .item.filter FORM .icon {
display: none;
}
#main {
padding: 1em;
}
BODY.sidebar_expanded {
padding-left: 0;
}
BODY.sidebar_expanded #header .mobile_menu_icon .menu_icon_line1, BODY.sidebar_expanded #header .mobile_menu_icon .menu_icon_line3 {
top: 0.875em;
transition: top 0.1s, transform 0.1s 0.1s;
}
BODY.sidebar_expanded #header .mobile_menu_icon .menu_icon_line1 {
transform: rotate(45deg);
}
BODY.sidebar_expanded #header .mobile_menu_icon .menu_icon_line2 {
opacity: 0;
}
BODY.sidebar_expanded #header .mobile_menu_icon .menu_icon_line3 {
transform: rotate(-45deg);
}
BODY.sidebar_expanded #sidebar {
transform: translateX(0);
}
BODY.sidebar_expanded #submenu {
left: 0;
}
BODY.sidebar_expanded #bg_info {
left: 0;
}
BODY.notifications_expanded {
padding-right: 0;
}
BODY.notifications_expanded #header .cluster_shortcuts {
right: 12.75em;
}
BODY.notifications_expanded #bg_info {
right: 0;
}
BODY.notifications_expanded #submenu {
right: 0;
}
#main.dashboard {
grid-template-columns: repeat(8,1fr);
}
#main.dashboard .block.tab-col1 {
grid-column-start: span 1;
}
#main.dashboard .block.tab-col2 {
grid-column-start: span 2;
}
#main.dashboard .block.tab-col3 {
grid-column-start: span 3;
}
#main.dashboard .block.tab-col4 {
grid-column-start: span 4;
}
#main.dashboard .block.tab-col5 {
grid-column-start: span 5;
}
#main.dashboard .block.tab-col6 {
grid-column-start: span 6;
}
#main.dashboard .block.tab-col7 {
grid-column-start: span 7;
}
#main.dashboard .block.tab-col8 {
grid-column-start: span 8;
}
}
@media only screen and (max-width: 568px) {
#header .cluster_shortcuts {
position: fixed;
top: 4.25em;
right: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.325em;
transition: all 0.2s;
}
#header .cluster_shortcuts A {
font-size: 0.9em;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#header .cluster_shortcuts A:hover {
padding-right: 1em;
}
BODY.show_submenu #header .cluster_shortcuts {
top: 6.875em;
}
#submenu .item.switch {
font-size: 0;
line-height: 0;
height: 1.375rem;
}
#submenu .item.switch .state .icon {
font-size: 1rem;
position: relative;
transform: none;
}
#main .form.cluster_form .flex_wr .line {
flex-wrap: wrap;
}
#main.dashboard {
grid-template-columns: repeat(4,1fr);
}
#main.dashboard .block.mob-col1 {
grid-column-start: span 1;
}
#main.dashboard .block.mob-col2 {
grid-column-start: span 2;
}
#main.dashboard .block.mob-col3 {
grid-column-start: span 3;
}
#main.dashboard .block.mob-col4 {
grid-column-start: span 4;
}
}
@media only screen and (max-width: 528px) {
#header .search INPUT[type=text]:focus {
width: 16em;
padding-right: 1em;
}
}
@media only screen and (max-width: 399px) {
#header .search {
display: none;
}
#main.dashboard .block > .buttons {
position: relative;
margin-top: 1.5em;
z-index: 10;
top: auto;
right: auto;
}
}