/*
 * Cascade Styles for Control Panel redesign 2025
 *
 * Developed by Igor Mino <igor@platon.sk>
 * Copyright (c) 2025 Platon Technologies, s.r.o.
 * All rights reserved.
 *
 * Changelog:
 * 2025-02-22 - created
 * 2025-03-13 - second modifications
 */

/* $Id: style-2025.css 47753 2026-09-21 07:57:51Z nepto $ */

/*
 * 01 - FONTS
 * 02 - COLORS
 * 10 - GENERAL
 * 11 - LAYOUT
 * 15 - LOGIN PAGE
 * 20 - ICONS
 * 30 - BUTTONS
 * 35 - LABELS
 * 40 - LOG MESSAGES
 * 45 - REPORTS
 * 46 - DISK USSAGE
 * 47 - CART
 * 48 - PAYMENT
 * 50 - JS TOOLS
 * 80 - SPECIALS
 * 90 - LAST CLASS
 * 98 - REWRITE OLD STYLES
 * 99 - RESPONSIVE
 * XX - DEBUG
 */

/* ----------------------------------------------------
   01 - FONTS
   */
@font-face {
	font-family: "RobotoRegular";
	src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
	font-family: "RobotoThin";
	src: url(../fonts/Roboto-Thin.ttf);
}

@font-face {
	font-family: "RobotoBold";
	src: url(../fonts/Roboto-Bold.ttf);
}

@font-face {
	font-family: "RobotoItalic";
	src: url(../fonts/Roboto-Italic.ttf);
}

@font-face {
	font-family: "RobotoBoldItalic";
	src: url(../fonts/Roboto-BoldItalic.ttf);
}

/* ----------------------------------------------------
   02 - COLORS
   */
:root {
	/* default general */
	--font-regular: "RobotoRegular", sans-serif;
	--font-thin: "RobotoThin", sans-serif;
	--font-bold: "RobotoBold", sans-serif;
	--font-italic: "RobotoItalic", sans-serif;
	--font-bolditalic: "RobotoBoldItalic", sans-serif;
	--font-awesome: "Font Awesome 5 Free";
	--font-size: 14px;
	--font-size-big: 24px;
	--header-height: 60px;
	--footer-height: 40px;
	/* old colors 2011 */
	--color-bg: #30455a;
	--color-bg0: #3d5770;
	--color-bg1: #49657e;
	--color-bg2: #617b92;
	--color-bg3: #4e6d89;
	--color-bg4: #44607a;
	--color-bgRed: #685d75;
	--color-bgRedStrong: #c24545;
	--color-bgOrange: #FF9900;
	--color-bgGreen: #47a752;
	--color-bgBlueDark: #455869;
	--color-bgGrey: #525C66;
	--color-bgYellow: #888855;
	--color-bgWhite: #eee;
	--color-text: #fff;
	--color-text1: #a4b3c0;
	--color-text2: #fff;
	--color-text3: #a4b3c0;
	--color-text-green: #00FF00;
	--color-text-red: #FFAAAA;
	--color-text-orange: #FF7700;
	--color-text-blue: #AAAAFF;
	--color-text-yellow: #FFFF00;
	--color-text-grey: #a4b3c0;
	--color-border: #5D7993;
}
.theme-dark {
	/* backgrounds */
	--color-bg: #18232e;
	--color-bg0: #202e3c;
	--color-bg1: #304354;
	--color-bg2: #3e4f5e;
	--color-bg3: #2b3c4a;
	--color-bg4: #29343d;
	--color-bgRed: #7b3d3d;
	--color-bgRedStrong: #c24545;
	--color-bgOrange: #FF9900;
	--color-bgGreen: #47a752;
	--color-bgBlueDark: #455869;
	--color-bgGrey: #525C66;
	--color-bgYellow: #888803;
	--color-bgWhite: #4b5d6c;
	/* highlight */
	--color-hlYellow: #888803;
	/* texts */
	--color-text: #ffffff;
	--color-text1: #a4b3c0;
	--color-text2: #ffffff;
	--color-text3: #a4b3c0;
	--color-text-placeholder: #486e8e;
	--color-text-green: #00FF00;
	--color-text-red: #FFAAAA;
	--color-text-orange: #FF7700;
	--color-text-blue: #AAAAFF;
	--color-text-yellow: #FFFF00;
	--color-text-grey: #61686f;
	--color-border: #5D7993;
	/* buttons in contect */
	--color-button-text: #89BCEA;
	--color-button-text-hover: #0c8e92;
	--color-button-bg: transparent;
	--color-button-bg-hover: #3E4F5E;
	--color-button-text-disabled: #6b6b6b;
	--color-element-disabled: #111111;
	--color-text-default: #0a5ca6;
	/* buttons in table header */
	--color-button-text1: #ffffff;
	--color-button-text1-hover: #0c8e92;
	--color-button-bg1: #3E4F5E;
	--color-button-bg1-hover: #e8eef9;
	/* table rows */
	--filter-hover: brightness(1.20);
	/* graphs & diagrams */
	--color-graph-border: #3A8DDE;
	--color-graph-background: #0A3E75;
}
.theme-light {
	/* backgrounds */
	--color-bg: #c9d8ef;
	--color-bg0: #0d5eaf;
	--color-bg1: #0c8e92;
	--color-bg2: #356aba;
	--color-bg3: #e8eef9;
	--color-bg4: #f3f7fd;
	--color-bgRed: #f7baba;
	--color-bgRedStrong: #c24545;
	--color-bgOrange: #FF9900;
	--color-bgGreen: #47a752;
	--color-bgBlueDark: #455869;
	--color-bgGrey: #525C66;
	--color-bgYellow: #888803;
	--color-bgWhite: #bad0dd;
	/* highlight */
	--color-hlYellow: #EEEE9B;
	/* texts */
	--color-text: #ffffff;
	--color-text1: #a4b3c0;
	--color-text2: #000000;
	--color-text3: #444444; /* #444444 */
	--color-text-placeholder: #4b7fac;
	--color-text-green: #1fb31f;
	--color-text-red: #e72222;
	--color-text-orange: #FF7700;
	--color-text-blue: #0d5eaf;
	--color-text-yellow: #F59E0B;
	--color-text-grey: #AFB0B3;
	--color-border: #5D7993;
	/* buttons in contect */
	--color-button-text: #0d5eaf;
	--color-button-text-hover: #0c8e92;
	--color-button-bg: transparent;
	--color-button-bg-hover: #e8eef9;
	--color-button-text-disabled: #666666;
	--color-element-disabled: #cccccc;
	--color-text-default: #0a5ca6;
	/* buttons in table header */
	--color-button-text1: #ffffff;
	--color-button-text1-hover: #0c8e92;
	--color-button-bg1: #356aba;
	--color-button-bg1-hover: #e8eef9;
	/* table rows */
	--filter-hover: brightness(0.90);
	/* graphs & diagrams */
	--color-graph-border: #0D5EAF;
	--color-graph-background: #E6F1FB;
}

/* ----------------------------------------------------
   10 - GENERAL
   */
html,
body {
	font-family: var(--font-regular);
	font-size: var(--font-size);
	color: var(--color-text2);
	background-color: var(--color-bg3);
	margin: 0;
	padding: 0;
}

a,
a:visited,
a:focus-visible,
.as-link {
	color: var(--color-text);
	text-decoration: underline;
	border: none;
	outline: none;
}
a:hover,
.as-link:hover {
	color: var(--color-text1);
	text-decoration: none;
}
p {
	margin: 10px 0 0 0;
}
ul {
	list-style: none;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.tt,
small.tt,
span.tt,
a.tt {
	font-family: monospace;
}
td.tt,
pre.tt {
	font-family: "Courier New", monospace, sans-serif;
	font-size: inherit;
}
.nowrap,
[nowrap="nowrap"] {
	white-space: nowrap;
}
.nowrap *,
[nowrap="nowrap"] * {
	display: inline-block;
}
.wrap-all {
	word-break: break-all;
}
.long-token {
	width: 60%;
	max-width: 0;
	white-space: nowrap;
}
.long-token-content {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	min-width: 0;
}
.long-token-value {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	line-height: 200%;
}
.one-time-token {
	width: 60%;
	max-width: 0;
	white-space: nowrap;
}
.one-time-token-content {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	min-width: 0;
}
.one-time-token-value {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	line-height: 200%;
}
.one-time-token-content > .icon-text-onclick {
	flex: 0 0 auto;
}
.left {
	text-align: left !important;
}
.fleft,
.floatLeft {
	float: left !important;
}
.right,
.cellright {
	text-align: right !important;
}
.fright,
.floatRight {
	float: right !important;
}
.center {
	text-align: center !important;
}
.breaker {
	clear: both;
}
.change {
	width: 1%;
	white-space: nowrap;
}
.pointer {
	cursor: pointer;
}
.nomargin {
	margin: 0px !important;
}
.bold {
	font-weight: bold;
}
.grey {
	color: #AFB0B3 !important;
}

/* Override table cell color for grey elements */
table.horiz td.grey,
table.horiz td.grey *,
table.listTable td.grey,
table.listTable td.grey *,
table.listTable2 td.grey,
table.listTable2 td.grey *,
table.listTable3 td.grey,
table.listTable3 td.grey * {
    color: var(--color-text-grey) !important;
}

/* Double scrollbar for wide content */
.double-scroll {
    width: 100%;
    overflow-x: auto;
    margin: 0 !important;
    padding: 0 !important;
}
.double-scroll-top {
    height: 20px;
    overflow-x: auto;
}
.double-scroll-content {
    overflow-y: hidden;
    overflow-x: scroll;
    margin: 0 !important;
    padding: 0 !important;
}
.double-scroll-content pre {
    margin: 0 !important;
    padding: 0 !important;
}
[class^="PlatonFont-"],
[class*=" PlatonFont-"] {
	font-size: 14px;
}
.icon-text-onclick [class^="PlatonFont-"],
.icon-text-onclick [class*=" PlatonFont-"] {
	top: 2px;
	display: inline-block;
	position: relative;
}
.button-upload {
	text-align: right;
}
.topSpace,
.topspace,
.top-space {
	margin-top: 10px;
}
.bottomSpace,
.bottomspace,
.bottom-space {
	margin-bottom: 10px;
}
/* ----------------------------------------------------
   11 - LAYOUT
   */
#layout {
	display: flex;
	flex-direction: row;
	min-height: 100vh;
	/* width: 100vw; */
}
#menu-primary {
	background-color: var(--color-bg0);
	color: var(--color-text);
	width: 140px;
	min-width: 140px;
	display: flex;
	flex-direction: column;
}
#menu-primary .menu-logo {
	height: var(--header-height);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* border: 1px green solid; */
}
.env-label,
#menu-primary .menu-logo .env-label {  /* special label for enviroment - visible in development */
	color: white;
	font-size: 12px;
	/* font-weight: bold; */
	font-family: var(--font-bold);
	background-color: red;
	text-align: center;
}
#menu-primary .menu-item {
	/* border: 1px red solid; */
	border-right: 10px var(--color-bg0) solid;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s;
}
#menu-primary .menu-item:hover {
	border-right: 10px var(--color-bg2) solid;
	color: var(--color-text1);
}
#menu-primary .menu-item .icon {
	transition: all 0.3s;
}
.ui-simple #menu-primary .menu-item:hover .icon {
	zoom: 150%;
}
#menu-primary .menu-item img {
	height: 25px;
}
.ui-simple #menu-primary .menu-item .text {
	display: none;
}
.ui-simple #menu-primary .menu-item:hover .text,
.ui-simple #menu-primary .menu-selected .text {
	display: block
}
.ui-simple #menu-primary .menu-item:hover + .menu-item .icon {
	/* border: 1px yellow solid; */
	zoom: 120%;
}
#menu-primary .menu-selected {
	border-right: 10px var(--color-bg2) solid;
	background-color: var(--color-bg1);
}
#menu-secondary {
	/* border-right: 1px var(--color-bg1) solid; */
	/* border: 1px red solid; */
	background-color: var(--color-bg2);
	color: var(--color-text);
	width: 250px;
	min-width: 250px;
	display: flex;
	flex-direction: column;
	box-shadow: 1px 0 20px rgba(0, 0, 0, 0.1);
}
#menu-secondary a,
#menu-secondary a:visited,
#menu-secondary a:hover {
	text-decoration: none;
}
#menu-secondary .menu-title {
	/* border: 1px magenta solid; */
	height: var(--header-height);
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	padding-left: 20px;
	font-size: 20px;
	font-family: "RobotoBold";
	border-bottom: 1px var(--color-bg1) solid;
}
#menu-secondary .menu-item {
	display: flex;
	flex-direction: row;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 20px;
	cursor: pointer;
	color: var(--color-text);
	transition: all 0.3s;
	/* border: 1px red solid; */
}
#menu-secondary .menu-item:hover,
#menu-secondary .menu-selected {
	border-right: 10px var(--color-bg3) solid;
	color: var(--color-text1);
}
#menu-secondary .menu-selected {
	background-color: var(--color-bg1);
	color: var(--color-text);
}
#menu-secondary .menu-item .icon,
#menu-secondary .menu-item .icon i {
	font-size: 16px;
	width: 20px;
}
#menu-secondary .menu-item .icon img {
	height: 20px;
	opacity: 1;
	transition: all 0.3s;
}
#menu-secondary .menu-item:hover .icon img,
#menu-secondary .menu-selected .icon img {
	opacity: 0.5;
}
#menu-secondary .menu-item .text {
	padding-left: 10px;
}
#menu-secondary .menu-delimiter {
	border-bottom: 1px var(--color-bg) dotted;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
	text-align: left;
	margin-top: 20px;
}
#menu-secondary .menu-delimiter span {
	position: relative;
	top: 7px;
	background-color: var(--color-bg2);
	padding-right: 3px;
	color: var(--color-text1);
}
#menu-secondary .menu-item-space {
	margin-top: 30px;
}
#menu-secondary .space {
	/* border: 1px magenta solid; */
	flex-grow: 2;
}
#menu-secondary .record-info {
	/* border: 1px red solid; */
	display: flex;
	flex-direction: column;
	padding-left: 20px;
}
#menu-secondary .actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#menu-secondary .record-info i {
	width: 26px;
	display: inline-block;
}
#menu-secondary .record-info .changed-logs .changed-log {
	margin-bottom: 20px;
}
#menu-secondary .record-info2 {
	cursor: default;
}
#menu-secondary .record-info2:hover {
	background: none;
	color: inherit;
	border-right: none;
}
#menu-secondary .hide {
	display: none;
}
#menu-secondary .menu-collapse-icon-left,
#menu-secondary .menu-collapse-icon-right {
	font-size: 16px; /* like as menu-item icon */
}
#menu-secondary .menu-collapse-icon-right {
	display: none;
}
#menu-secondary.collapsed .menu-collapse-icon-right {
	display: block;
}
#menu-secondary.collapsed .menu-collapse-icon-left {
	display: none;
}
#menu-secondary.collapsed {
	width: 60px;
	min-width: 60px;
}
#menu-secondary.collapsed .menu-title .menu-title-text,
#menu-secondary.collapsed .menu-item .text,
#menu-secondary.collapsed .menu-delimiter,
#menu-secondary.collapsed .record-info {
	display: none;
}
#menu-secondary.collapsed .menu-item:hover {
	position: relative;
	background-color: var(--color-bg2);
	display: block;
	white-space: nowrap;
	width: 250px;
	z-index: 10;
	border-right: none;
	box-shadow: 5px 0 10px rgba(0, 0, 0, 0.6);
	transition: all 0.3s;
}
#menu-secondary.collapsed .menu-item.menu-selected:hover {
	background-color: var(--color-bg1);
}
#menu-secondary.collapsed .menu-item:hover .icon,
#menu-secondary.collapsed .menu-item:hover .text {
	display: inline-block;
}
#menu-secondary.collapsed .menu-item:hover .text {
	color: var(--color-text);
}

#menu-secondary .icon-text-onclick,
#menu-secondary .icon-text-onclick:visited {
	color: var(--color-button-text);
	transition: all 0.5s;
	background: var(--color-bg3);
	border: 1px var(--color-bg0) solid;
	border-radius: 5px;
	padding: 5px 10px;
	white-space: nowrap;
	display: inline-block;
	text-decoration: none;
}
#menu-secondary .icon-text-onclick .text-icon-onclick-title,
#menu-secondary .icon-text-onclick .text-icon-link-text {
	padding-right: 5px;
}
#menu-secondary .icon-text-onclick:hover {
	background-color: var(--color-bg1);
	border: 1px var(--color-text) solid;
	color: var(--color-text	);
}
#menu-secondary .icon-text-onclick:hover i {
	color: var(--color-text	);
}

#workspace {
	/* border: 1px red solid; */
	display: flex;
	flex-direction: column;
	width: calc(100vw - 140px - 250px);
}
#layout:has(.collapsed) #workspace {
	width: calc(100vw - 140px - 60px);
}
#workspace .header {
	height: var(--header-height);
	display: flex;
	justify-content: space-between;
	border-bottom: 1px var(--color-bg1) solid;
	background-color: var(--color-bg2);
	box-shadow: 20px 1px 20px rgba(0, 0, 0, 0.1);
	padding-left: 20px;
	padding-right: 20px;
	color: var(--color-text);
	z-index: 2;
}
#workspace .header a.header-item {
	text-decoration: none;
}
#workspace .header a.header-item:hover {
	text-decoration: underline;
}
#workspace .header .header-item {
	/* border: 1px red solid; */
	display: flex;
	flex-direction: row;
	line-height: var(--header-height);
	padding: 0px 10px;
}
#workspace .header .header-item .icon img {
	height: 16px;
	position: relative;
	top: 2px;
}
#workspace .header .header-item .text {
	padding-left: 10px;
}
#workspace .header .header-item .header-popup {
	position: absolute;
	top: var(--header-height);
	max-height: 0px;
	background-color: var(--color-bg2);
	border-radius: 0px 0px 5px 5px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	line-height: normal;
	transition: all 0.5s;
	margin-left: -10px;
	z-index: 10;
}
#workspace .header .header-item .header-popup ul {
	padding: 5px;
}
#workspace .header .header-item .header-popup li {
	line-height: normal;
	padding: 5px 10px;
	margin-left: 10px;
}
#workspace .header .header-item .header-popup li i {
	font-size: 12px;
	width: 20px;
	display: inline-block;
}
#workspace .header .header-item .header-popup li::marker {
	font-family: var(--font-awesome);
	content: "\f04b";
	font-weight: 900;
	font-size: 10px;
}
#workspace .header .header-item .header-popup ul.clear li {
	margin-left: 0px;
}
#workspace .header .header-item .header-popup ul.clear li::marker {
	content: "";
}
#workspace .header .header-item:hover:has(.header-popup) {
	background-color: var(--color-bg1);
}
#workspace .header .header-item:hover .header-popup,
#workspace .header .header-item .header-popup:hover {
	max-height: 500px;
}
#workspace .header .lang {
	text-decoration: none;
}
#workspace .header .header-langs,
#workspace .header .header-langs .lang {
	display: flex;
	flex-direction: row;
	text-decoration: none;
	/* border: 1px blue solid; */
}
#workspace .header .header-langs .lang:hover {
	text-decoration: underline;
}
#workspace .header .header-langs .text {
	padding-right: 20px;
	/* border: 1px lime solid; */
}
#main_menu_action {
	cursor: pointer;
	background-color: var(--color-bg0);
	padding: 0px 10px;
}
#workspace .whisperer {
	background-color: var(--color-bg);
	padding: 20px;
	color: var(--color-text2);
}
#workspace .whisperer li {
	margin-bottom: 10px;
	list-style-type: none;
}
#workspace .whisperer li i {
	display: inline-block;
	width: 20px;
}
#workspace .whisperer a,
#workspace .whisperer a:visited {
	color: var(--color-text2);
    text-decoration: none;
}
#workspace .whisperer a:hover {
	color: var(--color-text3);
    text-decoration: none;
}
#workspace .content {
	/* border: 1px yellow solid; */
	padding: 20px;
	/* min-height: calc(100vh - var(--header-height) - var(--footer-height)); */
	flex-grow: 2;
}
#workspace .content a,
#workspace .content a:visited,
#workspace .content .as-link {
	color: var(--color-text2);
	text-decoration: underline;
}
#workspace .content a:hover,
#workspace .content .as-link:hover {
	color: var(--color-text3);
	text-decoration: none;
}
#workspace .content .ck-content a,
#workspace .content .ck-content a:visited {
	color: #1777BB;
	text-decoration: none;
}
#workspace .content .ck-content table tr,
#workspace .content .ck-content table.horiz tr,
#workspace .content .ck-content table.listTable tr,
#workspace .content .ck-content table.listTable2 tr,
#workspace .content .ck-content table.listTable3 tr {
	background-color: transparent;
}

.icon-text-onclick,
.icon-text-onclick:visited,
#workspace .content a .fa-solid,
#workspace .content a .fa-regular,
#workspace .content a:visited .fa-solid,
#workspace .content a:visited .fa-regular,
#workspace .content .icon-text-onclick,
#workspace .content .icon-text-onclick:visited,
.ui-widget-content .icon-text-onclick,
.ui-widget-content .icon-text-onclick:visited {
	font-size: var(--font-size);
	color: var(--color-button-text);
	transition: all 0.5s;
}
/*#workspace .content .floatRight .icon-text-onclick .fa-solid,
#workspace .content .floatRight .icon-text-onclick .fa-regular {
	color: var(--color-button-text1);
}*/
.icon-text-onclick,
a.icon-text-onclick,
a.icon-text-onclick:visited,
#workspace .content .icon-text-onclick {
	background: transparent;
	border: 1px var(--color-button-text) solid;
	border-radius: 5px;
	padding: 5px 10px;
	white-space: nowrap;
	display: inline-block;
	text-decoration: none;
	font-weight: normal;
}
#workspace .content a.icon-link,
#workspace .content a.icon-link:visited {
	text-decoration: none;
}
.icon-text-onclick .text-icon-onclick-title,
.icon-text-onclick .text-icon-link-text,
#workspace .content .icon-text-onclick .text-icon-onclick-title,
#workspace .content .icon-text-onclick .text-icon-link-text {
	padding-right: 5px;
}
.icon-text-onclick:hover,
#workspace .content .icon-text-onclick:hover {
	background-color: var(--color-button-bg-hover);
	border: 1px var(--color-button-text-hover) solid;
}
#workspace .content table tr td:has(.icon-text-onclick) {
	padding: 2px 10px;
}
#workspace .content table.tabsRows tr td:has(.icon-text-onclick) {
	padding: 2px;
}
.icon-text-onclick:hover,
.icon-text-onclick:hover i,
#workspace .content a:hover .fa-solid,
#workspace .content a:hover .fa-regular,
#workspace .content .icon-text-onclick:hover,
#workspace .content .icon-text-onclick:hover i {
	color: var(--color-button-text-hover);
	transition: all 0.5s;
}
#workspace .content th .fa-solid,
#workspace .content th .fa-solid:visited,
#workspace .content th .fa-solid:link,
#workspace .content th .fa-solid::before,
#workspace .content th .fa-regular,
#workspace .content th .fa-regular:visited,
#workspace .content th .fa-regular:link,
#workspace .content th .fa-regular::before,
#workspace .content th .icon-text-onclick,
#workspace .content th .icon-text-onclick:visited,
#workspace .content th .icon-text-onclick:link /*,
#workspace .content .floatRight .icon-text-onclick,
#workspace .content .floatRight .icon-text-onclick:visited,
#workspace .content .floatRight .icon-text-onclick:link */
{
	color: var(--color-button-text1);
	transition: all 0.5s;
}
#workspace .content th .icon-text-onclick /*,
#workspace .content .floatRight .icon-text-onclick */ {
	border: 1px var(--color-button-text1) solid;
	background-color: var(--color-button-bg1);
	font-family: var(--font-regular);
	padding: 2px 5px;
}
#workspace .content th:has(.icon-text-onclick) {
	padding: 7px 10px;
}
#dashboardContent table.listTable th {
	padding: 7px 10px;
	vertical-align: middle;
}
#workspace .content .tabs2-actions-right .icon-text-onclick {
	background-color: var(--color-button-bg);
	padding: 2px 5px;
}
.narrow,
#workspace .content .narrow {
	padding: 2px 5px;
}
.tabs2 .tabs2-actions-right > :nth-child(n) {
	display: inline-block;
	margin-top: 5px;
}
#workspace .content th .fa-solid:hover,
#workspace .content th .fa-solid:hover::before,
#workspace .content th .fa-regular:hover,
#workspace .content th .fa-regular:hover::before,
#workspace .content th .icon-text-onclick:hover,
#workspace .content th .icon-text-onclick:hover .fa-solid,
#workspace .content th .icon-text-onclick:hover .fa-solid::before,
#workspace .content th .icon-text-onclick:hover .fa-regular,
#workspace .content th .icon-text-onclick:hover .fa-regular::before /*,
#workspace .content .floatRight .icon-text-onclick:hover,
#workspace .content .floatRight .icon-text-onclick:hover .fa-solid,
#workspace .content .floatRight .icon-text-onclick:hover .fa-solid::before,
#workspace .content .floatRight .icon-text-onclick:hover .fa-regular,
#workspace .content .floatRight .icon-text-onclick:hover .fa-regular::before */ {
	color: var(--color-button-text-hover);
}
#workspace .content th .icon-text-onclick:hover /*,
#workspace .content .floatRight .icon-text-onclick:hover */ {
	border: 1px var(--color-button-text-hover) solid;
	background-color: var(--color-button-bg1-hover);
}
#workspace .content table.actions tr td {
	padding-top: 10px;
}
#workspace .content table.actions tr:last-child td {
	padding-bottom: 10px;
}
.icon-text-link-text,
#workspace .content .icon-text-link-text {
	padding-left: 5px;
	font-family: var(--font-regular);
	font-size: var(--font-size);
	font-weight: normal;
}
#workspace .content .icon-disabled,
#workspace .content .button-disabled,
#workspace .content .icon-disabled i,
#workspace .content .button-disabled i {
	color: var(--color-button-text-disabled);
	border-color: var(--color-button-text-disabled);
	cursor: default;
	opacity: 0.5;
}
#workspace .content .icon-disabled:hover,
#workspace .content .button-disabled:hover {
	border-color: var(--color-button-text-disabled);
	background-color: var(--color-button-bg);
	cursor: default;
}
#workspace .content .icon-disabled:hover,
#workspace .content .button-disabled:hover,
#workspace .content .icon-disabled:hover .fa-solid,
#workspace .content .icon-disabled:hover .fa-regular,
#workspace .content .button-disabled:hover .fa-solid,
#workspace .content .button-disabled:hover .fa-regular {
	color: var(--color-button-text-disabled);
}
.topspace {
	margin-top: 5px;
}
#workspace .footer {
	height: var(--footer-height);
	text-align: right;
	padding-top: 10px;
	padding-right: 20px;
	/* font-size: 10px; */
	color: var(--color-text2);
	border-top: 1px var(--color-bg1) solid;
	/* border: 1px magenta solid; */
}
#workspace .footer a,
#workspace .footer a:visited {
	color: var(--color-text2);
	text-decoration: underline;
}
#workspace .footer a:hover {
	color: var(--color-text3);
	text-decoration: none;
}

#internal-note,
#userhelp {
	background-color: var(--color-bg);
	color: var(--color-text2);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0px 10px 10px 10px;
	width: 400px;
	min-width: 400px;
	z-index: 2;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
#internal-note .header,
#userhelp .header {
	border-bottom: 1px var(--color-bg1) dotted;
	height: var(--header-height);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
}
#internal-note .header h2 {
	border-bottom: 1px var(--color-bg1) dotted;
	height: var(--header-height);
	line-height: var(--header-height);
	margin: 0px;
	padding: 0px;
}
#internal-note .techinfo {
	border-top: 1px var(--color-bg1) dotted;
	padding-top: 10px;
}
#internal-note .actions {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
}
#internal-note .content-view ul,
#internal-note .content-view ol {
	margin-left: 20px;
	padding-left: 0px;
}
#internal-note .content-view ul li {
	list-style-type: disc;
}
#internal-note .content-view ol li {
	margin: 0px;
	padding: 0px;
}
#internal-note .content-view img {
	max-width: 100%;
	height: auto;
}
#internal-note .content-view a,
#internal-note .content-view a:visited {
	color: var(--color-text2);
	text-decoration: underline;
}
#internal-note .content-view a:hover {
	color: var(--color-text3);
	text-decoration: none;
}
#internal-note .content-view tt {
	background-color: var(--color-bg2);
	color: var(--color-text);
	padding: 0px 5px;
	border-radius: 2px;
}
#internal-note .content-view pre {
	overflow: scroll;
}
#internal-note .content-view p {
	margin: 0px;
}
#internal-note .ck-content {
	min-height: 400px;
}

/* ----------------------------------------------------
   15 - LOGIN PAGE
   */
#login-header {
	height: var(--header-height);
	display: flex;
	justify-content: space-between;
	border-bottom: 1px var(--color-bg1) solid;
	background-color: var(--color-bg2);
	box-shadow: 20px 1px 20px rgba(0, 0, 0, 0.1);
	padding-left: 20px;
	padding-right: 20px;
	color: var(--color-text);
	z-index: 2;
}
#login-header a.header-item {
	text-decoration: none;
}
#login-header a.header-item:hover {
	text-decoration: underline;
}
#login-header .header-item {
	/* border: 1px red solid; */
	display: flex;
	flex-direction: row;
	line-height: var(--header-height);
	padding: 0px 10px;
}
#login-header .header-item .icon img {
	height: 16px;
	position: relative;
	top: 2px;
}
#login-header .header-item .text {
	padding-left: 10px;
}
#login-header .header-item .header-popup {
	position: absolute;
	top: var(--header-height);
	max-height: 0px;
	background-color: var(--color-bg2);
	border-radius: 0px 0px 5px 5px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	line-height: normal;
	transition: all 0.5s;
	margin-left: -10px;
	z-index: 10;
}
#login-header .header-item .header-popup ul {
	padding: 5px;
}
#login-header .header-item .header-popup li {
	line-height: normal;
	padding: 5px 10px;
	margin-left: 10px;
}
#login-header .header-item .header-popup li i {
	/* font-size: 12px; */
	font-family: var(--font-regular);
	font-size: var(--font-size);
	width: 20px;
	display: inline-block;
}
#login-header .header-item .header-popup li::marker {
	font-family: var(--font-awesome);
	content: "\f04b";
	font-weight: 900;
	font-size: 10px;
}
#login-header .header-item .header-popup ul.clear li {
	margin-left: 0px;
}
#login-header .header-item .header-popup ul.clear li::marker {
	content: "";
}
#login-header .header-item:hover:has(.header-popup) {
	background-color: var(--color-bg1);
}
#login-header .header-item:hover .header-popup,
#login-header .header-item .header-popup:hover {
	max-height: 500px;
}
#login-header .lang {
	text-decoration: none;
}
#login-header .header-langs,
#login-header .header-langs .lang {
	display: flex;
	flex-direction: row;
	text-decoration: none;
	/* border: 1px blue solid; */
}
#login-header .header-langs .lang:hover {
	text-decoration: underline;
}
#login-header .header-langs .text {
	padding-right: 20px;
	/* border: 1px lime solid; */
}
#login-logo {
	display: flex;
	flex-direction: row;
	background-color: var(--color-bg0);
	justify-content: center;
	align-items: center;
	gap: 40px;
	color: var(--color-text);
	padding: 20px 0px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
#login-logo h1,
#login-logo h2 {
	color: var(--color-text);
	text-transform: uppercase;
}
#login-logo .label {
	border-left: 2px var(--color-text) solid;
	padding-left: 20px;
}
#login-form,
#lost_password {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 40px auto;
	max-width: 500px;
	background-color: var(--color-bg4);
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	padding: 30px;
	z-index: 2;
	position: relative; /* aby fungoval z-index aby mohol byt platon-bg-shape pod formularom*/
}
#lost_password {
	text-align: justify;
	justify-content: left;
	align-items: start;

}
#login-form .login-field {
	position: relative;
	font-family: sans-serif;
	margin: 20px 0;
}
#login-form input {
	padding: 10px;
	width: calc(100% - 30px); /* space for passowrd-view button*/
	border-radius: 5px;
	box-sizing: border-box;
	border: 1px solid var(--color-bg1);
	background-color: var(--color-bg);
	color: var(--color-text2);
	/* font-size: 14px; */
	font-family: var(--font-regular);
	font-size: var(--font-size);
	transition: all 0.3s ease;
}
#login-form input:focus {
	border-color: var(--color-bg2);
	outline: none;
	box-shadow: 0 0 5px rgba(97, 123, 146, 0.5);
}
.group {
	position: relative;
}
th.group label {
	color: var(--color-text3);
	margin-left: 5px;
}
#login-form label,
.group label {
	position: absolute;
	left: 10px;
	top: 12px;
	transition: all 0.2s ease;
	pointer-events: none;
}
#login-form input:focus ~ label,
#login-form input:valid ~ label,
#login-form input:not(:placeholder-shown) ~ label,
#login-form input:-webkit-autofill ~ label,
.group input:focus ~ label,
.group input:valid ~ label,
.group input:not(:placeholder-shown) ~ label,
.group input:-webkit-autofill ~ label {
	top: -20px;
	font-size: 12px;
	color: var(--color-text2);
}
#login-form .login-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-left: 30px; /* mirror space left for password-view button on right */
}
#login-form .login-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 5px;
}
#login-form .login-label {
	flex: 0 0 150px;
	font-family: var(--font-bold);
	color: var(--color-text2);
	line-height: 14px;
}
#login-form .login-input {
	flex: 1;
}
#login-form .login-spacer {
	height: 15px;
}
#login-form .login-button {
	text-align: center;
}
#login-form .login-links {
	margin-top: 15px;
	text-align: center;
}
/* #login-form a, */
#login-form a:not(.icon-text-onclick),
#lost_password a:not(.icon-text-onclick) {
	color: var(--color-text2);
	text-decoration: underline;
	transition: all 0.3s ease;
}
#login-form a:hover,
#lost_password a:hover {
	color: var(--color-text3);
	text-decoration: none;
}
#login-form .password-view-button {
	position: relative;
	left: -30px;
}
#messageBox {
	width: 100%;
	padding-left: 0px;
	padding-bottom: 20px;
	height: auto;
  	margin: 0px;
}
#login-form #messageBox {
	padding-top: 20px;
}
.platon-bg-shape {
	/* border: 1px red solid; */
	position: fixed;
	width: 50vw;
	height: calc(100vh - 200px); /* minus 200px pre header, aby fungovalo hover akcie*/
	right: -5px;
	bottom: -5px;
	z-index: 1;
	background-image: url(../images/web/platon-bg-shape.svg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.1;
}

/* ----------------------------------------------------
   20 - ICONS
   */
.icon-red,
.icon-red::before {
	color: var(--color-text-red);
}
.icon-orange,
.icon-orange::before {
	color: var(--color-text-orange);
}
.icon-green,
.icon-green::before {
	color: var(--color-text-green);
}
.icon-blue,
.icon-blue::before {
	color: var(--color-text-blue);
}
.icon-yellow,
.icon-yellow::before {
    color: var(--color-text-yellow);
}
.icon-grey,
.icon-grey::before {
    color: var(--color-text-grey);
}
.icon-rotate {
	animation: rotate 2s infinite linear;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.icon-rotate2 {
	animation: rotate2 5s infinite linear;
}
@keyframes rotate2 {
	0% { transform: rotate(180deg); }
	10% { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}
.iconCopy::before {
	font-family: var(--font-awesome);
	content: "\f0ea";
	font-weight: 900;
}
.iconCopy {
	display: inline-block;
	cursor: pointer;
	margin-left: 7px;
	color: var(--color-button-text);
}
.iconCopy:hover {
	color: var(--color-button-text-hover);
}
.iconHelp::before {
	font-family: var(--font-awesome);
	content: "\f059";
	font-weight: 900;
}
.iconExternalLeft::before {
	font-family: var(--font-awesome);
	content: "\f35d";
	font-weight: 900;
	margin-right: 5px;
}

/* ----------------------------------------------------
   30 - BUTTONS
   */
#workspace .content .button-green,
#workspace .content .button-green button {
	background-color: var(--color-bgGreen);
	color: var(--color-text);
}
#workspace .content .button-red {
	background-color: var(--color-bgRed);
	color: var(--color-text);
}
#workspace .content .button-orange {
	background-color: var(--color-bgOrange);
	color: var(--color-text);
}
#workspace .content .button-yellow {
	background-color: var(--color-bgYellow);
	color: var(--color-text);
}
#workspace .content label.button {
	margin: 2px;
	padding: 5px 10px;
	width: auto;
	display: inline-block;
	border-radius: 5px;
	background-color: var(--color-bg);
	color: var(--color-text2);
	cursor: pointer;
}

/* ----------------------------------------------------
   35 - LABELS
   */
.label {
	transition: all 0.5s ease;
}
.label-green {
	background-color: var(--color-bgGreen);
	color: var(--color-text);
}
.label-red {
	background-color: var(--color-bgRedStrong);
	color: var(--color-text);
}
.label-orange {
	background-color: var(--color-bgOrange);
	color: var(--color-text);
}
.label-yellow {
	background-color: var(--color-bgYellow);
	color: var(--color-text);
}
.label-grey {
	background-color: var(--color-bgGrey);
	color: var(--color-text);
}
.label-green,
.label-red,
.label-orange,
.label-yellow,
.label-grey {
	padding: 2px 10px 2px 15px;
	width: auto;
	display: inline-block;
	border-radius: 2px;
	margin-bottom: 2px;
	clip-path: polygon(0% 50%, 10px 0%, 100% 0%, 100% 100%, 10px 100%);
}
table tr td .label {
	padding: 0px 10px 0px 15px;
	margin-bottom: 0px;
}

.step-box {
	padding: 5px 10px;
	width: auto;
	display: inline-block;
	border-radius: 2px;
	margin-bottom: 2px;
	background-color: var(--color-bg);
	color: var(--color-text2);
}

/* ----------------------------------------------------
   40 - Log Messages
   */
#msgBoxSet {
	margin-bottom: 4px;
	overflow: hidden;
}

.msgBox {
	line-height: 15px;
	/* background-color: var(--color-bg4); */
	background-image: linear-gradient(to right, var(--color-bg), var(--color-bg3));
	/* padding: 4px 10px 4px 10px; */
	padding: 10px;
	/* border: 1px solid var(--color-bg0); */
	margin: 0 0 5px 0;
	display: flex;
	flex-direction: row;
}
.msgBox[log-type="ERR"] {
	border-left: 5px var(--color-text-red) solid;
}
.msgBox[log-type="WARN"] {
	border-left: 5px var(--color-text-orange) solid;
}
.msgBox[log-type="INFO"] {
	border-left: 5px var(--color-text-blue) solid;
}
.msgBox[log-type="OK"] {
	border-left: 5px var(--color-text-green) solid;
}
.msgBox i {
	margin-right: 10px;
	padding-top: 2px;
}
.msgBox ul {
	flex: 1;
}
.msgBox ul li {
	line-height: 125%;
}

/* ----------------------------------------------------
   45 - REPORTS
   */
.empty::before,
.ok::before,
.ok-yellow::before,
.ok-red::before,
.warn::before,
.warn-red::before,
.err::before,
.none::before,
.info::before {
	font-family: 'PlatonFont' !important;
	font-size: 14px;
	font-style: normal;
	width: 25px;
	display: inline-block;
	position: relative;
	top: 2px;
}
.empty::before {
	content: " ";
}
.ok::before {
	content: var(--PlatonFont-circle-check);
	color: var(--color-text-green);
}
.ok-yellow::before {
	content: var(--PlatonFont-circle-check);
	color: var(--color-text-yellow);
}
.ok-red::before {
	content: var(--PlatonFont-circle-check);
	color: var(--color-text-red);
}
.warn::before {
	content: var(--PlatonFont-circle-warning);
	color: var(--color-text-orange);
}
.warn-red::before {
	content: var(--PlatonFont-circle-warning);
	color: var(--color-text-red);
}
.err::before {
	content: var(--PlatonFont-circle-cancel);
	color: var(--color-text-red);
}
.none::before {
	content: var(--PlatonFont-circle-minus);
	color: var(--color-text-grey);
}
.info::before {
	content: var(--PlatonFont-circle-info);
	color: var(--color-text-blue);
}

.report-highlight {
	background-color: yellow;
	font-weight: bold;
}
.report-line {
	border-width: 0px;
	border-bottom: 1px  white solid;
	margin-top: 3px;
	margin-bottom: 5px;
}
.c3-tooltip-container {
	color: black;
	opacity: 1;
	background: #333333;
	border: 1px solid;
}
.c3-ygrid-line.zeroline line {
    stroke: #333333;
}
.c3-ygrid-line.zeroline text {
	fill: #000000;
	font-weight: bold;
}
.report-labels {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: space-between;
}
.report-label {
	width: auto;
}
.report-labels.compact {
	gap: 1px;
	justify-content: left;
}
.report-labels.compact .label:not(:hover) {
	clip-path: none;
	overflow: hidden;
	width: 15px;
	height: 15px;
	padding: 0px;
	margin: 0px;
	color: transparent;
}
.box-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}
.box {
	display: flex;
	flex-direction: column;
	border: 1px var(--color-bg2) solid;
	background-color: var(--color-bg4);
	width: auto;
}
.box > * {
	padding: 5px;
	background-color: var(--color-bg4);
}
.box > *:first-child {
	background-color: var(--color-bg2);
	color: var(--color-text);
	padding: 5px;
	margin: 0px;
}
.news-body {
	border: 1px var(--color-bg2) solid;
	padding: 5px;
	margin: 0px;
}
.news-body ul {
	list-style-type: disc;
	margin-left: 20px;
}
.ck-content ul {
	list-style-type: disc;
	margin-left: 20px;
}
/* ----------------------------------------------------
   46 - DISK USAGE
   */
.usage-range-wrap {
	width: 100%;
	margin: 10px 0 14px 0;
}
.usage-range-scale {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-bottom: 4px;
}
.usage-range-inputs {
	position: relative;
	height: 32px;
}
.usage-range-base {
	position: absolute;
	left: 0;
	right: 0;
	top: 14px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-graph-background);
}
.usage-range-active {
	position: absolute;
	top: 14px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-graph-border);
}
.usage-range-inputs input[type=range] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 32px;
	margin: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.usage-range-inputs input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--color-graph-border);
	background: var(--color-graph-border);
	cursor: pointer;
	pointer-events: auto;
}
.usage-range-inputs input[type=range]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--color-graph-border);
	background: var(--color-graph-border);
	cursor: pointer;
	pointer-events: auto;
}
.usage-range-inputs input[type=range]::-moz-range-track {
	background: transparent;
}
.usage-range-selected {
	margin-top: 6px;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}

/* ----------------------------------------------------
   47 - CART
   */
.cart-list-table {
	width: 100%;
}
.cart-list-table th {
	letter-spacing: 0.01em;
}
.cart-list-table td {
	vertical-align: top;
	box-sizing: border-box;
}
.cart-list-table input.input {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
	min-height: 30px;
	line-height: 1.25;
	padding: 4px 8px;
}
.cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 12px;
	width: 100%;
	max-width: 100%;
	white-space: normal !important;
}
.cart-actions > span {
	max-width: 100%;
	min-width: 0;
}
.cart-actions > span * {
	max-width: 100%;
}
img.qrcode {
	border: 1px var(--color-bg0) solid;
}
@media (max-width: 900px) {
	.cart-list-table thead {
		display: none;
	}
	.cart-list-table,
	.cart-list-table tbody,
	.cart-list-table tr,
	.cart-list-table td {
		display: block;
		width: 100%;
	}
	.cart-list-table tr {
		margin: 0 0 6px 0;
	}
	.cart-list-table td {
		border: 0 !important;
		padding: 6px 10px !important;
	}
	.cart-list-table td[data-label] {
		display: grid;
		grid-template-columns: minmax(96px, 38%) 1fr;
		gap: 8px;
		align-items: start;
		text-align: left !important;
		white-space: normal !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		box-sizing: border-box;
	}
	.cart-list-table td[data-label] > * {
		min-width: 0;
	}
	.cart-list-table td[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		line-height: 1.35;
	}
	.cart-list-table td[data-label] > small {
		line-height: 1.35;
	}
	.cart-list-table .cart-cell-edit input.input {
		width: 100%;
		min-width: 0;
	}
	.cart-list-table .cart-empty-row td::before {
		display: none;
	}
	.cart-list-table .cart-total-row {
		background-color: var(--color-bg);
	}
	.cart-list-table .cart-total-row td[data-label]::before {
		font-weight: 700;
	}
	.cart-actions {
		justify-content: stretch;
		display: grid;
		grid-template-columns: 1fr;
	}
	.cart-actions > span {
		flex: 1 1 100%;
		display: block;
		width: 100%;
		min-width: 0;
	}
	.hide-as-label {
		display: none !important;
	}
}
@media (max-width: 480px) {
	.cart-list-table tr {
		/* padding: 9px 10px; */
		border-radius: 7px;
	}
	.cart-list-table td[data-label] {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.cart-list-table td[data-label]::before {
		margin-bottom: 1px;
	}
	.cart-list-table input.input {
		min-height: 28px;
		padding: 3px 7px;
	}
	.cart-actions {
		gap: 6px;
	}
}

/* ----------------------------------------------------
   48 - PAYMENT
   */
.payment-cart-wrap {
	width: 100%;
}
.payment-cart-table {
	width: 100%;
}
.payment-cart-table td {
	vertical-align: top;
}
.payment-cart-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
	margin-top: 12px;
}
.payment-cart-col {
	flex: 1 1 calc(50% - 10px);
	min-width: 0;
}
.payment-cart-col table {
	width: 100%;
}
.payment-method-table .payment-method-radio {
	width: 26px;
}
.payment-method-table tr.payment-method-row,
.payment-method-table tr.payment-method-row td {
	cursor: pointer;
}
.payment-method-table tr.payment-method-row.payment-method-row-disabled,
.payment-method-table tr.payment-method-row.payment-method-row-disabled td {
	cursor: not-allowed;
}
.payment-method-table .payment-method-details img {
	max-width: 100%;
	height: auto;
}
.payment-button-wrap {
	margin-top: 12px;
}
.payment-button-table {
	width: 100%;
}
.payment-cancel-wrap {
	margin-top: 10px;
}
@media (max-width: 900px) {
	.payment-cart-layout {
		flex-direction: column;
		gap: 12px;
	}
	.payment-cart-col {
		flex: 1 1 100%;
		width: 100%;
	}
}
@media (max-width: 700px) {
	.payment-cart-table thead {
		display: none;
	}
	.payment-cart-table,
	.payment-cart-table tbody,
	.payment-cart-table tr,
	.payment-cart-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.payment-cart-table tr.payment-cart-row {
		margin: 0 0 8px 0;
		padding: 10px;
		border: 1px solid var(--color-border);
	}
	.payment-cart-table tr.payment-cart-row td {
		padding: 5px 0 !important;
		border: 0 !important;
		text-align: left !important;
		white-space: normal !important;
	}
	.payment-cart-table tr.payment-cart-row td[data-label] {
		display: grid;
		grid-template-columns: minmax(100px, 40%) 1fr;
		gap: 8px;
		align-items: start;
	}
	.payment-cart-table tr.payment-cart-row td[data-label]::before {
		content: attr(data-label);
		font-family: var(--font-bold);
		font-size: 12px;
		line-height: 1.35;
		color: var(--color-text3);
	}
	.payment-cart-table tr.payment-cart-row td[data-label] > * {
		min-width: 0;
	}

	.payment-method-table {
		width: 100%;
	}
	.payment-method-table tr.payment-method-spacer {
		display: none;
	}
	.payment-method-table tr.payment-method-row {
		display: grid;
		grid-template-columns: 28px 1fr;
		grid-template-areas:
			"radio name"
			"radio details";
		gap: 4px 8px;
		padding: 8px 10px;
		margin: 0 0 8px 0;
		border: 1px solid var(--color-border);
	}
	.payment-method-table td {
		border: 0 !important;
		padding: 0 !important;
		white-space: normal !important;
	}
	.payment-method-table .payment-method-radio {
		grid-area: radio;
		width: auto;
	}
	.payment-method-table .payment-method-name {
		grid-area: name;
		font-family: var(--font-bold);
	}
	.payment-method-table .payment-method-details {
		grid-area: details;
		font-size: 13px;
		line-height: 1.4;
	}

	.payment-button-wrap,
	.payment-cancel-wrap {
		width: 100%;
	}
	.payment-button-table {
		width: 100%;
	}
	.payment-button-table th,
	.payment-button-table td {
		text-align: left !important;
	}
	.payment-button-table .center,
	.payment-button-table .payment-button-desc {
		text-align: left !important;
	}
	#pay_button,
	#pay_loader {
		display: inline-flex;
		max-width: 100%;
	}
	.payment-button-wrap .icon-text-onclick,
	.payment-cancel-wrap .icon-text-onclick,
	.payment-cancel-wrap a {
		display: inline-flex;
		max-width: 100%;
	}
}
@media (max-width: 380px) {
	.payment-cart-layout {
		gap: 10px;
		margin-top: 10px;
	}
	.payment-cart-table tr.payment-cart-row {
		padding: 8px 9px;
	}
	.payment-cart-table tr.payment-cart-row td[data-label] {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.payment-cart-table tr.payment-cart-row td[data-label]::before {
		margin-bottom: 1px;
		font-size: 11px;
	}
	.payment-method-table tr.payment-method-row {
		grid-template-columns: 24px 1fr;
		padding: 8px 9px;
	}
	.payment-method-table .payment-method-details {
		font-size: 12px;
	}
	.payment-button-table .payment-button-desc {
		font-size: 12px;
		line-height: 1.4;
	}
}

/* ----------------------------------------------------
   50 - JS TOOLS
   */
/**
 * Password JS Utils
 */
.password-generator-button::before {
	font-family: var(--font-awesome);
	content: "\f023";
	font-weight: 900;
}
.password-generator-button {
	display: inline-block;
	cursor: pointer;
	color: var(--color-button-text);
	margin-left: 7px;
}
.password-generator-button:hover {
	color: var(--color-button-text-hover);
}
.password-view-button::before {
	font-family: var(--font-awesome);
	content: "\f06e";
	font-weight: 900;
}
.password-view-button {
	display: inline-block;
	cursor: pointer;
	margin-left: 7px;
	color: var(--color-button-text);
	width: 17px;
}
.password-view-button:hover {
	color: var(--color-button-text-hover);
}
.password-view-button-hide {
	position: relative;
	margin-left: 6px;
	width: 18px;
}
.password-view-button-hide::before {
	font-family: var(--font-awesome);
	content: "\f070";
	font-weight: 900;
}
.passwordmeter-wrapper {
	display: inline-block;
	position: relative;
}
.password-meter-indicator {
	display: flex;
	width: 100%;
	height: 3px;
	margin-top: 0px;
	gap: 2px;
}
.password-meter-level-1,
.password-meter-level-2,
.password-meter-level-3,
.password-meter-level-4 {
	flex: 1;
	height: 3px;
	/* border: 1px solid var(--color-border); */
	border: 0px;
	transition: background 3s;
}
.password-meter-indicator-level-0 {
}
.password-meter-indicator-level-1 .password-meter-level-1 {
	background-color: red;
}
.password-meter-indicator-level-2 .password-meter-level-1,
.password-meter-indicator-level-2 .password-meter-level-2 {
	background-color: orange;
}
.password-meter-indicator-level-3 .password-meter-level-1,
.password-meter-indicator-level-3 .password-meter-level-2,
.password-meter-indicator-level-3 .password-meter-level-3 {
	background-color: yellow;
}
.password-meter-indicator-level-4 .password-meter-level-1,
.password-meter-indicator-level-4 .password-meter-level-2,
.password-meter-indicator-level-4 .password-meter-level-3,
.password-meter-indicator-level-4 .password-meter-level-4 {
	background-color: #47a752; /* green */
}

/**
 * Trips
 */
 .trip-meals-radiobuttons label span {
	display: none;
}
.trip-meals-radiobuttons:hover label span {
	display: inline;
}

.loadmore-block {
	margin-top: 30px;
}

/**
 * Images as radiobuttons
 */
.as-image[type=radio] {
position: absolute;
opacity: 0;
}
.as-image[type=radio]+img {
	cursor: pointer;
	margin-right: 0.5rem;
	border: 3px solid transparent;
}
.as-image[type=radio]:checked + img {

	padding: 0px 3px;
	border: none;
	border-top: 3px solid #00FF00;
	border-bottom: 3px solid #00AA00;
	border-radius: 3px;
	background-image: linear-gradient(#00FF00, #00AA00), linear-gradient(#00FF00, #00AA00);
	background-size:3px 100%;
	background-position:0 0, 100% 0;
	background-repeat:no-repeat;
}

/**
 * Bottom Messages
 */
.bottom-messages {
	position: fixed;
	bottom: 0px;
	width: 100%;
}
.bottom-message-info,
.bottom-message-ok,
.bottom-message-warning,
.bottom-message-error {
	text-align: center;
	padding: 10px 0px;
	color: white;
}
.bottom-message-info {
	background-color: rgba(32, 134, 223, 0.9);
}
.bottom-message-ok {
	background-color: rgba(71, 167, 82, 0.9);
}
.bottom-message-warning {
	background-color: rgba(209, 170, 97, 0.9);
}
.bottom-message-error {
	background-color: rgba(167, 71, 82, 0.9);
}

/**
 * Progress Bar
 */
.progress-bar-cover {
	background-color: #30455A;
	border: 1px #8eb9fb solid;
	width: 100%;
	height: 20px;
}
.progress-bar-scroll {
	position: relative;
	background-color: #3b88fd;
	height: 20px;
	top: -20px;
	width: 0%;
	transition: width 1s;
	z-index: 1;
}
.progress-bar-label {
	position: relative;
	color: white;
	/* font-size: 13px; */
	line-height: 20px;
	width: 100%;
	text-align: center;
	z-index: 2;
}

/**
 * Progress Line
 */
 .progress-line-cover {
	background-color: #30455A;
	border: none;
	width: 100%;
	height: 1px;
}
.progress-line-scroll {
	position: relative;
	background-color: #3b88fd;
	height: 1px;
	width: 0%;
	transition: width 1s;
	z-index: 1;
}

/**
 * Ticket
 */
 .ticket-content-plain,
 .ticket-content-html {
	overflow: auto;
	max-width: 680px;
	padding: 10px;
}
.ticket-content-html {
	background-color: white;
	color: black;
	max-height: 800px;
}
.ticket-content-html * {
	all: revert !important;
}
.ticket-attachment .image-preview {
	text-align: center;
}
.ticket-attachment .image-preview img {
	max-width: 100%;
}
.ticket-content-iframe {
	width: 100%;
	height: 90vh;
	background-color: white;
	color: black;
}
.message-template-content {
	max-width: 100%;
	max-height: 420px;
	background-color: var(--color-bg4);
	border: 1px solid var(--color-border);
	overflow: auto;
}
.message-template-iframe {
	height: 480px;
}

/**
 * Highlight on mouse over for common elements
 */
.highlight-active {
	background: none repeat scroll 0 0 #3b88fd !important;
	transition: background 1s;
}
.highlight-active .grey{
	color: #e2e3e5 !important;
	transition: color 1s;
}

/**
 * Pattern in inputs
 */
.pattern-invalid {
	border: 1px red solid !important;
}

/**
 * Stats and charts
 */
.chart {
	min-height: 400px;
}
.chart-loader {
	position: relative;
	top: 190px;
	left: 360px;
	display: block;
}
.stats-no-data {
	color: white;
	/* font-size: 20px; */
	position: relative;
	top: -210px;
	text-align: center;
	/*width: 95%;*/
	display: block;
}

/**
 * GeoMap
 */
#map_dialog {
	color: var(--color-text2);
}
#map_dialog #map_dialog_country_input {
	margin-left: 10px;
}
#map_dialog_countries {
	height: 120px;
	overflow: auto;
	float: right;
	width: 45%;
}
#map_dialog .icon-text-onclick {
	margin-top: 5px;
}
.map-dialog-country-remove {
	top: -2px;
	position: relative;
}
.map-dialog-country-name {
	top: -2px;
	position: relative;
}
.geomap-flags-box {
	display: inline-block;
	margin-right: 10px;
}
.geomap-edit-button {
}
.geomap-label {
	line-height: 25px;
}
.geomap-label-right {
	margin-left: 10px;
}
.geomap-label-left {
	margin-right: 10px;
}
.geomap-flag {
	margin-left: 0px !important;
	position: relative;
	top: 3px;
}
.geomap-flag-country-name {
	position: relative;
	/* top: -3px; */
	margin-left: 5px;
}

/**
 * Expand
  */
.icon-expand {
	cursor: pointer;
}
.icon-expand[data-expanded="0"] .expand-closed {
	display: block;
}
.icon-expand[data-expanded="0"] .expand-opened {
	display: none;
}
.icon-expand[data-expanded="1"] .expand-closed {
	display: none;
}
.icon-expand[data-expanded="1"] .expand-opened {
	display: block;
}

/**
 * Web domain
 */
 .table-restrictions .flag {
	margin-left: 10px;
}
.table-restrictions .flag-country-name {
	top: -3px;
	position: relative;
	padding-left: 5px;
}
.usernames-user-box {
	margin-right: 20px;
	display: inline-block;
}
.usernames-name {
	position: relative;
	/* top: -4px; */
	padding-left: 3px;
}

/**
 * Pager
 */
.pager {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	flex-wrap: nowrap;
}
.pager .label {
	height: 20px;
	line-height: 20px;
	color: var(--color-text2);
	white-space: nowrap;
}
.pager .pages {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.pager .page {
	width: 20px;
	height: 20px;
	line-height: 20px;
	border: 1px var(--color-border) solid;
	background-color: var(--color-bg2);
	color: var(--color-text);
	text-align: center;
	margin: 0px 5px;
	margin-bottom: 10px;
	cursor: pointer;
	border-radius: 2px;
	transition: all 0.3s;
	font-family: var(--font-regular);
	font-size: var(--font-size);
}
.pager .page:hover {
	background-color: var(--color-bg1);
	border-color: var(--color-button-text-hover);
	color: var(--color-text);
	transition: all 0.3s;
}
.pager .page.selected {
	background-color: var(--color-bg1);
	border-color: var(--color-button-text);
	color: var(--color-text);
	font-weight: bold;
}

/**
 * Loader after click
 */
.loader-after-click {
	/* border: 1px red solid; */
	display: inline-block;
	position: absolute;
	text-align: center;
	/* background-color: rgba(125,125,125,0.3); */
	backdrop-filter: blur(1px);
}
.loader-image {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(../images/web/ajax-loader.gif);
	background-repeat: no-repeat;
}

/**
 * Lock for record
 */
.lock-description {
	margin-bottom: 10px;
	background-color: #44607a;
	border: 1px solid var(--color-border);
	padding: 5px;
	padding-left: 30px;
	background-image: url(../images/icons/info.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

/**
 * Pagination
 */
.pagination {

}
.pagination a,
.pagination a:visited {
	background-color: #49657e;
	border: 1px solid #3b5369;
	padding: 4px 8px;
	text-decoration: none;
	margin-left: 10px;
	display: inline-block;
	margin-bottom: 10px;
}
.pagination .page-selected {
	background-color: #6389aa !important;
}

/**
 * Dot symbol
 */
.dot-before {
	position: absolute;
	margin-left: -10px;
	margin-top: 5px;
}
.dot-green {
	background-color: #00FF00;
	width: 5px;
	height: 5px;
	display: inline-block;
	border-radius: 50%;
}

#switch_user_dialog label {
	display: block;
	margin-bottom: 5px;
}
#switch_user_dialog input {
	width: 250px;
	margin-bottom: 10px;
	font-family: monospace;
}
#switch_user_dialog .switch-user-actions {
	margin-top: 5px;
}

/* Switch */
div.switch,
div.SmartSwitch,
div.switch-js {
	background: #30455A;
	border: 1px solid #30455A;
	color: #FFFFFF;
	/* font-size: 1.1em; */
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	padding: 1px;
	margin-bottom: 2px;
	margin-top: 2px;
}
div.switch a,
div.switch a:visited,
div.SmartSwitch a,
div.SmartSwitch a:visited,
div.switch-js a,
div.switch-js a:visited {
	text-decoration: none;
}
div.SmartSwitch div,
div.switch-js .switch-js-item {
	cursor: pointer;
}
div.switch div,
div.SmartSwitch div,
div.switch-js .switch-js-item {
	display: inline-block;
	padding: 2px 5px;
}
div.switch div.selected,
div.SmartSwitch div.selected,
div.switch-js div.selected {
	/* background: -moz-linear-gradient(center top , #00FF00, #00AA00) repeat scroll 0 0 rgba(0, 0, 0, 0) !important; */
	background: linear-gradient(to top , #00FF00, #00AA00) !important;
	color: #FFFFFF;
	/*-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px;*/
	border-radius: 3px;
	opacity: 1;
}

div.switch-js div.disabled {
	color: rgba(255, 255, 255, 0.4) !important;
}

div.switch-js div.unselected {
	/* Style for items that are not currently selected */
	opacity: 0.5;
}

div.switch-js.switch-disabled .switch-js-item {
	cursor: default;
}
div.switch-js.switch-js-2col {
	display: inline-grid;
	grid-template-columns: auto auto;
}

/**
 * Switch button
 */
 .switch-button {
	display: inline-block;
	cursor: pointer;
	background-color: #073642;
	width: 32px;
	height: 16px;
	border-radius: 10px;
	border: 1px #3D5770 solid;
	border-right-color: #666;
	border-bottom-color: #666;
	border-left-color: black;
	border-top-color: black;
}
.switch-button .switch-button-lever {
	width: 9px;
	height: 9px;
	background-color: /* #44607A; */ #AAA;
	border-radius: 12px;
	border: 1px #666 solid;
	position: relative;
	top: 2px;
	left: 3px;
	/* border-left-color: #666;
	border-top-color: #666;
	border-right-color: #333;
	border-bottom-color: #333; */
	box-shadow: 2px 0px 1px black;
	transition: left 0.5s, background-color 0.5s, box-shadow 0.5s;
}
.switch-button .switch-button-lever-on {
	left: 17px;
	box-shadow: -2px 0px 1px black;
	background-color: /* #44607A; */ #FFF;
}

/**
 * CKeditor
 */
.ck-editor__top,
.ck-editor__main {
	 /* width: 600px !important; */
 }
.ck-content {
	 color: black;
 }
.ck-content a,
.ck-content a:visited {
	 color: #1777BB;
	 text-decoration: none;
	 cursor: pointer;
 }
 ck-content a:hover {
	 text-decoration: underline;
 }
.ck-editor h1,
.ck-editor h2,
.ck-editor h3,
.ck-editor h4,
.ck-editor h5,
.ck-editor h6 {
	color: black;
}

/**
 * Kebab Menu
 */
 .kebab-container {
	position: relative;
	display: inline-block;
}
.kebab-container .kebab-hide {
	display: none;
}
.kebab-btn {
	font-size: var(--font-size);
	cursor: pointer;
	background: none;
	color: var(--color-text2);
	border: 1px var(--color-button-text) solid;
	border-radius: 5px;
	padding: 5px 10px;
	white-space: nowrap;
	display: inline-block;
	transition: all 0.5s;
}
.kebab-btn:hover {
	background-color: var(--color-button-bg-hover);
	border: 1px var(--color-button-text-hover) solid;
	color: var(--color-button-text-hover);
	transition: all 0.5s;
}
.kebab.kebab-initialized {
	flex-direction: column;
	gap: 10px;
	position: absolute;
	top: 30px;
	/* right: 0; */
	background: var(--color-bg4);
	border: 1px solid var(--color-bg);
	border-radius: 6px;
	padding: 10px;
	/* width: 140px; */
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
	z-index: 20;
	display: none;
}
.kebab-container.show .kebab {
	display: flex;
}
.kebab-container.show .kebab-btn {
	background-color: var(--color-bg1);
	color: var(--color-text1);
	border: 1px var(--color-button-text-hover) solid;
}
.kebab-container.show .icon-text-link-icon {
	min-width: 25px;
}
.kebab-container.show .icon-text-onclick i {
	min-width: 25px;
	text-align: center;
}

@media (min-width: 1400px) {
	.kebab-container:has(.kebab-to-1400) .kebab-hide {
		display: inline-block;
	}
	.kebab-container:has(.kebab-to-1400) .kebab-btn {
		display: none;
	}
	.kebab.kebab-initialized.kebab-to-1400 {
		display: inline-block;
		border: none;
		background: none;
		border-radius: none;
		padding: 0px;
		box-shadow: none;
		position: initial;
	}
}
@media (min-width: 800px) {
	.kebab-container:has(.kebab-to-800) .kebab-hide {
		display: inline-block;
	}
	.kebab-container:has(.kebab-to-800) .kebab-btn {
		display: none;
	}
	.kebab.kebab-initialized.kebab-to-800 {
		display: inline-block;
		border: none;
		background: none;
		border-radius: none;
		padding: 0px;
		box-shadow: none;
		position: initial;
	}
}

/**
 * Tooltip2
 */
.tooltip2 {
	position: relative;
	display: inline-block;
}
.tooltip2 .tooltip2-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-weight: bold;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-text);
	cursor: help;
}
.tooltip2 .tooltip2-label {
	display: inline-block;
	text-decoration: underline;
}
.tooltip2 .tooltip2-content {
	position: absolute;
	/* top: 0px; */ /* 120% */
	bottom: 20px;
	left: 50%; /* 50% */
	/* right: 0px; */
	max-width: min(400px, 90vw);
	/* min-width: 200px; */
	width: max-content;
	transform: translateX(-50%);
	background: var(--color-bg);
	color: var(--color-text2);
	border: 1px var(--color-border) solid;
	padding: 8px 12px;
	border-radius: 4px;
	white-space: wrap;
	/* opacity: 0; */
	display: none;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 10;
	text-align: justify;
}
.tooltip2:hover .tooltip2-content,
.tooltip2:hover .tooltip2-content:hover,
.tooltip2 .tooltip2-content:hover {
	/* opacity: 1; */
	display: block;
	pointer-events: all;
	cursor: help;
}
.tooltip2 .tooltip2-content a,
.tooltip2 .tooltip2-content a:visited,
#workspace .content .tooltip2 .tooltip2-content a,
#workspace .content .tooltip2 .tooltip2-content a:visited {
	color: var(--color-text-placeholder);
}

/* ----------------------------------------------------
   60 - TABLES
   */
.array-table {
	border-left: 4px dotted var(--color-bg2);
	/* border-top: 3px solid var(--color-bg1); */
}
.array-table tr:nth-child(even) {
	background-color: var(--color-bg);
}

/* ----------------------------------------------------
   80 - SPECIALS
   */
img.receipt-thumb {
	max-width: 260px;
	height: auto;
	display: block;
	margin-left: auto;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.10);
}

.content-top-right.with-hint {
	left: 50%;
}
.last-reg-hint {
	font-size: 11px;
	line-height: 1.2;
	margin-right: auto;
	text-align: left;
}

.invoice-already-paid {
	border: 3px red solid;
	position: absolute;
	color: red;
	font-size: 30px;
	font-weight: bold;
	width: 300px;
	text-align: center;
	top: 70px;
	left: calc((100% - 300px) / 2);
	transform: rotate(-15deg);
}

.totp-container {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 50px;
	margin-bottom: 50px;
}
.totp-container input,
#login-form .totp-container input {
	width: 50px;
	min-width: 50px;
	flex: 0 0 50px;
	box-sizing: border-box;
	padding: 0;
	/* width: 40px; */
	height: 50px;
	font-size: 24px;
	text-align: center;
	/* border: 2px solid #ccc; */
	/* border-radius: 6px; */
	outline: none;
	transition: border-color 0.2s;
}
.totp-container input:nth-of-type(3) {
	margin-right: 30px;
}
.totp-container input:focus {
	border-color: #007bff;
}
.totp-error {
	border-color: red !important;
}
.blur-text {
	color: transparent;
	text-shadow: 0px 0px 5px #FFFFFF;
	transition: color 0.5s, text-shadow 0.5s;
}

.cols2,
.cols3 {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.cols2 > div {
	/* width: 50%; */
}
.cols.around,
.cols2.around,
.cols3.around {
	justify-content: space-around;
}

hr.space {
	margin: 20px 0px;
}
div.space-top {
	margin-top: 20px;
}
div.space-bottom {
	margin-bottom: 20px;
}
div.space {
	margin-bottom: 20px;
	margin-top: 20px;
}

.skeleton {
	display: inline-block;
	width: 200px;      /* šírka placeholdera */
	height: 150px;     /* výška placeholdera */
	background-color: #e0e0e0; /* základná farba skeleton */
	border-radius: 8px;        /* zaoblené rohy */
	position: relative;
	overflow: hidden;
	/* animácia gradientu */
	background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.paddingR10 {
	padding-right: 10px;
}
.marginR10 {
	margin-right: 10px;
}

/* ----------------------------------------------------
   90 - LAST CLASS
   */
.hide,
#layout .hide,
#workspace .hide,
#workspace .content .hide {
	display: none;
}
.invisible {
	visibility: hidden;
	height: 0px;
}
.nopadding {
	padding: 0px !important;
}
.theme-dark .only-light,
.theme-dark .for-light {
	display: none !important;
}
.theme-light .only-dark,
.theme-light .for-dark {
	display: none !important;
}

/* ----------------------------------------------------
   98 - REWRITE OLD STYLES
   */
input.tiny   { width: 25px;  } /* Max 3-digits number size */
input.tiny4  { width: 34px;  } /* Max 4-digits number size */
input.tiny5  { width: 42px;  } /* Max 5-digits number size */
input.small  { width: 85px;  } /* Date field YYYY-MM-DD size */
input.medium { width: 140px; }
input.long   { width: 210px; }
input.verylong { width: 400px; }
input.halfw  { width: 50%;   }
input.fullw  { width: 95%;   }
select.halfw { width: 50%;   }
select.fullw { width: 95%;   }
textarea.halfw { width: 50%;   }
textarea.fullw { width: 95%;   }
select.tiny { width: 25px; }
select.smaller { width: 50px; }
select.small { width: 75px; }
select.medium { width: 140px; }
select.long { width: 210px; }

.width100 {
	width: 100% !important;
}
.width98 {
	width: 98% !important;
}
.width96 {
	width: 96% !important;
}
.width85 {
	width: 85% !important;
}
.width80 {
	width: 80% !important;
}
.width75 {
	width: 75% !important;
}
.width50 {
	width: 49% !important;
}
.width40 {
	width: 40% !important;
}
.width1 {
	width: 1% !important;
}
.widthSmall {
	width: 40px !important;
}
.widthMedium {
	width: 80px !important;
}
.widthLarge {
	width: 160px !important;
}
.widthAuto {
	width: auto !important;
}

table.horiz,
table.listTable,
table.listTable2,
table.listTable3 {
	/* border: 1px var(--color-bg2) solid;
	background-color: var(--color-bg4); */
	border-collapse: collapse;
  	border: 1px solid var(--color-border);
	width: 100%;
	margin: 0 2px 10px 0;
}
table.horiz tr.th,
table.listTable tr,
table.listTable tr th,
table.listTable tr.th,
table.listTable tr.search th,
table.listTable2 tr.th,
table.listTable2 tr,
table.listTable2 tr.search th {
	border: 0px var(--color-bg2) solid;
	text-align: left;
}
table.horiz tr,
table.listTable tr,
table.listTable2 tr,
table.listTable3 tr {
	background-color: var(--color-bg4);
}
/* table.horiz tr:has(td):hover, */
table.listTable tr:has(td):hover {
/* table.listTable2 tr:has(td):hover, */
/* table.listTable3 tr:has(td):hover { */
	/* background-color: var(--color-bg1) !important; */
	filter: var(--filter-hover);
}
table.listTable tr.highlight,
table.listTable2 tr.highlight {
	background-color: var(--color-bg3);
}
table.highlight tr:nth-child(2n+1):not(:first-child) {
	background-color: var(--color-bg3);
}
/* table.horiz tr.highlight:hover, */
table.listTable tr.highlight:hover {
/* table.listTable2 tr.highlight:hover, */
/* table.listTable3 tr.highlight:hover { */
	/* background-color: var(--color-bg1) !important; */
	filter: var(--filter-hover);
}
table.listTable tr.redline {
	border-top: 2px #CC0000 solid;
}
table.horiz tr.grayline,
table.listTable tr.grayline,
table.listTable2 tr.grayline,
table.listTable3 tr.grayline {
	border-top: 1px var(--color-border) solid;
}

table tr.h2 {
	background-color: var(--color-bg);
	color: var(--color-text2);
}
table tr.h2 th,
table tr.h2 th {
	background-color: var(--color-bg);
	color: var(--color-text2);
}
th div.actions {
	float: right;
}
table.horiz td,
table.listTable td,
table.listTable2 td,
table.listTable3 td {
	/* background-color: var(--color-bg4); */
	color: var(--color-text2) !important;
	/* padding: 10px; */
	/* padding: 0.5em 0.6em; */
	padding: 0.3em;
}
table.listTable3 td {
	background-color: var(--color-bg3);
}
table.horiz th,
table.listTable th,
table.listTable tr.th,
table.listTable tr.search th,
table.listTable2 th,
table.listTable2 tr.th,
table.listTable2 tr.search th,
table.listTable3 th,
table.listTable3 tr.th,
table.listTable3 tr.search th,
#htmlInput table th {
	background-color: var(--color-bg0);
	color: var(--color-text);
	font-weight: normal !important;
	font-family: var(--font-bold);
	border-bottom: 1px solid var(--color-bg1);
	padding: 10px;
	text-align: left;
}
table.horiz tr.th2,
table.listTable tr.th2 th,
table.listTable tr.th2,
table.listTable2 tr.th2 {
	background-color: var(--color-bg2);
}
table.horiz tr.th td,
table.listTable tr.th td,
table.listTable2 tr.th td,
table.listTable3 tr.th td {
	background-color: var(--color-bg0);
}
#workspace .content table.horiz th a,
#workspace .content table.horiz th a:visited,
#workspace .content table.horiz th a:link,
#workspace .content table.horiz tr.th a,
#workspace .content table.horiz tr.th a:visited,
#workspace .content table.horiz tr.th a:link,
#workspace .content table.listTable th a,
#workspace .content table.listTable th a:visited,
#workspace .content table.listTable th a:link,
#workspace .content table.listTable tr.th a,
#workspace .content table.listTable tr.th a:visited,
#workspace .content table.listTable tr.th a:link,
#workspace .content table.listTable2 th a,
#workspace .content table.listTable2 th a:visited,
#workspace .content table.listTable2 th a:link,
#workspace .content table.listTable2 tr.th a,
#workspace .content table.listTable2 tr.th a:visited,
#workspace .content table.listTable2 tr.th a:link {
	color: var(--color-text);
}
#workspace .content table.horiz th a:hover,
#workspace .content table.horiz tr.th a:hover,
#workspace .content table.listTable th a:hover,
#workspace .content table.listTable tr.th a:hover,
#workspace .content table.listTable2 th a:hover,
#workspace .content table.listTable2 tr.th a:hover {
	color: var(--color-text1);
}
#workspace .content table.horiz th .width50,
#workspace .content table.horiz tr.th .width50,
#workspace .content table.listTable th .width50,
#workspace .content table.listTable tr.th .width50,
#workspace .content table.listTable2 th .width50,
#workspace .content table.listTable2 tr.th .width50 {
	width: calc(49% - 10px) !important;
	display: inline-block;
}
table.horiz td pre,
table.tabsHoriz td pre,
table.tabsRows td pre,
table.listTable td pre,
table.listTable2 td pre,
table.listTable3 td pre {
	margin: 0px;
}
pre.log-output-block {
	box-sizing: border-box;
	display: block;
	width: auto;
	max-width: calc(100% - 10px);
	min-width: 0;
	margin: 4px 0 12px 10px;
	border: 1px solid var(--color-border);
	background-color: var(--color-bg);
	overflow-x: auto;
	overflow-y: hidden;
	white-space: pre;
	font-family: "Courier New", monospace, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	scrollbar-color: var(--color-bg2) var(--color-bg0);
	scrollbar-width: thin;
}
td.log-output-cell {
	width: 100%;
	max-width: 0;
	min-width: 0;
	overflow: hidden;
}
table.horiz td pre.log-output-block,
table.tabsHoriz td pre.log-output-block,
table.tabsRows td pre.log-output-block,
table.listTable td pre.log-output-block,
table.listTable2 td pre.log-output-block,
table.listTable3 td pre.log-output-block {
	margin: 4px 0 12px 10px;
}
pre.log-output-block-plain {
	padding: 10px;
}
pre.log-output-block code {
	display: block;
	box-sizing: border-box;
	white-space: pre;
	font-family: inherit;
	min-width: max-content;
}
pre.log-output-block code.hljs {
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: visible;
	scrollbar-color: var(--color-bg2) var(--color-bg0);
	scrollbar-width: thin;
}
pre.log-output-block::-webkit-scrollbar,
pre.log-output-block code.hljs::-webkit-scrollbar {
	height: 8px;
}
pre.log-output-block::-webkit-scrollbar-track,
pre.log-output-block code.hljs::-webkit-scrollbar-track {
	background: var(--color-bg0);
}
pre.log-output-block::-webkit-scrollbar-thumb,
pre.log-output-block code.hljs::-webkit-scrollbar-thumb {
	background: var(--color-bg2);
	border-radius: 4px;
}
/* TABLES */
#htmlInput table {
	width: 100%;
	border-collapse: collapse;
}
#htmlInput table th {
	/* background: none repeat scroll 0 0 #49657e; */
	border: 1px solid var(--color-bg);
	font-weight: bold;
	padding: 0.6em;
	text-align: left;
}
#htmlInput table.listTable td {
	/* background: none repeat scroll 0 0; */
	border: 1px solid var(--color-bg);
	padding: 0.3em;
	text-align: left;
}

table.tabsHoriz {
	padding-left: 10px;
}
table.tabsHoriz td.cell,
#workspace .content table tr td.cell {
	/* padding: 0.5em 0px; */
	padding: 0.5em;
}
table.tabsHoriz td.cell1 {
	width: 130px;
	padding: 0.5em;
}
table.tabsHoriz tr:has(.icon-text-onclick) td.cell1 {
	line-height: 25px;
}
table.tabsHoriz tr.th th {
	padding: 0.5em;
	text-align: left;
	font-weight: bold;
	border-bottom: 1px solid var(--color-border);
}
table.tabsHoriz.rowsLight tr:nth-child(2n+2) {
	background: none repeat scroll 0 0 #617b92;
}

table.tabsRows {
	border-collapse: collapse;
	width: 100%;
}
table.tabsRows th {
	text-align: left;
}
table.tabsRows td,
table.tabsRows th {
	padding-top: 3px;
    padding-bottom: 3px;
}
table.tabsRows td.cell-action {
	padding-left: 15px;
}

.no-border {
	border: 0px transparent solid !important;
}
table.tabsHoriz.rowsLight tr:nth-child(2n+2) {
	background-color: var(--color-bg3);
}

table.norules,
table.norules tr,
table.norules th,
table.norules td {
	border: none;
	background-color: var(--color-bg3);
}
table.listTable tr.darkBg,
table.listTable td.darkBg,
table.listTable th.darkBg {
	background-color: var(--color-bg0) !important;
}
table.listTable tr.grey,
table.listTable td.grey,
table.listTable th.grey {
	background-color: var(--color-bg) !important;
}

/* TR - colors */
table.listTable tr.highlight,
table.tabsRows tr.highlight,
table.tabsRows tr:nth-child(odd):not(:first-child) {
	background-color: var(--color-bg3);
}
table.listTable tr.highlight td,
table.tabsRows tr.highlight td {
	background: none;
}
table.tabsRows tr:nth-child(even) {
	background-color: var(--color-bg4);
}
table.listTable tr.redBg,
table.listTable tr.redBg.highlight,
table.listTable tr td.redBg,
table.listTable2 tr.redBg,
table.listTable2 tr.redBg.highlight {
	background-color: var(--color-bgRed);
}
table.listTable tr.redBg td,
table.listTable2 tr.redBg td {
	background: none;
}
table.listTable tr.highlight td.redBg {
	background-color: var(--color-bgRed);
}
table.listTable tr.redStrongBg,
table.listTable tr.redStrongBg.highlight,
table.listTable tr td.redStrongBg,
table.listTable2 tr.redStrongBg,
table.listTable2 tr.redStrongBg.highlight {
	background-color: var(--color-bgRedStrong);
}
table.listTable tr.redStrongBg td,
table.listTable2 tr.redStrongBg td {
	background: none;
}
table.listTable tr.orangeBg,
table.listTable tr.orange2Bg {
	background-color: var(--color-bgOrange);
}
table.listTable tr.orangeBg td,
table.listTable tr.orange2Bg td {
	background: none;
}
table.listTable tr.greenBg,
table.listTable tr.greenBg.highlight,
table.listTable2 tr.greenBg,
table.listTable2 tr.greenBg.highlight,
table.tabsRows tr.greenBg,
table.tabsRows tr.greenBg.highlight {
	background-color: var(--color-bgGreen);
}
table.listTable tr.greenBg td,
table.listTable2 tr.greenBg td {
	background: none;
}
table.listTable tr.lightblueBg {
	/* TODO: tato otrasna modra musi byt fixnuta! */
	/* background: none repeat scroll 0 0 #3355FF; */
}
table.listTable tr.darkblueBg,
table.listTable th.darkblueBg {
	background-color: var(--color-bgBlueDark);
}
table.listTable tr.darkblueBg td {
	background: none;
}
table.listTable tr.darkBg,
table.listTable td.darkBg,
table.listTable th.darkBg {
	background-color: var(--color-bg0);
}
table.listTable tr.darkBg td {
	background: none;
}
table.listTable tr.grey,
table.listTable td.grey,
table.listTable th.grey {
	background-color: var(--color-bgGrey);
	color: var(--color-text2);
}
table.listTable tr.grey td {
	background: none;
}
table.listTable tr.yellowBg,
table.horiz tr.yellowBg {
	background-color: var(--color-hlYellow);
}
table.listTable tr.yellowBg td,
table.horiz tr.yellowBg td {
	background: none;
}
table.listTable tr.whiteBg,
table.horiz tr.whiteBg {
	background-color: var(--color-bgWhite);
}
table.listTable tr.whiteBg td,
table.horiz tr.whiteBg td {
	background: none;
	color: var(--color-text2);
}
table.horiz td,
table.listTable td,
table.listTable2 td,
table.listTable3 td {
	border: none;
	padding-left: 10px;
}
table.listTable .table-icon,
table.listTable2 .table-icon,
table.listTable3 .table-icon {
	width: 20px;
	display: inline-block;
}
table.horiz td.cell1 {
	width: 40%;
	padding: 6px;
}
table td.cell-140,
table.horiz td.cell-140,
table.tabsHoriz td.cell-140 {
	width: 140px;
	padding: 0.5em;
}
table td.cell-250,
table.horiz td.cell-250,
table.tabsHoriz td.cell-250 {
	width: 250px;
	padding: 0.5em;
}
table.lines tr:not(:has(th)):not(:last-child) {
	border-bottom: 1px var(--color-bg) solid;
}
.tabs table.lines,
.tabs2 table.lines {
	border-collapse: collapse;
}
.tabs table.lines tr,
.tabs2 table.lines tr {
	border-bottom: 1px var(--color-bg0) solid;
}

.tabs table.lines tr td,
.tabs2 table.lines tr td {
	padding: 5px 10px;
}
div.server-view-main div.head {
	background-color: var(--color-bg0);
	color: var(--color-text);
}
div.server-view-main div.body {
	background-color: var(--color-bg);
}
div.server-view-main div.actions {
	background-color: var(--color-bg);
  	/* color: var(--color-text); */
}
table.listTable .id,
table.listTable2 .id,
table.listTable3 .id {
	width: 1%;
	text-align: right;
	font-family: monospace;
}
table.listTable tr.emptyDelim,
table.listTable tr.emptyDelim td {
	background: none;
	border: 0;
	font-size: 5px;
	height: 10px;
}
table.horiz td.tt,
table.listTable td.tt,
table.listTable2 td.tt,
table.listTable3 td.tt {
	overflow-wrap: break-word;
	max-width: 50vw;
}

.darklog {
	background-color: var(--color-bg);
}
.log-output {
	font-family: "Courier New", monospace, sans-serif;
	white-space: pre;
}
.log-output .log-line {
	display: inline-block;
	min-width: 100%;
	box-sizing: border-box;
}
.log-output .log-error {
	background-color: rgba(231, 34, 34, 0.22);
}
.log-output .log-warning {
	background-color: rgba(255, 119, 0, 0.22);
}
.log-output .log-skip {
	background-color: rgba(245, 158, 11, 0.22);
}
.log-output .log-ok {
	background-color: rgba(31, 179, 31, 0.22);
}
.log-output .log-info {
	background-color: rgba(13, 94, 175, 0.22);
}
.sanity-report-row {
	cursor: pointer;
}
.sanity-log-toggle {
	white-space: nowrap;
}
.sanity-log-mark {
	color: var(--color-bgRedStrong);
	font-size: 1.1em;
	vertical-align: middle;
}

.sanity-report-live .sanity-report-logs::after,
.sanity-report-live .sanity-report-empty::after {
	content: "";
	display: inline-block;
	width: 0.65em;
	height: 1em;
	margin-left: 2px;
	vertical-align: -0.15em;
	background-color: currentColor;
	animation: sanity-report-cursor-blink 1s steps(1, end) infinite;
}
@keyframes sanity-report-cursor-blink {
	0%, 49% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
	}
}
.ui-tabs,
.tabs2 {
	background: var(--color-bg4) !important;
	color: var(--color-text2) !important;
}
.ui-tabs .ui-tabs-nav,
.tabs2-header,
.tabs2 .tabs2-actions-right {
	background: var(--color-bg) !important;
	border-bottom: 1px var(--color-bg1) solid;
	color: var(--color-text);
}
.tabs .ui-tabs-panel,
.tabs2 .ui-tabs-panel {
	padding-top: 15px !important;
	padding-bottom: 10px !important;
}
.tabs2 .tabs2-actions-right {
	float: right;
	padding-right: 5px;
	height: 30px;
	border-bottom: 1px solid var(--color-border);
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs .ui-tabs-nav li a:visited {
	text-decoration: none !important;
}
.tabs2 .tabs2-buttons {
	display: flex;
	flex-direction: row;
	height: 34px;
	line-height: 34px;
	border-bottom: 1px solid var(--color-border);
}
#workspace .content .ui-tabs .ui-tabs-nav li:not(.flushright),
#workspace .content .tabs2 .tabs2-buttons span,
#workspace .content .tabs2 .tabs2-buttons a,
#workspace .content .tabs2 .tabs2-buttons a:visited {
	background-color: var(--color-bg2);
	text-decoration: none;
	color: var(--color-text);
	border-radius: 0px !important;
	font-weight: normal;
	font-family: var(--font-bold);
	padding: 2px 15px;
}
#workspace .content .ui-tabs .ui-tabs-nav li a:hover,
#workspace .content .tabs2 .tabs2-buttons a:hover {
	color: var(--color-text1);
}
#workspace .content .ui-tabs .ui-tabs-nav li.ui-tabs-active,
#workspace .content .tabs2 .tabs2-button-active,
#workspace .content .tabs2 span.tabs2-button-active,
#workspace .content .tabs2 span.tabs2-button-active a,
#workspace .content .tabs2 span.tabs2-button-active a:visited,
#workspace .content .tabs2 a.tabs2-button-active,
#workspace .content .tabs2 a.tabs2-button-active:visited {
	background-color: var(--color-bg1);
	color: var(--color-text);
	text-decoration: none;
}
#workspace .content .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	color: var(--color-text);
}
#workspace .content .ui-widget-content {
	color: var(--color-text2);
}
#workspace .content .tabs2 .tabs2-buttons a.status-ok,
#workspace .content .tabs a.status-ok {
	background-image: none;
	background-repeat: no-repeat;
	background-position: 3px 5px;
}
#workspace .content a.status-ok::before {
	content: "\f00c";
	font-family: var(--font-awesome);
	font-weight: 900;
	color: var(--color-text-green);
	padding-right: 5px;
}

/* Tabs */
.tabs .ui-tabs-panel {
	padding-bottom: 10px !important;
}
.tabs h2,
.tabs2 h2 {
	background-color: var(--color-bg);
}
.tabs h2 {
	padding: 10px;
	margin: 0px;
}
h3 {
	padding: 2px 25px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.tabs .right-h2 {
	float: right;
	padding-top: 15px;
	padding-right: 10px;
}
.tabs .right-h2 a {
	position: relative;
	top: 8px;
	right: 8px;
}
.tabs .desc {
	padding-bottom: 10px;
}

.tabs p {
	padding-left: 10px;
	padding-right: 10px;
	text-align: justify;
	margin: 0px;
	margin-top: 5px;
	margin-bottom: 10px;
}
span.tabs {
	padding: 6px 8px;
	text-align: justify;
	display: inline-block;
}
span.tabs a,
span.tabs input {
	display: inline;
	border: none !important;
	padding: 0px !important;
	float: none !important;
}
.tabs ul {
	margin-left: 5px;
	margin-top: 10px;
    margin-bottom: 0px;
}
.tabs ul li {
	padding-left: 20px;
}
hr,
.tabs hr {
	border-width: 0px;
	border-bottom: 1px var(--color-border) solid;
	color: var(--color-border);
	margin-top: 7px;
	margin-bottom: 7px;
}
.tabs .code {
	margin: 10px;
	padding: 10px;
}
.tabs .code2 {
	padding: 10px;
}
.tabs code span {
	border: none;
	display: inline;
	padding: 0px;
}
.tabs .c2 {
	width: 350px;
}
.tabs .experimental {
	/* font-size: 10px; */
	font-style: italic;
	color: #9AA5AF;
	position: relative;
	top: -4px;
}

/* Tabs2 */
.tabs2 {
	border: 1px solid var(--color-border);
	border-radius: 0 !important;
}
.tabs2 .tabs2-buttons {
	display: flex;
	flex-direction: row;
	height: 30px;
	line-height: 30px;
	border-bottom: 1px solid var(--color-border);
}
.tabs2 .tabs2-buttons>span,
.tabs2 .tabs2-buttons>a,
.tabs2 .tabs2-buttons>a {
	padding-left: 8px;
	padding-right: 8px;
	border-right: 1px solid var(--color-border);
}
.tabs2 .tabs2-buttons a,
.tabs2 .tabs2-buttons a:visited {
	text-decoration: none;
	font-weight: bold;
}
.tabs2 .tabs2-button-active,
.tabs2 .tabs2-button-active:visited {
	border-bottom: none !important;
	height: 27px; /* removed bottom line */
}
.tabs2 .tabs2-tab {
	padding: .5em;
}
.tabs2 h2 {
	padding: 10px;
	margin: 0px;
	/* margin-top: 10px; */
	margin-bottom: 10px;
}
.tabs2 .right-h2 {
	float: right;
	padding-top: 15px;
	padding-right: 10px;
}
.tabs2 .right-h2 a {
	position: relative;
	top: 8px;
	right: 8px;
}
.tabs2 p {
	padding-left: 10px;
	padding-right: 10px;
	text-align: justify;
	margin: 0px;
	margin-top: 5px;
	margin-bottom: 10px;
}
.tabs2 hr {
	border-width: 0px;
	border-bottom: 1px var(--color-border) solid;
	color: var(--color-border);
	margin-top: 7px;
	margin-bottom: 7px;
}
.tabs2 .code {
	margin: 10px;
	padding: 10px;
}
.tabs2 code span {
	border: none;
	display: inline;
	padding: 0px;
}
.tabs2 .c2 {
	width: 350px;
}

table.tabsRows th {
	padding: 3px 10px;
}
table.tabsRows td {
    color: var(--color-text2);
	padding: 1px 10px;
}
table.tabsRows tr:has(th) {
	background-color: var(--color-bg);
}
/* table.tabsRows tr > td.right:last-child,
table.tabsRows tr > th.right:last-child {
    padding-right: 10px;
} */
table.tabsRows tr:hover:not(:has(th)) {
	filter: var(--filter-hover);
}

.tabs .code {
	background-color: var(--color-bg0);
}
.tabs .space,
.tabs2 .space {
	padding: 10px;
}

/* Centerbox */
.centerbox,
.tabs .centerbox,
.tabs2 .centerbox,
table td .centerbox {
	width: 50%;
	text-align: center;
	padding: 20px 0px;
	margin-left: auto;
	margin-right: auto;
}
.centerbox-3-col {
	display: flex;
	flex-direction: row;
}
.centerbox-3-col div:nth-child(1) {
	width: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.centerbox-3-col div:nth-child(2) {
	width: 50%;
	padding: 20px 0px;
}
.centerbox-3-col div:nth-child(3) {
	width: 25%;
}
.centerbox ul,
.centerbox-3-col ul {
	text-align: left;
	margin-left: 22px;
}
.centerbox ul li,
.centerbox-3-col ul li {
	list-style-type: none;
	padding-left: 10px;
}
.centerbox ul li::marker,
.centerbox-3-col ul li::marker {
	font-family: var(--font-awesome);
	content: "\f04b";
	display: inline-block;
	width: 20px;
	height: 20px;
	font-weight: 900;
	color: var(--color-bg2);
}

table.horiz .code2 {
	background-color: var(--color-bg);
	padding-left: 10px;
}
input.input,
input.tableSearch,
button.input,
button.change,
select,
option,
select option,
textarea {
	background-color: var(--color-bg);
	border: none;
	padding: 4px;
	margin: 1px 0px;
	color: var(--color-text2);
	font-size: var(--font-size);
	transition: all 0.3s;
}
input.password-meter {
	padding: 1px 4px;
}
input.tableSearch,
button.tableSearch {
	width: calc(100% - 10px);
}
input.default-value {
	color: var(--color-text-default);
}
input.customer-duplicate-warning {
	outline: 1px var(--color-text-orange) solid;
	box-shadow: 0 0 0 1px var(--color-text-orange);
}
input::placeholder,
textarea::placeholder {
	color: var(--color-text-placeholder);
}
span.input {
	background: none;
	background-color: var(--color-bg);
	border: none;
	color: var(--color-text2);
	padding: 0px 4px 1px 4px;
	transition: all 0.3s;
	opacity: 0.5;
}
select option:hover {
	background-color: var(--color-bg0) !important;
	color: var(--color-text) !important;
}
button.input,
button.change,
input[type="submit"],
input[type="button"] {
	background: var(--color-bg);
	border: 1px var(--color-bg2) solid;
	color: var(--color-text2);
}
button.input:hover,
button.change:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	border: 1px var(--color-bg1) solid;
	color: var(--color-text3);
}
input.input[disabled],
input.input[readonly],
button.input[disabled],
button.input[readonly],
button.change[disabled],
button.change[readonly],
select:disabled,
select[readonly],
textarea[disabled],
textarea[readonly],
select.input[disabled],
select.input[readonly] {
	color: var(--color-button-text-disabled) !important;
	background-color: var(--color-element-disabled) !important;
	/* filter: brightness(0.6); */
	cursor: not-allowed;
}
input.code {
	font-size: var(--font-size-big);
	padding: 10px;
	letter-spacing: 10px;
	font-family: monospace;
}
label.radio-option {
	display: block;
	background-color: var(--color-bg);
	border: 1px var(--color-bg2) solid;
	color: var(--color-text2);
	padding: 5px;
	cursor: pointer;
	transition: all 0.3s;
}
label.radio-option.selected,
label.radio-option:has(input[type="radio"]:checked) {
	background-color: var(--color-bg1);
	border: 1px var(--color-bg1) solid;
	color: var(--color-text);
}
label.radio-option:hover {
	filter: brightness(1.1);
}
label.radio-option p {
	padding-left: 25px;
}
h1,
h2,
h3,
h4,
h5,
h6,
h7 {
	color: var(--color-text2);
}
h1 {
	margin: 6px 0 18px 0;
}
h2 {
	margin: 10px 0 6px 0;
}
h3 {
	margin: 4px 0 3px 0;
}

input {
	outline: none;
}
input:focus-visible {
  outline: 0;
}

.content-top-right {
	top: calc(var(--header-height) + 30px);
	padding-right: 20px;
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	gap: 10px;
	right: 0px;
	position: absolute;
	float: right;
	padding: 0px;
	padding-right: 20px;
	text-align: right;
}

.content-top-right input.input,
.content-top-right select,
h2 input.input,
h2 select {
	background-color: var(--color-bg);
	border: 1px var(--color-button-text) solid;
	border-radius: 5px;
	color: var(--color-text2);
	padding: 5px 10px;
	transition: all 0.3s;
}

.content-top-right input.input:focus,
.content-top-right select:focus {
	border-color: var(--color-button-text-hover);
	outline: none;
}

.archive-hide,
.contractor-hide,
.customer-hide
{
	display: none;
	border-top: 0px black solid !important;
}

.archive-row td {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.archive-row .row-space {
	height: 10px;
	display: block;
}
.invoice-preview-pagination,
.expense-preview-pagination {
	display: flex;
}
.invoice-preview-pagination-label,
.expense-preview-pagination-label {
	line-height: 20px;
}
.invoice-preview-pagination-buttons,
.expense-preview-pagination-buttons {
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	align-content: stretch;
	flex-direction: row;
}
.invoice-preview-page-box,
.expense-preview-page-box {
	/* background-color: #49657e; */
	border: 1px solid #3b5369;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	margin-left: 5px;
	cursor: pointer;
	flex: 1;
}

div.c2 {
	width: calc(50% - 10px);
	margin: 0px 0px 10px 0px;
	padding-right: 10px;
	clear: both;
	float: left;
}
div.c2.edge {
	padding-right: 0px;
	padding-left: 10px;
	clear: inherit;
}
.msgBox,
.lock-description {
	background-color: var(--color-bg);
	color: var(--color-text2);
}
#workspace .content .msgBox a,
#workspace .content .msgBox a:visited {
	color: var(--color-text2);
}
#workspace .content .msgBox a:hover {
	color: var(--color-text1);
}
.lightGreen {
	color: var(--color-text-green) !important;
}
.lightRed {
	color: var(--color-text-red) !important;
}
#workspace .content .pagination {
	margin-top: 20px;
}
#workspace .content .pagination a,
#workspace .content .pagination a:visited {
	background-color: var(--color-bg2);
	color: var(--color-text);
}
#workspace .content .pagination .page-selected {
	background-color: var(--color-bg1) !important;
}

/* Server list */
div.server-list-wrapper {
	margin-right: -15px;
	overflow: hidden;
}
div.server-view-wrapper {
	overflow: hidden;
	margin: 0 12px 15px 0;
	/*clear: both; */
	float: left;
}

div.server-view-main {
	float: left;
	width: 360px;
}
div.server-view-main div.head {
	width: 346px;
	height: 24px;
	background: none repeat scroll 0 0 var(--color-bg);
	border: 1px solid var(--color-bg1);
	color: var(--color-text);
	line-height: 18px;
	/* font-size: 12px; */
	font-weight: bold;
	padding: 6px 6px 6px 6px;
}
div.server-view-main div.body {
	border-color: var(--color-bg2);
	border-style: solid;
	border-width: 0 1px 1px 1px;
	background: none repeat scroll 0 0 var(--color-bg3);
	width: 358px;
}

div.server-view-main div.actions {
	border-color: var(--color-bg2);
	border-style: solid;
	border-width: 0 1px 1px 1px;
	background: none repeat scroll 0 0 var(--color-bg3);
	width: 358px;
}

div.server-view-wrapper table {
	width: 100%;
	border-spacing: 0;
}
div.server-view-wrapper table td {
	padding: 0.3em;
}
div.server-view-wrapper table td {
	width: 130px;
	padding: 0.5em;
}
div.server-view-wrapper table td {
	border-top: 1px solid var(--color-bg1);
}
div.server-view-wrapper table tr.first td {
	border-top: 0 !important;
}
div.server-view-main div.body table td.cell1,
div.server-view-main div.actions table td.cell1 {
	width: 35%;
}

div.server-view-right {
	float: left;
	margin-top: 33px;
	padding-left: 2px;
	width: 300px;
}
/*div.server-view-right div.head {
	width: 288px;
	background: none repeat scroll 0 0 #3D5770;
	font-weight: bold;
	padding: 6px 6px 2px 6px;
	border-color: #678099;
	border-style: solid;
	border-width: 1px 1px 1px 0;
	text-align: right;
}*/
div.server-view-right div.body {
	border-color: var(--color-bg1);
	border-style: solid;
	border-width: 1px 1px 1px 0;
	background: none repeat scroll 0 0 #42586F;
	/* font-size: 11px; */
}

div.server-view-right div.body table td.cell1 {
	width: 50%;
	padding-left: 1em;
}
div.server-view-right div.body td {
	padding: 0.3em;
}

/**
 * Bank batch prepare - from old style rev. 45214 and rev. 45456
 */
 .key-value {
	display: flex;
	flex-direction: row;
	width: 100%;
	/* border: 1px red solid; */
}
.key-value div {
	padding-left: 5px;
}
.key-value > div:nth-of-type(1) {
	width: 30%;
	white-space: nowrap;
}
.key-value > div:nth-of-type(2) {
	width: 70%;
	background-color: #ddd;
}
.key-value:hover div {
	background-color: #1777BB;
	color: #fff;
}

/**
 * Password tools
 */
.password-meter-level-1,
.password-meter-level-2,
.password-meter-level-3,
.password-meter-level-4 {
	background-color: var(--color-bg);
}
/**
 * Switch buttons
 */
div.switch,
div.SmartSwitch,
div.switch-js {
	background: var(--color-bg0);
}
div.switch div.selected,
div.SmartSwitch div.selected,
div.switch-js div.selected {
	background: var(--color-bg1) !important;
}
.switch-button {
	background-color: var(--color-bg);
}
.switch-button2 {
	display: inline-block;
	cursor: pointer;
	background-color: transparent;
	width: 50px;
	height: 22px;
	border-radius: 5px;
	border: 1px #3D5770 solid;
	border-right-color: #666;
	border-bottom-color: #666;
	border-left-color: black;
	border-top-color: black;
	transition: all 0.5s;
}
.switch-button2.switch-button-on {
	background-color: var(--color-bgGreen);
}
.switch-button2.switch-button2-disabled {
	cursor: not-allowed;
	opacity: 0.45;
	filter: grayscale(35%);
}
.switch-button2.switch-button2-disabled.switch-button-on {
	background-color: var(--color-bg2);
}
.switch-button2 .switch-button-lever {
	width: 16px;
	height: 16px;
	background-color: var(--color-bg3);
	border-radius: 5px;
	border: 1px #666 solid;
	position: relative;
	top: 2px;
	left: 4px;
	box-shadow: -2px 0px 1px black;
	padding-right: 3px;
	transition: all 0.5s;
}
.switch-button2 .switch-button-lever .switch-button-lever-bar {
	display: inline-block;
	background-color: var(--color-bg);
	width: 2px;
	height: 11px;
	margin-left: 3px;
	margin-bottom: 4px;
	top: 2px;
	position: relative;
	box-shadow: -1px 1px 1px #555;
	transition: all 0.5s;
}
.switch-button2 .switch-button-lever-on {
	left: 25px;
	box-shadow: 2px 0px 1px black;
	padding-left: 0px;
}
.switch-button2.switch-button-on .switch-button-lever-bar {
	background-color: var(--color-bgGreen);
	box-shadow: 1px 1px 1px #555;
}
.switch-button2.switch-button2-disabled .switch-button-lever-bar {
	background-color: var(--color-bg);
}

.customer-settings-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 6px 12px;
	width: 100%;
}

.customer-settings-list-item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	min-width: 0;
}

.customer-settings-list-item .switch-button2 {
	flex: 0 0 auto;
}

.customer-settings-list-label {
	display: inline-block;
	line-height: 1.3;
	word-break: break-word;
}

/**
 * Gadgets
 */
#workspace div.gadgets {
	margin: 0px;
	padding: 30px 0px;
	width: 33.333333%;
	float: left;
}
#workspace div.gadgets div.gadget {
	background-color: var(--color-bg0);
	width: calc(100% - 20px);
	margin-bottom: 26px;
}
#workspace div.gadgets div.gadget .head,
#workspace div.gadgets div.gadget .foot {
	background: none !important;
	padding-left: 10px;
}
#workspace div.gadgets div.gadget .body {
	padding: 10px;
}
#workspace div.gadgets div.gadget .body ul {
	/* margin-left: 5px; */
}
#workspace div.gadget div.head span.text,
#workspace div.gadgetL div.head span.text,
#workspace div.gadgetLong div.head span.text {
	background: none;
}
#workspace div.gadget div.head span.text {
	padding-left: 5px;
}
#workspace div.gadgets div.gadget div.head a,
#workspace div.gadgets div.gadget div.head a:visited {
	color: var(--color-text);
}
#workspace div.gadget div.head span.img,
#workspace div.gadgetL div.head span.img,
#workspace div.gadgetLong div.head span.img {
	background-color: var(--color-bg0);
	width: 60px;
	height: 40px;
	border-radius: 20px 20px 0px 0px;
	top: -16px;
	left: 0px;
}
#workspace div.gadgetL {
	background-color: var(--color-bg0);
	/* width: calc(100% - 20px) !important; */
	width: 100%;
	margin: 0px 0px !important;
	margin-top: 30px !important;
}
#workspace div.gadget,
#workspace div.gadgetL,
#workspace div.gadgetLong {
	border: 1px solid var(--color-border);
	clear: both;
}
#workspace div.gadgetL .head {
	/* background: var(--color-bg0) !important; */
	background: none !important;
	height: 30px !important;
	padding: 0px !important;
}
#workspace div.gadgetL .head .news-icon {
	color: var(--color-text);
	/* font-size: 40px; */
	position: relative;
	/* top: -24px; */
	/* border: 10px var(--color-bg0) solid; */
	border-bottom: 0px;
	background-color: var(--color-bg0);
	border-radius: 20px;
	margin-left: 10px;
}
#workspace div.gadgetL .head .text {
	color: var(--color-text1);
    /* font-size: 14px; */
	background: none !important;
	position: relative;
	/* top: -24px; */
	color: var(--color-text);
	margin-left: 5px;
}
#workspace div.gadget .head .expand,
#workspace div.gadgetL .head .expand {
	background: none !important;
	color: var(--color-text) !important;
	/* font-size: 20px; */
	/* position: relative !important; */
	margin-top: 4px;
}
#workspace div.gadget .head .expand {
	margin-top: 2px;
}
#workspace div.gadget .head .expand-opened,
#workspace div.gadget .head .expand-closed,
#workspace div.gadgetL .head .expand-opened,
#workspace div.gadgetL .head .expand-closed {
	color: var(--color-text);
}
#workspace div.gadget div.head,
#workspace div.gadgetL div.head,
#workspace div.gadgetLong div.head {
	background-color: var(--color-bg0);
	color: var(--color-text);
	line-height: 30px;
}
#workspace div.gadget div.head .text,
#workspace div.gadgetL div.head .text,
#workspace div.gadgetLong div.head .text {
	text-transform: uppercase;
}
#workspace div.gadget div.head .expand,
#workspace div.gadgetL div.head .expand,
#workspace div.gadgetLong div.head .expand {
	float: right;
	margin: 0px;
	margin-right: 7px;
}
#workspace div.gadget div.body,
#workspace div.gadgetL div.body,
#workspace div.gadgetLong div.body {
	background-color: var(--color-bg4);
	color: var(--color-text2);
	padding: 10px;
}
#workspace div.gadget div.body ul,
#workspace div.gadgetL div.body ul,
#workspace div.gadgetLong div.body ul {
	/* margin-left: 10px; */
	margin: 0px;
	padding: 0px;
	padding-left: 10px;
}
#workspace div.gadget div.body ul li,
#workspace div.gadgetL div.body ul li,
#workspace div.gadgetLong div.body ul li {
	background: none !important;
	padding-left: 10px;
}
#workspace div.gadget div.body ul li::marker,
#workspace div.gadgetL div.body ul li::marker,
#workspace div.gadgetLong div.body ul li::marker {
	font-family: var(--font-awesome);
	content: "\f04b";
	display: inline-block;
	width: 20px;
	height: 20px;
	font-weight: 900;
	color: var(--color-bg2);
}
#workspace .gadget .head .expand .expand-closed,
#workspace .gadgetL .head .expand .expand-closed {
	display: none;
}
#workspace .gadget .head.closed .expand .expand-closed,
#workspace .gadgetL .head.closed .expand .expand-closed {
	display: inline-block;
}
#workspace .gadget .head.closed .expand .expand-opened,
#workspace .gadgetL .head.closed .expand .expand-opened {
	display: none;
}
#workspace .gadgetL .foot {
	background: none !important;
}
#dashboardContent {
	margin: 10px 0px;
}

.ui-widget.ui-widget-content {
	background: var(--color-bg);
}
.ui-widget-header {
	background: var(--color-bg0);
	color: var(--color-text);
}
.ui-widget-content {
	background: var(--color-bg3);
	color: var(--color-text2);
}
.ui-dialog input.input,
.ui-dialog select.input {
	background-color: var(--color-bg);
	border: none;
	color: var(--color-text2);
}
.ui-datepicker table {
	font-size: var(--font-size);
}
.ui-datepicker .ui-datepicker-title select {
	font-size: var(--font-size);
}
.ui-state-default,
.ui-widget-content .ui-state-default {
	text-align: center;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	background: var(--color-bg0);
	border: 1px solid var(--color-bgBlueDark);
}
.ui-datepicker .ui-datepicker-current-day .ui-state-default {
	background: var(--color-bg1);
	border: 1px var(--color-text-green) solid;
}
.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-header .ui-state-highlight {
	border: 1px var(--color-bgOrange) solid;
}
.ui-dialog .ui-dialog-buttonpane button {
	background: var(--color-bg0);
	border: 1px solid var(--color-bgBlueDark);
	color: var(--color-text);
}
.ui-dialog a,
.ui-dialog a:visited {
	color: var(--color-text2);
}
.ui-dialog a:hover {
	color: var(--color-button-text-hover);
}

.dialog-text {
	text-align: justify;
}
.dialog-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0px;
}

#site-search .search-input {
	background: var(--color-bg0);
	color: var(--color-text);
	padding: 5px 10px 5px 22px;
	width: 55px;
	z-index: 1;
	position: relative;
	left: -20px;
	transition: none;
}
#site-search .search-icon {
	z-index: 2;
	position: relative;
}
#workspace .header.search-enabled .header-item:not(.search-box) {
	display: none;
}
#workspace .header.search-enabled .search-box {
	/* border: 1px red solid; */
	width: 99%;
}
#workspace .header.search-enabled .search-box .text {
	width: 98%;
}
#workspace .header.search-enabled .search-input {
	width: 90%;
	/* font-size: 18px; */
	padding: 5px 10px 5px 22px;
}
#subnavigation {
	background-color: var(--color-bg0);
}
#workspace .content .switch a,
#workspace .content .switch a:visited {
	color: var(--color-text);
	text-decoration: none;
}
#workspace .content .switch a:hover {
	color: var(--color-text1);
}
#workspace table th div.actions {
	height: auto;
	min-height: 14px;
}
.ui-widget {
	font-size: var(--font-size);
}
.qtip-default {
	background-color: var(--color-bg);
	border: 1px var(--color-bg0) solid;
	color: var(--color-text2);
	max-width: fit-content;
}
span.popup-info2 {
	cursor: help;
	text-decoration: none;
	border-bottom: 1px dotted var(--color-text2);
}
.invoice-popup-info,
span.invoice-popup-info,
span.invoice-popup-info a,
span.invoice-popup-info a:visited,
#workspace .content span.invoice-popup-info a {
	border: none;
	text-decoration: none;
}
#workspace .content a:has(i) {
	border: none;
	text-decoration: none;
}
.green, a.green {
	color: var(--color-text-green);
}
a.green:hover {
	text-decoration: none !important;
}
.red, a.red {
	color: var(--color-text-red);
}
a.red:hover {
	text-decoration: none !important;
}

.lightRed, a.lightRed {
	color: var(--color-text-orange); /* TODO */
}
a.lightRed:hover {
	text-decoration: none !important;
}

.lightGreen, a.lightGreen {
	color: var(--color-text-green); /* TODO */
}
a.lightGreen:hover {
	text-decoration: none !important;
}
ul.li li {
	background: none;
	padding-left: 3px;
}
ul.li li::before {
	font-family: var(--font-awesome);
	content: "\f04b";
	display: inline-block;
	width: 20px;
	height: 20px;
	font-weight: 900;
}
#searchQueryInput {
	padding: 5px 10px;
}
#newsList .newsDate {
	margin-right: 10px;
}
.switch-boxes {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px;
}
.switch-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
}
.bulk-enabled-show {
	display: none;
}
/* ----------------------------------------------------
   99 - RESPONSIVE
   */
@media (min-width: 1201px) {
	.mobile-only-visible {
		display: none !important;
	}
	.hide-to-1200 {
		display: none !important;
	}
}

@media (max-width: 1500px) {
	.medium-only-visible {
		display: none !important;
	}
	.hide-to-1500 {
		display: none !important;
	}
}

@media (max-width: 1900px) {
	.full-only-visible {
		display: none !important;
	}
	.icon-to-1900 .icon-text-link-text,
	.icon-to-1900 .icon-text-onclick-title {
		display: none;
	}
	.hide-to-1900 {
		display: none !important;
	}
}

@media (max-width: 1700px) {
	.icon-to-1700 .icon-text-link-text,
	.icon-to-1700 .icon-text-onclick-title {
		display: none;
	}
	.hide-to-1700 {
		display: none !important;
	}
}

@media (max-width: 1600px) {
	.icon-to-1600 .icon-text-link-text,
	.icon-to-1600 .icon-text-onclick-title {
		display: none;
	}
	.hide-to-1600 {
		display: none !important;
	}
}

@media (max-width: 1500px) {
	.icon-to-1500 .icon-text-link-text,
	.icon-to-1500 .icon-text-onclick-title {
		display: none;
	}
	.hide-to-1500 {
		display: none !important;
	}
}

@media (max-width: 1400px) {
	/*
	#workspace .header {
		flex-wrap: wrap;
		justify-content: end;
	}
	#workspace .header .header-item {
		width: calc(25% - 20px);
		line-height: calc(var(--header-height) / 2);
	}
	*/
	.icon-to-1400 .icon-text-link-text,
	.icon-to-1400 .icon-text-onclick-title {
		display: none;
	}
	.hide-to-1400 {
		display: none !important;
	}
}
@media (max-width: 1200px) {
	#layout {
		flex-direction: column;
	}
	#menu-primary {
		flex-direction: row;
		width: auto;
		flex-wrap: wrap;
		justify-content: end;
	}
	#menu-primary .menu-item {
		border-right: none;
		width: 100px;
		height: 100px;
	}
	#menu-primary .menu-item:hover {
		border-right: none;
	}
	#menu-primary .menu-logo {
		height: auto;
	}
	#menu-secondary {
		width: 100%;
	}
	#workspace {
		width: 100%;
	}
	#workspace .header {
		padding-left: 10px;
		padding-right: 10px;
		height: auto;
		justify-content: space-between;
	}
	#workspace .header .header-item {
		width: auto;
		margin-left: 10px;
		margin-right: 10px;
	}
	.mobile-default-hide {
		display: none !important;
	}
	#login-header {
		flex-wrap: wrap;
		height: auto;
	}
	#login-header .header-item {
		padding: 0px;
		line-height: 300%;
	}
	#internal-note {
		width: calc(100% - 20px); /* minus padding left+right */
	}
	.icon-to-1200 .icon-text-link-text,
	.icon-to-1200 .icon-text-onclick-title {
		display: none;
	}
	.hide-to-1200 {
		display: none !important;
	}
}

@media (max-width: 800px) {
	.tabs .centerbox,
	.tabs2 .centerbox {
		width: 90%;
	}
	.centerbox-3-col {
		display: flex;
		flex-direction: column;
		padding: 20px 0px;
	}
	.centerbox-3-col div:nth-child(1),
	.centerbox-3-col div:nth-child(2),
	.centerbox-3-col div:nth-child(3) {
		width: 90%;
		margin: 0px auto;
	}
	.icon-to-800 .icon-text-link-text,
	.icon-to-800 .icon-text-onclick-title {
		display: none;
	}
	.hide-to-800 {
		display: none !important;
	}
}

@media (max-width: 700px) {
	.hide-to-700 {
		display: none !important;
	}
}

@media (max-width: 600px) {
	#login-logo {
		flex-direction: column;
		justify-content: center;
		padding: 0px;
		gap: 0px;
	}
	#login-logo .label {
		border: none;
		border-top: 2px var(--color-text) solid;
		width: 90%;
		max-width: 500px;
		padding: 0px;
		text-align: center;
	}
	#login-form {
		background: none;
		box-shadow: none;
		margin-top: 0px;
	}
	#login-form .login-row {
		flex-direction: column;
	}
	#login-form .login-label {
		flex-basis: 30px;
	}
	#login-form .login-input {
		width: 100%;
		text-align: center;
	}
	#login-form input {
		width: 90%;
	}
	.platon-bg-shape {
		width: 100vw;
		height: 100vw;
	}
	.icon-to-600 .icon-text-link-text,
	.icon-to-600 .icon-text-onclick-title {
		display: none;
	}
	.hide-to-600 {
		display: none !important;
	}
}

#workspace .header {
	container-type: inline-size;
}
.content {
	container-type: inline-size;
}
@container (max-width: 1500px) {
	.content-top-right.newline-in-1500 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 1400px) {
	.content-top-right.newline-in-1400 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 1300px) {
	.content-top-right.newline-in-1300 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 1200px) {
	.content-top-right.newline-in-1200 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 1100px) {
	.content-top-right.newline-in-1100 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 1070px) {
	#site-search .search-input {
		width: 0px;
		padding: 0px;
	}
}
@container (max-width: 1000px) {
	.content-top-right.newline-in-1000 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 980px) {
	.header-language > .text {
		display: none;
	}
}
@container (max-width: 955px) {
	.header-helpdesk > .text {
		display: none;
	}
}
@container (max-width: 900px) {
	.content-top-right.newline-in-900 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 885px) {
	.header-user > .text {
		display: none;
	}
}
@container (max-width: 830px) {
	.header-tools > .text {
		display: none;
	}
}
@container (max-width: 800px) {
	.content-top-right.newline-in-800 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 700px) {
	.content-top-right.newline-in-700 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 600px) {
	.content-top-right.newline-in-600 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@container (max-width: 500px) {
	.content-top-right.newline-in-500 {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-bottom: 20px;
	}
}
@media (max-width: 1200px) {
	.header-language > .text,
	.header-helpdesk > .text,
	.header-user > .text,
	.header-tools > .text {
		display: none;
	}
	.rows-to-1200 {
		flex-direction: column;
		align-items: stretch;
	}
	.order-1-to-1200 {
		order: 1;
	}
	.order-2-to-1200 {
		order: 2;
	}
	.order-3-to-1200 {
		order: 3;
	}
}
@media (max-width: 900px) {
	.header-email > .text {
		display: none;
	}
	.rows-to-900 {
		flex-direction: column;
		align-items: stretch;
	}
	.order-1-to-900 {
		order: 1;
	}
	.order-2-to-900 {
		order: 2;
	}
	.order-3-to-900 {
		order: 3;
	}
}
@media (max-width: 800px) {
	.header-phone > .text {
		display: none;
	}
	.rows-to-800 {
		flex-direction: column;
		align-items: stretch;
	}
	.order-1-to-800 {
		order: 1;
	}
	.order-2-to-800 {
		order: 2;
	}
	.order-3-to-800 {
		order: 3;
	}
}
@media (max-width: 700px) {
	#main_menu_action > .text {
		display: none;
	}
	.rows-to-700 {
		flex-direction: column;
		align-items: stretch;
	}
	.order-1-to-700 {
		order: 1;
	}
	.order-2-to-700 {
		order: 2;
	}
	.order-3-to-700 {
		order: 3;
	}
}
@media (max-width: 600px) {
	.rows-to-600 {
		flex-direction: column;
		align-items: stretch;
	}
	.order-1-to-600 {
		order: 1;
	}
	.order-2-to-600 {
		order: 2;
	}
	.order-3-to-600 {
		order: 3;
	}
}
@media (max-width: 500px) {
	#workspace .header .header-sitemap,
	#workspace .header .header-helpdesk {
		display: none;
	}
	.header-popup {
		left: 0px;
		width: 100vw;
		padding-left: 20px;
	}
	.rows-to-500 {
		flex-direction: column;
		align-items: stretch;
	}
	.order-1-to-500 {
		order: 1;
	}
	.order-2-to-500 {
		order: 2;
	}
	.order-3-to-500 {
		order: 3;
	}
}

/* ----------------------------------------------------
   Monitoring
   */
.monitoring-domains .actions select {
	margin-right: 6px;
}
/* a row whose value wraps must not drag its label to the middle. The label cell
   carries padding and the value cell does not, so aligning to the top needs
   both of them padded the same, otherwise the label drops half a line */
table.monitoring-host td {
	vertical-align: top;
	padding-top: 0.5em;
}
/* the same for the web check form, where the label cell is padded by 6px */
table.monitoring-form td {
	vertical-align: top;
	padding-top: 6px;
}
/* the theme pads a cell holding a button differently and centres the label
   against it, both of which pull this label out of line. The button here only
   ever appears in a row that carries an explanation, so it loses the padding
   below it as well */
#workspace .content table.monitoring-host tr td:has(.icon-text-onclick) {
	padding: 0.5em 0.5em 0 0.5em;
}
table.monitoring-host tr:has(.icon-text-onclick) td.cell1 {
	line-height: inherit;
}
/* the explanation belongs to the row above it, so it hugs it instead of
   standing as far away as the next attribute does */
table.monitoring-host tr:has(+ tr > td[colspan]) td {
	padding-bottom: 0;
}
table.monitoring-host td[colspan] {
	padding: 2px 0.5em 0.5em 0.5em;
}
/* a long problem name is cut off rather than stretching the panel */
/* the list sits outside the table, so it repeats what the table indents by:
   table.tabsHoriz padding-left plus td.cell1 padding */
.monitoring-problems {
	padding-left: calc(10px + 0.5em);
}
.monitoring-problems > div {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ----------------------------------------------------
   XX - DEBUG
   */
input[type="color"] {
	cursor: pointer;
}