:root {
	--form-default-size: 20px;
	--form-value-color: #f8f8f8;
	--filter-box-height: 300px;
	--font-xs: 80%;
	--font-sm: 90%;
	--font-xl: 110%;
	--font-normal: inter-regular, 'Segoe UI', ubuntu-regular, sans-serif;
	--main-background-color: #e0e0e0;
	--main-background-color-darker: #bfbfbf;
	--menu-inactive-option-color: #aaaebb;
	--highlight-background-color: #e6e6ff;
	--highlight-background-color-strong: #8889FD;
	--sidebar-width: 24rem;
	--sidebar-mini-width: 6.4rem;
	--sidebar-flyout-width: 22rem;
	--sidebar-bg: #0C0A1B;
	--sidebar-bg-elevated: #14122a;
	--sidebar-bg-soft: rgba(255, 255, 255, 0.05);
	--sidebar-bg-soft-strong: rgba(255, 255, 255, 0.09);
	--sidebar-text: #d9dbe5;
	--sidebar-text-muted: #8a8f9e;
	--sidebar-text-active: #ffffff;
	--sidebar-accent: #6162F1;
	--sidebar-accent-soft: rgba(97, 98, 241, 0.18);
	--sidebar-font-size: 1em;
	--sidebar-suboption-font-size: 0.95em;
	--sidebar-icon-size: 1.15em;
	--sidebar-icon-width: 1.5em;
	--sidebar-row-radius: 0.5em;
	--sidebar-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--topbar-height: 50px;
	--scrollbar-width: 8px;
}

/***************************************************/
/* SCROLLBAR****************************************/
/***************************************************/
::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #AAA;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #888;
}

html {
	scrollbar-width: thin;
}

/***************************************************/
/* FONTS *******************************************/
/***************************************************/
@font-face {
	font-family: ubuntu-regular;
	src: url(../fonts/ubuntu/ubuntu-regular.ttf);
}

@font-face {
	font-family: ubuntu-condensed;
	src: url(../fonts/ubuntu/ubuntu-condensed.ttf);
}

@font-face {
	font-family: open-sans-regular;
	src: url(../fonts/open-sans/open-sans-regular.ttf);
}

@font-face {
	font-family: inter-regular;
	src: url(../fonts/inter/inter-regular.ttf);
}

@font-face {
	font-family: quicksand-regular;
	src: url(../fonts/quicksand/quicksand-regular.ttf);
}

@font-face {
	font-family: quicksand-medium;
	src: url(../fonts/quicksand/quicksand-medium.ttf);
}

@font-face {
	font-family: quicksand-semibold;
	src: url(../fonts/quicksand/quicksand-semibold.ttf);
}

/***************************************************/
/* HTML ********************************************/
/***************************************************/


body {
	font-family: var(--font-normal);
	background-color: var(--main-background-color);
	color: #000;
	display: flex;
	flex-direction: column;
	height: 100vh;
}

h1, h2, h3, h4, h5 {
	font-weight: 600;
	display: block;
	margin: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

h1 {
	font-size: 130%;
}

h2 {
	font-size: 120%;
}

h3 {
	font-size: 110%;
}

hr {
	margin: 4px 0px;
	border-color: #DDDDDD;
}

.hr-strong {
	border: 1.5px solid #ddd;
}

select[multiple] {
	font-family: var(--font-normal) !important;
	min-height: 130px;
	min-width: 100px;
	display: block;
}

select {
	font-size: inherit;
	font-family: var(--font-normal) !important;
	vertical-align: top;
}

option {
	font-size: inherit;
	font-family: var(--font-normal) !important;
}

.bg-success {
	background-color: #dff0d8 !important;
}

.textarea {
	white-space: pre-line;
	max-height: 150px;
	overflow: auto;
	word-break: break-word;
	overflow-wrap: break-word;
	min-width: 120px;
}

textarea.form-control {
	min-height: 100px;
}

/***************************************************/
/* TABLES ******************************************/
/***************************************************/
table {
	width: 100%;
	cursor: default;
	background: #FFF;
	margin-bottom: 0px;
}

thead {
	position: sticky;
	top: 0;
	z-index: 3;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

th {
	padding: 2px;
	vertical-align: middle;
	/* outline (not border) so the rule renders correctly under
	   position: sticky thead and ignores border-collapse semantics */
	outline: 1px solid rgba(0, 0, 0, 0.08);
	outline-offset: -1px;
}


.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
	vertical-align: top;
	/*border-top: 0px solid #ddd;*/
	padding: 1px;
	text-align: center;
}

tr.dragover {
    background-color: #e5e3f1;
}

.table-responsive {
	border-radius: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

table-content {
	display: block;
}

.table-centered-form-values td {
	text-align: center;
}

.table-centered-form-values td .form-box {
	text-align: center;
}

.table-centered-form-values td .form-value {
	justify-content: center;
	text-align: center;
}

th > .flex-item {
	display: block;
}

th > sort,
th > triple-price-sort {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
}

th > label,
th > triple-price-sort label {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0;
	padding: 2px 4px;
	background-color: transparent;
	color: inherit;
	border-radius: 4px;
	cursor: pointer;
	min-height: 28px;
	transition: background-color 0.2s ease;
}

th > label:hover,
th > triple-price-sort label:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

/* When a <th> holds more than one <sort>, separate the rows with a thin
   divider so adjacent triggers don't visually merge in the now-transparent
   default state. */
th > .sort-dropdown + .sort-dropdown {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin-top: 2px;
	padding-top: 2px;
}

.sort-dropdown {
	width: 100%;
}

.sort-trigger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: 2px 4px;
	margin: 2px 0px;
	background-color: transparent;
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease;
}

/* Sort triggers inside a <th> stay centered (the canonical table-header look). */
th .sort-trigger {
	text-align: center;
}

.sort-trigger:hover,
.sort-trigger:focus {
	background-color: rgba(0, 0, 0, 0.05);
	color: inherit;
	text-decoration: none;
	outline: none;
}

.sort-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
	max-height: calc(1.2em * 3);
	font-size: var(--font-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.sort-trigger.is-required .sort-text::after {
	content: " *";
	color: #c62828;
}

.sort-indicators {
	display: flex;
	justify-content: flex-start;
	gap: 4px;
	margin-top: 1px;
	font-size: var(--font-xs);
	opacity: 0.7;
}

th .sort-indicators {
	justify-content: center;
}

/*tbody > tr {
	border-top: 1px solid  #836ca6;
}

tbody > tr:hover {
	transition: background-color 0.3s ease;
	background-color: #efeef6;
}
*/

tbody > tr:hover > td {
	box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s ease;
}

.no-row-hover tbody > tr:hover > td {
	box-shadow: none;
	transition: none;
}

/* Pin last column to right edge so action buttons stay visible on horizontal scroll.
   Applied by default to all main list tables ([colspan-table]) and Bootstrap tables (.table).
   Opt-out per table by adding class .no-sticky-last-col.
   Skip rows with colspan (continuation/expanded rows) — their single td spans full width. */
[colspan-table]:not(.no-sticky-last-col) thead > tr > th:last-child,
[colspan-table]:not(.no-sticky-last-col) tbody > tr:not(:has(td[colspan])) > td:last-child,
.table:not(.no-sticky-last-col) thead > tr > th:last-child,
.table:not(.no-sticky-last-col) tbody > tr:not(:has(td[colspan])) > td:last-child,
.sticky-last-col thead > tr > th:last-child,
.sticky-last-col tbody > tr:not(:has(td[colspan])) > td:last-child {
	position: sticky;
	right: 0;
	background-color: #fff;
	z-index: 2;
}

[colspan-table]:not(.no-sticky-last-col) thead > tr > th:last-child,
.table:not(.no-sticky-last-col) thead > tr > th:last-child,
.sticky-last-col thead > tr > th:last-child {
	z-index: 4;
}

/* When a dropdown is open inside the sticky last column, raise the cell's z-index
   above other sticky cells (same z-index in later rows would otherwise overlay it)
   and above the sticky thead. The dropdown-menu inside (z-index: 1100) then floats freely. */
[colspan-table]:not(.no-sticky-last-col) tbody > tr > td:last-child:has(.unt-dropdown.open),
.table:not(.no-sticky-last-col) tbody > tr > td:last-child:has(.unt-dropdown.open),
.sticky-last-col tbody > tr > td:last-child:has(.unt-dropdown.open) {
	z-index: 1101;
}

/* Rows whose select-one-checkbox is checked get the same subtle tint as
   the hover state, so users can see what is currently selected. Scoped to
   <table-content> so the rule doesn't bleed into block-content layouts. */
table-content tbody > tr:has(select-one-checkbox input:checked) > td {
	box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s ease;
}


td {
	border-top: 3px solid #dedede;
	padding: 2px 1px;
}

[colspan-table] tbody tr.freight-continuation > td {
	border-top: none;
}

/* Stacked field-like elements in a <td> need a small gap or they visually merge. */
td > field,
td > collection-field,
td > status-updater,
td > triple-price-field,
td > double-price-field,
td > save-address-button {
	display: block;
	margin: 2px 0;
}

.details-body table thead, .item-block table thead {
	position: unset;
	top: unset;
	z-index: unset;
	box-shadow: unset;
}

.light-green-background-color {
	background-color: #e8f5e9;
}


.colspan-table-repeat-end-td {
	padding: 2px 8px 12px 8px;
}

.table-tr-collapse {
	padding: 8px 16px;
	background-color: #f0f0f0;
	margin-bottom: 8px;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;	
}

/***************************************************/
/* CUSTOM ** ***************************************/
/***************************************************/
.font-smaller {
	font-size: 90%;
}

.font-bigger {
	font-size: 110%;
}
/***************************************************/
/* BOOTSTRAP ***************************************/
/***************************************************/
.badge {
	font-size: var(--font-xs);
	font-weight: unset;
	padding: 0px 4px;
	margin: 0px 4px;
	line-height: unset;
}

.close {
	opacity: 0.5;
}

.row {
	margin: 0px 0px;
	padding: 0px 0px;
}

.nav-tabs {
	padding:1px 0px 0px 1px;
	cursor: pointer;
	border-bottom: 1px solid transparent;
}

.nav-tabs>li>a {
	/*color: #6263D5;		*/
	background-color: #fff;
	color: #62646B;
	border: 1px solid var(--highlight-background-color);
	border-bottom: 3px solid #fff;
	margin-bottom: 1px;
	min-width: 120px;
	text-align: center;
	padding: 4px 8px;	
	margin: 4px 1px 0px 1px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover  {
	cursor: default;
	border: 1px solid #6263D5;
	border-bottom: 3px solid #6263D5;
	background-color: var(--highlight-background-color);
}

[class^="col-lg-"],
[class^="col-md-"],
[class^="col-sm-"],
[class^="col-xs-"],
[class*=" col-lg-"],
[class*=" col-md-"],
[class*=" col-sm-"],
[class*=" col-xs-"] {
  padding: 0 2px;
}


.btn {
	margin: 1px 1px;
	padding: 4px 8px;
	font-size: inherit;	
	-webkit-user-select: text;
	-moz-user-select: text; 
	user-select: text;	
}

.btn-text-left {
	text-align: left;
}

input[type="checkbox"], input[type="radio"] {
	margin: 4px 4px;
}

.badge {
	background-color: #F85A3B;
	color: #FFF;
	margin: 0px 2px 0px 4px;
}

.badge-primary {
	background-color: #6162F1;
	color: #FFFFFF;
}

.list-group {
	margin-bottom: 0px;
}

.list-group.rolled-up {
	max-height: 250px;
	overflow-y: scroll;
}

.list-group-item {
	margin: 2px 0px 2px 0px;
	padding: 0px 2px;
}

.d-none {
	display: none !important;
}

.d-block {
	display: block !important;
}

@media ( min-width : 576px) {
	.d-sm-none {
		display: none !important;
	}
	.d-sm-block {
		display: block !important;
	}
}

@media ( min-width : 768px) {
	.d-md-none {
		display: none !important;
	}
	.d-md-block {
		display: block !important;
	}
}

@media ( min-width : 992px) {
	.d-lg-none {
		display: none !important;
	}
	.d-lg-block {
		display: block !important;
	}
}

@media ( min-width : 1200px) {
	.d-xl-none {
		display: none !important;
	}
	.d-xl-block {
		display: block !important;
	}
}

/***************************************************/
/* GRID*********************************************/
/***************************************************/

.wrapper {
	display: grid;
}

.topbar {
	height: 50px;
	background-color: #0C0A1B;
	border-bottom: 1px solid #1e242e;
}

.app-topbar {
	height: 100%;
	width: 100%;
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	padding: 0px 8px 0px 8px;
}

.app-topbar > .inline {
	flex-wrap: nowrap;
	flex-shrink: 0;
}

.app-topbar > .inline:last-child {
	margin-left: auto;
}

.app-topbar .btn,
.app-topbar .alerts-wrapper > .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	flex-shrink: 0;
	height: 36px;
	min-width: 36px;
	padding: 0 8px;
	font-size: 1em;
	line-height: 1;
}

.app-topbar .btn.btn-sidebar-toggle {
	height: var(--topbar-height);
}

.app-topbar .btn > i {
	font-size: 1.15em;
	line-height: 1;
}

.app-topbar .btn > .badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	margin: 0 0 0 6px;
	border-radius: 9px;
	font-size: 11px;
	line-height: 1;
}

#sidebar {
	overflow: hidden;
	width: var(--sidebar-width);
	transition: width var(--sidebar-transition);
}

#content {
	display: flex;
	height: calc(100vh - var(--topbar-height));
}

.app-content {
	padding: 0px;
	width: calc(100vw - var(--sidebar-width));
	overflow: auto;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: width var(--sidebar-transition);
}

.app-content-header {
	min-height: 40px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding: 0px 8px 0px 8px;
	gap: 6px;
}

.app-content-header > .inline:first-child {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
}

.app-content-header > .inline:first-child h1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-content-header-buttons {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.app-content-header-buttons > *,
.app-content-header-buttons .btn {
	flex-shrink: 0;
	white-space: nowrap;
}

.app-content-data {
	height: calc(100vh - 50px - 20px - 60px);
	border-bottom: 1px solid #DDDDDD;
    display: flex;
    flex-direction: column;	
}

.app-content-footer {
	display: grid;	
	align-items: center;	
	height: 40px;
	overflow: hidden;
	border-top: 1px solid #ddd;
}

#topbarContent {
	padding: 0px 0px 12px 0px;
}

.details-body {
	display: grid;
	grid-template-rows: auto 1fr;
	height: calc(100vh - 50px);
}

.details-topbar {
	width: 100%;
	overflow: hidden;
	background-color: var(--main-background-color);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	position: relative;
	z-index: 153;
}

.details-content {
	overflow-y: auto;
	width: 100%;
	padding-bottom: 50px;
	background-color: var(--main-background-color);
}

.vehicle-actions-icons {
	display: inline-flex;
	gap: 2px;
	margin-left: 6px;
	vertical-align: middle;
}

.lazy-map-prompt {
	padding: 24px;
	text-align: center;
}

/* Leaflet popup used as "insert waypoint" context menu on OSM map — leave
   room for the close button (X) and keep the action button on a single line. */
.waypoint-insert-popup .leaflet-popup-content {
	margin: 8px 24px 8px 8px;
}

.waypoint-insert-popup .leaflet-popup-content > a.btn {
	white-space: nowrap;
}

.waypoint-insert-position-modal .content-box {
	margin: 0;
}

.waypoint-insert-position-modal .waypoint-insert-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.waypoint-insert-position-modal .waypoint-insert-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 4px 8px;
}

.waypoint-insert-position-modal .waypoint-insert-icon {
	width: 16px;
	text-align: center;
}

.waypoint-insert-position-modal .waypoint-insert-row.stop .waypoint-insert-icon {
	color: #d9534f;
}

.waypoint-insert-position-modal .waypoint-insert-row.waypoint .waypoint-insert-icon {
	color: #5cb85c;
}

.waypoint-insert-position-modal .waypoint-insert-details {
	flex: 1;
	min-width: 0;
}

.waypoint-insert-position-modal .waypoint-insert-meta {
	font-size: 12px;
	color: #777;
}

.waypoint-insert-position-modal .waypoint-insert-meta > span:not(:last-child)::after {
	content: " · ";
}

.waypoint-insert-position-modal .waypoint-insert-gap {
	text-align: center;
	padding: 4px 0;
}

/* Google Maps InfoWindow used as "insert waypoint" context menu — make the
   default close button compact so it doesn't overshadow the single action. */
.gm-style .gm-style-iw-c {
	padding: 4px 8px !important;
}

.gm-style .gm-style-iw-c .gm-ui-hover-effect {
	width: 18px !important;
	height: 18px !important;
	top: 2px !important;
	right: 2px !important;
}

.gm-style .gm-style-iw-c .gm-ui-hover-effect > span {
	width: 14px !important;
	height: 14px !important;
	margin: 2px !important;
}

.gm-style .gm-style-iw-d {
	overflow: hidden !important;
	padding-right: 18px;
}

/* Sticky stack inside freight-order-details:
   1. .sticky-freight-tabs       — freight nav-tabs at the top of the scroll area
   2. .sticky-freight-overview   — transport "Ogólne" collapsible
   3. .freight-stops-host header — only the stops collapsible HEADER (title + buttons)
   All have an opaque background and the overview has an upward box-shadow
   that covers any sub-pixel gap above so scrolling content doesn't peek. */
.details-content .sticky-freight-tabs,
.details-content .sticky-freight-overview {
	background-color: var(--main-background-color);
	margin: 0;
}

.details-content .sticky-freight-tabs {
	position: sticky;
	top: 0;
	z-index: 152;
}

.details-content .freight-section-title {
	margin: 16px 0 6px;
	padding: 6px 8px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	overflow: visible;
	white-space: normal;
	background-color: var(--main-background-color);
}

.details-content .sticky-freight-tabs > li > a {
	white-space: nowrap;
}

/* `top` values for the sticky stack are calibrated against the default user
   font-size (~14px). With body { font-size } set from the user's profile
   (see run.js — `angular.element("body").css('font-size', data.fontSize)`),
   the actual heights of nav-tabs and the "Ogólne" collapsible scale with
   font-size, so larger user fonts can shift the boundary by a few pixels.
   The short upward box-shadow (8px) fills any sub-pixel gap between the
   sticky tabs (ends near y=38) and this sticky element (starts at y=38)
   without reaching the "Transporty" h3 above the tabs (tabs are ~35-44px
   tall depending on font, plus the h3 has its own margin and z-index). */
.details-content .sticky-freight-overview {
	position: sticky;
	top: 38px;
	z-index: 151;
	box-shadow: 0 -8px 0 0 var(--main-background-color);
}

.details-content .sticky-freight-overview .content-box-section {
	margin: 0;
}


/* Chip shown next to the Ogólne title — freight number */
.freight-header-chip {
	display: inline-block;
	padding: 2px 8px;
	margin-left: 6px;
	border-radius: 12px;
	background-color: #eef3f8;
	color: #2c3e50;
	font-size: 12px;
	font-weight: 600;
	vertical-align: middle;
}

#bottombar {
	position: fixed;
	max-width: calc(100vw - 250px);
	bottom: 0px;
	right: 10px;
	z-index: 1003;
	padding: 10px;
}

#list-tab-section {
	height: calc(100vh - 50px);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 10;
	box-shadow: rgb(44, 62, 80) -15px 0px 15px -15px;
	border-left: 2px solid #666;
	background-color: var(--main-background-color);
}

.list-tab-section-body {
	padding: 0;
}

/* In the side panel, let details-body flow naturally and let #list-tab-section
   handle the scroll. The full-page details view keeps its fixed grid layout. */
#list-tab-section .details-body {
	display: block;
	height: auto;
}

#list-tab-section .details-content {
	overflow: visible;
	height: auto;
	padding-bottom: 0;
}

/* The topbar sticks to the top of the side panel while the body scrolls. */
#list-tab-section .details-topbar {
	overflow: visible;
	height: auto;
	position: sticky;
	top: 0;
	z-index: 5;
	background-color: var(--main-background-color);
}

.mobile-show {
	display: none;
}

#list-tab-section [class^="col-lg-offset-"],
#list-tab-section [class*=" col-lg-offset-"] {
  margin: unset;
}

#list-tab-section .mobile-hide {
	display: none;
}

#list-tab-section .details-content {
	height: calc(100vh - 150px);
}

#list-tab-section .content-box-header {
	padding: 5px 10px;
	display: flex;
}

#list-tab-section .content-box {
	margin-top: 10px;
}

/* Side-panel layout. Every field is <div class="col-lg-N"><div class="field-horizontal">…</div></div>.
   Each .row and each multi-field container is a flex-wrap row. Single-field
   wrappers take 50% (two per visual row); everything else takes 100%. */

#list-tab-section [class^="col-lg-"],
#list-tab-section [class*=" col-lg-"] {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

/* Exclude .content-box-header and .sticky-box rows — those use bootstrap col
   widths for header layouts (list-statistics, collapsible header, etc.). */
#list-tab-section .row:not(.content-box-header):not(.sticky-box),
#list-tab-section :is(.content-box, [class^="col-lg-"], [class*=" col-lg-"]):has(> .field-horizontal + .field-horizontal) {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	column-gap: 4px;
	row-gap: 0;
}

#list-tab-section .row:not(.content-box-header):not(.sticky-box) > *,
#list-tab-section :is(.content-box, [class^="col-lg-"], [class*=" col-lg-"]):has(> .field-horizontal + .field-horizontal) > * {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}

#list-tab-section .row:not(.content-box-header):not(.sticky-box) > :is([class^="col-lg-"], [class*=" col-lg-"]):has(> .field-horizontal:only-child),
#list-tab-section :is(.content-box, [class^="col-lg-"], [class*=" col-lg-"]):has(> .field-horizontal + .field-horizontal) > .field-horizontal {
	flex: 0 0 calc(50% - 2px);
	max-width: calc(50% - 2px);
	width: calc(50% - 2px);
}


/***************************************************/
/* MATERIAL ****************************************/
/***************************************************/

button, select, html, textarea, input {
	font-family: var(--font-normal);
}

body.md-default-theme, body, html.md-default-theme, html {
	color: #000000;
}

md-backdrop.md-dialog-backdrop {
	z-index: 992;
}

md-switch {
	margin: 0px;
}

/***************************************************/
/* FIELD**** ***************************************/
/***************************************************/

.field-horizontal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.3s ease;  
}

.field-horizontal:hover {
  background-color: rgba(0, 0, 0, 0.05);
}


label, .label {
	display: flex;
	flex: 1;
	font-size: var(--font-xs);
	font-weight: 600;
	cursor: default;
	color: #000;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}

.field-extension {
	word-break: break-all;
	color: #888;
	font-size: var(--font-sm);
}

.dropdown a {
	color: #444;
}

.form-box, unt-autocomplete, bool-select, unt-datetime-picker {
	min-height: var(--form-default-size);
	align-items: center;
	width: 100%;
	/*display: inherit;*/
}

.form-value {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	width: 100%;
	overflow-x: auto;
	min-width: 40px;
	padding: 0px 2px 0px 2px;	
	word-break: normal;
}

.form-value >span {
	max-width: 100%;
}

.field-value-extension {
	display: flex;
	/*grid-template-columns: repeat(5, 1fr);*/
}

.field-extension {
	padding: 1px;
	border-radius: 4px;
}

/*
.form-value.inline {
	align-items: flex-start;
}*/

/*.type-LocalDateTime, */.type-Country {
	white-space: nowrap;
	min-width: 56px;
}

.type-Country .form-value {
	justify-content: flex-start;
}

.form-value.textarea>span {
	white-space: break-spaces;
	min-width: 120px;
}

.form-value.textarea {
	align-items: flex-start;
}

.form-value-small {
	font-size: 90%;
}

.field-enabled {
	cursor: pointer;
	border-radius: 4px;
	border: 1px solid transparent;	
	border-bottom: 1px solid var(--main-background-color);
	background: var(--form-value-color);
	min-height: var(--form-default-size);
}

.field-disabled {
	cursor: default;
	border: 1px solid transparent;
}

.field-enabled:hover {
	cursor: default;
	border: 1px solid var(--highlight-background-color-strong);
	background-color: #fff;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.field-disabled:hover {
	cursor: pointer;
}

.field-disabled-with-dropdown {
	background-color: #EBF2FA;
	min-height: var(--form-default-size);
	border-radius: 4px;
}

.open>.field-enabled {
	opacity: 0.5;
}

.field-disabled-with-dropdown {
	color: #1B5299;
	font-weight: 600;
}

.field-disabled-with-dropdown:hover {
	text-decoration: underline;
}

.input-group>textarea {
	white-space: pre-wrap;
	resize: vertical;
	height: 100px;
	min-width: 250px;
}

.input-group>input, select {
	min-width: 110px;
}

.field-required, .table>thead>tr>th .field-required {
	color: #f53224;
	font-weight: 700;
}

.field-no-vertical-space {
	flex: 2;
	text-align: left;
	padding: 0px 4px;
}

.field-no-vertical-space .form-box {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	margin: 0px;
	min-height: unset;
}

.form-value.field-enabled.field-mark-null {
	cursor: pointer;
	border: 1px solid transparent;
	border-bottom: 1px solid #FCE4D8;
	transition: border-color 0.3s ease, background-color 0.3s ease;
	background-color: #F6F7F8;
}

.form-value.field-enabled.field-mark-null:hover {
	/*border-bottom: 1px solid #fdd1ce;*/
	cursor: pointer;
	box-shadow: unset;
	background-color: #F6F7F8;
	border: 1px solid #C88514;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.field-highlighted {
	background-color: var(--highlight-background-color);
}

.text-red .form-value {
	color: red;
}

.form-control {
	border: 1px solid transparent;
	border-bottom: 1px solid var(--main-background-color);
	font-size: inherit;
	height: unset;
	min-height: var(--form-default-size);
	box-shadow: unset;
	padding: 4px;
	background: var(--form-value-color);

}

.form-control:focus, .form-control:hover {
	border: 1px solid #8889FD;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control 	{
	opacity: 0.5;
}

.form-control-inline {
	display: inline;
	width: auto;
}

/***************************************************/
/* MODAL**** ***************************************/
/***************************************************/

.modal-dialog {
	margin: unset;
}

.modal-error .modal-header, .modal-error .modal-body {
	color: red;
}

.modal-backdrop.in {
	opacity: 0.7;
}

.modal-content {
	background-color: var(--main-background-color);
	max-height: calc(100vh - 60px);
	overflow: auto;
	z-index: 1050;
}

/*
.modal-content .modal-internal-block {
	height: calc(100vh - 210px);
	overflow: auto;
}
*/
.modal-header {
	border: 0px;
	padding: 12px 12px 0px 12px;
}

.modal-section-header {
	margin: 8px 0px 8px 0px;
}

.modal-body {
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

.modal-body .content-box {
	margin: 0px 8px 8px 8px;
/*	background-color: #ffffff;*/
}

.modal-body .row {
	padding: 4px
}

.modal-footer {
	padding: 2px;
	border: 0px;
}

.modal-xl {
	width: 100%;
	padding: 30px;
}

.form-value.warning {
	border: 1px solid #FF0000;
}

.form-horizontal .form-group {
  margin-right: 0px;
  margin-left: 0px;
}

.form-group {
  margin-bottom: 4px;
}

.btn.disabled, .btn[disabled] {
	pointer-events: none;
}

.disabled-block {
	pointer-events: none;
	opacity: 0.4;
}

.modal-body .input-group-addon {
	padding: 6px;
	font-size: inherit;
}

/***************************************************/
/* MATERIAL ******************************************/
/***************************************************/
.md-standard-list-container.md-autocomplete-suggestions-container,
	.md-virtual-repeat-container.md-autocomplete-suggestions-container {
	z-index: 1200;
}

md-autocomplete {
	border-radius: 4px;
	width: 100%;
	min-width: unset;
	overflow: hidden;
	height: unset;
	border-bottom: 1px solid #ddd;
	background: var(--form-value-color);
}

md-autocomplete input:not(.md-input), .md-autocomplete-suggestions li {
	font-size: inherit;
}

md-autocomplete input:not(.md-input), md-autocomplete md-autocomplete-wrap 	{
	box-shadow: none;
}

md-autocomplete input:not(.md-input) {
	font-size: inherit;
	padding: 2px 4px;
	border-radius: 2px;
	background: var(--form-value-color);
	line-height: unset;
	height: unset;
}


.md-whiteframe-1dp, .md-whiteframe-z1 {
	box-shadow: none;
	height: var(--form-default-size);
}

.md-autocomplete-suggestions 
.md-autocomplete-suggestion {
	font-size: inherit;
	padding: 2px 4px;
	line-height: 24px;
	height: 28px;	
}

md-autocomplete .md-show-clear-button button {
	line-height: unset;
	text-align: center;
	width: 30px;
	height: unset;
	border: none;
	background: transparent;
	margin: unset;
}

.md-autocomplete-suggestions-container,
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
  min-width: 240px !important;
  max-width: 90vw;
}

li.md-autocomplete-suggestion {
  white-space: normal !important;
  height: auto !important;
  min-height: 28px !important;
  overflow: visible !important;
  line-height: 1.3 !important;
  padding: 4px 10px !important;
  border-bottom: 1px solid #f0f0f0;
  font-size: inherit !important;
}

li.md-autocomplete-suggestion:last-child {
  border-bottom: none;
}

li.md-autocomplete-suggestion span {
  white-space: normal !important;
  word-break: break-word !important;
  display: block !important;
  font-weight: normal !important;
  font-size: inherit !important;
}

li.md-autocomplete-suggestion .highlight {
  font-weight: normal !important;
}

/***************************************************/
/* MAP OSM******************************************/
/***************************************************/
.leaflet-top, .leaflet-bottom {
	position: absolute;
	pointer-events: none;
}

.leaflet-popup-content {
	margin: 5px;
	font-family: var(--font-normal);
	font-size: 1.2rem;
}

/***************************************************/
/* NAVBAR*******************************************/
/***************************************************/
.navbar {
	margin-bottom: 0px;
	border-radius: 0px;
	display: flex;
}

.navbar-nav {
	float: none;
	margin: 0;
}

.navbar-nav>li {
	float: none;
}

/***************************************************/
/* SIDEBAR *****************************************/
/***************************************************/
.sidebar {
	background-color: var(--sidebar-bg);
	color: var(--sidebar-text);
	font-size: var(--sidebar-font-size);
	height: 100%;
}

#sidebar-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

label {
	padding-left: 0px;
	margin: unset;
}

/* equal-width icons across the sidebar and the topbar burger that visually extends it */
.sidebar i,
.btn.btn-sidebar-toggle > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sidebar-icon-width);
	font-size: var(--sidebar-icon-size);
	flex-shrink: 0;
	padding: 0;
}

/* SEARCH */
.sidebar .navbar-top {
	flex-shrink: 0;
	padding: 0.75em 0.75em 0.5em 0.75em;
}

.menu-search {
	padding: 0;
	border: 0;
}

.menu-search .input-group {
	background-color: var(--sidebar-bg-soft);
	border: 1px solid transparent;
	border-radius: var(--sidebar-row-radius);
	display: flex;
	align-items: center;
	transition: background var(--sidebar-transition), border-color var(--sidebar-transition), box-shadow var(--sidebar-transition);
}

.menu-search .input-group:focus-within {
	background-color: var(--sidebar-bg-soft-strong);
	border-color: var(--sidebar-accent);
	box-shadow: 0 0 0 3px var(--sidebar-accent-soft);
}

#sidebar-input {
	background: transparent;
	color: var(--sidebar-text-active);
	border: 0;
	padding: 0.4em 0.75em;
	font-size: inherit;
	box-shadow: none;
	height: auto;
}

#sidebar-input::placeholder {
	color: var(--sidebar-text-muted);
}

#sidebar-input:focus {
	outline: none;
	box-shadow: none;
}

.menu-search .input-group-addon {
	background: transparent;
	border: 0;
	color: var(--sidebar-text-muted);
	padding: 0 0.625em;
	cursor: pointer;
	transition: color var(--sidebar-transition);
}

.menu-search .input-group-addon:hover {
	color: var(--sidebar-text-active);
}

/* MAIN MENU */
.navbar-main {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	padding: 0.25em 0.5em 0.5em 0.5em;
	height: auto;
}

.navbar-main .navbar-nav {
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
}

.sidebar .nav > li {
	float: none;
	list-style: none;
}

.sidebar .nav > li > a {
	display: flex;
	align-items: center;
	gap: 0.625em;
	padding: 0.675em 0.75em;
	color: var(--sidebar-text-muted);
	background-color: transparent;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: background var(--sidebar-transition), color var(--sidebar-transition);
}

.sidebar .nav > li.active > a,
.sidebar .nav > li.expanded > a {
	color: var(--sidebar-text-active);
}

.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus,
.sidebar .nav > li.active.dropdown > a:hover,
.sidebar .nav > li.expanded.dropdown > a:hover {
	background-color: var(--sidebar-bg-soft);
	color: var(--sidebar-text-active);
}

.sidebar .nav > li:not(.dropdown).active > a {
	background-color: var(--sidebar-accent);
	color: #fff;
	box-shadow: 0 1px 8px var(--sidebar-accent-soft);
}

/* chevron indicator on group headers */
.sidebar .dropdown-toggle::after {
	content: '';
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.6;
	transition: transform var(--sidebar-transition), opacity var(--sidebar-transition);
}

.sidebar .nav > li.active > .dropdown-toggle::after,
.sidebar .nav > li.expanded > .dropdown-toggle::after {
	transform: rotate(45deg);
	opacity: 1;
}

/* SUBOPTIONS — collapse/expand via max-height + opacity transitions so both directions animate.
   100vh is a generous upper bound for max-height; the visual stops at the content's natural height,
   then the property continues toward 100vh for the remainder of the transition. */
.navbar-main .dropdown-menu {
	display: block;
	position: relative;
	float: none;
	background: transparent;
	color: var(--sidebar-text-muted);
	border: 0;
	box-shadow: none;
	padding: 0.125em 0 0.25em 0;
	margin: 0;
	min-width: 0;
	font-size: var(--sidebar-suboption-font-size);
	width: 100%;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	z-index: auto;
	transition:
		max-height var(--sidebar-transition) ease-out,
		opacity var(--sidebar-transition) ease-out;
}

body:not(.sidebar-mini) .navbar-main li.active .dropdown-menu,
body:not(.sidebar-mini) .navbar-main li.expanded .dropdown-menu,
body:not(.sidebar-mini) .navbar-main.search-active li .dropdown-menu {
	max-height: 100vh;
	opacity: 1;
}

/* Subtle colour flash signalling the state change.
   `.flash-expand` / `.flash-collapse` are added by the directive for one transition cycle.
   Expand flash is delayed and slower so the user first sees the submenu appear,
   then notices the green tint highlighting what just opened. */
@keyframes sidebar-submenu-flash-expand {
	0%   { background-color: transparent; }
	25%  { background-color: rgba(108, 218, 130, 0.25); }
	100% { background-color: transparent; }
}

@keyframes sidebar-submenu-flash-collapse {
	from { background-color: rgba(232, 102, 102, 0.22); }
	to   { background-color: transparent; }
}

body:not(.sidebar-mini) .navbar-main .dropdown-menu.flash-expand {
	animation: sidebar-submenu-flash-expand 600ms ease-out 250ms;
}

body:not(.sidebar-mini) .navbar-main .dropdown-menu.flash-collapse {
	animation: sidebar-submenu-flash-collapse var(--sidebar-transition);
}

.navbar-main .dropdown-menu > li > a {
	display: flex;
	align-items: center;
	padding: 0.4625em 0.625em 0.4625em 2.625em;
	color: var(--sidebar-text-muted);
	background-color: transparent;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	transition: background var(--sidebar-transition), color var(--sidebar-transition);
}

.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus {
	background-color: var(--sidebar-bg-soft);
	color: var(--sidebar-text-active);
}

.navbar-main .dropdown-menu > li > a > .menu-suboption-content {
	flex: 1 1 auto;
	min-width: 0;
}

.navbar-main .dropdown-menu > li > a > .badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	margin: 0 0 0 8px;
	border-radius: 9px;
	font-size: 11px;
	line-height: 1;
}

.navbar-main .dropdown-menu > li.active > a {
	background-color: var(--sidebar-accent);
	color: #fff;
	box-shadow: 0 1px 8px var(--sidebar-accent-soft);
}

.menu-suboption-content {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	overflow: hidden;
}

.menu-suboption-content .content {
	overflow: hidden;
	text-overflow: ellipsis;
}

.label-menu-short {
	display: none;
	width: var(--sidebar-icon-width);
	font-weight: 700;
	font-size: 0.85em;
	text-align: center;
	color: var(--sidebar-text-muted);
}

/* --- SIDEBAR CONTROL BUTTONS ----------------------------------------------
   Topbar burger (hides the sidebar) and sidebar bottom toggle (collapses to mini)
   share visual identity so the user reads them as the same kind of control.
   `.btn.btn-menu.btn-sidebar-toggle` selector uses all three classes to outrank
   the dark `.btn.btn-menu` background defined later in the file. */
.navbar-bottom {
	flex-shrink: 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn.btn-menu.btn-sidebar-toggle,
.sidebar .navbar-bottom .btn.btn-menu {
	height: var(--topbar-height);
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	color: var(--sidebar-text-muted);
	border: 0;
	border-radius: 0;
	transition: background var(--sidebar-transition), color var(--sidebar-transition);
}

.btn.btn-menu.btn-sidebar-toggle:hover,
.btn.btn-menu.btn-sidebar-toggle:focus,
.btn.btn-menu.btn-sidebar-toggle.active,
.btn.btn-menu.btn-sidebar-toggle:active,
.sidebar .navbar-bottom .btn.btn-menu:hover,
.sidebar .navbar-bottom .btn.btn-menu:focus,
.sidebar .navbar-bottom .btn.btn-menu.active,
.sidebar .navbar-bottom .btn.btn-menu:active {
	background-color: var(--sidebar-bg-soft);
	color: var(--sidebar-text-active);
	border: 0;
}

/* Burger pulls left to occupy the same column as the sidebar-mini. */
.btn.btn-menu.btn-sidebar-toggle {
	width: var(--sidebar-mini-width);
	margin-left: -8px;
}

/* Bottom toggle fills its container. */
.sidebar .navbar-bottom .btn.btn-menu {
	width: 100%;
}

/* FAVORITE-VIEWS (topbar) — uses the .menu-option class */
.menu-option {
	margin: 0px 8px;
}

a.menu-option {
	color: var(--menu-inactive-option-color);
}

a.menu-option:hover,
a.menu-option:focus {
	background-color: #313131;
	color: #FFF;
}

a.menu-option.active {
	background-color: var(--sidebar-accent);
	color: #fff;
	box-shadow: 0 1px 8px var(--sidebar-accent-soft);
}

/* Favorites bar wraps when crowded; rows share the topbar height so buttons
   shrink vertically instead of overflowing. */
favorite-views {
	display: contents;
}

.favorite-views-list {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	padding: 0 4px;
	row-gap: 2px;
}

.favorite-views-list > .menu-option {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin: 0 4px;
	padding: 4px 8px;
	border-radius: 4px;
	cursor: grab;
	line-height: 1.3;
}

.favorite-views-list > .menu-option.sortable-dragging {
	cursor: grabbing;
	opacity: 0.6;
}

.favorite-views-list > .menu-option.sortable-dragover-before {
	box-shadow: inset 3px 0 0 var(--sidebar-accent);
}

.favorite-views-list > .menu-option.sortable-dragover-after {
	box-shadow: inset -3px 0 0 var(--sidebar-accent);
}

/* SIDEBAR MINI */
.sidebar-mini #sidebar {
	width: var(--sidebar-mini-width);
}

.sidebar-mini .app-content {
	width: calc(100vw - var(--sidebar-mini-width));
}

.sidebar-mini .menu-search {
	display: none;
}

.sidebar-mini .sidebar .navbar-top {
	padding: 0.5em 0.5em 0.25em 0.5em;
}

/* remove horizontal padding so each row reaches the sidebar's right edge
   and the cursor can travel from the icon to the flyout without losing :hover */
.sidebar-mini .navbar-main {
	padding-left: 0;
	padding-right: 0;
}

.sidebar-mini .sidebar .nav > li > a {
	justify-content: center;
	padding: 0.725em 0;
	gap: 0;
	border-radius: 0;
}

.sidebar-mini .sidebar .nav > li > a > span:not(.label-menu-short) {
	display: none;
}

.sidebar-mini .sidebar .dropdown-toggle::after {
	display: none;
}

/* highlight the icon when its group contains the current route */
.sidebar-mini .sidebar .nav > li.dropdown.active > a {
	position: relative;
	color: var(--sidebar-accent);
	background-color: var(--sidebar-accent-soft);
}

.sidebar-mini .sidebar .nav > li.dropdown.active > a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	bottom: 0.5em;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background-color: var(--sidebar-accent);
}

/* FLYOUT submenu (mini mode) — position: fixed to escape navbar-main's overflow clip.
   `border-left: transparent` creates the visual gap from the sidebar while keeping the element's
   hit area continuous, so the cursor can travel from the icon to the flyout without losing :hover.
   Show/hide is controlled by opacity + visibility transitions for smooth appear and disappear.
   JS sets --flyout-top/--flyout-bottom/--flyout-max-height. */
.sidebar-mini .navbar-main li .dropdown-menu {
	display: block;
	position: fixed;
	top: var(--flyout-top, var(--topbar-height));
	bottom: var(--flyout-bottom, auto);
	left: var(--sidebar-mini-width);
	width: var(--sidebar-flyout-width);
	max-height: var(--flyout-max-height, calc(100vh - var(--topbar-height) - 1rem));
	overflow-y: auto;
	padding: 0.5em;
	background-color: var(--sidebar-bg-elevated);
	background-clip: padding-box;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-left: 0.6rem solid transparent;
	/* compensate the 0.6rem transparent left border so the padding-box (visible card)
	   has the same curve on all four corners */
	border-radius:
		calc(var(--sidebar-row-radius) + 0.5rem)
		var(--sidebar-row-radius)
		var(--sidebar-row-radius)
		calc(var(--sidebar-row-radius) + 0.5rem)
		/
		var(--sidebar-row-radius);
	box-shadow: 0.6rem 0 3.2rem rgba(0, 0, 0, 0.45);
	font-size: var(--sidebar-font-size);
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-0.4em);
	animation: none;
	transition:
		opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 180ms;
}

.sidebar-mini .navbar-main li.dropdown:hover > .dropdown-menu,
.sidebar-mini .navbar-main li.dropdown.expanded > .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition:
		opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s;
}

.sidebar-mini .navbar-main .dropdown-menu > li > a {
	padding: 0.45em 0.75em;
	justify-content: flex-start;
}

.sidebar-mini .navbar-main .dropdown-menu > li > a > .menu-suboption-content {
	justify-content: flex-start;
}

.sidebar-mini .navbar-main .dropdown-menu > li > a > .menu-suboption-content > .content {
	display: inline;
}

.sidebar-mini .navbar-main .dropdown-menu .label-menu-short {
	display: none;
}

/* SIDEBAR HIDE */
.sidebar-hide #sidebar {
	width: 0;
}

.sidebar-hide .app-content {
	width: 100vw;
}

.input-group-btn {
	font-size: inherit;
}

.app-content-footer input {
	max-width: 50px;
}

.paginator-mini .hide-on-narrow-screen {
	display: none;
}

.entity-file-block {
	width: 100%; 
	min-width: 300px;
	padding: 4px; 
	background-color: #f2f2f2; 
	border-radius: 8px;
}

.drop-box {
	border: 2px dashed #AAAAAA;
	border-radius: 4px;
	text-align: center;
	padding: 4px;
	margin: 2px;
	white-space: nowrap;
	background-color: var(--main-background-color);
}

.drop-box:hover {
	background-color: #f2f2f2;
}

.drop-box.dragover {
	border: 1px dashed #262626;
}

.drop-box.dragover-err {
	border: 1px dashed red;
}

.drop-box.drop-box-uploading {
	cursor: not-allowed;
	pointer-events: none;
}

.view {
	display: none;
	margin-bottom: 0px;
}

.paginator .pageGroup {
	margin: 0 auto;
}

/* login */
.error {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 0px;
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}

.msg {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 0px;
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

.login-logo-wrapper {
	max-width: 550px;
	margin: auto;
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
	padding: 12px 0px 12px 0px;
}

.logo-res {
	max-height: 400px;
	max-width: -webkit-fill-available;
	max-width: -moz-available;
	max-width: fill-available;
}

/* error page */
.error-box {
	margin-top: 25vh;
}

/***************************************************/
/* btn - MENU ************************************/
/***************************************************/
.btn.btn-menu {
	background-color: #222834;
	border: 1px solid #222834;
	text-align: center;
	color: #FFF;
}

.btn.btn-menu.focus, .btn.btn-menu:focus {
	background-color: #222834;
	color: #FFF;
}

.btn.btn-menu:hover {
	background-color: #222834;
	color: #FFF;
}

.btn.btn-menu.active, .btn.btn-menu:active {
	background-color: #222834;
	color: #FFF;
}

.btn.btn-menu.active.focus, .btn.btn-menu.active:focus, .btn.btn-menu.active:hover,
	.btn.btn-menu:active.focus, .btn.btn-menu:active:focus, .btn.btn-menu:active:hover
	{
	background-color: #222834;
	color: #FFF;
}

.btn.btn-menu.btn-autorefresh-on,
.btn.btn-menu.btn-autorefresh-on.focus, .btn.btn-menu.btn-autorefresh-on:focus,
.btn.btn-menu.btn-autorefresh-on:hover,
.btn.btn-menu.btn-autorefresh-on.active, .btn.btn-menu.btn-autorefresh-on:active {
	background-color: #28a745;
	border-color: #28a745;
}

.btn.btn-menu.btn-autorefresh-off,
.btn.btn-menu.btn-autorefresh-off.focus, .btn.btn-menu.btn-autorefresh-off:focus,
.btn.btn-menu.btn-autorefresh-off:hover,
.btn.btn-menu.btn-autorefresh-off.active, .btn.btn-menu.btn-autorefresh-off:active {
	background-color: #dc3545;
	border-color: #dc3545;
}

/***************************************************/
/* btn - status ************************************/
/***************************************************/
.btn.btn-status, .btn.btn-status.focus, .btn.btn-status:focus, .btn.btn-status.active,
	.btn.btn-status:active, .btn.btn-status.active.focus, .btn.btn-status.active:focus,
	.btn.btn-status.active:hover, .btn.btn-status:active.focus, .btn.btn-status:active:focus,
	.btn.btn-status:active:hover {
	box-shadow: unset;
	vertical-align: middle;
	text-align: center;
	padding: 0px 8px 0px 8px;
	height: var(--form-default-size);
	border: 1px solid #000;
	width: 100%;
	font-weight: 600;
}

.btn.btn-status.active.grey-light, .timeline-block.grey-light {
	background-color: #F1F1F1;
	color: #4B4C51;
	border-color: #4B4C51;
	font-weight: 600;
}

.btn.btn-status.active.grey-light:hover, .timeline-block.grey-light:hover,
	.timeline-block.grey-light.active {
	background-color: #E1E2E5;
	Color: #333333;
	border-color: #333333;
}

.btn.btn-status.active.very-light-cyan, .timeline-block.very-light-cyan
	{
	background-color: #DCF2F2;
	color: #046B6B;
	border-color: #046B6B;
}

.btn.btn-status.active.very-light-cyan:hover, .timeline-block.very-light-cyan:hover,
	.timeline-block.very-light-cyan.active {
	background-color: #ADDFDF;
	color: #046B6B;
	border-color: #046B6B;
}

.btn.btn-status.active.light-cream-yellow, .timeline-block.light-cream-yellow
	{
	background-color: #FAF1E0;
	color: #B54708;
	border-color: #B54708;
}

.btn.btn-status.active.light-cream-yellow:hover, .timeline-block.light-cream-yellow:hover,
	.timeline-block.light-cream-yellow.active {
	background-color: #EFCCB8;
	color: #B54708;
	border-color: #B54708;
}

.btn.btn-status.active.light-mint-green, .timeline-block.light-mint-green
	{
	background-color: #E4FCDF;
	color: #047B52;
	border-color: #A5E2A9;
}

.btn.btn-status.active.light-mint-green:hover, .timeline-block.light-mint-green:hover,
	.timeline-block.light-mint-green.active {
	background-color: #A5E2A9;
	color: #047B52;
	border-color: #047B52;
}

.btn.btn-status.active.light-pink-white, .timeline-block.light-pink-white
	{
	background-color: #F9EDFB;
	color: #4A148C;
	border-color: #4A148C;
}

.btn.btn-status.active.light-pink-white:hover, .timeline-block.light-pink-white:hover,
	.timeline-block.light-pink-white.active {
	background-color: #E0CCF9;
	color: #4A148C;
	border-color: #4A148C;
}

.btn.btn-status.active.light-lemon-yellow, .timeline-block.light-lemon-yellow
	{
	background-color: #FEF9DE;
	color: #B95503;
	border-color: #B95503;
}

.btn.btn-status.active.light-lemon-yellow:hover, .timeline-block.light-lemon-yellow:hover,
	.timeline-block.light-lemon-yellow.active {
	background-color: #F9D9BF;
	color: #B95503;
	border-color: #B95503;
}

.btn.btn-status.active.light-sky-blue, .timeline-block.light-sky-blue {
	background-color: #EAF0FD;
	color: #001C64;
	border-color: #001C64;
}

.btn.btn-status.active.light-sky-blue:hover, .timeline-block.light-sky-blue:hover,
	.timeline-block.light-sky-blue.active {
	background-color: #B0C2EF;
	color: #001C64;
	border-color: #001C64;
}

.btn.btn-status.active.light-baby-blue, .timeline-block.light-baby-blue
	{
	background-color: #E8F5FF;
	color: #175CD3;
	border-color: #175CD3;
}

.btn.btn-status.active.light-baby-blue:hover, .timeline-block.light-baby-blue:hover,
	.timeline-block.light-baby-blue.active {
	background-color: #B8CDF2;
	color: #175CD3;
	border-color: #175CD3;
}

.btn.btn-status.active.light-salmon-pink, .timeline-block.light-salmon-pink
	{
	background-color: #FEEEEE;
	color: #B91E15;
	border-color: #B91E15;
}

.btn.btn-status.active.light-salmon-pink:hover, .timeline-block.light-salmon-pink:hover,
	.timeline-block.light-salmon-pink.active {
	background-color: #F3B9B5;
	color: #B91E15;
	border-color: #B91E15;
}

.btn.btn-status.active.light-blue-green {
	background-color: #e6f7ff;
	color: #005780;
	border-color: #005780;
}

.btn.btn-status.active.light-blue-green:hover {
	background-color: #e6f7ff;
	color: #005780;
	border-color: #B95503
}

.btn.btn-status.active.light-grayish-lavender {
	background-color: #f1f1f1;
	color: #404040;
	border-color: #404040;
}

.btn.btn-status.active.light-grayish-lavender:hover {
	background-color: #f1f1f1;
	color: #404040;
	border-color: #404040;
}

.btn.btn-status.active.light-pastel-green {
	background-color: #e4fcdf;
	color: #1c750b;
	border-color: #1c750b;
}

.btn.btn-status.active.light-pastel-green:hover,.timeline-block.light-pastel-green:hover,
	.timeline-block.light-pastel-green.active {
	background-color: #2ebb11;
	color: #0c2e05;
	border-color: #0c2e05;
}
/***************************************************/
/* status class ***********************************/
/***************************************************/
.light-pastel-green	{
	background-color: #e4fcdf;
	color: #1c750b;
}

.light-grayish-lavender {
	background-color: #f1f1f1;
	color: #404040;
}

.light-blue-green {
	background-color: #e6f7ff;
	color: #005780;
}

.item-block-header.grey-light{
	background-color: #F1F1F1;
	color: #4B4C51;
}

.very-light-cyan{
	background-color: #DCF2F2;
	color: #046B6B;
}

.light-cream-yellow {
	background-color: #FAF1E0;
	color: #B54708;
}

.light-mint-green {
	background-color: #E4FCDF;
	color: #047B52;
}

.light-pink-white
	{
	background-color: #F9EDFB;
	color: #4A148C;
}

.light-lemon-yellow
	{
	background-color: #FEF9DE;
	color: #B95503;
}

.light-sky-blue
	{
	background-color: #EAF0FD;
	color: #001C64;
}

.light-baby-blue{
	background-color: #E8F5FF;
	color: #175CD3;
}

.light-salmon-pink {
	background-color: #FEEEEE;
	color: #B91E15;
}

/***************************************************/
/* btn - default ***********************************/
/***************************************************/
.btn.btn-default {
	background-color: #FFFFFF;
	color: #4B4C51;
	border: 1px solid #E1E2E5;
}

.btn.btn-default.focus, .btn.btn-default:focus {
	background-color: #FFFFFF;
	color: #4B4C51;
	border: 1px solid #8889FD;
}

.btn.btn-default:hover {
	background-color: #F6F7F8;
	color: #4B4C51;
	border: 1px solid #E1E2E5;
}

.btn.btn-default.active, .btn.btn-default:active, .open>.dropdown-toggle.btn-default
	{
	background-color: #E1E2E5;
	color: #4B4C51;
	border: 1px solid #E1E2E5;
}

.btn.btn-default.active.focus, .btn.btn-default.active:focus, .btn.btn-default.active:hover,
	.btn.btn-default:active.focus, .btn.btn-default:active:focus, .btn.btn-default:active:hover,
	.open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus,
	.open>.dropdown-toggle.btn-default:hover {
	background-color: #E1E2E5;
	color: #4B4C51;
	border: 1px solid #8889FD;
}

/***************************************************/
/* btn - white ***********************************/
/***************************************************/
.btn.btn-white {
	border: 1px solid transparent;
	background-color: #ffffff;
	border-color: 0px solid #000000;
	color: #000000;
	font-weight: 400;
	user-select: text;
}

.btn.btn-white.focus, .btn.btn-white:focus {
	background-color: #F5F7FA;
	outline: none;
	box-shadow: none;
	color: #000000;
}

.btn.btn-white:hover {
	background-color: #F5F7FA;
	outline: none;
	box-shadow: none;
	color: #000000;
}

.btn.btn-white.active, .btn.btn-white:active {
	background-color: #F5F7FA;
	color: #000000;
	outline: none;
}

.btn.btn-white.active.focus, .btn.btn-white.active:focus, .btn.btn-white.active:hover,
	.btn.btn-white:active.focus, .btn.btn-white:active:focus, .btn.btn-white:active:hover
	{
	background-color: #F5F7FA;
	color: #000000;
	outline: none;
	box-shadow: none;
}

.details-topbar .btn-default {
	text-align: left;
}

/***************************************************/
/* btn - success ************************************/
/***************************************************/
.btn.btn-success {
	background-color: #258F00;
	color: #FFFFFF;
	border: 1px solid #258F00;
}

.btn.btn-success.focus, .btn.btn-success:focus {
	background-color: #258F00;
	color: #FFFFFF;
	border: 1px solid #8889FD;
}

.btn.btn-success:hover {
	background-color: #1B6700;
	color: #FFFFFF;
	border: 1px solid #1B6700;
}

.btn.btn-success.active, .btn.btn-success:active, .open>.dropdown-toggle.btn-success
	{
	background-color: #1B6700;
	color: #FFFFFF;
	border: 1px solid #1B6700;
}

.btn.btn-success.active.focus, .btn.btn-success.active:focus, .btn.btn-success.active:hover,
	.btn.btn-success:active.focus, .btn.btn-success:active:focus, .btn.btn-success:active:hover,
	.open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus,
	.open>.dropdown-toggle.btn-success:hover {
	background-color: #1B6700;
	color: #FFFFFF;
	border: 1px solid #8889FD;
}

/***************************************************/
/* btn-success-light ***********************************/
/***************************************************/
.btn.btn-success-light {
	background-color: #FFFFFF;
	color: #258F00;
	border: 1px solid #FFFFFF;
}

.btn.btn-success-light.focus, .btn.btn-success-light:focus {
	background-color: #F6F7F8;
	color: #258F00;
	border: 1px solid #258F00;
}

.btn.btn-success-light:hover {
	background-color: #F6F7F8;
	color: #258F00;
	border: 1px solid #258F00;
}

.btn.btn-success-light.active, .btn.btn-success-light:active, .open>.dropdown-toggle.btn-success-light
	{
	background-color: #F6F7F8;
	color: #258F00;
	border: 1px solid #258F00;
}

.btn.btn-success-light.active.focus, .btn.btn-success-light.active:focus,
	.btn.btn-success-light.active:hover, .btn.btn-success-light:active.focus,
	.btn.btn-success-light:active:focus, .btn.btn-success-light:active:hover,
	.open>.dropdown-toggle.btn-success-light.focus, .open>.dropdown-toggle.btn-success-light:focus,
	.open>.dropdown-toggle.btn-success-light:hover {
	background-color: #F6F7F8;
	color: #258F00;
	border: 1px solid #258F00;
}

/***************************************************/
/* btn - primary ***********************************/
/***************************************************/
.btn.btn-primary {
	background-color: #6162F1;
	color: #FFFFFF;
	border: 1px solid #6162F1;
}

.btn.btn-primary.focus, .btn.btn-primary:focus {
	background-color: #6162F1;
	color: #FFFFFF;
	border: 1px solid #258F00;
}

.btn.btn-primary:hover {
	background-color: #3B3DAB;
	color: #FFFFFF;
	border: 1px solid #3B3DAB;
}

.btn.btn-primary.active, .btn.btn-primary:active, .open>.dropdown-toggle.btn-primary
	{
	background-color: #3B3DAB;
	color: #FFFFFF;
	border: 1px solid #3B3DAB;
}

.btn.btn-primary.active.focus, .btn.btn-primary.active:focus, .btn.btn-primary.active:hover,
	.btn.btn-primary:active.focus, .btn.btn-primary:active:focus, .btn.btn-primary:active:hover,
	.open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus,
	.open>.dropdown-toggle.btn-primary:hover {
	background-color: #3B3DAB;
	color: #FFFFFF;
	border: 1px solid #258F00;
}

/***************************************************/
/* btn-primary-light ***********************************/
/***************************************************/
.btn.btn-primary-light {
	background-color: #FFFFFF;
	color: #6162F1;
	border: 1px solid #FFFFFF;
}

.btn.btn-primary-light.focus, .btn.btn-primary-light:focus {
	background-color: #F6F7F8;
	color: #6162F1;
	border: 1px solid #6162F1;
}

.btn.btn-primary-light:hover {
	background-color: #F6F7F8;
	color: #6162F1;
	border: 1px solid #6162F1;
}

.btn.btn-primary-light.active, .btn.btn-primary-light:active, .open>.dropdown-toggle.btn-primary-light
	{
	background-color: #F6F7F8;
	color: #6162F1;
	border: 1px solid #6162F1;
}

.btn.btn-primary-light.active.focus, .btn.btn-primary-light.active:focus,
	.btn.btn-primary-light.active:hover, .btn.btn-primary-light:active.focus,
	.btn.btn-primary-light:active:focus, .btn.btn-primary-light:active:hover,
	.open>.dropdown-toggle.btn-primary-light.focus, .open>.dropdown-toggle.btn-primary-light:focus,
	.open>.dropdown-toggle.btn-primary-light:hover {
	background-color: #F6F7F8;
	color: #6162F1;
	border: 1px solid #6162F1;
}

/***************************************************/
/* btn-secondary ***********************************/
/***************************************************/
.btn.btn-secondary {
	background-color: #EFF0FF;
	color: #494BCF;
	border: 1px solid #EFF0FF;
}

.btn.btn-secondary.focus, .btn.btn-secondary:focus {
	background-color: #6162F1;
	color: #494BCF;
	border: 1px solid #258F00;
}

.btn.btn-secondary:hover {
	background-color: #CDCEFF;
	color: #494BCF;
	border: 1px solid #CDCEFF;
}

.btn.btn-secondary.active, .btn.btn-secondary:active, .open>.dropdown-toggle.btn-secondary
	{
	background-color: #CDCEFF;
	color: #494BCF;
	border: 1px solid #CDCEFF;
}

.btn.btn-secondary.active.focus, .btn.btn-secondary.active:focus, .btn.btn-secondary.active:hover,
	.btn.btn-secondary:active.focus, .btn.btn-secondary:active:focus, .btn.btn-secondary:active:hover,
	.open>.dropdown-toggle.btn-secondary.focus, .open>.dropdown-toggle.btn-secondary:focus,
	.open>.dropdown-toggle.btn-secondary:hover {
	background-color: #CDCEFF;
	color: #494BCF;
	border: 1px solid #258F00;
}

/***************************************************/
/* btn - warning ***********************************/
/***************************************************/
.btn.btn-warning {
	background-color: #FAA619;
	color: #1B1B1D;
	border: 1px solid #FAA619;
}

.btn.btn-warning.focus, .btn.btn-warning:focus {
	background-color: #FAA619;
	color: #1B1B1D;
	border: 1px solid #8889FD;
}

.btn.btn-warning:hover {
	background-color: #C88514;
	color: #1B1B1D;
	border: 1px solid #C88514;
}

.btn.btn-warning.active, .btn.btn-warning:active, .open>.dropdown-toggle.btn-warning
	{
	background-color: #C88514;
	color: #1B1B1D;
	border: 1px solid #C88514;
}

.btn.btn-warning.active.focus, .btn.btn-warning.active:focus, .btn.btn-warning.active:hover,
	.btn.btn-warning:active.focus, .btn.btn-warning:active:focus, .btn.btn-warning:active:hover,
	.open>.dropdown-toggle.btn-warning.focus, .open>.dropdown-toggle.btn-warning:focus,
	.open>.dropdown-toggle.btn-warning:hover {
	background-color: #C88514;
	color: #1B1B1D;
	border: 1px solid #8889FD;
}

/***************************************************/
/* btn-warning-light ***********************************/
/***************************************************/
.btn.btn-warning-light {
	background-color: #FFFFFF;
	color: #FAA619;
	border: 1px solid #FFFFFF;
}

.btn.btn-warning-light.focus, .btn.btn-warning-light:focus {
	background-color: #F6F7F8;
	color: #FAA619;
	border: 1px solid #FAA619;
}

.btn.btn-warning-light:hover {
	background-color: #F6F7F8;
	color: #FAA619;
	border: 1px solid #FAA619;
}

.btn.btn-warning-light.active, .btn.btn-warning-light:active, .open>.dropdown-toggle.btn-warning-light
	{
	background-color: #F6F7F8;
	color: #FAA619;
	border: 1px solid #FAA619;
}

.btn.btn-warning-light.active.focus, .btn.btn-warning-light.active:focus,
	.btn.btn-warning-light.active:hover, .btn.btn-warning-light:active.focus,
	.btn.btn-warning-light:active:focus, .btn.btn-warning-light:active:hover,
	.open>.dropdown-toggle.btn-warning-light.focus, .open>.dropdown-toggle.btn-warning-light:focus,
	.open>.dropdown-toggle.btn-warning-light:hover {
	background-color: #F6F7F8;
	color: #FAA619;
	border: 1px solid #FAA619;
}

/***************************************************/
/* btn - info ***********************************/
/***************************************************/
.btn.btn-info {
	background-color: #2870EC;
	color: #FFFFFF;
	border: 1px solid #2870EC;
}

.btn.btn-info.focus, .btn.btn-info:focus {
	background-color: #2870EC;
	color: #FFFFFF;
	border: 1px solid #8889FD;
}

.btn.btn-info:hover {
	background-color: #0045BC;
	color: #FFFFFF;
	border: 1px solid #0045BC;
}

.btn.btn-info.active, .btn.btn-info:active, .open>.dropdown-toggle.btn-info
	{
	background-color: #0045BC;
	color: #FFFFFF;
	border: 1px solid #0045BC;
}

.btn.btn-info.active.focus, .btn.btn-info.active:focus, .btn.btn-info.active:hover,
	.btn.btn-info:active.focus, .btn.btn-info:active:focus, .btn.btn-info:active:hover,
	.open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus,
	.open>.dropdown-toggle.btn-info:hover {
	background-color: #0045BC;
	color: #FFFFFF;
	border: 1px solid #8889FD;
}

/***************************************************/
/* btn-info-light ***********************************/
/***************************************************/
.btn.btn-info-light {
	background-color: #FFFFFF;
	color: #2870EC;
	border: 1px solid #FFFFFF;
}

.btn.btn-info-light.focus, .btn.btn-info-light:focus {
	background-color: #F6F7F8;
	color: #2870EC;
	border: 1px solid #2870EC;
}

.btn.btn-info-light:hover {
	background-color: #F6F7F8;
	color: #2870EC;
	border: 1px solid #2870EC;
}

.btn.btn-info-light.active, .btn.btn-info-light:active, .open>.dropdown-toggle.btn-info-light
	{
	background-color: #F6F7F8;
	color: #2870EC;
	border: 1px solid #2870EC;
}

.btn.btn-info-light.active.focus, .btn.btn-info-light.active:focus, .btn.btn-info-light.active:hover,
	.btn.btn-info-light:active.focus, .btn.btn-info-light:active:focus,
	.btn.btn-info-light:active:hover, .open>.dropdown-toggle.btn-info-light.focus,
	.open>.dropdown-toggle.btn-info-light:focus, .open>.dropdown-toggle.btn-info-light:hover
	{
	background-color: #F6F7F8;
	color: #2870EC;
	border: 1px solid #2870EC;
}

/***************************************************/
/* btn - danger ***********************************/
/***************************************************/
.btn.btn-danger {
	background-color: #ED0B0B;
	color: #FFFFFF;
	border: 1px solid #ED0B0B;
}

.btn.btn-danger.focus, .btn.btn-danger:focus {
	background-color: #ED0B0B;
	color: #FFFFFF;
	border: 1px solid #8889FD;
}

.btn.btn-danger:hover {
	background-color: #7D0404;
	color: #FFFFFF;
	border: 1px solid #7D0404;
}

.btn.btn-danger.active, .btn.btn-danger:active, .open>.dropdown-toggle.btn-danger
	{
	background-color: #7D0404;
	color: #FFFFFF;
	border: 1px solid #7D0404;
}

.btn.btn-danger.active.focus, .btn.btn-danger.active:focus, .btn.btn-danger.active:hover,
	.btn.btn-danger:active.focus, .btn.btn-danger:active:focus, .btn.btn-danger:active:hover,
	.open>.dropdown-toggle.btn-danger.focus, .open>.dropdown-toggle.btn-danger:focus,
	.open>.dropdown-toggle.btn-danger:hover {
	background-color: #7D0404;
	color: #FFFFFF;
	border: 1px solid #8889FD;
}

/***************************************************/
/* btn-danger-light ***********************************/
/***************************************************/
.btn.btn-danger-light {
	background-color: #FFFFFF;
	color: #ED0B0B;
	border: 1px solid #FFFFFF;
}

.btn.btn-danger-light.focus, .btn.btn-danger-light:focus {
	background-color: #F6F7F8;
	color: #ED0B0B;
	border: 1px solid #8889FD;
}

.btn.btn-danger-light:hover {
	background-color: #F6F7F8;
	color: #ED0B0B;
	border: 1px solid #E1E2E5;
}

.btn.btn-danger-light.active, .btn.btn-danger-light:active, .open>.dropdown-toggle.btn-danger-light
	{
	background-color: #F6F7F8;
	color: #ED0B0B;
	border: 1px solid #E1E2E5;
}

.btn.btn-danger-light.active.focus, .btn.btn-danger-light.active:focus,
	.btn.btn-danger-light.active:hover, .btn.btn-danger-light:active.focus,
	.btn.btn-danger-light:active:focus, .btn.btn-danger-light:active:hover,
	.open>.dropdown-toggle.btn-danger-light.focus, .open>.dropdown-toggle.btn-danger-light:focus,
	.open>.dropdown-toggle.btn-danger-light:hover {
	background-color: #F6F7F8;
	color: #ED0B0B;
	border: 1px solid #8889FD;
}

/***************************************************/
/* btn - stop action ***********************************/
/***************************************************/
.btn-fill-container, .search-address li a {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- ADDRESS SEARCH DROPDOWN ---------------------------------------------- */

.search-address-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	margin: -6px 0 6px 0;
	background-color: var(--sidebar-accent-soft);
	border-top-left-radius: 0.6em;
	border-top-right-radius: 0.6em;
	border-bottom: 1px solid rgba(97, 98, 241, 0.16);
}

.search-address-label {
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sidebar-accent);
}

.search-address-input.form-control {
	padding: 6px 10px;
	height: auto;
	border: 1px solid rgba(97, 98, 241, 0.25);
	border-radius: 6px;
	background-color: #fff;
	box-shadow: none;
	transition: border-color var(--sidebar-transition), box-shadow var(--sidebar-transition);
}

.search-address-input.form-control:focus {
	outline: none;
	border-color: var(--sidebar-accent);
	box-shadow: 0 0 0 3px rgba(97, 98, 241, 0.15);
}

/* Toggle button — switch-style indicator so the on/off state is obvious. */
.search-address-paid-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 6px 10px;
	border: 1px solid rgba(97, 98, 241, 0.18);
	border-radius: 6px;
	background-color: #fff;
	color: #2d2f3a;
	cursor: pointer;
	transition: border-color var(--sidebar-transition), color var(--sidebar-transition);
}

.search-address-paid-toggle:hover,
.search-address-paid-toggle:focus {
	outline: none;
	border-color: var(--sidebar-accent);
}

.search-address-paid-toggle.is-active {
	border-color: var(--sidebar-accent);
	color: var(--sidebar-accent);
}

.search-address-paid-switch {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 16px;
	border-radius: 999px;
	background-color: rgba(20, 18, 42, 0.18);
	flex-shrink: 0;
	transition: background-color var(--sidebar-transition);
}

.search-address-paid-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(20, 18, 42, 0.3);
	transition: transform var(--sidebar-transition);
}

.search-address-paid-toggle.is-active .search-address-paid-switch {
	background-color: var(--sidebar-accent);
}

.search-address-paid-toggle.is-active .search-address-paid-knob {
	transform: translateX(14px);
}

.search-address-paid-text {
	font-weight: 500;
}

/* Results list — section labels are compact and styled, no inline list-style. */
.search-address-results {
	padding: 0;
}

.search-address {
	padding-inline-start: 0;
	margin: 0;
	list-style: none;
}

.search-address-section-label {
	padding: 6px 14px 2px 14px;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sidebar-text-muted);
	list-style: none;
}

.btn-text-left {
	text-align: left;
}

.btn.reservared-vehicle {
	background: #007782;
	color: #FFFFFF;
}


/**************
***FLEX-LIST***
**************/

.flex-list {
	width: 100%;
	max-height: 400px;
	overflow: auto;
	padding: 8px 0px 8px 0px;
}

.flex-list-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	align-items: center;
	border-radius: 8px;
	padding: 8px 0px;
}

.btn-icon-only span {
	display: none;
}

.flex-list-item {
	flex: 2; 
}

.flex-list-item-sm {
	flex: 1; 
}

.flex-list-item-lg {
	flex: 3; 
}
/***************/


.children-inline div {
	width: inherit;
	display: inline;
}

.inline {
	display: inline-flex;
	align-items: center;
}

.inline-right {
	display: inline-flex;
	align-items: center;
	justify-content: right;
}

collapsible right-buttons, collapsible ng-transclude[ng-transclude-slot="rightButtons"] {
	display: contents;
}

/***************
***FLEX-BLOCK***
***************/

.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.flex-container-nowrap {
	flex-wrap: nowrap;
}

.flex-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex: 2 1;
	min-width: 36px;
	padding: 0px 2px;
	/*overflow: hidden;*/
}

.flex-item-space-between {
	justify-content: space-between;
}

.flex-item-double-width {
	flex-grow: 2;
}

.flex-item-triple-width {
	flex-grow: 3;
}

.pair {
	display: flex;
	justify-content: center;
	align-items: center;
}

.pair label {
	flex: 1;
	text-align: right;
	padding-right: 10px;
}

.pair .flex-item, .pair triple-price-field, .pair .field-no-vertical-space {
	flex: 1;
	text-align: left;
}

.pair>* {
	margin: 2px;
	padding: 2px;
	word-break: break-word;
}

.flex {
	display: flex;
	width: 100%;
	flex-wrap: nowrap;
	align-items: center;  
	justify-content: space-between;
}

form .flex {
	padding-top: 0px;
}

.dropdown-menu {
	padding: 6px 0;
	font-size: inherit;
	cursor: default;
	min-width: 260px;
	max-width: calc(100vw - 16px);
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	overflow-x: hidden;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(20, 18, 42, 0.08);
	border-radius: 0.6em;
	box-shadow:
		0 0.4rem 0.8rem rgba(20, 18, 42, 0.08),
		0 1.6rem 3.2rem rgba(20, 18, 42, 0.14),
		0 0 0 1px rgba(97, 98, 241, 0.04);
	z-index: 1100;
}

.dropdown-menu .divider,
.dropdown-menu li.divider {
	height: 1px;
	margin: 4px 10px;
	background-color: rgba(20, 18, 42, 0.08);
	overflow: hidden;
}

/* Narrow phones: dropdowns shrink so they don't push off-screen, options get
   tighter padding so they remain tap-friendly without overflowing horizontally. */
@media (max-width: 480px) {
	.dropdown-menu {
		min-width: calc(100vw - 16px);
		max-width: calc(100vw - 16px);
	}
	.dropdown-menu [dropdown-option] {
		padding: 9px 12px;
	}
	.field-li-input,
	.search-address-header {
		padding: 10px;
	}
}

/* === Unified dropdown option styling ===================================
   Every menu row carrying [dropdown-option] (a) is a full-width flex row,
   (b) uses a fixed icon column, (c) reveals an accent stripe on hover/active,
   (d) never changes its background, (e) inherits .btn .btn-default from the
   directive so .btn.disabled { pointer-events:none } continues to work.

   :is() collapses the icon-class / state-pseudo / destructive-trigger lists
   that would otherwise repeat 4–6 times across the rule block. */

.dropdown-menu > li {
	display: block;
}

/* Shared selector: every standard option row + nested submenu-toggle row uses
   the same layout. Bound to a CSS variable for easy reuse below. */
.dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle) {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 7px 14px;
	margin: 0;
	border: 0;
	border-radius: 0;
	text-align: left;
	white-space: nowrap;
	background-color: transparent;
	color: #2d2f3a;
	transition: color var(--sidebar-transition);
}

/* Left accent stripe slides in on hover — visual cue without changing background. */
.dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background-color: transparent;
	border-radius: 0 2px 2px 0;
	transform: scaleY(0);
	transition: transform var(--sidebar-transition), background-color var(--sidebar-transition);
}

/* Content wrappers (delete/clone/download/show-file) become transparent in
   the flex layout so their inner icon + label align identically to inline
   options. */
.dropdown-menu [dropdown-option] > :is(delete-button-content, clone-button-content, download-button-content, show-file-button-content) {
	display: contents;
}

.dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle) :is(i, .fa, .fas, .far, .fab, .glyphicon) {
	width: 1.5em;
	margin-right: 8px;
	padding: 0;
	text-align: center;
	flex-shrink: 0;
	transition: transform var(--sidebar-transition);
}

/* Safety net: options shipped without an icon still align with icon-having
   rows. Indent the label by the same width the icon column would occupy. */
.dropdown-menu [dropdown-option]:not(:has(> :is(i, .fa, .fas, .far, .fab, .glyphicon, delete-button-content, clone-button-content, download-button-content, show-file-button-content, .status-pill))) {
	padding-left: calc(14px + 1.5em + 8px);
}

/* Hover / focus / keyboard-active share the same cue: accent text, stripe
   slides in, icon nudges 2px right. */
.dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle):is(:hover, :focus, :active, .active) {
	background-color: transparent;
	border: 0;
	color: var(--sidebar-accent);
}

.dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle):is(:hover, :focus, :active, .active)::before {
	background-color: var(--sidebar-accent);
	transform: scaleY(1);
}

.dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle):is(:hover, :focus, .active) :is(i, .fa, .fas, .far, .fab, .glyphicon) {
	transform: translateX(2px);
}

/* Backend marked an option as unavailable via getActionClass → "disabled"
   or wrapping <li> got .disabled (e.g. field directive form-invalid state).
   .btn.disabled (style.css:1035) blocks pointer-events at runtime; here we
   add the visual treatment so the user reads "you cannot pick this". */
.dropdown-menu :is([dropdown-option]:is(.disabled, [disabled]), li.disabled > [dropdown-option]) {
	color: #9ea0aa;
	background-color: transparent;
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.dropdown-menu :is([dropdown-option]:is(.disabled, [disabled]), li.disabled > [dropdown-option])::before {
	display: none;
}

.dropdown-menu :is([dropdown-option]:is(.disabled, [disabled]), li.disabled > [dropdown-option]) :is(i, .fa, .fas, .far, .fab, .glyphicon) {
	transform: none;
}

/* Status-pill inside a disabled option loses its color so it doesn't look
   selectable — keep the chip shape, drop the saturation. */
.dropdown-menu :is([dropdown-option]:is(.disabled, [disabled]), li.disabled > [dropdown-option]) .status-pill {
	background-color: #f1f1f3;
	color: #9ea0aa;
	border-color: #d4d6dd;
	filter: grayscale(100%);
}

/* Destructive trigger: explicit .dropdown-option-danger class, the
   delete-button-content tag, or a trash / eraser icon. */
.dropdown-menu [dropdown-option]:is(.dropdown-option-danger, :has(delete-button-content), :has(> .fa-trash-can), :has(> .fa-trash), :has(> .fa-eraser)) {
	color: #dc3545;
}

.dropdown-menu [dropdown-option]:is(.dropdown-option-danger, :has(delete-button-content), :has(> .fa-trash-can), :has(> .fa-trash), :has(> .fa-eraser)):is(:hover, :focus) {
	color: #a71d2a;
}

.dropdown-menu [dropdown-option]:is(.dropdown-option-danger, :has(delete-button-content), :has(> .fa-trash-can), :has(> .fa-trash), :has(> .fa-eraser)):is(:hover, :focus)::before {
	background-color: #dc3545;
}

/* Primary action (save / add-new — recognised by the floppy-disk icon) wears
   the accent color in its resting state so the user sees it as the confirming
   choice in the menu. */
.dropdown-menu [dropdown-option]:has(> .fa-floppy-disk) {
	color: var(--sidebar-accent);
	font-weight: 500;
}

.open>.dropdown-menu>li>a {
	font-size: inherit;
}

/* Returned-values block: enum lists and search results share the same wrapper
   styling — a soft tinted card so the user reads them as one coherent results
   area. Items inside still use the unified [dropdown-option] hover/active
   treatment (left accent stripe + icon nudge). */
.dropdown-menu .options,
.dropdown-menu .search-address {
	margin: 4px 8px;
	padding: 4px 0;
	list-style: none;
	background-color: rgba(20, 18, 42, 0.04);
	border-radius: 6px;
	overflow: hidden;
}

.dropdown-menu .options > li,
.dropdown-menu .search-address > li {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Enum image (small svg next to the value label) doesn't get the icon-column
   treatment — keep it tight to the text. */
.dropdown-menu .options [dropdown-option] > .enum-image {
	width: auto;
	height: 1em;
	margin-right: 8px;
	flex-shrink: 0;
}

/* Empty results card disappears so we don't show a blank tinted block. */
.dropdown-menu .options:empty,
.dropdown-menu .search-address:empty {
	display: none;
}

/* Status updater menu — each row is a unified dropdown option containing a
   colored "pill" that previews the destination status display color. */
.dropdown-menu.status-updater-menu [dropdown-option]:hover,
.dropdown-menu.status-updater-menu [dropdown-option]:focus,
.dropdown-menu.status-updater-menu [dropdown-option].active {
	background-color: rgba(97, 98, 241, 0.08);
}

.status-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 3px 12px;
	border-radius: 4px;
	border: 1px solid;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

/* Color tokens — same palette as .btn.btn-status.active.X used for the displayed
   value, so each option previews exactly what the row will look like once picked. */
.status-pill.grey-light            { background-color: #F1F1F1; color: #4B4C51; border-color: #4B4C51; }
.status-pill.very-light-cyan       { background-color: #DCF2F2; color: #046B6B; border-color: #046B6B; }
.status-pill.light-cream-yellow    { background-color: #FAF1E0; color: #B54708; border-color: #B54708; }
.status-pill.light-mint-green      { background-color: #E4FCDF; color: #047B52; border-color: #A5E2A9; }
.status-pill.light-pink-white      { background-color: #F9EDFB; color: #4A148C; border-color: #4A148C; }
.status-pill.light-lemon-yellow    { background-color: #FEF9DE; color: #B95503; border-color: #B95503; }
.status-pill.light-sky-blue        { background-color: #EAF0FD; color: #001C64; border-color: #001C64; }
.status-pill.light-baby-blue       { background-color: #E8F5FF; color: #175CD3; border-color: #175CD3; }
.status-pill.light-salmon-pink     { background-color: #FEEEEE; color: #B91E15; border-color: #B91E15; }
.status-pill.light-blue-green      { background-color: #e6f7ff; color: #005780; border-color: #005780; }
.status-pill.light-grayish-lavender { background-color: #f1f1f1; color: #404040; border-color: #404040; }
.status-pill.light-pastel-green    { background-color: #e4fcdf; color: #1c750b; border-color: #1c750b; }

/* Inside the results card, hover/active gets a soft full-row background tint
   so the whole option reads as highlighted (the left accent stripe alone was
   too subtle — looked like the cue was only at the edge). */
.dropdown-menu .options [dropdown-option]:hover,
.dropdown-menu .options [dropdown-option]:focus,
.dropdown-menu .options [dropdown-option].active,
.dropdown-menu .search-address [dropdown-option]:hover,
.dropdown-menu .search-address [dropdown-option]:focus,
.dropdown-menu .search-address [dropdown-option].active {
	background-color: rgba(97, 98, 241, 0.10);
}

/* Nested dropdown-toggle (e.g. the translator picker inside transport-message)
   blends into the surrounding options instead of looking like a stray
   bootstrap button. It reuses the [dropdown-option] body styling via the
   shared :is() selectors above; only the chevron suffix and submenu-open
   accent are unique to it. */
.dropdown-menu .unt-dropdown {
	display: block;
}

.dropdown-menu .unt-dropdown > .dropdown-toggle {
	box-shadow: none;
}

.dropdown-menu .unt-dropdown > .dropdown-toggle::after {
	content: '\f054';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-left: auto;
	font-size: 0.75em;
	opacity: 0.4;
	flex-shrink: 0;
	transition: transform var(--sidebar-transition), opacity var(--sidebar-transition);
}

.dropdown-menu .unt-dropdown.open > .dropdown-toggle {
	color: var(--sidebar-accent);
}

.dropdown-menu .unt-dropdown > .dropdown-toggle:is(:hover, :focus)::after,
.dropdown-menu .unt-dropdown.open > .dropdown-toggle::after {
	opacity: 1;
	transform: translateX(2px);
}

.content-box {
	padding: 4px 8px 4px 8px;
	margin: 1px 8px 8px 8px;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.content-box-details-topbar {
	padding: 4px;
	background-color: #d4d4d4;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	/*box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;*/
}

.content-box-section {
	border: 1px solid transparent;
}

.content-box-section:hover {
	border: 1px solid #aaa;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.content-box-header {
	display: inline-flex;
	align-items: center;
	overflow: visible;
	width: 100%;
	border: 1px solid transparent;
	padding: 4px 8px;
	min-height: 30px;
}

.content-box-header:hover {
	text-decoration: underline;
	/*background: rgba(0, 0, 0, 0.1);*/
}

.highlighted-section, .normal-section {
	border-radius: 8px;
	padding: 8px;
	margin: 4px 0px;
}

.highlighted-section {
	background: var(--highlight-background-color);
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.content-box>table {
	width: 100%;
	overflow: auto;
}

.content-stop-section {
	display: block;
}

.content-stop-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: #fff;
	border-radius: 4px;
	border-bottom: 1px solid #aaa;
}

.content-stop {
	background-color: #fff;
	padding: 8px;
	border-radius: 8px;
	margin: 2px 4px;
}

.current-route {
	background-color: #BBDFC5;
}

.late-possibility {
	background-color: #f89d9d;
	border-color: red;
}

.past-route {
	background-color: #f2f2f2;
	font-style: italic;
}

button.route-btn {
	margin: 1px;
}

/* !important overrides Bootstrap .btn states (hover/focus/active) */
button.route-btn.route-btn-past {
	opacity: 0.55;
	font-style: italic !important;
}

button.route-btn.route-btn-current {
	background-color: #fff !important;
	color: #000 !important;
	font-weight: bold !important;
	border: 1px solid #000 !important;
}

button.route-btn.route-btn-future {
	opacity: 0.55;
}

button.route-btn > .badge {
	background-color: #888;
}

.route-row-td {
	text-align: center;
	padding: 4px 8px;
}

.route-time-reserve {
	margin: 0 4px;
	padding: 2px 6px;
	border-radius: 8px;
	white-space: nowrap;
}

.route-progress {
	height: 16px;
	margin: 4px auto 0 auto;
	max-width: 80%;
	position: relative;
}

.route-progress-label {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 16px;
	color: #000;
}

.past-route .form-value {
	color: #444;
	font-style: italic;
}

.content-stop-internal-box {
	padding: 4px 8px;
	border-radius: 8px;
	background: var(--highlight-background-color);
	margin: 4px 8px;
}

/*--------------------*/
/*-FILTRY-------------*/
/*--------------------*/

.filter-header {
	display: flex;
	padding: 6px 8px;
	gap: 6px;
	align-items: center;
	flex-wrap: nowrap;
	border-radius: 4px;
	min-width: 0;
}

.filter-header > .btn,
.filter-header > .saved-filters-section {
	flex: 0 0 auto;
	white-space: nowrap;
}

.filter-header > .universal-search-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

.filter-buttons {
	display: inline-flex;
	background-color: #79a6d2;
	margin: 1px;
	padding: 4px;
	border-radius: 5px;
}

.btn-xs {
	line-height: unset;
    padding: 1px;
}

.filter-block {
	z-index: 5;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	margin: 0px 0px 8px 0px;
}

.list-block {
	overflow: scroll;
	height: 100%;
}

.list-first-load-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px 0;
}

.list-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid #f0f0f0;
	border-top: 4px solid #eb6f4d;
	border-radius: 50%;
	animation: list-spin 1s linear infinite;
}

@keyframes list-spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.list-empty-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 0;
	gap: 12px;
	color: #aaaaaa;
}

.list-empty-message i {
	font-size: 36px;
}

.filter-box {
	min-height: auto;
	background-color: #e5e3f1;
	border-radius: 4px;
}

.saved-filters-section {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
	padding: 2px 4px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.saved-filters-dropdown {
	display: inline-block;
}

.saved-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 240px;
}

.saved-filters-current {
	font-weight: 600;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.saved-filters-dirty {
	color: #d97706;
	margin-left: 2px;
	font-weight: bold;
}

.saved-filters-menu {
	min-width: 200px;
	max-height: 320px;
	overflow-y: auto;
	padding: 4px 0;
}

.saved-filters-menu > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
}

.saved-filters-menu > li.active > a {
	background-color: #e5e3f1;
	color: #333;
	font-weight: 600;
}

.saved-filters-check {
	color: #28a745;
	font-size: var(--font-sm);
	flex: 0 0 12px;
}

.saved-filters-check.invisible {
	visibility: hidden;
}

.saved-filters-empty > a {
	color: #999;
	font-style: italic;
	cursor: default;
}

.saved-filters-plus {
	font-size: var(--font-xs);
	margin-left: 2px;
	vertical-align: super;
}

/* Save filter dialog */
.save-filter-dialog {
	max-width: 480px;
	width: 90vw;
}

.save-filter-dialog-title {
	margin: 0 0 16px 0;
	font-size: 18px;
	font-weight: 600;
}

.save-filter-tiles {
	display: flex;
	gap: 12px;
	margin: 16px 0;
	flex-wrap: wrap;
}

.save-filter-tile {
	flex: 1 1 140px;
	min-width: 0;
	padding: 20px 12px;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	background-color: #fff;
	user-select: none;
}

.save-filter-tile:hover {
	border-color: #79a6d2;
	background-color: #f4f8fc;
}

.save-filter-tile.active {
	border-color: #5a8ec3;
	background-color: #e5e9f1;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.save-filter-tile.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.save-filter-tile-icon {
	font-size: 28px;
	color: #5a8ec3;
	margin-bottom: 8px;
	display: block;
}

.save-filter-tile-title {
	font-weight: 600;
	color: #333;
	font-size: 14px;
}

.save-filter-form {
	margin-top: 12px;
}

.save-filter-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: #444;
}

.save-filter-form .form-control {
	width: 100%;
}

.save-filter-warning {
	margin-top: 8px;
	padding: 8px 12px;
	background-color: #fff3cd;
	border-left: 3px solid #f59e0b;
	color: #92400e;
	border-radius: 4px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.universal-search-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 200px;
	min-width: 0;
}

.universal-search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 8px;
	line-height: 1.5;
}

.universal-search-btn {
	padding: 4px 10px;
	flex: 0 0 auto;
}

.filter-form-box {
	padding: 0;
}

/* Filter / sort row: mobile-first (stacked), inline on tablets+ */
.filter-separator {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-radius: 6px;
	padding: 6px 10px;
	width: 100%;
	margin: 2px 0;
	transition: background-color 0.3s ease;
	background-color: rgba(255, 255, 255, 0.5);
}

.filter-separator:hover {
	background-color: #d1cce6;
}

.filter-row-label {
	font-weight: 600;
	color: #333;
	line-height: 1.3;
	font-size: var(--font-xs);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.filter-row-label label {
	margin: 0;
}

.filter-row-selector {
	flex: 0 0 auto;
}

.filter-row-value {
	flex: 1 1 auto;
	min-width: 0;
}

.filter-row-actions {
	display: flex;
	gap: 4px;
	flex-wrap: nowrap;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.filter-row-actions .btn {
	min-width: 36px;
	min-height: 36px;
	padding: 6px 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.filter-row-value-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.filter-row-value-actions .filter-row-value {
	flex: 1 1 auto;
	min-width: 0;
}

.sortable-handle {
	flex: 0 0 auto;
	cursor: grab;
	color: #888;
	padding: 2px 6px;
	display: inline-flex;
	align-items: center;
	user-select: none;
	-webkit-user-select: none;
}

.sortable-handle:hover {
	color: #333;
}

.sortable-handle:active {
	cursor: grabbing;
}

.filter-separator.sortable-dragging {
	opacity: 0.4;
}

.filter-separator.sortable-dragover-before {
	box-shadow: inset 0 3px 0 0 #6f5fb3;
}

.filter-separator.sortable-dragover-after {
	box-shadow: inset 0 -3px 0 0 #6f5fb3;
}

@media (min-width: 768px) {
	.filter-separator {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
		padding: 3px 10px;
	}
	.filter-row-label {
		flex: 0 0 20%;
		max-width: 20%;
	}
	.filter-row-selector {
		flex: 0 0 24%;
		max-width: 24%;
	}
	.filter-row-value-actions {
		flex: 1 1 30%;
		min-width: 200px;
	}
	.filter-row-actions .btn {
		min-width: 28px;
		min-height: 28px;
		padding: 4px 8px;
	}
}

.between-range {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	width: 100%;
}

.between-range-pair {
	display: flex;
	align-items: center;
	gap: 3px;
	flex: 1 1 0;
	min-width: 0;
}

.between-range-pair > .form-control,
.between-range-pair > unt-datetime-picker {
	flex: 1 1 auto;
	min-width: 0;
}

.between-range-label {
	font-weight: normal;
	margin: 0;
	color: #666;
	white-space: nowrap;
	font-size: var(--font-sm);
	flex: 0 0 auto;
	padding: 0 2px;
}

.multiselect-fullwidth {
	width: 100%;
}

.multivalue-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.multivalue-row {
	display: flex;
	gap: 4px;
	align-items: center;
}

.multivalue-row > .form-control {
	flex: 1 1 auto;
	min-width: 0;
}

.multivalue-row > .btn {
	flex: 0 0 auto;
}

.multiselect-badge-x {
	cursor: pointer;
	margin-left: 4px;
}

@keyframes filter-row-pulse {
	0%, 100% {
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0 0 0 0 transparent;
	}
	50% {
		background-color: var(--pulse-bg, #d1cce6);
		box-shadow: 0 0 0 var(--pulse-ring-width, 0) var(--pulse-ring-color, transparent);
	}
}

.filter-separator.filter-row-highlight {
	animation: filter-row-pulse 0.45s ease-in-out 2;
	--pulse-bg: #d1cce6;
}

.filter-separator.filter-row-highlight-duplicate {
	animation: filter-row-pulse 0.5s ease-in-out 3;
	--pulse-bg: #fef3c7;
	--pulse-ring-width: 2px;
	--pulse-ring-color: #f59e0b;
}

.filter-box-small .btn {
	margin: 1px 2px 1px 2px;
}

.content-box-header .form-control {
	overflow: hidden;
	text-overflow: ellipsis;
	padding: unset;
}

#filter-select {
	min-width: 200px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 5px;
	background-color: #fff;
	border: 1px solid #ddd;
	height: var(--form-default-size);
	padding: 2px 4px;
}

.filter-close-small {
	font-size: inherit;
	padding: 2px 8px;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.filter-close-small i {
	font-size: var(--font-sm);
}

/* New structured chip design for simplified filter bar */
.filter-chip,
.sort-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 4px 3px 10px;
	border-radius: 14px;
	font-size: var(--font-sm);
	line-height: 1.3;
	border: 1px solid transparent;
	margin: 0;
	max-width: 100%;
	white-space: nowrap;
}

.filter-chip {
	background: #e3f2fd;
	border-color: #90caf9;
	color: #0d47a1;
}

.sort-chip {
	background: #f3e5f5;
	border-color: #ce93d8;
	color: #4a148c;
}

.filter-chip-icon,
.sort-chip-icon {
	font-size: var(--font-xs);
	opacity: 0.65;
	flex: 0 0 auto;
}

.filter-chip-field,
.sort-chip-field {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.filter-chip-op {
	color: rgba(0,0,0,0.55);
	font-weight: normal;
	font-size: var(--font-sm);
	text-transform: lowercase;
}

.filter-chip-value {
	background: rgba(255,255,255,0.85);
	padding: 1px 7px;
	border-radius: 8px;
	font-weight: 500;
	color: #0d47a1;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.filter-chip-close,
.sort-chip-close {
	display: inline-flex;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	margin-left: 2px;
	transition: background 0.15s;
	flex: 0 0 auto;
}

.filter-chip-close:hover {
	background: rgba(13, 71, 161, 0.15);
}

.sort-chip-close:hover {
	background: rgba(74, 20, 140, 0.15);
}

.filter-chip-close i,
.sort-chip-close i {
	font-size: var(--font-xs);
}

.filter-box-small-active>div>table>thead {
	top: var(--filter-box-small-height);
}

.filter-box select.form-control {
	min-width: max-content;
	width: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-scroll-container,
.filter-scroll-container-sort {
	max-height: 360px;
	overflow: auto;
	padding: 2px 4px;
}

.filter-panels-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px;
}

.filter-panel,
.sort-panel {
	flex: 1 1 100%;
	min-width: 0;
	padding: 4px;
}

@media (min-width: 992px) {
	.filter-panel,
	.sort-panel {
		flex: 1 1 0;
		min-width: 0;
	}

	.filter-panels-wrapper.only-filters .filter-scroll-container,
	.filter-panels-wrapper.only-orders .filter-scroll-container-sort {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: 1fr 1fr;
		column-gap: 8px;
		align-content: start;
	}
}

.filter-panel-header,
.sort-panel-header {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: #d2cce6;
	padding: 6px 10px;
	border-radius: 4px;
	flex-wrap: nowrap;
}

.filter-panel-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	flex: 0 0 auto;
	color: #333;
	white-space: nowrap;
}

.filter-panel-title::after {
	content: ":";
}

.filter-panel-header > md-autocomplete {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

.filter-bar-presentation {
	display: flex;
	flex-wrap: wrap;
	padding: 4px 6px;
	gap: 4px;
}

.filter-bar-section {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
}

.map-box {
	height: 500px;
	z-index: 1 !important;
}

#list-tab-section .map-box {
	height: calc(100vh - 80px);
	overflow: hidden;
}

.map-control {
	padding-left: 5px;
	height: 30px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: left;
}

.contractor-box-black-list {
	background: #ff0000;
	color: #fff;
}

.list-view-checkbox {
	padding: 2px 5px 2px 5px;
}

.item-block {
	min-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-width) - 24px);	
	max-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-width) - 24px);
	overflow: hidden;
	margin: 8px 12px 24px 12px;
	background-color: #ffffff;
	/*border: 2px solid var(--main-background-color); */
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	border-radius: 8px;
}

.item-block:hover {
	box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.sidebar-hide .item-block {
	min-width: calc(100vw - var(--scrollbar-width) - 24px);
	max-width: calc(100vw - var(--scrollbar-width) - 24px);
}

.sidebar-mini .item-block {
	min-width: calc(100vw - var(--sidebar-mini-width) - var(--scrollbar-width) - 24px);
	max-width: calc(100vw - var(--sidebar-mini-width) - var(--scrollbar-width) - 24px);
}

.item-block-header {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 1px 1px;
	/*background-color: #D3D3EE;*/
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;	
}

.item-block-internal-list {
	border-top: 1px solid var(--main-background-color);
}

.item-block-data {
	padding: 4px;
	border-radius: 8px;
}

[colspan-table] tr.ng-repeat-end td {
    position: relative;
}

[colspan-table] .item-block-collapsed-wrapper {
    display: flex;
    justify-content: flex-start;
    position: sticky;
    left: 0;
    overflow: hidden;
    width: calc(100vw - var(--sidebar-width));
}

.sidebar-mini [colspan-table] .item-block-collapsed-wrapper {
    width: calc(100vw - var(--sidebar-mini-width));
}

.sidebar-hide [colspan-table] .item-block-collapsed-wrapper {
    width: 100vw;
}

.item-block-collapsed {
	margin: 8px;
	padding: 8px;
	border-radius: 8px;
	background-color: var(--highlight-background-color);
	width: 100%;
}

.item-block-internal-box {
	padding: 4px;
}

/*
.item-block-internal-box:hover {
	border-color: #5c5c8a;
}*/
.item-block-internal-box-header {
	width: 100%;
	padding: 4px 2px;
	border-bottom: 1px solid;
}

.item-block-internal-box-data {
	margin: 8px;
}

.view-list-separator {
	border-right: 10px solid var(--main-background-color);
	
}

.short .app-content-data {
	overflow: auto;
}

.details-dropdown .dropdown-toggle {
	display: none;
}

.details-dropdown .dropdown-menu {
	display: contents;
	position: static;
}

.details-dropdown .dropdown-menu>li {
	display: contents;
}

.details-dropdown .dropdown-menu>li>a {
	display: inline-block;
}

.details-list-view .app-content-data {
	height: unset;
	max-height: 500px;
	overflow: auto;
	display: block;
	width: 100%;
}

.content-box-modal-list {
	max-height: calc(100vh - 350px);
	display: block;
	overflow: auto;
}

.content-box-modal-list.financial-settlement-modal-list {
	min-height: 100px;
	max-height: calc(100vh - 600px);
}

.control-readonly {
	background: #CCCCFF;
}

.active-input {
	color: black;
}

.highlight-text {
	font-weight: bold;
}

.bold-text .form-value {
	font-weight: bold;
	text-decoration: underline;
}

.content-box .app-content-footer {
	margin: 4px;
	background-color: unset;
}

.required {
	color: red;
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.bold {
	font-weight: 700;
}

.highlight-green {
	color: #276F55;
}

.table>tbody>tr.is-processed>td {
	background: #eef7f1;
	color: #000000;
	font-weight: bold;
}

.table>tbody>tr.sms-not-read>td {
	background: #eef7f1;
	color: #000000;
	font-weight: bold;
}

.table>tbody>tr.active>td {
	background: #AAAAAA;
	color: #000000;
	font-weight: bold;
}

/***************************************************/
/* SMS MESSAGE CHAT*********************************/
/***************************************************/
.messages-box {
	height: 250px;
	overflow-y: auto;
	overflow-x: hidden;
}

.sms-not-read {
	background: #eef7f1;
	color: #000000;
	font-weight: bold;
}

.transport-message .sms-not-read {
	background: #eef7f1;
	color: #000000;
	font-weight: bold;
}

.public-chat-button {
	position: fixed;
	bottom: 55px;
	right: 0px;
	z-index: 1001;
	min-width: 370px;
	border-radius: 0px;
}

.public-chat-box {
	display: none;
	position: fixed;
	bottom: 55px;
	right: 0px;
	z-index: 1002;
	background-color: #ffffff;
	border: 1px solid #0c1d3a;
	width: 370px;
	max-width: 95%;
}

.public-field {
	min-height: var(--form-default-size);
}

table>tbody>tr.active-row-preview-opacity td {
	opacity: 0.65;
}

div.filter-separator div span.input-group-btn button {
	height: 34px;
}
/*
.app-content-data>.table-wrapper {
	height: calc(100% - var(--filter-box-height));
	overflow: auto;
	position: relative;
}

.app-content-data>.table-wrapper {
	height: calc(100% - var(--filter-box-height));
	overflow: auto;
	position: relative;
}

.content-box-modal-list>.table-wrapper {
	height: calc(100% - var(--filter-height-precentage)- 1.35%);
	overflow-y: auto;
}
*/
.date-picker-menu table>thead>tr>th {
	position: unset;
}

.dropdown.open>ul>li>a {
	margin: 0;
}

/****************
      CHAT
****************/
.chat-popup {
	display: block;
	position: fixed;
	right: 15px;
	bottom: 50px;
	z-index: 1002;
	background-color: #fff;
	width: 450px;
	max-width: calc(100vw - 100px);
	padding: 5px 5px 5px 5px;
	border: 2px solid #EEE;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 24px, rgba(0, 0, 0, 0.22) 0px
		10px 10px;
}

.chat-container {
	height: 500px;
	max-height: calc(100vh - 300px);
	overflow: auto;
}

.chat-popup .chat-input {
	border: solid 1px #ccc;
	border-radius: 10px;
	padding: 5px;
	width: 80%;
	min-height: 45px;
}

.chat-container ul {
	list-style: none;
	margin: 0;
}

.chat-container ul li {
	display: inline-block;
	clear: both;
	width: 80%;
}

.chat-container .received .chat-message, .chat-container .sent .chat-message
	{
	border-radius: 10px;
}

.chat-container .received {
	float: right;
	text-align: left
}

.chat-container .sent {
	float: left;
	text-align: left
}

.chat-message {
	margin: 5px 10px 15px 0;
}

.chat-container .sent .chat-message {
	background: #e6e6e6;
	color: #000000;
}

.chat-container .received .chat-message {
	background: #b2dfdb;
	color: #000;
}

.chat-message .message-read {
	background: #e6f4ff;
	color: #000;
	border-radius: 0px;
}

.chat-message-content {
	padding: 10px 10px 15px 10px;
	white-space: pre-line;
}

.public-chat-box .btn {
	border-radius: 0px;
}

/****************
   END OF CHAT
****************/
.md-dialog-container {
	z-index: 1200;
}

.dropdown-menu-offset {
	margin-top: 236px;
}

.dropdown-menu>li>ul, .dropdown-menu>li>unt-datetime-picker>ul {
	padding-left: 0;
	max-height: 300px;
	overflow: auto;
	overflow-x: hidden;
}

.dropdown-menu>.active>a {
	color: #000000;
	background-color: #FFFFFF;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
	color: #494BCF;
	background-color: #EFF0FF;
}

.dropdown-menu>li>ul>li>a {
	display: block;
}

input.no-arrows::-webkit-outer-spin-button, input.no-arrows::-webkit-inner-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

input.no-arrows[type=number] {
	-moz-appearance: textfield;
}

.text-info {
	color: unset;
}

.relationship-picker, .relationship-picker>option {
	font-family: var(--font-normal);
	margin: 0px 0px 0px 8px;
}

table table thead {
	position: unset;
}

.highlight-row {
	background-color: #DBDBDB;
}

.enum-image {
	width: 24px;
	height: 16px;
	object-fit: contain;
	border: 1px solid #f0f0f0;
	padding: 0px;
	margin-right: 4px;
	flex-shrink: 0;
}




/*--------------------------*/
/* FIELD - COLLECTION TABLE */
/*--------------------------*/

.element-collection-table {
	
}

.element-collection-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 4px;
}

.element-number {
    flex-shrink: 0;
    min-width: 30px;
}

.element-input {
    flex-grow: 1;
}

.element-input .form-control {
    width: 100%;
}

.element-action {
    flex-shrink: 0;
}

/*--------------------------*/

.anchor-body {
	padding: 0px 10px 0px 10px;
	margin-bottom: 1px;
}

.anchor-header {
	position: sticky;
	top: 0;
	padding: 10px;
	z-index: 5;
	overflow-y: auto;
	white-space: nowrap;
	padding: 4px;
	background-color: #2980b9;
	color: #FFF;
	display: flex;
	align-items: center;
	border-radius: 4px;
}

.anchor-freightOrder {
	background-color: #E67E22; /*#8E44AD*/
	color: #FFFFFF;
}

.anchor-freight {
	background-color: #2980B9;
	color: #FFFFFF;
}

.anchor-freight-realization {
	background-color: #27AE60;
	color: #FFFFFF;
}

.value-text-button {
	width: 100%;
	display: flex;
}

.value-text {
	width: 100%;
	margin-right: 2px;
}

.value-button {
	float: right;
	padding: 0px 0px 0px 5px;
}

/* MEDIA MAX 768 px */
@media ( min-width : 768px) {
	.modal-dialog {
		margin: 0px auto;
	}
}

/* MEDIA MAX 1200 px */
@media screen and (max-width: 1200px) {

	.flex-list-row {
		display: block;
		flex-wrap: wrap;
	}

	.flex-list-item {
		width: 100%;
		display: block;
	}
	.item-block .item-block-header, .pair {
		display: block;
		width: 100%;
	}
	.mobile-hide {
		display: none;
	}
	.mobile-show {
		display: block;
	}
	.app-content-header-buttons .btn:not([dropdown-option]) > span:not(.badge),
	.filter-header .btn:not([dropdown-option]) > span:not(.badge) {
		display: none;
	}
	.scrollable-stop-content {
		height: auto;
		overflow: auto;
	}
	.item-block {
		min-width: unset;
	}
	.wrapper {
		display: unset;
	}
	.app-content,
	.sidebar-mini .app-content,
	.sidebar-hide .app-content {
		width: 100vw;
	}
	#bottombar {
		max-width: unset;
	}
	#sidebar,
	.sidebar-mini #sidebar,
	.sidebar-hide #sidebar {
		display: block;
		position: fixed;
		top: var(--topbar-height);
		left: 0;
		height: calc(100vh - var(--topbar-height));
		z-index: 60;
		width: min(82vw, 32rem);
		box-shadow: 0 2rem 4.8rem rgba(0, 0, 0, 0.5);
		transition: transform var(--sidebar-transition), box-shadow var(--sidebar-transition);
	}
	.sidebar-hide #sidebar,
	.sidebar-mini #sidebar {
		transform: translateX(-100%);
		box-shadow: none;
	}
	/* backdrop while sidebar is open on mobile */
	body:not(.sidebar-hide):not(.sidebar-mini):not(.auth-page)::before {
		content: '';
		position: fixed;
		top: var(--topbar-height);
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.45);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		z-index: 55;
		animation: sidebar-backdrop-in var(--sidebar-transition) ease-out;
	}
}
/* END OF MEDIA MAX 1200 px */

@keyframes sidebar-backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media ( max-width : 991px) {
	.hide-on-narrow-screen {
		display: none;
	}
}

/*************************/
/** FREIGHT STOP STATUS **/
/*************************/

.vehicle-combination-work-current {
	font-weight: bold;
}

.stop-status-going-to {
	font-weight: bold;

}

.stop-status-is-on  {
	background-color: #95D7AE;
	font-weight: bold;
}

.stop-status-not-going-yet {
	background-color: white;
	font-weight: normal;
}

.stop-status-finished, .cargo-status-supplied
{
	font-style: normal;
	color: black;
	background-color: #f2f2f2;
}

/*******************/
/** PERIOD STATUS **/
/*******************/
.period-status-less-than-7-days {
	background-color: #cddae8;
	border: 0px solid #137ced;
	text-align: center;
	border-radius: 4px;
}

.period-status-exceeded {
	background-color: #ffcccc;
	border: 0px solid #f44336;
	text-align: center;
	border-radius: 4px;
}

/********************/
/** SUBSTATUS BAR* **/
/********************/
.substatus-bar {
	width: 100%;
	height: 4px;
	border-radius: 2px;
}

.status-bar-active {
	background-color: #408000;
}

.schedule-start-in-7-days {
	background-color: #005780;
}

/********************/
/** ACTIVE PREVIEW **/
/********************/
.item-block.active-preview {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
	background-color: var(--highlight-background-color);
}

.table .active-preview, .active-preview {
	border-bottom: 2px solid var(--main-background-color-darker);
	background-color: var(--highlight-background-color);
}

.active-preview table {
	background-color: rgba(91, 91, 91, 0);
	background-color: var(--highlight-background-color);
}

table.colored>tbody>tr.active-preview {
	background: rgba(91, 91, 91, 0.4);
	background-color: var(--highlight-background-color);
}

/********************/
/** FAVORITE ***** **/
/********************/
.favorite table {
	background-color: rgb(0, 255, 0);
}

/********************/
/** SELECTED****** **/
/********************/

/*************/
/** DASHBOARD **/
/*************/
.dashboard-panel {
	background-color: transparent;
	padding: 10px 10px 10px 10px;
	margin-top: 30px;
	border: none;
}

.dashboard-panel-body {
	background-color: #fff;
	height: 100%;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.panel-default>.panel-heading {
	color: #FFFFFF;
	background-color: #101419;
	border-color: transparent;
}

.panel-default>.panel-heading h2 {
	color: #FFFFFF;
}

.dashboard-panel-body .menu-suboption-content {
	display: flex;
}

.dashboard-panel-body .label-menu-short {
	display: block;
}

.dashboard-panel-body .label-menu-short, .dashboard-panel-body .content
	{
	margin-right: auto;
}

/********************/
/** ROW HIGHLIGHTS **/
/********************/
.row-danger {
	background-color: #ffcccc;
	border-bottom: 3px solid #f44336;
}

/*************/
/** UTILITY **/
/*************/
.float-right {
	float: right;
}

.list-without-dots {
	list-style: none;
	padding: 0px;
}

/****************/
/** ANIMATIONS **/
/****************/
.row.ng-enter,
.row.ng-enter.ng-enter-active,
.row.ng-leave,
.row.ng-leave.ng-leave-active,
tr[with-context-menu].ng-enter,
tr[with-context-menu].ng-enter-active,
tr.ng-enter,
tr.ng-enter.ng-enter-active,
.my-view.ng-enter,
.my-view.ng-enter.ng-enter-active,
.my-view.ng-leave,
.my-view.ng-leave.ng-leave-active {
	transition: none;
	opacity: 1;
	height: auto;
}

.justify-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.uib-timepicker, .uib-daypicker, .uib-monthpicker, .uib-yearpicker {
	padding: 8px;
	background: #fff;
}

.uib-timepicker {
	display: flex;
	justify-content: center;
}

.uib-daypicker table tr td:nth-of-type(1n+8) {
	display: none;
}

/* uib-datepicker buttons — chevrons and day cells live inside .dropdown-menu but
   are NOT [dropdown-option]; ensure their icons stay inline and rows align. */
.uib-daypicker .btn.btn-default,
.uib-monthpicker .btn.btn-default,
.uib-yearpicker .btn.btn-default {
	padding: 4px 6px;
	margin: 1px;
	border: 1px solid transparent;
	border-radius: 4px;
	background-color: transparent;
	color: #2d2f3a;
	box-shadow: none;
	transition: background-color var(--sidebar-transition), color var(--sidebar-transition), border-color var(--sidebar-transition);
}

.uib-daypicker .btn.btn-default:hover,
.uib-monthpicker .btn.btn-default:hover,
.uib-yearpicker .btn.btn-default:hover {
	background-color: var(--sidebar-accent-soft);
	color: var(--sidebar-accent);
	border-color: transparent;
}

.uib-daypicker .btn.btn-default.active,
.uib-monthpicker .btn.btn-default.active,
.uib-yearpicker .btn.btn-default.active,
.uib-daypicker .btn.btn-info,
.uib-monthpicker .btn.btn-info,
.uib-yearpicker .btn.btn-info {
	background-color: var(--sidebar-accent);
	color: #fff;
	border-color: var(--sidebar-accent);
}

.uib-daypicker .uib-title,
.uib-monthpicker .uib-title,
.uib-yearpicker .uib-title {
	width: 100%;
	font-weight: 600;
}

/* Reset the icon-column rule from .dropdown-menu so chevrons render at their
   natural inline size and stay centered in the prev/next cell. */
.uib-daypicker .glyphicon,
.uib-monthpicker .glyphicon,
.uib-yearpicker .glyphicon {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
}

.uib-daypicker table,
.uib-monthpicker table,
.uib-yearpicker table {
	width: 100%;
	margin: 0;
}

.uib-daypicker th,
.uib-monthpicker th,
.uib-yearpicker th {
	padding: 2px;
	border: 0;
	background-color: transparent;
	box-shadow: none;
}

.uib-daypicker td,
.uib-monthpicker td,
.uib-yearpicker td {
	padding: 0;
	text-align: center;
}

/* Footer action bar of the datetime picker — replace the inline gray slab
   with a cleaner divider so it fits the new dropdown shape. */
unt-datetime-picker > .dropdown-menu > div:last-child {
	background-color: transparent !important;
	border-top: 1px solid rgba(20, 18, 42, 0.08);
	padding: 8px 12px !important;
}

/********************
******FAVORITE*******
*********************/
.favorite {
	background-color: rgb(136, 242, 115)
}

/* Header strip at the top of the field-edit dropdown — sits flush with the
   menu's rounded corners and gives the label + input a calm tinted background
   so it reads as a section header instead of a stray block. */
.dropdown-menu > li:first-child > .field-li-input,
.dropdown-menu > li:first-child > form > .field-li-input {
	margin-top: -6px;
	border-top-left-radius: 0.6em;
	border-top-right-radius: 0.6em;
}

.field-li-input {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	margin: 0 0 4px 0;
	background-color: var(--sidebar-accent-soft);
}

.field-li-input > form {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.field-li-input > span,
.field-li-input > form > span:not([ng-init]) {
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sidebar-accent);
	margin: 0;
}

.field-li-input .form-control {
	height: auto;
	padding: 6px 10px;
	border: 1px solid rgba(97, 98, 241, 0.25);
	border-radius: 6px;
	background-color: #fff;
	box-shadow: none;
	transition: border-color var(--sidebar-transition), box-shadow var(--sidebar-transition);
}

.field-li-input .form-control:focus {
	outline: none;
	border-color: var(--sidebar-accent);
	box-shadow: 0 0 0 3px var(--sidebar-accent-soft);
}

.field-li-input textarea.form-control {
	min-height: 60px;
	resize: both;
}

.field-li-input .field-required {
	color: #dc3545;
	font-size: 0.85em;
	margin: 0;
}

.close-list-tab-section-btn {
	display: none;
}

.details-preview .close-list-tab-section-btn,
#list-tab-section .close-list-tab-section-btn {
	display: block;
}

/************
***PLANNER***
*************/

.planner {
	min-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-width));
}

.planner .header {
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #fff;
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
}

.planner .header .management-row {
	display: flex;
	justify-content: center;
	padding: 4px;
	flex-wrap: wrap;
	border-bottom: 1px solid #ddd;
}

.planner .header .days-row {
	display: flex;
	flex: 1;
	font-weight: 700;
	vertical-align: middle;
	text-align: center;
	word-break: break-word;
}

.primary-text {
	font-size: var(--font-xs);
	color: #000;
}

.secondary-text {
	font-size: var(--font-xs);
	color: #888;
}

/*
.planner .content-row {
	display: flex;
	min-height: 24px;
	border-top: 1px solid #000000;
	flex: 1;
}*/

.planner .item-block-header {
	background-color: #FFFFFF;
	border: 1px solid #DDD;
	margin: 4px 0px 4px 0px;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.planner .item-block-header:hover {
	background-color: #fafafa;
	border-color: #888;
}

.planner .item-block-header .flex-item {
	padding: 0px 4px 0px 4px;
}


.planner .content-row >* {
	flex: 1;
}

.planner .content-row .content-row-line {
	display: flex;
	position: relative;
	border-bottom: 2px solid #aaa;
}

.btn-planner-layer .badge {
	display: none;
}

.btn-planner-layer .icon {
	display: inline-block;
}

.btn-planner-layer:hover .badge {
	display: inline-block;
}

.btn-planner-layer:hover .icon {
	display: none;
}

.timeline-cell {
	display: flex;
	flex: 1;
	border-right: 1px dashed #aaa;
	min-height: 45px;
	align-items: center;
	justify-content: space-around;
}

.timeline-cell.past {
	background-color: #f2f2f2;
}

.timeline-cell.today {
	background-color: #FCFFF2;
}

.timeline-cell.future {
	background-color: #fff;
}

.timeline-cell.weekend {
	background-image: repeating-linear-gradient( 135deg, #eee 0px, #C2D8F9 1px, transparent 1px, transparent 20px );
}

.timeline-block {
	position: absolute;
	cursor: pointer;
	border-radius: 8px;
	border: 0.5px solid;
	padding: 0px 4px;
	overflow: hidden;
	white-space: nowrap;
	min-width: 24px;
	min-height: 34px;
	top: 50%;
	transform: translateY(-50%);
}

.timeline-block .icon {
	flex: 0 1 auto;
	flex-shrink: 0;
	padding-right: 8px;
}

.timeline-block .content {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
}

.timeline-block .content .item-progress-bar {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  border: 0.5px solid;
  border-color: darkgreen;
}

/************
***IMPORT_TSL***
*************/
.app-content-header-import {
    background-color: var(--main-background-color);
    z-index: 800;
    min-height: 40px;
    border-bottom: 1px solid #AAA;
    display: flex;
    align-items: center;
    padding: 4px 4px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    justify-content: space-between;
}

.app-content-header-import a {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

.button-group {
    display: flex;
    margin-left: auto;
}

.order-created {
    background-color: #E4FCDF;
}

.active-filter {
    background-color: #137ced;
    color: white;
}
.filter-blue {
	color: #137ced
}

.logo-offset {
	padding: 3px;
}

.btn-sidebar-toggle + .logo-offset {
	margin-left: 1rem;
}

.icon-info {
	margin-right: 4px;
}

/******************
 ENTITY DROPDOWNS
******************/
.unt-dropdown-entity a {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

.details-body li.list-only,
.modal-body .form-box .dropdown-menu li.list-only {
	display: none;
}

.unt-dropdown li {
	list-style-type: none;
}

/******************
 TEXT MANAGEMENT
*******************/

.text-wrap {
	white-space: normal;
}

.text-xs {
	font-size: var(--font-xs);
}

[ng-cloak] {
  display: none !important;
}


/* ---------------------------------------------------
   Unt-alert
--------------------------------------------------- */
.unt-alert-panel {
    width: 100%;
    max-height: 60vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.unt-alert-panel-header {
    padding: 6px;
    background-color: #e5e3f1;
    border-bottom: 1px solid #ddd;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
}

.unt-alert-empty {
    padding: 12px;
    color: #888;
    font-style: italic;
    text-align: center;
}

.unt-alert-list-wrapper {
    max-height: 60vh;
    overflow-y: auto;
    transition:
        max-height 0.6s ease,
        padding 0.6s ease,
        margin 0.6s ease;
}

.unt-alert-list {
    display: flex;
    flex-direction: column;
    margin: 0 4px;
    padding-bottom: 4px;
}

.unt-alert {
    position: relative;
    width: 100%;
    padding: 12px 18px 12px 18px;
    padding-right: 34px;
    margin-bottom: 5px;

    border: 1px solid;
    border-radius: 4px;
    opacity: 0.85;

    overflow: hidden;
    max-height: 200px;

    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        max-height 0.6s ease,
        padding 0.6s ease;

    transform: translateY(0);
    opacity: 1;
}

.unt-alert.closing {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.unt-alert:first-child {
    margin-top: 4px;
}

.unt-alert-success {
    background-color: transparent;
    border-color: #d6e9c6;
    color: #3c763d;
}

.unt-alert-info {
    background-color: transparent;
    border-color: #bce8f1;
    color: #31708f;
}

.unt-alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.unt-alert-danger {
    background-color: #f2dede;
    border-color: #ebcccc;
    color: #a94442;
}

.unt-alert-icon {
    font-size: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

.unt-alert-text {
    vertical-align: middle;
}

.unt-alert-link {
    color: inherit;
    font-weight: bold;
    margin-left: 6px;
    text-decoration: underline;
    cursor: pointer;
}
.unt-alert-link:hover {
    opacity: 0.8;
}

.unt-alert-close-btn {
    position: absolute;
    top: 1px;
    right: 6px;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: rgba(0,0,0,0.6);
}
.unt-alert-close-btn:hover {
    color: rgba(0,0,0,0.9);
}

.unt-alert-progress {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden;
}

.unt-alert-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.55);
    transition: width 0.05s linear;
}

.alerts-wrapper {
    position: relative;
    display: inline-block;
}

.alert-dropdown-menu {
    position: fixed;
    top: 50px;
    right: 0;

    width: 360px;
    max-width: calc(100vw - 20px);
    max-height: 70vh;

    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    z-index: 1050;

    overflow-y: hidden;
    transition: max-height 0.25s ease;
}

.dropdown-menu.alert-dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    transition: max-height 0.25s ease;
}

.dropdown-menu.alert-dropdown-menu .btn:hover {
    background-color: #F6F7F8;
    color: #FAA619;
    border: 1px solid #FAA619;
}

.freight-stop-block {
	border-radius: 8px;
	padding: 8px;
	margin: 8px;
	background-color: #f2f2f2;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.alert-level-ok {
	color: #06a77d;
	background: #fff;
	padding: 2px;
	border-radius: 4px;
	border: 1px solid #06a77d;	
}
.alert-level-low {
	color: #256EFF;
	background: #fff;
	padding: 2px;
	border-radius: 4px;
	border: 1px solid #256EFF;	
}
.alert-level-medium {
	color: #f1a208;
	background: #fff;
	padding: 2px;
	border-radius: 4px;
	border: 1px solid #f1a208;	
}
.alert-level-high {
	color: #FF495C;
	background: #fff;
	padding: 2px;
	border-radius: 4px;
	border: 1px solid #FF495C;	
}
.alert-level-critical {
	color: #ffcccc;
	background: #000;
	padding: 2px;
	border-radius: 4px;
	border: 1px solid #000;
}

.multiselect-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    height: auto;
    min-height: 34px;
    padding: 4px;
    cursor: text;
}

.multiselect-badge {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    font-weight: normal;
    padding: 4px 8px;
    border-radius: 4px;
}

.multiselect-input {
    border: none;
    outline: none;
    flex-grow: 1;
    min-width: 60px;
    background: transparent;
}

.multiselect-icon {
    cursor: pointer;
    margin-left: auto;
    padding: 0 4px;
}

.multiselect-menu {
    min-width: 300px;
    max-width: 450px;
    white-space: normal;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1060;
    margin: 0;
    padding: 0;
}

.multiselect-dropdown {
    padding: 6px 12px;
    cursor: pointer;
}

.multiselect-dropdown:hover,
.multiselect-dropdown.active {
    background-color: #f5f5f5;
}

.multiselect-no-result-container {
    padding: 6px 12px;
    color: #888;
    font-style: italic;
}

/***************************************************/
/* MODERN AUTH PAGES (login / reset / 2FA) *********/
/***************************************************/

body.auth-page {
	margin: 0;
	min-height: 100vh;
	background: linear-gradient(135deg, #0C0A1B 0%, #1a1840 45%, #2a2d6e 100%);
	color: #f4f6fb;
	font-family: var(--font-normal);
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

body.auth-page::before,
body.auth-page::after {
	content: "";
	position: fixed;
	border-radius: 50%;
	filter: blur(80px);
	z-index: 0;
	pointer-events: none;
}

body.auth-page::before {
	top: -120px;
	left: -120px;
	width: 380px;
	height: 380px;
	background: rgba(97, 98, 241, 0.35);
}

body.auth-page::after {
	bottom: -160px;
	right: -160px;
	width: 460px;
	height: 460px;
	background: rgba(40, 112, 236, 0.25);
}

.auth-shell {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	z-index: 1;
}

.auth-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 28px 0 28px;
	gap: 16px;
}

.auth-topbar .auth-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #f4f6fb;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.4px;
}

.auth-topbar .auth-brand img {
	height: 32px;
	width: auto;
}

.auth-content {
	flex: 1 1 auto;
	display: flex;
	align-items: safe center;
	justify-content: safe center;
	padding: 32px 20px;
}

.auth-card {
	width: 100%;
	max-width: 460px;
	background: rgba(255, 255, 255, 0.97);
	color: #1a2233;
	border-radius: 8px;
	padding: 36px 36px 30px 36px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	position: relative;
	isolation: isolate;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.auth-card-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

.auth-card-logo img {
	max-height: 60px;
	max-width: 220px;
}

.auth-card h1 {
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 6px;
	color: #1a2233;
}

.auth-card .auth-subtitle {
	text-align: center;
	color: #5a6478;
	font-size: 13.5px;
	line-height: 1.45;
	margin-bottom: 22px;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.auth-alert {
	border-radius: 4px;
	padding: 11px 14px;
	margin-bottom: 16px;
	font-size: 13px;
	border: 1px solid transparent;
	line-height: 1.4;
}

.auth-alert.alert-error {
	background-color: #fdecec;
	border-color: #f5b8b8;
	color: #8a1f1f;
}

.auth-alert.alert-success {
	background-color: #e8f5ec;
	border-color: #b9dec5;
	color: #1e5e34;
}

.auth-field {
	position: relative;
	margin-bottom: 14px;
}

.auth-field i.auth-field-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #8b94a8;
	font-size: 14px;
	pointer-events: none;
}

.auth-field input.auth-input {
	width: 100%;
	height: 44px;
	border: 1px solid #d6dbe5;
	border-radius: 4px;
	padding: 0 14px 0 42px;
	font-size: 14px;
	color: #1a2233;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
	box-shadow: none;
}

.auth-field input.auth-input:focus {
	border-color: #8889FD;
	box-shadow: 0 0 0 3px rgba(136, 137, 253, 0.2);
}

.auth-field input.auth-input.has-action {
	padding-right: 56px;
}

.auth-field .auth-field-action {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
}

.auth-field .auth-field-action button {
	border: none;
	background: transparent;
	color: #5a6478;
	cursor: pointer;
	font-size: 13px;
	padding: 6px 10px;
	border-radius: 4px;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.auth-field .auth-field-action button:hover {
	background: rgba(97, 98, 241, 0.1);
	color: #6162F1;
}

.auth-field .auth-field-action button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	color: #5a6478;
	background: transparent;
}

.auth-field .auth-password-toggle[aria-pressed="true"] {
	color: #6162F1;
}

.auth-btn-spaced {
	margin-top: 18px;
}

.auth-row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 18px;
	font-size: 13px;
}

.auth-row a {
	color: #6162F1;
	text-decoration: none;
	font-weight: 500;
}

.auth-row a:hover {
	text-decoration: underline;
}

.auth-btn {
	width: 100%;
	height: 44px;
	border: 1px solid #6162F1;
	border-radius: 4px;
	background: #6162F1;
	color: #fff;
	font-weight: 600;
	font-size: 14.5px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	letter-spacing: 0.3px;
}

.auth-btn:hover {
	background: #3B3DAB;
	border-color: #3B3DAB;
	box-shadow: 0 4px 12px rgba(59, 61, 171, 0.3);
}

.auth-btn:active {
	background: #2F308A;
	border-color: #2F308A;
}

.auth-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #5a6478;
	text-decoration: none;
	font-size: 13px;
	margin-bottom: 14px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

.auth-back-link:hover {
	color: #6162F1;
}

.auth-helper {
	background: #f4f6fb;
	border: 1px solid #e3e7f0;
	border-radius: 4px;
	padding: 12px 14px;
	font-size: 12.5px;
	color: #5a6478;
	line-height: 1.5;
	margin-top: 6px;
	white-space: normal;
}

.auth-steps {
	display: flex;
	gap: 6px;
	margin-bottom: 22px;
}

.auth-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.auth-step .step-bar {
	height: 4px;
	border-radius: 99px;
	background: #e3e7f0;
}

.auth-step.is-active .step-bar,
.auth-step.is-done .step-bar {
	background: #6162F1;
}

.auth-step.is-done .step-bar {
	background: #258F00;
}

.auth-step .step-label {
	font-size: 11px;
	color: #8b94a8;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 600;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.auth-step.is-active .step-label {
	color: #6162F1;
}

.auth-step.is-done .step-label {
	color: #1e5e34;
}

.auth-footer {
	text-align: center;
	color: rgba(244, 246, 251, 0.65);
	font-size: 12px;
	padding: 16px 12px 22px 12px;
}

.auth-footer a {
	color: #a1a3ff;
	text-decoration: none;
}

.auth-footer a:hover {
	text-decoration: underline;
}

/* Language selector */
.lang-switcher {
	position: relative;
}

.lang-switcher-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #f4f6fb;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lang-switcher-toggle:hover {
	background: rgba(255, 255, 255, 0.15);
}

.lang-switcher-toggle i {
	font-size: 11px;
	opacity: 0.7;
}

.lang-switcher-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 180px;
	max-height: 320px;
	overflow-y: auto;
	background: #ffffff;
	color: #1a2233;
	border-radius: 4px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
	padding: 6px 0;
	display: none;
	z-index: 50;
}

.lang-switcher.is-open .lang-switcher-menu {
	display: block;
}

.lang-switcher-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	color: #1a2233;
	text-decoration: none;
	font-size: 13.5px;
}

.lang-switcher-menu a:hover {
	background: #f3f5f9;
}

.lang-switcher-menu a.is-active {
	color: #6162F1;
	font-weight: 600;
}

.lang-switcher-menu a .lang-code {
	font-weight: 600;
	letter-spacing: 0.4px;
}

.lang-switcher-menu a .lang-name {
	color: #5a6478;
}

.lang-switcher-menu a.is-active .lang-name {
	color: #6162F1;
}

/* Hide spin arrows on number input (2FA code) */
.auth-input.no-spin::-webkit-outer-spin-button,
.auth-input.no-spin::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.auth-input.no-spin {
	-moz-appearance: textfield;
	letter-spacing: 0.4em;
	text-align: center;
	font-size: 18px;
	padding-left: 14px;
}

@media (max-width: 520px) {
	.auth-card {
		padding: 26px 22px 22px 22px;
	}
	.auth-card h1 {
		font-size: 19px;
	}
	.auth-topbar {
		padding: 14px 16px 0 16px;
	}
	.auth-step .step-label {
		display: none;
	}
	body.auth-page::before {
		width: 220px;
		height: 220px;
		top: -160px;
		left: -160px;
	}
	body.auth-page::after {
		width: 260px;
		height: 260px;
		bottom: -200px;
		right: -200px;
	}
}