.expTarget {
	display : none;
	overflow : hidden;
}

.expTarget.show {
	display : initial;
}

.DropDown {
	position : relative;
}

.DropDownContent {
	position : absolute;
	z-index : 200;
	background-color : var(--color-card);
	box-shadow : var(--box-shadow);
	border-radius : var(--radius-200);
	border : var(--border-small-light);
}

.DropDown .DropDownContent.side_right {
	right : 0;
}

.DropDown .DropDownContent.side_left {
	left : 0;
}

.DropDown > *:nth-child(2) {
	min-width : 100%;
}

.DropDown > *:first-child {
	height : 100%;
}

.DropDown > *:first-child:not(.primary-btn):hover,
.DropDown .isDropped {
	background-color : var(--color-hover);
}

.ToolTip {
	position : relative;
	display : inline-block;
}

.ToolTip > .ToolTipText {
	font-size : var(--font-size-200);
	visibility : hidden;
	background-color : rgba(0, 0, 0, 0.85);
	color : #fff;
	text-align : center;
	padding : var(--space-200) var(--space-100);
	border-radius : var(--radius-100);
	position : absolute;
	z-index : 100000000;
	opacity : 0;
	transition : opacity 1s 0.5s;
}

.ToolTip > .ToolTipText span {
	min-width : 4rem;
	width : max-content;
	max-width : 12rem;
	white-space : normal;
	text-align : left;
	display : flex;
	justify-content : center;
}

.ToolTip:hover .ToolTipText {
	visibility : visible;
	opacity : 1;
}

.ToolTip .ToolTipText.side_right {
	top : 0;
	left : calc(100% + 1rem);
}

.ToolTip .ToolTipText.side_right::after {
	content : " ";
	position : absolute;
	top : 50%;
	right : 100%;
	margin-top : -5px;
	border-width : 5px;
	border-style : solid;
	border-color : transparent rgba(0, 0, 0, 0.7) transparent transparent;
}

.ToolTip .ToolTipText.side_left {
	top : 0;
	right : calc(100% + 1rem);
}

.ToolTip .ToolTipText.side_left::after {
	content : " ";
	position : absolute;
	top : 50%;
	left : 100%;
	margin-top : -5px;
	border-width : 5px;
	border-style : solid;
	border-color : transparent transparent transparent rgba(0, 0, 0, 0.7);
}

.ToolTip .ToolTipText.side_bottom {
	top : calc(100% + 1rem);
	left : 50%;
	margin-left : -112.5%;
}

.ToolTip .ToolTipText.side_bottom::after {
	content : " ";
	position : absolute;
	bottom : 100%;
	left : 50%;
	margin-left : -5px;
	border-width : 5px;
	border-style : solid;
	border-color : transparent transparent rgba(0, 0, 0, 0.7) transparent;
}

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

main {
	height : 38rem;
	min-width : min-content;
	display : flex;
	flex-direction : column;
}

.LoginDiv {
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : var(--space-200);
	height : 100%;
	font-size : var(--font-size-300);
	box-shadow : var(--box-shadow);
	min-width : 20rem;
	max-width : 20rem;
	min-height : 35rem;
	padding : var(--space-600) !important;
}

.LoginDiv .TabPanel {
	width : 100%;
}

.LoginDiv .resetOptionsContent {
	display : flex;
	flex-direction : column;
	flex : 1 1 auto;
	min-height : 0;
}

.LoginDiv .resetOptionsContent > .TabPanel {
	flex : 1 1 auto;
	min-height : 0;
	overflow : hidden;
	grid-template-rows : auto minmax(0, 1fr) !important;
}

.LoginDiv #passwordResetOptions > .TabPage[data-TabPage="qrResetOption_tab"] {
	min-height : 0;
	overflow : hidden;
}

.LoginDiv #qr_scanner_form {
	min-height : 0;
	overflow : hidden;
}

.LoginDiv #qr_scanner_form .form-head {
	flex : 0 0 auto;
	margin-top : 0;
}

.LoginDiv #qr_scanner_form .form-body {
	flex : 1 1 auto;
	min-height : 0;
}

.LoginDiv #qr_scanner_form .QRScanner {
	flex : 1 1 auto;
	min-height : 0;
	width : 100%;
	margin-bottom : 0;
}

.LoginDiv #qr_scanner_form .QRScanner video {
	flex : 1 1 0;
	height : 0;
	min-height : 0;
	max-height : 100%;
	aspect-ratio : auto;
}

.LoginDiv #qr_scanner_form .QRScanner > button {
	flex : 0 0 auto;
	max-width : 100%;
}

.LoginDiv form {
	gap : var(--space-500);
	padding : var(--space-50);
	height : 100%;
}

.LoginDiv .form-body {
	display : grid;
	grid-template-columns : auto;
	flex-grow : unset;
}

.LoginDiv .form-head {
	display : flex;
	flex-direction : column;
	margin-top : var(--space-400);
}

.LoginDiv .form-footer {
	display : grid;
	grid-template-columns : 1fr;
	margin-top : auto;
}

.LoginDiv .form-footer button {
	min-height : 2.2rem !important;
}

.LoginDiv .orDiv {
	font-weight : 500;
	display : grid;
	grid-template-columns : 1fr auto 1fr;
	align-items : center;
	gap : var(--space-500);
	margin : var(--space-300) var(--space-500);
	opacity : 0.8;
}

.LoginDiv img {
	width : 6rem;
	margin : var(--space-400) auto;
}

.LoginDiv #qr_reset_btn,
.LoginDiv #digit_reset_btn {
	width : min-content;
	margin-left : auto;
	color : var(--color-info);
	min-height : min-content;
	font-weight : 550;
}

.LoginDiv #errorText {
	max-width : 20rem;
}

.TabPanel {
	display : grid;
	overflow-y : auto;
	flex-grow : 1;
	gap : var(--space-200);
}

.TabPanel > div {
	display : flex;
}

.TabPanel > .TabPanel {
	padding : 0 !important;
}

.TabPanel .TabMenu .selected {
	opacity : 1;
}

.TabPanel > .TabPage {
	overflow-y : auto;
	display : flex;
	flex-direction : column;
}

.TabPanel > .TabPage.TabPanel {
	padding : 0;
}

.TabPanel.side_top {
	grid-template-rows : auto 1fr !important;
}

.TabPanel.side_top > .TabMenu {
	display : flex;
	flex-direction : row;
	justify-content : flex-start;
	flex-grow : 0;
	gap : var(--space-300);
}

.TabPanel.side_left {
	grid-template-columns : auto 1fr;
}

.TabPanel.side_left > .TabMenu {
	flex-direction : column;
	align-self : start;
}

.TabPanel.side_right {
	grid-template-columns : 1fr auto;
}

.TabPanel.side_right .TabMenu {
	flex-direction : column;
	grid-column : 2;
	grid-row : 1;
}

.TabPanel.side_right > .TabPage {
	grid-column : 1;
	grid-row : 1;
}

.TabPanel.side_bottom {
	grid-template-rows : 1fr auto;
}

.TabPanel.side_bottom .TabMenu {
	flex-direction : row;
}

.TabPanel .TabMenu .TabButton {
	opacity : 0.6;
	font-weight : 500;
	color : var(--color-font);
}

.TabPanel .TabMenu .TabButton.selected, .TabPanel .TabMenu .TabButton:hover {
	opacity : 1;
}

.TabPanel .TabMenu SVG {
	height : var(--font-size-400);
	width : auto;
}

.TabPanel.RibbonPanel > div.TabMenu {
	border-bottom : var(--border-small-dark);
}

.TabPanel.RibbonPanel > .TabMenu {
	border-width : 0.15rem;
	gap : var(--space-50);
}

.TabPanel.RibbonPanel  > .TabMenu > button {
	padding : var(--space-300);
	margin-right : var(--space-500);
	border-radius : var(--radius-300) var(--radius-300) 0 0;
	margin-bottom : -0.1rem;
	font-size : var(--font-size-300);
}

.TabPanel.RibbonPanel  > .TabMenu > button:hover {
	padding-bottom : calc(var(--space-300) - 0.2rem);
	margin-bottom : 0.1rem;
}

.TabPanel.RibbonPanel  > .TabMenu > .selected {
	border-bottom : var(--color-primary) 0.2rem solid;
	padding-bottom : calc(var(--space-300) - 0.2rem) !important;
	margin-bottom : -0.1rem !important;
}

.TabPanel.SwitchPanel > .TabMenu {
	background-color : var(--color-hover);
	border-radius : var(--radius-200);
	font-size : var(--font-size-200);
	font-weight : 500;
	gap : unset;
	width : min-content;
}

.TabPanel.SwitchPanel  > .TabMenu > button {
	display : flex;
	padding : calc(var(--space-100) + 1px) var(--space-200);
	justify-content : center;
	align-items : center;
	border-radius : var(--radius-200);
	border : 1px solid transparent;
	min-width : 8rem;
	height : calc(1.2rem + var(--space-100) * 2);
}

.TabPanel.SwitchPanel  > .TabMenu > .selected {
	background-color : var(--color-card);
	border : var(--border-small-dark);
}

.TabPanel.PillPanel .TabPage {
	background-color : transparent;
}

.TabPanel.PillPanel .TabMenu {
	gap : var(--space-200);
	background-color : transparent;
	border : none;
}

.TabPanel.PillPanel .TabMenu button:not(.selected):hover {
	background-color : var(--color-hover-on-gray);
}

.TabPanel.PillPanel .TabMenu button {
	border-radius : var(--radius-900);
	border : var(--border-small-dark);
	color : var(--color-gray-700);
	stroke : var(--color-gray-700);
	white-space : nowrap;
}

.TabPanel.PillPanel .selected {
	background-color : var(--color-gray-900);
	color : white !important;
	border-color : var(--color-gray-900) !important;
}

.TabPanel.PillPanel svg {
	stroke-width : 2 !important;
}

.TabPanel.PillPanel .selected svg {
	stroke : white !important;
}

.TabPanel .Toolbar {
	margin : var(--space-100);
}

.TabPanel.MobileTab .TabPage {
	background-color : var(--color-background);
}

.TabPanel.MobileTab .TabMenu {
	background-color : var(--color-gray-900);
	gap : unset;
}

.TabPanel.MobileTab .TabMenu > button {
	color : white;
	font-weight : 500;
	padding : 0 var(--space-400);
	min-height : unset;
	align-self : stretch;
	font-size : var(--font-size-200);
	border-radius : 0;
	opacity : 1;
}

.TabPanel.MobileTab .TabMenu > button.selected {
	border-bottom : var(--color-primary-light) 0.2rem solid;
	padding-top : 0.2rem !important;
}

.TabPanel.MobileTab .TabMenu button:hover {
	background-color : unset !important;
}

.TabPanel.side_left > .TabMenu,
.TabPanel.side_right > .TabMenu {
	padding : var(--space-200);
}

.TabPanel.side_left > .TabMenu button,
.TabPanel.side_right > .TabMenu button {
	border : unset;
	margin : var(--space-100) 0;
	padding : var(--space-200);
	padding-left : var(--space-100);
	justify-content : flex-start;
}

.TabPanel.side_left > .TabMenu button::before,
.TabPanel.side_right > .TabMenu button::before {
	content : "";
	height : calc(100% + var(--space-300));
	width : 4px;
	background : transparent;
}

.TabPanel.side_left > .TabMenu button.selected,
.TabPanel.side_right > .TabMenu button.selected {
	background-color : var(--color-hover-dark);
}

.TabPanel.side_left > .TabMenu button:hover,
.TabPanel.side_right > .TabMenu button:hover {
	background-color : var(--color-hover);
}

.OverlayWindow .TabPanel.side_left > .TabMenu button.selected {
	background-color : var(--color-hover);
}

.OverlayWindow .TabPanel > .TabPage,
.SidePanel .TabPanel > .TabPage {
	border : none;
	box-shadow : none;
}

button {
	display : flex;
	justify-content : space-between;
	align-items : center;
	cursor : pointer;
	font-family : inherit;
	background-color : transparent;
	border : none;
	font-size : var(--font-size-200);
	font-weight : 500;
	border-radius : var(--radius-200);
	padding : var(--space-200) var(--space-300);
	gap : var(--space-200);
	white-space : nowrap;
}

button.spin-btn {
	display : grid;
	grid-template-columns : 1fr auto 1fr;
	align-items : center;
}

button.spin-btn > span {
	grid-column : 2;
}

button.spin-btn > .Icon,
button.spin-btn > svg,
button.spin-btn > .Spinner {
	grid-column : 1;
	justify-self : end;
}

button .Spinner {
	height : 1rem;
	margin : 0.1rem;
}

.primary-btn {
	background-color : var(--color-primary);
	color : var(--color-primary-contrast) !important;
}

.primary-btn svg {
	stroke : var(--color-primary-contrast) !important;
}

.primary-btn:hover {
	background : var(--color-primary-dark);
}

.primary-btn .Spinner *:first-child {
	background : conic-gradient(transparent, transparent, var(--color-primary-contrast), var(--color-primary-contrast));
}

.secondary-btn {
	background-color : var(--color-card);
	color : var(--color-primary);
	border : 1px solid var(--color-primary);
}

.secondary-btn svg {
	stroke : var(--color-primary);
}

.secondary-btn:hover {
	background-color : var(--color-hover);
}

.success-btn {
	background-color : var(--color-success);
	color : var(--color-success-contrast);
}

.success-btn svg {
	stroke : var(--color-success-contrast);
}

.success-btn-btn:hover {
	background-color : var(--color-success-dark);
}

.info-btn {
	background-color : var(--color-info);
	color : var(--color-info-contrast);
}

.info-btn svg {
	stroke : var(--color-info-contrast);
}

.info-btn:hover {
	background-color : var(--color-info-dark);
}

.warning-btn {
	background-color : var(--color-warning);
	color : var(--color-warning-contrast);
}

.warning-btn svg {
	stroke : var(--color-warning-contrast);
}

.warning-btn:hover {
	background-color : var(--color-warning-dark);
}

.danger-btn {
	background-color : var(--color-danger);
	color : var(--color-danger-contrast);
}

.danger-btn svg {
	stroke : var(--color-danger-contrast);
}

.danger-btn:hover {
	background-color : var(--color-danger-dark);
}

.grey-btn {
	background-color : var(--color-secondary);
	color : var(--color-secondary-contrast);
	border : var(--border-small-dark);
}

.grey-btn svg {
	stroke : var(--color-secondary-contrast);
}

.grey-btn:hover {
	background-color : var(--color-secondary-dark);
}

.white-btn {
	background-color : var(--color-card);
	border : var(--border-small-dark);
	color : inherit;
}

.ghost-btn {
	background-color : transparent;
	border : var(--border-small-dark);
}

.ghost-btn:hover, .clear-btn:hover, .white-btn:hover {
	background-color : var(--color-hover);
}

.minus-btn {
	justify-self : center;
	align-self : center;
	visibility : hidden;
}

.minus-btn svg {
	height : 1.2rem;
	width : 1.2rem;
}

*:hover > .minus-btn {
	visibility : visible;
}

button svg {
	height : 1.5rem;
	width : auto;
}

.white-btn:disabled,
.white-btn[disabled] {
	cursor : not-allowed;
	opacity : 0.45;
	color : rgba(107, 114, 128, 0.53);
	box-shadow : none;
}

form {
	display : flex;
	flex-direction : column;
	max-height : 100%;
}

form > div {
	display : flex;
}

form button[type="submit"]:disabled {
	opacity : .6;
	cursor : not-allowed;
}

form .inputWrp input[type=checkbox] ~ label, form .inputWrp input[type=radio] ~ label {
	cursor : pointer;
}

form button .Spinner {
	height : 1rem;
}

form .form-head {
	flex-direction : column;
}

form .form-body {
	display : flex;
	flex-grow : 1;
}

form .form-footer {
	flex-direction : row;
}

form fieldset {
	position : relative;
	gap : var(--space-300);
	display : flex;
	flex-direction : column;
}

form fieldset > fieldset {
	padding : 0 !important;
	margin : 0 !important;
}

form .inputWrp {
	align-items : center;
	position : relative;
	display : grid;
	grid-template-columns : 1fr auto auto auto;
	white-space : nowrap;
}

form .inputWrp > *:first-child {
	margin-right : var(--space-300);
}

form .inputWrp > *:nth-child(3) {
	margin-left : var(--space-300);
}

form .inputWrp.formCheck {
	border-radius : var(--radius-100);
	cursor : pointer;
	grid-template-columns : auto 1fr;
	padding : var(--space-100) var(--space-200);
}

form .inputWrp.formCheck:hover {
	background-color : var(--color-hover);
}

form .inputWrp.formCheck label {
	cursor : inherit;
}

form input[type=text], form input[type=email], input[type=search], form input[type=date], form input[type=time],
form input[type=password], form input[type=number], form textarea, select {
	line-height : 1.5;
	font-size : var(--font-size-200);
	border : var(--border-small-dark);
	padding : var(--space-100) !important;
	border-radius : var(--radius-200);
	background-color : var(--color-background);
	font-family : inherit;
	height : 1.9rem;
	color : var(--color-font);
}

select:has(> option[hidden][disabled]:checked) {
	color : var(--color-font-light);
}

form input[type=text], form input[type=email], input[type=search], form input[type=date], form input[type=time],
form input[type=password], form input[type=number], form textarea {
	padding : var(--space-600) var(--space-300) var(--space-300) var(--space-400);
}

form input[type=number] {
	text-align : right;
}

form input:not([type=checkbox]):not([type=range]):not([type=radio]):not([type=file]):focus, form textarea:focus, select:focus,
form input:not([type=checkbox]):not([type=range]):not([type=radio]):not([type=file]):focus-visible, form textarea:focus-visible, select:focus-visible {
	outline : none;
	border-color : var(--color-info);
	box-shadow : 0 0 0 3px color-mix(in srgb, var(--color-info), transparent 80%);
}

form input:disabled, form textarea:disabled, select:disabled {
	opacity : 0.55;
}

form textarea {
	height : unset;
	width : 100%;
}

input:-webkit-autofill {
	font-family : inherit;
}

select option {
	padding : var(--space-600);
}

select optgroup {
	margin-top : var(--space-200);
}

:root[data-et_theme = "dark"] input,
:root[data-et_theme = "dark"] select,
:root[data-et_theme = "dark"] textarea {
	background-color : var(--menu-color);
}

form .form-footer button {
	justify-content : center;
	min-width : 4rem;
}

form .inputWrp label {
	display : flex;
	gap : var(--space-300);
	color : var(--color-font);
	font-size : var(--font-size-200);
	font-weight : 500;
	opacity : 0.75;
	align-items : center;
}

form .inputWrp label i {
	opacity : 0.65;
	white-space : break-spaces;
}

form legend {
	position : absolute;
	width : 1px;
	height : 1px;
	padding : 0;
	margin : -1px;
	overflow : hidden;
	clip : rect(0, 0, 0, 0);
	white-space : nowrap;
	border : 0;
}

form h2.pseudoLegend {
	font-size : var(--font-size-300);
	font-weight : 500;
	text-align : left;
	grid-column : 1/-1;
	text-transform : uppercase;
	color : var(--color-font-lightest);
	margin-top : var(--space-300);
}

.modalBody form p {
	padding : 0 var(--space-400) var(--space-400);
}

.modalBody form div p {
	padding : 0;
	max-width : 25rem;
}

.DateOption {
	gap : var(--space-100);
}

input[type=checkbox], input[type=radio] {
	transform : scale(1.3);
	cursor : pointer;
}

form .DependantSelect {
	gap : var(--space-200);
}

.DropDown button[type=submit] {
	min-height : initial;
	width : 100%;
}

.MobileMainLayout form input, .MobileMainLayout form select {
	background-color : white !important;
}

.MobileMainLayout form button[type=submit] {
	width : 100%;
	padding : var(--space-400);
}

.MobileMainLayout form .form-body {
	display : flex;
	flex-direction : column;
	padding : var(--space-300);
}

h1 {
	line-height : 1.1;
}

p {
	line-height : 1.5;
}

fieldset {
	border : none;
}

form .inputWrp:not(.formCheck) label:first-child {
	grid-column : 1/5;
}

label {
	line-height : 1.5;
}

input[type=checkbox] + label {
	line-height : 1.2;
}

.Alert {
	border-radius : var(--radius-200);
	padding : var(--space-200);
	font-size : var(--font-size-300);
}

.Alert.primary-alert {
	background-color : color-mix(in srgb, var(--color-primary), white 70%);
	border : 1px solid var(--color-primary-dark);
}

.Alert.secondary-alert {
	background-color : color-mix(in srgb, var(--color-secondary), white 70%);
	border : 1px solid var(--color-secondary-dark);
}

.Alert.success-alert {
	background-color : color-mix(in srgb, var(--color-success), white 70%);
	border : 1px solid var(--color-success-dark);
}

.Alert.info-alert {
	background-color : color-mix(in srgb, var(--color-info), white 70%);
	border : 1px solid var(--color-info-dark);
}

.Alert.warning-alert {
	background-color : color-mix(in srgb, var(--color-warning), white 70%);
	border : 1px solid var(--color-warning-dark);
}

.Alert.danger-alert {
	background-color : color-mix(in srgb, var(--color-danger), white 70%);
	border : 1px solid var(--color-danger-dark);
}

.Spinner {
	display : flex;
	justify-content : center;
	align-items : center;
	margin : 0;
	background-color : transparent;
	aspect-ratio : 1/1;
}

.Spinner *:first-child {
	border-radius : 50%;
	background : conic-gradient(transparent, transparent, var(--color-primary), var(--color-primary));
	mask : radial-gradient(circle, transparent 50%, black 51%);
	animation : spin 1.5s linear infinite;
	height : 100%;
	width : 100%;
}

.dynamic-content .Spinner {
	background-color : transparent;
	height : 100%;
	width : auto;
	aspect-ratio : 1/1;
	max-height : 5rem;
	min-height : 1rem;
	margin : auto;
}

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

.DynamicElement .Spinner {
	display : inline-block;
	width : 10%;
	height : auto;
	aspect-ratio : 1;
	margin : var(--space-600);
}

table tbody .Spinner {
	height : 5rem;
	width : 5rem;
	padding : 0.5rem;
	margin : 0 auto;
}

.RowCounter .Spinner {
	display : inline-flex;
	height : var(--font-size-400);
	width : var(--font-size-400);
	padding : var(--space-50);
	margin : 0;
}

.QRResetScannerForm .form-body {
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : unset;
	justify-content : center;
}

.QRResetScannerForm .form-body .QRScanner {
	margin-bottom : auto;
}

.QRScanner {
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : flex-start;
	gap : var(--space-400);
}

.QRScanner video {
	width : 100%;
	max-width : 400px;
	aspect-ratio : 1 / 1;
	object-fit : cover;
	border : 2px solid black;
}

svg {
	stroke-width : 1.5;
	fill : none;
	width : 2rem;
	height : 2rem;
}

path {
	stroke-linecap : round;
	stroke-linejoin : round;
}

@media (max-width: 767px) {
main {
	display : grid;
	min-height : 100%;
	min-width : 100%;
}

main > * {
	padding : var(--space-500);
	margin-top : auto;
	margin-bottom : auto;
	height : 100%;
}

.LoginDiv {
	display : flex;
	min-width : 100%;
	min-height : 100%;
	gap : var(--space-500);
}

.LoginDiv > div {
	align-content : center;
}


}

@media (min-width: 767px) {
button {
	border-radius : var(--radius-200);
}


}