.modal-footer .agg-btn {
	line-height: 13px !important;
}

// 404 logo

#app div.resource-unavailable-image {
	background-size: contain !important;
}

//workflow 2fa begin

div.ant-modal-wrap > div > div.ant-modal-content td {
	width: fit-content !important;
}

div.ant-modal-wrap > div > div.ant-modal-content table {
	width: fit-content !important;
}

div.ant-modal-wrap div.ant-modal-content div.ant-modal-body div.component-scroll-container.narrow {
  width: fit-content !important;
  min-width: 350px !important;
}

.bottom-right {
	bottom: 50px!important;
}

.bell span {
	display: block;
  height: 24px;
  width: 24px;
}

.ant-modal-footer .modal-footer .secondary.medium {
  color: #343333;
  background-color: white;
  padding: 8px 32px;
  border: 1px solid #343333;
  font-size: 14px;
  font-weight: 400;
}

.table-hidden {
  display: none!important;
}

.table-visible {
  display: flex!important;
}

.ant-modal-footer .modal-footer .secondary.medium:hover {
	color: #F7562B;
  border: 1px solid #F7562B;
}

.ant-modal-footer .modal-footer .main.medium {
  color: white;
  background-color: #343333;
  padding: 8px 32px;
  font-size: 14px;
  font-weight: 400;
}

.ant-modal-footer .modal-footer .main.medium:hover {
	background-color: #F7562B;
}

.ant-modal-content button .ant-modal-close-x {
  padding: 2px;
  background-color: #3433330A;
  border-radius: 100px;
}

.ant-modal-content .help-text {
  background-color: white;
  font-style: inherit;
  font-size: 14px;
  color: #7E84A3;
  font-weight: 400;
}

.ant-modal-content .ant-modal-body .data-table-row {
  font-size: 14px;
}
// workflow 2fa end


.agg-textarea.agg-textarea {
	background: rgb(var(--bg))
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.dropdown-text-truncate {
	.ant-select-selection-item>span{
		white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
		width: calc(100% - 8px);
	}
}

#dataTableEditorDrawerUpload .component-system-button.round:nth-of-type(2),
#dataTableEditorDrawerUpload .component-system-button.round:nth-of-type(3) {
    display: none !important;
    pointer-events: none !important;
}

.dockable-popup.modal-code-editor .modal-container {
	height: 100% !important;
}

:root {
	--bg: 255, 255, 255;
	--main: 52, 52, 51;
	--text: 52, 52, 51;
	--accent: 227, 6, 19;
	--active: 234, 86, 13;
	--secondary: 229, 229, 229;
	--incident: 235, 85, 139;
	--success: 63, 191, 88;
	--outline: rgba(0, 32, 51, 0.5);
	--info: 160, 123, 235;
	--h1: 90, 96, 127;
	--h2: 126, 132, 163;
	--bg-secondary: 250, 250, 250;
	--border-radius-btn: 4px;
	--border-radius-panel: 16px;
	font-family: Roboto;
}

/* Стили для кнопки "OK" в модальном окне */
.dockable-popup.message-popup .modal-footer > .agg-btn.main.medium {
    background: rgb(var(--main)) !important;
    color: rgb(var(--bg)) !important;
    font-family: "Roboto" !important;
    font-size: 14px !important;
    line-height: 18px !important;
    border-radius: var(--border-radius-btn) !important;
}

body {
	background-color: rgb(var(--bg));
}

div.js-panel,
div.ui-component,
div.js-label,
div.ant-table {
	background-color: rgb(var(--bg));
}

.agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n) .ant-table-cell-fix-left,
.agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n+1) .ant-table-cell-fix-left {
	background: rgb(var(--bg));
}

#numberFieldsetPointMin .ant-input-number-group-wrapper.agg-input:has(.ant-input-number-focused) .ant-input-number-wrapper {
	box-shadow: none;
	border-radius: none;
}

#numberFieldsetPointMax .ant-input-number-group-wrapper.agg-input:has(.ant-input-number-focused) .ant-input-number-wrapper {
	box-shadow: none;
	border-radius: none;
}

div#labelCurrentParameterValue {
    height: 32px;
}

.container-grid {
	background-color: rgb(var(--bg)) !important;
}

.custom-table-notifications .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n) .ant-table-cell-fix-right,
.custom-table-notifications .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n+1) .ant-table-cell-fix-right {
	background-color: transparent !important;
}

.custom-table-notifications .agg-table-wrapper .ant-table-body .ant-table-tbody>tr.ant-table-row:hover>td.ant-table-cell-fix-right {
	background: transparent !important;
}

.agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n) .ant-table-cell-fix-right,
.agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n+1) .ant-table-cell-fix-right {
	background-color: rgb(var(--bg)) !important;
}

.agg-table-wrapper .ant-table-body .ant-table-tbody>tr.ant-table-row:hover>td.ant-table-cell-fix-left,
.agg-table-wrapper .ant-table-body .ant-table-tbody>tr.ant-table-row:hover>td.ant-table-cell-fix-right {
	background: rgb(var(--secondary)) !important;
}

.ant-drawer-body {
	background: rgb(var(--bg));
}

.drawer-panel {
	font-family: Roboto;
}

body {
	max-width: 100% !important;
}

.admin-page-button.admin-page-install {
	display: none;
}

/* QR screen */
.ui-component.js-htmlSnippet.qr-snip {
	border-radius: var(--border-radius-panel);
}

.header {
	font-size: 32px;
	font-weight: 900;
	font-family: Roboto;
	line-height: 42px;
	color: rgb(var(--text));
	text-align: center;
}

.first {
	margin-top: 40px;
}

.subheader {
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	color: rgb(var(--h2));
	text-align: center;
	margin-top: 4px;
}

.camera_view {
	width: 320px;
	height: 320px;
	background: rgb(var(--main));
	border-radius: 32px;
	margin: 24px auto;
	position: relative;

}

.inner_view {
	width: 304px;
	height: 304px;
	background-color: rgba(var(--bg), 0.8);
	z-index: 2;
	border-radius: 20px;
	position: absolute;
	top: 8px;
	left: 8px;
	mask-image: url("/web/static/images/focus.png");
	mask-repeat: no-repeat;
}

#canvas {
	z-index: 10;
}

.qr_input {
	display: block;
	width: 524px;
	height: 48px;
	background: rgb(var(--secondary));
	border-radius: 8px;
	border: none;
	padding: 20px;
	font-family: monospace;
	font-size: 21px;
	letter-spacing: 8px;
	/* background: repeating-linear-gradient(to right,#8e8f99 0 1ch,transparent 1ch calc(1ch + 8px)) */
	/* bottom/70% 2px content-box no-repeat; */
}

.outer_input {
	display: block;
	margin: 16px auto 32px auto;
	width: 524px;
	background: rgb(var(--secondary));
	border-radius: 8px;
}

.non_outline {
	display: block;
	margin: auto;
	width: 224px;
	font-size: 16px;
	font-weight: 400;
	color: rgb(var(--text));
	line-height: 20px;
	padding: 10px 16px 10px 40px;
	border: none;
	border-radius: var(--border-radius-btn);
	background: none;
	position: relative;
	cursor: pointer;
}

.non_outline:hover {
	color: rgb(var(--accent));
	border-radius: var(--border-radius-btn);
	background: rgba(var(--accent), 0.16);
	transition: all ease 0.3s;
}

.non_outline:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 20px;
	height: 20px;
	background-image: url("/web/static/images/ic_warning_o_24.svg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
	margin-left: -100px;
}

.non_outline:hover:before {
	-webkit-mask-image: url("/web/static/images/ic_warning_o_24.svg");
	background-color: rgb(var(--accent));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	transition: all ease 0.3s;
}

.outline {
	display: block;
	margin: 16px auto;
	width: 114px;
	font-size: 16px;
	font-weight: 400;
	color: rgb(var(--text));
	line-height: 20px;
	padding: 10px 16px 10px 40px;
	border: 1px solid rgb(var(--main));
	border-radius: var(--border-radius-btn);
	background: none;
	position: relative;
	cursor: pointer;
}

.outline:hover {
	border: 1px solid rgb(var(--accent));
	color: rgb(var(--accent));
	transition: all ease 0.3s;
}

.outline:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 20px;
	height: 20px;
	-webkit-mask-image: url("/web/static/images/ic_arrow_full_right_24.svg");
	background-color: rgb(var(--text));
	background-image: none;
	background-position: center;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 50%;
	margin-left: -45px;
}

.outline:hover:before {
	-webkit-mask-image: url("/web/static/images/ic_arrow_full_right_24.svg");
	background-color: rgb(var(--accent));
	background-image: none;
	transition: all ease 0.3s;
}

/* Vertical menu */
#menuVertical ul,
#menuVerticalStyle ul {
	display: flex;
	z-index: 20;
	flex-direction: column;
}

#menuVertical .agg-menu-item,
#menuVerticalStyle .agg-menu-item {
	flex-direction: row;
	line-height: 16px;
	padding: 12px 12px 12px 0;
}

#menuVertical .agg-menu-item-value,
#menuVerticalStyle .agg-menu-item-value {
	padding-left: 12px;
}

.ant-menu-light .ant-menu-item {
	color: rgb(var(--h2));
	height: 44px;
}

.ant-menu-item-selected span.agg-menu-item-value {
	color: rgb(var(--accent));
}

.ant-menu-light .ant-menu-item-active,
.ant-menu-light .ant-menu-item:hover,
.ant-menu-light .ant-menu-submenu-active,
.ant-menu-light .ant-menu-submenu-title:hover,
.ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open {
	color: rgb(var(--accent));
	background: rgb(var(--secondary));
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected:hover:nth-child(1) {
	background: rgb(var(--secondary));
}

.ant-menu-item.ant-menu-item-only-child.menu-component-menu-item:nth-child(1) {
	border-bottom: 1px solid rgb(var(--secondary));
}

.ant-menu-item.ant-menu-item-only-child.menu-component-menu-item:nth-child(2) {
	border-bottom: 1px solid rgb(var(--secondary));
}

#menuVertical .ant-menu-item.ant-menu-item-only-child.menu-component-menu-item,
#menuVerticalStyle .ant-menu-item.ant-menu-item-only-child.menu-component-menu-item {
	padding-left: 0;
}

.main.collapse #menuVertical .agg-menu-item-value {
	display: none;
}

.main:not(.collapse) #menuVertical .agg-menu-item-icon::after {
  display: none !important;
}

body:has(.collapse) .ant-menu-item.ant-menu-item-only-child.menu-component-menu-item:nth-child(1),
body:has(.collapse) .ant-menu-item.ant-menu-item-only-child.menu-component-menu-item:nth-child(2) {
	border-bottom: none;
}

.ant-menu-light .ant-menu-item:active,
.ant-menu-light .ant-menu-submenu-title:active {
	color: rgb(var(--accent));
	background: none;
	transition: all ease 0.3s;
}

.ant-menu-item-selected {
	color: rgb(var(--text));
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
	background: none;
	transition: all ease 0.3s;
}

.ant-menu-light .ant-menu-item:nth-child(1) .agg-menu-item-icon.with-value:before {
	content: "";
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("/web/static/images/ic_map_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.ant-menu-light .ant-menu-item:nth-child(2) .agg-menu-item-icon.with-value:before {
	content: "";
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("/web/static/images/ic_plug_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.ant-menu-light .ant-menu-item:nth-child(3) .agg-menu-item-icon.with-value:before {
	content: "";
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("/web/static/images/ic_charging_station_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.ant-menu-light .ant-menu-item:nth-child(4) .agg-menu-item-icon.with-value:before {
	content: "";
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("/web/static/images/ic_administration_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.ant-menu-light .ant-menu-item:nth-child(5) .agg-menu-item-icon.with-value:before {
	content: "";
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("/web/static/images/ic_analysis_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.ant-menu-light .ant-menu-item:hover .agg-menu-item-icon.with-value:before {
	background-color: rgb(var(--accent));
	transition: all ease 0.3s;
}

.ant-menu-light .ant-menu-item:nth-child(1):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-selected:nth-child(1) .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item:nth-child(2):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-selected:nth-child(2) .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item:nth-child(3):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-selected:nth-child(3) .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item:nth-child(4):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-selected:nth-child(4) .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item:nth-child(5):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-selected:nth-child(5) .agg-menu-item-icon.with-value:before {
	background-color: rgb(var(--accent));
	transition: all ease 0.3s;
}

.ant-menu-light .ant-menu-item:nth-child(1):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-disabled:nth-child(1) .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item:nth-child(2):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-disabled:nth-child(2) .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item:nth-child(3):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-disabled:nth-child(3) .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item:nth-child(4):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-disabled:nth-child(4) .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item:nth-child(5):active .agg-menu-item-icon.with-value:before,
.ant-menu-light .ant-menu-item-disabled:nth-child(5) .agg-menu-item-icon.with-value:before {
	background-color: rgb(var(--h2)) !important;
}

.ant-menu-light .ant-menu-item:nth-child(5) {
	bottom: 0;
	margin-top: auto;
}

.icon-btn .medium {
	min-width: 48px;
	height: 48px;
	color: rgb(var(--h2));
}

#panelMenuUp {
	box-shadow: 0px 0px 8px 0px rgba(90, 96, 127, 0.24);
	z-index: 200;
}

.ava-img .image-component-container img {
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	z-index: 40;
	position: relative;
}

.ava-img .image-component-container {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	margin: auto;
}

.ava-img .image-component-container:before {
	content: "";
	display: block;
	position: absolute;
	background: url("/web/static/images/no_user.png");
	margin: auto;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	background-size: cover;
	filter: blur(4px);
}



#labelLang span {
	color: rgba(var(--text), 0.8);
	font-size: 14px;
	font-weight: 900;
	line-height: 16px;
}

#labelLang .component-label-container {
	margin: auto;
}

#labelLang {
	border-left: 1px solid rgb(var(--secondary));
	border-right: 1px solid rgb(var(--secondary));
	height: 24px;
	margin: auto;
}

.lang .ant-select-single.ant-select-open .ant-select-selection-item,
.lang .ant-select-single .ant-select-selection-item {
	color: rgba(var(--text), 0.8);
	font-size: 14px;
	font-weight: 900;
	line-height: 16px;
}

.lang .ant-select {
	background-color: rgb(var(--bg));
	border: none;
}

.ui-component.js-dropdownList.lang {
	border-left: 1px solid rgb(var(--secondary));
	border-right: 1px solid rgb(var(--secondary));
}

.label-notice>div>div {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	background: rgb(var(--active));
	width: fit-content;
	aspect-ratio: 1;
	border-radius: 10px;
}

.label-notice span {
	color: rgb(var(--bg));
	font-size: 12px;
	font-weight: 600;
}

#menuVertical .ant-menu,
#menuVerticalStyle .ant-menu {
	background: rgb(var(--bg));
	border-right: 1px solid rgb(var(--secondary));
	height: 100%;
}

/* Lang combobox */
#dropdownListLang single:not(.ant-select-customize-input) .ant-select-selector,
.ant-select.default .ant-select-selector,
.ant-select.default.ant-select-single .ant-select-selector,
.ant-select:not(.ant-select-customize-input).default .ant-select-selector {
	padding: 0;
	padding-left: 12px;
}

.lang .ant-select.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input),
.lang .ant-select.ant-select-open:not(.ant-select-disabled),
.lang .ant-select:hover.ant-select-open:not(.ant-select-disabled) {
	border-color: none;
	box-shadow: none;
}

.lang {
	margin-top: 12px;
	margin-bottom: 12px;
}

.lang .ant-select:hover:not(.lang .ant-select-disabled) {
	border: none;
	background: rgb(var(--bg-secondary));
	transition: all ease 0.3s;
}

.lang .ant-select-item.ant-select-item-option span {
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 400;
}

.lang.ant-select-dropdown .ant-select-item-option-selected {
	background-color: rgba(234, 86, 13, .13);
	border-left: none;
	box-shadow: inset 2px 0 0 0 rgb(var(--accent));
	color: rgb(var(--text));
	font-weight: 700;
	transition: .2s;
}

.lang.ant-select-dropdown .ant-select-item-option-selected span {
	font-weight: 700;
}

.lang.ant-select-dropdown {
	border: 1px solid rgb(var(--active));
	border-radius: var(--border-radius-btn);
}

.lang.ant-select-dropdown .ant-select-item-option-active:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 4px;
	width: 100%;
	height: 100%;
	background: rgba(var(--h2), 0.12);
	top: 0;
	left: 0;
}

/* Collapse button */

.collapseBtn .ant-checkbox.ant-checkbox {
	border: none;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	top: 0;
}

.collapseBtn .ant-checkbox-wrapper.agg-checkbox.component-checkbox {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 14px;
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABGSURBVHgB7dKxDQAQFATQ+yZhL5tIFBKb2ItJEIUYwG/IvepyxVUH0Pdkh5hLxRgWGkRaCt6taE7boUdzi27xRXSPL6IHTHM1Gv6eN5fCAAAAAElFTkSuQmCC");
	background-color: rgb(var(--h1));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.collapseBtn .ant-checkbox.ant-checkbox.ant-checkbox-checked {
	background-color: transparent;
	transition: all ease 0.3s;
}

.collapseBtn .ant-checkbox.ant-checkbox.ant-checkbox-checked:hover {
	background-color: transparent;
	transition: all ease 0.3s;
}

.collapseBtn .ant-checkbox-checked .ant-checkbox-inner:after {
	opacity: 0;
}

.collapseBtn .ant-checkbox-wrapper.agg-checkbox.component-checkbox:hover {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 14px;
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABGSURBVHgB7dKxDQAQFATQ+yZhL5tIFBKb2ItJEIUYwG/IvepyxVUH0Pdkh5hLxRgWGkRaCt6taE7boUdzi27xRXSPL6IHTHM1Gv6eN5fCAAAAAElFTkSuQmCC");
	background-color: rgb(var(--h2));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	transition: all ease 0.3s;
}

/* Avatar menu */
.avatarMenu.drawer-panel.ant-drawer-right .ant-drawer-content-wrapper {
	height: 235px;
	top: 52px;
	border-radius: var(--border-radius-panel);
}

.avatarMenu.ant-drawer-open {
	transform: translateX(-20px);
}

.drawer-panel.ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper {
	box-shadow: -8px 0 24px rgba(22, 29, 38, .4);
	transition: box-shadow ease .3s;
}

.avatarMenu .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.avatarMenu.drawer-panel .ant-drawer-mask {
	background-color: transparent;
}

.avatarMenu.drawer-panel.ant-drawer-right .ant-drawer-body {
	padding: 0;
	border-radius: var(--border-radius-panel);
	filter: drop-shadow(0 4px 16px rgba(90, 96, 127, 16%));
}

.avatarMenu div.ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

.drawerMenuLabel .component-label-container {
	margin-top: auto;
	margin-bottom: auto;
}

.drawerMenuLabel span {
	font-family: Roboto;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: rgb(var(--text));
}

.drawerMenuLabel.userLabel span {
	color: rgb(var(--h2));
}

#panelAvaName {
	text-align: center;
}

#panelAvaCenter,
#panelAvaFooter {
	text-align: right;
	padding-right: 16px;
}

#panelAvaCenter {
	border-top: 1px solid rgb(var(--secondary));
	border-bottom: 1px solid rgb(var(--secondary));
}

#panelAvaName {
	border-bottom: 1px solid rgb(var(--secondary));
}

/* Footer */
.copyright span {
	font-size: 16px;
	font-weight: 400;
	color: rgb(var(--h2));
}

/* Space dropdown */
.spaceList .ant-select-single:not(.spaceList .ant-select-customize-input),
.spaceList .ant-select.ant-select.default,
.spaceList .ant-select.default.ant-select-single {
	border-radius: var(--border-radius-btn);
	border: 1px solid rgb(var(--light-grey));
	background: rgb(var(--bg));
	font-family: "Roboto";
	color: rgb(var(--text));
	margin: auto;
}

.spaceList .ant-select .ant-select-selector .ant-select-selection-item {
	margin-left: 15px;
}

.spaceList .ant-select-single:not(.spaceList .ant-select-customize-input) .ant-select-selector,
.spaceList .ant-select.default .ant-select-selector,
.spaceList .ant-select.default.ant-select-single .ant-select-selector,
.spaceList .ant-select:not(.spaceList .ant-select-customize-input).default .ant-select-selector {
	font-size: 14px;
}

.spaceList .ant-select:hover:not(.spaceList .ant-select-disabled) {
	border: none;
	background: rgb(var(--bg));
	transition: all ease 0.3s;
}

.spaceList .ant-select.ant-select-focused:not(.spaceList .ant-select-disabled).ant-select:not(.spaceList .ant-select-customize-input),
.spaceList .ant-select.ant-select-open:not(.spaceList .ant-select-disabled),
.spaceList .ant-select:hover.ant-select-open:not(.spaceList .ant-select-disabled) {
	border-color: rgb(var(--active));
	box-shadow: 0 0 0 3px rgba(234, 86, 13, .4);
	transition: all ease 0.3s;
}

.spaceList .ant-select-disabled {
	background: #f5f5f5 !important;
	opacity: 1;
}

.spaceList .ant-select-item.ant-select-item-option span {
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 400;
}

.spaceList.ant-select-dropdown .ant-select-item-option-selected {
	background-color: rgba(234, 86, 13, .13);
	border-left: none;
	box-shadow: inset 2px 0 0 0 rgb(var(--accent));
	color: rgb(var(--text));
	font-weight: 700;
	transition: .2s;
}

.spaceList.ant-select-dropdown .ant-select-item-option-selected span {
	font-weight: 700;
}

.spaceList.ant-select-dropdown {
	border: 1px solid rgb(var(--active));
	border-radius: var(--border-radius-btn);
}

.spaceList.ant-select-dropdown .ant-select-item-option-active:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 4px;
	width: 100%;
	height: 100%;
	background: rgba(var(--h2), 0.12);
	top: 0;
	left: 0;
	transition: all ease 0.3s;
}

/* Modal notifications */
.modalNotifications.popup {
	position: absolute;
	width: 0;
	height: 0;
	z-index: 1000;
	top: 0;
  left: 50%;
	border-radius: var(--border-radius-panel);
  filter: drop-shadow(0 4px 16px rgba(90, 96, 127, 16%));
	padding: 24px;
	transition: all 0.4s ease-in-out;
	visibility: hidden;
	transform: scale(0.1);
}

.modalNotifications.popup-open {
	top: 50px;
	left: -400px;
	width: 400px;
	height: fit-content;
	visibility: visible;
	z-index: 1000;
	transform: scale(1);
}

/* Modal instructions */
.modalInst.popup {
	background: rgba(22, 29, 38, .85);
  width: 100vw;
  height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
  top: calc(100vh - 50%);
  left: calc(100vw - 50%);
  transform: translate(-600px, -300px);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}

.popup-bg {
	width: 540px;
	height: fit-content;
	padding: 24px;
	border-radius: var(--border-radius-panel);
  filter: drop-shadow(0 4px 16px rgba(90, 96, 127, 16%));
	background: white;
}

.modalInst .htmlSnippet1 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.modalInst.popup-open {
  visibility: visible;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
	z-index: 1000000000;
	grid-area: none;
}

.html-snippet {
	overflow: hidden;
}

table.iksweb {
	text-decoration: none;
	border: 0;
	border-spacing: 10px;
	border-collapse: separate;
	width: 100%;
	text-align: center;
}

table.iksweb td {
	white-space: pre-wrap;
	padding: 0px;
	line-height: 8px;
	vertical-align: middle;
}

table.iksweb td.table-download {
	background-color: rgb(var(--main));
	cursor: pointer;
	color: rgb(var(--bg));
	width: 98px;
	/* height: 32px; */
	border-radius: var(--border-radius-btn);
	font-family: Roboto;
	font-size: 14px;
	font-weight: 400;
}

table.iksweb td.table-download:hover {
	background-color: rgb(var(--accent));
	transition: 0.3s;
}

table.iksweb tr {
	height: 30px;
}

table.iksweb td.table-title {
	color: rgb(var(--text));
	width: auto;
	text-align: left;
	font-family: Roboto;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}

table.iksweb td a {
	text-decoration: none;
	color: rgb(var(--bg-сolor));
	display: flex;
  justify-content: center;
}

.modal_header {
	font-family: Roboto;
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: rgb(var(--text));
}

.close_btn {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	display: inline-block;
	float: right;
	width: 32px;
	height: 32px;
	background-color: rgba(51, 51, 51, 0.04);
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	transition: background 0.5s;
}

.close_btn:after,
.close_btn:before {
	position: absolute;
	content: "";
	background-color: rgb(var(--h2));
}

.close_btn:after {
	width: 2px;
	height: 15px;
	top: 9px;
	left: 16px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.close_btn:before {
	width: 15px;
	height: 2px;
	top: 15px;
	left: 9px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.close_btn:hover {
	background: rgb(var(--bg));
	box-shadow: none;
}

.close_btn:hover:after,
.close_btn:hover:before {
	background: rgb(var(--main));
}

/* Close drawer panel button */
.ui-component.js-button.close_drawer {
	position: relative;
	overflow: hidden;
}

.ui-component.js-button.close_drawer:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	background: rgba(var(--main), 0.04);
	top: 0;
	left: 0;
	cursor: pointer;
	pointer-events: none;
}

.close_drawer .tooltip-content-wrapper {
	overflow: hidden;
}

.ui-component.js-button.close_drawer:before {
	position: absolute;
	top: -9px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	content: "\00d7";
	/* use the hex value here... */
	font-size: 30px;
	color: rgba(var(--text), 0.75);
	text-align: center;
	pointer-events: none;
}

.ui-component.js-button.close_drawer:hover:before {
	color: rgba(var(--text), 1);
	transition: all ease 0.3s;
}

.close_drawer .agg-btn.simple:hover {
	background-color: transparent;
	transition: all ease 0.3s;
}

.secondary-label span.component-label {
	font-family: "Roboto";
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: rgb(var(--h2));
}

#buttonResetUserImg.ui-component.js-button.close_drawer:before {
	position: absolute;
	top: -8px;
	bottom: 0px;
}

/* Textarea */
.area-text textarea.ant-input.agg-textarea {
	background: rgb(var(--bg));
	border: 1px solid rgb(var(--secondary));
	border-radius: var(--border-radius-btn);
	font-size: 14px;
	font-family: "Roboto";
	color: rgb(var(--text));
}

.area-text textarea.ant-input.agg-textarea::placeholder {
	color: rgba(var(--h2), 0.8);
}

.agg-textarea:not(.agg-textarea-disabled):active,
.agg-textarea:not(.agg-textarea-disabled):focus {
	box-shadow: none;
	transition: all ease 0.3s;
}

.area-text textarea.ant-input.agg-textarea:hover {
	border: 1px solid rgb(var(--h2));
	transition: all ease 0.3s;
	background: rgb(var(--bg));
}

.area-text textarea.ant-input.agg-textarea:hover::placeholder {
	color: rgba(var(--h2), 1);
}

.area-text .agg-textarea:not(.agg-textarea-disabled):hover~.agg-textarea-resizer {
	background: rgb(var(--h2));
	transition: all ease 0.3s;
}

.area-text .agg-textarea:not(.agg-textarea-disabled):active~.agg-textarea-resizer,
.area-text .agg-textarea:not(.agg-textarea-disabled):focus~.agg-textarea-resizer {
	background: rgb(var(--active));
	transition: all ease 0.3s;
}

.area-text .agg-textarea:not(.agg-textarea-disabled):active::placeholder,
.area-text .agg-textarea:not(.agg-textarea-disabled):focus::placeholder {
	color: rgba(var(--h2), 0.8);
}

.area-text .tooltip-content-wrapper {
	overflow: visible;
}

.area-text .agg-textarea-wrapper .agg-textarea:not(.agg-textarea-disabled):active,
.area-text .agg-textarea-wrapper .agg-textarea:not(.agg-textarea-disabled):focus {
	border: 1px solid rgb(var(--active));
	box-shadow: 0 0 0 3px rgba(var(--active), 0.4) !important;
	transition: all ease 0.3s;
}

.drawer-panel.ant-drawer-open .ant-drawer-content {
	overflow: hidden;
}

.ant-drawer-content {
	background-color: rgb(var(--bg));
}

/* Modal support */
.modalSupport .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalSupport.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: 385px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalSupport.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px 24px 32px 24px;
	overflow: hidden;
}

.modalSupport.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

/* Modal delete device */
.modalDeleteDevice .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalDeleteDevice.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: 385px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalDeleteDevice.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px 24px 32px 24px;
	overflow: hidden;
}

.modalDeleteDevice.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

/* Modal Upload Location Photo */
.modalUploadLocationPhoto .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalUploadLocationPhoto.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: 385px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalUploadLocationPhoto.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px 24px 32px 24px;
	overflow: hidden;
}

.modalUploadLocationPhoto.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

/* Modal add user */
.modalAddUser .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalHlsVideo .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalAddUser.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	max-width: 542px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 16px;
}

.modalHlsVideo.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	max-width: 1500px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
}

.modalAddUser.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px 24px 32px 24px;
	overflow: hidden;
}

.modalHlsVideo.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 0;
	overflow: hidden;
}

.modalAddUser.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

.modalHlsVideo.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

/* Modal admin rfid */
.modalAdminRfid #panelRegister {
	padding: 0 !important;
}

.modalAdminRfid .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalAdminRfid.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: 873px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalAdminRfid.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px 24px 32px 24px;
	overflow: hidden;
}

.modalAdminRfid.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

/* Modal tariff charges */
.modalTariffCharges .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalTariffCharges.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: 567px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalTariffCharges.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px 24px 32px 24px;
	overflow: hidden;
}

.modalTariffCharges.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

/* Modal tariff users */
.modalTariffUsers .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalTariffUsers.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: 567px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalTariffUsers.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px 24px 32px 24px;
	overflow: hidden;
}

.modalTariffUsers.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

/* Modal admin add TTB */
.modalAdminAddTtb .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalAdminAddTtb.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: 603px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalAdminAddTtb.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px 24px 32px 24px;
	overflow: hidden;
}

.modalAdminAddTtb.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

/* Modal wizard */
.modalWizard .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalWizard.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: 90%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 360px;
}

.modalWizard.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 24px 24px 32px 24px;
	overflow: hidden;
}

.modalWizard.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

/* Modal QR */
.modalQr .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalQr.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: 648px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalQr.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px;
	overflow: hidden;
}

.modalQr.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

.primary_btn .agg-btn.component-button {
	background: rgb(var(--main));
	color: rgb(var(--bg));
	font-family: "Roboto";
	font-size: 14px;
	line-height: 18px;
	border-radius: var(--border-radius-btn);
}

.primary_btn .drawn-image.button-image-element svg path {
	fill: rgb(var(--bg));
}

.primary_btn .agg-btn.component-button:hover {
	background: rgb(var(--accent));
	transition: all 0.5s;
}

.component-system-button.square.toolbar-add-row-button.toolbar-button {
	background: rgb(var(--main));
	color: rgb(var(--bg));
	font-family: "Roboto";
	font-size: 14px;
	line-height: 18px;
	border-radius: var(--border-radius-btn);
}

.component-system-button.square.toolbar-add-row-button.toolbar-button:hover {
	background: rgb(var(--accent));
	transition: all 0.5s;
}

.toolbar-container .toolbar-add-row-button svg path {
	fill: rgb(var(--bg)) !important;
}

.toolbar-delete-row-button.component-system-button.round svg path {
	fill: rgb(var(--main)) !important;
}

.toolbar-delete-row-button.component-system-button.round:hover svg path {
	fill: rgb(var(--bg)) !important;
	transition: all 0.5s;
}

.secondary_btn .agg-btn.secondary {
	border: 1px solid rgb(var(--main));
	color: rgb(var(--text));
	background: rgb(var(--bg));
	font-family: "Roboto";
	font-size: 14px;
	line-height: 18px;
	border-radius: var(--border-radius-btn);
}

.secondary_btn .drawn-image.upload-list-icon {
	margin-right: 4px;
	margin-top: 2px;
}

.secondary_btn .drawn-image.upload-list-icon svg path {
	fill: rgb(var(--text));
}

.secondary_btn:hover .agg-btn.secondary {
	border: 1px solid rgb(var(--accent));
	color: rgb(var(--accent));
	transition: all 0.5s;
}

.secondary_btn:hover .drawn-image.upload-list-icon svg path {
	fill: rgb(var(--accent));
	transition: all 0.5s;
}

#buttonQr.secondary_btn .drawn-image svg>path,
.secondary_btn .drawn-image svg>rect {
	fill: rgb(var(--text));
	transition: 0.3s;
}

#buttonQr.secondary_btn:hover .drawn-image svg>path,
.secondary_btn:hover .drawn-image svg>rect {
	fill: rgb(var(--accent));
	transition: 0.3s;
}

.danger_btn .agg-btn.secondary {
	border: 1px solid rgb(var(--accent));
	color: rgb(var(--accent));
	background: rgb(var(--bg));
	font-family: "Roboto";
	font-size: 14px;
	line-height: 18px;
	border-radius: var(--border-radius-btn);
}

.danger_btn:hover .agg-btn.secondary {
	border: 1px solid rgb(var(--main));
	color: rgb(var(--main));
	transition: all 0.5s;
}

#buttonDeleteSpace.danger_btn span,
#buttonDeleteAccount.danger_btn span,
#buttonDeleteSecondary.danger_btn span {
	padding-left: 20px;
}

#buttonDeleteSpace.danger_btn:before,
#buttonDeleteAccount.danger_btn:before,
#buttonDeleteSecondary.danger_btn:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_bin_16.svg");
	background-color: rgb(var(--accent));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#buttonDeleteSpace.danger_btn:hover:before,
#buttonDeleteAccount.danger_btn:hover:before,
#buttonDeleteSecondary.danger_btn:hover:before {
	background-color: rgb(var(--main));
	transition: 0.3s;
}

div.secondary_btn.icon_btn button {
	width: 32px;
	height: 32px;
	border: none;
	background: none;
}

div.icon_btn button.agg-btn svg path {
	fill: rgb(var(--main));
}

div.icon_btn button.agg-btn:hover svg path {
	fill: rgb(var(--accent));
	transition: 0.3s;
}


#buttonRegisterParticipant button:before,
#buttonSendInvite button:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 20px;
	height: 20px;
	-webkit-mask-image: url("/web/static/images/ic_add_user_24.svg");
	background-color: rgb(var(--text));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 16px;
}

#buttonRegisterParticipant button:hover:before,
#buttonSendInvite button:hover:before {
	background-color: rgb(var(--accent));
	transition: 0.6s;
}

#buttonRegisterParticipant button span {
	padding-left: 16px;
}

#buttonSendInvite button span {
	padding-left: 26px;
}

.uploader_table .ant-table-thead {
	display: none;
}

.uploader_table .ant-table-body {
	color: rgb(var(--text));
	font-family: "Roboto";
	font-size: 14px;
	line-height: 18px;
}

.uploader_table .ant-table .kebab-btn:nth-of-type(1) {
	cursor: pointer;
	-webkit-mask-image: url("/web/static/images/ic_edit_16.svg");
	background-color: rgb(var(--main));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.uploader_table .ant-table .kebab-btn:nth-of-type(2) {
	cursor: pointer;
	-webkit-mask-image: url("/web/static/images/ic_bin_16.svg");
	background-color: rgb(var(--main));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

:not(#dataTableEditorForSupport).uploader_table :not(#dataTableEditorUploaderFileForSlider).uploader_table .agg-table-wrapper .ant-table-body .ant-table-tbody>tr.ant-table-row>td:nth-child(2):before {
	content: "";
	display: inline-block;
	height: auto;
	width: 24px;
	height: 24px;
	background-image: url("/web/static/images/ic_image_24.svg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	bottom: 17%;
}

:not(#dataTableEditorForSupport).uploader_table  .agg-table-wrapper .ant-table-body .ant-table-tbody>tr.ant-table-row>td:nth-child(2) {
	padding-left: 30px;
}

/* Sub_two_part */
.shadow:not(:has(#panelCharging, #panelAdminCharging)) {
	border-radius: var(--border-radius-panel);
	box-shadow: 0 0 8px rgba(90, 96, 127, 24%);
}

#subdashboardLeft {
	border-radius: var(--border-radius-panel);
}

#subdashboardLeft .container-grid {
	border-radius: var(--border-radius-panel);
}

#panelUserHeader {
	border-top-left-radius: var(--border-radius-panel);
	border-top-right-radius: var(--border-radius-panel);
}


/* User settings */
.ui-component.js-label .component-label {
	cursor: default;
}

.user-img .image-component-container img {
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	z-index: 40;
	position: relative;
}

.user-img .image-component-container:before {
	content: "";
	display: block;
	position: absolute;
	background: url("/web/static/images/no_user.png");
	margin: auto;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	background-size: cover;
	filter: blur(4px);

}

.user-img .image-component-container {
	position: relative;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	overflow: hidden;
	margin: auto;
}

.header-h1 h1 {
	font-size: 32px;
	font-weight: 900;
	line-height: 40px;
	color: rgb(var(--h1));
}

.header-h1.header-color h1 {
	color: rgb(var(--h2));
}

.label-header span {
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: rgb(var(--h2));
}

.label-value span {
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	color: rgb(var(--text));
}

.header-h2 span {
	font-size: 24px;
	font-weight: 300;
	line-height: 30px;
	color: rgb(var(--text));
}

.header-userSettings h1 {
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
	color: rgb(var(--h1));
}

.label-data span {
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
	color: rgb(var(--text));
}

.label-h1 span {
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
	color: rgb(var(--h1));
}

.panel-border-bottom {
	border-bottom: 1px solid rgb(var(--secondary));
}

.panel-border-top {
	border-top: 1px solid rgb(var(--secondary));
}

.panel-border-left {
	border-left: 1px solid rgb(var(--secondary));
}

.label-data span.component-label {
	margin-left: 28px;
}

#labelPhoneValue:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("/web/static/images/ic_phone_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -4px;
}

#labelMailValue:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("/web/static/images/ic_mail_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -4px;
}

#labelTelegramValue:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: -4px;
	-webkit-mask-image: url("/web/static/images/ic_telegram_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#labelStatusValue span,
#labelSpaceStatusValue span {
	position: relative;
}

#labelStatusValue span:before,
#labelSpaceStatusValue span:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--success));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.blocked#labelStatusValue span:before,
.blocked#labelSpaceStatusValue span:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--accent));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.label-warning span {
	font-size: 10px;
	font-weight: 400;
	line-height: 18px;
	color: rgb(var(--accent));
}

.chart-pie-label .component-label-container {
	margin: auto;
}

.chart-pie-label span {
	font-size: 52px;
	line-height: 56px;
	font-weight: 700;
	color: rgb(var(--text));
}

/* Custom table */
.custom-table .ant-table-thead>tr>th {
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
}

.ant-table-thead th {
	background: rgb(var(--bg)) !important;
}

.custom-table .data-table-column-title .data-table-column-description {
	color: rgb(var(--h1));
}

.custom-table .ant-table-tbody>tr>td {
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: rgb(var(--text));
}

.custom-table .agg-table-wrapper .ant-table-header .ant-table-thead .ant-table-cell {
	border-top: 1px solid rgb(var(--secondary));
	border-bottom: 1px solid rgb(var(--secondary));
	border-left: none;
}

.agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n) {
	background: rgba(var(--secondary), .3);
}

.agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:hover {
	background: rgba(var(--secondary)) !important;
}

.agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n+1):hover .ant-table-cell-fix-left,
.agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n):hover .ant-table-cell-fix-left {
	background: rgb(var(--secondary)) !important;
}


.custom-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(odd) {
	background: rgba(var(--bg));
}


.custom-table td:has(.balance) .readonly-string-field {
	font-weight: 700;
}

.custom-table .toolbar-import-button,
.custom-table .toolbar-export-button,
.custom-table .table-toolbar-sorter,
.custom-table .toolbar-reset-button,
.custom-table .component-system-button.square.toolbar-add-row-button.toolbar-button,
.custom-table .component-system-button.round.toolbar-delete-row-button.toolbar-button {
	display: none;
}

.custom-table .agg-table-wrapper .ant-table-body .ant-checkbox.ant-checkbox-checked {
	background: rgb(var(--active));
	border: 1px solid rgb(var(--active));
}

.custom-table .agg-table-wrapper .ant-table-body .ant-checkbox {
	border: 2px solid rgb(var(--h2));
}

.custom-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:hover .ant-checkbox {
	border: 2px solid rgb(var(--main));
}

.custom-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:hover .ant-checkbox.ant-checkbox-checked {
	background: rgba(var(--main), .3);
	border: 1px solid rgb(var(--main));
}

.custom-table .agg-table-wrapper .ant-table-header .ant-table-thead .ant-table-selection-column .ant-checkbox-wrapper .ant-checkbox {
	border-color: rgb(var(--h2));
}

.custom-table .agg-table-wrapper .ant-table-header .ant-table-thead tr>th:first-child.ant-table-selection-column:hover .ant-table-selection .ant-checkbox-wrapper .ant-checkbox {
	border-color: rgb(var(--main));
}

.custom-table .agg-table-wrapper .ant-table-header .ant-table-thead .ant-table-selection-column .ant-checkbox-wrapper .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner:after {
	background: rgb(var(--active));
}

.custom-table .agg-table-wrapper .ant-table-header .ant-table-thead .ant-table-selection-column .ant-checkbox-wrapper .ant-checkbox.ant-checkbox-indeterminate {
	border-color: rgb(var(--active));
}

.custom-table .agg-table-wrapper .ant-table-header .ant-table-thead tr>th:first-child.ant-table-selection-column:hover .ant-table-selection .ant-checkbox-wrapper .ant-checkbox.ant-checkbox-indeterminate {
	border-color: rgba(var(--main), .3);
}

.custom-table .agg-table-wrapper .ant-table-header .ant-table-thead tr>th:first-child.ant-table-selection-column:hover .ant-table-selection .ant-checkbox-wrapper .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner:after {
	background: rgba(var(--main), .3);
}

.custom-table .agg-table-wrapper .ant-table-header .ant-table-thead .ant-table-selection-column .ant-checkbox-wrapper .ant-checkbox.ant-checkbox-checked {
	border-color: rgb(var(--active));
	background: rgb(var(--active));
}

.custom-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n).ant-table-row-selected {
	background-color: rgba(var(--active), .13);
}

.custom-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n + 1).ant-table-row-selected {
	background-color: rgba(var(--active), .13);
}

.custom-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(odd).ant-table-row-selected .ant-table-cell-fix-left {
	background-color: rgb(var(--bg));
}

.custom-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row.ant-table-row-selected .data-table-column:first-child {
	box-shadow: inset 2px 0 0 0 rgb(var(--accent));
}

.custom-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n).ant-table-row-selected .ant-table-cell-fix-left {
	background-color: rgb(var(--bg));
}

/*
#dataTableEditorStatistics.custom-table .toolbar-reset-button {
	display: block;
}
#dataTableEditorStatistics .component-system-button.round svg {
	margin: 4px;
}
*/
.toolbar-section:not(:empty):not(:first-child):before {
	display: none;
}

/* User settings tab menu */
.ant-tabs-bottom .ant-tabs-nav .ant-tabs-nav-wrap:after,
.ant-tabs-top .ant-tabs-nav .ant-tabs-nav-wrap:after {
	box-shadow: inset -8px 0 9px -2px rgb(var(--bg));
}

.ant-tabs-bottom .ant-tabs-nav .ant-tabs-nav-wrap:before,
.ant-tabs-top .ant-tabs-nav .ant-tabs-nav-wrap:before {
	box-shadow: inset -8px 0 9px -2px rgb(var(--bg));
}

.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab {
	margin-left: 16px;
	padding: 10px 18px;
	padding-right: 4px;
}

.user-settings div.ant-tabs div.ant-tabs-nav div.ant-tabs-tab:nth-child(1):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_user_o_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.user-settings div.ant-tabs div.ant-tabs-nav div.ant-tabs-tab:nth-child(2):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_alert_o_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.user-settings div.ant-tabs div.ant-tabs-nav div.ant-tabs-tab:nth-child(3):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_workspace_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.user-settings div.ant-tabs div.ant-tabs-nav div.ant-tabs-tab:nth-child(4):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_key_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.user-settings div.ant-tabs div.ant-tabs-nav div.ant-tabs-tab:nth-child(5):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_statistics_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(1):before,
.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(2):before,
.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(3):before,
.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(4):before,
.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(5):before {
	background-color: rgb(var(--text));
}

.user-settings .ant-tabs-top .ant-tabs-tab:after {
	background: rgb(var(--accent));
}

.user-settings .ant-tabs-ink-bar {
	background: rgb(var(--accent));
}

.user-settings .ant-tabs-left .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
	color: rgb(var(--text));
	font-weight: 400;
	transition: all 0.5s;
}

.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(1):before,
.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(2):before,
.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(3):before,
.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(4):before,
.user-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(5):before {
	background-color: rgb(var(--text));
	transition: all 0.5s;
}

.user-settings td.status div.html-snippet.table-html-snippet {
	margin-left: 6px;
}

.user-settings td.status div.html-snippet.table-html-snippet a {
	color: rgb(var(--text));
}

.user-settings td.status div.html-snippet.table-html-snippet a[name="0"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--success));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

.user-settings td.status div.html-snippet.table-html-snippet a[name="1"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--info));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

.user-settings td.status div.html-snippet.table-html-snippet a[name="2"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--incident));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

#panelRegionalSettings,
#panelUserAccount,
#panelAdminMainInfo2,
#panelPaidFunctionsInfo {
	border-left: 1px solid rgb(var(--secondary));
}

#panelRegionalSettings,
#panelContactData,
#panelPaidFunctionsInfo,
#panelAdminTechnicalSettings {
	border-top: 1px solid rgb(var(--secondary));
}

.component-system-button.round svg #icon {
	fill: rgb(var(--text));
}

.component-system-button.round:hover svg #icon {
	fill: rgb(var(--accent));
	transition: all 0.5s;
}

.component-system-button.round.hover,
.component-system-button.round:hover {
	background: rgb(var(--secondary));
	transition: all 0.5s;
}

.component-system-button.round.hover.active svg #icon,
.component-system-button.round.hover:active svg #icon,
.component-system-button.round:hover.active svg #icon,
.component-system-button.round:hover:active svg #icon {
	fill: rgb(var(--accent));
	transition: all 0.5s;
}

.component-system-button.round.active #icon,
.component-system-button.round.active svg {
	fill: rgb(var(--accent));
	transition: all 0.5s;
}

#labelName span {
	position: relative;
}

#labelName span:before {
	position: absolute;
	top: -4px;
	right: -12px;
	content: "\2605";
	/* use the hex value here... */
	font-size: 12px;
	color: rgb(var(--accent));
	text-align: center;
	pointer-events: none;
}

#labelSurname span {
	position: relative;
}

#labelSurname span:before {
	position: absolute;
	top: -4px;
	right: -12px;
	content: "\2605";
	/* use the hex value here... */
	font-size: 12px;
	color: rgb(var(--accent));
	text-align: center;
	pointer-events: none;
}

#labelUserLogin span {
	position: relative;
}

#labelUserLogin span:before {
	position: absolute;
	top: -4px;
	right: -12px;
	content: "\2605";
	/* use the hex value here... */
	font-size: 12px;
	color: rgb(var(--accent));
	text-align: center;
	pointer-events: none;
}

#labelPhoneNumber span {
	position: relative;
}

#labelPhoneNumber span:before {
	position: absolute;
	top: -4px;
	right: -12px;
	content: "\2605";
	/* use the hex value here... */
	font-size: 12px;
	color: rgb(var(--accent));
	text-align: center;
	pointer-events: none;
}

.check-label span {
	font-size: 16px;
	font-weight: 400;
	line-height: 18px;
	color: rgb(var(--text));
}

/* Table sorted button */
.toolbar-container .column-selector {
	border-radius: var(--border-radius-btn);
	border: 1px solid rgb(var(--active));
}

.toolbar-container .column-selector .column-selector-list-item--checked {
	background-color: rgba(var(--active), 0.13);
	border-left: none;
	box-shadow: inset 2px 0 0 0 rgb(var(--accent));
	color: rgb(var(--text));
	font-weight: 700;
	transition: .2s;
}

.agg-input-wrapper:focus-within .ant-input,
.agg-input-wrapper:focus .ant-input {
	background: rgb(var(--bg));
}

.toolbar-container .column-selector .column-selector-list-item--checked:hover {
	background: rgba(var(--h2), 0.12);
	box-shadow: inset 2px 0 0 0 rgb(var(--h2));
}

.toolbar-container .column-selector .column-selector-list-item--checked:hover .ant-checkbox.ant-checkbox.ant-checkbox-checked {
	background-color: rgb(var(--h2));
	border-color: rgb(var(--h2));
}

.dropdown-toolbar .dropdown-toolbar-button-ok {
	color: rgb(var(--accent));
}

.dropdown-toolbar .dropdown-toolbar-button-ok:hover {
	color: rgb(var(--bg));
	background: rgb(var(--accent));
	transition: all .6s;
}

.dropdown-toolbar .dropdown-toolbar-button-cancel {
	color: rgb(var(--text));
}

/* Group button */
.group-btn .agg-btn.component-button:active {
	background: rgb(var(--main));
	color: rgb(var(--bg));
	transition: all 0.5s;
	border: none;
}

.group-btn.active .agg-btn.component-button {
	background: rgb(var(--main));
	color: rgb(var(--bg));
	transition: all 0.5s;
	border: none;
}

/* Custom combobox */
.custom-combo .ant-select-single:not(.custom-combo .ant-select-customize-input),
.custom-combo .ant-select.ant-select.default,
.custom-combo .ant-select.default.ant-select-single {
	border-radius: var(--border-radius-btn);
	border: 1px solid rgb(var(--main));
	background: rgb(var(--main));
	font-family: "Roboto";
	color: rgb(var(--bg));
}

.custom-combo .ant-select-single:not(.custom-combo .ant-select-customize-input) .ant-select-selector,
.custom-combo .ant-select.default .ant-select-selector,
.custom-combo .ant-select.default.ant-select-single .ant-select-selector,
.custom-combo .ant-select:not(.custom-combo .ant-select-customize-input).default .ant-select-selector {
	font-size: 14px;
	line-height: 18px;
}

.custom-combo .ant-select:hover:not(.custom-combo .ant-select-disabled) {
	background: rgb(var(--accent));
	border: 1px solid rgb(var(--accent));
	transition: .2s;
}

.custom-combo .ant-select-disabled {
	background: #f5f5f5 !important;
	opacity: 1;
}

.custom-combo .ant-select.ant-select .ant-select-arrow svg path {
	fill: rgb(var(--bg));
	transition: .2s;
}

.custom-combo.type .ant-select-single:not(.custom-combo .ant-select-customize-input),
.custom-combo.type .ant-select.ant-select.default,
.custom-combo.type .ant-select.default.ant-select-single {
	border-radius: 0px var(--border-radius-btn) var(--border-radius-btn) 0px;
	text-transform: uppercase;
}

.custom-combo.type .ant-select-single>div>span:nth-child(2)>span {
	margin-top: 0;
}

.custom-combo .ant-select.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input),
.custom-combo .ant-select.ant-select-open:not(.ant-select-disabled),
.custom-combo .ant-select:hover.ant-select-open:not(.ant-select-disabled) {
	border: none;
	box-shadow: none;
}

.custom-combo .ant-select-item.ant-select-item-option span {
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 400;
}

.custom-combo.ant-select-dropdown .ant-select-item-option-selected {
	background-color: rgba(var(--active), .13);
	border-left: none;
	box-shadow: inset 2px 0 0 0 rgb(var(--accent));
	color: rgb(var(--text));
	font-weight: 700;
	transition: .2s;
}

.custom-combo.ant-select-dropdown .ant-select-item-option-selected span {
	font-weight: 700;
}

.custom-combo.ant-select-dropdown {
	border: 1px solid rgb(var(--active));
	border-radius: var(--border-radius-btn);
}

/* Inner combo (in table) */
.ant-select-single:not(.ant-select-customize-input),
.ant-select.ant-select.default,
.ant-select.default.ant-select-single {
	border-radius: var(--border-radius-btn);
	border: 1px solid rgb(var(--secondary));
	background: rgb(var(--bg));
	font-family: "Roboto";
	color: rgb(var(--text));
}

.ant-select-single:hover:not(.ant-select-customize-input),
.ant-select.ant-select.default:hover,
.ant-select.default.ant-select-single:hover {
	background: rgb(var(--bg));
}

.ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
.ant-select.default .ant-select-selector,
.ant-select.default.ant-select-single .ant-select-selector,
.ant-select:not(.ant-select-customize-input).default .ant-select-selector {
	font-size: 14px;
	line-height: 18px;
}

.ant-select:hover:not(.ant-select-disabled) {
	background: rgb(var(--bg-secondary));
	border: 1px solid rgb(var(--h2));
	transition: .2s;
}

.ant-select-disabled {
	background: #f5f5f5 !important;
	opacity: 1;
}

.ant-select.ant-select .ant-select-arrow svg path {
	fill: rgba(var(--text), 0.48);
	transition: .2s;
}

.ant-select.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input),
.ant-select.ant-select-open:not(.ant-select-disabled),
.ant-select:hover.ant-select-open:not(.ant-select-disabled) {
	border: 1px solid rgb(var(--active));
	box-shadow: 0 0 0 3px rgba(var(--active), 0.4);
}

.ant-select-item.ant-select-item-option:not(.ant-select-item-option-selected) {
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 400;
	background: rgb(var(--bg));
	color: rgb(var(--text));
}


.ant-select-dropdown .ant-select-item-option-selected {
	font-weight: 700;
}

.ant-select-dropdown .ant-select-item-option-selected {
	background-color: rgba(var(--active), .13);
	border-left: none;
	box-shadow: inset 2px 0 0 0 rgb(var(--accent));
	color: rgb(var(--active));
	font-weight: 700;
	transition: .2s;
}

.ant-select-dropdown {
	border: 1px solid rgb(var(--active));
	border-radius: var(--border-radius-btn);
}

.ant-select:hover:not(.ant-select-disabled) .ant-select-arrow svg path {
	fill: rgba(var(--text), 1);
	transition: .2s;
}

.ant-select .ant-select-selection-item {
	background-color: rgb(var(--secondary));
}

/* Drop combobobox */
.drop-combo .ant-select-single:not(.drop-combo .ant-select-customize-input),
.drop-combo .ant-select.ant-select.default,
.drop-combo .ant-select.default.ant-select-single {
	border-radius: var(--border-radius-btn);
	border: 1px solid rgb(var(--secondary));
	background: rgb(var(--bg));
	font-family: "Roboto";
	color: rgb(var(--text));
}

.drop-combo .ant-select-single:not(.drop-combo .ant-select-customize-input) .ant-select-selector,
.drop-combo .ant-select.default .ant-select-selector,
.drop-combo .ant-select.default.ant-select-single .ant-select-selector,
.drop-combo .ant-select:not(.drop-combo .ant-select-customize-input).default .ant-select-selector {
	font-size: 14px;
	line-height: 18px;
}

.drop-combo .ant-select:hover:not(.drop-combo .ant-select-disabled) {
	background: rgb(var(--bg));
	border: 1px solid rgb(var(--h2));
	transition: .2s;
}

.drop-combo .ant-select-disabled {
	background: #f5f5f5 !important;
	opacity: 1;
}

.drop-combo .ant-select.ant-select .ant-select-arrow svg path {
	fill: rgba(var(--text), 0.48);
	transition: .2s;
}

.drop-combo .ant-select.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input),
.drop-combo .ant-select.ant-select-open:not(.ant-select-disabled),
.drop-combo .ant-select:hover.ant-select-open:not(.ant-select-disabled) {
	border: 1px solid rgb(var(--active));
	box-shadow: 0 0 0 3px rgba(var(--active), 0.4);
}

.drop-combo .ant-select-item.ant-select-item-option span {
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 400;
}

.drop-combo.ant-select-dropdown .ant-select-item-option-selected {
	background-color: rgba(var(--active), .13);
	border-left: none;
	box-shadow: inset 2px 0 0 0 rgb(var(--accent));
	color: rgb(var(--text));
	font-weight: 700;
	transition: .2s;
}

.drop-combo.ant-select-dropdown .ant-select-item-option-selected span {
	font-weight: 700;
}

.drop-combo.ant-select-dropdown {
	border: 1px solid rgb(var(--active));
	border-radius: var(--border-radius-btn);
	background: rgb(var(--bg));
}

.drop-combo .ant-select:hover:not(.drop-combo .ant-select-disabled) .ant-select-arrow svg path {
	fill: rgba(var(--text), 1);
	transition: .2s;
}

.ant-select-item-option-content {
	font-family: Roboto;
}

.rc-virtual-list-holder-inner {
	background: rgb(var(--bg));
}

.rc-virtual-list-holder {
	background: rgba(var(--bg), .9);
}

.ant-checkbox.ant-checkbox.ant-checkbox-checked {
	background-color: rgb(var(--active));
	border-color: rgb(var(--active));
}

.agg-select-dropdown-footer button {
	font-family: Roboto;
}

.agg-select-dropdown-footer-ok,
.agg-select-dropdown-footer-ok:visited {
	color: rgb(var(--active));
}


/* Default input */
.agg-input-wrapper,
.agg-input.agg-input {
	background-color: rgb(var(--bg));
	border-radius: var(--border-radius-btn);
	border: 1px solid rgb(var(--secondary));
	color: rgb(var(--text));
	transition: .3s;
	height: auto;
}
.agg-input.invalid-field {
	border: 1px solid rgb(var(--accent));
}
.agg-input-wrapper .ant-input {
	background: transparent;
}

.agg-input-wrapper input,
.agg-input.agg-input input {
	color: rgb(var(--text));
	font-size: 14px;
}

.agg-input-wrapper input::placeholder {
	font-weight: 300;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0px;
	color: rgba(var(--h2), .8) !important;
}

.agg-input-wrapper:not(.ant-input-affix-wrapper-disabled):hover,
.agg-input:not(.ant-input-disabled):hover {
	border: 1px solid rgb(var(--h2));
	transition: all ease 0.3s;
	background: rgb(var(--bg));
}

.agg-input-wrapper input:hover::placeholder {
	color: rgb(var(--h2)) !important;
}

.agg-input-wrapper.agg-input-wrapper:focus,
.agg-input-wrapper.agg-input-wrapper:focus-within,
.agg-input.agg-input:focus {
	box-shadow: 0 0 0 3px rgba(var(--active), 0.4) !important;
}

.ant-input-affix-wrapper.agg-text-field.agg-input-wrapper.toolbar-input.ant-input-affix-wrapper-focused {
	border: 1px solid rgba(var(--active), 1);
	box-shadow: 0 0 0 3px rgba(var(--active), 0.4) !important;
	margin-left: 2px;
}

.agg-text-field .ant-input-clear-icon>svg {
	color: rgba(var(--h2), 0.4);
}

.anticon.ant-input-clear-icon:hover svg {
	color: rgba(var(--h2), 0.8);
}

.custom-input .agg-input-wrapper.agg-input-wrapper:focus,
.agg-input-wrapper.agg-input-wrapper:focus-within,
.agg-input.agg-input:focus {
	border-color: rgb(var(--active));
	background: rgb(var(--bg));
	color: rgb(var(--main));
}

.ant-input-suffix svg path,
.ant-input-prefix svg path {
	fill: rgba(var(--h2), 0.8);
}

.agg-input-wrapper:not(.ant-input-affix-wrapper-disabled):hover .ant-input-suffix svg path,
.agg-input:not(.ant-input-disabled):hover .ant-input-suffix svg path {
	fill: rgba(var(--h2), 1);
}

.agg-input-wrapper.agg-input-wrapper:focus .ant-input-suffix svg path,
.agg-input-wrapper.agg-input-wrapper:focus-within .ant-input-suffix svg path,
.agg-input.agg-input:focus .ant-input-suffix svg path {
	fill: rgba(var(--text), 1);
}

.input-icon:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	background-color: rgba(var(--h2), 0.8);
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 8px;
	z-index: 200;
}

#textFieldUserLogin:before {
	-webkit-mask-image: url("/web/static/images/ic_user_o_16.svg");
}

.input-icon .ant-input.agg-text-field.agg-input {
	padding-left: 28px;
}

.input-icon:hover:before {
	background-color: rgba(var(--h2), 1);
	transition: .3s;
}


.input-icon:before .agg-input-wrapper.agg-input-wrapper:focus,
.input-icon:before .agg-input-wrapper.agg-input-wrapper:focus-within,
.input-icon:before .agg-input.agg-input:focus {
	background-color: rgb(var(--text));
}

.input-icon:has(.agg-input.agg-input:focus):before,
.input-icon:has(.agg-input-wrapper.agg-input-wrapper:focus-within):before,
.input-icon:has(.agg-input.agg-input:focus):before {
	background-color: rgb(var(--text));
}

.toolbar-container .toolbar-input-container .component-toolbar-filter-image path,
.toolbar-container .toolbar-input-container .component-toolbar-search-image path,
.toolbar-container .toolbar-select-container .component-toolbar-filter-image path,
.toolbar-container .toolbar-select-container .component-toolbar-search-image path {
	fill: rgba(var(--h2), .8);
}

.toolbar-input-container:has(.agg-input-wrapper:not(.ant-input-affix-wrapper-disabled):hover) .component-toolbar-search-image path,
.toolbar-input-container:has(.agg-input:not(.ant-input-disabled):hover) .component-toolbar-search-image path {
	fill: rgba(var(--h2), 1);
}

.toolbar-input-container:has(.agg-input.agg-input:focus) .component-toolbar-search-image path,
.toolbar-input-container:has(.agg-input-wrapper.agg-input-wrapper:focus-within) .component-toolbar-search-image path,
.toolbar-input-container:has(.agg-input.agg-input:focus) .component-toolbar-search-image path {
	fill: rgb(var(--main));
}

/*DateTimePicker*/

.ant-picker-content {
	font-family: "Roboto";
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: -0.1px;
}

.ant-picker-panels {
	font-family: "Roboto";
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
	letter-spacing: -0.1px;
}

.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):before,
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single):before {
	background: transparent;
}

.js-dateTimePicker .date-time-picker:focus,
.js-dateTimePicker .date-time-picker:focus-within {
	background-color: rgb(var(--bg));
	border-color: rgba(var(--active), 1);
	box-shadow: 0 0 0 2px rgba(var(--active), 0.4);
	outline: 0;
}

.ant-picker-focused {
	box-shadow: 0 0 0 2px rgba(var(--active), 0.4);
	background: rgb(var(--bg)) !important;
}

.ant-picker {
	background: rgb(var(--bg));
}

.ant-picker-range .ant-picker-active-bar {
	bottom: -1px;
	height: 2px;
	margin-left: 11px;
	background: rgb(var(--accent));
	opacity: 0;
	transition: all .3s ease-out;
	pointer-events: none;
}

.ant-picker-cell-in-view.ant-picker-cell-in-range::before {
	background: rgba(var(--active), 0.5);
}

.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner:before {
	content: '';
	border: none;
	position: absolute;
	top: 25px;
	left: 10px;
	width: 4px;
	height: 4px;
	background: rgb(var(--active));
}

.ant-picker-cell-in-view.ant-picker-cell-today {
	color: rgb(var(--active));
}

.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
	color: rgb(var(--bg));
	background: rgb(var(--active));
}

.ant-picker-cell-in-view {
	color: rgb(var(--text));
}

.ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
	background: rgba(var(--active), 0.3);
}

.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before,
.ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before,
.ant-picker-panel> :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before,
.ant-picker-panel> :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before {
	background: rgba(var(--active), 0.3);
}

.ant-picker-cell-in-view.ant-picker-cell-in-range::before {
	background: rgba(var(--active), 0.2);
}

.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after {
	position: absolute;
	top: 50%;
	z-index: 0;
	height: 24px;
	border: 2px solid rgb(var(--secondary));
	transform: translateY(-50%);
	content: "";
}

.ant-picker-ok .ant-btn-primary {
	color: rgb(var(--bg));
	border-color: rgb(var(--active));
	background: rgb(var(--active));
}

.ant-picker-panel-container {
	border: 1px solid rgb(var(--active));
	border-radius: var(--border-radius-btn);
	background-color: rgb(var(--bg-secondary));
	box-shadow: 0 4px 16px 0 rgba(var(--main), .16);
}

.ant-picker-input>input::placeholder {
	color: rgba(var(--h2), .8);
}

.ant-picker-input>input:hover::placeholder {
	color: rgb(var(--h2));
}

/* Time picker */
.ant-picker-now-btn {
	color: rgb(var(--active));
}

.ant-picker-now-btn:hover {
	color: rgb(var(--text));
	transition: all .3s ease;
}

.date-time-picker:focus,
.date-time-picker:focus-within {
	border-color: rgb(var(--active));
	box-shadow: 0 0 0 3px rgba(var(--active), 0.4) !important;
}

/* Custom toggle */
.custom-toggle button.ant-switch {
	outline: 2px solid rgb(var(--h2));
	background: rgb(var(--bg));
	width: 34px !important;
	min-width: 34px;
	height: 16px;
}

.custom-toggle button.ant-switch.ant-switch-checked {
	background: rgb(var(--active));
	outline: 2px solid rgb(var(--active));
	transition: all .3s;
}

.custom-toggle .ant-switch-handle:before {
	background: rgb(var(--h2));
}

.custom-toggle .ant-switch-checked .ant-switch-handle:before {
	background: rgb(var(--bg));
	transition: all .3s;
}

.custom-toggle button.ant-switch:hover {
	outline: 2px solid rgb(var(--main));
	transition: all .3s;
}

.custom-toggle button.ant-switch:hover .ant-switch-handle:before {
	background: rgb(var(--main));
	transition: all .3s;
}

.custom-toggle button.ant-switch.ant-switch-checked:hover {
	background: rgb(var(--main));
	transition: all .3s;
}

.custom-toggle button.ant-switch.ant-switch-checked:hover .ant-switch-handle:before {
	background: rgb(var(--bg));
	outline: 2px solid rgb(var(--main));
	transition: all .3s;
}

.custom-toggle .ant-switch-handle {
	width: 14px;
	height: 14px;
	top: 1px;
}

.custom-toggle .ant-switch-checked .ant-switch-handle {
	left: calc(100% - 15px);
}

/* Uploaders */
#uploaderUserImg,
#uploaderSpaceLogo,
#uploaderCompanyLogo {
	height: 100%;
}

#uploaderUserImg span.upload-list-inline,
#uploaderSpaceLogo span.upload-list-inline,
#uploaderCompanyLogo span.upload-list-inline {
	height: 100%;
}

#uploaderUserImg span.upload-list-inline>div.ant-upload-select,
#uploaderSpaceLogo span.upload-list-inline>div.ant-upload-select,
#uploaderCompanyLogo span.upload-list-inline>div.ant-upload-select {
	height: 100%;
}

#uploaderUserImg span.upload-list-inline>div.ant-upload-select button,
#uploaderSpaceLogo span.upload-list-inline>div.ant-upload-select button {
	height: 100%;
	border-radius: 50%;
	background: rgba(var(--h2), 0.16);
	border: none;
}

#uploaderCompanyLogo span.upload-list-inline>div.ant-upload-select button {
	height: 100%;
	border-radius: var(--border-radius-btn);
	background: rgba(var(--h2), 0.16);
	border: none;
}

#uploaderUserImg .upload-list-inline .upload-list-icon,
#uploaderSpaceLogo .upload-list-inline .upload-list-icon {
	width: 48px;
	z-index: 100;
}

#uploaderCompanyLogo .upload-list-inline .upload-list-icon {
	width: 24px;
}

#uploaderUserImg .anticon.anticon-upload,
#uploaderSpaceLogo .anticon.anticon-upload,
#uploaderCompanyLogo .anticon.anticon-upload {
	display: none;
}

#uploaderUserImg button:before,
#uploaderSpaceLogo button:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 48px;
	height: 48px;
	-webkit-mask-image: url("/web/static/images/ic_photo_24 2.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
}

#uploaderCompanyLogo button:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("/web/static/images/ic_photo_24 2.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
}

#uploaderUserImg.download span.upload-list-inline>div.ant-upload-select button,
#uploaderSpaceLogo.download span.upload-list-inline>div.ant-upload-select button,
#uploaderCompanyLogo.download span.upload-list-inline>div.ant-upload-select button {
	background: none;
}

#uploaderUserImg.download button:before,
#uploaderSpaceLogo.download button:before,
#uploaderCompanyLogo.download button:before {
	display: none;
}

#uploaderUserImg.download .anticon.anticon-upload,
#uploaderSpaceLogo.download .anticon.anticon-upload,
#uploaderCompanyLogo.download .anticon.anticon-upload {
	display: block;
}

#uploaderUserImg.download .upload-list-inline .upload-list-icon,
#uploaderSpaceLogo.download .upload-list-inline .upload-list-icon {
	width: 100%;
	border-radius: 50%;
	object-fit: contain;
	height: 100%;
}

#uploaderCompanyLogo.download .upload-list-inline .upload-list-icon {
	width: 100%;
	border-radius: var(--border-radius-btn);
	object-fit: contain;
	height: 100%;
}

#uploaderUserImg.download span.upload-list-inline>div.ant-upload-select,
#uploaderSpaceLogo.download span.upload-list-inline>div.ant-upload-select {
	width: 140px;
}

#uploaderCompanyLogo.download span.upload-list-inline>div.ant-upload-select {
	width: 96px;
}

#uploaderUserImg.download span.upload-list-inline>div.ant-upload-select button,
#uploaderSpaceLogo.download span.upload-list-inline>div.ant-upload-select button,
#uploaderCompanyLogo.download span.upload-list-inline>div.ant-upload-select button {
	background: rgb(var(--secondary));
}

#uploaderUserImg.download button:before,
#uploaderSpaceLogo.download button:before,
#uploaderCompanyLogo.download button:before {
	display: none;
}

#uploaderUserImg.download .anticon.anticon-upload,
#uploaderSpaceLogo.download .anticon.anticon-upload,
#uploaderCompanyLogo.download .anticon.anticon-upload {
	display: block;
}

#uploaderUserImg.download .upload-list-inline .upload-list-icon,
#uploaderSpaceLogo.download .upload-list-inline .upload-list-icon {
	width: 100%;
	border-radius: 50%;
}

#uploaderCompanyLogo.download .upload-list-inline .upload-list-icon {
	width: 100%;
	border-radius: var(--border-radius-btn);
}

#uploaderUserImg.download span.upload-list-inline>div.ant-upload-select,
#uploaderSpaceLogo.download span.upload-list-inline>div.ant-upload-select {
	width: 140px;
}

#uploaderCompanyLogo.download span.upload-list-inline>div.ant-upload-select {
	width: 96px;
}

/* Space settings */
.logo-img .image-component-container img {
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	z-index: 40;
	position: relative;
}

.logo-img .image-component-container {
	position: relative;
	width: 292px;
	height: 188px;
	overflow: hidden;
	margin: auto;
}

.label-icon span.component-label {
	margin-left: 18px;
}

#labelAddressesValue:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_location_o_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -3px;
	top: 50%;
	transform: translateY(-50%);
}

#labelChargesValue:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_eos_charger_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -3px;
	top: 50%;
	transform: translateY(-50%);
}

#labelParticipantsValue:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_user_o_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -3px;
	top: 50%;
	transform: translateY(-50%);
}

#labelActiveInvitesValue:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_add_user_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -3px;
	top: 50%;
	transform: translateY(-50%);
}

.label-info span {
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	color: rgb(var(--text));
}

.label-info.color span {
	color: rgb(var(--h2));
}

/* Admin settings tab menu */
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab {
	margin-left: 16px;
	padding: 10px 18px;
	padding-right: 4px;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(1):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_ui_screen_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(2):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_community_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(3):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_group_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(4):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_dashboard_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(5):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_attention_o_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(6):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_resource_statistics_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(7):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_documentation_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(8):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_currency_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(1):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(2):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(3):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(4):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(5):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(6):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(7):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(8):before {
	background-color: rgb(var(--text));
}

.admin-settings .ant-tabs-top .ant-tabs-tab:after {
	background: rgb(var(--accent));
}

.admin-settings .ant-tabs-ink-bar {
	background: rgb(var(--accent));
}

.admin-settings .ant-tabs-left .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
.admin-settings .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
	color: rgb(var(--text));
	font-weight: 400;
	transition: all 0.5s;
}

.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(1):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(2):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(3):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(4):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(5):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(6):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(7):before,
.admin-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(8):before {
	background-color: rgb(var(--text));
	transition: all 0.5s;
}

/* Lonely checkbox (not in a table) */
.check-label .ant-checkbox.ant-checkbox {
	border-radius: var(--border-radius-btn);
	border-color: rgb(var(--h2));
}

.check-label:hover .ant-checkbox.ant-checkbox {
	border-color: rgb(var(--main));
}

.check-label .ant-checkbox.ant-checkbox.ant-checkbox-checked {
	background-color: rgb(var(--h2));
	border-color: rgb(var(--h2));
}

.check-label .ant-checkbox.ant-checkbox.ant-checkbox-checked:hover {
	background-color: rgba(var(--main), .2);
	border-color: rgb(var(--main));
}

.secondary_btn .drawn-image svg>rect {
	fill: rgb(var(--text));
	transition: 0.3s;
}

.secondary_btn:hover .drawn-image svg>rect {
	fill: rgb(var(--accent));
	transition: 0.3s;
}

#buttonAdminQr.secondary_btn span,
#buttonQr.secondary_btn span,
#buttonQrWizard span {
	padding-left: 20px;
}

#buttonAdminQr.secondary_btn:before,
#buttonQr.secondary_btn:before,
#buttonQrWizard.secondary_btn:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/qr-code.svg");
	background-color: rgb(var(--text));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#buttonAdminQr.secondary_btn:hover:before,
#buttonQr.secondary_btn:hover:before,
#buttonQrWizard.secondary_btn:hover:before {
	background-color: rgb(var(--accent));
	transition: 0.3s;
}

#buttonAddNewSpace.secondary_btn span {
	padding-left: 20px;
}

#buttonAddNewSpace.secondary_btn:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_add_16.svg");
	background-color: rgb(var(--text));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#buttonAddNewSpace.secondary_btn:hover:before {
	background-color: rgb(var(--accent));
	transition: 0.3s;
}

.primary_btn.add span {
	padding-left: 10px;
}

.primary_btn.add:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_add_16.svg");
	background-color: rgb(var(--bg));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.primary_btn.add:hover:before {
	background-color: rgb(var(--bg));
	transition: 0.3s;
}

.primary_btn.button-accept span {
	padding-left: 20px;
}

.primary_btn.button-accept:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_yes_16.svg");
	background-color: rgb(var(--bg));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.primary_btn.button-accept:hover:before {
	background-color: rgb(var(--bg));
	transition: 0.3s;
}

.secondary_btn.button-accept span {
	padding-left: 16px;
}

.secondary_btn.button-accept:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_yes_16.svg");
	background-color: rgb(var(--main));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.secondary_btn.button-accept:hover:before {
	background-color: rgb(var(--accent));
	transition: 0.3s;
}

.primary_btn.invoice span {
	padding-left: 26px;
	position: relative;
}

.primary_btn.invoice:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_edit_16.svg");
	background-color: rgb(var(--bg));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.primary_btn.invoice:hover:before {
	background-color: rgb(var(--bg));
	transition: 0.3s;
}

.html-snippet .table-date {
	display: flex;
	flex-direction: column;
}

.html-snippet .table-date .table-date_0 {
	color: rgb(var(--h2));
	font-size: 11px;
	line-height: 16px;
}

.table-name span {
	font-size: 16px;
	line-height: 26px;
	font-weight: 700;
	color: rgb(var(--text));
}

#panelInvitations {
	border-top: 1px solid rgb(var(--secondary));
}

#panelRequests {
	border-top: 1px solid rgb(var(--secondary));
	border-left: 1px solid rgb(var(--secondary));
}

.table_login {
	display: flex;
	flex-direction: row-reverse;
	align-content: center;
	align-items: center;
}

.table_login img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 50%;
}

#dataTableEditorDrawerAdminRfidCards .component-system-button.square.toolbar-add-row-button.toolbar-button,
#dataTableEditorDrawerAdminRfidCards .component-system-button.round.toolbar-delete-row-button.toolbar-button,
#dataTableEditorAdminTags .component-system-button.square.toolbar-add-row-button.toolbar-button,
#dataTableEditorAdminTags .component-system-button.round.toolbar-delete-row-button.toolbar-button {
	display: flex;
}

#dataTableEditorAdminTags .toolbar-section:first-child {
	display: none;
}

#dataTableEditorAdminTags .toolbar-section:nth-of-type(2) {
	margin-left: 16px;
}

#dataTableEditorAdminTags .component-system-button.square.toolbar-add-row-button.toolbar-button {
	padding: 16px;
}

#dataTableEditorDrawerAdminRfidCards .toolbar-section {
	margin-left: 16px;
}

#dataTableEditorDrawerAdminRfidCards .component-system-button.square.toolbar-add-row-button.toolbar-button {
	padding: 16px;
}

#dataTableEditorKeys .kebab-block-buttons .kebab-btn:nth-of-type(1) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_bin_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorInvitations .kebab-block-buttons .kebab-btn:nth-of-type(1) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_bin_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorRequests .kebab-block-buttons .kebab-btn:nth-of-type(1) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_thumb_up_o_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorRequests .kebab-block-buttons .kebab-btn:nth-of-type(2) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 50px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_thumb_down_o_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorParticipants .kebab-block-buttons .kebab-btn:nth-of-type(1) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_ui_card_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorParticipants .kebab-block-buttons .kebab-btn:nth-of-type(2) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 50px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_mail_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorParticipants .kebab-block-buttons .kebab-btn:nth-of-type(3) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 86px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_mail_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorSpaces .kebab-block-buttons .kebab-btn:nth-of-type(1) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_exit_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorSpaces .kebab-block-buttons .kebab-btn:nth-of-type(2) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 50px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_settings_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorSpaces .kebab-block-buttons .kebab-btn:nth-of-type(3) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 86px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_thumb_up_o_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorSpaces .kebab-block-buttons .kebab-btn:nth-of-type(4) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 120px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_thumb_down_o_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorTariffCharges .kebab-block-buttons .kebab-btn:nth-of-type(1),
#dataTableEditorTariffUsers .kebab-block-buttons .kebab-btn:nth-of-type(1) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_edit_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorTariffCharges .kebab-block-buttons .kebab-btn:nth-of-type(2),
#dataTableEditorTariffUsers .kebab-block-buttons .kebab-btn:nth-of-type(2) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 60px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_bin_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorStatTtb .kebab-block-buttons .kebab-btn {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_plus_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

/* Number field */

.ant-input-number-group-wrapper.agg-input {
	border: 1px solid rgb(var(--secondary));
}

.ant-input-number.agg-input {
	border: 0;
}

.ant-input-number-group-wrapper.agg-input:not(.ant-input-disabled, .ant-input-number):hover {
	border: 1px solid rgb(var(--h2));
	transition: all ease 0.3s;
}

.ant-input-number.agg-input:not(.ant-input-disabled):hover {
	border: 0;
}

.ant-input-number-handler:hover .ant-input-number-handler-down-inner,
.ant-input-number-handler:hover .ant-input-number-handler-up-inner {
	color: rgb(var(--active));
}

.ant-input-number-group-wrapper.agg-input .ant-input-number-handler-wrap .ant-input-number-handler {
	border-right: 0;
}

.custom-number {
	border-radius: var(--border-radius-btn);
	transition: all .3s ease;
}

.custom-number:has(input:focus) {
	box-shadow: 0 0 0 3px rgba(var(--active), 0.4) !important;
}

.ant-input-number-group-wrapper:has(input:focus:hover) {
	border-color: rgb(var(--active)) !important;
}

.ant-input-number-group-wrapper:has(input:focus) {
	border-color: rgb(var(--active)) !important;
}

.info-tooltip .component-label:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-mask-image: url("/web/static/images/ic_info_40.png");
	background-color: rgb(var(--accent));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	cursor: pointer;
}

.g2-html-annotation {
	color: rgb(var(--text)) !important;
}

.custom_tooltip {
	width: 240px;
}

.custom_tooltip .ant-tooltip-inner>div {
	text-align: center;
}

#panelStatTtzCharts {
	border-top: 1px solid rgb(var(--secondary));
}

#panelAllSessions,
#panelAvailableAllHours,
#panelWorkloadAllHours,
#panelPotentialEfficiency,
#panelRevenue,
#panelFilterDay,
#panelFilterDayChargingPD,
#panelFilterDayDriverPD {
	border-top: 1px solid rgb(var(--h2));
}

#panelChargingPerDayInner .grid-component.dockable,
#panelRevenuePerDayInner .grid-component.dockable,
#panelDriverPerDayInner .grid-component.dockable,
#panelProfitInner .grid-component.dockable {
	grid-template-columns: auto auto 1fr;
	column-gap: 16px;
}

#panelChartRevenuePDLabel>div>.grid-component.dockable,
#panelChartDriverPDLabel>div>.grid-component.dockable,
#panelChartChargingPDLabel>div>.grid-component.dockable,
#panelChartProfitLabel>div>.grid-component.dockable {
	grid-template-columns: auto 1fr;
}

#panelChartRevenuePerDay>div>.grid-component.dockable,
#panelChartDriverPerDay>div>.grid-component.dockable,
#panelChartChargingPerDay>div>.grid-component.dockable,
#panelChartProfit>div>.grid-component.dockable {
	grid-template-columns: 150px auto;
}

/* Charging */
.charge-img .image-component-container img {
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	z-index: 40;
	position: relative;
}

.charge-img .image-component-container:before {
	content: "";
	display: block;
	position: absolute;
	background: url("/web/static/images/no_user.png");
	margin: auto;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	background-size: cover;
	filter: blur(4px);

}

.charge-img .image-component-container {
	position: relative;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	overflow: hidden;
	margin: auto;
}

#labelChargeASocketTypeValue:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/socketType2.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

#labelChargeBSocketTypeValue:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/wireGbt.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

#labelChargeAStatusValue span,
#labelChargeBStatusValue span {
	position: relative;
}

#labelChargeAStatusValue span:before,
#labelChargeBStatusValue span:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--success));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.busy#labelChargeAStatusValue span:before,
.busy#labelChargeBStatusValue span:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--info));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.faulted#labelChargeAStatusValue span:before,
.faulted#labelChargeBStatusValue span:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--accent));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.unavailable#labelChargeAStatusValue span:before,
.unavailable#labelChargeBStatusValue span:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgba(var(--text), .4);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.card-header span {
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: rgb(var(--text));
}

.charge-card .container-scrolling {
	border-radius: var(--border-radius-panel);
}

.number-label span {
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: rgb(var(--text));
}

.secondary_btn.button-back span {
	padding-left: 16px;
}

.secondary_btn.button-back:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_arrow_full_right_24.svg");
	background-color: rgb(var(--main));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.secondary_btn.button-back:hover:before {
	background-color: rgb(var(--accent));
	transition: 0.3s;
}

.secondary_btn.button-back .agg-btn {
	height: 40px !important;
}

.secondary_btn.button-houston .agg-btn {
	height: 40px !important;
}

.secondary_btn.button-houston span {
	padding-left: 2px;
}

.secondary_btn.button-houston:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_warning_o_24.svg");
	background-color: rgb(var(--main));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.secondary_btn.button-houston:hover:before {
	background-color: rgb(var(--accent));
	transition: 0.3s;
}

.button-houston .agg-btn.secondary {
	border: none;
}

.button-houston:hover .agg-btn.secondary {
	border: none;
}

.primary_btn.button-charging .agg-btn {
	height: 40px !important;
}

/* Charging number field */
.charging-number .ant-input-number-group-wrapper.agg-input {
	border: none;
}

.charging-number .ant-input-number.agg-input {
	border: none;
}

.charging-number .ant-input-number-group-wrapper.agg-input:not(.charging-number .ant-input-disabled, .charging-number .ant-input-number):hover {
	border: none;
	transition: all ease 0.3s;
}

.charging-number .agg-input-wrapper input,
.charging-number .agg-input.agg-input input {
	font-size: 32px;
	line-height: 18px;
	font-weight: 900;
}

.charging-number .ant-input-number-group-wrapper.agg-input .ant-input-number.agg-input {
	background: rgb(var(--bg)) !important;
}

.js-numberField.charging-number .ant-input-number-handler-wrap {
	opacity: 1;
}

.custom-number.charge .agg-input-wrapper input,
.custom-number.charge .agg-input.agg-input input {
	font-size: 32px;
	line-height: 18px;
	font-weight: 900;
	text-align: right;
	padding-right: 21px;
}

.custom-number.charge .ant-input-number-group-addon {
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: rgb(var(--text));
	border: none;
}

.custom-number.charge .agg-input-wrapper,
.custom-number.charge .agg-input.agg-input {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

#labelChargeKwh:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: -4px;
	-webkit-mask-image: url("/web/static/images/ic_uptime_16.svg");
	background-color: rgb(var(--text));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#labelChargeKwh span {
	position: relative;
	padding-left: 16px;
}

.custom-number.charge .ant-input-number-group-wrapper.agg-input .ant-input-number-group-addon {
	position: relative;
}

.custom-number.charge .ant-input-number-group-wrapper.agg-input .ant-input-number-group-addon:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: -4px;
	top: 7px;
	-webkit-mask-image: url("/web/static/images/ic_uptime_16.svg");
	background-color: rgb(var(--text));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#panelWrapperChargeCard {
	border-radius: var(--border-radius-panel);
}

#labelECharge {
	border-radius: var(--border-radius-panel);
}

#tabbedPanelChargingProcess {
	border-radius: var(--border-radius-panel);
}

.charging-number .tooltip-content-wrapper,
#labelChargeKwh {
	padding-top: 4px;
}

.cable-info .component-label:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 80px;
	height: 80px;
	position: relative;
	top: 0;
	-webkit-mask-image: url("/web/static/images/ic_info_70.svg");
	background-color: rgb(var(--accent));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	cursor: pointer;
}

.charging-done .component-label:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 80px;
	height: 80px;
	position: relative;
	top: 0;
	-webkit-mask-image: url("/web/static/images/ic_success_70.svg");
	background-color: rgb(var(--success));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	cursor: pointer;
}

#buttonChargeProgress span {
	padding-left: 20px;
}

#buttonChargeProgress:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_unplug_24.svg");
	background-color: rgb(var(--bg));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#buttonChargeProgress:hover:before {
	background-color: rgb(var(--bg));
	transition: 0.3s;
}

#buttonChargeProgress .agg-btn {
	height: 40px !important;
}

#labelCurrentSocket span {
	position: relative;
}

#labelCurrentSocket span:before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--success));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.busy#labelCurrentSocket span:before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--info));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.faulted#labelCurrentSocket span:before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--accent));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.unavailable#labelCurrentSocket span:before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: block;
	background: rgba(var(--text), .4);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.event_type[name="note"] {
	border: 2px solid rgb(var(--h2));
	padding: 7px 10px 7px 30px;
	border-radius: var(--border-radius-btn);
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: rgb(var(--h2));
	position: relative;
}

.event_type[name="incident"] {
	border: 2px solid rgb(var(--incident));
	padding: 7px 35px 7px 30px;
	border-radius: var(--border-radius-btn);
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: rgb(var(--incident));
	position: relative;
}

.event_type[name="note"]:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_alert_o_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.event_type[name="incident"]:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_attention_s_16.svg");
	background-color: rgb(var(--incident));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

/* Toggle in table (instead boolean) */
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 28px;
	height: 16px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: default;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(var(--bg));
	border: 2px solid rgb(var(--h2));
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 10px;
	width: 10px;
	left: 2px;
	bottom: 1px;
	background-color: rgb(var(--h2));
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider {
	background-color: rgb(var(--active));
	border: 2px solid rgb(var(--active));
}

/* input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
} */

input:checked+.slider:before {
	-webkit-transform: translateX(12px);
	-ms-transform: translateX(12px);
	transform: translateX(12px);
	background-color: rgb(var(--bg));
	-webkit-transition: .4s;
}

/* Rounded sliders */
.slider.round {
	border-radius: 8px;
}

.slider.round:before {
	border-radius: 50%;
}

#dataTableEditorColors .kebab-block-buttons .kebab-btn:nth-of-type(1),
#dataTableEditorAdminEvents .kebab-block-buttons .kebab-btn:nth-of-type(1),
#dataTableEditorAdminChargeEvents .kebab-block-buttons .kebab-btn:nth-of-type(1) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_visible_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorAdminEvents.filtered .kebab-block-buttons .kebab-btn:nth-of-type(1) {
	background-color: rgb(var(--active));
}

#dataTableEditorAdminEvents .kebab-block-buttons .kebab-btn:nth-of-type(2),
#dataTableEditorAdminChargeEvents .kebab-block-buttons .kebab-btn:nth-of-type(2) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 50px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_mail_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorAdminEvents .kebab-block-buttons .kebab-btn:nth-of-type(3),
#dataTableEditorAdminChargeEvents .kebab-block-buttons .kebab-btn:nth-of-type(3) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 30px;
	height: 24px;
	position: absolute;
	left: 80px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/open_close_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}



.g2-html-annotation {
	font-size: 20px !important;
}

.style-notice span {
	font-size: 10px;
	line-height: 10px;
	color: rgb(var(--h2));
}

#dataTableEditorColors .ant-table-thead {
	display: none;
}

#dataTableEditorColors td.color span {
	box-shadow: none;
	border: 1px solid rgb(var(--main));
	border-radius: var(--border-radius-btn);
	width: 24px;
	height: 24px;
}

#dataTableEditorColors td.colorDescription div {
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: rgb(var(--h2));
}

#dataTableEditorColors .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(2n) {
	background: rgb(var(--bg));
}

#dataTableEditorColors .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(odd) {
	background: rgb(var(--bg));
}

#dataTableEditorColors .agg-table-wrapper .ant-table-body .ant-table-tbody>tr.ant-table-row>td {
	height: 24px;
}

#panelStyleColor {
	border-right: 1px solid rgb(var(--secondary));
}

#dataTableEditorColors .agg-table-wrapper .ant-table-body .ant-table-tbody>tr.ant-table-row>td:first-child {
	padding-left: 0;
}

#labelStyleBadge span {
	border: 2px solid rgb(var(--incident));
	padding: 6px 35px 5px 30px;
	border-radius: var(--border-radius-btn);
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: rgb(var(--incident));
	position: relative;
}

#labelStyleBadge:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_attention_s_16.svg");
	background-color: rgb(var(--incident));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

#textFieldStyle .agg-input-wrapper,
#textFieldStyle .agg-input.agg-input,
#textFieldLoginValue .agg-input-wrapper,
#textFieldLoginValue .agg-input.agg-input {
	padding-left: 30px !important;
}

#textFieldStyle,
#textFieldLoginValue {
	position: relative;
}

#textFieldStyle .container-scrolling:before,
#textFieldLoginValue .container-scrolling:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_user_o_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	z-index: 200;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.reports-name {
	position: relative;
}

.reports-name .ant-select.agg-select {
	padding-left: 20px;
}

.reports-name .ant-select.agg-select:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_page_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	z-index: 200;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dropdownListExtraReportsName{
    min-width: 280px;
    width: 100%;
    max-width: 400px;
}
#dropdownListExtraReportsName .ant-select-selection-item span{
    width: 92%;
    text-overflow: ellipsis;
    overflow: hidden;
}

#labelAvailableStyle span,
#labelFaultedStyle span,
#labelBusyStyle span {
	padding-left: 20px;
	position: relative;
}

#labelAvailableStyle span:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--success));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

#labelFaultedStyle span:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--incident));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

#labelBusyStyle span:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--info));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

/* Progress bar */
.pr-bar .ant-progress-inner {
	height: 40px;
	background: rgba(var(--main), 0.4);
	position: relative;
}

.pr-bar .ant-progress-bg {
	height: 32px !important;
	margin: 4px;
}

.pr-bar .ant-progress-bg,
.pr-bar .ant-progress-success-bg {
	background: rgb(var(--success));
	border-radius: 20px !important;
}

.pr-bar .ant-progress-inner:before {
	content: "3,12 из 12 кВт*ч";
	display: inline-block;
	height: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: rgb(var(--bg));
	font-family: Roboto;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	z-index: 2;
}

.pr-bar .ant-progress-inner:after {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 21px;
	height: 20px;
	-webkit-mask-image: url("/web/static/images/ic_charging_24.svg");
	background-color: rgb(var(--bg));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

#menuHorizontalStyle .agg-menu-item {
	flex-direction: column;
	line-height: 16px;
}

.horizontal .agg-menu-item-value {
	font-size: 10px;
	font-weight: 400;
}

.horizontal .agg-menu-item:hover span {
	color: rgb(var(--accent));
}

/* Report settings tab menu */

.report-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab {
	margin-left: 16px;
	padding: 10px 18px;
	padding-right: 4px;
}

.report-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(1):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_analysis_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.report-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(2):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_access_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.report-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(3):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_function_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.report-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:nth-child(1):before {
	background-color: rgb(var(--text));
}

.report-settings .ant-tabs-top .ant-tabs-tab:after {
	background: rgb(var(--accent));
}

.report-settings .ant-tabs-ink-bar {
	background: rgb(var(--accent));
}

.report-settings .ant-tabs-left .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
.report-settings .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
	color: rgb(var(--text));
	font-weight: 400;
	transition: all 0.5s;
}

.report-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(1):before,
.report-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(2):before,
.report-settings .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(3):before {
	background-color: rgb(var(--text));
	transition: all 0.5s;
}

#dataTableEditorExtraStatTtbPf .kebab-block-buttons .kebab-btn {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_plus_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.volume:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_server_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -3px;
	top: 50%;
	transform: translateY(-50%);
}

.cpu-load:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_cpu_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -3px;
	top: 50%;
	transform: translateY(-50%);
}

.memory:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_memory_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -3px;
	top: 50%;
	transform: translateY(-50%);
}

.ip:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_globe_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -3px;
	top: 50%;
	transform: translateY(-50%);
}

.queue:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_dashboard_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -3px;
	top: 50%;
	transform: translateY(-50%);
}

#dataTableEditorDevicesList .kebab-block-buttons .kebab-btn:nth-of-type(1) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 18px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_crown_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorDevicesList .kebab-block-buttons .kebab-btn:nth-of-type(2) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 52px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_administration_24.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#dataTableEditorDevicesList td.statusCharge div.html-snippet.table-html-snippet,
#dataTableEditorDevicesList td.statusSocketA div.html-snippet.table-html-snippet,
#dataTableEditorDevicesList td.statusSocketB div.html-snippet.table-html-snippet {
	margin-left: 6px;
}

#dataTableEditorDevicesList td.statusCharge div.html-snippet.table-html-snippet a,
#dataTableEditorDevicesList td.statusSocketA div.html-snippet.table-html-snippet a,
#dataTableEditorDevicesList td.statusSocketB div.html-snippet.table-html-snippet a {
	color: rgb(var(--text));
}

#dataTableEditorDevicesList td.statusCharge div.html-snippet.table-html-snippet a[name="0"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--accent));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

#dataTableEditorDevicesList td.statusCharge div.html-snippet.table-html-snippet a[name="1"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--info));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

#dataTableEditorDevicesList td.statusCharge div.html-snippet.table-html-snippet a[name="2"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--success));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

#dataTableEditorDevicesList td.statusCharge div.html-snippet.table-html-snippet a[name="3"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--text));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

#dataTableEditorDevicesList td.statusCharge div.html-snippet.table-html-snippet a[name="4"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--secondary));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

#dataTableEditorDevicesList td.statusSocketA div.html-snippet.table-html-snippet a[name="0"]:before,
#dataTableEditorDevicesList td.statusSocketB div.html-snippet.table-html-snippet a[name="0"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--success));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

#dataTableEditorDevicesList td.statusSocketA div.html-snippet.table-html-snippet a[name="1"]:before,
#dataTableEditorDevicesList td.statusSocketB div.html-snippet.table-html-snippet a[name="1"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--accent));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

#dataTableEditorDevicesList td.statusSocketA div.html-snippet.table-html-snippet a[name="2"]:before,
#dataTableEditorDevicesList td.statusSocketB div.html-snippet.table-html-snippet a[name="2"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--secondary));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

#dataTableEditorDevicesList td.statusSocketA div.html-snippet.table-html-snippet a[name="3"]:before,
#dataTableEditorDevicesList td.statusSocketB div.html-snippet.table-html-snippet a[name="3"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--text));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}

.device_name {
	position: relative;
	padding-left: 20px;
}

.device_name:before {
	content: "";
	display: inline-block;
	height: auto;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_eos_charger_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
}

/* Step panel */
.ant-steps.ant-steps-horizontal.ant-steps-label-horizontal {
	height: 34px;
}

.ant-steps-item-active:before {
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--h1));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
	padding-left: 5px !important;
	padding-top: 2px;
}

.ant-steps-item-active .ant-steps-item-title {
	color: rgb(var(--bg)) !important;
}

.ant-steps-item-wait:before {
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: block;
	background: none;
	border: 1px solid rgb(var(--h2));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.ant-steps-item-wait .ant-steps-item-title {
	color: rgb(var(--h2)) !important;
}

.ant-steps-item-finish:before {
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--h2));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.ant-steps-item-finish .ant-steps-item-title {
	color: rgb(var(--bg)) !important;
}

.ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title:after {
	position: absolute;
	top: 16px;
	left: 85%;
	display: block;
	width: 9999px;
	height: 2px;
	background: rgb(var(--h2));
	content: "";
}

.ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title:after,
.ant-steps-item-wait>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title:after {
	position: absolute;
	top: 16px;
	left: 85%;
	display: block;
	width: 9999px;
	height: 2px;
	background: linear-gradient(to right, rgb(var(--bg)) 0%, rgb(var(--bg)) 50%, rgb(var(--secondary)) 50%);
	background-size: 20px 1px;
	content: "";
}

.steps-action {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.ant-steps-item:last-child {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: 35px;
}

.ant-steps-vertical .ant-steps-item-title {
	display: block;
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
}

.ant-steps-vertical>.ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-tail:after {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 2px;
	height: 100%;
	background: rgb(var(--h2));
	content: "";
}

.ant-steps-vertical>.ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-tail:after,
.ant-steps-vertical>.ant-steps-item-wait>.ant-steps-item-container>.ant-steps-item-tail:after {
	position: absolute;
	top: 70%;
	left: 0;
	display: block;
	width: 3px;
	height: 70%;
	background: linear-gradient(to bottom, rgb(var(--bg)) 0%, rgb(var(--bg)) 50%, rgb(var(--secondary)) 50%);
	background-size: 1px 20px;
	content: "";
}

.agg-btn.main.steps-action-button {
	background: rgb(var(--main));
	color: rgb(var(--bg));
	font-family: "Roboto";
	font-size: 14px;
	line-height: 18px;
	border-radius: var(--border-radius-btn);
	min-width: 100px !important;
}

.agg-btn.main.steps-action-button:hover {
	background: rgb(var(--accent));
	transition: all 0.5s;
}

.agg-btn.main.steps-action-button {
	padding-right: 20px;
	position: relative;
}

.agg-btn.main.steps-action-button:after {
	content: ">";
	font-size: 16px;
	color: rgb(var(--bg));
	text-align: right;
	pointer-events: none;
	line-height: 20px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	right: 16px;
}

.agg-btn.main.steps-action-button:hover:after {
	color: rgb(var(--bg));
	transition: all 0.5s;
}

.agg-btn.main.steps-action-button[data-testid="done-step-btn"] {
	padding-right: 14px;
}

.agg-btn.main.steps-action-button[data-testid="done-step-btn"]:after {
	content: "";
}

.disabled-next-button button.agg-btn.main.steps-action-button{
z-index: -1!important;
}

.agg-btn.secondary.steps-action-button {
	border: 1px solid rgb(var(--main));
	color: rgb(var(--text));
	background: rgb(var(--bg));
	font-family: "Roboto";
	font-size: 14px;
	line-height: 18px;
	border-radius: var(--border-radius-btn);
	min-width: 100px !important;
	position: relative;
	padding-left: 20px;
}

.agg-btn.secondary.steps-action-button:before {
	content: "<";
	font-size: 16px;
	color: rgb(var(--text));
	text-align: right;
	pointer-events: none;
	line-height: 20px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	left: 16px;
}

.agg-btn.secondary.steps-action-button:hover:before {
	color: rgb(var(--accent));
	transition: all 0.5s;
}

.agg-btn.secondary.steps-action-button:hover {
	border: 1px solid rgb(var(--accent));
	color: rgb(var(--accent));
	transition: all 0.5s;
}

#uploaderCsvWizard .agg-btn.secondary {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background: rgb(var(--main));
	color: rgb(var(--bg));
	font-family: "Roboto";
	font-size: 14px;
	line-height: 18px;
	border-top-right-radius: var(--border-radius-btn);
	border-bottom-right-radius: var(--border-radius-btn);
	border: none;
}

#uploaderCsvWizard .agg-btn.secondary {
	padding-left: 38px;
}

#uploaderCsvWizard:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_import_16.svg");
	background-color: rgb(var(--bg));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#uploaderCsvWizard .anticon.anticon-upload {
	display: none;
}

#uploaderCsvWizard .agg-btn.secondary:hover {
	background-color: rgb(var(--accent)) !important;
	transition: 0.3s;
}

#htmlSnippetWifiMan span,
a {
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: rgb(var(--h2));
}

/* Admin charging tab menu */

.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab {
	margin-left: 16px;
	padding: 10px 18px;
	padding-right: 4px;
}

.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(1):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_eos_charger_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(2):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_details_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(3):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_event_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(4):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_location_o_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(5):before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_configure_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab:nth-child(5) {
	height: 100%;
	align-self: unset;
	margin-left: auto;
	padding-right: 24px;
}

.admin-charge .ant-tabs-nav-wrap,
.admin-charge .ant-tabs-nav-list {
	width: 100%;
}

.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab:hover:before {
	background-color: rgb(var(--text));
}

.admin-charge .ant-tabs-top .ant-tabs-tab:after {
	background: rgb(var(--accent));
}

.admin-charge .ant-tabs-top .ant-tabs-tab:nth-child(5):after {
	background: transparent;
}

.admin-charge .ant-tabs-ink-bar {
	background: rgb(var(--accent));
}

.admin-charge .ant-tabs-left .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
.admin-charge .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
	color: rgb(var(--text));
	font-weight: 400;
	transition: all 0.5s;
}

.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(1):before,
.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(2):before,
.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(3):before,
.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(4):before,
.admin-charge .ant-tabs .ant-tabs-nav .ant-tabs-tab-active:nth-child(5):before {
	background-color: rgb(var(--text));
	transition: all 0.5s;
}

.incident-circle span.component-label {
	font-family: "Roboto";
	font-size: 42px;
	font-weight: 700;
	line-height: 64px;
	color: rgb(var(--bg));
	z-index: 4;
	position: relative;

}

.incident-circle.opened span {
	margin-left: 24px;
}

.incident-circle.all span {
	margin-left: 12px;
}

.incident-circle span:before {
	content: "";
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -2;
}

.incident-circle.opened span:before {
	background: rgb(var(--incident));
}

.incident-circle.all span:before {
	background: rgb(var(--h1));
}

#buttonCreateIncidentAdmin span {
	padding-left: 10px;
}

#buttonCreateIncidentAdmin:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_warning_o_24.svg");
	background-color: rgb(var(--bg));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#buttonCreateIncidentAdmin:hover:before {
	background-color: rgb(var(--bg));
	transition: 0.3s;
}

#buttonStopACharging span,
#buttonStopBCharging span {
	padding-left: 24px;
}

#buttonStopACharging:before,
#buttonStopBCharging:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_plug_24.svg");
	background-color: rgb(var(--bg));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#buttonStopACharging:hover:before,
#buttonStopBCharging:hover:before {
	background-color: rgb(var(--bg));
	transition: 0.3s;
}

/* Pagination */
.pagination-item {
	border-color: rgb(var(--h2)) !important;
	color: rgb(var(--h2)) !important;
}

.pagination-item:hover {
	border-color: rgb(var(--main)) !important;
	color: rgb(var(--main)) !important;
}

.ant-pagination-item-active .pagination-item {
	background: rgb(var(--active)) !important;
	border-color: rgb(var(--active)) !important;
	color: rgb(var(--bg)) !important;
}

.pagination-next-button,
.pagination-prev-button {
	border-color: rgb(var(--h2)) !important;
	color: rgb(var(--h2)) !important;
}

.pagination-next-button svg path,
.pagination-prev-button svg path {
	fill: rgb(var(--h2));
}

.pagination-next-button:hover,
.pagination-prev-button:hover {
	border-color: rgb(var(--main)) !important;
	color: rgb(var(--main)) !important;
}

.pagination-next-button:hover svg path,
.pagination-prev-button:hover svg path {
	fill: rgb(var(--main));
}

#labelAdminSocketA span,
#labelAdminSocketB span {
	position: relative;
	padding-left: 24px;
}

#labelAdminSocketA span:before,
#labelAdminSocketB span:before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--success));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.busy#labelAdminSocketA span:before,
.busy#labelAdminSocketB span:before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: block;
	background: red;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.faulted#labelAdminSocketA span:before,
.faulted#labelAdminSocketB span:before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: block;
	background: rgb(var(--accent));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.unavailable#labelAdminSocketA span:before,
.unavailable#labelAdminSocketB span:before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: block;
	background: rgba(var(--text), .4);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.policy-label {
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: rgb(var(--text));
}

.policy-link {
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	color: rgb(var(--h2));
	text-decoration: underline;
}

.policy-link:hover {
	color: rgb(var(--text));
}

#labelCoordinatesValue span.component-label {
	margin-left: 16px;
}

#labelCoordinatesValue:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_location_o_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: -4px;
	top: 4px;
}

.connection-header span {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: rgb(var(--text));
}

.connection-panel {
	background: rgb(var(--bg-secondary)) !important;
	border-radius: var(--border-radius-panel);
}

.aggregation-panel {
	background: rgb(var(--bg-secondary)) !important;
}

/* Media queries */
@media (max-width: 1980px) {
	#dataTableEditorNotifications colgroup col:nth-child(1) {
		width: 500px !important;
	}
}

@media (max-width: 1970px) {
	.pie-label span.component-label {
		font-size: 10px;
		line-height: 14px;
	}
}

@media (max-width: 1865px) {
	.pie-header h1.component-label {
		font-size: 20px;
		line-height: 20px;
	}
}

@media (max-width: 1790px) {
	#dataTableEditorNotifications colgroup col:nth-child(1) {
		width: 250px !important;
	}

	#dataTableEditorNotifications colgroup col:nth-child(2),
	#dataTableEditorNotifications colgroup col:nth-child(3),
	#dataTableEditorNotifications colgroup col:nth-child(4),
	#dataTableEditorNotifications colgroup col:nth-child(5) {
		width: 120px !important;
	}

	.pie-label.secondary-label {
		line-height: 1;
	}

	.pie-label>div>div {
		margin: auto 0;
	}

	#buttonDeleteSecondary {
		grid-area: 2/1/3/2;
		margin-left: 0;
	}

	#labelStyleBadge {
		grid-area: 3/1/4/2;
	}

	#buttonMainPrimary {
		grid-area: 2/1/3/2;
		margin-left: 0;
	}

	#buttonMainSecondary {
		grid-area: 3/1/4/2;
		margin-left: 0;
	}
}

@media (max-width: 1540px) {
	#panelDevicesListActions > div > div {
		grid-template-columns: auto auto auto 1fr;
	}

	.modalHlsVideo.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	max-width: 1200px;
	}
}


@media (min-width: 1468px) and (max-width: 1730px) {
	#panelCurrentPreliminaryCost {
		grid-area: 3/1/4/2;
	}

	#panelDataCurrentSocket>div>.grid-component.dockable {
		grid-template-columns: auto auto;
	}
}

@media (max-width: 1725px) {
	#panelMaxUser {
		grid-area: 2/1/3/3;
	}

	#panelMaxSpaces {
		grid-area: 2/1/3/3;
	}
}

@media (max-width: 1700px) {
	#panelScreenTariff {
		grid-area: 1/3/2/5;
	}

	#panelScreenTag {
		grid-area: 2/1/3/2;
	}

	#panelRfid {
		grid-area: 1/1/2/2;
	}

	#panelStyle {
		grid-area: 1/3/2/3;
	}

	#panelPaidSecondLine .grid-component.dockable {
		grid-template-columns: 220px 0 1fr;
	}

	#panelPaidSecondLine {
		overflow: hidden;
	}

	#panelPaidSecondLine .container-scrolling {
		overflow: hidden;
	}
}

@media (max-width: 1698px) {
	#panelStatTtzWorkload {
		grid-area: 2/1/3/2;
	}

	#panelStatTtzEfficiency {
		grid-area: 2/2/3/3;
	}

	#panelAdminStatTtz>div>.grid-component.dockable {
		grid-template-rows: auto auto 1fr;
	}

	.g2-html-annotation {
		font-size: 18px !important;
	}

	#panelStatTtzCharts>div>.grid-component.dockable {
		grid-template-columns: 1fr 1fr;
		height: fit-content;
	}

	#panelStatTtzSuccessSessions .grid-component.dockable,
	#panelStatTtzAvailableStations .grid-component.dockable,
	#panelStatTtzWorkload .grid-component.dockable,
	#panelStatTtzEfficiency .grid-component.dockable {
		grid-template-columns: 1fr;
	}

	#panelChartSuccessSessions .grid-component.dockable,
	#panelChartAvailableStations .grid-component.dockable,
	#panelChartWorkload .grid-component.dockable,
	#panelChartEfficiency .grid-component.dockable {
		grid-template-columns: 200px auto;
	}

	#panelChartSuccessSessionsLabel .grid-component.dockable,
	#panelChartAvailableStationsLabel .grid-component.dockable,
	#panelChartWorkloadLabel .grid-component.dockable,
	#panelChartEfficiencyLabel .grid-component.dockable {
		grid-template-columns: auto 1fr;
	}

	#panelSuccessSessionsInner .grid-component.dockable,
	#panelAvailableStationsInner .grid-component.dockable,
	#panelEfficiencyInner .grid-component.dockable,
	#panelWorkloadInner .grid-component.dockable {
		grid-template-columns: auto auto 1fr;
		column-gap: 16px;
	}

	#panelStatTtbDriverPerDay {
		grid-area: 2/1/3/2;
	}

	#panelStatTtbProfit {
		grid-area: 2/2/3/3;
	}

	#panelStatTtbCharts>div>.grid-component.dockable {
		grid-template-columns: 1fr 1fr;
		height: fit-content;
	}

}

@media (max-width: 1647px) {
	#panelStyleComponentsInner {
		grid-area: 2/1/3/2;
	}

	#panelStyleComponents>div>.grid-component.dockable {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	#menuVerticalStyle {
		width: fit-content;
	}
}

@media (max-width: 1600px) {
	#panelUserAccount {
		grid-area: 3/1/4/2;
		border-left: none;
		border-top: 1px solid rgb(var(--secondary));
	}

	#panelRegionalSettings {
		grid-area: 4/1/5/2;
		border-left: none;
	}
}

@media (max-width: 1568px) {
	#dataTableEditorNotifications colgroup col:nth-child(1) {
		width: 150px !important;
	}

	#panelScreenTariff {
		grid-area: 2/2/3/4;
	}

	#panelRoles {
		grid-area: 1/2/2/4;
	}

	#panelCSV {
		grid-area: 1/1/2/3;
	}

	#panelReports {
		grid-area: 1/3/2/4;
	}

	#panelPaidThirdLine .grid-component.dockable {
		grid-template-columns: 200px 0 1fr;
	}

	#panelPaidFirstLine .grid-component.dockable {
		grid-template-columns: 200px 0 1fr;
	}

	#panelAdminMainSpace {
		overflow: visible;
	}

	#panelAdminMainSpace .container-scrolling {
		overflow: visible;
	}

	#dateTimePickerReports {
		grid-area: 2/1/3/2;
		width: fit-content;
	}

	#dateTimePickerExtraReports {
		grid-area: 2/1/3/2;
		width: fit-content;
	}
}

@media (max-width: 1470px) {
	#panelMainInfo {
		grid-area: 1/1/2/3;
	}

	#panelContactData {
		grid-area: 2/1/3/3;
	}

	#panelUserAccount {
		grid-area: 3/1/4/3;
		border-top: 1px solid rgb(var(--secondary));
		border-left: none;
	}

	#panelRegionalSettings {
		grid-area: 4/1/5/3;
		border-left: none;
	}

	#buttonAddNewSpace {
		grid-area: 2/1/3/2;
	}

	#panelAdminMainSpace .grid-component.dockable {
		grid-template-columns: 1fr;
	}

	#textFieldNameSpaceValue {
		width: 330px;
	}

	#dropdownListStatusSpaceValue {
		width: 170px;
	}

	#panelCreateSpaceQr {
		gap: 16px;
	}

	#panelCreateSpaceQr .grid-component.dockable {
		grid-template-columns: 70px 110px 1fr;
	}

	#panelPaidFunctionsInfo {
		grid-area: 3/1/4/2;
	}

	#panelAdminTechnicalSettings .grid-component.dockable {
		grid-template-columns: 280px 320px 1fr;
	}

	#panelAdminTechnicalSettings {
		grid-area: 2/1/3/3;
	}

	#panelConfirmAdminPhone .grid-component.dockable {
		grid-template-columns: 120px 98px;
	}

	#panelConfirmAdminMail .grid-component.dockable {
		grid-template-columns: 120px 98px;
	}

	#panelPaidFunctionsInfo {
		grid-area: 3/1/4/3;
		border-left: none;
	}

	#panel19 {
		display: none;
	}

	#panelPaidFirstLine .grid-component.dockable {
		grid-template-columns: 150px 170px 190px 1fr;
	}

	#panelPaidSecondLine {
		grid-area: 3/1/4/3;
	}

	#panelPaidSecondLine .grid-component.dockable {
		grid-template-columns: 220px 0 1fr;
	}

	#panelPaidThirdLine {
		grid-area: 4/1/5/3;
	}

	#panelPaidThirdLine .grid-component.dockable {
		grid-template-columns: 220px 0 1fr;
	}

	#panelRequests {
		grid-area: 2/1/3/3;
	}

	#panelInvitations {
		grid-area: 1/1/2/3;
	}

	#panelRequestInvite .grid-component.dockable {
		grid-template-rows: auto auto;
	}

	#panelAdminRoles .grid-component.dockable {
		height: fit-content;
	}

	#panelChargeCard {
		display: none;
	}

	#panelCharging {
		grid-area: 1/1/2/3;
	}

	/*#subdashboardRight .grid-component.dockable {
		height: fit-content;
	}*/
}

@media (max-width: 1380px) {
	#panelDownload:has(#buttonDownloadStatistics) {
		grid-area: 3 / 1 / 4 / 2;
		width: 180px;
	}

	#panelDownload {
		grid-area: 2/5/3/6;
	}

	#buttonUpdateRoles {
		grid-area: 1/5/2/6;
		width: 120px;
		margin-left: auto;
	}

	#dropdownListStyle {
		min-width: 0px;
		width: 90%;
	}
}

@media (max-width: 1270px) {
	#textAreaAdminSpaceDescrValue {
		width: 100%;
		padding-right: 16px;
	}

	#panelExtraReportsActions .grid-component.dockable {
		grid-template-columns: auto;
		gap: 16px 0;
	}
	
	#buttonUpdateRoles {
		grid-area: 2/1/3/2;
		width: 120px;
		margin-left: 0;
	}

	#panelDownload {
		width: 156px;
	}

	#panelStyleOuter {
		grid-area: 2/1/3/2;
	}

	#panelAdminStyles>div>.grid-component.dockable {
		grid-template-columns: 1fr;
		height: fit-content;
	}

	#panelDownloadReports {
		grid-area: 3/1/4/2;
		width: fit-content;
	}

	#panelDownloadExtraReports {
		grid-area: 2/1/4/2;
		width: fit-content;
	}

	.modalHlsVideo.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	max-width: 800px;
	max-height: 600px
	}
}

@media (max-width: 1245px) {
	#panelAdminMainInfo2 {
		grid-area: 2/1/3/3;
		border-left: none;
	}

	#panelAdminMainInfo .grid-component.dockable {
		margin-bottom: 0;
	}

	#panelAdminMainInfo2 .grid-component.dockable {
		margin-top: 0;
	}

	#panelAdminTechnicalSettings {
		grid-area: 3/1/4/3;
	}

	#panelPaidFunctionsInfo {
		grid-area: 4/1/4/5;
	}

	#panelAdminMainInfo2 {
		border-top: 1px solid rgb(var(--secondary));
	}

	#buttonRegisterParticipant {
		grid-area: 2/1/3/2;
	}

	#buttonUpdateRoles {
		grid-area: 2/5/3/6;
	}

	#dataTableEditorParticipants .agg-table-wrapper .ant-table-header .ant-table-thead .ant-table-cell:nth-child(2) {
		left: 0 !important;
		position: relative !important;
	}

	#dataTableEditorParticipants .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-cell-fix-left:nth-child(2),
	#dataTableEditorParticipants .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-cell-fix-right:nth-child(2) {
		left: 0 !important;
		position: relative !important;
	}

	#dataTableEditorParticipants colgroup col:last-child {
		width: 50px !important;
	}
}

@media (max-width: 1200px) {

	#panelChartSuccessSessionsLabel,
	#panelChartAvailableStationsLabel,
	#panelChartWorkloadLabel,
	#panelChartEfficiencyLabel {
		grid-area: 2/1/3/2;
	}

	#panelChartSuccessSessions>div>.grid-component.dockable,
	#panelChartAvailableStations>div>.grid-component.dockable,
	#panelChartWorkload>div>.grid-component.dockable,
	#panelChartEfficiency>div>.grid-component.dockable {
		grid-template-columns: 1fr;
	}


	#panelDownloadExtraStatTtbPf {
		grid-area: 2/3/3/4;
	}

	#buttonUploadStatTtbPf {
		width: 100%;
		max-width: 120px;
		margin-left: auto;
	}

	#panelExtraStatTtbPfActions > div > div {
		grid-template-columns: auto 1fr;
		gap: 16px;
	}

}

@media (min-width: 769px) and (max-width: 1120px) {
	#panelRoleNewUser {
		grid-area: 2/1/3/2;
	}

	#labelConfirmAdminPhone {
		grid-area: 3/1/4/2;
	}

	#panelConfirmAdminPhone {
		grid-area: 4/1/5/2;
	}

	#labelConfirmAdminMail {
		grid-area: 3/1/4/2;
	}

	#panelConfirmAdminMail {
		grid-area: 4/1/5/2;
	}

	#labelGroupTg {
		grid-area: 3/1/4/2;
	}

	#textFieldGroupTgValue {
		grid-area: 4/1/5/2;
	}

	#panelChannel .grid-component.dockable {
		grid-template-columns: 160px 1fr;
	}

	.modal_header.charge span {
		font-size: 14px;
		line-height: 18px;
	}

	.label-h1.charge span {
		font-size: 14px;
	}

	.label-h1.charge .component-label-container {
		margin-top: 4px;
	}

	#tabbedPanelChargingProcess .ant-tabs-tabpane {
		width: 100%;
	}

	#panelChargeKwh {
		grid-area: 2/1/3/2;
	}

	#buttonPowerCharge {
		grid-area: 1/1/2/2;
	}

	#panelPowerCharge .grid-component.dockable {
		grid-template-columns: 1fr;
	}

	#panelEVSEBalanceTariff>div>.grid-component.dockable {
		grid-template-columns: auto auto;
	}
}

@media (max-width: 1120px) {
	#panelPaidFirstLine .grid-component.dockable {
		grid-template-columns: auto auto;
	}

	#panelDownload {
		grid-area: 3/1/4/2;
	}

	.header-h1.charge h1 {
		font-size: 20px;
		line-height: 26px;
	}

	.subheader.charge span {
		font-size: 14px;
		line-height: 18px;
	}

	#subdashboardRight:has(#panelCharging)>div>div>div>.grid-component.dockable {
		grid-template-columns: 1fr;
	}

	/*#numberFieldChargeKwh {
		text-align: right;
		padding-right: 30px;
		max-width: 120px;
		grid-area: 1/2/2/3;
	}*/

	#labelChargeKwh {
		grid-area: 1/3/2/4;
	}

	#panelChargeKwh>div>.grid-component.dockable {
		grid-template-columns: 1fr auto auto 1fr;
	}

	#panelCurrentPreliminaryCost {
		grid-area: 3/1/4/2;
	}

	#panelDataCurrentSocket>div>.grid-component.dockable {
		grid-template-columns: auto auto;
	}
}

@media (min-width: 1100px) and (max-width: 1120px) {
	#labelChannel {
		width: 300px;
	}
}

@media (max-width: 1040px) {
	
	#dateTimePickerStatistics {
		grid-area: 2 / 1 / 3 / 2;
	}

	.label-header span {
		font-size: 12px;
		line-height: 14px;
	}

	#panelStatTtbChargingPerDay {
		grid-area: 3/1/4/2;
	}

	#panelStatTtbProfit {
		grid-area: 4/1/5/2;
	}

	#panelStatTtbCharts>div>.grid-component.dockable {
		grid-template-columns: auto;
	}

	#panelAdminEventsActions .grid-component.dockable {
		grid-template-columns: auto auto 1fr;
	}

	#panelDownloadAdminEvents {
		grid-area: 2/3/3/4;
		width: 100%;
		max-width: 160px;
		margin-left: auto;
	}

	#buttonUploadAdminEvents {
		grid-area: 1/3/2/4;
		width: 100%;
		max-width: 120px;
		margin-left: auto;
	}

	#htmlSnippetWifiMan span,
	a {
		font-size: 12px;
		line-height: 14px;
	}
}

@media (max-width: 988px) {
	#buttonUploadStatTtb,
	#buttonUploadStatTtbPf,
	#buttonUploadDevicesList {
		margin-left: 0;
		width: fit-content;
	}

	#panelDownloadExtraStatTtbPf {
		grid-area: 3/1/4/2;
	}

	#panelAdminStatTtb>div>.grid-component.dockable {
		height: fit-content;
	}

	#panelReportsActions .grid-component.dockable {
		grid-template-columns: auto 1fr;
	}
}

@media (min-width: 769px) and (max-width: 988px) {
	#buttonUploadAdminEvents {
		grid-area: 2/1/3/2;
		margin-left: 0;
	}

	#panelDownloadAdminEvents {
		grid-area: 3/1/4/2;
		margin-left: 0;
	}

	#panelStyle {
		grid-area: 2/1/3/2;
	}

	#panelMaxUser {
		grid-area: 3/1/4/3;
	}

	#panelMaxSpaces {
		grid-area: 3/1/4/3;
	}
}

@media (min-width: 965px) and (max-width: 1468px) {
	#panelScreenTariff {
		grid-area: 2/1/3/2;
	}

	#panelMaxUser {
		grid-area: 2/1/3/2;
	}

	#panelMaxSpaces {
		grid-area: 2/1/3/2;
	}

	#panelScreenTag {
		grid-area: 1/3/2/4;
	}
}

@media (max-width: 920px) {

	#panelUploadImg {
		width: 180px;
	}

	#panelTimeZone {
		grid-area: 2/1/3/2;
	}

	#buttonChangePassword {
		grid-area: 4/1/5/3;
	}

	#labelWarning {
		grid-area: 5/1/6/4;
	}

	#buttonAdminRegister {
		grid-area: 6/1/7/3;
	}

	#buttonDeleteAccount {
		grid-area: 2/1/3/2;
	}

	#labelLinkTelegram {
		grid-area: 3/1/4/2;
	}

	#buttonLinkTelegram {
		grid-area: 4/1/5/2;
	}

	.modalAdminRfid.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
		width: 600px;
	}
}

@media (min-width: 870px) and (max-width: 930px) {
	#panelPaidThirdLine .grid-component.dockable {
		grid-template-columns: 180px 0 1fr;
	}
}

@media (max-width: 882px) {
	#buttonResetCounter {
		grid-area: 2 / 1 / 3 / 2;
	}

	#panelHeaderNotifications>div>div {
		gap: 16px;
	}

	#buttonResetCounter button {
		margin-left: 0;
	}

	#buttonAdminRegister {
		grid-area: 6/1/7/4;
	}

	#buttonChangePassword {
		grid-area: 4/1/5/4;
	}

	#panelDownloadTariffCharges {
		grid-area: 3/1/4/2;
	}

	#panelDownloadTariffUsers {
		grid-area: 2/1/3/2;
	}

	.modalHlsVideo.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	max-width: 600px;
	}
}

@media (max-width: 868px) {
	#dataTableEditorNotifications colgroup col:nth-child(1) {
		width: 150px !important;
	}
	
	#panelDownloadStatTtz {
		grid-area: 2/2/3/3;
	}

	#buttonUploadStatTtz {
		width: 100%;
		max-width: 120px;
	}

	#panelDownloadStatTtz .grid-component.dockable {
		grid-template-columns: 86px !important;
		margin-left: auto;
	}

	#panelStatTtzCharts>div>.grid-component.dockable {
		grid-template-columns: 1fr;
	}

	#panelAdminStatTtzActions>div>.grid-component.dockable {
		row-gap: 16px;
	}

	#panelStatTtzWorkload {
		grid-area: 4/1/5/2;
	}

	#panelStatTtzEfficiency {
		grid-area: 3/1/4/2;
	}

	#panelStatTtzAvailableStations {
		grid-area: 2/1/3/2;
	}

	.pr-bar .ant-progress-inner:before {
		font-size: 15px;
	}
}

@media (max-width: 810px) {
	#buttonUpdateRoles {
		grid-area: 3/1/4/2;
	}

	#panelDownload {
		grid-area: 4/1/5/2;
	}
}


@media (min-width: 769px) and (max-width: 930px) {
	.header {
		font-size: 24px;
	}

	.subheader {
		font-size: 16px;
	}
}

@media (min-width: 769px) and (max-width: 865px) {
	#panelAdminMainInfo .grid-component.dockable {
		grid-template-columns: 1fr;
	}

	#panelAdminMainInfo {
		width: 100%;
	}

	#panelAdminMainInfo2 .grid-component.dockable {
		grid-template-columns: 1fr;
	}

	#panelAdminMainInfo2 {
		width: 100%;
	}

	#panelCreateSpaceQr .grid-component.dockable {
		grid-template-columns: 70px 120px 1fr;
	}

	#panelAdminTechnicalSettings {
		width: 100%;
	}

	#panelAdminTechnicalSettings .grid-component.dockable {
		grid-template-columns: 1fr;
	}

	#panelSpaceTypeAdminRight .grid-component.dockable {
		grid-template-columns: 280px 1fr;
	}

	#panelRoleNewUser .grid-component.dockable {
		grid-template-columns: 280px 1fr;
	}

	#panelChannel .grid-component.dockable {
		grid-template-columns: 100px 1fr;
	}

	#panelAdminPhone .grid-component.dockable {
		grid-template-columns: 280px 1fr;
	}

	#panelConfirmAdminPhone .grid-component.dockable {
		grid-template-columns: 130px 1fr;
	}

	#panelAdminMail .grid-component.dockable {
		grid-template-columns: 280px 1fr;
	}

	#panelConfirmAdminMail .grid-component.dockable {
		grid-template-columns: 130px 1fr;
	}

	#panelAdminTg .grid-component.dockable {
		grid-template-columns: 280px 1fr;
	}

	#panelAdminTechnicalSettingsHeader .grid-component.dockable {
		grid-template-columns: 280px 1fr;
	}
}

@media (min-width: 769px) and (max-width: 850px) {
	#textAreaAdminSpaceDescrValue {
		width: 280px;
	}

	#textFieldNameSpaceValue {
		width: 280px;
	}
}

@media (min-width: 769px) and (max-width: 840px) {
	.outer_input {
		width: 400px;
	}

	.qr_input {
		width: 400px;
		font-size: 12px;
	}
}

@media (max-width: 769px) {
	#uploaderUserImg {
		height: 140px;
	}

	#panelUserNameInner .grid-component.dockable {
		grid-template-columns: 40px auto;
	}

	#panelToggleOwner .grid-component.dockable {
		grid-template-columns: 40px auto;
	}

	#panelToggleLegal .grid-component.dockable {
		grid-template-columns: 40px auto;
	}

	#panelContactData,
	#panelUserAccount {
		padding-bottom: 24px;
	}

	#panelToggleInner .grid-component.dockable {
		grid-template-columns: 40px auto;
	}

	#panelToggleSaving .grid-component.dockable {
		grid-template-rows: auto;
	}

	#buttonChangePassword {
		grid-area: 4 / 1 / 5 / 2;
	}

	#buttonAdminRegister {
		grid-area: 6 / 1 / 7 / 2;
	}

	#toggleButtonSaving {
		margin-left: 2px;
	}
}

@media (max-width: 768px) {

	#menuHorizontal ul {
		display: flex;
		z-index: 20;
    align-items: center;
    justify-content: center;
		background: rgb(var(--bg));
		height: 48px;
	}

	#subdashboard0 {
		min-width: 360px;
	}

	.grid-component.dockable:has(#menuVertical) {
		grid-template-columns: 0 1fr;
	}

	.header {
		font-size: 20px;
	}

	.subheader {
		font-size: 14px;
	}

	.camera_view {
		width: 240px;
		height: 240px;
	}

	.inner_view {
		width: 224px;
		height: 224px;
		mask-image: url(/web/static/images/focus_m.png);
		mask-repeat: no-repeat;
	}

	.ui-component.js-checkBox.collapseBtn {
		display: none;
	}

	#imageLogoRatio img {
		display: block;
	}

	#vectorDrawingLogo {
		grid-area: 1/1/2/2;
		width: 96px;
		margin-left: 16px;
	}

	#menuHorizontal .agg-menu-item {
		flex-direction: column;
		line-height: 16px;
	}

	.horizont .ant-menu:before {
		display: none;
	}

	.grid-component.dockable:has(#menuHorizontal) {
		grid-template-rows: 48px 1fr 48px;
	}


	#subdashboardLeft .container-grid {
		background: transparent;
	}


	#panelImg {
		width: 100px;
		margin-left: 8px;
	}

	#panel8>div>.grid-component.dockable {
		grid-template-columns: 0 0 auto;
	}

	#subdashboardLeft {
		gap: 8px;
		background: transparent;
	}

	.user-img .image-component-container {
		width: 100px;
		height: 100px;
		margin-top: 16px;
	}

	.header-h1 h1 {
		font-size: 20px;
		line-height: 26px;
	}

	.js-label.header-h1,
	.js-label.label-header,
	.js-label.label-value {
		background: transparent;
	}

	.js-image.user-img {
		background: transparent;
	}

	#panelUserHeader {
		grid-area: 1 / 2 / 2 / 3;
		padding: 16px 38px 0 0;
		background: transparent;
	}

	#panelImg {
		grid-area: 1 / 1 / 3 / 2;
		background: transparent;
	}

	#panelAccessLevel {
		grid-area: 2 / 2 / 3 / 3;
		padding: 0 38px 16px 0;
		background: transparent;
	}

	#panelUserInfo {
		grid-area: 4/1/5/3;
		/*border-radius: var(--border-radius-panel) var(--border-radius-panel) 0 0;*/
		border-radius: 0;
	}

	#panelContacts {
		grid-area: 5/1/6/3;
		width: 100%;
		border-radius: 0;
		/*border-radius: 0 0 var(--border-radius-panel) var(--border-radius-panel);*/
	}

	.header-h2 span {
		font-size: 16px;
		line-height: 20px;
	}

	.label-header span {
		font-size: 12px;
		line-height: 16px;
	}

	.label-value span {
		font-size: 16px;
		line-height: 20px;
	}

	#labelStatusValue:before {
		top: 5px;
	}

	.label-h1 span {
		font-size: 16px;
		line-height: 20px;
	}

	#imageLogoLeft.logo-img {
		display: none;
	}

	#labelSpaceID span {
		font-size: 14px;
		line-height: 16px;
	}

	#panelLogoImg .grid-component.dockable {
		gap: 0px;
	}

	#panelGeneralInfo .grid-component.dockable {
		gap: 0px;
	}

	#panelGeneralInfo {
		padding: 16px 8px 8px 24px;
		grid-area: 4/1/5/3;
	}

	#panelSpaceUsers {
		padding: 0 8px 8px 24px;
		grid-area: 5/1/6/3;
	}

	#panelAddresses .grid-component.dockable {
		gap: 0px;
	}

	#panelStatus .grid-component.dockable {
		gap: 0px;
	}

	#panelCharges .grid-component.dockable {
		gap: 0px;
	}

	#panelPower .grid-component.dockable {
		gap: 0px;
		grid-template-columns: 65px auto;
	}

	#labelSpaceStatusValue:before {
		top: 5px;
	}

	#panelSpaceUsers {
		border-top: none;
	}

	#panelSpaceUsers .grid-component.dockable {
		gap: 0px;
	}

	#panelSpaceType {
		padding: 0 24px 16px;
	}

	#textAreaAdminSpaceDescrValue {
		width: 320px;
	}

	.header-userSettings h1 {
		font-size: 16px;
		line-height: 20px;
	}

	#panelAdminMainInfo {
		grid-area: 1/1/2/3;

	}

	#panelAdminMainInfo .grid-component.dockable {
		grid-template-rows: 20px auto auto;
		gap: 8px;
	}

	#panelSpaceID .grid-component.dockable,
	#panelOwnerSpace .grid-component.dockable,
	#panelNameSpace .grid-component.dockable,
	#panelStatusSpace .grid-component.dockable,
	#panelAdminSpaceDescr .grid-component.dockable {
		gap: 0 8px;
	}

	#panelAdminMainInfo2 {
		border-top: none;
	}

	#textFieldNameSpaceValue {
		width: 280px;
	}

	#textAreaAdminSpaceDescrValue {
		height: 80px;
	}

	#panelCreationSpace .grid-component.dockable {
		gap: 24px;
		grid-template-rows: 32px 1fr;
		grid-template-columns: 70px 166px;
	}

	#panelAdminTechnicalSettings .grid-component.dockable {
		gap: 8px;
	}

	#panelSpaceTypeAdminRight {
		padding: 0;
	}

	#panelRoleNewUser {
		grid-area: 2/1/3/2;
	}

	#panelSpaceTypeAdminRight {
		grid-area: 1/1/2/3;
	}

	#panelSpaceTypeAdminRight .grid-component.dockable,
	#panelRoleNewUser .grid-component.dockable {
		gap: 0;
	}

	#textFieldAdminPhoneValue {
		margin-bottom: 16px;
	}

	#panelAdminTypeRole .grid-component.dockable {
		grid-template-columns: 210px;
	}

	#panelChannel .grid-component.dockable {
		grid-template-columns: 100px 100px;
		gap: 0;
	}

	#labelConfirmAdminPhone {
		grid-area: 3/1/4/2;
	}

	#panelConfirmAdminPhone {
		grid-area: 4/1/5/2;
	}

	#panelConfirmAdminPhone .grid-component.dockable {
		grid-template-columns: 120px 98px;
	}

	#textFieldAdminPhoneValue {
		width: 210px;
	}

	#labelConfirmAdminMail {
		grid-area: 3/1/4/2;
	}

	#panelConfirmAdminMail {
		grid-area: 4/1/5/2;
	}

	#textFieldAdminMailValue {
		width: 210px;
	}

	#panelConfirmAdminMail .grid-component.dockable {
		grid-template-columns: 120px 98px;
	}

	#labelGroupTg {
		grid-area: 3/1/4/2;
	}

	#textFieldGroupTgValue {
		grid-area: 4/1/5/2;
		width: 280px;
	}

	#textFieldIDTg {
		width: 210px;
	}

	#panelPaidFirstLine .grid-component.dockable {
		grid-template-columns: 180px 150px;
	}

	#panelPaidSecondLine .grid-component.dockable {
		grid-template-columns: 190px 0 150px;
	}

	#panelPaidThirdLine .grid-component.dockable {
		grid-template-columns: 180px 0 150px;
	}

	#panelGeneralInfo .grid-component.dockable {
		grid-template-columns: 100px 1fr;
	}

	#panelSpaceUsersInner .grid-component.dockable {
		grid-template-columns: 100px 1fr;
	}

	#labelActiveInvites,
	#labelActiveInvitesValue {
		width: 250px;
	}

	#panelUserName .grid-component.dockable {
		grid-template-columns: 150px 150px;
	}

	#panelUserNameInner .grid-component.dockable {
		grid-template-columns: 45px 1fr;
	}

	#dropdownListDefaultSpaceValue {
		width: 342px;
	}

	#panelChargeConnect .grid-component.dockable {
		grid-template-columns: 150px 1fr;
	}

	#panelLegalRegister .grid-component.dockable {
		grid-template-columns: 170px 130px;
	}

	#panelToggleOwner .grid-component.dockable,
	#panelToggleLegal .grid-component.dockable {
		grid-template-columns: 45px 1fr !important;
	}

	#textFieldPhoneNumberValue,
	#textFieldMailValue,
	#textFieldIdTelegramValue {
		width: 225px;
	}

	#textFieldAddressValue {
		width: 344px;
	}

	#textAreaNotesValue {
		height: 80px;
		width: 344px;
	}

	#textFieldUserLogin,
	#textFieldNewPassword,
	#textFieldConfirmPassword,
	#buttonChangePassword,
	#buttonAdminRegister,
	#dropdownListRegionalLanguageValue,
	#dropdownListTimeZoneValue {
		width: 202px;
	}

	#panelToggleSaving .grid-component.dockable {
		grid-template-columns: 45px 200px;
	}

	#panelInnerMessages .grid-component.dockable {
		grid-template-columns: repeat(4, max-content);
	}

	#dateTimePickerStatistics {
		width: 270px;
	}

	#panelGroupPeriod .grid-component.dockable {
		display: flex;
	}

	.toolbar-container,
	.toolbar-container .toolbar-input-container,
	.toolbar-container .toolbar-select-container {
		width: 100%;
	}

	#panelAccount .grid-component.dockable {
		grid-template-columns: 100px 150px;
	}

	#labelGeneralInfo {
		width: 130px;
	}

	#panelAdminMainInfo2 {
		padding-top: 0;
	}

	#panelAdminMainInfo {
		padding-bottom: 0px;
	}

	#textFieldAdminPhoneValue {
		margin-bottom: 12px;
	}

	#textFieldAdminMailValue {
		margin-bottom: 12px;
	}

	#panelAdminTg .grid-component.dockable {
		gap: 0;
	}

	#textFieldIDTg {
		margin-bottom: 12px;
	}

	#labelSpaceStatusValue,
	#labelPower {
		width: 150px;
	}

	#panelPower .grid-component.dockable {
		grid-template-columns: 65px 1fr;
	}

	#panelRoleFunctions .grid-component.dockable {
		row-gap: 16px;
	}

	#panelUserActions .grid-component.dockable {
		grid-template-columns: 240px;
	}

	#panelDownload {
		grid-area: 3/3/4/4;
	}

	#panelTagActions .grid-component.dockable {
		grid-template-columns: 156px;
		padding: 16px 0 0 24px;
	}

	#panelAdminTags .grid-component.dockable {
		grid-template-rows: auto 1fr;
	}

	#panelAdminTariffs .grid-component.dockable {
		height: fit-content;
	}

	#panelDownloadTariffCharges .grid-component.dockable,
	#panelDownloadTariffUsers .grid-component.dockable {
		grid-template-columns: 98px;
	}

	#panelStatTtzCharts>div>.grid-component.dockable {
		grid-template-columns: auto 1fr;
	}

	#panelChartSuccessSessionsLabel .grid-component.dockable,
	#panelChartAvailableStationsLabel .grid-component.dockable,
	#panelChartWorkloadLabel .grid-component.dockable,
	#panelChartEfficiencyLabel .grid-component.dockable {
		grid-template-columns: auto 1fr;
	}

	#panelAdminStatTtz .grid-component.dockable {
		height: fit-content;
	}

	.ch-value {
		line-height: 28px;
	}

	#panelAdminStatTtb .grid-component.dockable {
		height: fit-content;
	}

	#panelDownloadStatTtb .grid-component.dockable,
	#panelDownloadExtraStatTtbPf .grid-component.dockable,
	#panelDownloadDevicesList .grid-component.dockable {
		grid-template-columns: auto 1fr;
	}

	#panelChargingPerDayInner .grid-component.dockable,
	#panelRevenuePerDayInner .grid-component.dockable,
	#panelDriverPerDayInner .grid-component.dockable,
	#panelProfitInner .grid-component.dockable {
		grid-template-columns: auto auto 1fr;
	}

	#panelChartRevenuePDLabel .grid-component.dockable,
	#panelChartDriverPDLabel .grid-component.dockable,
	#panelChartChargingPDLabel .grid-component.dockable,
	#panelChartProfitLabel .grid-component.dockable {
		grid-template-columns: auto 1fr;
	}

	#labelChangeBalanceTtbValue,
	#labelFilterDayValue,
	#labelDriverTtbValue,
	#labelFilterDayDPDValue,
	#labelTtbWriteOffValue,
	#labelFilterDayCPDValue,
	#labelProfitValue,
	#labelRevenueValue {
		margin: auto;
	}

	.charge-img .image-component-container {
		width: 100px;
		height: 100px;
		margin-top: 16px;
	}

	.js-image.user-img {
		background: transparent;
	}

	#panelChargeImg {
		grid-area: 1/1/3/2;
		background: transparent;
	}

	#panelChargeHeader {
		grid-area: 1/2/2/3;
		padding: 16px 38px 0 0;
		background: transparent;
	}

	#panelChargeMainInfo {
		grid-area: 2/2/3/3;
		padding: 0 38px 16px 0;
		background: transparent;
	}

	#panelChargePower>div>.grid-component.dockable {
		grid-template-columns: auto 1fr;
	}

	#panelChargePowerPhases>div>.grid-component.dockable {
		grid-template-columns: auto 1fr;
	}

	#labelChargeSocketATypeM .component-label,
	#labelChargeSocketBTypeM .component-label {
		display: block;
	}

	#labelChargeSocketA:before {
		content: "";
		display: inline-block;
		height: auto;
		width: 16px;
		height: 16px;
		-webkit-mask-image: url("/web/static/images/socketType2.svg");
		background-color: rgb(var(--h2));
		background-image: none;
		background-size: cover;
		-webkit-mask-size: 100%;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	#labelChargeSocketA span {
		padding-left: 22px;
	}

	#labelChargeSocketB:before {
		content: "";
		display: inline-block;
		height: auto;
		width: 16px;
		height: 16px;
		-webkit-mask-image: url("/web/static/images/wireGbt.svg");
		background-color: rgb(var(--h2));
		background-image: none;
		background-size: cover;
		-webkit-mask-size: 100%;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	#labelChargeSocketB span {
		padding-left: 22px;
	}

	#panelChargeASocketType {
		display: none;
	}

	#panelChargeBSocketType {
		display: none;
	}

	#panelAllSocket {
		grid-area: 4/1/5/3;
	}

	#panelAllSocket>div>.grid-component.dockable {
		grid-template-columns: 1fr 1fr;
	}

	#panelChargeSocketB {
		grid-area: 1/2/2/3;
		border-left: 1px solid rgb(var(--secondary));
	}

	#panelChargeAStatus {
		grid-area: 1/1/2/2;
	}

	#panelChargeBStatus {
		grid-area: 1/1/2/2;
	}

	#panelChargeSocketAHeader .grid-component.dockable,
	#panelChargeSocketBHeader .grid-component.dockable {
		grid-template-columns: auto 1fr;
	}

	#panelEVSEBalanceTariff .grid-component.dockable {
		grid-template-columns: auto auto auto auto 1fr;
	}

	.label-h1.charge .component-label-container {
		margin-top: 5px;
	}

	#tabbedPanelChargingProcess .grid-component.dockable {
		margin-top: 0;
	}

	/*#buttonFullCharge {
		margin-top: 40px;
	}*/

	#panelChargeKwh {
		grid-area: 2/1/3/2;
		margin-top: 16px;
	}

	#buttonCancelMethod {
		grid-area: 1/1/2/2;
	}

	#buttonReportProblem {
		grid-area: 1/2/2/3;
	}

	#panelChargeSocketA .grid-component.dockable,
	#panelChargeSocketB .grid-component.dockable {
		grid-template-rows: auto;
	}

	#panelChargeSocketAStatus {
		grid-area: 2/1/3/2;
	}

	#panelChargeSocketBStatus {
		grid-area: 2/1/3/2;
	}

	#buttonPowerCharge {
		grid-area: 1/1/2/2;
	}

	#tabbedPanelChargingProcess {
		height: fit-content;
	}

	#panelChargingDoneHeader .grid-component.dockable {
		gap: 0;
	}

	#panelCableConnectHeader .grid-component.dockable {
		gap: 0;
	}

	#panelCharging>div>.grid-component.dockable {
		grid-template-rows: auto auto 1fr;
	}

	#buttonReportProblemChargingDone {
		grid-area: 3/1/4/2;
	}

	#buttonCancelMethod {
		grid-area: 1/2/2/3;
	}

	#panelActionsButton .grid-component.dockable {
		grid-template-columns: 1fr auto auto 1fr;
	}

	#buttonReportProblemMethod {
		grid-area: 1/3/2/4;
		min-width: 214px;
	}

	#panelActionsButton {
		margin-top: 64px;
	}

	#panelActionsButtonCableConnect .grid-component.dockable {
		grid-template-columns: 1fr auto auto 1fr;
	}

	#panelActionsButtonCableConnect {
		margin-top: 32px;
	}

	#buttonReportProblemCableConnect {
		grid-area: 1/3/2/4;
	}

	#buttonCancelCableConnect {
		grid-area: 1/2/2/3;
	}

	#dataTableEditorAdminEvents colgroup col:last-child {
		width: 50px !important;
	}

	#panelAdminEventsActions .grid-component.dockable {
		height: fit-content;
		gap: 16px;
	}

	#panelAdminRoles .grid-component.dockable {
		height: fit-content;
	}

	.g2-html-annotation {
		font-size: 18px !important;
	}

	.pie-label span.component-label {
		font-size: 14px;
		line-height: 18px;
	}

	#panelStatistics .grid-component.dockable {
		height: fit-content;
	}

	#uploaderSpaceLogo .agg-btn.medium {
		height: 140px !important;
	}

	#uploaderCompanyLogo .agg-btn.medium {
		height: 48px !important;
	}

	#panelRadius .grid-component.dockable {
		grid-template-columns: auto 80px 1fr;
	}

	#textFieldStyle {
		width: 45%;
		margin-left: 0;
	}

	#panelToggleStyle .grid-component.dockable {
		grid-template-columns: auto auto 1fr;
	}

	#panelStyleMainContent>div>.grid-component.dockable {
		margin: 16px;
	}

	#dataTableEditorStyle {
		padding: 0 16px;
	}

	#panelExtraStatTtbPf .grid-component.dockable {
		height: fit-content;
	}

	.grid-component.dockable .panel__server {
		grid-template-columns: 1fr !important;
	}

	.panel__server .grid-component.dockable {
		grid-template-columns: auto 1fr !important;
	}

	.panel__volume .grid-component.dockable {
		grid-template-columns: auto auto auto auto auto 1fr !important;
	}

	#panelDevicesListActions {
		padding-top: 10px;
	}

	#htmlSnippetWifiMan span,
	a {
		font-size: 12px;
		line-height: 16px;
	}

	#panelDownloadWizardQr {
		grid-area: 2/1/3/3;
	}
}

@media (max-width: 670px) {
	#buttonChangePassword {
		min-width: 170px;
	}

	#buttonAdminRegister {
		min-width: 170px;
	}

	.modalQr.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
		width: 340px;
	}

	.modalAdminRfid.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
		width: 340px;
	}

	#dataTableEditorDrawerAdminRfidCards .toolbar-section:first-child {
		width: 110px;
	}

	#panelRightContentTariffUsers {
		grid-area: 2/1/3/3;
	}

	#panelLeftContentTariffUsers {
		grid-area: 1/1/2/3;
	}

	.modalTariffUsers.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
		width: 320px;
	}

	.modalTariffCharges.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
		width: 320px;
		height: 90vh !important;
	}

	#panelLeftContentTariffCharges {
		grid-area: 1/1/2/3;
	}

	#panelRightContentTariffCharges {
		grid-area: 2/1/3/3 !important;
	}

	#panelContentTariffChargesModal {
		height: fit-content;
	}

	.modalTariffCharges .ant-drawer-body .grid-component.dockable {
		height: fit-content;
	}

	.modalTariffCharges.drawer-panel.ant-drawer-top .ant-drawer-body {
		overflow: auto;
	}

	#panelRightContentTariffCharges .grid-component.dockable {
		grid-template-rows: 1fr;
	}

	.modalAdminAddTtb.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
		width: 320px;
	}

	#panelReasonTtb>div>.grid-component.dockable,
	#panelInvoiceBillTtb>div>.grid-component.dockable,
	#panelSetStepBalance>div>.grid-component.dockable,
	#panelReasonTtbPf>div>.grid-component.dockable,
	#panelInvoiceBillTtbPf>div>.grid-component.dockable,
	#panelSetStepBalancePf>div>.grid-component.dockable {
		grid-template-columns: 1fr;
	}

	#panelSetValueBalance,
	#panelSetValueBalancePf {
		grid-area: 3/1/4/2;
	}

	#panelSetStepBalance,
	#panelSetStepBalancePf {
		grid-area: 1/1/2/2;
	}

	#panelDrawerAddChangeBalanceTtb>div>.grid-component.dockable,
	#panelDrawerAddChangeBalanceTtbPf>div>.grid-component.dockable {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	#toggleButtonChangeBalanceTtb,
	#toggleButtonChangeBalanceTtbPf {
		grid-area: 2/1/3/2;
	}

	#stepsWizard .grid-component.dockable:has(#labelDoneWizard) {
		margin-top: 40px;
	}
}

@media (max-width: 600px) {
	.modalHlsVideo.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: calc(100% - 32px);
	height: auto;
	}
}

@media (min-width: 435px) and (max-width: 580px) {
	.outer_input {
		width: 400px;
	}

	.qr_input {
		width: 400px;
		font-size: 12px;
	}
}

@media (max-width: 495px) {

	.modalSupport.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
		width: 300px;
	}

	#panelDownload {
		grid-area: 4/1/5/2;
	}

	#buttonUploadAdminEvents {
		grid-area: 2/1/3/2;
		margin-left: 0;
	}

	#panelDownloadAdminEvents {
		grid-area: 3/1/4/2;
		margin-left: 0;
	}

	.modalAddUser.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	max-width: 380px;
	left: 47%;
	}
}

@media (max-width: 450px) {
	#dataTableEditorNotifications colgroup col:nth-child(1) {
		width: 100px !important;
	}

	#dataTableEditorNotifications colgroup col:nth-child(2),
	#dataTableEditorNotifications colgroup col:nth-child(3),
	#dataTableEditorNotifications colgroup col:nth-child(4),
	#dataTableEditorNotifications colgroup col:nth-child(5) {
		width: 100px !important;
	}
}

@media (min-width: 435px) and (max-width: 964px) {
	#panelScreenTag {
		grid-area: 2/1/3/2;
	}

	#panelMaxUser {
		grid-area: 2/1/3/2;
	}

	#panelMaxSpaces {
		grid-area: 2/1/3/2;
	}
}

@media (max-width: 435px) {
	.outer_input {
		width: 375px;
	}

	.qr_input {
		width: 375px;
		font-size: 10px;
	}

	#panelRoles {
		grid-area: 3/1/4/2;
	}

	#panelScreenTag {
		grid-area: 4/1/5/2;
	}

	#panelScreenTariff {
		grid-area: 2/1/3/2;
	}

	#panelStyle {
		grid-area: 2/1/3/2;
	}

	#panelMaxUser {
		grid-area: 3/1/4/2;
	}

	#panelMaxSpaces {
		grid-area: 3/1/4/2;
	}

	#panelReports {
		grid-area: 2/1/3/2;
	}
}

/* Map styles */

.map__header span {
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	color: rgb(var(--text));
}
.map_dropdown div.ant-select {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	position: relative;
}
.map_dropdown div.ant-select:before {
	content: '';
	display: block;
	position: relative;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	background: url(../images/ic_filter_16.png);
}
#dropdownListSort.map_dropdown div.ant-select:before {
	background: url(../images/ic_sort_16.png);
}
.map_dropdown div.ant-select .ant-select-selection-item {
	background: none;
	border: none;
	margin: 0;
	position: relative;
}
.map_dropdown div.ant-select .ant-select-selection-item .ant-select-selection-item-remove {
	display: none;
}
.map_dropdown div.ant-select .ant-select-selection-overflow .ant-select-selection-overflow-item:not(:nth-last-child(-n+2)) .ant-select-selection-item:after {
	content: ',';
	display: block;
	position: absolute;
	bottom: 0;
	right: 2px;
}
.map_dropdown div.ant-select span.ant-select-arrow {
	top: auto;
	position: relative;
	right: auto;
	margin: auto 0;
}
/* .map_dropdown .ant-select:has(.ant-select-selection-overflow .ant-select-selection-overflow-item:nth-last-child(2)) {
	width: fit-content;
} */
.map_dropdown div.ant-select div.ant-select-selector {
	padding-left: 0px !important;
}
.map_dropdown div.ant-select div.ant-select-selector .ant-select-selection-placeholder {
	left: 0;
}
.map__list-header {
	padding-left: 8px;
}
.map__list-header span {
	font-size: 16px;
	font-weight: bold;
	color: rgb(var(--text));
	line-height: 18px;
}
.map__list_text span {
	font-size: 14px;
	line-height: 18px;
	color: rgba(var(--h1), .8);
}
.map__list-worktime .component-label:before {
	position: relative;
	display: inline-block;
	content: '';
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_uptime_16.svg");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: auto;
	-webkit-mask-size: auto;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	border-radius: 50%;
	margin-right: 8px;
	margin-bottom: -3px;
}
.map__list_text.map__list_status-red .component-label:before {
	background: rgb(var(--accent));
}
.map__list_text.map__list_status-green .component-label:before {
	background: rgb(var(--success));
}
.map__list_adress span {
	font-size: 12px;
	color: rgba(var(--h1), .8);
	line-height: 16px;
}
.map__list_adress .component-label-container:before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("/web/static/images/ic_location_o_16.svg");
	background-color: rgb(var(--h2));
    background-image: none;
	background-size: auto;
    -webkit-mask-size: auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
	line-height: 16px;
	margin-right: 4px;
	margin-bottom: -4px;
}
.map__list_adress-dist span {
	font-size: 14px;
	font-weight: bold;
	color: rgba(var(--h1), .8);
	line-height: 16px;
}
.map__list_adress-dist .component-label-container {
	position: relative;
	display: flex;
	margin: auto;
}
.map__list_adress-dist .component-label-container:before {
	content: '•';
	display: inline-block;
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	color: rgba(var(--h1), .8);
	margin-right: 8px;
}
.map__list_cost span {
	color: rgb(var(--h1));
	font-size: 12px;
	line-height: 14px;
	padding-left: 6px;
}
div.map__connector-label {
	line-height: 14px;
	padding-left: 48px;
	position: relative;
	overflow: visible;
}
.map__connector-label span {
	font-size: 12px;
	line-height: 14px;
	color: rgba(var(--h1), .8);
}
.map__connector-type:before {
	content: '';
	display: block;
	position: absolute;
	width: 25px;
	height: 23px;
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
	
	background-color: rgb(var(--text));
    background-image: none;
	background-size: auto;
    -webkit-mask-size: auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
	left: 20px;
	top: 2px;
	z-index: 20;
}

.map__connector_type-1:before {
	-webkit-mask-image: url("/web/static/images/type1.svg");
}

.map__connector_type-2:before {
	-webkit-mask-image: url("/web/static/images/type2.svg");
}

.map__connector-type:after {
	content: '';
	display: block;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	left: 4px;
	top: 7px;
	z-index: 20;
}
.map__connector-type-info:after {
	background: rgb(var(--info));
}
.map__connector-type-success:after {
	background: rgb(var(--success));
}
.map__connector-type-accent:after {
	background: rgb(var(--accent));
}
.map__connectors-info {
	margin: 2px;
}
.map__connectors-info span {
	font-size: 14px;
	line-height: 18px;
	font-weight: bold;
	color: rgb(var(--h2));
	padding: 0px 8px;
	border: 2px solid rgb(var(--h2));
	border-radius: var(--border-radius-btn);
}
.map__connectors-info .component-label-container {
	margin: auto;
}
.map__list_item-panel:hover {
	background-color: rgba(var(--h1), .08);
}
.map__list_item-panel div {
	background: transparent;
}
.map__list_item-panel {
	transition: background ease .3s;
}

.map__list_item-panel.active {
	background-color: rgb(var(--main));
}
.map__list_item-panel.active .map__list-header span {
	color: rgb(var(--bg));
}
.map__list_item-panel.active .map__list_text span,
.map__list_item-panel.active .map__list_adress span,
.map__list_item-panel.active .map__list_adress-dist span,
.map__list_item-panel.active .map__list_adress-dist .component-label-container:before,
.map__list_item-panel.active .map__list_cost span,
.map__list_item-panel.active .map__connector-label span {
	transition: color ease .3s;
	color: rgb(var(--secondary));
}
.map__list_item-panel.active .map__list_adress span {

}
.map__list_item-panel.active .map__list_adress .component-label-container:before,
.map__list_item-panel.active .map__list-worktime .component-label:before {
	transition: background ease .3s;
	background-color: rgb(var(--bg));
}
.map__list_item-panel.active .map__connectors-info span {
	border: none;
	color: rgb(var(--text));
	padding: 2px 10px;
	background: rgb(var(--secondary));
	transition: background ease .3s;
	transition: color ease .3s;
	transition: border ease .3s;

}

.map__list_item-panel.active .map__connector-type:before {
	background-color: rgb(var(--bg));
}
.dashboardMap .panelDeviceInfo.hidden {
	transform: translateX(calc(100% + 40px));
	transition: transform ease .3s;
}
.dashboardMap .panelDeviceInfo:not(.hidden) {
	transition: transform ease .3s;
	transform: translateX(0);
}

.map__btn-action.map__btn-icon button{
	position: relative;
	padding: 10px 16px;
	height: 40px;
}

.map__btn-action.map__btn-icon button:before {
	content: "";
    display: inline-block;
    height: auto;
	margin: auto 0;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    position: relative;
	background-color: rgb(var(--main));
    background-image: none;
	background-size: cover;
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
	transition: background ease .3s;
}

.map__btn-icon.map__btn-access button:before {
	-webkit-mask-image: url("/web/static/images/ic_key_16.svg");
}
.map__btn-action button span {
	font-size: 16px;
	line-height: 18px;
}

.map__btn-icon:hover button:before {
	background-color: rgb(var(--accent));
}

.map__btn-icon.map__btn-startCharging button:before {
	-webkit-mask-image: url("/web/static/images/ic_plug_24.svg");
	background-color: rgb(var(--bg));
}
.map__info-header span {
	font-size: 24px;
	line-height: 28px;
	color: rgb(var(--text));
	font-weight: bold;
}
.ui-component.js-button.map__info-close:before {
	content: "\00d7";
	font-size: 30px;
	color: rgba(var(--text), 0.75);
	text-align: center;
	pointer-events: none;
	line-height: 32px;
	top: 0;
}
.map__info-label {
	font-size: 16px;
	line-height: 20px;
	font-weight: light;
	color: rgb(var(--h2));
}
.map__info-text-title span {
	font-size: 14px;
	line-height: 18px;
	color: rgb(var(--h2));
	font-weight: 400;
}

.map__info-text span {
	font-size: 16px;
	line-height: 20px;
	color: rgb(var(--text));
	font-weight: 400;
}
.map__info-value span {
	font-size: 20px;
	line-height: 26px;
	font-weight: bold;
	color: rgb(var(--text));
}
.map__info-unit span {
	font-size: 20px;
	line-height: 26px;
	font-weight: 400;
	color: rgb(var(--h2));
}
#panelInfoTariff .map__info-text-title span {
	line-height: 26px;
}
.map__info_connector-name span {
	font-size: 24px;
	line-height: 30px;
	color: var(--text);
	font-weight: light;
}

.map__info_connector-name .component-label-container {
	overflow: visible;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
}
.map__info_connector-name .component-label-container:before {
	content: '';
	display: block;
	position: relative;
	width: 25px;
	height: 23px;
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgb(var(--h2));
    background-image: none;
	background-size: auto;
    -webkit-mask-size: auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
	z-index: 20;
}
.map__info_connector-name.map__info-connector-type1 .component-label-container:before {
	-webkit-mask-image: url("/web/static/images/type1.svg");
}
.map__info_connector-name.map__info-connector-type2 .component-label-container:before {
	-webkit-mask-image: url("/web/static/images/type2.svg");
}
.map__info_value-status .component-label-container {
	overflow: visible;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
}
.map__info_value-status .component-label-container:before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.map__info_value-status.active .component-label-container:before {
	background-color: rgb(var(--success));
}

.map__info_value-status.accent .component-label-container:before {
	background-color: rgb(var(--accent));
}

.map__info_value-status.info .component-label-container:before {
	background-color: rgb(var(--info));
}


.device-slider-container {
	position: relative;
}
.rtsp-open-btn {
	position: absolute;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 50%;
	background: rgb(var(--bg));
	z-index: 200;
	left: 5px;
	top: 5px;
	cursor: pointer;
}
.rtsp-open-btn:hover {
	background-color: rgb(var(--bg-secondary));
}
.rtsp-open-btn:after {
	width: 100%;
	height: 100%;
	mask-image: url(/web/static/images/ic_camera_16.png);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: auto;
	background-color: rgb(var(--h2));
	display: block;
	content: '';
}
.popup-rtsp {
	width: 70vw;
	max-width: 800px;
	visibility: hidden;
	transition: all .3s ease;
	z-index: 300;
	position: fixed;
	top: -100%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
.vjs-control-bar {
	display: none;
}
.video-js .vjs-big-play-button {
	top: 50% !important;
	left: 50% !important;
	transform: translateX(-50%) translateY(-50%);
}



.popup-rtsp-close {
	width: 24px;
	height: 24px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 200;
	background: rgb(var(--bg-secondary));
	border: none;
	border-radius: 50%;
	cursor: pointer;
}
.popup-rtsp-close:after {
	content: "\00d7";
	display: block;
	position: absolute;
	border-radius:
	50%;
	width: 100%;
	height: 100%;
	color: rgba(var(--text), 1);
	top: 0;
	left: 0;
	font-size: 18px;
}
.popup-rtsp.open-popup-rtsp{
	visibility: visible;
	top: 50%;
}
.rtsp-video {
	width: 70vw;
	max-width: 800px;
}

/* Progressbar styles */

.progressbar__container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10%;
}

.progressbar{
	position: relative;
	overflow: hidden;
	width: 350px;
	height: 35px;
	border-radius: 5px;
	background-color: #eee;
}

.progressPercent{
	font-weight: 600;
	font-family:'Franklin Gothic Medium';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: #eee;
	text-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
}

.btn{
	display: block;
	margin: 5rem auto;
	border: none;
	border-radius: 3px;     
	outline: none;
	width: 100px;
	height: 40px;
	background-color: #937DC2;
	transition: box-shadow 0.5s;
	font-size: 16px;
	font-family:arial;
	color: #fff;
	cursor: pointer;
}

.btn:hover{
	-webkit-box-shadow: inset 100px 0 0 0 #7c54d1;
    box-shadow: inset 100px 0 0 0 #7c54d1;
}

.map .custom-marker {
	width: 28px !important;
	height: 36px !important;
	mask-image: url(/web/static/images/map-marker-border.png);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: auto;
	filter: drop-shadow(0 2px 4px rgba(var(--main), .4));
	background-color: rgb(var(--bg));
}
.map .custom-marker::before {
	content: '';
	position: absolute;
	width: 24px;
	height: 32px;
	mask-image: url(/web/static/images/map-marker.png);
	display: block;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: auto;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	background-color: rgb(var(--main));
}
.map .custom-marker::after {
	content: '';
	position: absolute;
	display: block;
	width: 12px;
	height: 12px;
	background-color: rgb(var(--bg));
	border-radius: 50%;
	left: 50%;
	transform: translateX(-50%);
	top: 8px;
}
.map .leaflet-overlay-pane path.leaflet-interactive {
	fill: rgb(var(--accent));
	stroke: rgb(var(--accent));
}

.custom__slider-block {
	width: 600px;
	height: 320px !important;
}

.custom__slider .custom__slider-block img {
	object-fit: contain;
	margin: auto;
	z-index: 20;
	position: relative;
	width: 100%;
	height: 100%;
}
.custom__slider .custom__slider-container {
	position: relative;
}
.custom__slider .custom__slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	z-index: 40;
}
.custom__slider .custom__slick-next {
	right: 0;
}
.custom__slider .custom__slick-prev {
	left: 0;
}
.custom__slider .slick-dots {
	display: flex;
	position: absolute;
	list-style: none;
	padding-left: 0px;
	margin-bottom: 0px;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	gap: 4px;
}
.custom__slider .slick-dots button {
	font-size: 0px;
	color: transparent;
	border: medium;
	box-shadow: none;
	border-radius: 38px;
	width: 37px;
	height: 3px;
	cursor: pointer;
	opacity: .4;
}
.custom__slider .slick-dots li.slick-active button {
	opacity: 1;
}
.custom__slider .custom__slider-block {
	position: relative;
	width: 100%;
}
.custom__slider .custom__slider-block img.custom__slider-block-bg {
	position: absolute !important;
	top: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: blur(2px) saturate(150%) brightness(120%);
}

.custom__slider-empty {
  text-align: center;
  line-height: 300px;
  color: rgb(var(--text));
  font-size: 20px;
  background: rgb(var(--bg-secondary));
}
.custom__slider-block img {
	object-fit: contain;
	margin: auto;
	z-index: 20;
	position: relative;
	width: 100%;
	height: 100%;
}
.custom__slider-container {
	position: relative;
}
.custom__slider-arrow {
	display: none !important;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	z-index: 40;
}
.custom__slick-next {
	right: 0;
}
.custom__slick-prev {
	left: 0;
}
.slick-dots {
	display: flex;
	position: absolute;
	justify-content: center;
	list-style: none;
	padding-left: 0px;
	margin-bottom: 0px;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	gap: 4px;
}
.slick-dots li {
	width: auto;
	height: auto;
	margin: 0;
}
.slick-dots button {
	font-size: 0px;
	color: transparent;
	border: medium;
	box-shadow: none;
	border-radius: 38px;
	width: 38px;
	height: 4px;
	cursor: pointer;
	opacity: .4;
	position: relative;
	padding: 0;
}
.slick-dots li.slick-active button {
	opacity: 1;
	
}
.slick-dots li button::before {
	width: 100%;
	height: 100%;
	content: '';
	background: rgb(var(--secondary));
	opacity: 1;
	border-radius: 4px;
}
.dashboardMap .panel__adress {
	padding: 16px;
}
.dashboardMap .panel__connector {
	padding: 12px 16px;
}
.dashboardMap .panel__parameters {
	padding: 8px 16px;
}

.dashboardMap .panelDeviceInfo > div > div.grid-component {
	height: fit-content;
}
.dashboardMap .panel__connector#panelConnector2 {
	border-bottom: none;
}

div.mobile-show {
	text-align: center;
	line-height: initial;
	height: 16px;
	margin-bottom: 8px;
	display: none;
}
.mobile-show span.component-label {
	height: 4px;
	width: 80px;
	background: rgb(var(--secondary));
	border-radius: 2px;
	margin: 0 auto;
	margin-top: 8px;
}
#panelDeviceInfoHeader {
	padding-top: 12px;
}


@media screen and (max-width: 1200px) {
	div.dashboardMap.grid-component {
		grid-template-columns: 332px 1fr 412px;
	}
	.dashboardMap #panelInfoParameters > div > div.grid-component {
		grid-template-rows: auto auto auto auto;
	}
	.dashboardMap #labelInfoTariff {
		grid-area: 3 / 1 / 4 / 4;
	}
	.dashboardMap #panelInfoTariff {
		grid-area: 4 / 1 / 5 / 4;
	}
	.dashboardMap .panelDeviceInfo > div > div.grid-component {
		grid-template-rows: auto 320px auto auto auto auto 1fr auto;
	}
	.dashboardMap .custom__slider-block {
		height: 320px;
	}
	.dashboardMap .panel__adress {
		padding: 12px 16px;
	}
	.dashboardMap .panel__connector {
		padding: 12px 16px;
	}
	.dashboardMap .panel__parameters {
		padding: 8px 16px;
	}
	
	
}

@media screen and (max-width: 820px) {
	div.dashboardMap.grid-component {
		grid-template-columns: 1fr 376px 1fr;
	}
	.dashboardMap #panelMain, .dashboardMap #panelDeviceInfo {
		grid-area: 1 / 2 / 2 / 3;
		margin-left: 0;
		margin-bottom: 0;
		margin-top: 0;
		border-bottom-left-radius: 0px;
  		border-bottom-right-radius: 0px;
		transform: translateY(calc(100% - 85px));
		transition: transform ease .5s;
	}
	.dashboardMap #panelMain {
		z-index: 300;
	}
	.dashboardMap #panelMain > .container-scrolling {
		overflow: auto;
	}
	.dashboardMap #panelDeviceInfo {
		z-index: 200;
	}

	.dashboardMap #panelDeviceInfo.mobile-visible {
		z-index: 400;
	}
	
	.dashboardMap #panelMain.mobile-visible, .dashboardMap #panelDeviceInfo.mobile-visible  {
		transform: none;
		margin-top: 120px;
	}
	.dashboardMap #panelMain.mobile-hidden {
		transform: translateY(calc(100% - 85px));
	}
	.dashboardMap #panelDeviceInfo.mobile-hidden {
		transform: translateY(calc(100% + 75px));
	}
	.dashboardMap:not(:has(#panelMain.mobile-visible)) #panelDeviceInfo.hidden {
		transform: translateY(calc(100% - 85px));
	}
	div.mobile-show {
		display: flex;
	}
	.mobile-show span.component-label {
		display: block;
		height: 4px;
		width: 80px;
		background: rgb(var(--secondary));
		border-radius: 2px;
	}
	#panelDeviceInfoHeader {
		padding-top: 0px;
	}
	#buttonInfoContacts {
		min-width: auto;
		grid-area: 5 / 1 / 6 / 2;
    max-width: 160px;
    margin-top: 8px;
	}
	.map__info-text-title span {
		font-size: 12px;
		line-height: 16px;
	}
	.map__info-text span {
		font-size: 14px;
		line-height: 18px;
	}
	.map__info-value span, .map__info-unit span {
		font-size: 16px;
		line-height: 18px;
	}
	.map__info_connector-name span {
		font-size: 16px;
		line-height: 20px;
	}
	.map__btn-action button span {
		font-size: 14px;
		line-height: 18px;
	}
}

#panelAvailableTime,
#labelAvailableTime,
#panelUrl,
#panelUrlInner,
#labelUrl,
#panelPhotoLocation,
#panelSliderLocation,
#labelSliderLocation,
#panelUploadPhotoLocation,
#labelUploadPhotoLocation {
	background-color: rgb(var(--bg-secondary)) !important;
}

#textFieldUrlValue .agg-input-wrapper,
#textFieldUrlValue .agg-input.agg-input {
	padding-left: 30px;
}

#textFieldUrlValue {
	position: relative;
}

#textFieldUrlValue .container-scrolling:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_camera_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	z-index: 200;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#buttonReset span {
	padding-left: 16px;
}

#buttonReset:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_reset_16.svg");
	background-color: rgb(var(--main));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#buttonReset:hover:before {
	background-color: rgb(var(--accent));
	transition: 0.3s;
}

.minimize span {
	font-size: 14px;
	font-weight: 900;
	line-height: 18px;
	color: rgb(var(--h2));
	text-transform: uppercase;
	writing-mode: vertical-lr;
}

.minimize {
	transform: scale(-1, -1);
	text-align: center;
	height: fit-content;
}

/* Expand btn */
.ui-component.js-button.expand_icon,
.ui-component.js-button.min_icon {
	position: relative;
	overflow: hidden;
	margin-left: auto;
}

.ui-component.js-button.expand_icon:after,
.ui-component.js-button.min_icon:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	background: rgba(var(--main), 0.04);
	top: 0;
	left: 0;
	cursor: pointer;
	pointer-events: none;
}

.expand_icon .tooltip-content-wrapper,
.min_icon .tooltip-content-wrapper {
	overflow: hidden;
}

.ui-component.js-button.expand_icon:before {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	content: "\003E";
	font-size: 24px;
	color: rgba(var(--text), 0.75);
	text-align: center;
	pointer-events: none;
	line-height: 24px;
	top: 0;
}

.ui-component.js-button.min_icon:before {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	content: "\003C";
	font-size: 24px;
	color: rgba(var(--text), 0.75);
	text-align: center;
	pointer-events: none;
	line-height: 24px;
	top: 0;
}


.ui-component.js-button.expand_icon:hover:before,
.ui-component.js-button.min_icon:hover:before {
	color: rgb(var(--main));
	transition: all ease 0.3s;
}

.expand_icon .agg-btn.simple:hover,
.min_icon .agg-btn.simple:hover {
	background-color: transparent;
	transition: all ease 0.3s;
}

.bell span,
.graph span {
	position: relative;
}

.bell span.component-label {
	color: transparent;
}
.graph span.component-label {
	color: transparent;
}
.bell:before {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("/web/static/images/ic_alert_o_24.png");
	background-color: black;
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: 0px;
	cursor: default;
}


#panelInteractive:has(.min_icon) #labelCurrentParams {
	display: none;
}

#panelCollapseParameters:has(.expand_icon) #panelParameters {
	display: none;
}

/* Modal setpoints */
.modalSetpoints .ant-drawer-header.ant-drawer-header-close-only {
	display: none;
}

.modalSetpoints.drawer-panel.ant-drawer-top .ant-drawer-content-wrapper {
	width: min(486px, 90vw);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalSetpoints.drawer-panel.ant-drawer-top .ant-drawer-body {
	padding: 8px 24px 32px 24px;
	overflow: hidden;
}

.modalSetpoints.drawer-panel .ant-drawer-content {
	border-radius: var(--border-radius-panel);
}

.setpoints-headerTable span {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: rgb(var(--h1));
}

.web-form {
	display: flex;
  flex-direction: column;
  justify-content: center;
}

.web-form > .form-buttons > #loginSubmit {
	background: #343333;
	border-radius: 4px;
	padding: 7px 16px;
	
	line-height: 18px;
	letter-spacing: 0%;
	font-weight: 400;
	font-size: 14px;
	height: auto !important;
	border: 1px solid #343333;
}

.web-form > .form-buttons > #loginSubmit:hover {
  background-color: #343333 !important;
  border-color: #343333 !important;
}

.web-form > .form-buttons > #changePasswordCancel {
	background: white;
	border-radius: 4px;
	padding: 7px 16px;
	border: 1px solid #343333;
		
	line-height: 18px;
	letter-spacing: 0%;
	font-weight: 400;
	font-size: 14px;
	color: #343333;
	height: auto !important;
}

.web-form > .form-buttons > #changePasswordCancel:hover {
  background-color: #F7562B !important;
  border-color: #F7562B !important;
}

.web-form > .form-inputs input {
	background: #FAFAFA !important;
	padding: 7px 9px !important;
	border: 1px solid #E5E5E5 !important;
	font-size: 14px !important;
	height: 32px !important;
	border-radius: 4px;
}

.web-form > .form-inputs input::placeholder {
	font-size: 14px !important;
	color: #7E84A3CC !important;
}

.main-page-footer .copyright {
	display: none;
}

.notification-type {
	height: 10px;
	width: 10px;
	border-radius: 100px;
}

.notification-type[name="critical"] {
	background: #E30613;
}
.notification-type[name="info"] {
	background: #A07BEB;
}
.notification-type[name="sales"] {
	background: #A07BEB;
}
.notification-type[name="critical-notification"] {
	background: #EA560D;
}
.notification-type[name="info-notification"] {
	background: #A07BEB;
}
.notification-type[name="charge"] {
	background: #A07BEB;
}

/*.ant-menu {
	background: transparent!important;
}*/

#button20 {

}


/*.react-dnd.dnd-wrapper.dock-panel.dock-style-dockable-container-popup.dock-panel-one-tab.dockable-container-layout:has(tr[data-row-key="Csv-0"].first-row)*/
.react-dnd.dnd-wrapper.dock-panel.dock-style-dockable-container-popup.dock-panel-one-tab.dockable-container-layout {
	left: calc((100vw - max(40vw, 360px)) / 2) !important;
	width: max(min(40vw, 834px), 360px) !important;
	height: max(min(50vh, 300px), 200px) !important;
	.component-system-button.round>svg path {fill: rgb(120, 143, 165);}
}

.leaflet-control-container div.leaflet-bar {
	border-radius: 10px
}




.leaflet-left {
    left: auto;
    right: 0px;
}

.leaflet-left .leaflet-control {
    margin-left: 0px;
    margin-right: 10px;
}

.leaflet-control {
    float: right;
    clear: both;
}

.custom-map-button {
	position: fixed;
	top: 170px;
	right: 10px;
	background-image: url(/web/static/images/ic_location_o_16.svg);
}




.language-container {
		margin: 32px 32px 0 0;
		position: relative;
}

.language-container .toggle-language {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 500;
		font-size: 24px;
		line-height: 29px;
		text-transform: uppercase;
		color: #343333;
		display: flex;
		width: min-content;
		justify-self: end;
		gap: 6px;
		cursor: pointer;
}

.language-container .toggle-language::after {
		content: '';
		border-style: solid;
		border-width: 12px 8px 0px 8px;
		border-color: #343333 transparent transparent transparent;
		align-self: center;
}

.language-container .dropdown-language {
		position: absolute;
		right: 0;
		top: 40px;
		display: none;
		background: #FFFFFF;
}

.language-container .dropdown-language ul {
		padding: 0;
		margin: 0;
		list-style: none;
		width: max-content;
		box-shadow: 0px 0px 6px 0px #00000087;
		border-radius: 5px;
}

.language-container .dropdown-language ul li {
		padding: 10px 20px;
		cursor: pointer;
		transition: background 0.3s
}

.language-container .dropdown-language ul li:hover{
		background: #7E84A31F;
}

.language-container .dropdown-language ul li.active{
		background: #EA560D1F;
}

.language-container .dropdown-language ul li.active:hover{
		background: #EA560D14;
}

#dataTableEditorTariffCharges .kebab-block-buttons .kebab-btn:nth-of-type(3) {
	content: "";
	display: inline-block;
	height: auto;
	margin-right: 4px;
	width: 18px;
	height: 16px;
	position: absolute;
	left: 105px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask-image: url("/web/static/images/ic_crown_16.png");
	background-color: rgb(var(--h2));
	background-image: none;
	background-size: cover;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

#contactsPanel span {
	color: rgb(var(--text));
}

#contactsPanelName h2 {
	color: rgb(var(--h1));
}

#contactsPanel {
	border: 2px solid rgb(var(--secondary));
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--main), .1);
}

::-webkit-scrollbar-track {
  background: rgb(var(--secondary));
}