/*
 * 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
 *
 * 01 - FONTS
 * 02 - COLORS
 * 10 - GENERAL
 * 11 - LAYOUT
 * 15 - LOGIN PAGE
 * 20 - ICONS
 * 30 - BUTTONS
 * 35 - LABELS
 * 40 - LOG MESSAGES
 * 45 - REPORTS
 * 50 - JS TOOLS
 * 80 - SPECALS
 * 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);
}
.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);
}

/* ----------------------------------------------------
   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 {
	font-family: "Courier New", monospace, sans-serif;
}
.nowrap,
[nowrap="nowrap"] {
	white-space: nowrap;
}
.nowrap *,
[nowrap="nowrap"] * {
	display: inline-block;
}
.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;
}
.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;
}
#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;
}

.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,
#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-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;
}

/* ----------------------------------------------------
   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;
	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;
}
/* ----------------------------------------------------
   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;
}

/**
 * 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;
}


/**
 * 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-content {
	position: absolute;
	top: 0px; /* 120% */
	left: 50%; /* 50% */
	/* right: 0px; */
	width: min(400px, 90vw);
	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: nowrap; */
	/* 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
   */
.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 {
	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;
}

/* ----------------------------------------------------
   90 - LAST CLASS
   */
.hide,
#layout .hide,
#workspace .hide,
#workspace .content .hide {
	display: none;
}
.invisible {
	visibility: hidden;
	height: 0px;
}
.nopadding {
	padding: 0px !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;
}
.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 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);
}
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;
}
/* 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);
}
.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;
}
.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 */
.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: 100%;
}
input.default-value {
	color: var(--color-text-default);
}
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);
}
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-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;
}

/**
 * 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;
	}
}

@media (max-width: 1500px) {
	.medium-only-visible {
		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;
	}
}

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

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

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

@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;
	}
}
@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;
	}
}

@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;
	}
}

@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;
	}
}

#workspace .header {
	container-type: inline-size;
}
@container (max-width: 1070px) {
	#site-search .search-input {
		width: 0px;
		padding: 0px;
	}
}
@container (max-width: 980px) {
	.header-language > .text {
		display: none;
	}
}
@container (max-width: 955px) {
	.header-helpdesk > .text {
		display: none;
	}
}
@container (max-width: 885px) {
	.header-user > .text {
		display: none;
	}
}
@container (max-width: 830px) {
	.header-tools > .text {
		display: none;
	}
}
@media (max-width: 1200px) {
	.header-language > .text,
	.header-helpdesk > .text,
	.header-user > .text,
	.header-tools > .text {
		display: none;
	}
}
@media (max-width: 900px) {
	.header-email > .text {
		display: none;
	}
}
@media (max-width: 800px) {
	.header-phone > .text {
		display: none;
	}
}
@media (max-width: 700px) {
	#main_menu_action > .text {
		display: none;
	}
}
@media (max-width: 500px) {
	#workspace .header .header-sitemap,
	#workspace .header .header-helpdesk {
		display: none;
	}
	.header-popup {
		left: 0px;
		width: 100vw;
		padding-left: 20px;
	}
}

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