/*
================================================================
TABLE OF CONTENTS
================================================================
- COLORS
- RESET
- CORE
- SIDEBAR
  = SIDEBAR HEADER
  = MAIN MENU
  = PROFILE
- NAVBAR
	= NAVBAR LINKS
- BREADCRUMB
- CARDS
	= CARD ITEM
	= CARD GROUP
- GRIDS
	= GRID HEADER
	= GRID CONTENT
	= GRID FOOTER
- FORMS
	= FORM FIELDS
	= CHECKBOX & RADIO GENERAL
	= CHECKBOX
	= RADIO
	= INPUT TABLE
- KENDO FIELD SETTINGS
	= KENDO DATEPICKER
	= KENDO NUMERIC
	= KENDO DROPDOWN & COMBOBOX
	= KENDO AUTOCOMPLETE
	= KENDO UPLOAD
	= KENDO TOOLTIP
- WINDOW
- DESKTOP AND MOBILE
*/

/*==============================================================
- COLORS
==============================================================*/
:root {
	--header-min-height: 4.1rem;
	--sidebar-width: 15rem;
}

@media (prefers-color-scheme: light) {
	:root {
		--sidebar-title-background: #2b2b2b;
		--sidebar-title-color: #FBD4C9;
		--sidebar-background: #212121;
		--sidebar-color: white;
		--sidebar-active-background-color: var(--primary-color);
		--sidebar-active-text-color: #FBD4C9;
		--sidebar-hover-color: #ffc107;

		--header-background-color: var(--primary-color);
		--header-text-color: var(--sidebar-active-text-color);
		--page-header-background-color: var(--text-background-color);

		--card-background-color: var(--text-background-color);
		--grid-odd-background-color: #f6f6f6;
		--active-icon-color: var(--link-color);

		--profile-title-background: var(--sidebar-title-background);
		--profile-title-color: var(--sidebar-title-color);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--sidebar-title-background: #232323;
		--sidebar-title-color: #FBD4C9;
		--sidebar-background: #1a1a1a;
		--sidebar-color: #d5d5d5;
		--sidebar-active-background-color: var(--primary-color);
		--sidebar-active-text-color: #FBD4C9;
		--sidebar-hover-color: #ffffff24;

		--header-background-color: var(--primary-color);
		--header-text-color: var(--sidebar-active-text-color);
		--page-header-background-color: var(--text-background-color);

		--card-background-color: var(--text-background-color);
		--grid-odd-background-color: #2b2b2b;
		--active-icon-color: var(--link-color);

		--profile-title-background: var(--sidebar-background);
		--profile-title-color: var(--sidebar-title-color);
	}
}

/*==============================================================
- CORE
==============================================================*/

.header {
	z-index: 1;
	width: 100%;
	background-color: var(--page-header-background-color);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.container {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: auto;
	min-height: 300px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	justify-content: flex-start;
}

.page-title {
	font-size: 1.3em;
	padding: 1rem;
}

/*==============================================================
- SIDEBAR
==============================================================*/

.sidebar {
	width: var(--sidebar-width);
	max-width: 100vw;
	height: 100%;
	background-color: var(--sidebar-background);
	color: var(--sidebar-color);
	flex-grow: 0;
	flex-shrink: 0;
}

.sidebar-overlay {
	z-index: 9;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.1);
}

/*==== SIDEBAR HEADER ====*/

.sidebar .sidebar__header {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 125px;
	/* UI Properties */
	background: transparent linear-gradient(180deg, var(--unnamed-color-121967) 0%, #090D34 100%) 0% 0% no-repeat padding-box;
	background: transparent linear-gradient(180deg, #121967 0%, #090D34 100%) 0% 0% no-repeat padding-box;
	opacity: 1;
}

.sidebar .sidebar__header img {
	width: 110px;
}

.sidebar .app-name {
	font-size: 1.5em;
	color: var(--sidebar-title-color);
	width: 100%;
	height: 100%;
	text-align: center;
	align-content: center;
	font-weight: bold;
}

/*==== MAIN MENU ====*/

.sidebar .main-menu-item {
	display: block;
	font-size: 1.2rem;
	padding: 10px 20px;
	font-weight: normal;
}

.sidebar .main-menu-item.active {
	background: var(--sidebar-active-background-color);
	color: var(--sidebar-active-text-color);
	text-decoration: none;
	cursor: default;
	box-shadow: none;
}

.sidebar a:hover {
	box-shadow: inset 0 0 100px 100px var(--sidebar-hover-color);
}

.sidebar a {
	color: inherit;
}

/*==============================================================
- RIGHT SIDE OVERLAY
==============================================================*/

.overlay {
	z-index: 8;
	position: fixed;
	top: 0;
	right: 0;
	width: 20rem;
	max-width: 100vw;
	height: 100%;
	overflow: auto;
	background-color: var(--text-background-color);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.overlay[data-aria="open"] {
	transform: translateX(0);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.overlay[data-aria="close"] {
	transform: translateX(100%);
	visibility: hidden;
}

.overlay .overlay-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--sidebar-color);
	height: 18%;
	background: transparent linear-gradient(180deg, var(--unnamed-color-121967) 0%, #090D34 100%) 0% 0% no-repeat padding-box;
	background: transparent linear-gradient(180deg, #121967 0%, #090D34 100%) 0% 0% no-repeat padding-box;
	opacity: 1;
}

.overlay .overlay-title {
	font-size: 1.2rem;
	padding: 1rem;
}

.overlay .overlay-close {
	color: var(--header-text-color);
	height: 100%;
	padding: 1rem;
	min-height: var(--header-min-height);
}

.overlay .overlay-close .material-icons {
	vertical-align: middle;
}

.overlay .overlay-close:hover {
	box-shadow: inset 0 0 100px 100px var(--button-hover-shadow-color);
}

/*==== PROFILE ====*/

/* User */

#profile .user {
	margin-right: 0px;
	text-align: center;
	padding: 40px 0;
}

.user-pic .profile-icon {
	font-size: 80px;
	color: #c5c5c5;
	justify-self: start;
}

#profile .user-details span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#profile .user-name {
	font-size: 1.2rem;
}

/* Profile items */

#profile .form-group:first-child {
	padding-top: 10px;
}

#profile .profile-item {
	padding: 10px 0;
}

#profile .profile-buttons {
	padding-top: 5px;
}

#profile .profile-buttons button {
	border: 0;
	padding: 8px 10px;
	transition: background-color 0.2s;
}

#profile .profile-buttons button.save {
	color: #fff;
	margin-right: 3px;
}

#profile .profile-buttons button.save:hover {
	background-color: var(--primary-color);
}

#profile .profile-buttons button.cancel {
	color: var(--text-color);
	background-color: #eaeaea;
}

#profile .profile-buttons button.cancel:hover {
	background-color: #ddd;
}

#profile-toggle {
	margin-right: 1.5rem;
	/* color: #ffffff; */
}

/*==============================================================
- NAVBAR
==============================================================*/

.navbar {
	background-color: var(--primary-color);
	color: var(--header-text-color);
	min-height: var(--header-min-height);
}

#menu-toggle {
	width: 4.5rem;
}

/*==== NAVBAR LINKS ====*/

.navbar .nav__link {
	height: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}

.navbar button.nav__link {
	color: inherit;
	padding: 0 1rem;
	min-height: var(--header-min-height);
}

.navbar button.nav__link:hover {
	box-shadow: inset 0 0 100px 100px var(--button-hover-shadow-color);
}

.navbar button.nav__link:focus {
	outline-offset: -2px;
}

/*==============================================================
- TOPBAR
==============================================================*/

.clarence-header {
	background: transparent linear-gradient(180deg, var(--unnamed-color-121967) 0%, #090D34 100%) 0% 0% no-repeat padding-box;
	background: transparent linear-gradient(180deg, #121967 0%, #090D34 100%) 0% 0% no-repeat padding-box;
	opacity: 1;
	color: white;
	padding: 0.5rem 1rem;
	/* border-radius: 0 0 8px 8px; */
	width: 100%;
}

.clarence-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.app-name {
	font-weight: 600;
	font-size: x-large;
	margin-right: 1rem;
	white-space: nowrap;
	align-self: center;
}

.clarence-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	justify-items: auto;
}

.clarence-link {
	color: var(--menu-text-color);
	text-decoration: none;
	font-size: 1rem;
	transition: color 0.2s;
	font-weight: 500;
}

.clarence-link:hover,
.clarence-link:focus {
	color: #ffc107;
}

.user-company {
	font-size: 0.95rem;
	margin-right: 0.5rem;
	white-space: nowrap;
}

.profile-toggle {
	padding: 0.25rem;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d5d5d5;
	/* box-shadow: 0 0 0 2px white; */
}

.profile-toggle:hover {
	background: unset;
	color: #ffc107;
}

.profile-icon {
	font-size: 2.5rem;
}

.help-toggle {
	padding: 0.25rem;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d5d5d5;
	/* box-shadow: 0 0 0 2px white; */
}

.help-toggle:hover {
	background: unset;
	color: #ffc107;
}

.help-icon {
	font-size: 1.5rem;
}

/*==============================================================
- BREADCRUMB
==============================================================*/

#breadcrumb {
	display: flex;
	flex-direction: column;
}

#breadcrumb .main-menu-item {
	word-break: break-word;
	font-size: 1rem;
	outline-offset: -2px;
	padding-left: 30px;
	display: flex;
	align-items: center;
}

#breadcrumb li+li .main-menu-item {
	padding-left: 40px;
}

#breadcrumb li+li+li .main-menu-item {
	padding-left: 50px;
}

#breadcrumb li+li+li+li .main-menu-item {
	padding-left: 60px;
}

#breadcrumb .main-menu-item .icon {
	font-size: 1em;
	margin-right: 0.5rem;
}

#breadcrumb li.active {
	background: var(--sidebar-active-background-color);
	color: var(--sidebar-active-text-color);
}

#breadcrumb a {
	font-weight: normal;
}

#breadcrumb li.active a {
	cursor: default;
}

#breadcrumb li.active a:hover {
	box-shadow: none;
}

/*==============================================================
- CARDS
==============================================================*/

.card {
	border-radius: var(--border-radius);
	background-color: var(--card-background-color);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

/*==== CARD ITEM ====*/

.small-card {
	max-width: 450px;
}

.medium-card {
	min-width: 450px;
	max-width: 800px;
}

.large-card {
	min-width: 450px;
	max-width: 1400px;
}


.card-header {
	color: var(--header-text-color);
	padding: 10px 15px;
	padding: 1rem;
	/* border-radius: 3px 3px 0 0; */
	/* background-color: var(--primary-color); */
	font-size: 1.2rem;
	/* font-weight: normal; */
	border-bottom: 1px solid var(--border-color);
}

/*==============================================================
- GRIDS
==============================================================*/

.grid.k-grid {
	border: 0;
}

.grid.k-grid .k-grid-header,
.grid.k-grid .k-grid-pager {
	border-color: var(--border-color);
}

.grid.k-grid .k-grid-norecords {
	padding: 20px;
}

.grid {
	display: flex;
	flex-direction: column;
	max-height: 100%;
	min-height: 0;
}

.k-grid .checkbox label,
.k-grid .radio label {
	padding: 0px;
	background-color: unset;
	border: unset;
}

.k-grid .checkbox input[type="checkbox"]:checked+label,
.k-grid .radio input[type="radio"]:checked+label {
	border: unset;
	background-color: unset;
}

.k-grid .checkbox input[type="checkbox"]:focus+label {
	outline: unset;
}

/*==== GRID HEADER ====*/

.grid.k-grid .k-grid-header th.k-header {
	padding: 0;
}

.grid.k-grid .k-grid-header th.k-header:first-child {
	padding: 6px 15px;
}

.grid.k-grid .k-grid-header th.k-header>a.k-link {
	padding: 10px 15px;
	line-height: 18px;
	display: flex;
	flex-direction: row;
}

.grid .k-grid-header a.k-link:hover {
	box-shadow: inset 0 0 100px 100px var(--button-hover-shadow-color);
}

.grid.k-grid .k-grid-header th.k-header>a.k-link>span.k-icon {
	margin: 1px 0 0 3px;
}

.grid table {
	border-collapse: collapse;
}

.grid thead.k-grid-header {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.grid .k-grid-header .k-header>.k-link {
	color: var(--text-color);
}

.grid .k-grid-header .k-link .k-icon.k-i-sort-asc-sm,
.grid .k-grid-header .k-link .k-icon.k-i-sort-desc-sm,
.grid .k-grid-header .k-link .k-sort-order {
	color: var(--link-color);
}

/*==== GRID CONTENT ====*/

/* empty */
.grid .k-grid-content {
	min-height: 120px;
}

.grid.k-grid tr:nth-child(odd) {
	background-color: var(--grid-odd-background-color);
}

.grid.k-grid tr:nth-child(even) {
	background-color: var(--text-background-color);
}

.grid.k-grid tr.k-state-selected {
	color: var(--active-text-color);
	background-color: var(--active-color);
}

.grid .k-selectable tr:not(.k-state-selected):hover {
	box-shadow: inset 0 0 100px 100px var(--button-hover-shadow-color);
	cursor: cell;
}

.grid.k-grid tr>td {
	padding: 6px 15px;
}

.grid.k-grid tr>td.k-edit-cell {
	padding: 2px 15px;
}

.grid.k-grid tr>td .k-dirty {
	display: none;
}

/*==== GRID FOOTER ====*/

.grid.k-grid .k-grid-pager {
	flex-shrink: 0;
}

.grid .k-pager-wrap .k-pager-numbers .k-link.k-state-selected {
	border-top-color: var(--link-color);
	color: var(--active-text-color);
	font-weight: bold;
	background-color: var(--active-color);
}

.grid .k-pager-wrap .k-pager-nav,
.grid .k-pager-wrap .k-pager-nav.k-state-disabled {
	color: var(--link-color);
}

.grid .k-pager-sm .k-pager-numbers-wrap select.k-dropdown {
	border-color: var(--input-border-color);
	background-color: var(--form-button-background-color);
	color: var(--text-color);
}

.grid .k-pager-wrap .k-pager-numbers .k-link {
	color: var(--text-color);
}

.grid .k-pager-wrap a.k-link:hover {
	background-color: var(--text-background-color);
	box-shadow: inset 0 0 100px 100px var(--button-hover-shadow-color);
}

/*==============================================================
- FORMS
==============================================================*/

.form-group label,
.label {
	font-weight: 400;
	margin-bottom: 5px;
	color: var(--text-color);
	padding: 10px 0 0 20px;
}

.form-group .required:after {
	color: #db0000;
	content: ' *';
}

.form-group .form-header {
	margin: 10px 0;
	color: var(--text-color);
	font-size: 1.2rem;
	font-weight: 400;
}

.form-group .question-tooltip {
	color: #909090;
	vertical-align: bottom;
	cursor: context-menu;
}

/*==== FORM FIELDS ====*/

textarea.input {
	resize: vertical;
	min-height: 5rem;
	text-indent: 0;
}

.k-state-disabled {
	opacity: 1;
}

.input:read-only {
	border: none;
	background-color: unset;
}

/*==== CHECKBOX & RADIO GENERAL ====*/

.checkbox,
.radio {
	display: flex;
}

.checkbox label,
.radio label {
	position: relative;
	margin: 0;
	vertical-align: top;
	background: var(--form-button-background-color);
	padding: .5rem .7rem;
	display: flex;
	align-items: center;
	width: fit-content;
	border-radius: var(--border-radius);
	border: 1px solid var(--form-button-background-color);
}

.checkbox label:hover,
.radio label:hover {
	cursor: pointer;
}

.checkbox input[type="checkbox"],
.radio input[type="radio"] {
	z-index: -1;
	width: 1px;
	height: 1px;
	margin: 0 -1px -1px 0;
	overflow: hidden;
}

.checkbox input[type="checkbox"]:disabled+.checkbox label,
.radio input[type="radio"]:disabled .label {
	opacity: 0.5;
	cursor: not-allowed;
}

.checkbox input[type="checkbox"]:focus+label::before,
.radio input[type="radio"]:focus+label::before {
	border-color: var(--focus-color);
}

.checkbox label::before,
.radio label::before {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	margin-right: 0.5rem;
	color: #505050;
	font-size: 1.3rem;
}

.checkbox input[type="checkbox"]:checked+label,
.radio input[type="radio"]:checked+label {
	background-color: var(--active-color);
	border-color: var(--active-color);
}

/*==== CHECKBOX ====*/

.checkbox input[type="checkbox"]:focus+label {
	outline: 2px solid var(--focus-color);
	outline-offset: -1px;
}

.checkbox label::before {
	content: "\e835";
}

.checkbox input[type="checkbox"]:checked+label:before {
	content: "\e834";
	color: var(--active-icon-color);
}

.checkbox input[type="checkbox"]:disabled+label:before {
	opacity: 0.4;
}

/*==== RADIO ====*/

.radio input[type="radio"]:focus+label {
	outline: 2px solid var(--focus-color);
}

.radio label::before {
	content: "\e836";
}

.radio input[type="radio"]:checked+label:before {
	content: "\e837";
	color: var(--active-icon-color);
}

/*==== INPUT TABLE ====*/

.input-table {
	container: input-table / inline-size;
}

.input-table fieldset:not(:first-child) label {
	z-index: -1;
	width: 1px;
	height: 1px;
	margin: 0 -1px -1px 0;
	overflow: hidden;
}

@container input-table (max-width: 25rem) {
	.it-w-25 .row {
		flex-direction: column;
	}

	.it-w-25 fieldset:not(:first-child) label {
		z-index: 0;
		margin: 0;
		width: auto;
		height: auto;
		overflow: visible;
	}
}

/*==============================================================
- KENDO FIELD SETTINGS
==============================================================*/

.k-block,
.k-content,
.k-dropdown .k-input,
.k-popup,
.k-toolbar,
.k-widget {
	color: var(--text-color);
}

/* top element */
.form-group span.k-datepicker,
.form-group span.k-numerictextbox,
.form-group span.k-dropdown,
.form-group span.k-combobox,
.form-group span.k-autocomplete,
.form-group div.k-upload {
	width: 100%;
	border-radius: var(--border-radius);
	background-color: var(--input-background-color);
}

/* wrapper */
.k-datepicker>.k-picker-wrap,
.k-numerictextbox>.k-numeric-wrap,
.k-dropdown>.k-dropdown-wrap,
.k-combobox>.k-dropdown-wrap,
.k-autocomplete {
	background-color: transparent;
	-webkit-transition: border-color .15s ease-in-out;
	transition: border-color .15s ease-in-out;
	border-radius: var(--border-radius);
	border: 1px solid var(--input-border-color);
	padding-right: 40px;
	/* outline: 1px solid var(--input-border-color);
	outline-offset: 2px; */
}

.k-datepicker>.k-picker-wrap {
	padding-left: 0px;
}

.k-dropdown-wrap.k-state-default.k-state-active,
.k-picker-wrap.k-state-default.k-state-active {
	border-color: var(--input-border-color);
	background-color: var(--input-background-color);
}

/* focus */
.form-group span.k-datepicker>span.k-picker-wrap.k-state-focused,
.form-group span.k-numerictextbox>span.k-numeric-wrap.k-state-focused,
.form-group span.k-dropdown>span.k-dropdown-wrap.k-state-focused,
.form-group span.k-combobox>span.k-dropdown-wrap.k-state-focused,
.form-group span.k-autocomplete.k-state-focused {
	outline-offset: -1px;
}

/* hover */
.k-dropdown .k-state-focused,
.k-filebrowser-dropzone,
.k-list>.k-state-hover,
.k-splitbar-horizontal-hover,
.k-splitbar-vertical-hover,
.k-state-hover,
.k-calendar td.k-state-hover .k-link {
	color: inherit;
	background-color: inherit;
	box-shadow: inset 0 0 100px 100px var(--button-hover-shadow-color);
}

/* fix: wrapper grows in size when opening picker */
.k-picker-wrap.k-state-border-down {
	padding-bottom: 0;
}

/* input */
.form-group span.k-numerictextbox>span.k-numeric-wrap>input.k-input,
.form-group span.k-dropdown>span.k-dropdown-wrap>span.k-input,
.form-group span.k-combobox>span.k-dropdown-wrap>input.k-input,
.form-group span.k-autocomplete>input.k-input {
	padding: 9.5px 13px;
	line-height: 1.5;
	background-color: var(--input-background-color);
	text-indent: 0;
	border-radius: var(--border-radius);
	color: var(--text-color);
}

/* right button active */
.k-dropdown-wrap.k-state-default.k-state-active .k-select,
.k-picker-wrap.k-state-default.k-state-active .k-select {
	border-color: var(--input-border-color);
}

/* icon wrapper */
.k-picker-wrap .k-icon,
.k-dropdown-wrap .k-icon {
	width: 100%;
	height: 100%;
}

/* list of options */
.k-fieldselector .k-list .k-item,
.k-popup .k-list .k-item {
	min-height: 1.5em;
	line-height: 1.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.k-list-optionlabel,
.k-popup .k-item {
	cursor: pointer;
}


.form-group div.k-upload {
	-webkit-transition: border-color .15s ease-in-out;
	transition: border-color .15s ease-in-out;
}

/* Kendo template list */
.k-list-content {
	display: block;
	margin: 5px 0;
}

.k-list-content p {
	margin: 0;
	line-height: 20px;
}

.k-list-content p:first-child {
	font-weight: 600;
}

/*==== KENDO DATEPICKER ====*/

span.k-datepicker>span.k-picker-wrap.k-state-active {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.k-datepicker>.k-picker-wrap>.k-select,
.k-dropdown .k-select {
	width: 40px;
	color: var(--menu-text-color);
	background-color: unset;
	border-left: 1px solid var(--input-border-color);
	/*border-radius: var(--border-radius) var(--border-radius); */
}

.k-datepicker .k-picker-wrap .k-input {
	padding: 10px 10px 10px 10px;
	height: 40px;
	border-radius: 20px 0px 0px 20px;
}

.k-calendar-container.k-group {
	border-color: var(--input-border-color);
}

div.k-calendar>table.k-content>tbody>tr>td>a.k-link {
	padding: 0;
	text-align: center;
}

.k-calendar>.k-header,
.k-calendar th {
	background-color: var(--text-background-color);
	color: var(--text-color);
	border-color: var(--border-color);
}

.k-calendar .k-calendar-header .k-today,
.k-calendar .k-footer .k-nav-today {
	color: var(--link-color);
}

.k-calendar .k-calendar-header .k-today:hover,
.k-calendar .k-footer .k-nav-today:hover {
	color: var(--link-color);
}

.k-calendar .k-today .k-link {
	font-weight: bold;
	box-shadow: inset 0 0 0 1px var(--text-color);
	color: var(--text-color);
}

.k-calendar td.k-state-selected .k-link {
	color: var(--active-text-color);
	background-color: var(--active-color);
}

.k-calendar .k-picker-wrap .k-select {
	border: var(--focus-color)
}

.k-calendar .k-content td.k-state-focused {
	outline: none;
}

.k-calendar .k-content td.k-state-focused .k-link {
	outline: 2px solid var(--focus-color);
	outline-offset: -1px;
}

.k-calendar .k-content td.k-state-focused.k-state-selected .k-link {
	box-shadow: inset 0 0 0 3px white;
}

.k-calendar .k-content td.k-state-focused {
	outline-offset: -1px;
}

.k-calendar .k-century .k-link {
	width: auto;
}

/*==== KENDO NUMERIC ====*/

.form-group span.k-numerictextbox>span.k-numeric-wrap {
	padding-right: 26px;
}

.form-group span.k-numerictextbox>span.k-numeric-wrap>span.k-select {
	width: 26px;
	height: 30px;
	padding: 2px 4px;
	color: #505050;
	background-color: #f4f5f8;
	border-left: 1px solid #ced4da;
}

.form-group span.k-numerictextbox>span.k-numeric-wrap>span.k-select>span.k-link.k-state-selected {
	background-color: #ddd;
}

.form-group span.k-numerictextbox span.k-i-arrow-60-up {
	top: 1px;
}

.form-group span.k-numerictextbox span.k-i-arrow-60-down {
	bottom: 1px;
}

/*==== KENDO DROPDOWN & COMBOBOX ====*/

.k-popup.k-list-container {
	background-color: var(--input-background-color);
	border-color: var(--input-border-color);
}

.form-group span.k-dropdown {
	background-color: var(--form-button-background-color);
}

.k-dropdown-wrap {
	padding-right: 36px;
}

.form-group span.k-dropdown>span.k-dropdown-wrap>span.k-select,
.form-group span.k-combobox>span.k-dropdown-wrap>span.k-select {
	color: var(--form-button-color);
	width: 40px;
}

.form-group span.k-dropdown>span.k-dropdown-wrap>span.k-input {
	background-color: var(--form-button-background-color);
}

.k-dropdown .k-state-default.k-state-active .k-input {
	color: var(--text-color);
}

.k-list-container li.k-state-focused {
	outline-offset: -2px;
}

.k-list-container li.k-state-selected {
	background-color: var(--active-color);
	color: var(--active-text-color);
}

.k-list-container.k-popup .k-list .k-state-hover:not(.k-state-selected) {
	/* background-color: var(--input-background-color); */
	/* box-shadow: inset 0 0 100px 100px var(--button-hover-shadow-color); */
	color: var(--text-color);
}

.k-combobox .k-select,
.k-dropdown,
.k-dropdown .k-icon {
	color: var(--form-button-color);
}

.k-dropdown .k-select,
.k-dropdown-wrap.k-state-default.k-state-active .k-select {
	border-color: var(--form-button-background-color);
}

/*==== KENDO AUTOCOMPLETE ====*/

.form-group span.k-autocomplete.k-state-border-down>span.k-i-close {
	margin-top: 0;
}

/*==== KENDO UPLOAD ====*/

.form-group div.k-upload {
	border-color: #ced4da;
}

.form-group div.k-upload>div.k-button.k-upload-button {
	width: 100%;
	margin: 0;
	border: 0;
	padding: 8px;
	color: #505050;
	background-color: #f4f5f8;
}

.form-group div.k-upload>ul.k-upload-files {
	padding: 0;
	border: 0;
}

.form-group div.k-upload>ul.k-upload-files>li.k-file {
	border-top: 1px solid #ced4da;
	border-bottom: 0;
}

/*==== KENDO TOOLTIP ====*/

div.k-tooltip.k-widget {
	top: -3px;
	color: #fff;
	background-color: rgba(26, 26, 26, 0.9);
	-webkit-box-shadow: none;
	box-shadow: none;
}

/*==============================================================
- WINDOW
==============================================================*/

div.k-window {
	border: 0;
}

div.k-window>div.k-window-content[data-role="window"] {
	padding: 0;
}

.window {
	z-index: 10;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.window.is-visible {
	display: flex;
	align-items: center;
	justify-content: center;
}

.window .window__wrapper {
	min-width: 200px;
	border-radius: var(--border-radius);
	background-color: #fff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

/*==== HEADER ====*/

.window .window__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	padding: 10px 15px;
	border-radius: 3px 3px 0 0;
	background-color: var(--primary-color);
}

/*==== CONTENT ====*/

.window .window__content {
	padding: 15px;
}

/*==== SETTINGS PAGE ====*/
/* #form-contact {
	background-color: #f9fbfc;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} */

#form-contact .card {
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 1rem;
}

#form-contact h3 {
	margin-top: 0;
	font-size: 1.2rem;
	color: #222;
	border-bottom: 1px solid #ddd;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

#form-contact .about-user {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#form-code {
	background-color: #f9fbfc;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 1.5rem;
	margin-top: 1rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#form-code .card {
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 1rem;
}

#form-code h3 {
	margin-top: 0;
	font-size: 1.2rem;
	color: #222;
	border-bottom: 1px solid #ddd;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

/* #company-info-container {
	background-color: #f0f4f8;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 1rem 1.5rem;
	margin-bottom: 1.5rem;
	font-size: 1rem;
	color: #333;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} */

#company-info-container p {
	margin: 0.5rem 0;
	font-weight: 500;
}

#com-id {
	font-weight: bold;
	color: #121967;
}

#verified-status {
	color: green;
	font-weight: bold;
}

.settings-button {
	padding: 0.5em 1em;
	margin-top: 1rem;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	color: #fff(255, 0, 0);
	font-weight: bold;
}

/*==== ARRIVALS ====*/
#filter-arrivals {
	border-radius: var(--border-radius);
}

#clear-filter {
	border-radius: var(--border-radius);
}

#arrival-form h1 {
	color: var(--unnamed-color-121967);
	text-align: left;
	font: inherit;
	font-size: x-large;
	font-weight: 500;
	letter-spacing: 0px;
	color: #121967;
	opacity: 1;
}

#arrival-form>span {
	/* color: var(--unnamed-color-121967); */
	text-align: left;
	/* font: inherit; */
	letter-spacing: 0px;
	/* color: #121967; */
	opacity: 1;
}

.fetch-document-btn {
	width: 100%;
	margin: 0;
	border: 0;
	padding: 8px;
	color: #000000;
	background-color: #f4f5f8;
	border-radius: var(--border-radius);
	border-color: var(--border-color);
}

.fetch-document-btn:hover {
	background-color: var(--focus-color);
}

.disabled-btn {
	color: gray;
	pointer-events: none;
}

.creds-fetched {
	opacity: 50%;
}

.creds-fetched button {
	pointer-events: none;
}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.modal.hidden {
	display: none;
}

.modal-content {
	background: #fff;
	border-radius: 10px;
	width: 80%;
	max-width: 700px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 1.5rem;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	position: relative;
}

.close-btn {
	position: absolute;
	right: 1rem;
	top: 0.5rem;
	cursor: pointer;
	font-size: 1.5rem;
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 1rem;
}

/* Align checkbox and EULA button in a single row */
.consent-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	/* space between checkbox and button */
	margin-top: 0.5rem;
}

/* Make the EULA button smaller and fit inline */
.eula-btn {
	padding: 0.4rem 1rem;
	font-size: 0.9rem;
	border-radius: 8px;
	background-color: #f9c529;
	/* your theme yellow */
	color: #000;
	font-weight: 500;
	white-space: nowrap;
}

.eula-btn:hover {
	background-color: #f7b800;
}

/* Optional: prevent full-width style from other .button classes */
.consent-row .button {
	width: auto !important;
	min-width: unset;
}

.consent {
	display: none;
}

/*==============================================================
- DESKTOP AND MOBILE
==============================================================*/

/* mobile */
@media (max-width: 768px) {
	.sidebar {
		z-index: 10;
		position: fixed;
		top: 0;
		left: 0;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		transform: translateX(-101%);
	}

	.sidebar:not(.open) {
		visibility: hidden;
	}

	.sidebar.open {
		transform: translateX(0);
	}

	.page {
		padding-left: 0 !important;
	}

	.page-title {
		text-align: center;
	}
}

.panel-color {
	background: var(--active-color);
	border-radius: var(--border-radius);
}