@charset "utf-8";
/*
CSS Document
Product name: CM2W application
Product page: www.cm2w.net

Library name "smt-lib",
library author: Svetoslav Todev,
GUI/UX team leader and senior designer,
contact info: smt@smt.bg, www.smt.bg
*/

@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700';


/* variables - tokens */
:root {
    /* Primitive Tokens (used both on light and dark theme) */
    --shade-of-light05: rgba(255,255,255,0.05);
    --shade-of-light1: rgba(255,255,255,0.1);
    --shade-of-light2: rgba(255,255,255,0.2);
    --shade-of-light3: rgba(255,255,255,0.3);
    --shade-of-light4: rgba(255,255,255,0.4);
    --shade-of-light5: rgba(255,255,255,0.5);
    --shade-of-light6: rgba(255,255,255,0.6);

    --shade-of-dark05: rgba(0,0,0,0.05);
    --shade-of-dark1: rgba(0,0,0,0.1);
    --shade-of-dark2: rgba(0,0,0,0.2);
    --shade-of-dark3: rgba(0,0,0,0.3);
    --shade-of-dark4: rgba(0,0,0,0.4);
    --shade-of-dark5: rgba(0,0,0,0.5);
    --shade-of-dark6: rgba(0,0,0,0.6);


    /* Semantic and Layout Tokens */
    --compact-content-width: 1440px;
    --sbs:200px; /* sidebar size */

    --link-color:#37A4DD;
    --link-color-hover:#6DBEDB;

    --link-color2:#43494e;
    --link-color2-hover:#737a7f;

    --main-bg-color: #f1f1f1;
    --main-txt-color:#43494e;
    --app-header-bgr: #e0ebf3;
    --app-header-height: 35px;
    --report-header-height: 43px;
    --main-action-color: #445e75;
    --main-action-color-hover: #4897da;

    --main-action-disabled-color: #445e754d;

    --theme-identity-bgr: #325792; /*used in main-nav and popup header, etc.*/
    --theme-identity-bgr-txt: #d6d6d6;

    --accent-bg: #007BFF;
    --accent-light-bg: #007bff69;
    --accent-bg-txt: #ffffff;
    --accent-color: #007BFF;
    --help-guidance-default-color: var(--accent-bg); /*#164bcb*/
    --error-accent-color: #DC6060;
    --warning-accent-color: #DB7500;
    --ok-accent-color: #5AC13C;
    --off-accent-color: #d6d6d6;

    --nav-icon-color: #becadc;

    --popup-header-height: 41px;
    --popup-bgr: #fff;
    --popup-content-height: calc(100dvh - var(--popup-header-height));
    --image-popup-padding: 0 30px;

    --his-row-height: 28px; /*histogram row height - was 32px*/

    --pan-bgr: #fff;
    /* --pan-bgr-hover: #fafafa; */
    --pan-selected-outline: #007BFF;
    --pan-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    --pan-shadow-hover: 0 1px 12px rgba(0, 0, 0, 0.25);
    --pan-shadow-selected: 0 1px 6px rgba(0, 0, 0, 0.12), 0 0 1px 1px var(--theme-identity-bgr) inset;
    --pan-padding-ver: 8px;
    --pan-padding-hor: 12px; /* used also in .gap-pan class to make gaps in the list equal to this value */
    --pan-padding: var(--pan-padding-ver) var(--pan-padding-hor);
    --pan-meta-txt: #758089;
    --pan-actions-icon-size: 1.1rem;
    --pan-border-radius: 4px;

    --sep-color: rgba(0, 0, 0, 0.15);
    --pan-sep-color: var(--sep-color);

    --text-color-soft: #758089;
    --text-color-soft2: #a0a6aa;
    --group-title-txt: #212529;
    --accent-title-txt: #325792;
    --accent-title-inactive-txt: #8d8d8d;

    --main-content-padding: 30px;
    --page-index-padding-ver: 6px;

    --main-hover-light-bgr: rgba(0,0,0,0.04);
    --main-hover-light-bgr2: rgba(0,0,0,0.02);
    --main-hover-light-bgr3: rgba(0,0,0,0.08);
    --main-hover-light-bgr4: rgba(0,0,0,0.12);

    --light-bgr: rgba(0,0,0,0.04);
    --light-bgr2: rgba(0,0,0,0.02);

    --border-color-light: rgba(0,0,0,0.1);
    --border-color-light2: rgba(0,0,0,0.04);
    --border-color-light3: rgba(0,0,0,0.02);

    --dropdown-menu-color: var(--main-txt-color);
    --dropdown-menu-bgr: #fff;
    --dropdown-menu-color-hover: var(--main-action-color-hover);
    --dropdown-menu-item-bgr-hover: var(--main-hover-light-bgr);
    --dropdown-link-padding: 4px 12px;

    /* temp - until chrome supports native scrollbar width */
    --webkit-scrl-track:#00000011;
    --webkit-scrl-thumb:#00000025;

    --shadow-layer-under: 0 18px 16px -18px rgba(0,0,0,0.25); /*used in page-index and comp list filters*/
    --shadow-layer-under2: 0 12px 16px -12px rgba(0,0,0,.4);

    /**/
    --comp-action-width: 42px;
    --toggle-switch-size: scale(0.9);
    --toggle-switch-default-bg: #fff;

    /**/
    --filter-wrap-bgr: #E9E9E9; /* wrap all filter items/pills */
    --filter-item-bgr: #F5FAFF;
    --filter-item-txt: #707A83;

    --filter-item-bgr-open: #FFF;
    --filter-item-disabled-bgr: #f4f4f4;
    --filter-item-disabled-txt: #bfbcbc;

    /**/
    --form-label-txt: #474F5B;

    /* lists specific - in reports for now */
    --group-title-row-bg: #e8e9ec;
    --group-title-row-txt: #333;

    /* report list totals */
    --report-total-header-bg: #f4fbff;
    --report-total-header-txt: #3f75a8;

    --time-histogram-header-bg: var(--main-bg-color);

    /* simple data panel */
    --panel-simple-data-bg: var(--pan-bgr);
    --panel-simple-data-border: rgba(0,0,0,0.1);
    --panel-simple-data-title-txt: #2c3139;

    /* tunnel list gradients */
    --tunnel-item-bg: linear-gradient(to bottom, #f7f7f7 1%,#dbdce2 21%,#ffffff 35%,#dddfe3 67%,#858891 100%);
    --tunnel-item-edge-bg: linear-gradient(to bottom, #bfbfbf 1%,#eff1f7 21%,#c4c4c4 35%,#848587 57%,#54565b 100%);
    --tunnel-item-hover-shadow: 0 0 900px rgba(0,0,0,0.1) inset;
    --tunnel-door-color: #BFC1C7;

    /* tunnel single unit */
    --tnl-unit-bg: linear-gradient(to bottom, #ffffff 0%,#ffffff 27%,#f4f4f4 29%,#ffffff 49%,#f2f2f2 100%);
    --tnl-unit-open-bg: linear-gradient(to bottom, #ffffff 0%,#fafafa 100%);

    /* interactive-scheme values */
    --we-unit-bg: #fff;
    --scheme-txt: #445E75;
    --scheme-device-title:#6E8AA4;
    --sch-route-stroke: #27AAE1;
    --arr-route-thickness: 2px;

    --indicator-disabled: rgba(0, 0, 0, 0.2);
    --indicator-on: #5AC13C;
    --indicator-off: #EB6969;
    --indicator-connected: #7774ff;

    --sch-primary-border-color: #445E75;

    --sch-bottle-fill: #27AAE1;
    --sch-bottle-fill-warning: #ff9800;
    --sch-bottle-fill-disabled: #c5c5c5;
    --sch-bottle-fill-danger: #e74444;
    --sch-bottle-bgr: #fff;

    --scheme-offset-entry-points: 120px;

    --sch-pump-bg-image: url(../images/i-scheme/pump.svg);
    --port-entry-bg-image: url(../images/i-scheme/port.svg);
    --valve-unit-bg-image: url(../images/i-scheme/valvebox.svg);
    --sch-valve3way-bg-image: url(../images/i-scheme/3way-valve.svg);
    --sch-flow-meter-bg-image: url(../images/i-scheme/flow-meter.svg);

    /*sevirity level colors - used in dashboard widgets inline migrated with tokens */
    --sevirity-level-1: #99fc9480;
    --sevirity-level-2: #ffeb3b87;
    --sevirity-level-3: #ff99008b;
    --sevirity-level-4: #e7444496;

    /* bts alerts colors */
    --bs-info-bg-subtle: #d9edf7;
    --bs-info-text-emphasis: #31708f;
    --table-row-highlight-color: var(--bs-info-bg-subtle);

    /*specific*/
    --invert-logo-dark-theme: brightness(0) invert(1);

}

/********************************************************************************************/
/****** DARK THEME >>> *****/
html.theme-dark, html:has(body.theme-dark) {
    /* Semantic Tokens (UI tokens) */
    --theme-identity-bgr: #3C6793;
    --main-txt-color:#bccdde;

    --main-bg-color: #232a33;
    --app-header-bgr: #343d48;

    --accent-color: #52A6FF;
    --help-guidance-default-color: var(--accent-color);

    --pan-bgr: #343d48;
	--pan-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
	--pan-shadow-hover: 0 1px 12px rgba(0, 0, 0, 0.9);
    --pan-meta-txt: #adbac5;
    --text-color-soft: var(--pan-meta-txt);
    --text-color-soft2: #788795;

    --popup-bgr: #424c59;

	--accent-title-txt: #7faad3;
    --main-action-color: #b6cde3;
    --main-action-color-hover: #7faad3;
    --main-action-disabled-color: var(--shade-of-light3);

    --filter-item-txt: var(--main-txt-color);
    --filter-item-bgr: var(--shade-of-light1);
	--filter-wrap-bgr: var(--shade-of-light05);
    --filter-item-bgr-open: var(--shade-of-dark3);
    --filter-item-disabled-bgr: var(--shade-of-light05);
    --filter-item-disabled-txt: var(--shade-of-light2);

    --dropdown-menu-bgr: var(--main-bg-color);

    --form-label-txt: var(--main-txt-color);
    --bs-body-color: var(--main-txt-color);
    --bs-body-bg: #212529;
    --bs-border-color: var(--shade-of-light2);

    --off-accent-color: var(--shade-of-light1);

    --toggle-switch-default-bg: var(--shade-of-light3);

    /* interactive-scheme values */
    --we-unit-bg: var(--popup-bgr);
    --scheme-txt: var(--main-txt-color);
    --scheme-device-title:var(--main-txt-color);
    --sch-route-stroke: var(--accent-title-txt);

    --sch-pump-bg-image: url(../images/i-scheme/pump-dark.svg);
    --port-entry-bg-image: url(../images/i-scheme/port-dark.svg);
    --valve-unit-bg-image: url(../images/i-scheme/valvebox-dark.svg);
    --sch-valve3way-bg-image: url(../images/i-scheme/3way-valve-dark.svg);
    --sch-flow-meter-bg-image: url(../images/i-scheme/flow-meter-dark.svg);

    --sch-bottle-fill-disabled: #adb2b9;
    --sch-bottle-fill-danger: #e47c7c;
    --sch-bottle-bgr: var(--main-bg-color);

    /* bts alerts colors */
    --bs-info-bg-subtle: #264454;
    --bs-info-text-emphasis: #8cb0c2;
    --table-row-highlight-color: var(--theme-identity-bgr);

    --report-total-header-bg: #2f4356;
    --report-total-header-txt: var(--accent-title-txt);

    --panel-simple-data-border: var(--shade-of-light2);
    --panel-simple-data-title-txt: var(--main-txt-color);

    --tunnel-item-bg: linear-gradient(to bottom, var(--shade-of-light2) 0%, var(--shade-of-light05) 28%, transparent 52%, var(--shade-of-dark3) 78%, var(--shade-of-dark2) 100%), var(--pan-bgr);
    --tunnel-item-edge-bg: linear-gradient(to bottom, var(--shade-of-light3) 0%, var(--shade-of-light1) 32%, var(--shade-of-dark1) 66%, var(--shade-of-dark3) 100%), var(--main-bg-color);
    --tunnel-item-hover-shadow: 0 0 900px rgba(255,255,255,0.025) inset;
    --tunnel-door-color: var(--shade-of-light1);

    /* tunnel single unit */
    --tnl-unit-bg: linear-gradient(to bottom, var(--shade-of-light1) 0%, transparent 40%, var(--shade-of-dark1) 100%), var(--pan-bgr);
    --tnl-unit-open-bg: linear-gradient(to bottom, var(--shade-of-light05) 0%, transparent 100%), var(--main-bg-color);

}


/* dark-theme force invert - with native css nesting rule */
body.theme-dark {

    [list-item-count]::before,
    .app-logo a::after,
    .txt-label.inverted,
    .we-unit::before,
    .txt-disabled,
    .txt-red,
    .txt-green,
    .txt-purple,
    .txt-blue,
    .txt-cyan,
    .txt-orange,
    .txt-yellow,
    .txt-brown,
    .txt-gray,
    .txt-light-gray,
    .txt-cold-gray,
    .txt-white,
    .txt-dark,
    .txt-light-sky,
    .txt-info,
    .his-time-unit {
        filter: hue-rotate(180deg) invert(0.92);
    }

    .txt-label.inverted.txt-cold-gray {
        filter: invert(0.5);
    }

    .we-unit::before {
        opacity: 0.5;
    }
    .we-unit::after {
        filter: brightness(0.8);
    }

    [list-item-count]::before {
        transform: scale(1.1);
        top: -3px;
    }

    .popup:not(.image-popup) {
	    box-shadow: 0 0 50px var(--shade-of-dark6);
    }

    .panel-primary > .panel-heading,
    .dropdown-menu {
        --accent-color: #3C6793;
        --accent-bg: var(--accent-color);
    }
    .table {
        --bs-body-bg: transparent;
    }
     .main-nav {
        --theme-identity-bgr: #343d48;
     }

     .app-logo img {
        filter: var(--invert-logo-dark-theme);
     }

     .add-widget {
        --shade-of-dark3: var(--shade-of-light3);
    }
    .progress, .progress-stacked {
        --bs-progress-bg: var(--shade-of-light1);
    }

}


/****** DARK THEME <<< *****/

/* theme switch transition duration >>> */
:root {
    --theme-vt-duration: 1000ms;
}

@supports (view-transition-name: root) {
    html {
        view-transition-name: root;
    }

    .theme-mode-trigger {
        view-transition-name: theme-trigger;
    }

    ::view-transition-group(root) {
        animation-duration: var(--theme-vt-duration, 820ms);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    ::view-transition-group(theme-trigger) {
        animation-duration: var(--theme-vt-duration, 820ms);
        animation-timing-function: ease-out;
    }

    html[data-theme-vt-style='fade']::view-transition-old(root) {
        animation: theme-vt-fade-out var(--theme-vt-duration, 820ms) ease both;
    }

    html[data-theme-vt-style='fade']::view-transition-new(root) {
        animation: theme-vt-fade-in var(--theme-vt-duration, 820ms) ease both;
    }

    html[data-theme-vt-style='slide'][data-theme-vt='to-dark']::view-transition-new(root) {
        clip-path: inset(0 0 0 100%);
        animation: theme-vt-wipe-in-right-to-left var(--theme-vt-duration, 820ms) cubic-bezier(0.65, 0, 0.35, 1) both;
    }

    html[data-theme-vt-style='slide'][data-theme-vt='to-dark']::view-transition-old(root) {
        animation: none;
    }

    html[data-theme-vt-style='slide'][data-theme-vt='to-light']::view-transition-new(root) {
        clip-path: inset(0 100% 0 0);
        animation: theme-vt-wipe-in-left-to-right var(--theme-vt-duration, 820ms) cubic-bezier(0.65, 0, 0.35, 1) both;
    }

    html[data-theme-vt-style='slide'][data-theme-vt='to-light']::view-transition-old(root) {
        animation: none;
    }
}

@keyframes theme-vt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes theme-vt-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes theme-vt-wipe-in-right-to-left {
    from { clip-path: inset(0 0 0 100%); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes theme-vt-wipe-in-left-to-right {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
/* theme switch transition duration <<< */


/*custom var changes*/
.i-dev-schema,
.main-max-w {
--compact-content-width: auto;
--main-content-padding: 20px;
}
.popup-header {--main-action-color:#b6cde3;}

/* aaditional media query variables */
@media only screen and (min-height:640px) {
    :root {
       --popup-content-height: calc(85dvh - var(--popup-header-height));
   }
}


/*scrollbar specific*/

/* legacy for Chrome/Edge/Safari */
*::-webkit-scrollbar {width: 10px; height: 8px;}

*::-webkit-scrollbar-track {background: var(--webkit-scrl-track);}

*::-webkit-scrollbar-thumb {
	background-color: var(--webkit-scrl-thumb);
	border-radius: 4px;

    /* this cut the thumb for space */
	border: 2px solid transparent;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}

/* native scrollbar - current for FF */
* {scrollbar-width: thin; scroll-behavior: smooth;}





body, html{}
html {font-size:100%;} /*equal to 16px - make attention when use rem units relative to this value*/
body {
	/*font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	font-size:14px; /* or 1.063rem */  /*was 17px*/
	line-height:1.5; /*was 1.3 for Calibri*/
	color:var(--main-txt-color);
}




/** Headings */

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
h1 {margin: 0 0 1em; font-size: 1.5em;}
h2 {margin: 1.8em 0 0.5em 0; font-size: 1.3em;}
h3 {margin: 1.8em 0 0.5em 0; font-size: 1.1em;}
h4 {margin: 1.5em 0; font-size: 1em;}
h5 {margin: 1.5em 0; font-size: 1em;}
h6 {margin: 1.5em 0; font-size: 1em;}

.group-title {
    color: var(--group-title-txt);
    font-weight: normal;
    font-size: 16px;
    margin-top: 1rem;
    margin-bottom: 0.8rem;
}
.accent-title {
    color: var(--accent-title-txt);
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0;
}
.accent-title.link:hover {
    color: var(--link-color-hover);
}
.accent-title.inactive,
.accent-title.inactive:hover {
    color: var(--accent-title-inactive-txt);
    cursor: default;
}

/** TODO Svetlio Remove */
.force-inline{  display: inline-block !important;}

/** Links */
a,
.force-link {
  color: var(--link-color);
  text-decoration: none;
  cursor: pointer;
}
a:visited {}

a:hover,
.force-link:hover {
  color: var(--link-color-hover);
  text-decoration: none;
}
a:focus {
  /*outline: 1px dotted;*/
}
a:active {}

/**/
a.disabled-link,
a.disabled-link:hover,
.force-link.disabled-link {
  color:#666 !important;
  cursor:default !important;
}

/* buttons */
/*BTS buttons specific*/
.btn {
    --bs-border-radius: 10rem;
    --bs-border-radius-sm: 10rem;
}

/* custom buttons */

a.button,
span.button {
  display: inline-block;
  background-color:var(--accent-bg);
  color:var(--accent-bg-txt);
  padding: 4px 12px;
  -webkit-border-radius:3px;
  border-radius:30px;
}

a.button:hover,
span.button:hover {
  box-shadow: 0 0 0 20px var(--main-hover-light-bgr4) inset;
}
/**/
a.button-outline,
span.button-outline {
  display: inline-block;
  background-color: transparent;
  color:var(--accent-bg);
  border: 1px solid var(--accent-bg);
  padding: 4px 12px;
  -webkit-border-radius:3px;
  border-radius:30px;
}

a.button-outline:hover,
span.button-outline:hover {
  box-shadow: 0 0 0 20px var(--main-hover-light-bgr2) inset;
}

.link-color2 {color: var(--link-color2);}
.link-color2:hover {color: var(--link-color2-hover);}

/*toggle-switch skin specific*/
.checkbox.checbox-switch label span {
  background-color: var(--toggle-switch-default-bg);
}

/** Images */
img, a img {
  border: none;
  max-width: 100%;
  height:auto;
}

img.zoom {
  cursor: pointer;
  cursor: nw-resize;
  cursor: -moz-zoom-in;
}

img.selected {
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2);
}

/** Textboxes */
.text,
textarea,
input,
select,
ctrl-select,
.ctrl-select,
ctrl-calendar input,
.ctrl-calendar input,
.force-skin-input {
  background-color: #fff;
  border: 1px solid #DBD6D0;
  padding: 8px;
  width:100%;
}

input[required],
select[required] {box-shadow: -5px 0 0 #ffab64 inset; }

/**/
.custom-select-wrap {
	position:relative;
	display:inline-block;
}
.custom-select-wrap select,
.custom-select-wrap select:focus {
	position:relative;
	z-index:2;
	background-color: transparent;
	border: none;
	box-shadow:none;
	padding: 0 20px 0 0;
	width:auto;
	outline:none;
	cursor: pointer;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.custom-select-wrap .caret {
	position:absolute;
	top:50%;
	right:4px;
	z-index:1;
}


/**/

ctrl-calendar,
.ctrl-calendar {
  border: none;
  padding: 0;
}

/* .text:focus,
textarea:focus,
input:focus,
select:focus,
ctrl-select.focus,
.ctrl-select.focus,
ctrl-select:focus,
.ctrl-select:focus,
ctrl-calendar input:focus,
.ctrl-calendar input:focus,
.force-skin-input:focus {
  color:#444;
  background-color: #fafafa;
  border-color: #ccc;
} */

input[disabled] {color:#ccc;}

.inline-field[type=text],
.inline-field[type=password] {}

/** Single / Multiple choice */
input[type=checkbox],
input[type=radio] {}


/*- Transitions -*/
a,
.force-link,
.link,
.btn,
.hov-over,
.main-action,
.tree-menu .title,
.em-tab-list li span,
.popup-header .trigger,
.dash-unit-actions .ficon,
.list.skin-hover li,
.notification-panel .list li,
.add-unit-wrap .add-unit {
  -moz-transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
  -webkit-transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
  transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}

.trans-all,
.main-nav .sub-menu a,
.main-nav .sub-menu .force-link,
.global-notification,
.top-header-unit .slide-panel-wrap,
.tunnel-item,
.app-header,
.main-content .page-index,
.screen-title-back .ficon,
.content-filter-wrap,
.force-thead-sticky .table thead,
.time-histogram .his-time-unit,
.main-nav .nav-icon-wrap,
.group-indicator-row,
.expanded-total-row,
.expanded-total-inner-row,
.device-wrap .device-unit,
.device-wrap .we-unit:before,
.device-wrap .we-unit:after,
.scheme-wrap .trigger-select {
	-moz-transition: all 250ms ease-in-out;
	-webkit-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}

.pan-list .pan,
.button,
.button-outline,
.filter-item .filter-item-inner,
.filter-item .item-trigger:before,
.skin-clean.skin-tip .dropdown-menu,
.filter-item.filter-input .item-field input,
.filter-item.filter-input .item-field input::placeholder,
[list-item-count]::before {
	-moz-transition: all 150ms ease-in-out;
	-webkit-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
}

.device-unit .context-desc {
	-moz-transition: all 500ms ease-in-out;
	-webkit-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

.app-middle,
.main-nav .sub-menu,
.logo-intro {
	-moz-transition: margin 250ms ease-in-out, padding 250ms ease-in-out;
	-webkit-transition: margin 250ms ease-in-out, padding 250ms ease-in-out;
	transition: margin 250ms ease-in-out, padding 250ms ease-in-out;
}
.app-header .trigger {
	-moz-transition: left 250ms ease-in-out;
	-webkit-transition: left 250ms ease-in-out;
	transition: left 250ms ease-in-out;
}

.main-nav,
.main-nav .title,
.aside-logo img,
.loader-page {
	-moz-transition: width 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out;
	-webkit-transition: width 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out;
	transition: width 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out;
}
.ani-opacity,
.app-logo,
.nav.nav-pills.sub-tabs a:before {
	-moz-transition: opacity 250ms ease-in-out;
	-webkit-transition: opacity 250ms ease-in-out;
	transition: opacity 250ms ease-in-out;
}

.widget-over,
.scheme-wrap .dropdown *[data-bs-toggle="dropdown"] {
	-moz-transition: box-shadow 250ms ease-in-out;
	-webkit-transition: box-shadow 250ms ease-in-out;
	transition: box-shadow 250ms ease-in-out;
}

.app-logo {
	-moz-transition: left 250ms ease-in-out, opacity 250ms ease-in-out;
	-webkit-transition: left 250ms ease-in-out, opacity 250ms ease-in-out;
	transition: left 250ms ease-in-out, opacity 250ms ease-in-out;
	-webkit-transition-delay: 50ms;
    transition-delay: 50ms;
}

/*delay*/
.main-nav .title {

}

/* css-animation */

.btn-loading::before,
.ficon-loading::after{
    -moz-animation: spinner 1000ms linear infinite;
    -webkit-animation: spinner 1000ms linear infinite;
	-ms-animation: spinner 1000ms linear infinite;
	animation: spinner 1000ms linear infinite;
}



@-webkit-keyframes spinner {
  100% {-ms-transform: rotate(360deg);  -webkit-transform: rotate(360deg);  transform: rotate(360deg);}
}
@-moz-keyframes spinner {
  100% {-ms-transform: rotate(360deg);  -webkit-transform: rotate(360deg);  transform: rotate(360deg);}
}
@-o-keyframes spinner {
  100% {-ms-transform: rotate(360deg);  -webkit-transform: rotate(360deg);  transform: rotate(360deg);}
}
@-ms-keyframes spinner {
  100% {-ms-transform: rotate(360deg);  -webkit-transform: rotate(360deg);  transform: rotate(360deg);}
}
@keyframes spinner {
  100% {-ms-transform: rotate(360deg);  -webkit-transform: rotate(360deg);  transform: rotate(360deg);}
}

/* animation reveal element entrance - with siblings */
.ani-reveal-entrance {
    animation: ani-reveal-entrance 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
    opacity: 0;
    /* transform: rotateX(-90deg);
    transform-origin: top center; */
    transform: translateY(10px);
    animation-delay: calc(sibling-index() * 100ms); /*delay for evary child sibling - not supported in FF*/
}
@keyframes ani-reveal-entrance {
  100% {
    opacity: 1;
    transform: none;
  }
}




/* word-break - break-word */

.screen-title h1,
.form-group,
.table {
	word-break: break-word;
}


/* disable selecting text */
.no-selection,
.main-nav,
.comp-list .actions-wrap-labels .action-label {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/**/

.panel-highlight {
	background-color:rgba(171, 187, 197, 0.16);
	padding: 10px;
}
.panel-highlight-gray {
	background-color: rgba(0,0,0,0.05);
	padding: 10px;
}

/* welcome-message-block */

.welcome-message-block {
    max-width: 750px;
    margin: auto;
    padding: 20px;
}

/* hover-hint-wrap - wrap any text with tag with this class to show some hint-action on hover */
.hover-hint-wrap {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.hover-hint-wrap .hint-action {
    display: none;
    background-color: var(--pan-bgr);
    position: absolute;
    right: 0;
    top: 0;
    padding: 2px 5px;
}

.hover-hint-wrap:hover .hint-action {
    display: block;
}

/* hov-over used for basic hover bgr change for any block element */
.hov-over:hover {
    background-color: var(--main-hover-light-bgr2);
}




/********************************  THEME SPECIFIC  ************************************/
html {background-color:var(--main-bg-color);}

/* login */
html.login,
html.login body {height: 100%; padding:0; margin:0;}

html.login {
	background-image: url(../images/login-map-bgr-7a777bd5120603663b65ccf6c2b45003.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
}

html.login body {position:relative;}

html.two-factor-auth,
html.two-factor-auth body {height: 100%; padding:0; margin:0;}

html.two-factor-auth {
	background-image: url(../images/login-map-bgr-7a777bd5120603663b65ccf6c2b45003.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
}

html.two-factor-auth body {position:relative;}

html.one-time-code,
html.one-time-code body {height: 100%; padding:0; margin:0;}

html.one-time-code {
	background-image: url(../images/login-map-bgr-7a777bd5120603663b65ccf6c2b45003.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
}

html.one-time-code body {position:relative;}

.form-signin {
	width:100%;
	max-width: 340px;
	display: block;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

.form-forgotten-pass {
	width:100%;
	max-width: 340px;
	display: block;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

.login-main-content header {
	padding:0.9em 0;
	line-height:1;
}

.login-main-content main {
	background-color:#d8dee2;
	padding:1em 1.2em;
	box-shadow: 0 0 70px 70px var(--main-bg-color);
}


.login-download {
	font-size: 0.95em;
	line-height: 1.2;
	margin-top:20px;
}
.login-download li {margin-bottom:20px;}
.login-download .ficon {margin: 4px 10px 0 0; font-size: 1.1em;}

.login [data-ember-action] {cursor:default;}

/**/
.additional-links {text-align: center;}


/* social links - hidden for client skin themes */
.social-links-wrap {
    display: flex; /*only visible for the default cm2w theme*/
    display: none;
    flex-direction: column;
    gap: 0px;
    justify-content: center;
    padding-top: 60px;

}
.social-links-wrap .title {
    /* font-size: .9rem; */
    text-align: center;
}
.social-links {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}



/* top bar offset correction */
body {
  /*padding-top:var(--app-header-height);*/
}

/* animation intro*/
.logo-intro {display: none;}

html[class="home"] .logo-intro {
    display: block;
	position: fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	/*width:345px;
	height:170px;
	background-repeat:no-repeat;
    background-size: cover;*/
	margin-left:90px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html[class="home"] .skin-aside .logo-intro {margin-left:20px;}

.logo-intro img {
    width: 280px;
}


/* help-guidance */

.help-guidance,
.has-error .form-control.help-guidance {
    /*border-color: #2CB7D5;*/
    -webkit-box-shadow: 0 0 5px 0px #2CB7D5;
    box-shadow: 0 0 5px 0px #2CB7D5;

	animation:  		visual-pulse 400ms linear infinite alternate;
    -moz-animation:  	visual-pulse 400ms linear infinite alternate;
    -webkit-animation:  visual-pulse 400ms linear infinite alternate;
	-ms-animation:  	visual-pulse 400ms linear infinite alternate;
}

@keyframes visual-pulse {
    100% { -webkit-box-shadow: 0 0 20px 6px #2CB7D5; box-shadow: 0 0 20px 6px #2CB7D5;}
}
@-moz-keyframes visual-pulse {
    100% { -webkit-box-shadow: 0 0 20px 6px #2CB7D5; box-shadow: 0 0 20px 6px #2CB7D5;}
}
@-webkit-keyframes visual-pulse {
    100% { -webkit-box-shadow: 0 0 20px 6px #2CB7D5; box-shadow: 0 0 20px 6px #2CB7D5;}
}

/* alert-guidance */

.alert-guidance,
.has-error .form-control.alert-guidance {
    -webkit-box-shadow: 0 0 5px 0px #A94442;
    box-shadow: 0 0 5px 0px #A94442;

	animation:  		alert-pulse 400ms linear infinite alternate;
    -moz-animation:  	alert-pulse 400ms linear infinite alternate;
    -webkit-animation:  alert-pulse 400ms linear infinite alternate;
	-ms-animation:  	alert-pulse 400ms linear infinite alternate;
}

@keyframes alert-pulse {
    100% { -webkit-box-shadow: 0 0 20px 6px #A94442; box-shadow: 0 0 20px 6px #A94442;}
}
@-moz-keyframes alert-pulse {
    100% { -webkit-box-shadow: 0 0 20px 6px #A94442; box-shadow: 0 0 20px 6px #A94442;}
}
@-webkit-keyframes alert-pulse {
    100% { -webkit-box-shadow: 0 0 20px 6px #A94442; box-shadow: 0 0 20px 6px #A94442;}
}


/* point-guidance */

.point-guidance {
    -webkit-box-shadow: 0 0 5px 0px var(--help-guidance-default-color);
    box-shadow: 0 0 5px 0px var(--help-guidance-default-color);

	animation:  		point-pulse 400ms linear infinite alternate;
    -moz-animation:  	point-pulse 400ms linear infinite alternate;
    -webkit-animation:  point-pulse 400ms linear infinite alternate;
	-ms-animation:  	point-pulse 400ms linear infinite alternate;
}

@keyframes point-pulse {
    100% { -webkit-box-shadow: 0 0 20px 6px var(--help-guidance-default-color); box-shadow: 0 0 20px 6px var(--help-guidance-default-color);}
}
@-moz-keyframes point-pulse {
    100% { -webkit-box-shadow: 0 0 20px 6px var(--help-guidance-default-color); box-shadow: 0 0 20px 6px var(--help-guidance-default-color);}
}
@-webkit-keyframes point-pulse {
    100% { -webkit-box-shadow: 0 0 20px 6px var(--help-guidance-default-color); box-shadow: 0 0 20px 6px var(--help-guidance-default-color);}
}


/* snapshot history hint */
.skin-snapshot-hint {
    background-color:rgba(41, 157, 57, 0.15);
    border-radius: 3px;
    --bs-table-bg:rgba(41, 157, 57, 0.15);
}
.skin-snapshot-deleted-hint {
    background-color:rgba(218, 107, 99, 0.15);
    border-radius: 3px;
    --bs-table-bg:rgba(218, 107, 99, 0.15);
}
.pan .skin-snapshot-hint {
    box-shadow: 0 0 0 1px var(--pan-bgr) inset;
    border-radius: 5px;
}

.pan .skin-snapshot-deleted-hint {
    box-shadow: 0 0 0 1px var(--pan-bgr) inset;
    border-radius: 5px;
}


/*quick-search*/ /* used in help tutorials */
.quick-search.form-group .dropdown {display: block !important;}

.quick-search .dropdown-menu>li>a {white-space: normal;  border-bottom: 1px solid rgba(0,0,0,0.08); padding: 6px 15px;}
.quick-search .dropdown-menu>li:last-child>a {border-bottom: none;}

.quick-search .dropdown-menu a .txt-label {
	float:right;
	margin:0 0 0 10px;
}



/*simple-tabs - used in product-grid*/
.simple-tabs {
	border-bottom: 1px solid rgba(0,0,0,0.2);
}
.simple-tabs .tab-item {
	display: inline-block;
	padding: 5px 8px;
	margin-right: 3px;
	cursor: pointer;
	border: solid #ddd;
	border-width: 1px 1px 0 1px;
    position: relative;
}
.simple-tabs.longer-tabs .tab-item {
	min-width: 100px;
}

.simple-tabs .tab-item.selected {
	background-color: #2cb7d5;
	color: #fff;
}

.simple-tabs .tab-item.selected:before {
	content:"";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    display: block;
    width: 0;
    height: 0;
    border: 6px solid;
    border-color: #2cb7d5 transparent transparent transparent;
}



/************* BTS and Ember overwrite theme skin >>>> */
.checkbox, .radio {

}
.checkbox input, .radio input {
    cursor: pointer;
    transform: scale(1.3);
    transform-origin: left;
}

.checkbox,.radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px
}

.checkbox label,.radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer
}

.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio] {
    position: absolute;
    margin-top: 4px\9;
    margin-left: -20px;
}

.checkbox+.checkbox,.radio+.radio {
    margin-top: -5px
}

.checkbox-inline,.radio-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer
}

.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline {
    margin-top: 0;
    margin-left: 10px
}

fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled] {
    cursor: not-allowed
}

.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline {
    cursor: not-allowed
}

.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label {
    cursor: not-allowed
}
/* EXCEPTIONS LEGACY from old version v3.2 for v5 >>> */
.form-group {
    margin-bottom: var(--form-group-mb);
}
/* .form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
} */
.checkbox, .radio {
    margin-top: 10px;
    margin-bottom: 10px;
}

.badge, .label, b, dt, kbd kbd, label, optgroup, strong {
    font-weight: 700;
}

/*temp - decide later*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1; /* this was missing */
    color: inherit;
}


/*old version v3.2 dropdown exceptions*/

.top-header-unit .dropdown.open>.dropdown-menu,
.filter-item.dropdown.open>.dropdown-menu {
    display: block;
}
.top-header-unit .dropdown-menu.dropdown-menu-end {
    right: 0;
}
.filter-item .dropdown-menu.dropdown-menu-end {
    right: 0;
}

 .dropdown-menu {
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
/* remove default "caret" icon */
.dropdown-toggle::after {
    display:none;
}

/**/
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
  }
  a.label:hover,
  a.label:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }
  .label:empty {
    display: none;
  }
  .btn .label {
    position: relative;
    top: -1px;
  }
  .label-default {
    background-color: #777;
  }
  .label-default[href]:hover,
  .label-default[href]:focus {
    background-color: #5e5e5e;
  }
  .label-primary {
    background-color: #337ab7;
  }
  .label-primary[href]:hover,
  .label-primary[href]:focus {
    background-color: #286090;
  }
  .label-success {
    background-color: #5cb85c;
  }
  .label-success[href]:hover,
  .label-success[href]:focus {
    background-color: #449d44;
  }
  .label-info {
    background-color: #5bc0de;
  }
  .label-info[href]:hover,
  .label-info[href]:focus {
    background-color: #31b0d5;
  }
  .label-warning {
    background-color: #f0ad4e;
  }
  .label-warning[href]:hover,
  .label-warning[href]:focus {
    background-color: #ec971f;
  }
  .label-danger {
    background-color: #d9534f;
  }
  .label-danger[href]:hover,
  .label-danger[href]:focus {
    background-color: #c9302c;
  }


/* EXCEPTIONS LEGACY from old version <<< */


/* dropdown skin-clean */
.dropdown.skin-clean {
    position: relative;
    display: inline-block;
}

.skin-clean .btn-default {
	background-color:transparent;
	border:none;
	color:inherit;
}
.skin-clean .btn-default.active,
.skin-clean .btn-default:active,
.skin-clean.open > .dropdown-toggle.btn-default {
	background-color:rgba(255, 255, 255, 0.3);
	border:none;
	color:inherit;
}

.skin-clean .dropdown-menu {
	border:none;
	border-radius: 0;
    color: var(--dropdown-menu-color);
    font-size: 0.8rem;
    background-color: var(--dropdown-menu-bgr);
}

.skin-clean .dropdown-menu .link,
.skin-clean .dropdown-menu .inner-wrap {
	padding: var(--dropdown-link-padding);
    display: block;
}
.skin-clean.sep .dropdown-menu > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.skin-clean .dropdown-menu > li:not(.divider-heading):hover {
	color: var(--dropdown-menu-color-hover);
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {}

.skin-clean .dropdown-menu .link:hover {
	  background-color: var(--dropdown-menu-item-bgr-hover);
}

.skin-clean .dropdown-menu .link.selected,
.skin-clean .dropdown-menu li.selected {
	  background-color: var(--accent-bg);
      color: var(--accent-bg-txt);
}

.skin-clean .dropdown-menu .link.selected-light,
.skin-clean .dropdown-menu li.selected-light {
	  background-color: var(--accent-light-bg);
      color: var(--accent-bg-txt);
}

.skin-clean .dropdown-menu .divider {padding: 0;}


/* dropdown skin-clean + skin-tip */
.skin-clean.skin-tip .dropdown-menu {
	border-radius: 4px;
    margin-top: 0;
}
.skin-clean.skin-tip.open .dropdown-menu {
    margin-top: 10px;
}
.skin-clean.skin-tip .dropdown-menu:before {
	content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 10px;
    transform: translateY(-100%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px;
    border-color: transparent transparent var(--dropdown-menu-bgr) transparent;
}
.skin-clean.skin-tip .dropdown-menu.dropdown-menu-end:before {
    left: auto;
    right: 10px;
}

/*dropdown type-sizible*/
.type-sizible .dropdown-menu {
	width: 100%;
}
.type-sizible .dropdown-menu > li > a { white-space: normal;}
.type-compact .dropdown-menu > li > a { padding-left:10px; padding-right: 10px; }

/*dropdown sizes - default - min width 160px*/
.dropdown-size-xl .dropdown-menu {
	width: 240px;
}
.dropdown-size-xxl .dropdown-menu {
	width: 320px;
}

/*dropdown type-list-items-flexbox -  when list items are flexbox parent items and text-item is flex 1*/
.type-list-items-flexbox .dropdown-menu > li {display: flex; align-items: center; line-height: 1.2;}
.type-list-items-flexbox .dropdown-menu .text-item {flex: 1; padding-right: 8px;}

.type-list-items-flexbox .dropdown-menu .checbox-switch {margin: 0;}
.type-list-items-flexbox .dropdown-menu .checbox-switch label {margin: 0;}

/* dropdown-invert-icons-position - used in "filter by" reverted icons position */
.skin-clean .dropdown-menu.dropdown-invert-icons-position li {display: flex; align-items: center;}

.skin-clean .dropdown-menu.dropdown-invert-icons-position li .ficon {flex: 1; padding-left: 8px; order: 2; text-align: right;}


/* dropdown skin-context */
.dropdown.skin-context {display: inline-block;}

.dropdown .dropdown-toggle {padding:6px;}
.dropdown.open .dropdown-toggle { background-color:rgba(0,0,0,0.06);}

.skin-context .dropdown-menu {
	border:none;
	border-radius: 0;
	/*box-shadow:none;*/
	background-color:#2C3139;
	color:#fff;
	padding:5px 0;
}
.skin-context .dropdown-menu a,
.skin-context .dropdown-menu span,
.skin-context .group-title {
	color:#fff;
	padding:5px 15px;
	display:block;
	font-size: 1em;
}

.skin-context .dropdown-menu > li > a:focus,
.skin-context .dropdown-menu > li > a:hover,
.skin-context .dropdown-menu > li > span:focus,
.skin-context .dropdown-menu > li > span:hover {
	color:#fff;
	background-color:rgba(255, 255, 255, 0.2);
}
.skin-context .dropdown-menu .ficon:before {vertical-align: middle;}

.dropdown.skin-context .group-title {
	color: rgba(255,255,255,0.6);
	text-transform:uppercase;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding:2px 16px 8px 16px;
	font-size:0.9rem;
	cursor:default;
	text-align:right;
}


/* dropdown skin-context context-fixed */  /*positionning with js*/
.dropdown.context-fixed .dropdown-menu {
	position: fixed;
	width: 160px;
	-webkit-transform:translate(-100%,0);
	transform:translate(-100%,0);
	margin-left:29px; /*push offset with the sibling toggle element*/
	max-height:320px;
	overflow-y: auto;
}
.dropdown.context-fixed.direction-up .dropdown-menu {
	-webkit-transform:translate(-100%,-100%);
	transform:translate(-100%,-100%);
	margin-top:-29px; /*offset with the sibling toggle element*/
}

/* dropdown-menu divider-heading - smt new control - used on li */
.dropdown-menu .divider-heading {
    margin: 12px 0 8px 0;
    padding: 0;
    display: flex;
    align-items: center;
    color: #777;
    font-size: 0.7rem;
    text-transform: uppercase;
}
.dropdown-menu .divider-heading.indented {
    margin: 5px 12px 2px 12px;
    padding: 0;
}
.dropdown-menu .divider-heading:before {
    content: "";
    flex: 1;
    height: 1px;
    margin-right: 5px;
    overflow: hidden;
    background-color: var(--shade-of-dark1);
}
.dropdown-menu .divider-heading:after {
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    margin-left: 5px;
    overflow: hidden;
    background-color: var(--shade-of-dark1);
}
/* dropdown-menu highlight */
.dropdown-menu .highlight a,
.dropdown-menu .highlight span {
    background-color: #faa941;
    color: #fff;
}




/**/
.form-group .dropdown {display: inline-block;}

.form-group .line-fix {display: block;}
.form-group .line-fix:before {content:"\00a0";} /* fill empty line with empty non-breakable whitespace */

/*validation message container - hided when empty do not disturb other elements with space*/
.help-block:empty {display: none;}

.checkbox input[type="checkbox"]{width:auto;}

.table .checkbox,
.table input[type="checkbox"],
.table input[type="radio"] {margin-top:0;}

/* stacked inputs or buttons*/
.form-control.stack-r {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.form-control.stack-l {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.btn.stack-r {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right:-1px;
}
.btn.stack-l {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left:-1px;
}

/*skin-read-only - for labels and span elements in form-group*/


.skin-read-only .form-group {
    /* this will be implemented when all forms has not empty tags with padding */

    /*keep in mind that this property must be excluded from ".nav.nav-pills.sub-tabs" */
	/*border-bottom: 1px solid rgba(0,0,0,0.1);*/
}

.skin-read-only .control-label {
	font-weight:normal;
	color:#A6AAAE;
	/*font-size:0.95em;*/
	margin-bottom:0;
	line-height:1.8;
}

.skin-read-only .control-label + span {
	display:block;
	margin-top:-5px;
}

.skin-read-only  .btn.btn-clean.cursor-default {
	border: none;
	background-color: transparent;
	padding: 0px;
	font-size:1rem;
}

/* buttons skin */
.btn-default {
	background-color: #dee9c9 /*#c4d7e4*/;
    border-color: #bbd68d /*#c4d7e4*/;
    color: #2C3A50;
    --bs-btn-disabled-color: #2C3A50;
    --bs-btn-disabled-bg: #dee9c9 /*#c4d7e4*/;
    --bs-btn-disabled-border-color: #bbd68d /*#c4d7e4*/;
}
.btn-default.btn-clean {
	color: var(--main-txt-color);
	background-color: var(--popup-bgr);
	border-color: var(--shade-of-dark1);
}

.btn .ficon {vertical-align:middle; margin-right: 5px;}

.btn.btn-xs {font-size:0.9rem; line-height:1.6; padding:0 6px;}
.btn.btn-xs .ficon {
	font-size:0.85em;
	line-height:1em;
	vertical-align: baseline;
}

.btn-success {
    color: #fff;
    background-color: #80b329;
    border-color: #4cae4c;
}

/* buttons loading */
/* this class is for adding animation pseudo element, please see the same class declared in font-specific area and in the css-animation area */
.btn-loading,
.btn-loading:focus,
.btn-loading:hover {
	position:relative;
	color: rgba(0, 0, 0, 0) !important;
}
.btn-loading::before {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -8px 0 0 -8px;
	color: rgba(0, 0, 0, 0.5);
	font-size: 16px;
	line-height: 16px;
	display: block;
	width: 16px;
	height: 16px;
}
/*.btn-default.btn-loading::before{color:#2C3A50}*/

/* main-action loading - action-loading */
.ficon.ficon-loading {
    position: relative;
}
.ficon.ficon-loading:before {
    opacity: 0;
}
.ficon.ficon-loading:after {
    position: absolute;
	left: 0;
	top: 0;
    font-size: inherit;
    line-height: inherit;
    color: rgba(0, 0, 0, 0.4);
}


/* ai chat button >> - vendor icon and styles replacement fixes */
.chatbase-btn {
	position: fixed;
	border: 0px;
	bottom: 1rem;
	right: 1rem;
	width: 50px;
	height: 50px;
	border-radius: 27.5px;
	background-color: var(--theme-identity-bgr);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
	cursor: pointer;
	z-index: 2000;
	transition: 0.2s ease-in-out;
	left: unset;
	transform: scale(1);
}
.chatbase-custom-btn {
	right: 6rem;
}
.chatbase-btn svg:not(#closeIcon) {
    display: none !important;
}
.chatbase-btn:has(svg:not(#closeIcon))::before {
    content: "\e9c5";
	font-family: 'ficon' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    font-size: 32px;
}
/* << ai chat button */


/* panel - legacy definition */
.panel {
    margin-bottom: 20px;
    background-color: var(--pan-bgr);
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
    padding: 15px;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;

    line-height: 1.3;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}


/* panel-accent */
.panel-accent {
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 3px;
}

.panel-heading.date-accent {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #4477aa;  /*#7FACDD; #397fa5*/
	color: #fff;
	line-height: 1.1;
}
.panel-heading.date-accent.archived {
	background-color: #b9b9b9;
	color: #fff;
}
.panel-heading.date-accent .icon {
	padding-right: 10px;
	max-width: 64px;
}
.panel-heading.date-accent.archived .icon {
	filter: saturate(0);
	opacity: 0.6;
}

.panel-heading.date-simple-view {
	padding: 8px 10px;
	border: 1px dashed #7FACDD;
	line-height: 1.2;
}
.panel-heading.date-simple-view .icon {
	padding-right: 10px;
	max-width: 48px;
}

/**************************** content-filter-wrap ******************************/
.content-filter-wrap {
    position: -webkit-sticky;
    position: sticky;
    /* top: var(--pageindex-bottom); */
    top: 0;
    z-index: 90;

    transform: translate(0,-10px);

    opacity: 0;
    max-height: 0;
    overflow: hidden;

    box-sizing: border-box;
    transition: all 300ms linear, max-height 500ms linear;

}

.open-filter .content-filter-wrap {
    max-height: 400px;
    overflow: visible;
    transform: translate(0,0);
    opacity: 1;
    /* margin-bottom: calc(-1* var(--page-index-padding-ver)); */
}
/**/
.content-filter-wrap .filter-inner-wrap {
    border-radius: var(--pan-border-radius);
    background-color: var(--filter-wrap-bgr);
    padding: var(--pan-padding);
    box-sizing: border-box;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}

.content-filter-wrap .filter-inner-wrap .actions-wrap {
    flex: 1;
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    order: 999; /* to be last item in the filter list for special use cases like reports - the system inserts filter items after "actions-wrap" in the dom */
}
.content-filter-wrap .main-action.notif-hint:before {
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
}

/***********/

.page-actions .main-action.filter-btn-component {
    padding-left: 6px;
    padding-right: 6px;
}

.page-actions .main-action.filter-btn-component.pressed {
    background-color: var(--filter-wrap-bgr);
    border-radius: var(--pan-border-radius) var(--pan-border-radius) 0 0;
    box-shadow: 0 2px 0 var(--filter-wrap-bgr);
}


/* filter items */

.filter-item {
    position: relative;
}

.filter-item-inner {
    display: flex;
    align-items: center;
    padding: 6px 8px 6px 12px;
    border-radius: 100px;
    background-color: var(--filter-item-bgr);
    color: var(--filter-item-txt);
    font-weight: bold;
    font-size: 0.8rem;
    line-height: 1.3;
    cursor: pointer;
}

/* filtered */
.filter-item.filtered .filter-item-inner {
    box-shadow: 0 0 0 1px var(--accent-color) inset;
    color: var(--accent-color);
}

/* selected */
.filter-item.selected .filter-item-inner {
    box-shadow: 0 0 0 1px var(--ok-accent-color) inset;
    color: var(--ok-accent-color);
}

/* disabled */
.filter-item.disabled .filter-item-inner {
    background-color: var(--filter-item-disabled-bgr);
    color: var(--filter-item-disabled-txt);
    cursor: default;
}
.filter-item.disabled .item-trigger {
    cursor: default;
}

.filter-item .item-txt {
    flex: 1;
    min-width: 30px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filter-item .item-trigger {
    cursor: pointer;
    padding: 3px 3px 1px 8px;
    line-height: 1;
}
.filter-item .item-trigger:before {
    display: block;
}
/* filter item type filter-input */
.filter-item.filter-input .filter-item-inner {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 0;
}
.filter-item.filter-input .item-field input {
    border: none !important;
    box-shadow: none;
    background-color: transparent;
    height: 25px;
    padding-left: 26px;
    /* font-weight: normal; */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    position: relative;
    z-index: 10;
    cursor: pointer;
    width: 115px; /* must be adjusted according placeholder text */
}
.filter-item.filter-input .item-field input::placeholder {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

.filter-item.filter-input.filtered .item-field input {
    color: inherit;
}
.filter-item.filter-input .item-field input:focus,
.filter-item.filter-input .item-field input:active {
    width: 180px;
}

.filter-item.filter-input .item-field input:focus::placeholder {
    opacity: 0.4;
}
/**/
.filter-item.filter-input .item-field .hint-search {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
}


/* filter-item dropdown */
.filter-item .dropdown-menu {
    min-width: 260px;
    /* padding-top: 0; */
}
.filter-item .dropdown-menu .link,
.filter-item .dropdown-menu .inner-wrap {
    padding-top: 6px;
    padding-bottom: 6px;
}
.filter-item.open .filter-item-inner {
    background-color: var(--filter-item-bgr-open);
}
/**/
.filter-item .filter-item-form {
    padding: 8px;
    /* position: sticky;
    top: 0;
    background-color: var(--dropdown-menu-bgr); */
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-item .filter-item-form .info-badge {
    font-size: 1rem;
}
.filter-item .list-wrap.scroll-wrap {
    max-height: 256px;
    overflow: auto;
}


.filter-item .filter-item-form .form-group {
    margin: 0;
}

.filter-item.open .item-trigger:before {
    transform: rotate(180deg);
}
.filter-item.open .item-trigger.ficon-close:before {
    transform: rotate(90deg);
}
/**/
.filter-item .checkbox.checbox-switch,
.filter-item .checkbox.checbox-switch label {
    margin: 0 !important;
}
/* filter-item additional-wrap */
.filter-item .additional-wrap {
    padding: var(--dropdown-link-padding);
    padding-top: 15px;
}







/* tables */
.ember-application .table {
    margin-bottom: 30px; /*was 20px from BTS, but needed 30px because tooltip dropdowns on icon actions in the grid*/
	font-size: 0.9em; /* compact view */
}

.ember-application .table td,
.ember-application .table th {border-color:rgba(133, 158, 176, 0.5); /*font-size:0.95em;*/ line-height:1;}  /*ember-application class is for css rule weight*/

.ember-application .table th {font-weight: bold; color: var(--form-label-txt); }

.ember-application .table .cell-icon-actions {
	font-size: 1.1rem;
	padding:6px 8px 5px 8px; /*padding: 8px; is default for table cells, here we need room for bigger action icon*/
}

.table-layout-fixed {table-layout: fixed;}

/* force-thead-sticky - this is special case when on desktop screen responsive table is disabled and the table header became sticky element*/
.table-responsive.force-thead-sticky {
	overflow: visible;
}

.force-thead-sticky .table thead {
	position: sticky;
	top: 57px;
	z-index: 10;
}
.scrolled-up .force-thead-sticky .table thead {
	top: 92px;
}
.force-thead-sticky .table thead th {
	border: none;
	box-shadow: 0 -2px 0 0 rgba(133, 158, 176, 0.5) inset;
	background-color: var(--main-bg-color);
}
@media only screen and (max-width:1600px) {
	.table-responsive.force-thead-sticky {
		overflow-x: auto;
	}

	.force-thead-sticky .table thead {
		position: static;
	}
}

/* table-self-sticky - used on "table-responsive" tag */
.table-self-sticky {
    max-height: calc(90dvh - 100px);
    min-height: .01%;
    overflow-x: auto;
}
.table-self-sticky .table {
    border-collapse: inherit;
}
.table-self-sticky thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--main-bg-color);
}
/*sticky-first-col*/
.table-self-sticky.sticky-first-col tbody tr > td {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 99;
    background-color: var(--main-bg-color);
}
.table-self-sticky.sticky-first-col .info > td {
    --main-bg-color: var(--table-row-highlight-color);
}

/* top-left cell bouble sticky */
.table-self-sticky .cell-double-sticky {
    left: 0;
    z-index: 101;
}

.table>tbody>tr.info>td,
.table>tbody>tr.info>th,
.table>tbody>tr>td.info,
.table>tbody>tr>th.info,
.table>tfoot>tr.info>td,
.table>tfoot>tr.info>th,
.table>tfoot>tr>td.info,
.table>tfoot>tr>th.info,
.table>thead>tr.info>td,
.table>thead>tr.info>th,
.table>thead>tr>td.info,
.table>thead>tr>th.info {
  background-color: var(--table-row-highlight-color);
}


/* action-cell single-action - used in devices->programs->reorder actions*/
.action-cell .ficon:hover {color: rgba(0,0,0,0.5);}

.action-cell.single-action {
    width:20px;
    padding-left: 0;
    padding-right: 6px;
}

/* labels */
label {
    color: var(--form-label-txt);
    margin-bottom: 2px;
    font-size: 0.9em;
}

/* tabs */
/* em-tab-list - + bts tabs the new variant */
.nav.nav-tabs,
.em-tab-list {
	display:block;
	list-style:none;
	padding:0;
	margin:1rem 0;
	border-bottom:1px solid #D8DEE2;
    user-select: none;
}

.nav.nav-tabs li,
.em-tab-list li {
	display:inline-block;
	float: none;
	padding:0;
	margin-top: 6px;
	-webkit-border-radius:4px 4px 0 0;
	border-radius:4px 4px 0 0;
	box-shadow: 0 -4px #D8DEE2 inset;
}
.nav.nav-tabs li span,
.nav.nav-tabs li a,
.em-tab-list li span {
	padding:8px 12px;
	display:inline-block;
	cursor:pointer;
	margin: 0;
}

.nav.nav-tabs li span:hover,
.nav.nav-tabs li a:hover,
.em-tab-list li span:hover {color: #2cb7d5; background-color: transparent; border-color: #D8DEE2;}

.nav.nav-tabs li.active a,
.em-tab-list .em-tab[active="true"] {
	background-color:#D8DEE2;
	color:#2C3A50;
	border-color: #D8DEE2;
    border-bottom-color: #D8DEE2;
}




/* nav nav-pills sub-tabs */
.nav.nav-pills.sub-tabs {
	margin-top:0;
	padding:0 6px;
	margin-bottom:2rem;
    user-select: none;
}
.nav.nav-pills.sub-tabs li {
	margin: 6px 4px;
	box-shadow: 0 -1px #2cb7d5 inset;
}
.nav.nav-pills.sub-tabs>li.active {box-shadow:none;}

.nav.nav-pills.sub-tabs>li>a {
	padding:2px 10px;
	position:relative;
	color: inherit;
	-webkit-border-radius:4px 4px 0 0;
	border-radius:4px 4px 0 0;
}
.nav.nav-pills.sub-tabs>li>a:hover {background-color: transparent; color: #2cb7d5;}

.nav.nav-pills.sub-tabs>li.active>a,
.nav.nav-pills.sub-tabs>li.active>a:focus,
.nav.nav-pills.sub-tabs>li.active>a:hover {background-color: #2cb7d5; color:#fff; outline: none;}

.nav.nav-pills.sub-tabs>li>a:before {
	content:"";
	display:block;
	opacity:0;
	width:0;
	height:0;
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-6px;
	border:6px solid;
	border-color: #2cb7d5 transparent transparent transparent;
}

.nav.nav-pills.sub-tabs>li.active>a:before {opacity:1;}

/* nav nav-pills sub-tabs - skin-pills */
.nav.nav-pills.sub-tabs.skin-pills,
.nav.nav-pills.sub-tabs.skin-pills-soft {
	padding: 0 4px;
	display: flex;
	flex-wrap: wrap;
}
.nav.nav-pills.sub-tabs.skin-pills {
	margin-bottom: 0.75rem;
}
.nav.nav-pills.sub-tabs.skin-pills-soft {
	margin-bottom: 1rem;
}
.nav.nav-pills.sub-tabs.skin-pills li,
.nav.nav-pills.sub-tabs.skin-pills-soft li {
	box-shadow: none;
	float: none;
}
.nav.nav-pills.sub-tabs.skin-pills li {
	margin: 6px;
}
.nav.nav-pills.sub-tabs.skin-pills-soft li {
	margin: var(--skin-pills-soft-outer, 4px 4px);;
}
.nav.nav-pills.sub-tabs.skin-pills>li>a,
.nav.nav-pills.sub-tabs.skin-pills-soft>li>a {
	border-radius: 999px;
	display: inline-block;
}
.nav.nav-pills.sub-tabs.skin-pills>li>a {
	background: rgba(44, 183, 213, 0.08);
	padding: 6px 14px;
}
.nav.nav-pills.sub-tabs.skin-pills>li.active>a,
.nav.nav-pills.sub-tabs.skin-pills>li.active>a:focus,
.nav.nav-pills.sub-tabs.skin-pills>li.active>a:hover {
	background-color: #2cb7d5;
	color: #fff;
}
.nav.nav-pills.sub-tabs.skin-pills>li>a:before,
.nav.nav-pills.sub-tabs.skin-pills-soft>li>a:before {
	display: none;
}
.nav.nav-pills.sub-tabs.skin-pills-soft>li>a {
	padding: var(--skin-pills-soft-padding, 4px 12px);
	border: 1px solid rgba(0,0,0,0.12);
	background: transparent;
}
.nav.nav-pills.sub-tabs.skin-pills-soft>li>a:hover {
	background: rgba(44, 183, 213, 0.06);
}
.nav.nav-pills.sub-tabs.skin-pills-soft>li.active>a,
.nav.nav-pills.sub-tabs.skin-pills-soft>li.active>a:focus,
.nav.nav-pills.sub-tabs.skin-pills-soft>li.active>a:hover {
	background: rgba(44, 183, 213, 0.14);
	color: inherit;
	outline: none;
}

/* expand-panel - used in Notification templates >>> */

.expand-panel {
	border: 1px solid var(--border-color-light);
	border-radius: 10px;
	overflow: clip;
	box-shadow: 0 1px 2px var(--main-hover-light-bgr2);
    padding: var(--pan-padding);
}
.expand-panel:not(.open):hover {
	background: var(--main-hover-light-bgr2);
}
.expand-panel:not(.open) .trigger-icon-wrap {
	padding: 0;
}

.expand-panel-header {
	user-select: none;
    min-height: 60px;
}

.expand-panel-header .panel-meta {
    margin-top: 2px;
    color: var(--pan-meta-txt);
}

.expand-panel-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    transition: grid-template-rows 220ms ease, opacity 180ms ease, padding 220ms ease;
}
.expand-panel.open .expand-panel-body {
    grid-template-rows: 1fr;
    opacity: 1;
}
.expand-panel-body > .inner-wrap {
    min-height: 0;
}
.expand-panel.open .expand-panel-body > .inner-wrap {
    padding-block: var(--pan-padding-ver);
}
/**/
.expand-panel.skin-clean {
    border-bottom: 0;
    border-top: 1px solid var(--border-color-light);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
}
.expand-panel.skin-clean:first-child {
    border-top: 0;
}

/* expand-panel - used in Notification templates <<< */



/* nav nav-pills sub-tabs with action-insert */
.nav.nav-pills.sub-tabs.action-insert>li.active {
	position: relative;
}
.nav.nav-pills.sub-tabs.action-insert>li.active>a {
	padding-right: 32px;
}
.nav.nav-pills.sub-tabs.action-insert .action {
	display: none;
}
.nav.nav-pills.sub-tabs.action-insert>li.active .action {
	position: absolute;
    display: block;
    top: 0px;
    right: 0px;
    z-index: 100;
    border-left: 1px solid rgba(255,255,255,0.4);
}
.nav.nav-pills.sub-tabs.action-insert>li.active .action .ficon {
    display: inline-block;
    padding: 6px 5px;
    color: #fff;
}


/* !!! Force tabs horizontal with scroll for mobile devices >>> */
.mobile-detected .nav.nav-tabs,
.mobile-detected .em-tab-list,
.mobile-detected .nav.nav-pills.sub-tabs,
.mobile-detected .clean-tabs,
.clean-tabs.swipeable {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    /*position: relative;*/ /* needed for fade effect on right */
}
.mobile-detected .nav-pills>li {
    float: none;
    display: inline-block;
}

.mobile-detected .nav.nav-pills.sub-tabs {margin-bottom: 1rem;}

/* fade effect on right - but must be on different tag, on parent not on the list when scrolling is hided */

/*.mobile-detected .nav.nav-tabs:after,
.mobile-detected .em-tab-list:after,
.mobile-detected .nav.nav-pills.sub-tabs:after {
    content:"";
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    background: var(--main-bg-color);
    background: linear-gradient(to right,  rgba(241,241,241,0) 0%,rgba(241,241,241,1) 100%);
}*/

/* Force tabs horizontal with scroll for mobile devices <<< */


/* clean-tabs */
.clean-tabs {user-select: none;}
.clean-tabs.list li {display: inline-block; margin-bottom: 3px; padding: 0 10px; margin-right: 2px;}
.clean-tabs li.active {
    border-bottom: 3px solid #27AAE1;
    margin-bottom: 0;
}
.clean-tabs a,
.clean-tabs .link {
    color: var(--main-txt-color);
}
.clean-tabs a:hover,
.clean-tabs .link:hover {
    color: inherit;
}



/* section panel */
.section-panel {}
.section-header {
	padding:8px 20px;
	background-color:rgba(0, 0, 0, 0.06);
	margin:20px 0;
    width: auto;
}
.section-header.no-indent {
	padding:12px;
	margin:20px 0 0 0;
}
.section-header.row {padding:12px 15px;}

.section-header h2,
.section-header h3,
.section-header h4,
.section-header .h2,
.section-header .h3,
.section-header .h4 {
	color:#758089;
	margin:0;
    padding:4px 0;
}

.section-action {text-align:right;}

.section-header .main-action {
    display: inline-block;
    margin-left: 4px;
    padding: 4px 2px;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--main-action-color);
    line-height: 1;
}
.section-header .main-action:hover {
    color: var(--main-action-color-hover);
}

/* modal - popup */
.ember-modal-overlay{
	top: 0px;
	left: 0px;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1999;
}

.popup {
	z-index: 2000;
	width: 100%;
	max-width: 1024px;
	overflow-y: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


.popup .inner-wrap {
	background-color: var(--popup-bgr);
}

.popup .popup-header {
	padding: 6px 1.6rem;
	background-color: var(--theme-identity-bgr);
	color:var(--theme-identity-bgr-txt);
    max-height: var(--popup-header-height);
    /* extended with flexbox in layout css */
}
.popup .popup-header .title {
    font-size:1.1rem;
	flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
}
.popup .popup-header .header-actions {
	display: block;
    font-size:1.2rem;
    white-space: nowrap;
}
.popup .header-actions .main-action,
.popup .header-actions .dropdown {
	display: inline-block;
    margin-left: 2px;
    padding: 0 2px;
    cursor: pointer;
}
.popup .header-actions .main-action.combined {
    line-height: 1;
    padding: 0;
}
.popup .header-actions .main-action.combined .action-text {
    padding: 0;
}


.popup .content {
    padding: 0;
    max-height: var(--popup-content-height);
    overflow-y: auto;
}


.popup .content .inner-content {
    padding: 1.6rem;
}
.popup .btn {margin-bottom: 12px;}


/* popup sizes */
.popup.size-small {max-width:450px;}
.popup.size-medium {max-width:840px;}
.popup.size-large {max-width:1400px;}
.popup.size-xlarge {max-width:1800px;}



/* video popup */
.video-popup {padding:var(--image-popup-padding);}

.video-popup .inner-wrap,
.image-popup .inner-wrap {
    background-color: transparent;
    padding: 0;
}

.video-popup .popup-header,
.image-popup .popup-header {
    text-align: right;
    display: block;
    background-color: transparent;
    padding: 0;
}

.video-popup .popup-header .trigger,
.image-popup .popup-header .trigger {
	background-color:rgba(255, 255, 255, 0.4);
	color:rgba(0, 0, 0, 0.6);
	display:inline-block;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:20px;
}
.video-popup .popup-header .trigger:hover,
.image-popup .popup-header .trigger:hover {
	background-color:rgba(255, 255, 255, 0.8);
	color:rgba(0, 0, 0, 0.7);
}

.video-wrap {
	position: relative;

	/* 16:9
	padding-bottom: 56.25%;
	padding-top: 25px;
	*/

	padding-bottom: 52.8%;
	height: 0; /* changes in mobile height media-queries */
	max-height:100dvh;
}
.video-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-wrap video {
	width: 100% !important; height: auto !important;
}
/**/

/* image popup */
.image-popup {
    padding: var(--image-popup-padding);
    --popup-content-height: calc(98dvh - var(--popup-header-height));

    /* width: auto; */
    max-width: max-content;
    position: fixed;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible;
}

.image-popup .content {
    padding: 5px 0;
    max-height: none;
    overflow: visible;
}
.image-popup .content .inner-content {
    padding: 0 !important;
}


.image-popup .content .inner-content img {
    max-width: 100%;
    max-height: calc(98dvh - var(--popup-header-height));
    box-shadow: 2px 2px 60px rgba(0, 0, 0, 0.4);
}


/**/




.datepicker.dropdown-menu {z-index:3000; line-height:1;}

/* bts standard alert block */
.alert {
    padding: 8px;
    border: none;
    border-radius: var(--pan-border-radius);
}
.alert.size-xl {
    padding: 18px 24px;
}

.alert .text-unit .unit-label {color: rgba(0, 0, 0, 0.5);}


/* global-notification - alerts  */
.global-notifications {
	position: fixed;
	bottom: 40px;
	right: 0;
	width: 100%;
	max-width: 450px;
	z-index: 3001;
	margin-right: 20px;
}

/*.skin-aside .global-notifications {margin-left:25px;}*/
.login .global-notifications,
.global-notifications.help-notifications {
	bottom: auto;
	right: auto;
	top: 61px;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	margin:0;
}

.global-notifications .alert {
	position:relative;
	border-radius: 0;
	margin: 0;
	color: #fff;
    border-color: transparent;
    padding-right: 52px;
}
.global-notifications.help-notifications .alert {
	box-shadow: 9px 25px 20px rgba(0,0,0,0.2);
}

.global-notifications .alert-success {background-color: #49964d;}
.global-notifications .alert-danger {background-color: #a94442;}
.global-notifications .alert-warning {background-color: #cc7d25;}
.global-notifications .alert-info {background-color: #679dd0;}
.global-notifications .alert-help {background-color: #8dbf85;}


.global-notifications .alert.custom-site-message {
    font-size: 30px;
    position: fixed;
    margin: 0 !important;
    top: 0;
    line-height: 1;
    right: 0;
    padding-right: 80px;
    width: 100%;
    background-color: #f5b419;
    max-width: 800px;
    padding: 13px 16px;
    box-shadow: -8px 10px 18px rgba(0,0,0,0.2);
}
@media only screen and (max-width: 480px) {
    .global-notifications .alert.custom-site-message {top: var(--app-header-height);}
}

.global-notifications .alert.custom-site-message a {
    color: inherit;
}


.global-notifications .alert .trigger {
	position: absolute;
	width: 46px;
	height: 46px;
    max-height: 100%;
	top: 0;
	right: 0;
	cursor: pointer;
    text-align: center;
}
.global-notifications .alert .trigger:before {
    margin-top: 12px;
    display: inline-block;
}


/* autocomplete list */
.autocomplete-list-wrap .btn {margin-bottom: 0;}

.autocomplete-list {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	/*max-width: 350px;*/
	max-height: 200px;
	overflow-y: auto;
	background-color: var(--popup-bgr);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
	color: var(--main-txt-color);
	z-index: 999;

}
.autocomplete-list li {
	padding: 6px 12px; line-height: 1.7;
	cursor: pointer;
}
.autocomplete-list li.on-focus {
	background-color: rgba(0,0,0,0.09);
}

.autocomplete-list .text-match {
	color: #1fa7c5;
	font-weight: bold;
	/*background-color: rgba(31, 167, 197, 0.2);*/
	display: inline-block;
}

/* input-group-btn fix - fix for autocomplete-list wich confuse the last-child order in the input-group-btn*/
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    z-index: 2;
    margin-left: -1px;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn-group:not(:first-child) > .btn,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.autocomplete-list-wrap .btn-clean {border-radius:0;}


/* reminders - multi list select - multiple-party-select-component */

.atached-list-view .list.hor {
	background-color:rgba(216, 222, 226, 0.8);
	box-shadow:0 -2px 0 rgba(216, 222, 226, 0.8);
	border-radius:0 0 4px 4px;
	padding:0 0 10px 10px;

}

.atached-list-view .list.hor li {
	padding: 10px 10px 0 0;
}

.atached-list-view .list.hor .ficon {
	font-size: 1.1em;
	line-height: 1.1em;
	vertical-align: middle;
	cursor:pointer;
}

/* labels */
.labels-wrap .label,
.label.label-btn {
	margin-right:2px;
	margin-bottom:5px;
	display:inline-block;
	padding:.3em .7em .4em;
	cursor:pointer;
}

.label {display:inline-block;}

/* component loader */
.loader-wrap {position:relative;} /*wrap all elements that must be loaded*/
.loader-wrap.loader-inline {display: inline-block;} /* for inline element */

.loader-wrap .loader-item {
	display:block;
	position:absolute;
	left:0; right:0; top:0; bottom:0;
	z-index:3002;
	background-color:rgba(180, 180, 180, 0.3);
}

.loader-wrap .loader-spin {
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	/*background-color:rgba(241,241,241,0.7);*/
	width:32px;
	height:32px;
	max-height: 100%;
	-webkit-border-radius:50%;
	border-radius:50%;
	background:var(--main-bg-color) url(../images/loader-1071b34978c54e823bef2d14a024a505.gif) center center no-repeat;
	background-size:100% 100%;
	z-index:3003;
	opacity:0.8;
}

/* component fixed loader page bar - fixed to the top of the screen */
.loader-page {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	height: 2px;
	background-color: #2CB7D5;
	box-shadow: 2px 2px 2px rgba(44, 183, 213, 0.4);
}


/* loader-dots */
.loader-dots {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.loader-dots.compact,
.popup .loader-dots {
    height: 28px;
}
.loader-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: #3498db;
    margin: 35px 1px;
}
.loader-dots.compact span,
.popup .loader-dots span {
    margin: 10px 1px;
}
.loader-dots span:nth-child(1) {
    animation: bounce 1s ease-in-out infinite;
}
.loader-dots span:nth-child(2) {
    animation: bounce 1s ease-in-out 0.33s infinite;
}
.loader-dots span:nth-child(3) {
    animation: bounce 1s ease-in-out 0.66s infinite;
}
@keyframes bounce {
    0%, 75%, 100% {transform: translateY(0);}
    25% {transform: translateY(-10px);}
}

/* infinity scroll items count */
.scroll-items-count span {
    position: fixed;
    bottom: 0;
    right: 0;
    display: inline-block;
    padding: 2px 5px;
    line-height: 1;
    font-size: 0.7rem;
    background-color: rgba(0,0,0,0.1);
    border-radius: 4px 0 0 0;
    z-index: 300;
}
.reposition-behavior-wrap .scroll-items-count span {
    position: absolute;
}
.popup .scroll-items-count {
    text-align: right;
    position: sticky;
    bottom: 0;
}
.popup .scroll-items-count span {
    position: static;
    border-radius: 4px;
}


/* progress bar */
.progress {
    --bs-progress-height: 20px;
    margin-bottom: 10px;
}


.progress.force-center {
	position:relative;
}

.table .progress.force-center,
.table .progress.double-color {margin-bottom:0;}

.progress.force-center .percent-indicator {
	position:absolute;
	left:50%;
	-webkit-transform:translate(-50%,0);
	transform:translate(-50%,0);
	color:#43494e;
}

/* progress bar double-color */
.progress.double-color {
	font-size: 12px;
	line-height: var(--bs-progress-height);
	position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.progress.double-color .progress-bar {
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
	z-index:10;
}

.progress.double-color .percent-indicator {}

.progress.double-color .percent-indicator.primary {
	color:#fff;
	position: static;
	display:block;
	text-align:left;
    padding-left: 8px;
}
.progress.double-color .percent-indicator.secondary {
	color:var(--main-txt-color);
	position: absolute;
    left: 8px;
	z-index:9;
}


/* progress double-row */
.custom-facility-dash .progress.double-row {
    --bs-progress-height: 25px;
    height: var(--bs-progress-height);
    line-height: 1.1;
    font-size: 11px;
}
.custom-facility-dash .progress.double-row .progress-bar {
    line-height: inherit;
    font-size: inherit;
}

.custom-facility-dash .progress.double-row .percent-indicator.primary{
    padding-left: 4px;
}
.custom-facility-dash .progress.double-row .percent-indicator.secondary {
    left: 4px;
}

.custom-facility-dash .progress.double-row .string-b {
    font-weight: bold;
}


/* progress-bar colors */
.progress-bar-success {
    background-color: #429842;
}
.progress-bar-warning {
    background-color: #ec8f37;
}
.progress-bar-danger {
    background-color: #d9534f;
}


/********************* ember priority bar ********************/
.ui-slider .slider-horizontal {
    margin: 0 10px; /* fix for circle points offset by default */
}

/*all bar body*/
.slider-track {
	background-color: #fff;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
/*selected part of the bar*/
.ui-slider.mood-success .slider-track .slider-selection {
	background-color: #cde3ec;
}
/*selected part of the bar in disabled state - or read state*/
.ui-slider.mood-success .slider-disabled .slider-track .slider-selection {
	background-color: #cde3ec /*#A4BBC7*/;
}
/**ticks wrap*/
.slider.slider-horizontal .slider-tick-container {
	top: 7px;
}

/*filled tick*/
.slider-tick.in-selection {
	background-color: #7abfd5;
}


.slider-track-high {} /*not selected part of the bar*/

/*not filled tick - not choosed semi transparent*/
.slider-tick {
	background-color: #ddd;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-image: none !important; /* ember gradients cancelation fix */
	opacity: 1;
}

/*slider handle - show current point*/
.ui-slider .slider-handle {/*top: 7px;*/}

.ui-slider.mood-success .slider-handle {
	background-color: #2CB7D5;
	box-shadow: 0 0 0 1px #2CB7D5, 0 0 0 1px #2CB7D5 inset;
}
.ui-slider.mood-error .slider-handle {}
/*.ui-slider.mood-success .slider-disabled .slider-handle {
	background-color: #2C3139;
	box-shadow: 0 0 0 1px #2C3139, 0 0 0 1px #2C3139 inset;
}*/


/*pagination-wrap - new behavior sticky on bottom when scroll*/
.pagination-wrap {
	text-align:right;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    bottom: 0;
    left:0; /*fix for table-responsive h-scroll*/
    background-color: var(--main-bg-color);
	z-index:50;
}

/* resetting for mobile devices */
.mobile-detected .pagination-wrap {
    position: static;
}


/* sticked-pagination - used for more than 20 rows shown with js logic - OLD approach before css sticky  */
/*

.sticked-pagination .pagination-wrap {
	position:fixed;
	width:100%;
	bottom:0;
	left:0;
	padding-left:180px;

	background-color: var(--main-bg-color);
	z-index:899;
}
.skin-aside.sticked-pagination .pagination-wrap {padding-left:40px;}

.sticked-pagination  .app-middle .page-content {padding-bottom:100px;}

.sticked-pagination .popup .pagination-wrap {position:static;}

*/

/* bts panels skin */
/* .panel-primary>.panel-heading {
    color: var(--theme-identity-bgr-txt);
    background-color: var(--theme-identity-bgr);
    border-color: var(--theme-identity-bgr);
}
 */

/* interactive panel list */
.interactive .panel .panel-body {
    padding: 10px 0;  /*because of missing tag "row" */
}

.interactive .panel .control-label  {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.9em;
}

.interactive .panel .digit-label {
	border-bottom:1px solid rgba(0, 0, 0, 0.1);
}

.interactive .panel,
.interactive .panel .panel-heading,
.panel.clean-panel,
.panel.clean-panel .panel-heading {
	border-radius:0;
}

.interactive .panel.clean-panel .panel-heading {padding-top:6px; padding-bottom:6px;}

/* tree-menu list */  /* used in help tutorials */
.tree-menu {}
.tree-menu li {
	border-top:1px solid rgba(0,0,0,0.08);
}
.tree-menu li .title {
	display:block;
	padding:8px 10px;
	position:relative;
	cursor:pointer;
}
.tree-menu .title[aria-expanded]:before {
	display:inline-block;
	color:rgba(0,0,0,0.4);
	font-size:15px;
	font-weight:normal;
	margin-right:6px;
}


.tree-menu li .title:hover {
	background-color:rgba(0,0,0,0.02);
}
.tree-menu .title[aria-expanded="true"].has-content {
	background-color:rgba(44, 183, 213, 0.1);
}
/**/
.tree-menu li li > .title {padding-left:30px;} /*indent steps 20px*/
.tree-menu li li li > .title {padding-left:50px;}
.tree-menu li li li li > .title {padding-left:70px;}
.tree-menu li li li li li > .title {padding-left:90px;}
.tree-menu li li li li li li > .title {padding-left:110px;}
.tree-menu li li li li li li li > .title {padding-left:130px;}
.tree-menu li li li li li li li li > .title {padding-left:150px;}
.tree-menu li li li li li li li li li > .title {padding-left:170px;}
.tree-menu li li li li li li li li li li > .title {padding-left:190px;}

/*tree-menu-content - ul element that contains*/
.tree-menu-content {
	position:relative;
	border-top:2px solid #2CB7D5;
}
.tree-menu-content:before {
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:20px;
	width:0;
	height:0;
	border: 8px solid;
	border-color:#2CB7D5 transparent transparent transparent;

}
/* tree-menu force-indent */
.tree-menu.force-indent li .title,
.tree-menu.force-indent .checkbox {padding-left:10px;}
/*.tree-menu.force-indent li .title[aria-expanded="true"].has-content {padding-left:10px;}*/

.tree-menu.force-indent ul {margin-left: 13px;}


/* thumb-actions */
.thumb-wrap.thumb-actions {
    position: relative;
    line-height: 0;
    display: inline-block;
    margin: 0 4px 4px 0;
}
.thumb-wrap.thumb-actions img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.thumb-wrap.thumb-actions:hover img,
.thumb-wrap.thumb-actions.selected img {
    border: 1px solid rgba(78, 115, 175, 0.54);
}

.thumb-wrap.thumb-actions .actions {
    position: absolute;
    bottom: 0;
    right: 0;
    line-height: 1;
    background-color: rgba(78, 115, 175, 0.8);
    padding: 10px 8px;
    width: auto;
    text-align: right;
    color: #fff;
    display: none;
}
.thumb-wrap.thumb-actions:hover .actions,
.thumb-wrap.thumb-actions.selected .actions {
    display: block;
}



/******/
.thumb-wrap.accent {
	background-color: #2CB7D5;
	color:#fff;
}
.thumb-wrap.accent:first-child {margin-left:15px;}




/* Dashboard widget panels */
.add-widget {
    height:65px;
    text-align:center;
    position: relative;
    font-size: 2em;
    border: 1px dashed var(--shade-of-dark3);
    border-radius: 4px;
}
.add-widget .ficon {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.panel.skin-widget {
    font-size: 0.8em;
    /*box-shadow: 2px 3px 6px rgba(0,0,0,0.06);*/
}
.compact-view-sm .panel.skin-widget {
    margin-bottom: 16px;
}

.panel.skin-widget .table {
    font-size: inherit;
}

/* old version with Add Widget button */

/* .view-add-widget .panel.skin-widget {
    opacity: 0.5;
    position: relative;
}
.view-add-widget .panel.skin-widget:before {
    content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
} */

.panel.skin-widget .panel-heading {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    min-height: 40px;

    padding: 0;
    background-color: transparent;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.08);
	/* cursor: move; */
}
.panel.skin-widget .panel-heading:after {
    content:"";
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}
.panel.skin-widget .panel-heading .panel-title {
    flex: 1;
    padding: 8px 15px 6px 15px;
    min-width: 300px !important;
    /* float: left; */
    font-size: 1.2em;
    font-weight: bold;
}
.panel.skin-widget .panel-heading .panel-title label {
    font-weight: normal;
    margin: 2px 0 0 0;
    display: block;
    line-height: 1;
    font-size: 0.9em;
}

.dash-unit-actions {
    /* float: right; */
    font-size: 1.1rem;
}
.dash-unit-actions .ficon {
    float: left;
    padding: 14px 12px;
    border-left: 1px solid rgba(0,0,0,0.08);
}

.dash-unit-actions .ficon:hover {
    background-color: rgba(0,0,0,0.04);
}
.dash-unit-actions .ficon.pressed {
    background-color: rgba(0,0,0,0.06);
    box-shadow: 2px 5px 3px rgba(0,0,0,0.1) inset;
}
.dash-unit-actions .ficon.disabled {
    background-color:  transparent;
    color: rgba(0,0,0,0.2);
    cursor: not-allowed;
}
/**/
.widget-over {
  box-shadow: 0 0 4px 2px #52aeda, 0 0 4px 0 #52aeda inset;
}




/* custom-facility-dashboard - optimized for TV screen static presentation */
.custom-facility-dash {
    padding: 10px;
    min-height: 100vh;
    overflow: hidden;
}
.custom-facility-dash .dash-header {
    background-color: #d8dee2;
    margin: -10px -10px 10px -10px ;
    padding: 4px 10px;
    height: 30px;
    width: auto;
}
.custom-facility-dash .dash-logo img {
    max-height: 20px;
}
.custom-facility-dash .dash-facility-name {
    text-align: left;
    padding-left: 15px;
    margin-left: 15px;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
    line-height: 1;
}
/**/
.custom-facility-dash .time-his-wrap {
    /* max-height: calc(100vh - 540px);
    overflow-y: auto; */

    /* flex: 1; */
}

/*hide scrollbar on the time-histogram in the custom facility dashboard*/
/* .custom-facility-dash .time-histogram::-webkit-scrollbar {
    display: none;
} */
.custom-facility-dash .time-histogram {
    scrollbar-width: thin;
    margin-bottom: 5px;
}

.custom-facility-dash .legend-histogram {
    right: 0;
    position: absolute;
    top: 3px;
}

.custom-facility-dash .graphical-wrap {
    /* max-height: calc(40vh - 40px);
    overflow-y: auto; */
}
.custom-facility-dash .live-data-wrap {

}
.custom-facility-dash .live-data-wrap .repeater-unit {
    flex-basis: 12%;
    margin-right: 0.5%;
    margin-top: 10px;
}
.custom-facility-dash .live-data-wrap .repeater-unit .panel-simple-data {
    -moz-box-orient: block-axis;
    -webkit-box-orient: block-axis;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;

    line-height: 1;
}
.custom-facility-dash .live-data-wrap .repeater-unit .txt-row {
    padding: 2px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
/**/
.custom-facility-dash .live-data-wrap .repeater-unit .progress,
.custom-facility-dash .panel .progress {
    margin-bottom: 5px;
}
.custom-facility-dash .live-data-wrap .repeater-unit .progress:last-of-type {
    margin-bottom: 0;
}

.custom-facility-dash .live-data-wrap .repeater-unit .control-label {
    line-height: inherit;
    color: #83888C;
    font-size: 0.85em;
}

/**/
.custom-facility-dash .panel-body {
    padding: 8px;
}
.custom-facility-dash .total .panel-body {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* custom-facility-dash device-list */
.custom-facility-dash .device-list {
    overflow-y: auto;
    scrollbar-width: thin;
}


.custom-facility-dash .device-unit {
    min-width: 180px;
    width: 100%;
    max-width: 260px;
}

.custom-facility-dash .device-unit .unit-title {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    font-weight: bold;
    color: #717d8a;
}

.custom-facility-dash .device-unit .unit-row {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.custom-facility-dash .device-unit .label {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    margin: 0;
    font-weight: normal;
    flex: 1;
    text-align: left;
}
.custom-facility-dash .device-unit .value {
    font-weight: bold;
}

/* custom-facility-dash custom scrollbar */
/* width or height depending on vertical or horizontal bar */
.custom-facility-dash .time-histogram::-webkit-scrollbar,
.custom-facility-dash .device-list::-webkit-scrollbar {
    height: 6px;
}

/* Track */
.custom-facility-dash .time-histogram::-webkit-scrollbar-track,
.custom-facility-dash .device-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
}

/* Handle */
.custom-facility-dash .time-histogram::-webkit-scrollbar-thumb,
.custom-facility-dash .device-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1); ;
}

/* Handle on hover */
.custom-facility-dash .time-histogram::-webkit-scrollbar-thumb:hover,
.custom-facility-dash .device-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2); ;
}
/**/


/* custom-dash-type-2 */
.custom-dash-type-2 {padding: 0 20px; font-size: 18px; line-height: 1.3;}
.custom-dash-type-2 .dash-header {padding-top: 10px; padding-bottom: 10px; font-size: 1.1em;}
.custom-dash-type-2 .dash-header .dash-title.primary {font-size: 1.3em; font-weight: bold;}
.custom-dash-type-2 .dash-logo img {max-height: 14px;}
.custom-dash-type-2 .dash-header .ficon {opacity: 0.5;}

.table.dash-table {
    table-layout: auto;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 0;
}
.table.dash-table thead th {background-color: rgba(81, 138, 193, 0.25);}

.table.dash-table tr:nth-child(even) td {background-color: rgba(133, 158, 176, 0.1);}

.table.dash-table th,
.table.dash-table td {padding: 6px 8px;}

.table.dash-table th:not(:first-child),
.table.dash-table td:not(:first-child) {border-left: 1px solid rgba(133, 158, 176, 0.5);}

.table.dash-table .first-col {max-width: 0;}

/**/

.custom-dash-type-2 .dash-block-summary {
    /* border-bottom: 2px solid var(--sep-color); */
}
.dash-wrap .sep-top {
    border-color: var(--sep-color);
}


/***************************************************************/

.panel-offset-wrap {margin-left: -5px; margin-right: -5px;}




/*panel panel-light*/
.panel.panel-light {overflow-x: hidden;}
.panel.panel-light .panel-heading {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.panel.panel-light .panel-heading .panel-title {
    font-weight: bold;
}
/* panel separated */
.panel.separated {border: 1px solid rgba(0,0,0,0.08);}

/* compact-view */
.compact-view .form-control,
.compact-view .form-select {
	height: 28px;
    padding: 1px 6px;
}
.compact-view .btn {padding: 2px 10px;}

.compact-view .labels-wrap .label,
.compact-view .label.label-btn,
.compact-view label {
	margin-bottom:3px;
}
/* compact view for pagination*/
.compact-view .pagination>li>a,
.compact-view .pagination>li>span {
    padding: 3px 6px;
}

/* compact-view list-group */
.compact-view .list-group .list-group-item {padding: 6px 10px;}


/* forms-row-compact - used in places like tables when there is no need of space between form-groups */
.forms-row-compact .form-group,
.forms-row-compact .checkbox,
.forms-row-compact .radio {margin-bottom: 0;}

.forms-row-compact .help-block:empty {display: none;}



/* new white layout panels blocks "pan" ->> */
.pan {
    background-color: var(--pan-bgr);
    color: var(--text-color-soft);
    box-shadow: var(--pan-shadow);
    border-radius: var(--pan-border-radius);
}

.pan .pan-header {
    padding: var(--pan-padding);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.pan .pan-header.compact {
    padding-top: calc(var(--pan-padding-ver)/2);
    padding-bottom: calc(var(--pan-padding-ver)/2);
}
.pan .pan-header.tabs-wrap {
    padding: calc(var(--pan-padding-ver)) 0 0 0;
}
.pan .pan-body {
    padding: var(--pan-padding);
}
/*  pan-list */
.pan-list .pan:hover {
    box-shadow: var(--pan-shadow-hover);
    /* transform: translateY(-0.5px); */ /* cause z-index bugs */
}
.pan-list .pan.selected {
    box-shadow: var(--pan-shadow-selected);
}

/* single view */

.single-view-additional .pan {
    height: calc(100dvh - var(--pansingleview-bottom) - var(--app-header-height) - 50px);
    min-height: 300px;
}

.single-view-additional .pan-extra-wrap > .tab-panel + .pan {
    height: calc(100dvh - var(--pansingleview-bottom) - var(--app-header-height) - 50px - 24px);
}
/*if there is additional page tabs on top*/
.single-view-offset-wrap.offset-top-15 .single-view-additional .pan {
    height: calc(100dvh - var(--pansingleview-bottom) - var(--app-header-height) - 80px);
}




/*when has tabs or other sibling containers*/
/*
.single-view-additional .pan-extra-wrap.pan-layout-block {
    display: flex;
    flex-direction: column;
}


 .single-view-additional .pan-extra-wrap.pan-layout-block > .pan {
    flex: 1;
}

.single-view-additional .pan-extra-wrap.pan-layout-block .ember-view:not(.tab-panel, .dropdown) {
    display: contents;
} */


/* pan-order-dummy - used to clear reordered pan-groups flex items in mobile view expanded state */
.fcol.pan-order-dummy:not(.expanded .pan-order-dummy) {
    /* display: contents; */
    display: none;
}

/**/
.pan .pie-chart-wrap {

}



/**/
.single-view-additional .pan.vbox .pan-body {
    flex: 1;
}


.single-view-additional .pan .pan-body.v-scroll {
}

/* .mobile-detected .pan .pan-body.v-scroll {
    max-height: none;
    overflow-y: visible;
} */

.pan .pan-title {
    font-weight: bold;
    margin: 0;
    line-height: 1.1;
}
.pan .pan-meta {
    font-size: 0.80rem;
    line-height: 1.3;
}
.pan .pan-meta .ficon {
    color: #A8B3BC;
    line-height: inherit;
}
.pan-meta.meta-location {

}
/* set color with zero/base priority/specificity */
:where(.pan .pan-meta) {
    color: var(--pan-meta-txt);
}

/*pan-type-group*/
.pan-group.primary {
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
}
.pan-group.primary .pan-meta {
    overflow: hidden;
}

.pan-group.primary .accent-title {
    padding-bottom: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.pan-group .signal-lastevent {
    font-size: 0.7rem;
}
.pan-group .signal-lastevent .ficon {
    vertical-align: middle;
}


/* pan-context */
.pan-context {
    position: relative;
}

.pan-context .pan-context-trigger {
    position: absolute;
    display: inline-block;
    border-radius: 3px;
    padding: 4px 2px;
    top: 0;
    right: 0;
    display: none;
    cursor: pointer;
    opacity: 0.7;
}
.pan-context .pan-context-trigger:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}
.pan-context:hover .pan-context-trigger {
    display: block;
}


/*user type icon*/
.pan-group.primary .badge-user-type {}

.user-type-icon {
    display: inline-block;
    border-radius: 100px;
    font-size: 1rem !important;
    padding: 0 !important;
    background-color: #E0EBF3;
    color: #445E75;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    margin-right: 6px;
}
.user-type-icon.type-restricted {
    background-color: #D44141;
    color: #fff;
}
.user-type-icon.type-fullaccess {
    background-color: #5AC13C;
    color: #fff;
}
.unit-value.type-restricted {
    color: #D44141;
}
.unit-value.type-fullaccess {
    color: #5AC13C;
}



/* smaller in drodpowns */
.dropdown-menu .user-type-icon {
    font-size: 0.8rem !important;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 0 4px 0 0 !important;
}

.pan-group.secondary {

}

.pan-type-group .pan-group.sep {
    border-left: 1px solid var(--sep-color);
    padding-left: var(--pan-padding-hor);
    padding-right: var(--pan-padding-hor);
}

/* new white layout panels blocks "pan" <<- */
.hide-unit-label .unit-label {
  display: none;
}


.text-unit .unit-label {
    font-weight: normal;
    line-height: 1.1;
    font-size: 0.7rem;
    color: #ababab;
}
.text-unit .unit-meta {font-size: 0.7rem;}
.text-unit .unit-value {font-weight: bold;}

.pan .text-unit {
    font-size: 0.8rem;
    line-height: 1.2;
}

.pan .text-unit .txt-no-data {
    font-size: 0.95em;
    line-height: 1;
}


/* text unit with chart graph */
.pan .text-unit.type-graph {
    padding: 0;
}
.pan .text-unit.type-graph .unit-label {
    position: relative;
    z-index: 1; /* just to be on top of the graph */
}
.pan .text-unit.type-graph .pie-chart-wrap{
    display: inline-block;
    line-height: 1;
}
.pan .text-unit.type-graph .canvasjs-chart-container {

}

/*graph-block*/
.graph-block {

}
.graph-block .graph-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.graph-block .no-graph-placeholder {
    height: 58px;
    width: 58px;
    display: inline-block;
    border: 8px solid rgba(0,0,0,0.06);
    border-radius: 100px;
    margin: 3px 4px;
}

.graph-block .graph-wrap .chart-label {
    position: absolute;
    z-index: 10;
    display: inline-block;
    line-height: 1;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}
/**/
.pan .text-unit.type-graph.graph-block .graph-wrap {
    margin-right: -8px;
}


.pan .text-unit.type-graph.graph-block {

}

/* text-unit type-notifications */
.text-unit.type-notifications .actions-wrap {margin-right: 10px;}


/* trigger-icon-wrap for expand in mobile */
/* .pan.expandable {}
.pan.expandable .pan-body:first-child { position: relative; padding-right: 26px;}

.pan.expandable .trigger-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: var(--pan-padding);
    cursor: pointer;
}
.pan.expandable .trigger-icon .ficon {
    display: block;
    transform: rotate(0deg);
} */
.trigger-icon-wrap {
    margin-top: -10px;
    text-align: center;
    padding-top: 8px;
    opacity: .7;
    line-height: 1;
}
.expanded .trigger-icon-wrap {
    margin-top: 5px;
}

/* temp hide expand icon in mobile lists - just for testing */

/* .mobile-detected.reports .pan .trigger-icon-wrap.show-under-sm {
    display: none;
}
.mobile-detected.reports .pan .pan-group.secondary.hide-under-sm {
    display: initial !important;
} */




/*remove first border pan-group in mobile view*/
/* .mobile-detected .pan:not(.report-unit) .pan-group.primary + .pan-group.secondary.sep {
    border-left: none !important;
    padding-left: 0 !important;
} */



/**/
.pan .context-panel {display: none; }
.pan.open .context-panel {display: block;}
.pan.open .trigger-icon .ficon {transform: rotate(180deg);}

/**/
.pan-header .pan-actions .ficon {
    font-size: var(--pan-actions-icon-size);
    line-height: 1;
}

.pan-header .pan-actions .action,
.pan-header .pan-actions .main-action {
    margin-left: 10px;
    cursor: pointer;
}

/**/
.pan-group.actions-wrap {
   display: flex;
   flex-direction: column;
   gap: 10px;
   font-size: 0.9rem;
}
.pan-group.actions-wrap .main-action.combined .action-text {
   font-size: 10px;
   padding-top: 1px;
}

.comp-list .list.ver.sep-items .pan-group.actions-wrap {
    gap: 0; /*custom fix*/
 }


/* pan specific content types */

/*pan common - fix that cuts content in the primary container needed in facility and organization mobile view*/
.pan.organization-unit .pan-group.primary.fcol,
.pan.facility-unit .pan-group.primary.fcol {
    overflow: hidden;
}

/* pan organization */
.pan.organization-unit {}


/* pan facility */
.pan.facility-unit {}



/* pan devices */
.pan.device-unit {}

.pan.device-unit .pan-group.primary,
.device-unit .pan-group.primary {
    overflow: visible;
}

.pan.device-unit .name-wrap {padding: 3px 0;}
.pan.device-unit .name {padding-bottom: 0;}

.indicator-func-wrap {position: relative;}
.indicator-func-wrap .indicator {
    display: block;
    width: 8px;
    margin: 0 6px 0 -12px;
    border-radius: 0 4px 4px 0;
    background-color: var(--ok-accent-color);
}


.indicator-wrap {position: relative;}
.indicator-wrap .indicator {
    display: block;
    width: 8px;
    margin: 0 6px 0 -12px;
    border-radius: 0 4px 4px 0;
    background-color: var(--off-accent-color);
}

.device-active .indicator-wrap .indicator {
    background-color: var(--accent-color);
}
.device-active .name,
.device-active .signal-strenght {
    font-weight: bold;
}

.device-active .name,
.device-active .signal-strenght,
.device-active .signal-type .icon-overlay {
    color: var(--accent-color) !important;
}

.device-active .signal-type {
    position: relative;
}
.device-active .signal-type .icon-overlay {
    position: absolute;
/*  top: 0;
    left: 0;
    width: 100%;
    height: 100%;  */
    z-index: 10;
}

.device-inactive .signal-type .icon-overlay {
    display: none;
}

/**/
.pan.report-unit {}

/*pan report digit index number*/
.pan.report-unit[list-item-count] {
    position: relative;
}
.pan.device-unit[list-item-count] {
    position: relative;
}
.pan.facility-unit[list-item-count] {
    position: relative;
}
.pan.user-unit[list-item-count] {
    position: relative;
}
.pan.organization-unit[list-item-count] {
    position: relative;
}
[list-item-count]::before {
    content: attr(list-item-count) " ";
    position: absolute;
    top: -2px;
    left: -3px;
    color: #a1a1a1;
    line-height: 1;
    background-color: #fff;
    padding: 0.5px 2.5px;
    display: block;
    font-size: 9px;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

/* [class*=" infinity-scroll-item"] [list-item-count]::before {
    opacity: 0;
    background-color: var(--theme-identity-bgr);
    color: var(--theme-identity-bgr-txt);
}
[class*=" infinity-scroll-item"]:hover [list-item-count]::before {
    opacity: 1;
} */


.mobile-detected .pan.report-unit .pan-group.primary {
    /* margin-right: calc(var(--pan-padding-hor) * 2); */
     padding-right: calc(var(--pan-padding-hor) * 2);
}

.mobile-detected .pan.report-unit .pan-group.secondary {
    min-width: 90px;
    margin-bottom: 10px;
}

.mobile-detected .total-qty-cards .pan.report-unit .pan-group.secondary {
    min-width: 0;
}

.mobile-detected .total-qty-cards .pan.report-unit:not(.expanded) .pan-group.secondary {
    margin-bottom: 0;
}

.pan.report-unit .accent-title {
    text-overflow: initial;
    overflow: visible;
}
.pan.report-unit .facility-name-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.pan.report-unit .pan-meta.name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Total qty table cards — one metric per column, fit to viewport */
.total-qty-cards {
    max-width: none;
}

.total-qty-hscroll {
    overflow: visible;
    max-height: none;
}

.total-qty-cards .pan.report-unit .pan-body.pan-type-group.frow {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    align-items: center;
}

.total-qty-cards .pan.report-unit.labels-header .pan-body.pan-type-group.frow {
    align-items: flex-end;
    min-height: 36px;
}

.total-qty-cards .pan.report-unit .pan-group.primary {
    flex: 1.8 1 0;
    min-width: 220px;
    max-width: 26%;
    position: static;
    overflow: hidden;
    background-color: transparent;
    box-shadow: none;
}

.total-qty-cards .pan.report-unit.total-header .pan-group.primary {
    background-color: transparent;
}

.total-qty-cards .pan.report-unit.labels-header .pan-group.primary {
    background-color: transparent;
}

.total-qty-cards .pan.report-unit .pan-group.primary::after {
    display: none;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-num {
    flex: 1.05 1 0;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-qty {
    flex: 2.15 1 0;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-cost {
    flex: 1.2 1 0;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-cost-lg {
    flex: 2.2 1 0;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-context {
    flex: 1.35 1 0;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-context .unit-value {
    white-space: normal;
    overflow: hidden;
}

.total-qty-cards .pan.report-unit.labels-header .pan-group.secondary.col-metric .unit-label {
    white-space: normal;
    overflow: hidden;
    line-height: 1.25;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric .text-unit {
    overflow: hidden;
    min-width: 0;
    height: auto;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-num .unit-value {
    white-space: nowrap;
}

/* Keep actual/target/% on one line. Product vs client prices still stack in the vbox. */
.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-qty .unit-value,
.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-cost .unit-value,
.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-cost-lg .unit-value {
    white-space: nowrap;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-qty .txt-small,
.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-cost .txt-small,
.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-cost-lg .txt-small {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.2em;
    white-space: nowrap;
}

.total-qty-cards .compare-line {
    display: inline;
    white-space: nowrap;
}

.total-qty-cards .compare-values,
.total-qty-cards .compare-delta {
    white-space: nowrap;
}

.total-qty-cards .total-qty-detail-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.total-qty-cards .total-qty-detail-table table {
    margin-bottom: 0;
}

.total-qty-cards .total-qty-detail-table td,
.total-qty-cards .total-qty-detail-table th {
    white-space: nowrap;
}

.total-qty-cards .total-qty-detail-table td:first-child,
.total-qty-cards .total-qty-detail-table th:first-child {
    white-space: normal;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-support .unit-value {
    font-weight: 600;
    color: #5a6570;
}

.total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-primary .unit-value {
    font-weight: bold;
}

.total-qty-cards .pan.report-unit > .trigger-icon-wrap {
    position: static;
    width: auto;
}

@media (max-width: 991px) {
    .total-qty-hscroll {
        overflow-x: visible;
    }

    .total-qty-hscroll > .report-pan-header,
    .total-qty-hscroll > [class*="infinity-scroll-item"],
    .total-qty-cards .pan.report-unit,
    .total-qty-cards .pan.report-unit .pan-body.pan-type-group.frow {
        width: 100%;
        min-width: 0;
    }

    .total-qty-cards .pan.report-unit .pan-body.pan-type-group.frow {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .total-qty-cards .pan.report-unit .pan-group.primary {
        flex: 1.1 1 0;
        min-width: 0;
        max-width: 34%;
    }

    .total-qty-cards .pan.report-unit .pan-group.secondary.col-metric {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        overflow: visible;
    }

    .total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-qty {
        flex: 1.35 1 0;
    }

    .total-qty-cards .pan.report-unit .pan-group.secondary.col-metric-washed {
        flex: 0.9 1 0;
    }

    .total-qty-cards .pan.report-unit .pan-group.secondary.col-metric .text-unit {
        overflow: visible;
    }

    .total-qty-cards .pan.report-unit:not(.expanded) .col-metric-qty .txt-small,
    .total-qty-cards .pan.report-unit:not(.expanded) .col-metric-cost-lg .txt-small {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        white-space: normal;
    }

    .total-qty-cards .pan.report-unit:not(.expanded) .col-metric-qty .compare-line,
    .total-qty-cards .pan.report-unit:not(.expanded) .col-metric-cost-lg .compare-line {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        white-space: normal;
        gap: 1px;
    }

    .total-qty-cards .pan.report-unit.expanded .pan-body.pan-type-group.frow {
        flex-wrap: wrap;
    }

    .total-qty-cards .pan.report-unit.expanded .pan-group.primary {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .total-qty-cards .pan.report-unit.expanded .pan-group.secondary.col-metric {
        flex: 1 1 calc(50% - 6px);
        max-width: calc(50% - 6px);
        min-width: 0;
        margin-bottom: 8px;
    }

    .total-qty-cards .pan.report-unit.expanded .pan-group.secondary.col-metric-qty,
    .total-qty-cards .pan.report-unit.expanded .pan-group.secondary.col-metric-cost-lg {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .total-qty-cards .pan.report-unit.expanded .col-metric-qty .compare-line,
    .total-qty-cards .pan.report-unit.expanded .col-metric-cost-lg .compare-line {
        display: inline;
        white-space: nowrap;
        flex-direction: row;
    }

    .total-qty-cards .pan.report-unit.expanded .col-metric-qty .txt-small,
    .total-qty-cards .pan.report-unit.expanded .col-metric-cost-lg .txt-small {
        display: inline-flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

/* group-title-row */
.group-title-row {
    font-size: 18px;
    text-align: left;
    font-weight: bold;
    background-color: var(--group-title-row-bg);
    color: var(--group-title-row-txt);
    border-radius: var(--pan-border-radius) var(--pan-border-radius) 0 0;
    padding: var(--pan-padding-ver) var(--pan-padding-hor);
    margin-top: 40px;
    margin-bottom: 0;
}
.group-title-row.secondary {
    font-size: 14px;
    text-align: left;
    font-weight: bold;
    background-color: var(--group-title-row-bg);
    color: var(--group-title-row-txt);
    border-radius: 0;
    padding: var(--pan-padding-ver) var(--pan-padding-hor);
    margin-top: 20px;
    margin-bottom: 0;
    margin-left: 20px;
}

.group-title-row + .group-title-row.secondary {
    margin-top: 5px !important;
    /* padding-top: 0; */
}

.panel-default {
  border-color: var(--pan-sep-color);
}

.panel-default>.panel-heading {
  color: inherit;
  background-color: var(--shade-of-dark05);
  border-color:  var(--pan-sep-color);
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  border-top-color:  var(--pan-sep-color);
}

.panel-default>.panel-heading .badge {
  color: #f5f5f5;
  background-color: #333
}

.panel-default>.panel-footer+.panel-collapse>.panel-body {
  border-bottom-color:  var(--pan-sep-color);
}

.panel-primary {
  border-color: #337ab7
}

.panel-primary>.panel-heading {
  color: #fff;
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.panel-primary>.panel-heading+.panel-collapse>.panel-body {
  border-top-color: var(--accent-color);
}

.panel-primary>.panel-heading .badge {
  color: var(--accent-color);
  background-color: #fff
}

.panel-primary>.panel-footer+.panel-collapse>.panel-body {
  border-bottom-color: var(--accent-color);
}

.panel-success {
    border-color: #d6e9c6
  }

  .panel-success>.panel-heading {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6
  }

  .panel-success>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #d6e9c6
  }

  .panel-success>.panel-heading .badge {
    color: #dff0d8;
    background-color: #3c763d
  }

  .panel-success>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: #d6e9c6
  }

  .panel-info {
    border-color: #bce8f1
  }

  .panel-info>.panel-heading {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1
  }

  .panel-info>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #bce8f1
  }

  .panel-info>.panel-heading .badge {
    color: #d9edf7;
    background-color: #31708f
  }

  .panel-info>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: #bce8f1
  }

  .panel-warning {
    border-color: #faebcc
  }

  .panel-warning>.panel-heading {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc
  }

  .panel-warning>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #faebcc
  }

  .panel-warning>.panel-heading .badge {
    color: #fcf8e3;
    background-color: #8a6d3b
  }

  .panel-warning>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: #faebcc
  }

  .panel-danger {
    border-color: #ebccd1
  }

  .panel-danger>.panel-heading {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1
  }

  .panel-danger>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #ebccd1
  }

  .panel-danger>.panel-heading .badge {
    color: #f2dede;
    background-color: #a94442
  }

  .panel-danger>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: #ebccd1
  }
/* "group-indicator-row" and "report-pan-header" - used for sticky date or head labels in report lists */
.group-indicator-row {
    text-align: right;
    padding: 5px 0;
    z-index: 5;
}
.expanded-total-row {
    padding: 5px 0;
    z-index: 5;
    background-color: white;
}
.expanded-total-inner-row {
    padding: 5px 0;
    z-index: 3;
    background-color: white;
}
.report-pan-header {
    z-index: 4;

    background-color: var(--main-bg-color);
    padding: 5px 0;
    box-shadow: 10px 0 0 var(--main-bg-color), -10px 0 0 var(--main-bg-color);
}
.report-pan-header.total-header-wrap {

}
.report-pan-header.total-header-wrap .pan.total-header {
    background-color: var(--report-total-header-bg);
    color: var(--report-total-header-txt);
    box-shadow: none;
}

.report-pan-header.total-header-wrap .pan.total-header .accent-title {
    color: var(--report-total-header-txt);
}
.report-pan-header.total-header-wrap .pan.labels-header {
    background-color: transparent !important;
    box-shadow: none !important;
}


.group-indicator-row {
    position: sticky;
    top: calc(var(--filter-bottom) + var(--report-header-height) + 5px);
}
.expanded-total-row,
.report-pan-header {
    position: sticky;
    top: calc(var(--filter-bottom) + 5px);
}
.expanded-total-inner-row {
    position: sticky;
    top: calc(var(--filter-bottom) + 59.5px + 5px);
}
.open-filter .expanded-total-row{
    top: calc(var(--filter-bottom) + var(--report-header-height) + 45px + 5px);
}
.open-filter .expanded-total-inner-row{
    top: calc(var(--filter-bottom) + var(--report-header-height) + 45px + 84.5px + 5px);
}
.open-filter .group-indicator-row,
.open-filter .report-pan-header {
    top: calc(var(--filter-bottom) + 45px + 5px);
}

.scrolled-up .expanded-total-row{
    top: calc(var(--filter-bottom) + var(--report-header-height) + var(--app-header-height) + 5px);
}

.scrolled-up .expanded-total-inner-row{
    top: calc(var(--filter-bottom) + var(--report-header-height) + var(--app-header-height) + 84.5px + 5px);
}

.scrolled-up .group-indicator-row,
.scrolled-up .report-pan-header {
    top: calc(var(--filter-bottom) + var(--app-header-height) + 5px);
}

.open-filter.scrolled-up .expanded-total-row{
    top: calc(var(--filter-bottom)  + var(--report-header-height) + var(--app-header-height) + 45px + 5px);
}

.open-filter.scrolled-up .expanded-total-inner-row{
    top: calc(var(--filter-bottom)  + var(--report-header-height) + var(--app-header-height) + 84.5px + 45px + 5px);
}

.open-filter.scrolled-up .group-indicator-row,
.open-filter.scrolled-up .report-pan-header {
    top: calc(var(--filter-bottom) + var(--app-header-height) + 45px + 5px);
}


.group-indicator-row:not(.open-filter .group-indicator-row),
.expanded-total-row:not(.open-filter .expanded-total-row),
.report-pan-header:not(.open-filter .report-pan-header) {
    top: 50px;
}

.scrolled-up .group-indicator-row:not(.open-filter .group-indicator-row),
.scrolled-up .expanded-total-row:not(.open-filter .expanded-total-row),
.scrolled-up .report-pan-header:not(.open-filter .report-pan-header) {
    top: calc(var(--app-header-height) + 50px);
}
/*
@media (max-width: 576px) {

    .group-indicator-row,
    .report-pan-header {
        top: calc(var(--app-header-height) + 50px);
        outline: 3px solid red;
    }
}
 */


.group-indicator-row .indicator-date {
    font-size: 0.75rem;
    font-weight: bold;
    display: inline-block;
    background-color: var(--theme-identity-bgr);
    color: #fff;
    padding: 4px 6px 4px 6px;
    line-height: 1;
    border-radius: 3px;
    min-width: 125px;
}
.group-indicator-row .indicator-date .ficon {
    vertical-align: middle;
}

/**** BTS overwrite theme skin <<<<<<<<<<<<<<<<< */

.app-header {
    background-color: var(--app-header-bgr);
    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
    padding-left:20px;
    padding-right:20px;
    height:var(--app-header-height);

    position: -webkit-sticky;
    position: sticky;
	top: calc(-1 * var(--app-header-height));
    z-index: 900;
}

.scrolled-up .app-header {
	top: 0;
}


.app-header .trigger {
  display: block;
  position: absolute;
  left: var(--sbs);
  top: 0;
  height: var(--app-header-height);
  color: #8daebe;
  z-index: 1039;
  width: 60px;
  font-size: 1.8rem;
  line-height: var(--app-header-height);
  text-align: center;
  cursor:pointer;
}

.app-logo {
    padding-top: 2px;
    position: absolute;
    top: 6px;
    left: 13px;
    /*height: 0;*/
    overflow: hidden;
    opacity: 0;
}
.app-logo img {
    /*max-width: 180px;*/
    max-width: 80px;
    max-height: 20px;
    margin-top: 1px;
}

.top-header-unit {
	float:right;
	color:var(--main-action-color);
}
.top-header-unit .dropdown-menu {text-align: center;}

.top-header-unit .user-item,
.top-header-unit .dropdown,
.top-header-unit .ember-view {display: inline-block;}

.top-header-unit .user-trigger {display: none;}

.top-header-unit .current-user {
	font-size: 0.8rem;
    vertical-align: middle;
    display: inline-block;
    padding-right: 3px;
}
.top-header-unit .dropdown-toggle .ember-view {
	display: inline-flex;
	vertical-align: middle;
	width: auto;
}
.top-header-unit .dropdown-toggle .txt-bold {
	font-size: 0.8rem;
	vertical-align: middle;
	padding-right: 6px;
}
.top-header-unit .current-user-timezone {
	font-size: 0.75rem;
	vertical-align: middle;
	display: inline-block;
	opacity: 0.75;
	padding-right: 8px;
	max-width: 11rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.header-user-timezone {
	display: none;
	position: absolute;
	left: calc(var(--sbs) + 70px);
	top: 0;
	height: var(--app-header-height);
	line-height: var(--app-header-height);
	font-size: 0.8rem;
	color: var(--main-action-color);
	white-space: nowrap;
	max-width: 22rem;
	align-items: center;
	gap: 6px;
}
.header-user-timezone > .ember-view {
	display: inline-flex;
	flex: 0 0 auto;
	width: auto;
}
.skin-aside .header-user-timezone {
	left: calc(var(--sbs) + 120px);
}
.header-user-timezone .txt-bold {
	font-size: 0.8rem;
	vertical-align: middle;
	padding-right: 6px;
}
.header-user-timezone .current-user-timezone {
	font-size: 0.75rem;
	vertical-align: middle;
	opacity: 0.75;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.top-header-unit .current-user-head {
	display: none;
}
.mobile-detected .top-header-unit .current-user-head {
	padding: 5px 20px;
	display: block;
	background-color: rgba(0, 0, 0, 0.06);
	margin-top: -5px;
	margin-bottom: 5px;
}

/* select region skin */

.top-header-unit .custom-select-wrap {border-left: 1px solid rgba(0, 0, 0, 0.06);}

.top-header-unit .custom-select-wrap select {
	display:block;
	line-height: var(--app-header-height);
	height: var(--app-header-height);
	padding:0 20px 0 10px;
	margin:0;

}

.top-header-unit .custom-select-wrap .caret {
	right:8px;
}

.top-header-unit .custom-select-wrap option,
.top-header-unit .custom-select-wrap option:focus {
	border:none;
	box-shadow:none;
	text-align:left;
	outline:none;
	background-color:#D8DEE2;
}

/* notification-panel */
.notification-panel {}

.notify-num-wrap {

}
.notify-num-wrap .notify-num {
	transform: translate(0,-5px);
	margin-left: -17px;
	display: inline-block;
}
.notify-num-wrap .notify-num .num {
	display: inline-block;
    padding: 1px 3px;
    font-size: 9px;
    text-align: center;
    border-radius: 20px;
    margin-right: -4px;
    line-height: 1;
    min-width: 12px;
    overflow: hidden;
    transform: translate(0,3px);
}

/* num-badge-parent - other type of number badge notification */
.version-badge-parent {
    white-space: nowrap;
}
.version-badge-parent:hover {
    opacity: .8;
}
.version-badge-parent.txt-label {
    padding: 2px 3px;
}

.version-badge-parent .num-badge {
    display: inline-block;
    padding: .25em .5em;
    font-size: .6em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: -0.5em;
    transform: translateY(-50%);
    border-radius: 50rem;
}

/* version-badge-parent-complex - control with buttons*/

.version-badge-parent-complex.txt-label {
    padding: 3px 5px;
}
.version-badge-parent-complex .badge-content-wrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.version-badge-parent-complex .action-wrap {
    margin-right: -5px;
}
.version-badge-parent-complex .trigger-action {
    padding:  8px 12px;
}
.version-badge-parent-complex .trigger-action.disabled {
    cursor: default;
}
.version-badge-parent-complex .trigger-action:hover > .ficon {
    opacity: .8;
}

.version-badge-parent-complex .trigger-action.disabled  > .ficon,
.version-badge-parent-complex .trigger-action.disabled:hover  > .ficon {
    opacity: .2;
    color: #222;
}

/**/
.notification-panel .v-scroll {
    max-height: 500px;
    overflow: auto;
}
.notification-panel .dropdown-menu {
    width: 420px;
}
.notification-panel .dropdown-menu .comp-list {
    overflow: hidden;
}
.notification-panel .list {
    font-size: 0.8em;
    text-align: left;
    display: block;
    line-height: 1.1;
}
.notification-panel .list.clean-tabs {
    font-size: 0.85rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 10px 8px 0 8px;
    margin-bottom: 10px;
}
.notification-panel .dropdown-menu .clean-tabs.list li {
	padding-inline: 5px;
}

/* .notification-panel .list li.status-critical {
    box-shadow: 4px 0 0 #e28585 inset;
    background-color: rgba(218, 125, 125, 0.18);
}
.notification-panel .list li.status-warning {
    box-shadow: 4px 0 0 #ffb878 inset;
    background-color: rgba(248, 176, 112, 0.05);
}
.notification-panel .list li.status-ok {
    box-shadow: 4px 0 0 #7ec57e inset;
} */

.notif-unit {
    position: relative;
    padding: 0 0 0 30px;
    min-height: 110px;
    cursor: default;
}
.notif-unit:hover {
    background-color: rgba(0,0,0,0.02);
}

.notif-unit .badge-aside {
    background: #cacaca;
    color: rgba(0,0,0,0.5);
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    line-height: 20px;
    height: 100%;
    overflow: hidden;
    text-align: center;
    text-transform: uppercase;
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.badge-aside.badge-status-ok {background: #9bcc8c;}
.badge-aside.badge-status-warning {background: #f3dc70;}
.badge-aside.badge-status-critical {background: #f1a0a0;}
.badge-aside.badge-product {background: #e0ebf3;}

.notif-unit .status-label {
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 14px;
    text-align: center;
    width: 100px;
    text-transform: uppercase;
}

.notif-unit .status-date {
    position: absolute;
    top: 85px;
    left: 20px;
    font-size: 10px;
    text-align: center;
    width: 100px;
    text-transform: uppercase;
}

.notif-unit.status-warning .status-label,
.notif-unit.status-warning .circle-digit {color: #f5c979;}

.notif-unit.status-critical .status-label,
.notif-unit.status-critical .circle-digit {color: #c01c1c;}



.notif-unit .notif-circle {
    position: absolute;
    left: 40px;
    top: 25px;
    width: 60px;
    height: 60px;
    background-color: rgba(0,0,0,0.06);
    border-radius: 100px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 12px;
}
.notif-unit .circle-label {
    font-size: 14px;
}
.notif-unit .circle-digit {
    font-size: 36px;
}

.notif-unit .notif-content {
    padding: 5px 10px 5px 0;
}

.notif-unit .title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #325792;
}
.notif-unit .sub-title {
    font-size: 10px;
    color: #a9a9a9;
    margin-bottom: 5px;
}

.notif-unit .date {
    font-size: 11px;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
    align-self: flex-start;
    line-height: 1;
    background-color: rgba(0,0,0,0.03);
    padding: 4px 8px 3px 8px;
    border-radius: 0 0 0 7px;
    margin: -5px -10px 0 0;
    text-align: right;
}
.notif-unit .date .time {
    font-size: 11px;
    font-weight: normal;
}

.notif-unit .desc {
    font-size: 13px;
    font-weight: bold;
}
.notif-unit .buttons-wrap {
    margin-top: 5px;
}
.notif-unit .btn.btn-sm {
    padding: 2px 8px;
    color: #77909e;
    background-color: #e0ebf3;
}
.notif-unit .btn.btn-sm:hover {
    background-color: #d3e3ef;
    border-color: transparent;
}
/**/
/*-----------------------------------------*/

.app-middle {
  margin-left: var(--sbs);
}

.app-middle .main-content {
	position:relative;
    max-width: var(--compact-content-width);
    padding: var(--main-content-padding);
    margin: auto;
}
.view .app-middle .main-content {
    padding-bottom: 0;
}
.app-middle .page-content {

}
.app-middle .page-content .compact-content {
	max-width: var(--compact-content-width);
    margin: auto;
}
/* page index panel */
.main-content .page-index {
	background-color: var(--main-bg-color);
    margin: 0 -10px;
	padding:var(--page-index-padding-ver) 10px;

    padding-bottom: 0;
    margin-bottom: var(--page-index-padding-ver);

	line-height:1;
	position: -webkit-sticky;
    position: sticky;
	/*top: var(--app-header-height);*/
    top: 0;
	z-index:101; /*for stycky-el*/
}
.scrolled-up .main-content .page-index {
	top: var(--app-header-height);
}
.scrolled-up .main-content .page-index,
.scrolled-down .main-content .page-index {
	box-shadow: var(--shadow-layer-under);
}

html[class="home"] .page-index {display: none;}

.page-index .box-item {min-width:130px;} /* needed when buttons are too many in small devices */

.screen-title h1 {
	margin:0;
	color:#758089;
	font-size:1.4rem; /*tmp was 1.6rem for Calibri*/
	font-weight:normal;
}

.screen-title h1 .indicate {
	color: /*#32B8D6*/;
	font-weight:300;
}
.screen-title h1 .indicate:before {
	content: "{";
	margin-left: 5px;
	margin-right:2px;
}

.screen-title h1 .indicate:after {
	content: "}";
	margin-left: 3px;
	margin-right:5px;
}
/*screen-title dual-row-wrap*/
.screen-title .dual-row-wrap {
	margin-top: -4px;
}
.screen-title .secondary-meta-wrap {
	color:#758089;
    line-height: 1.2;
    padding-top: 3px;
}

/**/
.breadcrumb {
	margin:0;
	padding:0;
	font-size: 0.8rem;
	background-color:transparent;
	color:#758089;
}

.breadcrumb a {color:#2cb7d5  /*#758089*/;}

.breadcrumb > li + li::before {
    padding: 0;
    content: "/";
}

/* screen-title-back */
.screen-title-back {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
}
.main-content .page-index .screen-title-back {
    margin-right: 8px;
    /* margin-left: -12px; */
    margin-bottom: var(--page-index-padding-ver);
}

.screen-title-back .ficon {
    cursor: pointer;
    display: block;
    padding: 10px 4px;
    color: var(--main-action-color);
    font-size: 1.1rem;
    opacity: 0.8;
}
.screen-title-back:hover {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
.screen-title-back:hover .ficon {
    transform: translate(-1px,0);
    color: var(--main-action-color-hover);
    opacity: 1;
}


/* screen-title-wrap */
.screen-title-wrap {
    margin-bottom: var(--page-index-padding-ver);
}
.box-item.screen-title-wrap {
    align-self: center;
}



/* page actions panel */
.page-actions {
    text-align: right;
    /*white-space: nowrap;*/
    user-select: none;
}

.page-actions .btn {
	margin-top:3px;
	margin-bottom:3px;
	padding:4px 8px;
	font-size:0.93em;
}

.page-actions .main-action {
	display: inline-block;
    margin-left: 4px;
    padding: 6px 2px;
    font-size: 1.2rem;
    cursor: pointer;
    user-select: none;
}
.main-action {color: var(--main-action-color);}

.page-actions .main-action:hover,
.main-action:hover {
	color: var(--main-action-color-hover);
}

/* main-action combined - this is main action icon with text underneath */
.main-action.combined {
    text-align: center;
    max-width: 61px; /* was 58px - "Dashboard" fix */
    vertical-align: top;
    line-height: 1;
    display: inline-block;
}
.main-action.combined .action-text {
    display: block;
    font-size: 11px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: -2px;
	text-overflow: ellipsis;
	overflow: hidden;
}
.main-action.combined .action-text:empty {
    padding: 0;
}
/* main-action combined-hor */

.main-action.combined-hor {
    display: inline-block;
}
.main-action.combined-hor .ficon {
    vertical-align: middle;
}
.main-action.combined-hor .action-text {
    vertical-align: middle;
    font-size: 11px;
}


/* highlight action */

.main-action.highlight,
.ficon.highlight {
    color: var(--main-action-color-hover);

}

/* accented action */

.main-action.accent,
.ficon.accent {
    background-color: var(--accent-bg);
    color: var(--accent-bg-txt);
    border-radius: 12px;
    padding-left: 12px;
    padding-right: 12px;
}

/* disabled action */

.main-action.disabled,
.main-action.disabled:hover,
.ficon.disabled,
.ficon.disabled:hover {
    color: var(--main-action-disabled-color);
}


/*main-action "notif-hint" - used on filter icon*/
.main-action.pressed,
.ficon.action.pressed {
    box-shadow: 0 2px 0 var(--main-action-color-hover);
    color: var(--main-action-color-hover);
}

.main-action.notif-hint,
.notif-hint {
	position: relative;
}
.main-action.notif-hint:after,
.notif-hint:after {
	content: "";
    display: block;
    position: absolute;
    top: 3px;
    right: 2px;
    width: 10px;
    height: 10px;
    background-color: var(--main-action-color-hover);
    border-radius: 30px;
}

.ficon.notif-hint:after {
    top: -1px;
    right: -2px;
    width: 8px;
    height: 8px;
}






/*for the more context dropdown*/
.page-actions .dropdown {
    vertical-align: top; /* if there is main-actions combined */
}



/* dropdown-menu block-wrap
- is extended styles when dropdown menu is not only UL tag and contains inner free content + list
- example usage in i-scheme context menus
*/
.dropdown-menu.block-wrap.size-medium {
    min-width: 200px;
}
.dropdown-menu.block-wrap.size-large {
    min-width: 240px;
}
.dropdown-menu.block-wrap.size-xlarge {
    min-width: 300px;
}
.dropdown-menu.block-wrap .label-row-wrap {
    padding: 4px 12px;
    font-size: 0.75rem;
}
.dropdown-menu.block-wrap .list>li>a {
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
.dropdown-menu.block-wrap .list>li>a:focus,
.dropdown-menu.block-wrap .list>li>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}


/* main nav */

.main-nav {
  background-color: var(--theme-identity-bgr);
  font-size:1.1em;
  position:fixed;
  width:var(--sbs);
  left:0;
  top:0;
  z-index:901;
  display: flex;
  flex-direction: column;
  height:100%;

  --webkit-scrl-track:#0000003d;
  --webkit-scrl-thumb:#edf7ff4f;
}

/**/
.main-nav .aside-logo {
    background-color: var(--theme-identity-bgr);
    height: var(--app-header-height);
    font-size: 0;
}

.main-nav .aside-logo img {
    max-width: 80px;
    max-height: 20px;
}

.main-nav .aside-logo a {
    display: inline-block;
    padding:10px 15px;
    line-height: 1;
    min-height: var(--app-header-height);
    box-sizing: border-box;
    overflow: hidden;
}
.skin-aside  .main-nav .aside-logo a {
    width: 0;
    padding: 0;
}
.skin-aside  .main-nav .aside-logo img {
    opacity: 0;
}



.main-nav .nav-icon-wrap {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 12px;
    cursor: pointer;
}
.skin-aside .main-nav .nav-icon-wrap {
    padding-right: 18px;
}

/* nav-icon for mobile state - in the app-header */
.nav-icon-wrap-mobile {
    position: absolute;
    padding: 8px;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: none;

    --nav-icon-color:#7c8391;
}


/* nav hamburger icon animation */
.nav-icon-wrap .nav-icon {
    width: 18px;
}

.nav-icon-wrap-mobile .nav-icon {
    width: 20px;
}
.nav-icon:after,
.nav-icon:before,
.nav-icon div {
    background-color: var(--nav-icon-color);
    border-radius: 3px;
    content: '';
    display: block;
    height: 2px;
    margin: 3px 0;
    transition: all .4s ease-in-out .4s;
}

/* ani state 2 */

/* arrow - used in aside bar desktop view */
.skin-aside .nav-icon-wrap .nav-icon:before {
    transform: translate3d(4px,0,0) rotate(45deg) scaleX(.8);
}
.skin-aside .nav-icon-wrap .nav-icon:after {
    transform: translate3d(4px,0,0) rotate(-45deg) scaleX(.8);
}
.skin-aside .nav-icon-wrap .nav-icon div {}



/* cross - used in mobile view */
.skin-aside .nav-icon-wrap-mobile .nav-icon:before {
    transform: translateY(5px) rotate(135deg);
}
.skin-aside .nav-icon-wrap-mobile .nav-icon:after {
    transform: translateY(-5px) rotate(-135deg);
}
.skin-aside .nav-icon-wrap-mobile .nav-icon div {
    transform: scale(0);
}






.main-nav .list-wrap {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.main-nav .list {}

.main-nav .list a,
.main-nav .list .force-link {
    color: var(--theme-identity-bgr-txt);
    /*display:block;*/ /*this is already flexbox element*/
    padding:0.4rem 13px;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
    text-decoration:none;
    outline:none;
    position:relative;
    -webkit-align-items: center;
    align-items: center;
}

/*.main-nav .list li:first-child a,
.main-nav .list  li:first-child .force-link {border-top:none;}*/

.main-nav .list a:hover,
.main-nav .list .force-link:hover {background-color: rgba(255, 255, 255, 0.2);}

.main-nav .list a.active,
.main-nav .list .force-link.active { background-color: #80b329;  color: #fff;}

.main-nav .list .active-parent {box-shadow: 2px 0 0 #2cb7d5 inset; }

.main-nav .title {}


.main-nav .ficon {
  color:rgba(255,255,255,0.7);
  font-size: 1.1rem;
  vertical-align: middle;
  margin-right: 6px;
}

.main-nav a.active .ficon,
.main-nav .force-link.active .ficon {color: #fff;}

/**/
.main-nav .sub-menu a,
.main-nav .sub-menu .force-link {
	padding-left:28px; /*more indent for subitmens - must be fixed in collpased skin-aside view*/
	font-size:0.85em;
}
.main-nav li[aria-expanded="true"],
.main-nav .sub-menu{background-color:rgba(0, 0, 0, 0.1);}

/*small icon indicates there is sub items*/
.main-nav li[aria-expanded] {
	position:relative;
}
.main-nav li[aria-expanded]:before {
	position:absolute;
	right:10px;
	top:50%;
	/* -webkit-transform:translate(0,-50%);
	transform:translate(0,-50%); */
    margin-top: -6px;
	color:rgba(255, 255, 255, 0.4);
    transition: all 250ms;
}


/**************** SKIN-ASIDE ************** - global body class to change layout sidebar application view */
.skin-aside {
    --sbs:50px;
}
.skin-aside .app-middle {
  margin-left:var(--sbs);
}
.skin-aside .main-nav {
  width:var(--sbs);
}

.mobile-detected .skin-aside .main-nav {
  width:var(--sbs); /* temp - check if needed*/
}




.skin-aside .main-nav .title,
.in-progress .main-nav .title {
	overflow:hidden;
	width:0;
	height:100%;
	padding:0;
	opacity:0;
	display:block;
	position:absolute;
	top:0;
	left:100%;
}

.skin-aside .main-nav a:hover .title,
.skin-aside .main-nav .force-link:hover .title {
	/*width:160px;*/
	opacity:1;
	background-color: #2C3139;
	/*padding:8px 12px;*/
}
.skin-aside .main-nav a.active:hover .title,
.skin-aside .main-nav .force-link.active:hover .title {background-color: inherit;}

.skin-aside .app-logo {
    left: calc(var(--sbs) + 20px);
    height: auto;
    opacity: 1;
}
.skin-aside .main-nav .sub-menu a,
.skin-aside .main-nav .sub-menu .force-link {
	padding-left:13px; /* restoring the default view in collapsed skin-aside view */
}
/**/
.skin-aside .main-nav li[aria-expanded]:before,
.in-progress .main-nav li[aria-expanded]:before {display: none;} /* hide icon on desktop view in collapsed mode */



/***** FICONS PACK SPECIFIC ******/
.main-nav li[aria-expanded]:before,
.tree-menu .title[aria-expanded]:before,
.btn-loading::before,
.ficon-loading::after{
	font-family: 'ficon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ficon.space-l:before {padding-left:4px;}
.ficon.space-r:before {padding-right:4px;}

.ficon.middle:before { vertical-align: middle;}

.bigger-ficon .ficon:before{font-size:1.2rem;}

.skin-aside .app-header .trigger:before {content:"\e918";}

/* expand hint icon on the rows that has-children */
.main-nav li[aria-expanded="true"]:before,
.tree-menu .title[aria-expanded="true"]:before {content:"\e602"; transform: rotate(180deg);  }

.main-nav li[aria-expanded="false"]:before,
.tree-menu .title[aria-expanded="false"]:before {content:"\e602"; transform: rotate(0deg);}
/**/
.btn-loading::before, .ficon-loading::after {content:"\e64a";}

/* "icon-wrap-multi" - icons combined with other icons on top */
.icon-wrap-multi {
    position: relative;
    user-select: none;
}
.icon-wrap-multi .icon-sub,
.icon-wrap-multi .icon-sup {
    position: absolute;
    font-size: 12px !important;
    background-color: #fff;
    border-radius: 100px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
}

.icon-wrap-multi .icon-sub {
    right: -10px;
    bottom: -3px;
}
.icon-wrap-multi .icon-sup {
    right: -10px;
    top: -3px;
}

.icon-wrap-multi .txt-icon-circle-accent + .icon-sub,
.icon-wrap-multi .txt-icon-circle-accent + .icon-sup {
    color: var(--accent-color);
}

.icon-wrap-multi .txt-accent + .icon-sub,
.icon-wrap-multi .txt-accent + .icon-sup {
    color: var(--accent-color);
}


.icon-wrap-multi .user-type-icon {
    margin-right: 0;
}

/* Specific Pages */

/*page-gdpr*/
.page-gdpr header {
	border-bottom:1px dashed rgba(0,0,0,0.3);
	padding: 20px 0 20px 0;
	margin-bottom:10px;
	background-color:var(--main-bg-color); /* background-color of the html */
	box-shadow: 0 0 30px 2px var(--main-bg-color);

	position: -webkit-sticky;
    position: sticky;
    top: 0;
}



/* unit-status - used in "live-data" screen and Client Custom Dashboards */

/*tunnel-list-wrap*/
.tunnel-list-wrap {
    overflow: auto;
    padding: 20px 0;
}

.tunnel-item {
    min-width: 90px;
    max-width: 90px;
    height: 140px;
    position: relative;

    background: var(--tunnel-item-bg);
    cursor: pointer;
    margin-left: 3px;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.tunnel-item:before {
    content:"";
    position: absolute;
    left: -3px;
    top: 0;
    display: block;
    width: 3px;
    height: 100%;

    background: var(--tunnel-item-edge-bg);
}

.tunnel-item:hover {
    box-shadow: var(--tunnel-item-hover-shadow);
}

.tunnel-item.selected {
    box-shadow: 0 0 0 2px var(--help-guidance-default-color) inset, 0 0 5px 2px var(--help-guidance-default-color), 0 0 10px var(--help-guidance-default-color);
    z-index: 10;
    transform: scale(1.07);
}
.tunnel-item.selected:before {
    display: none;
}

/*used for simple-panel-data corresponding selection*/
.sibling-selected-hint {
    box-shadow: 0 0 5px 2px var(--help-guidance-default-color), 0 0 10px var(--help-guidance-default-color);
}

/**/

.tunnel-item .info-wrap {
    margin: 50px 10px 0 10px;
    padding: 4px 6px;
    min-height: 46px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.2);
    line-height: 1.2;
    text-align: center;
    /* background-color: rgba(255,255,255,0.1); */
}
.tunnel-item .program-number {
    font-size: 16px;
}

.tunnel-item .program-name {
    font-size: 0.8em;
}

.tunnel-item .status {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    border-radius: 0 0 6px 6px;
    height: 10px;
    background-color: var(--shade-of-light4);
    box-shadow: 0 2px 2px rgba(0,0,0,0.15);
}
.tunnel-item .status.red {
    background-color: #E9474A;
}
.tunnel-item .status.green {
    background-color: #43B35D;
}

.tunnel-item .status.blue {
    background-color: #007BFF;
}
/**/

.tunnel-item .item-number {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2px;
    min-width: 22px;
    font-size: 13px;
    line-height: 20px;
    border-radius: 100%;
    border: 1px solid rgba(0,0,0,0.15);
    background-color: var(--pan-bgr);
    text-align: center;
}


/*********************/
.tunnel-door {
    width: 60px;
    position: relative;
    overflow: hidden;
}

.tunnel-door:before {
    content: "";
    display: block;
    position: absolute;
    top: 50px;
    right: 0;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 60px 0;
    border-color: transparent var(--tunnel-door-color) transparent transparent;
}
.tunnel-door:after {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    right: 0;

    width: 50px;
    height: 20px;
    background-color: var(--tunnel-door-color);
}

/*********************/




/* status-wrap-list - soon obsolete */
/*.status-wrap-list.f-box {
    flex-wrap: wrap;
}
.status-wrap-list.f-box .repeater-unit {
    min-width: 300px;
    max-width: 400px;
}*/

.status-wrap-list {margin:0 -15px;}
.status-wrap-list:after {
    content:"";
    display:block;
    clear:both;
    height:0;
}
/**/
.panel-grid-wrap {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
/* not yet used anywhere with "grid-item" child classes */
.panel-grid-wrap .grid-item {

}


/**/
.panel-simple-data {
    padding: 15px;
    border: 1px solid var(--panel-simple-data-border);
    background-color: var(--panel-simple-data-bg);
}
.panel-simple-data header {
    margin-bottom: 15px;
    margin-top: -5px;
}

.panel-simple-data-title {
    color: var(--panel-simple-data-title-txt);
	font-weight: bold;
}



/* time-histogram */
.time-histogram {
    display: flex;
    /* max-height: 350px; */
    overflow-x: auto;
}
.time-histogram .left-panel {
    display: block;
    width: 130px;
    position: sticky;
    left: 0;
    z-index: 99;
    box-shadow: 3px 0 20px rgba(0, 0, 0, 0.2);
}

.time-histogram .label-index {
    height: var(--his-row-height);
    padding: 0 10px;
    font-weight: bold;
    /* text-align: right; */
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    background-color: var(--main-bg-color);
}

/************/
.time-histogram .right-panel {
    flex:1;
}

.time-histogram .his-header,
.time-histogram .his-row {
    position: relative;

    height: var(--his-row-height);
    line-height: var(--his-row-height);
}

/*sticky header on scroll*/
.time-histogram .his-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.time-histogram .his-cell {
    position: absolute;
    width: 90px;
    padding-left: 5px;
    height: var(--his-row-height);
    box-shadow: 2px 0 0 rgba(50, 87, 146, 0.2) inset;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
.time-histogram .his-header .his-cell {
    padding-left: 8px;
    font-weight: bold;
    background-color: var(--time-histogram-header-bg);
}
.time-histogram .his-header .label-index {
    background-color: var(--time-histogram-header-bg);
}
.time-histogram .his-header .his-cell:before {
    content:"";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 2px;
    top: calc(50% - 6px);
    border-width: 6px 4px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(50, 87, 146, 0.2);
}

.time-histogram .his-time-unit {
    position: absolute;
    height: calc(var(--his-row-height) - 2px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 4px;
    z-index: 90; /* to be on top of unit-under */
}
.time-histogram .his-time-unit.unit-under {
    z-index: 89;
}

.time-histogram .his-time-unit:hover {
    /* transform: translate(-2px, -2px); */
    box-shadow: 6px 6px 10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}


.time-histogram .his-time-unit.selected {
    transform: translate(-6px, -6px);
    box-shadow: 6px 6px 10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.time-histogram .his-time-unit.selected-internal {
    transform: translate(-6px, -6px);
}

/**/
.legend-histogram {
    text-align: right;
    padding: 0 5px 5px 0;
    font-size: 0.9rem;
}




/************************/
.histogram-results-panel {}
.histogram-results-header {
    background-color: rgba(0, 0, 0, 0.06);
    padding: 15px 30px;
    margin-bottom: 20px;
}

/* compare-ctrl-wrap - used in overview compare data screen */
.compare-ctrl-wrap {
    margin: 0 -20px;
}
.compare-ctrl-wrap .col-compare {
    border-right: 2px dashed rgba(0, 0, 0, 0.2);
    padding: 20px;
}
.compact-view .col-compare {
    padding: 0 10px;
}
.compare-ctrl-wrap .col-compare:last-child {
    border-right: none;
}

/**/
.compare-ctrl-wrap .col-compare-inner {
    overflow: auto;
    -webkit-scrollbar-width: thin;
    scrollbar-width: thin;
}

.compare-ctrl-wrap .col-compare-inner.sep-top {
    box-shadow: 0 2px rgba(0, 0, 0, 0.2) inset;
}

/* .compare-ctrl-wrap .col-compare-inner:first-child  {
    box-shadow: none;
} */

/**/
.compare-ctrl-wrap .col-compare-inner-header {
    position: sticky;
    top: 0;
    background-color: var(--main-bg-color);
    z-index: 100;
}
.compact-view .col-compare-inner-header .form-group  {
    --form-group-mb: 8px;
}

.compare-ctrl-wrap .compare-title {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 1.05rem;
}

.compare-ctrl-wrap .col-compare-inner.organization .compare-title  {
    margin-left: 10px;
}


/* comp-filter */

.comp-filter {
    position: sticky;
    top: 0;
    margin-top: calc(-1 * var(--pan-padding-ver));
    transform: translateY( calc(-1 * var(--pan-padding-ver)) );
    padding-top: var(--pan-padding-ver);
    background-color: var(--pan-bgr);
    z-index: 30;

    box-shadow: var(--shadow-layer-under);
}

.pan .pan-body .comp-filter {
    margin-left: calc( var(--pan-padding-hor) * -1);
    margin-right: calc( var(--pan-padding-hor) * -1);
    padding-left: var(--pan-padding-hor);
    padding-right: var(--pan-padding-hor);
}


/* comp-list - used for all lists that was made for overview compare screen */
.comp-list {line-height: 1.3;}


.comp-list .actions-wrap-labels {
    background-color: var(--pan-bgr);
    position: sticky;
    top: calc(-1*var(--pan-padding-ver));
    /* padding-top: calc(var(--pan-padding-ver)/2); */
    padding: 2px 0 8px 0;
    z-index: 29; /* must be under "comp-filter" when opened */

    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/*when in popup*/
.popup .comp-list .actions-wrap-labels {
    /* --pan-bgr:var(--main-bg-color); */ /* this is optional if the popup has gray bgr */
    top: 0;
}
.comp-list .actions-wrap-labels .action-label {
    display: inline-block;
    width: var(--comp-action-width);
    font-size: 0.65rem;
    line-height: 0.9;
    padding-left: 0;
    text-align: center;
}
.comp-list .actions-wrap-labels .action-label .link {
    position: relative;
    display: inline-block;
}
.comp-list .actions-wrap-labels .action-label .link:hover {
    color: #222;
}
.comp-list .actions-wrap-labels .action-label .link .ficon {
    display: block;
    font-size: 1.3em;
    line-height: 1;
    margin-top: -14px;
    transform: translateY(12px);
}
/*****/

.comp-list .actions-wrap {
    display: flex;
    font-size: var(--pan-actions-icon-size);
    /* gap: 4px; */
    align-items: center;
}
.popup .comp-list .actions-wrap .form-group {
    margin-bottom: 0;
}
.popup .comp-list .actions-wrap .checkbox,
.popup .comp-list .actions-wrap .radio {
    line-height: 0;
}

/* fixing all diff childs to be flex items with consistent width */
.comp-list .actions-wrap > * {
    flex: 1;
    width: var(--comp-action-width);
    text-align: center;
}

/* fixing the width for trigger icon when in dropdown */
.comp-list .actions-wrap .main-action.link {
    width: 100%;
    max-width: none;
    display: inline-block;
    vertical-align: initial;
}

.comp-list .actions-wrap .txt-icon-circle-accent {font-size: 0.9em;}

.comp-list .actions-wrap .checkbox.checbox-switch {
    font-size: initial;
    margin: 0 !important;
}

/* fixing inherited text-align center */
.comp-list .actions-wrap .checkbox.checbox-switch label {
    text-align: left !important;
}
.comp-list .actions-wrap .checkbox.checbox-switch label span {
    margin-right: 0;
}
/**/
.comp-list .actions-wrap .dropdown {
    display: inline-block;
}

/**/
.add-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: auto;
    width: 50%;
    max-width: 100%;
    line-height: 1;
    position: relative;
    font-size: 1.1em;
    border: 1px dashed var(--link-color);
    color: var(--link-color);
    border-radius: 4px;
}
.add-item-btn:hover {
    border: 1px dashed var(--link-color-hover);
    color: var(--link-color-hover);
}

.add-item-btn > .ficon {
    margin-right: 5px;
}


/*tree-list*/
.tree-list {}

.tree-list .group-title {
    font-size: 0.8rem;
    background-color: rgba(45, 86, 101, 0.1);
    color: #707A83;
    padding: 5px;
    margin: 12px 0 5px;
}
.tree-list > .group-title,
.tree-list > .ember-view > .group-title {
    display: none;
}

.tree-list .expand-icon-wrap {
    font-size: 1.1rem;
    min-width: 24px;
    max-width: 24px;
    color: var(--text-color-soft2);
}
/**/
.tree-list .expanded-child-wrap {
    border-left: 2px dotted rgba(112, 112, 131, 0.3);
    padding-left: 14px;
}
.tree-list .list.v-space .expanded-child-wrap {
    padding-top: 0;
    padding-bottom: 0;
}

.tree-list .list-item .txt-wrap {
    overflow: hidden;
}



/**************************************************************************************/
/* -------- Scheme (schematic settings - live data) -->> ------- */
.schematic-full-screen .main-nav,
.schematic-full-screen .app-header,
.schematic-full-screen .app-header,
.schematic-full-screen .page-index,
.schematic-full-screen .pan.details-view ,
.schematic-full-screen .single-view-additional .clean-tabs {
    display: none !important;
}
.schematic-full-screen .single-view-additional {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.schematic-full-screen .single-view-additional .pan {
    background-color: transparent !important;
    box-shadow: none !important;
    height: auto !important;
}
.schematic-full-screen .single-view-additional .pan-header {
    /* background-color: var(--main-bg-color) !important; */
    background-color: var(--pan-bgr) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
    padding-top: calc( var(--pan-padding-ver) / 3 );
    padding-bottom: calc( var(--pan-padding-ver) / 3 );
}

.schematic-full-screen .single-view-additional .pan-body {
    overflow-y: visible;
}
.schematic-full-screen .single-view-additional .comp-filter {
    top: 40px;
}


.schematic-full-screen .full-screen-trigger {
    color: var(--sch-bottle-fill-danger);
}
.schematic-full-screen {
    --sbs:0;
    --compact-content-width: auto;
    --main-content-padding: 0;

    --pan-padding-ver: 12px;
    --pan-padding-hor: 16px;
}

/*we scheme*/
.scheme-wrap {
    font-size: 14px; /* all measure units in the graph will be constant */
    display: inline-block;
    color: var(--scheme-txt);
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    z-index: 1;
    padding-top: 26px;
}


.scheme-wrap.skin-offset-entry-points {
    padding-left: var(--scheme-offset-entry-points);
}

.scheme-row {
    /* display: inline-block; */
}

.scheme-wrap.skin-offset-entry-points .scheme-row {
    position: relative;
}


.scheme-wrap .dropdown.skin-clean {cursor: pointer;}

.scheme-wrap .dropdown.open > *[aria-expanded="true"],
.scheme-wrap .dropdown .show[aria-expanded="true"],
.scheme-wrap .highlighted {
    box-shadow: 0 0 10px var(--sch-route-stroke);
}


.scheme-wrap .device-unit {
    font-size: 10px;
    cursor: pointer;
    min-height: 140px; /*was 110px*/
}


.device-wrap.selected .device-unit {
    box-shadow: 0 0 10px var(--sch-route-stroke);
    border-color: var(--sch-route-stroke);
}
/**/
.device-wrap .trigger-select {
    position: absolute;
    font-size: 20px;
    left: 0;
    top: 0;
    transform: translate(0, 0);
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}
.device-wrap:hover .trigger-select,
.device-wrap.selected .trigger-select {
    transform: translate(0, -100%);
    opacity: 1;
    height: auto;
}
.device-wrap .trigger-select:hover,
.device-wrap.selected .trigger-select {
    color: var(--sch-bottle-fill);
}

/**/



.device-unit .context-desc {
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    height: 0;
    overflow: hidden;
    max-height: 0;
}
.device-unit .context-desc .inner-wrap {
    padding-top: 12px;
}

.device-unit .progress {
    margin-bottom: 8px;
}

.scheme-wrap .device-title {
    color: var(--scheme-device-title);
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
}
/**/
.scheme-wrap .indicator {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 100px;
    background-color: var(--indicator-disabled);
}
.scheme-wrap .indicator.on {
    background-color: var(--indicator-on);
}
.scheme-wrap .indicator.off {
    background-color:  var(--indicator-off);
}
.scheme-wrap .indicator.connected {
    background-color:  var(--indicator-connected);
}
/**/

.scheme-wrap .label-row-wrap.dash-between .col-label,
.scheme-wrap .label-row-wrap.dash-between .col-txt {
    color: inherit;
}
.scheme-wrap .label-row-wrap.dash-between .col-txt {
    font-weight: bold;
    padding: 0; /* bts inheritence clear fix */
}
/**/
.device-unit .actions-wrap {
    padding: 10px 0 5px;
}
.device-unit .actions-wrap .main-action {
    margin-right: 5px;
}
.device-unit .actions-wrap .ficon {
    font-size: 15px;
}

/* specific for devices */
.we-devices .device-wrap {
    min-width: 140px;
    width: 140px;
    position: relative;
    display: flex; /* equals all devices height */
}

.we-unit {
    position: relative;
    z-index:inherit;
    padding: 6px 8px 60px 8px;
    width: 140px;
    z-index: 299;
    min-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background-color: var(--we-unit-bg);
    border-radius: 12px;
    border: 1px solid rgba(112, 112, 112, 0.6);
    box-shadow:
        -6px 0 0 rgba(0, 0, 0, 0.1) inset,
        /* 0 -9px 0 #7A6D79 inset, */
        2px 4px 4px rgba(0, 0, 0, 0.13)
        ;
}

.we-unit:before {
    content:"";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    box-shadow:
        0 23px 0 rgba(0, 94, 195, 0.6) inset,
        0 -10px 0 rgba(49, 31, 48, 0.6) inset
        ;
}
.we-unit:after {
    content:"";
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 13px;
    width: 42px;
    height: 42px;
    border-radius: 1000px;
    background-color: #D4F2F6;
    /* border: 6px solid #7A6D79; */
    box-shadow:
        -4px 0 0 rgba(0, 0, 0, 0.25) inset,
        0 0 0 6px #7a6d79 inset,
        -11px 0 0 rgba(0, 0, 0, 0.08) inset
        ;
}

.we-unit .indicator-wrap {
    position: absolute;
    right: 8px;
    top: 0px;
    display: flex;
    gap: 10px;
}
.we-unit .indicator {
    position: static;
    border-radius: 0 0 10px 10px;
    width: 8px;
    height: 10px;
}


/* opened state */
.open > .we-unit {
    position: absolute;
    width: 280px;

    padding-bottom: 6px;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.13);
    z-index: 300;
}
.open > .we-unit:before,
.open > .we-unit:after {
    /* opacity: 0;
    z-index: 1; */
    transform: translateY(150%);
}
.tv-dashboard-qr {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}
.open > .device-unit .context-desc {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);

    height: auto;
    max-height: 1000px;
}

/* additional for we-unit.tnl-unit - tunnel unit */
.we-unit.tnl-unit {
    border-radius: 2px;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.13);
    padding: 30px 8px 6px 8px;

    background: var(--tnl-unit-bg);

}

.we-unit.tnl-unit:before,
.we-unit.tnl-unit:after {
    display: none;
}

.we-unit.tnl-unit .indicator {
    position: absolute;
    right: 8px;
    left: 8px;
    top: 0;
    width: auto;
    height: 6px;
    border-radius: 0 0 4px 4px;
}
.we-unit.tnl-unit .ind-number {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2px;
    min-width: 28px;
    font-size: 14px;
    line-height: 26px;
    border-radius: 100%;
    border: 1px solid var(--indicator-disabled);
    background-color: var(--pan-bgr);
    text-align: center;
}
.scheme-wrap .ind-number.on {
    border-color: var(--indicator-on);
}
.scheme-wrap .ind-number.off {
    border-color:  var(--indicator-off);
}

.we-unit.tnl-unit .device-title,
.we-unit.tnl-unit .device-title-prog {
    text-align: center;
    line-height: 1.2;
}

.we-unit.tnl-unit .device-title {
    margin-bottom: 26px;
}
.open > .we-unit.tnl-unit {
    background: var(--tnl-unit-open-bg);
}


/**/

.sch-unit.air,
.sch-unit.water {
    white-space: nowrap;
    padding: 5px 12px 5px 6px;
    border-radius: 4px;
    border: 1px solid var(--sch-primary-border-color);
    display: inline-block;
    text-transform: uppercase;
    overflow: hidden;
    max-width: 80px;
    text-overflow: ellipsis;
}
.sch-unit.air .indicator,
.sch-unit.water .indicator {
    position: absolute;
    top: 2px;
    right: 2px;
}
.sch-unit.air .ficon,
.sch-unit.water .ficon {
    color: var(--sch-route-stroke);
    vertical-align: middle;
    font-size: 1.5em;
    display: inline-block;
    margin-right: 2px;
}

/**/
.add-unit-wrap .add-unit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px dashed rgba(68, 94, 117, 0.7);
    padding: 6px 8px;
    width: 90px;
    z-index: 299;
    min-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
}

.add-unit-wrap .add-unit:hover {
    background-color: rgba(68, 94, 117, 0.06);
}


/***************************** Scheme Row 1 - we-devices or tunnel + common scheme components *****************************/
.scheme-row.we-devices {}

.we-devices-row {
    position: relative;
    z-index: 101;
}
.we-devices-row.f-box {
    gap: 20px;
}

.valves-block-row {
    background-color: var(--we-unit-bg);
    border: 1px solid var(--sch-primary-border-color);
    height: 36px;
    border-radius: 3px;
    position: relative;
    z-index: 100;
}
.we-devices .valves-block-row {
    margin-top: 40px;
}

.port-entry-element {
    background-image: var(--port-entry-bg-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 11px;
    height: 13px;
}

.we-devices .valves-block-row .port-entry-element {
    position: absolute;
    top: 100%;
    left: 5px;
}

/* placeholder and alignment for arrow-route and valve under WE in row-1 */
.we-devices .valve-route-unit-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(100%);
}

/*all sch-arrows*/
.arr-route {
    background-color: var(--sch-route-stroke);
    color: var(--sch-route-stroke);
    position: relative;
}
.arr-route.ficon:before {
    content: "\e9aa";
    color: inherit;
    position: absolute;
}
.arr-route.arr-none.ficon:before {
    content: "";
}

.arr-ver {
    margin: 4px 0;
    width: var(--arr-route-thickness);
    min-height: 26px;
    display: inline-block;
}
.arr-ver.arr-compact {
    min-height: 16px;
}
.arr-ver.arr-top:before {
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}
.arr-ver.arr-bot:before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px) rotate(180deg);
}

/**/
.arr-hor {
    margin: 4px 0;
    height: var(--arr-route-thickness);
    min-width: 26px;
}
.arr-hor.arr-compact {
    min-width: 10px;
}
.arr-hor.arr-left:before {
    top: 50%;
    left: -4px;
    transform: translateY(-50%) rotate(-90deg);
}
.arr-hor.arr-right:before {
    top: 50%;
    left: 100%;
    transform: translateX(-4px) translateY(-50%) rotate(90deg);
}


/* valve-unit valve-top */

.valve-unit {
    background-image: var(--valve-unit-bg-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 22px;
    height: 26px;
    position: relative;
}
.valve-unit .indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
}
.valve-unit.valve-top {
    margin-top: 12px;
}
.valve-unit.valve-top .port-entry-element {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%) rotate(180deg);
    transform-origin: center center;
}

.valve-unit.valve-bot {
    margin-bottom: 12px;
}
.valve-unit.valve-bot .port-entry-element {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    transform-origin: center center;
}


/* air sch-unit */

.scheme-row.we-devices .air-entry-wrap {
    position: absolute;
    bottom: 4px;
    left: 0;
    transform: translateX(-100%);
    display: flex;
    align-items: center;
    z-index: 101;
}
.scheme-row.we-devices .air-entry-wrap .air-arr-path {
    color: var(--sch-route-stroke);
    vertical-align: middle;
    font-size: 1.8em;
    display: inline-block;
    transform: translateX(5px);
}
.scheme-row.we-devices .air-entry-wrap .port-entry-element {
    transform: rotate(90deg);
}



/***************************** Scheme Row 2 - specific-devices *****************************/
.scheme-row.specific-devices {
    padding: 30px 10px;
    position: relative;
}
.scheme-row.specific-devices .arr-end-path {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 40%;
    height: calc(50% - 12px - var(--arr-route-thickness));
}
.scheme-row.specific-devices .arr-start-path {
    position: absolute;
    right: 10px;
    bottom: 10px;
    height: 40%;
    height: calc(50% - 12px - var(--arr-route-thickness));
}

.scheme-row.specific-devices .arr-route.arr-hor {
    width: 100%;
}
.scheme-row.specific-devices .arr-hor.arr-left {
    margin-left: 5px;
}

/* sch-units */
.sch-unit {
    position: relative;
    font-size: 0.7em;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sch-unit .sch-unit-value {
    font-weight: bold;
}

/*sch-unit valve-3way*/
.sch-unit.valve-3way {
    min-width: 40px;
    height: 26px;
    border-radius: 4px;
    border: 1px dashed var(--sch-primary-border-color);
    background-image: var(--sch-valve3way-bg-image);
    background-position: center -1px;
    background-repeat: no-repeat;
    background-size: 90% 90%;
    display: inline-block;
}
.sch-unit.valve-3way .sch-text-wrap {
    padding-top: 29px;
}
.sch-unit.valve-3way .indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* sch-unit flow-meter */
.sch-unit.flow-meter {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border: 1px solid var(--sch-primary-border-color);
    background-image: var(--sch-flow-meter-bg-image);
    background-position: center 20px;
    background-repeat: no-repeat;
    background-size: 70% 90%;
    display: inline-block;
}
.sch-unit.flow-meter .sch-text-wrap {
    padding-top: 15px;
}
.sch-unit.flow-meter .indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* sch-unit pump */
.sch-unit.pump {
    width: 46px;
    height: 76px;
    border-radius: 4px;
    border: 2px solid var(--sch-route-stroke);
    background-image: var(--sch-pump-bg-image);
    background-position: center 20px;
    background-repeat: no-repeat;
    background-size: 76% 95%;
    display: inline-block;
}
.sch-unit.pump .sch-text-wrap {
    padding-top: 15px;
}
.sch-unit.pump .indicator {
    position: absolute;
    top: 4px;
    right: 4px;
}
/**/
.scheme-row.specific-devices .entry-valve-wrap {
    position: relative;
    margin: 50px 0;
}
.scheme-row.specific-devices .entry-valve-wrap .valve-water {
    position: absolute;
    top: -68px;
    left: -130px;
}

/***************************** Scheme Row 3 - sch-products *****************************/
.scheme-row.sch-products {}

.scheme-row.sch-products .sch-products-row {
    z-index: 11;
    position: relative;
    margin-top: -32px;
    gap: 20px;
}

.scheme-row.sch-products .valves-block-row {
    z-index: 10;
}

.scheme-row.sch-products .add-unit-wrap {
    padding-top: 45px;
}


.scheme-row.sch-products .product-wrap {
    /* margin-left: 15px; */
}


.sch-products .valves-block-row .port-entry-element {
    position: absolute;
    bottom: 100%;
    right: 4px;
    transform: rotate(180deg);
}



/* water water-entry-wrap sch-unit */
.scheme-row.sch-products .water-entry-wrap {
    position: absolute;
    top: 4px;
    left: 0;
    transform: translateX(-100%);
    display: flex;
    align-items: center;
    z-index: 100;
}
.scheme-row.sch-products .water-entry-wrap .water-arr-path {
    color: var(--sch-route-stroke);
    vertical-align: middle;
    font-size: 1.8em;
    display: inline-block;
    /* transform: translateX(5px); */
}
.scheme-row.sch-products .water-entry-wrap .port-entry-element {
    transform: rotate(90deg);
}

/* water-entry-wrap added-flow-meter */
.scheme-row.sch-products .water-entry-wrap.added-flow-meter {
    position: absolute;
    top: -19px;
    left: 0;
    transform: translateX(-100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 100;
}

/* product-source sch-unit */
.sch-unit.product-source {
    max-width: 100px;
    padding: 4px;
    border-radius: 4px; /* more pleasing when highlighted state is dropdown open */
    margin-top: -4px;
    position: relative; /*needed for trigger select*/

    overflow: visible;
}
.sch-unit.product-source.selected {
    box-shadow: 0 0 10px var(--sch-route-stroke);
    border: 1px solid var(--sch-route-stroke);
}

.sch-unit.product-source .trigger-select {
    position: absolute;
    top: 20px;
    right: 14px;
    font-size: 20px;
    opacity: 0;
    width: 0;
    padding: 2px 0;
    box-sizing: border-box;
    overflow: hidden;
}
.sch-unit.product-source:hover .trigger-select,
.sch-unit.product-source.selected .trigger-select {
    right: 4px;
    opacity: 1;
    width: auto;

}
.sch-unit.product-source .trigger-select:hover,
.sch-unit.product-source.selected .trigger-select {
    color: var(--sch-route-stroke);
}

.level-warning {--sch-bottle-fill: var(--sch-bottle-fill-warning);}
.level-disabled {--sch-bottle-fill: var(--sch-bottle-fill-disabled);}
.level-danger {--sch-bottle-fill: var(--sch-bottle-fill-danger);}

.bottle {
    position: relative;
    width: 56px;
    /* height: 57px; */
    height: 55px;
    margin: 0 auto 4px auto;

    --fill-level: 0%
}
.bottle .fill-digit-index {
    position: absolute;
    bottom: var( --fill-level );
    transform: translateY(55%);
    left: 75%;
    z-index: 1;
    color: var(--sch-bottle-fill);
    font-weight: bold;
    padding-left: 4px;
}
.bottle .fill-digit-index:before {
    content: "";
    position: absolute;
    display: block;
    height: 0;
    width: 13px;
    border-top: 2px solid var(--sch-bottle-fill);
    top: 5px;
    left: -11px;
    z-index: 5;
}
.bottle .bottle-bgr {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    color: var(--sch-bottle-fill);

    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--sch-primary-border-color);
}
.bottle .bottle-fill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    color: var(--sch-bottle-bgr);
    overflow: hidden;
    height: calc( 100% - var( --fill-level ) );
    /* min-height: 11%; */   /* thi is inverted and this is from top */

    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--sch-primary-border-color);
}

.sch-unit.product-source .bottle .ficon {
    font-size: 56px;
    display: inline-block;
    transform: translateX(-8px);
}
/**/
.sch-unit.product-source .sch-text-wrap {
    padding-top: 6px;
}

/*************************/

/* scheme-row actions */
.scheme-row .scheme-actions-wrap,
.scheme-row .valves-block-row .scheme-actions-wrap {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    transform: translateX(100%);
    padding-left: 30px;
    min-width: 90px;
}
.sch-products-row .scheme-actions-wrap {
    top: 80px;
    align-self: flex-start;
}

/* -------- <<-- Scheme ------- */
/**************************************************************************************/


/* subscription plans unit >> */

.pan.subscription-unit.unit-board {
    border-top: 6px solid var(--subscription-color);
    border-radius: 8px;
}

.pan.subscription-unit.unit-board .text-unit {
	font-size: 1rem;
	line-height: 1.5;
}

.subscription-unit.unit-board .pan-header {
    text-align: center;
}

.subscription-unit .unit-title {
    margin: 0 0 0.6rem 0;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--subscription-color);
}
.subscription-unit.unit-board .meta-wrap {
	margin: 0 0 0.6rem 0;
	display: flex;
	justify-content: center;
	gap: 5px;
}

.subscription-unit .plan-price {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--main-txt-color);
}
.subscription-unit .plan-price.type-text {
    font-size: 1.6em;
}r

.subscription-unit .plan-period {
    font-size: 1rem;
    color: var(--main-txt-color);
}


/* .subscription-unit:not(.details-view) .text-unit .unit-label, */
.subscription-unit.unit-board .text-unit .unit-label {
	font-weight: normal;
	line-height: 1.2;
	font-size: 1rem;
	color: var(--main-txt-color);
    margin-bottom: 12px;
    font-weight: bold;
}
/* subscription-unit details-view */
.subscription-unit.details-view {
    border-left: 4px solid var(--subscription-color);
}


/**************************************/
.subscription-unit.details-view .unit-title {
    font-size: 1.2rem;
}
.subscription-unit.details-view .plan-price {
    font-size: 1rem;
}
.subscription-unit.details-view .plan-period {
    font-size: 0.8rem;
}


/* subscription-label with txt-label inverted */
.subscription-label.txt-label {
	/* border-color: var(--subscription-color); */
	color: var(--subscription-color);
	box-shadow: 3px 0 var(--subscription-color) inset;
    padding: 2px 6px;
    line-height: 1.1;
    --sbl-font-size: 0.7rem;
    font-size: var(--sbl-font-size);
}
.subscription-label.txt-label.txt-medium {
    --sbl-font-size: 0.9rem;
}
.subscription-label.txt-label.txt-large {
    --sbl-font-size: 1.1rem;
}
.subscription-label .subscription-label-title {
    font-weight: bold;
}
.subscription-label .subscription-label-details {
    color: var(--main-txt-color);
    font-size: 0.9em;
    font-weight: bold;
}
/* subscription plans unit << */

/* carousel-nav */
.carousel-nav .carousel-point {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background-color: var(--main-txt-color);
    opacity: 0.3;
}
.carousel-nav .carousel-point.selected {
    opacity: 0.9;
}




/*- Media Queries -*/
@media only screen and (max-width:1200px) {

    .pan-body.pan-type-group > .pan-group.sep:first-child {
        border-left: none;
        padding-left: 0;
    }

}

@media only screen and (max-width:992px) {


}

@media only screen and (max-width:768px) {

    /* nasty bug workarround -
    reason: parent tag "app-header" z-index stacking bug on its child when parent is sticky.
    This offset the dropdown.
    Its not the real fix but workarround to safe space  */
    .notification-panel .dropdown.skin-clean.open {
        display: contents;
    }

}

@media only screen and (max-width:640px) {
    /* popup - fullscreen behavior */
    .popup:not(.image-popup) {
        /* top: 15px !important; */
        top: 50% !important;
        left: 12px !important;
        right: 12px !important;
        width: auto;
        position: fixed !important;
        /*
        transform: translateX(0px) translateY(0px) translateZ(0px) !important;
        */

        transform: translateX(0px) translateY(-50%) translateZ(0px) !important;

        --popup-content-height: calc(100dvh - var(--popup-header-height) - 24px);

    }

    .popup .content {
        /* height: var(--popup-content-height); */
    }

    .popup:not(.image-popup) .popup-header {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

	.popup:not(.image-popup) .content .inner-content {
		padding: 1.1rem;
	}


}


@media only screen and (max-width: 480px) {

    .app-middle,
    .skin-aside .app-middle {
        margin-left:0;
    }


    .nav-icon-wrap-mobile {display: block;} /* show the nav-icon for mobile view in the app-header */

    .aside-logo, .skin-aside .aside-logo {display: none;}

    .mobile-detected .skin-aside .app-header,
    .skin-aside .app-header {top: 0;} /* this stick the top bar to be visible when the menu is opened in mobile */

    .app-header .trigger,
    .mobile-detected .skin-aside .app-header .trigger,

    .app-header .trigger:before,
    .skin-aside .app-header .trigger:before {content:"\e67f";}

    .app-logo,
    .skin-aside .app-logo {
        left: 60px;
        height: auto;
        opacity: 1;
    }

    .app-header.has-user-timezone {
        height: calc(var(--app-header-height) * 2);
        top: calc(-2 * var(--app-header-height));
    }
    .scrolled-up .app-header.has-user-timezone,
    .skin-aside .app-header.has-user-timezone {
        top: 0;
    }
    .scrolled-up .app-header.has-user-timezone ~ .app-middle .main-content .page-index,
    .skin-aside .app-header.has-user-timezone ~ .app-middle .main-content .page-index {
        top: calc(var(--app-header-height) * 2);
    }
    .app-header.has-user-timezone .nav-icon-wrap-mobile {
        top: 0;
        height: var(--app-header-height);
        transform: none;
        display: flex;
        align-items: center;
    }
    .header-user-timezone,
    .skin-aside .header-user-timezone {
        display: flex;
        left: 0;
        right: 0;
        top: var(--app-header-height);
        width: 100%;
        max-width: none;
        justify-content: center;
        background-color: var(--app-header-bgr);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding: 0 10px;
        box-sizing: border-box;
    }
    .app-header.has-user-timezone ~ .app-middle .main-nav {
        padding-top: calc(var(--app-header-height) * 2);
    }

    .main-nav,
    .skin-aside .main-nav,
    .mobile-detected .skin-aside .main-nav {
        position:fixed;
        height:auto;
        /*max-height:100%;*/
        height:100%;
        width:100%;
        overflow-y:auto;
        overflow-x:visible;
        padding-top:var(--app-header-height);
        z-index:899;
        -webkit-transform: translate(0,-99.99%);
        transform: translate(0,-99.99%);
    }
    .skin-aside .main-nav,
    .mobile-detected .skin-aside .main-nav {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }

    .main-nav .title,
    .skin-aside .main-nav .title {
        overflow:hidden;
        width:auto;
        height:auto;
        /*padding: inherit;*/
        opacity:1;
        display:inline;
        position:static;
        background-color: transparent;
    }
    .skin-aside .main-nav a:hover .title,
    .skin-aside .main-nav .force-link:hover .title {
        background-color: transparent;
    }
    /**/
    .skin-aside .main-nav li[aria-expanded]:before {display: block;} /* turn on (hided icon in desktop collapsed view) on mobile menu view */

    /*page content*/
    .app-middle .main-content {
        --main-content-padding: 10px;
    }
    .app-middle .page-content {
        /* padding:15px; */
    }


    /* page actions and page index*/
    .main-content .page-index {}

    .page-index .screen-title-wrap {padding:0 15px;}

    /* cuts the breadcrumb text if no much space */
    .page-index .breadcrumb {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .page-index .breadcrumb > li {
        display: inline;
        line-height: 1.3;
    }

    .page-index .page-actions {
        text-align: right; /* there is a bug on mobile devices and webkit mobile when this properties is set to "right" */
        padding: 2px 5px 0 5px;
        margin-top: -2px; /* visual ofset when title on top is 1.2em */

        /* set actions below the breadcrumb and title bar */
        /* flex-basis: 100%;
        max-width: 100%;
        border-top: 1px solid rgba(0,0,0,0.1); */
    }
    .page-actions .main-action {padding-top:2px; padding-bottom:2px;}
    .page-actions .btn {padding-top:3px; padding-bottom:3px;}

    .main-content .page-index .screen-title-back {
        margin-right: -6px;
        margin-left: 0px;
    }

    /**/


    .screen-title h1 {font-size:1.2em; /*was 1.35em*/}
    /*.breadcrumb {font-size:18px;}*/

    /**/
    .user-prefix {display: none;}


    .ember-application .global-notifications {z-index: 800; bottom: 0; margin: 0;}

    /* animation intro*/
    html[class="home"] .logo-intro,
    html[class="home"] .skin-aside .logo-intro {margin-left:0;}

    /**/
    .sticked-pagination .pagination-wrap,
    .skin-aside.sticked-pagination .pagination-wrap {padding-left:0;}



    /* top-header-unit - user panel dropdown */
    .top-header-unit {
        padding-top: 0;
    }
    .top-header-unit .slide-panel-wrap {
        position:fixed;
        top:var(--app-header-height);
        bottom:0;
        right:0;
        text-align:left;
        float:none;
        width:100%;
        max-width: 260px;
        -webkit-transform:translate(99%,0);
        transform:translate(99%,0);
        opacity:0;
        /*height:0;*/
        overflow:hidden;
        /*max-height: calc(100dvh - 50px);*/
    }

    .top-header-unit.toggle .slide-panel-wrap {
        -webkit-transform:translate(0,0);
        transform:translate(0,0);
        opacity:1;
        height: auto;
        overflow-y: auto;
    }


    .top-header-unit .user-item {
        display:block;
        background-color:#D0D5D8;

    }
    .top-header-unit .user-item a,
    .top-header-unit .user-item span {
        font-size:1.1rem;
        text-align: left;
        padding-top:8px;
        padding-bottom:8px;
    }

    /* select region skin */
    .top-header-unit .custom-select-wrap {
        border: none;
        width: 100%;
        border-bottom:1px solid rgba(0, 0, 0, 0.1);
    }

    .top-header-unit .custom-select-wrap .caret {
        display: none;
    }
    .top-header-unit .custom-select-wrap select {
        width: 100%;
        height:auto;
        line-height:normal;
        padding:2px 16px;
    }

    /**/

    .top-header-unit .user-item .caret {padding:0;}

    .top-header-unit .user-trigger {
        display:inline-block;
        line-height:var(--app-header-height);
        padding:0 20px;
        font-size:1.5rem;
        cursor:pointer;
        margin-right:-20px;
    }
    /**/
    .top-header-unit .user-item:after,
    .top-header-unit .user-item .dropdown:after {
        content:"";
        display:block;
        clear:both;
        height:0;
    }
    .top-header-unit.user-panel .user .btn.dropdown-toggle {display: none;}
    .top-header-unit .user .dropdown-menu {
        display: block;
        padding:0;
        margin:0;
    }
    .top-header-unit .current-user {margin:0;}

    /* .top-header-unit .dropdown-menu li,
    .top-header-unit .langs .dropdown-toggle,
    .top-header-unit .currency .dropdown-toggle {
        border-bottom:1px solid rgba(0, 0, 0, 0.1);
    } */
    .top-header-unit .dropdown-menu a {}


    .top-header-unit .current-user {background-color:transparent;}

    .top-header-unit.user-panel .dropdown-menu,
    .top-header-unit.user-panel .dropdown {
        position: static;
        background-color:transparent;
        border:none;
        width:100%;
        box-shadow:none;
    }

    .top-header-unit.user-panel .dropdown,
    .top-header-unit.user-panel .btn.dropdown-toggle,
    .top-header-unit.user-panel .langs .ember-view,
    .top-header-unit.user-panel .currency .ember-view {
        display:block;
    }
    /* notification panel */
    .notification-panel .dropdown {
        position: static;
    }
    .notification-panel .dropdown-menu {
        width: 100%;
    }

    /**/
    .nav.nav-pills.sub-tabs.skin-pills-soft {
	    --skin-pills-soft-outer: 3px 4px;
        --skin-pills-soft-padding: 3px 6px;
        font-size: 0.8rem;
    }

}

/*specific MediaQueries*/

/* video frame force height */
@media only screen and (max-height:640px)
{
	.video-wrap {
		padding-bottom: 0;
		height: 80dvh; /* changes in mobile height media-queries */
	}
}
/* login form position */
@media only screen and (max-height:500px)
{
	.form-signin {
		padding:20px 0;
		top:0;
		-webkit-transform:translate(-50%,0);
		transform:translate(-50%,0);
	}
}


/* forgotten-pass form position */
@media only screen and (max-height:500px)
{
	.form-forgotten-pass {
		padding:20px 0;
		top:0;
		-webkit-transform:translate(-50%,0);
		transform:translate(-50%,0);
	}
}




.thumb {
   display: inline;
	margin-right: 16px;
}

.thumb img {
	width: 150px;
	min-width: 60px;
	height: auto;
	border: 1px solid rgba(0,0,0,0.1);
}

.swagger-ui .models{
  display: none !important;
}

.scheduler-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    font-family: Arial, sans-serif;
    margin: auto;
  }

  .scheduler-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    background-color: #f5f5f5;
    margin-left: 60px;
  }

  .scheduler-header-cell {
    padding: 10px;
    border: 1px solid #ddd;
  }

  .scheduler-main {
    display: grid;
    grid-template-columns: 60px 1fr;
  }

  .scheduler-hours-column {
    display: grid;
    grid-template-rows: repeat(12, 1fr);
  }

  .scheduler-hour-cell {
    text-align: center;
    border: 1px solid #ddd;
    font-size: 12px;
    padding: 10px 0; /* Slightly larger padding to represent 2-hour blocks */
  }

  .scheduler-days-columns {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .scheduler-day-column {
    position: relative;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background-color: #fafafa;
  }

  .scheduler-shift {
    position: absolute;
    left: 5%;
    right: 5%;
    background-color: var(--theme-identity-bgr);
    color: var(--theme-identity-bgr-txt);
    font-size: 12px;
    text-align: center;
    padding: 5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px dashed var(--theme-identity-bgr-txt);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    overflow: hidden;
  }
  .scheduler-shift-type {
    display: inline-block;
    max-width: 100%;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.22);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .scheduler-shift-name {
    font-weight: 600;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scheduler-shift-time {
    opacity: 0.9;
    font-size: 11px;
    line-height: 1.2;
  }
  .cs-shift-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 18px 0;
  }
  .cs-shift-chip {
    min-width: 130px;
    padding: 8px 16px;
    text-align: center;
    background-color: var(--theme-identity-bgr);
    color: var(--theme-identity-bgr-txt);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
  .cs-shift-chip__type {
    display: inline-block;
    max-width: 100%;
    padding: 1px 8px;
    margin-bottom: 4px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.22);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cs-shift-chip__name {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 2px;
  }
  .cs-shift-chip__time {
    font-size: 12px;
    opacity: 0.9;
  }
  .cs-section {
    margin-top: 6px;
  }
  .scheduler-shift:hover {
    transform: scale(1.03); /* Slight zoom-in on hover */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow effect */
  }

  .white-color {
    color: white;
}

  .large-ficon{
    font-size: 400%;
  }



.worktime-grid-wrap {
    position: relative;
    overflow: auto;
    max-height: 480px;
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    background: var(--pan-bgr);
    scrollbar-width: thin;
}
.worktime-grid {
    --wt-cols: 1;
    --wt-cell-min: 54px;
    --wt-gap: 2px;
    display: grid;
    grid-template-columns: minmax(92px, max-content) repeat(var(--wt-cols), minmax(var(--wt-cell-min), 1fr));
    grid-auto-rows: minmax(36px, auto);
    font-size: 11px;
    line-height: 1.2;
    color: var(--main-txt-color);
}
.worktime-grid > div {
    box-sizing: border-box;
    border: var(--wt-gap) solid var(--pan-bgr);
    background-clip: padding-box;
    min-width: 0;
}

.worktime-grid .wt-high,
.wt-legend .wt-high { --wt-fg: #2f8a2f; --wt-bg: rgba(66,152,66,0.14); }
.worktime-grid .wt-mid,
.wt-legend .wt-mid  { --wt-fg: #cf7520; --wt-bg: rgba(236,143,55,0.17); }
.worktime-grid .wt-low,
.wt-legend .wt-low  { --wt-fg: #c73f3b; --wt-bg: rgba(217,83,79,0.14); }
.worktime-grid .wt-none,
.wt-legend .wt-none { --wt-fg: var(--text-color-soft2); --wt-bg: var(--shade-of-dark05); }

html.theme-dark .worktime-grid .wt-high,
html:has(body.theme-dark) .worktime-grid .wt-high,
html.theme-dark .wt-legend .wt-high,
html:has(body.theme-dark) .wt-legend .wt-high { --wt-fg: #7fd37f; --wt-bg: rgba(66,152,66,0.30); }
html.theme-dark .worktime-grid .wt-mid,
html:has(body.theme-dark) .worktime-grid .wt-mid,
html.theme-dark .wt-legend .wt-mid,
html:has(body.theme-dark) .wt-legend .wt-mid { --wt-fg: #f6b46e; --wt-bg: rgba(236,143,55,0.28); }
html.theme-dark .worktime-grid .wt-low,
html:has(body.theme-dark) .worktime-grid .wt-low,
html.theme-dark .wt-legend .wt-low,
html:has(body.theme-dark) .wt-legend .wt-low { --wt-fg: #f3908d; --wt-bg: rgba(217,83,79,0.28); }
html.theme-dark .worktime-grid .wt-none,
html:has(body.theme-dark) .worktime-grid .wt-none,
html.theme-dark .wt-legend .wt-none,
html:has(body.theme-dark) .wt-legend .wt-none { --wt-bg: var(--shade-of-light05); }

.worktime-grid .wt-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 8px 4px 6px 4px;
    text-align: center;
    background-color: var(--pan-bgr);
    box-shadow: 0 1px 0 var(--border-color-light);
}
.worktime-grid .wt-head.wt-corner {
    left: 0;
    z-index: 4;
    align-items: flex-start;
    padding-left: 10px;
    box-shadow: 1px 1px 0 var(--border-color-light);
}
.worktime-grid .wt-head-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-color-soft);
}
.worktime-grid .wt-chip {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--main-action-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.3;
    white-space: nowrap;
}
.worktime-grid .wt-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    color: var(--text-color-soft);
}

.worktime-grid .wt-date {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 4px 10px;
    background-color: var(--pan-bgr);
    box-shadow: 1px 0 0 var(--border-color-light);
    white-space: nowrap;
}
.worktime-grid .wt-date-main {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.worktime-grid .wt-date.wt-weekend .wt-date-main {
    color: var(--wt-weekend, #cf7520);
}

.worktime-grid .wt-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 3px 7px 3px;
    border-radius: 7px;
    background-color: var(--wt-bg);
    color: var(--wt-fg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.worktime-grid .wt-cell::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 3px;
    height: 3px;
    border-radius: 2px;
    background: var(--shade-of-dark05);
}
.worktime-grid .wt-cell::before {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 3px;
    height: 3px;
    width: calc((100% - 8px) * var(--wt-fill, 0) / 100);
    border-radius: 2px;
    background: var(--wt-fg);
    z-index: 1;
    opacity: 0.9;
}
.worktime-grid .wt-cell.wt-none {
    font-weight: 400;
}
.worktime-grid .wt-cell.wt-none::before,
.worktime-grid .wt-cell.wt-none::after {
    display: none;
}
.worktime-grid .wt-cell:hover {
    box-shadow: inset 0 0 0 1px var(--wt-fg);
    z-index: 1;
}
.worktime-grid .wt-val {
    overflow: hidden;
    text-overflow: ellipsis;
}

.worktime-grid .wt-summary {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -1px 0 var(--border-color-light);
}
.worktime-grid .wt-date.wt-summary {
    z-index: 3;
    box-shadow: 1px -1px 0 var(--border-color-light);
}
.worktime-grid .wt-date.wt-summary .wt-date-main {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-color-soft);
}
.worktime-grid .wt-cell.wt-summary {
    border-radius: 0;
    font-weight: 700;
    background-color: var(--pan-bgr);
    background-image: linear-gradient(var(--wt-bg), var(--wt-bg));
}

.wt-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 8px;
    padding: 0 2px;
    font-size: 10.5px;
    color: var(--text-color-soft);
}
.wt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.wt-legend-item i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--wt-fg);
    box-shadow: 0 0 0 2px var(--wt-bg);
}
.wt-legend-note {
    margin-left: auto;
    white-space: nowrap;
}


/********************* dashboard widgets - drag & drop ********************/
.draggableDropzone {
    --dnd-accent: #52aeda;
    --dnd-accent-soft: rgba(82, 174, 218, 0.12);
}
.dash-unit-actions .drag-handle .ficon {
    cursor: grab;
}
.dash-unit-actions .drag-handle.armed .ficon,
body.dashboard-dragging .dash-unit-actions .drag-handle .ficon {
    cursor: grabbing;
    background-color: var(--dnd-accent-soft, rgba(82, 174, 218, 0.12));
    color: var(--dnd-accent, #52aeda);
}
body.dashboard-dragging,
body.dashboard-dragging * {
    cursor: grabbing !important;
}

/* the widget being moved */
.draggableItem.moving-widget {
    opacity: 0.4;
    filter: grayscale(0.6);
    transition: opacity 0.15s ease;
}
.draggableItem.moving-widget .panel-heading {
    cursor: grabbing;
}

/* columns become visible drop areas while dragging */
.widgetToExport {
    position: relative;
}
body.dashboard-dragging .draggableDropzone [widget-column] {
    position: relative;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}
body.dashboard-dragging .draggableDropzone [widget-column]:not(.widget-row-full):not(.widget-dropbar-target)[data-drop-label] {
    min-height: 90px;
}
body.dashboard-dragging .draggableDropzone [widget-column]:not(.widget-row-full):not(.widget-dropbar-target)[data-drop-label]::after {
    content: attr(data-drop-label);
    display: block;
    margin: 4px 0 16px 0;
    padding: 18px 10px;
    border: 2px dashed var(--border-color-light);
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text-color-soft2);
    pointer-events: none;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
body.dashboard-dragging .draggableDropzone [widget-column].drop-into {
    background-color: var(--dnd-accent-soft);
    box-shadow: 0 0 0 2px var(--dnd-accent) inset;
}
body.dashboard-dragging .draggableDropzone [widget-column].drop-into[data-drop-label]::after {
    border-color: var(--dnd-accent);
    color: var(--dnd-accent);
    background-color: var(--pan-bgr);
}

/* insertion line above / below the hovered widget */
.widgetToExport.drop-before::before,
.widgetToExport.drop-after::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 4px;
    border-radius: 2px;
    background: var(--dnd-accent, #52aeda);
    box-shadow: 0 0 0 3px var(--dnd-accent-soft, rgba(82, 174, 218, 0.12));
    pointer-events: none;
    z-index: 60;
}
.widgetToExport.drop-before::before {
    top: -10px;
}
.widgetToExport.drop-after::after {
    bottom: -10px;
}
/* widgets that are only a drop target shouldn't react to the pointer while dragging */
body.dashboard-dragging .draggableItem:not(.moving-widget) .panel-body {
    pointer-events: none;
}

/* touch devices: no native drag & drop -> move buttons instead of the drag handle */
.dash-unit-actions .widget-move-btns {
    display: none;
}
@media (hover: none) and (pointer: coarse) {
    .dash-unit-actions .widget-move-btns {
        display: contents;
    }
    .dash-unit-actions .drag-handle {
        display: none;
    }
}
/* short highlight on the widget after it has been moved (drag & drop or buttons) */
@keyframes widget-moved-pulse {
    0% {
        box-shadow: 0 0 0 3px var(--dnd-accent, #52aeda);
    }
    100% {
        box-shadow: 0 0 0 3px transparent;
    }
}
.draggableItem.widget-moved {
    animation: widget-moved-pulse 1.1s ease-out;
}
.dash-unit-actions .widget-control-btns {
    display: contents;
}
/* full-width target: overlay on the full-width "add widget" bar, so nothing shifts while dragging */
body.dashboard-dragging .draggableDropzone .widget-row-full-add[data-drop-label]::after {
    content: attr(data-drop-label);
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-color-light);
    border-radius: 8px;
    background-color: var(--pan-bgr);
    font-size: 12px;
    color: var(--text-color-soft2);
    pointer-events: none;
    z-index: 5;
    transition: border-color 0.15s ease, color 0.15s ease;
}
body.dashboard-dragging .draggableDropzone .widget-row-full-add.drop-into[data-drop-label]::after {
    border-color: var(--dnd-accent);
    color: var(--dnd-accent);
    background-color: var(--dnd-accent-soft);
}
/* floating drop bar: fixed to the top of the viewport while dragging, so every area
   (left column / full width / right column) is reachable without scrolling and nothing shifts */
.draggableDropzone .widget-dropbar {
    display: none;
}
body.dashboard-dragging .draggableDropzone .widget-dropbar {
    display: flex;
    gap: 8px;
    position: fixed;
    top: calc(var(--app-header-height, 35px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, calc(100vw - 32px));
    z-index: 1050;
}
body.dashboard-dragging .draggableDropzone .widget-dropbar-target {
    position: static;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    border: 2px dashed var(--dnd-accent, #52aeda);
    border-radius: 10px;
    background-color: var(--pan-bgr);
    color: var(--dnd-accent, #52aeda);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: background-color 0.15s ease, transform 0.15s ease;
}
body.dashboard-dragging .draggableDropzone .widget-dropbar-target::after {
    content: attr(data-drop-label);
}
body.dashboard-dragging .draggableDropzone .widget-dropbar-target[widget-column="0"]::before {
    content: "\2190"; /* left arrow */
}
body.dashboard-dragging .draggableDropzone .widget-dropbar-target[widget-column="1"]::after {
    content: attr(data-drop-label) " \2192"; /* right arrow */
}
body.dashboard-dragging .draggableDropzone .widget-dropbar-target.widget-dropbar-full {
    flex: 1.4 1 0;
}
body.dashboard-dragging .draggableDropzone .widget-dropbar-target.drop-into {
    background-color: var(--dnd-accent-soft, rgba(82, 174, 218, 0.12));
    border-style: solid;
    transform: scale(1.03);
}