@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100;
	src: url('res/fonts/inter-100.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100;
	src: url('res/fonts/inter-100i.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 200;
	src: url('res/fonts/inter-200.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 200;
	src: url('res/fonts/inter-200i.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url('res/fonts/inter-300.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 300;
	src: url('res/fonts/inter-300i.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('res/fonts/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 400;
	src: url('res/fonts/inter-400i.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url('res/fonts/inter-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 500;
	src: url('res/fonts/inter-500i.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('res/fonts/inter-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 600;
	src: url('res/fonts/inter-600i.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('res/fonts/inter-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 700;
	src: url('res/fonts/inter-700i.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	src: url('res/fonts/inter-800.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 800;
	src: url('res/fonts/inter-800i.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 900;
	src: url('res/fonts/inter-900.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 900;
	src: url('res/fonts/inter-900i.woff2') format('woff2');
}

@keyframes shakelogin {
	0%, 100% {
		transform: translate(-50%, -50%);
	}

	10%, 30%, 50%, 70%, 90% {
		transform: translate(calc(-50% + 16px), -50%);
	}

	20%, 40%, 60%, 80% {
		transform: translate(calc(-50% - 16px), -50%);
	}
}

@keyframes tux_feedback_top {
	1%, 100% {
		opacity: 1;
	}

	10%, 90% {
		top: 11px;
	}
}

@keyframes tux_feedback_fix_top {
	1%, 100% {
		opacity: 1;
	}

	to {
		top: 11px;
	}
}

:root {
	--saetta_o_lit: #FF6060;
	--saetta_o_dark: hsl(from var(--saetta_o_lit) h calc(s * 0.6) calc(l * 0.75));
	--saetta_o_darkest: hsl(from var(--saetta_o_dark) h s calc(l * 0.75));

	--saetta_txt: #404040;
	--saetta_white: #FFFFFF;

	--saetta_liter_gray: #F4F8FA;
	--saetta_lit_gray: #C9D8E5;
	--saetta_mid_gray: #B3C0CC;
	--saetta_dark_gray: #9FAAB5;
	--saetta_darker_gray: #707880;
	--saetta_darkest_gray: #383C40;

	--saetta_err: #FF2323;
	--saetta_ok: #28B284;
	--saetta_warn: #FF9704;
	--saetta_warn_active: #DD8408;
	--saetta_disabled: #D0D0D0;

	--saetta_button_gradient: linear-gradient(180deg, var(--saetta_lit) 0%, var(--saetta_lit) 91%, var(--saetta_darkest) 100%);
	--saetta_button_gradient_active: linear-gradient(180deg, var(--saetta_dark) 0%, var(--saetta_dark) 91%, var(--saetta_darkest) 100%);
	--saetta_button_gradient_disabled: linear-gradient(180deg, var(--saetta_lit_gray) 0%, var(--saetta_lit_gray) 91%, var(--saetta_mid_gray) 100%);

	--saetta_head_height: 80px;

	--saetta_cover_icon_color: #404040;
	--saetta_cover_icon_fill: #404040;
	--saetta_cover_icon_size: 24px;

	--tux_feedback_ok_background: #28B284dd;
	--tux_feedback_ko_background: #FF2323dd;
	--tux_feedback_warn_background: #FF9704dd;
	--tux_feedback_width: 560px;
	--tux_feedback_padding: 12px;
	--tux_feedback_font_size: 14px;
	--tux_feedback_height: 64px;

	--tux_input_height: 34px;
	--tux_input_padding: 7px;
	--tux_input_font_size: 14px;
	--tux_input_color: var(--saetta_txt);
	--tux_input_border_radius: 4px;
	--tux_input_border: solid 1px var(--saetta_dark_gray);
	--tux_input_border_focus: solid 1px var(--saetta_darkest_gray);

	--tux_input_border_err: solid 1px var(--saetta_err);
	--tux_input_background_err: #FFFAFA;

	--tux_disabled_opacity: 0.3;

	--tux_icon_color: var(--saetta_darker_gray);
	--tux_icon_fill: var(--saetta_darker_gray);
	--tux_icon_color_active: var(--saetta_darkest_gray);
	--tux_icon_fill_active: var(--saetta_darkest_gray);

	--tux_border_drop: solid 2px var(--saetta_lit);

	--tux_panel_padding: 8px;
	--tux_modal_padding: 18px;

	--tux_date_background: var(--saetta_lit);
	--tux_now_background: hsl(from var(--saetta_liter_gray) h s calc(l * 0.95));
}

.cover_icon {
	stroke: var(--saetta_cover_icon_color);
	fill: var(--saetta_cover_icon_fill);
	width: var(--saetta_cover_icon_size);
	height: var(--saetta_cover_icon_size);
}

.tux_rich_toolbar {
	--tux_input_padding: 4px;
}

#tux_feedback {
	top: -80px;
	border-radius: var(--tux_feedback_radius, 8px);
	padding-left: 48px;
}

#tux_feedback_hide {
	right: 10px;
	top: 10px;
}

.tux_filepicker {
	--tux_input_background: var(--saetta_liter_gray);
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
}

* {
	font-family: 'Inter';
	-webkit-tap-highlight-color: transparent;
	-webkit-overflow-scrolling: touch;
	background-repeat: no-repeat;
	align-items: center;
	overflow-scrolling: touch;
	interpolate-size: allow-keywords;
}

body {
	overscroll-behavior: none;
	background-color: var(--saetta_white);
	color: var(--saetta_txt);
}

b {
	font-weight: 600;
}

img {
	font-size: 0;
	object-fit: contain;
}

input, button {
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
	cursor: pointer;
}

.readonly input[type="checkbox"]+label,
.readonly input[type="radio"]+label {
	cursor: auto;
	pointer-events: none;
}

input[type="checkbox"], input[type="radio"] {
	min-width: 22px;
	min-height: 22px;
	cursor: pointer;
	background-color: var(--saetta_white);
	border: var(--tux_input_border);
	border-radius: 4px;
}

input[type="radio"], input.radio {
	border-radius: 50%;
}

input[type="checkbox"]:checked {
	background-color: var(--saetta_lit);
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path d="M2 7 L6 11 L12 3" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-size: 14px 14px;
	background-position: center center;
	border: 0;
}

input[type="radio"]:checked, input.radio:checked {
	background-color: var(--saetta_lit);
	background-image: none;
	border: 0;
}

input[type="radio"]:checked::after, input.radio:checked::after {
	content: '';
	border-radius: 50%;
	background-color: var(--saetta_white);
	display: block;
	margin: 6px;
	width: 10px;
	height: 10px;
}

.readonly input[type="checkbox"]:checked,
.readonly input[type="radio"]:checked,
.readonly input.radio:checked {
	background-color: var(--saetta_darker_gray);
}

input[type="checkbox"].slider {
	min-width: 36px;
	border: var(--tux_input_border);
	background-color: var(--saetta_lit_gray);
	border-radius: 11px;
	position: relative;
	cursor: pointer;
	transition: background-color 80ms ease-in-out;
}


input[type="checkbox"].slider::after {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--saetta_white);
	position: absolute;
	top: 1px;
	left: 1px;
	transition: left 80ms ease-in-out;
}

input[type=checkbox].slider:checked {
	border-color: var(--saetta_lit);
	background-color: var(--saetta_lit);
	background-image: none;
}

input[type=checkbox].slider:checked::after {
	left: 15px;
}

.readonly input[type=checkbox].slider:checked {
	border-color: var(--saetta_darker_gray);
	background-color: var(--saetta_darker_gray);
}

input[type="checkbox"].slider.small {
	min-width: 30px;
	min-height: 18px;
	border-radius: 9px;
}

input[type="checkbox"].slider.small::after {
	width: 14px;
	height: 14px;
}

input[type=checkbox].slider.small:checked::after {
	left: 13px;
}


input[type="checkbox"]:disabled, input[type="radio"]:disabled {
	opacity: var(--tux_disabled_opacity);
}

input[type="checkbox"]:disabled+label, input[type="radio"]:disabled+label {
	opacity: var(--tux_disabled_opacity);
}

input[type="color"] {
	border: none;
	width: 30px;
	min-width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color"]::-webkit-color-swatch {
	border: none;
}

button {
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--saetta_white);
	padding-left: 12px;
	padding-right: 12px;
	height: 34px;
	display: inline-flex;
	justify-content: center;
	cursor: pointer;
	background: var(--saetta_button_gradient);
	--tux_icon_color: var(--saetta_white);
	--tux_icon_fill: var(--saetta_white);
	--tux_icon_size: 18px;
	gap: 4px;
}

button.flat {
	background: var(--saetta_lit);
}

button.flat:active {
	background: var(--saetta_dark);
}

button:disabled,
button.white:disabled,
.readonly button {
	color: var(--saetta_mid_gray);
	--tux_icon_color: var(--saetta_mid_gray);
	--tux_icon_fill: var(--saetta_mid_gray);
	background: var(--saetta_button_gradient_disabled);
	cursor: auto;
	pointer-events: none;
}

button:active {
	background: var(--saetta_button_gradient_active);
}

button.white {
	--tux_icon_size: 20px;
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	background: var(--saetta_white);
	color: var(--saetta_dark_gray);
	border: 1px solid var(--saetta_dark_gray);
}

button.white:disabled {
	background: var(--saetta_white);
}

button.white:active {
	--tux_icon_color: var(--saetta_dark);
	--tux_icon_fill: var(--saetta_dark);
	background: var(--saetta_lit_gray);
	border: 1px solid var(--saetta_darkest_gray);
}

.readonly button.white {
	--tux_icon_color: var(--saetta_darker_gray);
	--tux_icon_fill: var(--saetta_darker_gray);
}

button.small {
	font-size: 12px;
	height: 28px;
	--tux_icon_size: 16px;
}

button.smaller {
	font-size: 11px;
	height: 22px;
	--tux_icon_size: 14px;
}

button.void {
	background: transparent;
	border: 0;
	font-weight: 400;
	color: var(--saetta_darker_gray);
	--tux_icon_size: 20px;
	--tux_icon_color: var(--saetta_darker_gray);
	--tux_icon_fill: var(--saetta_white);
}

button.void:active {
	color: var(--saetta_text);
	--tux_icon_color: var(--saetta_darkest_gray);
}

.err_msg {
	color: var(--saetta_err);
	font-size: 12px;
	line-height: 12px;
	font-weight: 400;
	position: absolute;
	left: 0px;
	bottom: 10px;
	white-space: nowrap;
}

#app_env {
	font-size: 16px;
	font-weight: 600;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	padding: 7px;
	padding-left: 28px;
	padding-right: 28px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	background-color: #b23945;
	color: #ffffff;
	box-shadow: 0px 2px 4px #00000040;
}

.shakelogin {
	animation: 500ms shakelogin ease-in-out;
}

#inner {
	position: relative;
	min-height: 620px;
	max-height: 100vh;
	height: 100vh;
	min-width: 884px;
	overflow: hidden;
}

.scroller {
	height: 1px;
}

.fakelink, a {
	display: inline-flex;
	color: var(--saetta_lit);
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
	cursor: pointer;
	overflow: hidden;
	gap: 8px;
}

.fakelink span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.fakelink img, a img {
	width: 18px;
	height: 18px;
}

.fakelink:active, a:active {
	color: var(--saetta_dark);
}

.fakelink.disabled, a.disabled {
	color: var(--saetta_txt);
	text-decoration: none;
	opacity: var(--tux_disabled_opacity);
	cursor: auto;
	pointer-events: none;
}


.form_branches {
	margin-top: 16px;
	padding: 16px;
	border-radius: 4px;
	background-color: var(--saetta_liter_gray);
	box-shadow: 0px 1px 2px #00000020;
	display: flex;
	gap: 2px;
	--tux_input_font_size: 13px;
	--tux_input_weight: 500;
	--tux_input_height: 30px;
}

.form_branches>.tux_icon {
	margin-top: 18px;
}

.form_branches .field {
	padding-bottom: 0px;
	width: 50%;
}

.form_section {
	padding: 16px;
	padding-bottom: 8px;
	border-bottom: solid 1px var(--saetta_lit_gray);
}

.form_section:last-child,
.form_section.noborder {
	border-bottom: none;
}

.form_section.force_border {
	border-bottom: solid 1px var(--saetta_lit_gray) !important;
}

.form_section_title, .form_panel_title {
	color: var(--saetta_dark);
	font-weight: 600;
	font-size: 13px;
	padding-bottom: 12px;
}

.form_panel {
	padding: 16px;
	background-color: var(--saetta_liter_gray);
	border: solid 1px var(--saetta_lit_gray);
	border-radius: 6px;
	box-shadow: 0px 1px 2px #00000020;
	margin-top: 16px;
}

.form_panel .form_section {
	padding-left: 0px;
	padding-right: 0px;
}

.form_panel.white {
	background-color: var(--saetta_white);
}

.fields {
	display: flex;
	flex-wrap: wrap;
	--fields_gap: 16px;
	column-gap: var(--fields_gap);
}

.fields.nowrap, .check.nowrap {
	flex-wrap: nowrap;
}

.col2 {
	--col: 2;
}

.col3 {
	--col: 3;
}

.col4 {
	--col: 4;
}

.col2>div,
.col3>div,
.col4>div,
.colx>div {
	width: calc((100% / var(--col)) - var(--fields_gap) + (var(--fields_gap) / var(--col)));
}

.col2>.span2 {
	width: 100%;
}

.col3>.span2 {
	width: calc(100% - ((100% / var(--col)) + (var(--fields_gap) / var(--col))));
}

.col4>.span2 {
	width: calc(100% - 2 * ((100% / var(--col)) + (var(--fields_gap) / var(--col))));
}

.fields.sliders>div {
	padding-bottom: 10px;
	padding-top: 8px;
	padding-right: 8px
}

.fields.sliders label {
	white-space: nowrap;
}

.field, .check {
	position: relative;
	padding-bottom: 28px;
	padding-top: 18px;
}

.field>label {
	position: absolute;
	font-size: 12px;
	line-height: 12px;
	font-weight: 500;
	top: 0px;
	left: 6px;
}

.field.slim,
.check.slim,
.slim .field,
.slim .check {
	padding-top: 0;
	padding-bottom: 0;
	height: var(--tux_input_height);
}

.field.semislim,
.check.semislim,
.semislim .field,
.semislim .check {
	padding-top: 12px;
	padding-bottom: 8px;
}

.check {
	display: flex;
	gap: 8px;
}

.check label {
	font-weight: 400;
	font-size: var(--tux_input_font_size);
}

.detail_row {
	display: flex;
	gap: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	--tux_icon_size: 20px;
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	--tux_icon_color_active: var(--saetta_dark);
	--tux_icon_fill_active: var(--saetta_dark);
}

.detail_row.borded {
	border-top: 1px solid var(--saetta_lit_gray);
}

.detail_row.active {
	cursor: pointer;
	border-top: 1px solid var(--saetta_lit_gray);
}

.detail_row.active:hover {
	background-color: var(--saetta_liter_gray);
}

.readonly .detail_row {
	--tux_icon_color: var(--saetta_lit_gray);
	--tux_icon_fill: var(--saetta_lit_gray);
}

.detail_add {
	display: flex;
	gap: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	--tux_icon_size: 20px;
}

.tux_photocutter, .tux_photocutter_board {
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	--tux_icon_color_active: var(--saetta_dark);
	--tux_icon_fill_active: var(--saetta_dark);
}

.tux_photo_contain {
	--tux_icon_size: 32px;
}

.login {
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background-color: #00000030;
}

.background {
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background-position-y: center;
	background-size: cover;
}

.background.img1 {
	background-position-x: right;
	background-image: url(res/Foto_1.jpg);
}

.background.img2 {
	background-position-x: left;
	background-image: url(res/Foto_2.jpg);
}

.background.img3 {
	background-position-x: right;
	background-image: url(res/Foto_3.jpg);
}

.background.img4 {
	background-position-x: right;
	background-image: url(res/Foto_4.jpg);
}

.background.img5 {
	background-position-x: left;
	background-image: url(res/Foto_5.jpg);
}


.background.img6 {
	background-position-x: right;
	background-image: url(res/Foto_6.jpg);
}

.background.img7 {
	background-position-x: left;
	background-image: url(res/Foto_7.jpg);
}

.background.img8 {
	background-position-x: right;
	background-image: url(res/Foto_8.jpg);
}

.background.img9 {
	background-position-x: right;
	background-image: url(res/Foto_9.jpg);
}

.background.img10 {
	background-position-x: left;
	background-image: url(res/Foto_10.jpg);
}

.background.img11 {
	background-position-x: left;
	background-image: url(res/Foto_11.jpg);
}

.background.img12 {
	background-position-x: left;
	background-image: url(res/Foto_12.jpg);
}





.background .copy {
	position: absolute;
	bottom: 40px;
	right: 48px;
	font-size: 11px;
	font-weight: 300;
	color: #ffffff;
}

.background .designed {
	display: flex;
	gap: 8px;
	position: absolute;
	bottom: 36px;
	left: 48px;
	font-size: 12px;
	line-height: 12px;
	white-space: nowrap;
	color: #ffffff;
}

.background .designed svg {
	height: 20px;
}

.login_panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70vw;
	min-width: 360px;
	max-width: 480px;
	padding: 32px;
	border-radius: 12px;
	background-color: #00000088;
	display: flex;
	flex-direction: column;
	align-content: center;
	box-shadow: 0px 1px 12px 3px #00000030;
}

.login_panel .top_logo {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-bottom: 4px;
}

.login_panel .top_logo svg {
	height: 50px;
}

.login_panel .top_tagline {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-bottom: 32px;
}

.login_panel .top_tagline svg {
	height: 15px;
}


.login_panel .btm_logo svg {
	height: 28px;
}

.login_panel .fakelink,
.login_panel label,
.login_panel .miniback,
.login_panel div {
	color: var(--saetta_white);
}

.login_panel .miniback {
	--tux_icon_color: var(--saetta_white);
	--tux_icon_fill: var(--saetta_white);
	--tux_icon_color_active: var(--saetta_lit_gray);
	--tux_icon_fill_active: var(--saetta_lit_gray);
}

.login_panel .fakelink:active,
.login_panel .miniback:active {
	color: var(--saetta_lit_gray);
}

#login_form {
	width: 100%;
	max-width: 340px;
	height: 360px;
}

.login_panel .remember .login_action {
	flex-grow: 1;
	text-align: right;
	padding-top: 0px;
}

.login_action {
	padding-top: 20px;
	text-align: center;
}

.login_panel button {
	min-width: 160px
}

.login_panel .logo_btm svg {
	height: 28px;
}

.miniback {
	--tux_icon_size: 22px;
	display: flex;
	font-size: 14px;
	font-weight: 300;
	gap: 4px;
	cursor: pointer;
}

.modal_part {
	padding: calc(var(--tux_modal_padding) * 2);
	padding-bottom: var(--tux_modal_padding);
	position: relative;
}

.modal_part.slim {
	padding: var(--tux_modal_padding);
}

.modal_actions {
	display: flex;
	justify-content: flex-end;
}

.modal_actions {
	gap: calc(var(--tux_modal_padding));
	padding: var(--tux_modal_padding);
}

.modal_actions button {
	min-width: 130px;
}

.workflow_actions {
	display: flex;
	gap: calc((var(--qtn_workflow_w) - (var(--tux_modal_padding) * 6) - 240px) / 6);
	padding-left: calc(var(--tux_modal_padding) * 2);
	padding-right: calc(var(--tux_modal_padding) * 2);
	padding-bottom: var(--tux_modal_padding);
}

.workflow_actions div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 48px;
}

.workflow_actions label {
	display: flex;
	text-align: center;
	justify-content: center;
	font-size: 10px;
	line-height: 12px;
	height: 24px;
}

.head_bar {
	position: absolute;
	padding-right: 12px;
	top: 0px;
	left: 0px;
	right: 0px;
	height: var(--saetta_head_height);
	display: flex;
	gap: 24px;
	border-top: solid 8px var(--saetta_lit);
}

.head_logo {
	display: flex;
	gap: 14px;
}

.head_logo .logo {
	cursor: pointer;
}

.head_logo .logo>svg {
	height: 38px;
}

.head_logo .tagline {
	width: 196px;
	overflow: hidden;
	transition:
		opacity 120ms ease-in-out,
		width 120ms ease-in-out;
}

.head_logo .tagline>svg {
	margin-top: 4px;
	height: 16px;
}

.hamburger {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 22px;
	padding-right: 22px;
	font-size: 0px;
	--tux_icon_size: 32px;
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	--tux_icon_color_active: var(--saetta_dark);
	--tux_icon_fill_active: var(--saetta_dark);
}

.menu_expand {
	width: 12px;
	height: 128px;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	background-color: var(--saetta_lit);
	position: fixed;
	left: 0px;
	top: calc(50% - 64px);
	justify-content: center;
	--tux_icon_color: var(--saetta_white);
	--tux_icon_fill: var(--saetta_white);
	--tux_icon_size: 24px;
	display: none;
	cursor: pointer;
	box-shadow: 1px 0px 1px #00000020;
}

.menu_expand:active {
	background-color: var(--saetta_dark);
}

.side_expanded .head_bar .hamburger {
	opacity: 0;
	pointer-events: none;
}

/* side bar sections */

.side_bar {
	position: absolute;
	top: var(--saetta_head_height);
	padding-top: 8px;
	left: 0px;
	bottom: 0px;
	width: 76px;
	border-top-right-radius: 8px;
	display: flex;
	align-items: stretch;
	flex-direction: column;
	background-color: var(--saetta_lit);
	font-size: 12px;
	--tux_icon_color: var(--saetta_white);
	--tux_icon_fill: var(--saetta_white);
	--tux_icon_size: 32px;
	box-shadow: 2px 0px 2px #00000020;
	transition: width 240ms ease-in-out;
}

.side_bar:has(.xs) {
	--tux_icon_size: 28px;
}

.side_expanded .side_bar {
	overflow: hidden;
}

.side_expanded .side_bar {
	left: 0;
	width: 296px;
}

.side_bar .main_section {
	padding-right: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	gap: 16px;
	cursor: pointer;
	display: flex;
	border-bottom: solid 1px #FFFFFF33;
	position: relative;
}

.side_bar:has(.xs) .main_section {
	gap: 18px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.side_bar .main_section:hover,
.side_bar .main_section.selected {
	background-color: #00000016;
}

.side_bar .section_name {
	color: var(--saetta_white);
	font-size: 14px;
	font-weight: 300;
	white-space: nowrap;
	display: none;
}

.side_bar .section_icon {
	font-size: 0;
}

.side_bar .selected .section_name {
	font-weight: 700;
}

.side_expanded .side_bar .section_name {
	display: block;
}

.side_bar .indicator {
	opacity: 0;
	width: 4px;
	flex-shrink: 0;
	border-radius: 0px 4px 4px 0px;
	background: var(--saetta_white);
	height: 38px;
}

.side_bar:has(.xs) .indicator {
	height: 34px;
}

.side_bar .selected .indicator {
	opacity: 1;
}

/* fine -- side bar sections */

.side_operator {
	position: absolute;
	bottom: 6px;
	left: 8px;
}

.operator_info {
	display: flex;
	gap: 12px;
}

.operator_name {
	font-size: 14px;
	line-height: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 208px;
	max-width: 208px;
}

.operator_name span {
	font-size: 12px;
	line-height: 12px;
	font-weight: 200;
	color: var(--saetta_dark_gray);
}

.operator_photo {
	border-radius: 50%;
	width: 42px;
	height: 42px;
	background-color: var(--saetta_white);
	overflow: hidden;
	box-shadow: 0px 1px 2px 1px #00000030;
	--tux_icon_color: var(--saetta_mid_gray);
	--tux_icon_fill: var(--saetta_mid_gray);
	--tux_icon_size: 28px;
	cursor: pointer;
}

.operator_photo svg {
	margin: 7px;
}

.operator_photo img {
	width: 42px;
	height: 42px;
	object-fit: cover;
}

.operator_photo img.logo {
	object-fit: contain;
}

.operator_tondo {
	padding: 8px;
	position: relative;
}

.operator_tondo>.operator_info .operator_name {
	display: none;
	color: var(--saetta_white);
}

.operator_tondo>.operator_info .operator_name span {
	color: var(--saetta_white);
}

.side_expanded .operator_tondo>.operator_info .operator_name {
	display: block;
}

#operator_menu {
	padding: var(--tux_panel_padding);
	padding-top: 40px;
	bottom: 0px;
	left: 0px;
	width: 280px;
	--tux_icon_color: var(--saetta_darker_gray);
	--tux_icon_fill: var(--saetta_darker_gray);
	--tux_icon_size: 18px;
}

#operator_menu .close {
	position: absolute;
	top: 8px;
	right: 12px;
}

#operator_menu .operator_photo {
	box-shadow: 0px 0px 0px 1px var(--saetta_mid_gray);
}

.operator_menu_actions {
	padding-bottom: 12px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--tux_panel_padding);
}

.operator_menu_actions>div {
	background-color: var(--saetta_liter_gray);
	border-radius: 3px;
	padding: 6px;
	display: flex;
	cursor: pointer;
}

.operator_menu_actions>div:hover {
	background-color: var(--saetta_lit_gray);
	--tux_icon_color: var(--saetta_white);
	--tux_icon_fill: var(--saetta_white);
}

.operator_menu_actions>div>div {
	text-align: left;
	font-size: 14px;
	flex-grow: 1;
}

.nested {
	position: absolute;
	top: var(--saetta_head_height);
	left: 76px;
	bottom: 24px;
	right: 0px;
	padding: 12px;
	padding-top: 0px;
	transition: left 120ms ease-in-out;
}

.scroll_view {
	padding-bottom: 0px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.nested.ufo, .nested.rocket {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nested.ufo svg {
	height: 25vh;
}

.nested.rocket svg {
	height: 50vh;
}

.foot_bar {
	position: absolute;
	left: 0px;
	height: 24px;
	bottom: 0px;
	right: 0px;
	background-color: var(--saetta_dark_gray);
	display: flex;
}

.foot_bar .version {
	color: var(--saetta_white);
	font-size: 12px;
	text-align: center;
	flex-grow: 1;
	font-weight: 300;
}

.scroll_content {
	flex-grow: 1;
	overflow: auto;
}

.max_w {
	display: flex;
	flex-direction: column;
}

.max_w>div {
	width: 100%;
	max-width: 1000px;
}

.criteria {
	border-radius: 8px;
	background: linear-gradient(180deg, #F5F9FC 0%, #E1E9F2 100%);
	box-shadow: 0px 1px 1px 1px #00000020;
	padding: 12px;
	display: flex;
	gap: 12px;
}

.criteria.expandable {
	display: block;
}

.entity.expandable {
	padding-top: 16px;
	padding-left: 34px;
}

.criteria .entity {
	display: flex;
	gap: 12px;
	font-size: 16px;
	line-height: 16px;
	flex-wrap: wrap;
}

.criteria .entity>svg {
	--tux_icon_size: 22px;
}

.criteria .back {
	font-size: 0;
	--tux_icon_size: 24px;
}

.criteria .search_field {
	width: 240px;
}

.criteria .actions {
	display: flex;
	flex-grow: 1;
	gap: 16px;
	justify-content: flex-end;
}

.nested .breadcrumb {
	padding: 16px;
	padding-bottom: 4px;
	display: flex;
	transition: height, 100ms ease-in-out;
}

.nested .breadcrumb>div:first-child {
	display: flex;
	font-size: 17px;
	font-weight: 600;
	color: var(--saetta_dark);
}

.nested .breadcrumb.reduced {
	padding-top: 0px;
	padding-bottom: 0px;
	overflow: hidden;
	height: 0px;
}

.nested .breadcrumb .entity_rowCount {
	flex-grow: 1;
	text-align: right;
	font-size: 12px;
}

.context {
	top: -56px;
	right: 20px;
	position: absolute;
	height: 48px;
	transition:
		top 220ms ease-in-out,
		bottom 220ms ease-in-out;
}

.context.show {
	top: 20px;
}

.context .strip {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	background-color: var(--saetta_white);
	border: solid 1px var(--saetta_mid_gray);
	border-right: 0;
	box-shadow: 0 0 2px 1px #00000010;
	height: 48px;
	position: absolute;
	top: 0px;
	right: 46px;
	width: 304px;
	opacity: 1px;
	padding-left: 10px;
	display: flex;
	gap: 10px;
	--tux_icon_color: var(--saetta_o_lit);
	--tux_icon_fill: var(--saetta_o_lit);
	--tux_icon_color_active: var(--saetta_o_dark);
	--tux_icon_fill_active: var(--saetta_o_dark);
	--tux_icon_size: 24px;
	overflow: hidden;
	transition:
		width 220ms ease-in-out,
		opacity 220ms ease-in-out;
}

.context .ctx_name {
	font-size: 14px;
	line-height: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 244px;
	max-width: 244px;
}

.context .badge {
	position: absolute;
	top: 0px;
	right: 0px;
	display: flex;
	justify-content: center;
	background-color: var(--saetta_o_lit);
	width: 56px;
	height: 48px;
	border-radius: 8px;
	--tux_icon_color: var(--saetta_white);
	--tux_icon_fill: var(--saetta_white);
	--tux_icon_size: 26px;
	box-shadow: 0 0 4px 1px #00000020;
}

.context .exit {
	position: absolute;
	bottom: -4px;
	right: -7px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background-color: var(--saetta_white);
	border: solid 1.5px var(--saetta_o_lit);
	display: flex;
	justify-content: center;
	--tux_icon_size: 13px;
	cursor: pointer;
}

.filter_badge .badge {
	right: 28px;
}

.filter_badge .exit {
	right: 21px;
}

.imp_badge, .filter_badge {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
}

.context.imp .imp_badge {
	z-index: 2
}

.context.imp .filter_badge {
	z-index: 1
}

.context.filter .filter_badge {
	z-index: 2
}

.context.filter .imp_badge {
	z-index: 1
}

.context.imp .strip,
.context.filter .strip {
	right: 74px;
}

.context.imp .filter_strip,
.context.filter .imp_strip,
.context.imp .filter_badge .exit,
.context.filter .imp_badge .exit {
	display: none;
}

.context.imp .filter_badge .badge,
.context.filter .imp_badge .badge {
	background-color: var(--saetta_o_dark);
	--tux_icon_size: 16px;
}

.context.imp .filter_badge .badge {
	padding-right: 26px;
}

.context.filter .imp_badge .badge {
	padding-left: 26px;
}

.entity_icons_ent_container {
	position: relative;
}

.entity_icons_ent {
	position: absolute;
	top: -38px;
	right: 0px;
	display: flex;
	gap: 8px;
}

.entity_columns {
	padding-top: 12px;
	padding-bottom: 8px;
	display: flex;
	gap: 8px;
}

.entity_columns_sep {
	height: 8px;
	background: linear-gradient(0deg, #ffffff 0%, #E1E1E1 100%);
	margin-bottom: 8px;
}

.entity_col {
	font-size: 12px;
	line-height: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.entity_col.sort {
	display: flex;
	gap: 4px;
	cursor: pointer;
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	--tux_icon_color_active: var(--saetta_dark);
	--tux_icon_fill_active: var(--saetta_dark);
}

.entity_row {
	position: relative;
	display: flex;
	gap: 8px;
	padding-block: 8px;
	cursor: pointer;
	border-top: 1px solid var(--saetta_lit_gray);
}

.entity_disabled {
	opacity: var(--tux_disabled_opacity);
}

.entity_suspended {
	color: var(--saetta_warn_active);
}

.entity_row:hover {
	background-color: var(--saetta_liter_gray);
}

.row_branches {
	font-size: 10px;
	line-height: 10px;
	color: var(--saetta_darker_gray);
}

.entity_icons {
	display: flex;
	padding-left: 8px;
	gap: 8px;
	--tux_icon_size: 18px;
	--tux_icon_color: var(--saetta_mid_gray);
	--tux_icon_fill: var(--saetta_mid_gray);
}

.entity_icon,
.entity_dots,
.button_icon {
	background-color: var(--saetta_lit);
	border-radius: 3px;
	min-height: 28px;
	min-width: 28px;
	width: 28px;
	height: 28px;
	display: flex;
	justify-content: center;
	--tux_icon_size: 20px;
	--tux_icon_color: var(--saetta_white);
	--tux_icon_fill: var(--saetta_white);
	cursor: pointer;
	font-size: 0;
}

.button_icon {
	min-height: 48px;
	min-width: 48px;
	--tux_icon_size: 26px;
}

.button_icon.white {
	background-color: var(--saetta_white);
	border: solid 1px var(--saetta_lit);
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
}

.readonly .entity_icon,
.readonly .entity_dots,
.readonly .button_icon,
.entity_icon.disabled {
	color: var(--saetta_mid_gray);
	--tux_icon_color: var(--saetta_mid_gray);
	--tux_icon_fill: var(--saetta_mid_gray);
	background: var(--saetta_lit_gray);
	cursor: auto;
	pointer-events: none;
}

.button_icon.dothis {
	background-color: var(--saetta_warn);
}

.entity_icon:active,
.entity_dots:active,
.button_icon:active {
	background-color: var(--saetta_dark);
}

.button_icon.white:active {
	background-color: var(--saetta_liter_gray);
}

.button_icon.dothis:active {
	background-color: var(--saetta_warn_active);
}

.entity_icon.white {
	background-color: var(--saetta_white);
	border: 1px solid var(--saetta_lit_gray);
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
}

.entity_icon.white:active {
	border: 1px solid var(--saetta_dark_gray);
	--tux_icon_color_active: var(--saetta_dark);
	--tux_icon_fill_active: var(--saetta_dark);
	--tux_icon_color: var(--saetta_dark);
	--tux_icon_fill: var(--saetta_dark);
}

.entity_icon.gray {
	background-color: var(--saetta_lit_gray);
	border: 1px solid var(--saetta_lit_gray);
	--tux_icon_color: var(--saetta_white);
	--tux_icon_fill: var(--saetta_white);
}

.entity_icon.gray:active {
	background-color: var(--saetta_liter_gray);
	border: 1px solid var(--saetta_mid_gray);
	--tux_icon_color_active: var(--saetta_mid_gray);
	--tux_icon_fill_active: var(--saetta_mid_gray);
	--tux_icon_color: var(--saetta_mid_gray);
	--tux_icon_fill: var(--saetta_mid_gray);
}

.entity_row_col {
	font-size: 13px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.expired .entity_row_col {
	color: var(--saetta_mid_gray);
	--tux_icon_color: var(--saetta_mid_gray);
	--tux_icon_fill: var(--saetta_mid_gray);
}

.entity_row_col.dates {
	font-size: 12px;
	display: flex;
	overflow: visible;
}

.float_dater {
	--tux_icon_size: 12px;
	font-size: 0;
	line-height: 0;
	padding: 4px;
	position: relative;
}

.float_date {
	position: absolute;
	top: 19px;
	right: 0px;
	display: none;
	padding: 8px;
	pointer-events: none;
	font-size: 10px;
	line-height: 10px;
	white-space: nowrap;
	color: var(--saetta_white);
	background-color: #404040F0;
	border-radius: 6px;
	box-shadow: 0px 1px 12px 3px #00000030;
	z-index: 8000;
}

:hover>.float_date {
	display: block;
}

.st_icon {
	width: 18px;
	height: 18px;
}

.expired .st_icon.st_expirable * {
	stroke: var(--saetta_mid_gray) !important;
}

.entity_more {
	text-align: center;
	padding-top: 8px;
	padding-bottom: 28px
}

.data {
	height: var(--tux_input_height);
	border-radius: var(--tux_input_border_radius);
	border: dashed 1px var(--saetta_lit_gray);
	padding: var(--tux_input_padding);
	display: flex;
	font-size: var(--tux_input_font_size);
	color: var(--saetta_txt);
	font-weight: 400;
	background-color: var(--saetta_white);
	overflow: hidden;
	text-overflow: ellipsis;
}

.data.large {
	align-items: flex-start;
	overflow: auto;
	pointer-events: all !important;
	display: block;
}

.data.empty {
	color: var(--tux_placeholder_color, #9a9a9a);
}


.data.disabled,
.disabled .data {
	opacity: var(--tux_disabled_opacity);
}

.readonly input,
.readonly textarea,
.readonly select,
.readonly .tux_datepicker,
.readonly .tux_filepicker,
.readonly .tux_rich_editor,
.readonly .tux_rich_toolbar,
.readonly .tux_photocutter,
.readonly .tux_datalist_wrapper {
	--tux_input_border: dashed 1px var(--saetta_lit_gray);
	--tux_icon_color: var(--saetta_lit_gray);
	--tux_icon_fill: var(--saetta_lit_gray);
	cursor: default;
	pointer-events: none;
}

.readonly .with_icon,
.readonly .tux_select_wrapper {
	--tux_icon_color: var(--saetta_lit_gray);
	--tux_icon_fill: var(--saetta_lit_gray);
	cursor: default;
	pointer-events: none;
}

#side_screen {
	position: fixed;
	left: 0px;
	top: 8px;
	right: 0px;
	bottom: 24px;
	background-color: transparent;
	transition: opacity 120ms ease-in-out;
}

/* ui_tabs */

.ui_tabs {
	border-bottom: var(--tux_input_border);
	--tux_icon_size: 22px;
}

.ui_tabs>div {
	display: flex;
}

.ui_tabs .disabled {
	opacity: var(--tux_disabled_opacity);
	pointer-events: none;
}

.ui_tabs_tab {
	padding: calc(var(--tux_input_padding));
	padding-top: calc(var(--tux_input_padding) * 2);
	padding-bottom: calc(var(--tux_input_padding) * 1.5);
	gap: var(--tux_input_padding);
	font-size: 13px;
	font-weight: 400;
	display: flex;
	cursor: pointer;
	justify-content: center;
}

.ui_tabs_tab.selected {
	font-weight: 600;
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	position: relative;
	cursor: auto;
}

.ui_tabs_tab.selected .tux_icon {
	cursor: auto;
}

.ui_tabs_tab.selected::after {
	content: '';
	display: block;
	border-radius: 4px 4px 0 0;
	height: 4px;
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	background-color: var(--saetta_lit);
}

.ui_tabs_tab:active {
	--tux_icon_color: var(--saetta_dark);
	--tux_icon_fill: var(--saetta_dark);
}

/* mail_button */

.mail_button {
	--tux_icon_size: 20px;
	background-color: var(--saetta_liter_gray);
	padding: 4px;
	padding-left: 8px;
	padding-right: 8px;
	border-radius: 4px;
	font-size: 0;
	position: relative;
}

.mail_button.notsent {
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	--tux_icon_color_active: var(--saetta_dark);
	--tux_icon_fill_active: var(--saetta_dark);
}


.float_mail_time {
	position: absolute;
	top: 28px;
	right: 0px;
	display: none;
	padding: 8px;
	pointer-events: none;
	font-size: 10px;
	line-height: 10px;
	white-space: nowrap;
	color: var(--saetta_white);
	background-color: #404040F0;
	border-radius: 6px;
	box-shadow: 0px 1px 12px 3px #00000030;
	z-index: 8000;
}

:hover>.float_mail_time {
	display: block;
}

/* ui_panel_tips */

#float_panel_content {
	position: absolute;
}

#float_panel {
	position: fixed;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	z-index: 6000;
}

.tips_i {
	--tux_icon_fill: var(--saetta_white);
	--tux_icon_fill_active: var(--saetta_white);
}

.ui_panel_tips {
	position: relative;
	padding: 16px;
	padding-top: 24px;
	font-size: 12px;
	color: var(--saetta_white);
	background-color: #404040F0;
	border-radius: 6px;
	box-shadow: 0px 1px 12px 3px #00000030;
}

.ui_panel_tips .ui_panel_tips_close {
	--tux_icon_size: 16px;
	--tux_icon_color: var(--saetta_white);
	cursor: pointer;
	position: absolute;
	top: 8px;
	right: 8px;
}

.ui_panel_tips ul,
.ui_panel_tips ol,
.ui_panel_tips blockquote {
	padding-left: 16px;
}

/* ui mobile */

.tux_mobile_wrapper {
	position: relative;
	width: var(--tux_input_width, 100%);
	display: inline-block;
	vertical-align: bottom;
}

.tux_mobile_wrapper.err input {
	border: var(--tux_input_border_err, solid 1px #bb0000);
	background-color: var(--tux_input_background_err, #fffbfb);
}

.tux_mobile_wrapper>select {
	position: absolute;
	top: 0px;
	left: 0px;
	height: var(--tux_input_height);
	opacity: 0;
	width: calc(var(--tux_icon_size, 18px) + (var(--tux_input_padding, 6px) * 1.5) + 42px);
}

.tux_mobile_wrapper>span {
	display: inline-block;
	position: absolute;
	font-size: var(--tux_input_font_size);
	line-height: var(--tux_input_font_size);
	top: calc(50% - (var(--tux_input_font_size) / 2));
	left: calc(var(--tux_icon_size, 18px) + (var(--tux_input_padding, 6px) * 1.5));
}

.tux_mobile_wrapper .tux_input {
	padding-left: calc(var(--tux_icon_size, 18px) + (var(--tux_input_padding, 6px) * 1.5) + 42px);
}

.tux_mobile_wrapper .tux_active_icon {
	position: absolute;
	top: calc(50% - (var(--tux_icon_size, 18px) / 2));
	left: var(--tux_input_padding, 6px)
}

/* ui time */

.tux_time_wrapper {
	width: var(--tux_input_width, 100%);
	display: inline-flex;
	gap: 4px;
	position: relative;
}

.tux_time_wrapper>span {
	font-size: var(--tux_input_font_size);
	color: var(--tux_input_color);
}

.tux_time_wrapper.err input {
	border: var(--tux_input_border_err, solid 1px #bb0000);
	background-color: var(--tux_input_background_err, #fffbfb);
}

.tux_time_wrapper .tux_input {
	width: 50%;
}

/* ui money */

.ui_money_cols {
	display: flex;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	padding-left: 6px;
	padding-right: 6px;
	padding-bottom: 8px;
}

.ui_money_row {
	display: flex;
	gap: 8px;
	font-size: 12px;
	font-weight: 400;
	padding: 6px;
	--tux_icon_size: 20px;
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	--tux_icon_color_active: var(--saetta_dark);
	--tux_icon_fill_active: var(--saetta_dark);

	background-color: var(--saetta_white);
	border-top: solid 1px var(--saetta_mid_gray);
}

.readonly .ui_money_row {
	--tux_icon_color: var(--saetta_lit_gray);
	--tux_icon_fill: var(--saetta_lit_gray);
}

.ui_money_row.disabled>div, .ui_money_row.notapply>div {
	opacity: var(--tux_disabled_opacity);
}

.ui_money_row:last-child {
	border-bottom: solid 1px var(--saetta_mid_gray);
}

.ui_money_algo {
	display: flex;
	--tux_icon_size: 12px;
	--tux_icon_color: var(--saetta_darker_gray);
	--tux_icon_fill: var(--saetta_white);
	overflow: visible;
}

.ui_money_algoer {
	--tux_icon_size: 12px;
	font-size: 0;
	line-height: 0;
	padding: 4px;
	position: relative;
}

.ui_money_float {
	position: absolute;
	top: 19px;
	right: 0px;
	display: none;
	padding: 8px;
	pointer-events: none;
	font-size: 10px;
	line-height: 14px;
	color: var(--saetta_white);
	background-color: #404040F0;
	border-radius: 6px;
	box-shadow: 0px 1px 12px 3px #00000030;
	z-index: 8000;
	width: 240px;
}

:hover>.ui_money_float {
	display: block;
}

/* ui_satpicker */

.readonly .ui_satpicker {
	--tux_input_border: dashed 1px var(--saetta_lit_gray);
	--tux_icon_color: var(--saetta_lit_gray);
	--tux_icon_fill: var(--saetta_lit_gray);
	pointer-events: none;
	cursor: default;
}

.ui_satpicker.empty span {
	color: var(--tux_placeholder_color, #9a9a9a) !important;
	font-weight: var(--tux_placeholder_weight, 400) !important;
}

.ui_satpicker.disabled {
	opacity: var(--tux_disabled_opacity, 0.3);
	cursor: auto;
}

.ui_satpicker.disabled:active {
	border: var(--tux_input_border, solid 1px #9a9a9a);
}

.ui_satpicker {
	border: var(--tux_input_border, solid 1px #9a9a9a);
	border-radius: var(--tux_input_border_radius, 6px);
	height: var(--tux_input_height, 34px);
	font-size: var(--tux_input_font_size, 16px);
	font-weight: var(--tux_input_weight, 400);
	color: var(--tux_input_color, #000000);
	padding-left: var(--tux_input_padding, 6px);
	padding-right: var(--tux_input_padding, 6px);
	width: var(--tux_input_width, 100%);
	background-color: var(--tux_input_background, #ffffff);
	overflow: hidden;
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	position: relative;
	display: inline-flex;
	gap: var(--tux_input_padding, 6px);
	cursor: pointer;
}

.ui_satpicker:active {
	border: var(--tux_input_border_focus, solid 1px #404040);
}

.ui_satpicker.err {
	border: var(--tux_input_border_err, solid 1px #bb0000);
	background-color: var(--tux_input_background_err, #fffbfb);
}

.ui_satpicker span {
	flex-grow: 1;
	font-size: var(--tux_input_font_size, 16px);
	font-weight: var(--tux_input_weight, 400);
	color: var(--tux_input_color, #000000);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ask_sat {
	width: 680px;
	height: 380px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.ask_sat_top {
	box-shadow: 0px 3px 3px 1px #00000020;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 600;
	padding: var(--tux_modal_padding);
}

.ask_sat_scroller {
	flex-grow: 1;
	overflow: auto;
	padding-left: var(--tux_modal_padding);
	padding-right: var(--tux_modal_padding);
}

.ui_sat_selctor {
	margin-top: 12px;
	border-radius: 4px;
	border: solid 1px var(--saetta_mid_gray);
	padding: 10px;
	padding-left: 16px;
	padding-right: 16px;
	display: flex;
	gap: 24px;
	height: 64px;
}

.ui_sat_selctor .sat_name {
	font-size: 14px;
	line-height: 20px;
	flex-grow: 1;
}

.ui_sat_selctor .sat_price {
	width: 180px;
	font-size: 13px;
	line-height: 20px;
	display: flex;
}

.ui_sat_selctor .sat_logo {
	width: 42px;
	height: 42px;
	display: flex;
	font-size: 0;
}

.ui_sat_selctor .sat_logo img {
	width: 42px;
	height: 42px;
}

.ui_sat_selctor.selected {
	border: solid 1px var(--saetta_lit);
	background-color: var(--saetta_liter_gray);
}

.ui_sat_selctor:active {
	background-color: var(--saetta_liter_gray);
	border: solid 1px var(--saetta_lit);
}

.with_icon {
	position: relative;
	--tux_icon_color: var(--saetta_lit);
	--tux_icon_fill: var(--saetta_lit);
	--tux_icon_color_active: var(--saetta_dark);
	--tux_icon_fill_active: var(--saetta_dark);
}

.with_icon>.tux_input {
	padding-right: calc(var(--tux_icon_size, 18px) + (var(--tux_input_padding, 6px) * 2));
}

.with_icon>.tux_active_icon {
	position: absolute;
	top: calc(50% - (var(--tux_icon_size, 18px) / 2));
	right: var(--tux_input_padding, 6px);
}

.with_icon:has(:disabled)>.tux_active_icon {
	opacity: var(--tux_disabled_opacity, 0.3);
	pointer-events: none;
	cursor: auto;
}

.check_mandatory {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	background-color: var(--saetta_lit_gray);
	--tux_icon_size: 14px;
	--tux_icon_color: var(--saetta_dark);
	--tux_icon_fill: var(--saetta_dark);
}

.readonly .check_mandatory {
	--tux_icon_color: var(--saetta_darker_gray);
	--tux_icon_fill: var(--saetta_darker_gray);
}

.check_tondo {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	background-color: var(--saetta_lit);
	--tux_icon_size: 14px;
	--tux_icon_color: var(--saetta_white);
	--tux_icon_fill: var(--saetta_white);
}

.readonly .check_tondo {
	background-color: var(--saetta_darker_gray);
}

.cvt_covers {
	display: flex;
	align-items: stretch;
	justify-content: space-around;
}

.cvt_cover {
	border: solid 1px var(--saetta_lit_gray);
	background-color: #ffffff;
	border-radius: 6px;
	padding: 12px;
	padding-bottom: 16px;
	font-size: 13px;
	font-weight: 400;
	width: 174px;
	height: 140px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	box-shadow: 0px 1px 6px 0px #00000030;
	position: relative;
}

.cvt_cover .check_tondo {
	position: absolute;
	bottom: 8px;
	right: 8px;
}

.cvt_cover.selected {
	font-weight: 500;
	border: solid 1px var(--saetta_lit);
}

.readonly .cvt_cover {
	cursor: auto;
	pointer-events: none;
}

.readonly .cvt_cover.selected {
	border: solid 1px var(--saetta_darker_gray);
}

.cvt_cover:hover {
	border: solid 1px var(--saetta_lit);
}

.cover_icons {
	display: flex;
	gap: 6px;
	--saetta_cover_icon_size: 24px;
}

.cover_icons>div {
	border-radius: 4px;
	display: flex;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: var(--saetta_white);
	border: solid 1px var(--saetta_lit_gray);
	box-shadow: 0px 1px 2px 0px #00000010;
}

.selected .cover_icons>div {
	border: solid 1px var(--saetta_lit);
}

.readonly .selected .cover_icons>div {
	border: solid 1px var(--saetta_darker_gray);
}

/* */

@media only screen and (max-width: 960px) {
	.head_logo .tagline {
		width: 0;
		opacity: 0;
	}

	.side_bar {
		width: 0;
		left: -76px;
	}

	.nested {
		left: 0px;
	}
}

@media only screen and (max-height: 770px) {
	:root {
		--saetta_head_height: 18px;
	}

	.hamburger {
		display: none;
	}

	.head_logo {
		display: none;
	}

	.context {
		top: unset;
		bottom: -60px;
	}

	.context.show {
		top: unset;
		bottom: 48px;
	}

	.context .badge {
		cursor: pointer;
	}

	.context .badge:active {
		background-color: var(--saetta_o_dark);
	}

	.context .strip {
		width: 0px;
		opacity: 0px;
	}

	.context.opened .strip {
		width: 304px;
		opacity: 1px;
	}
}

@media only screen and (max-width: 960px) and (max-height: 770px) {
	.menu_expand {
		display: flex;
	}
}