/* 2026-10-25T18:15:47+01:00 */
/* general.css */
html {
	--club-color-bg-light: #2c57a7;
	--club-color-bg-light-aa: #728fc4;
	--club-color-txt-on-light: #ffffff;
	--club-color-bg-dark: #030089;
	--club-color-bg-dark-aa: #5755b0;
	--club-color-bg-dark-ff: #8180c4;
	--club-color-bg-menu-active: #030089;
	--club-color-bg-menu-hover: var(--club-color-bg-light-aa);
	--club-color-txt-on-dark: #ffffff;
	--club-color-txt-on-menu-active: #ffffff;
	--club-color-table-title: #555555;
	--club-color-table-title-aa: #777777;
	--club-color-txt-on-table-title: #ffffff;

	--bgcolor-sorting: var(--club-color-table-title);
	--color-sorting: var(--club-color-txt-on-table-title);

	--bgcolor-total: var(--club-color-table-title);
	--color-total: var(--club-color-txt-on-table-title);

	--color-link: blue;

	--bgcolor-tblTitle: #fff;
	--color-tblTitle: #000;

	--bgcolor-odd: #f9f9f9;
	--bgcolor-even: #e9e9e9;

	--color-on-link: #ccc;
	--color-on-link-active: yellow;

	--table-border-width: 1px;
	--table-spacing: 2px;

	--font: Lucida Sans Unicode, Lucida Grande, sans-serif;
}

/**
 * LAYOUT
 */

html, body, table {
	font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
	font-family: var(--font);
	font-size: 13px;
}
html, body {
	margin: 0;
	padding: 0;
	min-width: -webkit-fit-content;
	min-width: -moz-fit-content;
	min-width: fit-content;
}
html {
	height: 100%;
}
body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

#frame {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 100vh;
	position: relative;
}
#header_row_2 {
	display: flex;
	flex-direction: row;
	box-shadow: 1px 1px 10px rgba(0,0,0,.1);
	z-index: 6;
}
#upper_row_club_logo,
#td_leftframe_cal_etc {
	flex: 0 0 17rem;
	width: 17rem;
}
#td_leftframe_cal_etc {
	padding-bottom: 70px;
	position: relative;
}
@media (min-width: 1000px) {
	#left_frame_sticky.sticky,
	#left_frame_sticky2.sticky {
		width: 17rem;
		min-width: 0;
		position: fixed;
	}
	#left_frame_sticky2 .to-top {
		text-align: center;
	}
	#left_frame_sticky2 .to-top button {
		background: transparent;
		width: 100%;
		border: 0;
		font-weight: bold;
		color: var(--club-color-txt-on-light);
	}
	#left_frame_sticky2:not(.sticky) .to-top {
		display: none;
	}
}
#left_frame_footer_content {
	position: absolute;
	left: 0;
	bottom: 0;
	color: white;
	width: 17rem;
	text-align: center;
	line-height: 25px;
	height: 50px;
}
#left_frame_footer_content a {
	color: inherit;
}
#left_frame_footer_content .product-logo {
	display: block;
	margin: 0 10px;
}
#left_frame_footer_content .product-logo img {
	max-width: 100%;
	max-height: 100%;
}

#upper_row_club_banner {
	flex: 1;
	align-self: center;
}
#upper_row_club_address {
	flex: 0;
	display: flex;
	align-items: center;
}
#upper_row_club_address ul {
	margin: 0;
	padding: 0;
	columns: 2;
}
#upper_row_club_address li {
	list-style: none;
	padding-right: 20px;
	white-space: nowrap;
}
#upper_row_club_address a {
	color: inherit;
}
#tr_content {
	display: flex;
	flex-direction: row;
	flex: 1;
	-ms-flex: 1 0 0px;
}
.main-page-content-td {
	flex: 1;
	margin-left: 8px;
	z-index: 2;
	background: white;
}
.main-page-content {
	padding: 13px 5px 5px 5px;
	position: relative;
	z-index: 3;
	background: white;
	min-width: 34rem;
}
body.print .main-page-content {
	padding: 2px;
}

#left_frame_footer .product-logo {
	display: block;
	height: 50px;
}
#left_frame_footer .product-logo img {
	display: inline-block;
	max-height: 50px;
	max-width: 90%;
}



/**
 * HEADER
 */

img.clublogo {
	display: block;
	width: 17rem;
	height: 100px;
	object-fit: contain;
}



/**
 * COMPONENTS
 */

textarea:not(.code) {
	resize: vertical;
}
.wysiwyg-load,
.cke,
.cke.cke_reset {
	width: 720px;
}
.cke_chrome.cke_focus {
	outline: solid 1px blue !important;
	outline: -webkit-focus-ring-color auto 5px !important;
}

summary {
	white-space: nowrap;
}

details.costs-path {
	font-size: 80%;
	background-color: lightyellow;
	text-align: left;
}
details.costs-path p {
	margin: 0;
}

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

.with-save-footer {
	padding-bottom: 49px;
}
.save-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: white;
	height: 33px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: calc(17rem + 13px);
	border-top: solid 2px black;
	text-align: center;
}



.hide-on-desktop {
	display: none;
}



/**
 * MESSAGES
 */

#message_s {
	display: block;
	margin: 0;
	padding: 5px;
}

#floating-message {
	position: fixed;
	bottom: 20px;
	left: 20px;
	padding: 7px 20px;
	z-index: 3423;
	font-weight: bold;
	font-size: 20px;
}

#message_s > li,
.message.info {
	display: block;
	list-style: none;
	margin-bottom: 6px;
	padding: 10px;
	background-color: #2c57a7;
	color: white;
}
#message_s > li.warning,
.message.warning {
	background-color: orange;
	color: black;
	padding: 10px;
}
#message_s > li.error,
.message.error {
	background-color: #c00;
	color: white;
}
#message_s > li.success,
.message.success {
	background-color: green;
	color: white;
}



/**
 * SCHEDULE/MOBILE/RESSTART BUTTONS
 */


.schedule-index-buttons {
	display: flex;
	flex-flow: row wrap;
}
.schedule-index-buttons input[type="radio"] {
	position: absolute;
	visibility: hidden;
	width: 0;
	height: 0;
}
.schedule-index-button {
	display: block;
	float: left;
	width: 50%;
	box-sizing: border-box;
	padding: 8px;
	margin: 0;
	font-size: 16px;
	border: solid 1px #ccc;
	color: inherit;
	text-align: center;
	background: #ddd;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ccc));
	background: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
	background: linear-gradient(to bottom, #eee, #ccc);
}
input:checked + .schedule-index-button,
.schedule-index-button:active,
.schedule-index-button:focus,
.schedule-index-button.selected {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d00), color-stop(100%, #b00));
	background: -webkit-linear-gradient(top, #d00 0%, #b00 100%);
	background: linear-gradient(to bottom, #d00, #b00);
	color: #fff !important;
}



/**
 * FORM ELEMENTS v3
 */

.form3 {
	max-width: 350px;
}
.form-item3,
.form-submit3{
	margin-bottom: 1em;
}
.form-item3-honey {
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0.01;
}
.form-item3 label {
	display: block;
	text-align: left;
	padding-bottom: 11px;
	position: relative;
	text-transform: uppercase;
	font-size: 90%;
	font-weight: bold;
}
.form-item3 label:after {
	content: "";
	display: block;
	height: 1px;
	width: 70%;
	background-color: #000;
	position: absolute;
	left: 0;
	bottom: 6px;
}
.form-item3 .widget .text,
.form-item3 .widget select,
.form-item3 .widget select * {
	background-color: #f7f7f7;
	color: #000;
	border: solid 1px #aaa;
	border-radius: 4px;
}
.button3 {
	border: 0;
	padding: 10px;
	text-align: center;
	border-radius: 4px;
	font-family: var(--font);
	font-size: inherit;
	font-weight: bold;
	cursor: pointer;
	background-color: #555555;
	background-color: var(--club-color-table-title);
	color: #ffffff;
	color: var(--club-color-txt-on-dark);
}
.button3.active,
.button3:hover,
.button3:active,
.button3:focus {
	text-decoration: none;
	background-color: #777777;
	background-color: var(--club-color-table-title-aa);
	color: #ffffff;
	color: var(--club-color-txt-on-dark);
}
.button3:disabled,
.button3:disabled:hover,
.button3:disabled:active,
.button3:disabled:focus {
	background-color: #aaa;
	cursor: not-allowed;
}


/**
 * RENDERED FORM ELEMENTS (v2.5?)
 */

.rendered-form {
	--widget-width: 280px;
}
.rendered-form input:not(.auto-width).text,
.rendered-form select:not(.auto-width),
.rendered-form textarea:not(.auto-width) {
	width: var(--widget-width);
}
.rendered-form .ms-search + .br-user-select {
	width: calc(var(--widget-width) - 5em - .25em);
}

.form3.rendered-form input:not(.auto-width).text,
.form3.rendered-form select:not(.auto-width),
.form3.rendered-form textarea:not(.auto-width) {
	width: 350px;
}
.form3.rendered-form .ms-search + .br-user-select {
	width: calc(350px - 5em - .25em);
}



/**
 * DEBUG FOOTER
 */

details.debug {
	background-color: white;
	color: black;
}
details.debug summary {
	padding: 5px;
	border-top: solid 1px #000;
	cursor: pointer;
}
details.debug[open] summary,
details.debug summary:focus {
	background-color: #ddd;
}
details.debug > pre {
	padding: 0 10px;
}



.general-notice {
	position: relative;
	/*background: #387c9b;*/
	background: rgb(56 124 155 / 80%);
	color: white;
	padding: 20px;
	padding-right: 40px;
	margin: 10px;
}
.general-notice + .general-notice {
	margin-top: 10px;
}
.close-general-notice {
	position: absolute;
	right: 17px;
	top: 17px;
	padding: 2px;
}
.close-general-notice img {
	display: block;
}
.general-notice-content {
}
.general-notice-content > p:first-child {
	margin-top: 0;
}
.general-notice-content > p:last-child {
	margin-bottom: 0;
}
.general-notice-content a {
	color: yellow;
}
.general-notice-content a:hover,
.general-notice-content a:focus {
	color: white;
}



.mpc-sticky-wrapper,
.fold-in-menu-wrapper {
	position: sticky;
	top: 5px;
	right: 5px;
}
.mpc-sticky-wrapper.left {
	right: auto;
	left: 5px;
}
.mpc-sticky,
.fold-in-menu {
	position: absolute;
	top: 0;
	right: 0;
}
.mpc-sticky-wrapper.left .mpc-sticky {
	right: auto;
	left: 0;
}



.fold-in-menu {
	max-height: calc(100vh - 15px);
	overflow: hidden;
	overflow-y: auto;
	top: 13px;
	right: 5px;
}
.fold-in-menu-wrapper .fold-in-menu {
	top: 0;
	right: 0;
}
table.fold-in-menu,
.fold-in-menu > table,
.fold-in-menu > form > table {
	min-width: 9em;
}
.fold-in-menu:not(.folded-in),
.fold-in-menu-wrapper .fold-in-menu {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.fold-in-menu.folded-in .fold-in-menu-section {
	display: none !important;
}
.fold-in-menu .fold-in-menu-toggler {
	padding: 0 !important;
}
.fold-in-menu:not(.fold-in-menu-inited) th.fold-in-menu-toggler {
	padding: 8px;
}
.fold-in-menu .menu-toggler-label {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	color: inherit;
	font-weight: inherit;
	padding: 8px;
	cursor: pointer;
	text-align: center;
}
.fold-in-menu .menu-toggler-label:before {
	content: "- ";
}
.fold-in-menu.folded-in .menu-toggler-label:before {
	content: "+ ";
}



.ms-search + .br-user-select {
	margin-left: 0.25em;
}
.br-user-select + .ms-msg {
	margin-left: 0.25em;
}

.ms-search {
	width: 5em;
}
.ms-msg {
	color: green;
}
.ms-no-results {
	color: red;
}
.ms-too-many-results {
	color: #bbb;
}



ul.simple-td-list {
	margin: 0 0 0 1em;
	padding: 0;
}



.res-messages.has-messages {
	border: solid 1px red;
	background-color: #f7f7f7;
}



.to-mobile {
	font-size: 14px;
	text-transform: uppercase;
}

#header_row_1 {
	font-size: 13px;
	line-height: 28px;
	padding-right: 5px;
}
#header_row_1 .profile-link {
	padding-left: 22px;
	position: relative;
}
#header_row_1 .profile-link:not([href]):hover {
	text-decoration: none;
}
#header_row_1 .profile-avatar {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -9px;
	height: 18px;
}
#header_row_1 .user-name {
	text-transform: uppercase;
	font-size: 12px;
}
#header_row_3 {
	height: 5px;
	display: none;
}

.form-item {
	margin-bottom: 6px;
}

#login-form-container {
	padding: 4px 8px;
}
#login-form-container form {
	margin-bottom: 1em;
}

h2.lcol-hd {
	margin: 0;
	padding: 2px 0 2px 8px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 28px;
	text-align: center;
}

ul#main-menu,
ul#main-menu ul {
	display: block;
	margin: 0;
	padding: 0;
}
ul#main-menu ul { /* root */
	padding: 0 0 0 15px;
}
#main-menu li {
	list-style: none;
	display: block;
	padding: 0;
}
#main-menu a:first-child {
	display: block;
	position: relative;
	padding: 5px 0 5px 8px;
}
#main-menu li.active a:first-child {
	background-color: #030089;
	background-color: var(--club-color-bg-menu-active);
	color: #fff;
	color: var(--club-color-txt-on-menu-active);
}
#main-menu li.active a,
#main-menu li a:hover,
#main-menu li a:focus {
	position: relative;
	width: calc(100% + 6px);
}
#main-menu li a:hover,
#main-menu li a:focus,
#main-menu li.active a:hover,
#main-menu li.active a:focus {
	background-color: #728fc4;
	background-color: var(--club-color-bg-menu-hover);
	text-decoration: none;
}
#main-menu a.nb {
	display: inline;
}

h1 {
	margin: 0 0 15px;
}

h1 + .menu {
	margin-top: -10px;
	padding-left: 15px;
}

p, ul, ol, .form-actions {
	margin: 15px 0;
}

fieldset {
	margin: 10px 0;
}
legend {
	font-size: 110%;
	font-weight: bold;
}

img.userpicture {
	max-width: 200px;
	max-height: 200px;
}

body.center {
	height: 100%;
}
body.center #content {
	display: table;
	height: 100%;
	width: 100%;
}
body.center #content > div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
body.center form {
	display: inline-block;
	text-align: left;
}

body.skeleton > div.padder {
	padding: 10px;
}
body.skeleton p,
body.skeleton h2,
body.skeleton h3,
body.skeleton table {
	margin: 0 0 12px;
}
body.skeleton .up {
	background: #f4f4f4;
	box-shadow: 0 0 15px #bbb;
}

td.checkboxified.checked.bg {
	background-color: #afa;
}
td.checkboxified.unchecked.bg {
	background-color: #faa;
}

table.reservation img.userpicture {
	max-width: 100px;
	max-height: 100px;
	display: block;
}

.players {
	font-size: .85rem;
}

.bigger {
	font-size: 16px;
}
.big-notify {
	font-size: 22px;
}
.big-notify .footer {
	font-size: 13px;
}

.nosho {
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.pager a + a {
	margin-left: .25em;
}
.pager .active {
	display: inline-block;
	font-weight: bold;
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
}

p.p-error,
td.td-error {
	color: red;
	text-align: center;
}

p.overlay-footer {
	margin: 15px 0 0;
}

html.framework #frame .overlay-return {
	display: none;
 }

td.res-make-messages > ul {
	margin: 0;
	padding: 0 0 0 25px;
}

.clear { clear:both; }

p.ntm { margin-top:0; }

#ajax_loading { z-index: 90000; position: fixed; top: 10px; left: 10px; display: none; background-color: white; border: solid 10px #777; }
#ajax_loading div { padding: 6px 10px; line-height: 1; border: solid 10px #f00; }
#ajax_loading td { font-size: 18px; font-weight: bold; color: red; }

.ab-display.interactive .ab-summary {
	cursor: pointer;
}

#mootooltip {
	background-color: #2c57a7;
	background-color: var(--club-color-table-title);
	color: #fff;
	color: var(--club-color-txt-on-table-title);
	/*border: solid 1px #fff;*/
	border: 0;
	box-shadow: 3px 3px 25px rgba(0,0,0,.3);
	padding: 7px;
	max-width: 400px;
	min-width: 220px;
	word-wrap: break-word;
	display: none;
	z-index: 6;
}
#mootooltip.show {
	display: block;
}
html.nomootooltip #mootooltip.show {
	display: none;
}
#mootooltip > .title {
	font-weight: bold;
}

#mootooltip img {
	max-width: 100%;
}

#datepicker table,
#colorpickerdiv table {
	border: solid 1px black;
	background-color: white;
}
#datepicker input,
#colorpickerdiv input {
	font-size: 12px;
	width: 100%;
	padding: 2px;
}
#colorpickerdiv td {
	width: 12px;
	height: 12px;
}
#datepicker .title {
	white-space: nowrap;
}
#datepicker td {
	background-color: #666;
	color: #fff;
	text-align: center;
	cursor: pointer;
	width: 1.7em;
}
#datepicker tr.weekdays th {
	text-align: center;
}
#datepicker td.today {
	background-color: #a00 !important;
}
#datepicker table tfoot tr.footer th { padding:0; }

pre {
	font-size: 9pt;
	tab-size: 4;
}
form {
	margin: 0;
}

/*td { text-align:left; }*/

html.html h3.subtitle,
html.html p.subtitle {
	margin: -20px 0 0 10px;
}

a {
	color: blue;
	color: var(--color-link);
	text-decoration: none;
}
a img {
	border: 0;
}
a:hover,
a:focus {
	color: #555;
	text-decoration: underline;
}



input,
select,
textarea,
[contenteditable],
button {
	border: solid 1px #999;
	border-radius: 4px;
	font-family: var(--font);
	color: black;
	padding: 4px;
	font-size: 13px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
input:disabled,
select:disabled,
textarea:disabled,
[contenteditable]:disabled,
button:disabled,
input[readonly],
select[readonly],
textarea[readonly],
[contenteditable][readonly],
button[readonly] {
	background-color: #ddd;
}

input.see-through,
select.see-through,
textarea.see-through {
	background-color: transparent;
	color: inherit;
	font-weight: inherit;
}

::-moz-placeholder {
	color: #bbb;
}
::-webkit-input-placeholder {
	color: #bbb;
}
:-ms-input-placeholder {
	color: #bbb;
}
::placeholder {
	color: #bbb;
}

button.image {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
section.textarea {
	min-height: 100px;
}
input.checkbox,
input[type=checkbox],
input[type=radio],
input[type=file] {
	border: 0;
}
.block-labels label:after {
	content: "\A";
	white-space: pre;
}
.cols-3 {
	columns: 3;
	overflow: hidden;
}

textarea.code {
	font-family: monospace;
	white-space: pre;
	word-wrap: normal;
	tab-size: 4;
}
textarea.code.with-error {
	--error-line: -2;
	--error-size: 1;
	--line-height: 18px;
	line-height: var(--line-height);
	background-image: linear-gradient(
		to bottom,
		white calc((var(--error-line) - 1) * var(--line-height)),
		yellow calc((var(--error-line) - 1) * var(--line-height)),
		yellow calc((var(--error-line) + var(--error-size) - 1) * var(--line-height)),
		white calc((var(--error-line) + var(--error-size) - 1) * var(--line-height))
	);
	background-origin: content-box;
	background-attachment: local;
	background-repeat: no-repeat;
}

input.error,
textarea.error {
	border-color: red;
	outline: solid 1px red;
}

a.button,
a.button:hover,
a.button:focus,
input.button,
button.button {
	display: inline-block;
	/*border: solid 1px #333;*/
	/*border-color: #ccc #333 #333 #ccc;*/
	border: 0;
	box-shadow: none;
	padding: 6px 12px;
	font-size: 14px;
	color: black;
	text-decoration: none;
	background: #ddd;
	background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ccc));
	background: #ddd -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
	background: #ddd linear-gradient(to bottom, #eee, #ccc);
	border-radius: 2px;
	cursor: pointer;

	&.sm {
		padding: 4px 8px;
	}
}
a.button:hover,
button:hover,
input.button:hover {
	opacity: .8;
}
a.submit,
input.submit,
button.submit {
	font-weight: bold;
	color: #171d2c;
}
a.button:active,
input.button:active,
button.button:active {
	background: #bbb;
	background: #bbb -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #999));
	background: #bbb -webkit-linear-gradient(top, #ccc 0%, #999 100%);
	background: #bbb linear-gradient(to bottom, #ccc, #999);
	color: #fff !important;
}
a.button:disabled,
input.button:disabled,
button.button:disabled {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}
a.button:not(.oncing):disabled,
input.button:not(.oncing):disabled,
button.button:not(.oncing):disabled {
	cursor: not-allowed;
}

html.html input.date,
html.html input.time,
html.html input.int,
html.html input.price,
html.html input.bigprice {
	text-align: center;
	padding-left: 1px;
	padding-right: 1px;
}
html.html input.date {
	width: 9em;
}
html.html input.color {
	width: 6em;
	text-align: left;
	font-family: monospace;
}
html.html input.time {
	width: 4.4em;
}
html.html input.int {
	width: 3em;
	text-align: center;
}
html.html input.bigint {
	width: 4.5em;
	text-align: center;
}
html.html input.price {
	width: 5.5em;
}
html.html input.bigprice {
	width: 6.5em;
}
html.html input.account-nr {
	width: 12.5em;
	text-align: left;
}
html.html input.ext-id {
	width: 5em;
}


/* IE10's 'clear cross' in EVERY input */
::-ms-clear {
	display: none;
}

/* number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
input[type=number] {
	-moz-appearance: textfield;
}


.b {
	font-weight: bold !important;
}
.unb {
	font-weight: normal;
}
.i {
	font-style: italic;
}
.u {
	text-decoration: underline;
}
.center, .c, .c td, .c th {
	text-align: center;
}
.right,
.c .right {
	text-align: right;
}
input.right {
	padding-right: .25em;
}
th,
.left,
.c .left,
table.left td,
.tblUpTitle.left,
.tblUpTitle th.left,
.tblUpTitle td.left,
.tblTitle > .tblUpTitle:not(.c):not(.right) {
	text-align: left;
}
.tblUpTitle th,
th.tblUpTitle {
	text-align: center;
}

.fl { float:left; }
.fr { float:right; }

.lbborder th.tblUpTitle,
.lbborder tr.tblUpTitle > th {
	padding-right: 6em;
}

.fw {
	width: 100%;
	display: block;
	box-sizing: border-box;
}
.h {
	cursor: pointer;
}
.move {
	cursor: move;
}
.help {
	cursor: help;
}
.no-records {
	font-style: italic;
	text-align: center;
}
.too-many-records {
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	background-color: orange;
}

img.picker-icon {
	cursor: pointer;
	margin-left: 0.35em;
	height: 1.2em;
	min-height: 16px;
	vertical-align: middle;
}

p.help,
td.help,
ul.help,
ol.help,
div.help {
	cursor: default;
	font-size: 16px;
	color: #2C57A7;
}
p.help a,
td.help a,
ul.help a,
ol.help a,
div.help a {
	color: orange;
}

.button.cancel,
a.button.cancel:hover,
a.button.cancel:focus {
	/*color: red;*/
	background: #EA0322;
	background: #EA0322 linear-gradient(to bottom, #ff6577, #b3001b);
	color: #FFF;
}
.button.cancel {
	opacity: 0.7;
}
.red,
.help.red,
table tr td .red,
table tr th .red,
table tr td.red,
table tr th.red {
	color: red;
}
.green {
	color: green;
}
.lime {
	color: lime;
}
.black {
	color: black;
}
.white {
	color: white;
}
.blue {
	color: blue;
}
.orange {
	color: orange;
}

.reservation-warning > p:first-child {
	margin-top: 0;
}
.reservation-warning > p:last-child {
	margin-bottom: 0;
}

table.full-width {
	width: 99.6%;
}

table:is(.form-table, .info-table, .data-table, .mixed-table, .menu-table) {
	border: solid var(--table-border-width) #ccc;
	background-color: #fff;
	border-spacing: var(--table-spacing);
	color: #000;

	& td,
	& th {
		vertical-align: top;
		padding: 7px 6px;
		font-weight: normal;
	}
	& tr > .tblUpTitle,
	& tr.tblUpTitle > *,
	& tr.tblTitle > * {
		padding-top: 7px;
		padding-bottom: 7px;
		font-weight: bold;
	}
	& thead tr.tblTitle:first-child,
	& thead tr.tblUpTitle:first-child + tr.tblTitle,
	& thead tr.tblUpTitle:first-child + tr.tblTitle + tr.tblTitle {
		background-color: #eee;
	}
	& tr.top > *,
	& tr > .top,
	& tr > td[valign=top],
	& tr > th[valign=top] {
		vertical-align: top;
	}
	&.pad0 td,
	&.pad0 th,
	& tr.pad0 td,
	& tr.pad0 th,
	& td.pad0,
	& th.pad0 {
		padding-left: 0;
		padding-right: 0;
	}
	&.pad1 td,
	&.pad1 th,
	& tr.pad1 td,
	& tr.pad1 th,
	& td.pad1,
	& th.pad1 {
		padding-left: 1px;
		padding-right: 1px;
	}
	&.pad2 td,
	&.pad2 th,
	& tr.pad2 td,
	& tr.pad2 th,
	& td.pad2,
	& th.pad2 {
		padding-left: 2px;
		padding-right: 2px;
	}
	&.prompt tr > td,
	&.prompt tr > th {
		padding: 7px 10px;
	}
	& td.res-make-messages {
		background-color: #d00;
		color: #fff;
		padding: 8px;
	}
	& .flashable tr {
		-webkit-transition: background-color 2000ms ease-in;
		-moz-transition: background-color 2000ms ease-in;
		-o-transition: background-color 2000ms ease-in;
	}
}


span.status { display:inline-block; width:1.1em; height:1.1em; border-radius:20px; background-color:gold; }
span.status.red { background-color:red; }
span.status.green { background-color:green; }
span.status.blue { background-color:blue; }


.tblTitle {
	background-color: #fff;
	background-color: var(--bgcolor-tblTitle);
}
.tblTitle,
.tblTitle a,
.tblTitle a:hover {
	color: #000;
	color: var(--color-tblTitle);
	font-weight: inherit;
}

.tblUpTitle {
	background-color: #555;
	background-color: var(--club-color-table-title);
}
.tblUpTitle,
.tblUpTitle a,
.tblUpTitle a:hover {
	color: #fff;
	color: var(--club-color-txt-on-table-title);
}

.tblSorting {
	background-color: var(--bgcolor-sorting);
}
.tblSorting,
.tblSorting a,
.tblSorting a:hover {
	color: var(--color-sorting);
}

.tblTotal {
	background-color: var(--bgcolor-total);
}
.tblTotal,
.tblTotal a,
.tblTotal a:hover {
	color: var(--color-total);
}



/* table zebra */
tr.tblTitle > * {
	border-bottom: solid 1px #999;
}
tr + tr.zebra > *,
tr + tr.even > *,
tr + tr.odd > *,
tbody + tbody.zebra > :first-child > *,
tbody + tbody.even > :first-child > *,
tbody + tbody.odd > :first-child > * {
	border-top: solid 1px #ccc;
}
.bg-odd {
	background-color: #eee;
}
.bg-even {
	/*background-color: #ddd;*/
}



tr.bt > *,
tr.even + tr.bt.odd > *,
tr.odd + tr.bt.even > * {
	border-top: solid 1px #111;
}
tr.bt3 > *,
tr.even + tr.bt3.odd > *,
tr.odd + tr.bt3.even > * {
	border-top: solid 3px #111;
}

tr.bb > *,
tr.even + tr.bb.odd > *,
tr.odd + tr.bb.even > * {
	border-bottom: solid 1px #111;
}
tr.bb2 > *,
tr.even + tr.bb2.odd > *,
tr.odd + tr.bb2.even > * {
	border-bottom: solid 2px #111;
}



/* new & old list/overview */
.tblUpTitle .on-link,
.tblUpTitle .on-link:hover {
	color: var(--color-on-link);
}
.tblUpTitle .on-link.on-active,
.tblUpTitle .on-link.on-active:hover {
	color: var(--color-on-link-active);
}



/* buyable period colors */
.buyable-past .buyable-period {
	color: red;
}
.buyable-future .buyable-period {
	color: blue;
}
.buyable-current .buyable-period {
	color: green;
}



/* membership pause */
a.ms-pause:not(.paused) {
	opacity: 0.3;
}



/* drag & hilite */
tr.iselected {
	background-color: rgba(255, 0, 0, 0.2);
}
tr.selected {
	background-color: rgba(255, 0, 0, 0.4);
}
tr.last-dragged {
	background-color: #C6F7C6;
}
tr.dragging,
tbody.hilited tr,
tr.hilited,
tbody.odd tr.hilited,
tbody.even tr.hilited,
td.hilited,
input.hilited,
.tblTitle.hilited,
.hilited > .tblTitle {
	background-color: #b9dde9;
}
html.animate tr.hl-ready {
	-webkit-transition: background-color 2000ms linear;
	-moz-transition: background-color 2000ms linear;
}

.drag-container .drag-handle {
	width: 30px;
	min-width: 30px;
	text-align: center;
	cursor: move;
}



input.noticing {
	border: solid 1px green;
	background-color: #eee;
}

.tooltip-tip {
	background-color: midnightblue;
	border: solid 1px white;
	padding: 5px;
	color: white;
	font-size: 12px;
	font-family: verdana;
	opacity: 0.85;
	filter: filter: alpha(opacity=85);
}

.club_light {
	background-color: #2c57a7;
	background-color: var(--club-color-bg-light);
	color: #fff;
	color: var(--club-color-txt-on-light);
}
.club_dark {
	background-color: #030089;
	background-color: var(--club-color-bg-dark);
	color: #fff;
	color: var(--club-color-txt-on-dark);
}
.club_light a,
.club_light a:hover,
.club_dark a,
.club_dark a:hover {
	color: inherit;
}


.prompt .message > div {
	max-width: 550px;
	margin: 0 auto;
	white-space: pre-line;
}


.required-label:after {
	content: " *";
	color: red;
	font-weight: bold;
}



.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

@media print {
	#header_row_1,
	#header_row_2,
	#header_row_3,
	#td_leftframe_cal_etc {
		display: none;
	}
}

/* overlay.css */
div.lightbox table {
	background-color:#fff;
}
div.overlay {
	position: fixed;
	top: 0;
	left: 0;
	/*background: #fff url(/images/loader.gif) no-repeat center center;*/
	background: #000 url(/images/loader.gif) no-repeat center center;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	filter: alpha(opacity=60);
	z-index: 6;
}
div.overlay.loaded {
	background-image: none;
}
div.lightbox {
	position: absolute;
	top: 0;
	left: 0;
	clear: both;
	padding-right: 15px;
	z-index: 6;
}
div.lightbox div.lbborder {
	--lbborder-radius: 5px;
	--lbborder-padding: 7px;

	border-radius: var(--lbborder-radius);
	border: solid 0px #eee;
	/*box-shadow: 3px 3px 15px #aaa;*/
	box-shadow: 3px 3px 25px rgba(0,0,0,.3);
	background-color: #fff;
	padding: var(--lbborder-padding);
	display: inline-block;
	position: relative;
}
div.lightbox div.lbborder .top-buttons {
	position: absolute;
	top: 1px;
	right: 0px;
	padding: 5px;
	background-color: white;
	border-top-right-radius: var(--lbborder-radius);
}
div.lightbox div.lbborder .top-buttons a {
	display: block;
	float: left;
}
div.lightbox div.lbborder .top-buttons a + a {
	margin-left: .5em;
}
div.lightbox div.lbborder .top-buttons img {
	display: block;
}
td.draghandle, th.draghandle {
	cursor:move;
}




.lightbox.centerize {
	width: 100%;
	height: 100%;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0;
	padding-right: 0;
	text-align: center;
}
.lightbox.centerize:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em;
}
.lightbox.centerize .lbborder {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

/* matrix.css */
#mootooltip .m-hilited {
	color: yellow;
	font-weight: bold;
}

table.matrix.invalid td {
	padding: 20px;
	font-size: 14px;
	width: 150px;
	color: red;
}

.mpc-sticky-wrapper {
	top: 0;
}
.mpc-sticky-wrapper.left .mpc-sticky.matrix-nav {
	left: 11px;
}
.matrix-nav {
	background: white;
	display: flex;
	padding: 20px;
	padding-left: 0;
	--hor-space: 20px;
}
.matrix-nav h1 {
	display: inline-block;
	margin-bottom: 0;
	margin-right: var(--hor-space);
	text-transform: uppercase;
	font-size: 22px;
	line-height: 30px;
	align-self: center;
	white-space: nowrap;
}
.matrix-nav a + h1 {
	margin-left: var(--hor-space);
}
.matrix-nav a.matrix-date-nav {
	align-self: center;
	font-size: 20px;
	line-height: 30px;
	height: 30px;
	width: 30px;
	min-width: 30px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	background: var(--club-color-table-title);
	color: var(--club-color-txt-on-dark);
	border-radius: 20px;
}
.matrix-nav a.matrix-date-nav.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.matrix-nav a.matrix-date-nav:focus,
.matrix-nav a.matrix-date-nav:hover,
.matrix-nav a.matrix-date-nav:active {
	background: var(--club-color-table-title-aa);
	color: var(--club-color-txt-on-dark);
}
.matrix-nav a + a {
	margin-left: 5px;
}
.matrix-nav select {
	margin-left: var(--hor-space);
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 4px;
}
.matrix-nav select option {
	font-weight: bold;
}
.matrix-nav .button3 {
	margin-left: var(--hor-space);
}

#ethrly-container {
	/*background: white;*/
	/*padding: 10px;*/
	/*box-shadow: -5px 5px 0px 10px rgba(255, 255, 255, 0.8);*/
}
#ethrly-button {
	display: flex;
	z-index: 4;
}
#ethrly-button a {
	text-align: center;
	font-weight: bold;
	font-family: sans-serif;
	text-transform: uppercase;
	color: black;
}
#ethrly-container.open #ethrly-button .toggle {
	margin-right: 20px;
}
#ethrly-container .toggle img {
	vertical-align: middle;
}
#ethrly-button a.refresh {
	margin-left: auto;
	align-self: center;
}
#ethrly-container:not(.open) .refresh,
#ethrly-container.open .toggle img,
#ethrly-container:not(.open) #ethrly-lights {
	display: none;
}
#ethrly-lights {
	margin-top: 10px;
	position: absolute;
	max-height: calc(100vh - 100px);
	overflow: auto;
}
#ethrly-lights table {
	margin-top: -1px;
	width: 100%;
}

#matrix_div {
	z-index: 3;
}

#matrix_div > #userclasses-activities-table {
	margin: 0 100px;
}
#userclasses-activities-table .activity-instance * {
	cursor: pointer;
}
#userclasses-activities-table img {
    max-width: 150px;
    max-height: 70px;
}

td.matrix-column {
	vertical-align: top;
}

table.matrix {
	--border-width: 1px;
	--background-color: white;

	font-size: 13px;
	font-family: var(--font);
	text-align: center;
	border-collapse: collapse;
	background: var(--background-color);

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

table.matrix td,
table.matrix th {
	padding: 4px;
	border: solid var(--border-width) #aaa6;
	cursor: default;
	width: 14em;
	font-family: var(--font);
	text-align: center;
}
table.matrix th.matrix-timeslot {
	padding: 2px 0;
	width: 1px;
	border: none;
}
table.matrix th.empty,
table.matrix td.empty {
	height: 1.4em;
}

table.matrix td.hilited-bound {
	opacity: 0.5;
}

table.matrix .matrix-header-force-width {
	width: 5.5em;
}
table.matrix .matrix-header th {
	padding: 5px;
}
table.matrix thead.matrix-header tr:first-child th {
	padding-top: 0;
}
table.matrix tfoot.matrix-header tr:last-child th {
	padding-bottom: 0;
}
table.matrix .matrix-header th.header-name {
	font-size: 110%;
}
table.matrix .matrix-header th {
	border: solid var(--border-width) white;
}

.matrix-header th.barbaan {
	padding: 0 !important;
}
.matrix-header th.barbaan button {
	display: block;
	width: 100%;
	padding: 5px;
	border: 0;
	background-color: black;
	color: white;
	font-weight: bold;
	cursor: pointer;
}
.matrix-header img {
	display: block;
	margin: 0 auto;
}

table.matrix img {
	max-width: 6.5em;
	max-height: 6.5em;
}

.matrix-timeslot.current-time {
	background-color: lightgreen;
}

img.matrix-userpic {
	max-width: 200px;
	max-height: 200px;
	margin-right: 5px;
}

#interactive-reservation-notice {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: block;
	padding: 20px;
	background: black;
	background: -webkit-linear-gradient(-45deg, #000 0%, #444 100%);
	background: linear-gradient(135deg, #000 0%, #444 100%);
	background-size: 400% 400%;
	color: white;
	z-index: 76543;
	border: solid 2px white;
	box-shadow: 0 0 0px 2px black;
	border-radius: 3px;

	-webkit-animation: hilite 3s ease infinite;
	-moz-animation: hilite 3s ease infinite;
	-o-animation: hilite 3s ease infinite;
	animation: hilite 3s ease infinite;
}
#interactive-reservation-notice,
#interactive-reservation-notice:focus,
#interactive-reservation-notice:hover {
	text-decoration: none;
}

.slot.slot.slot.slot.slot.moving,
.slot.slot.slot.slot.slot.copying,
.slot.slot.slot.slot.slot.opened {
	background: black;
	background: -webkit-linear-gradient(-45deg, #000 0%, #444 100%);
	background: linear-gradient(135deg, #000 0%, #444 100%);
	background-size: 400% 400%;
	color: white;

	-webkit-animation: hilite 3s ease infinite;
	-moz-animation: hilite 3s ease infinite;
	-o-animation: hilite 3s ease infinite;
	animation: hilite 3s ease infinite;
}
.slot.slot.slot.slot.slot.moving *,
.slot.slot.slot.slot.slot.copying *,
.slot.slot.slot.slot.slot.opened * {
	background: transparent none;
	color: white;
}



@-webkit-keyframes hilite {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@-moz-keyframes hilite {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@-o-keyframes hilite {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@keyframes hilite {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}

/* calendar.css */
#tbl_calendar {
	border-collapse: collapse;
	width: 100%;
	min-width: 100%;
	font-size: 13px;
	-webkit-user-select: none;
	background-color: white;
}
#td_leftframe_cal_etc #tbl_calendar {
	border-right: solid 1px #999;
}
body.mobile #tbl_calendar {
	border: solid 1px #ddd;
}
#tbl_calendar #calendar_date_title,
#tbl_calendar .month.prev,
#tbl_calendar .weekdays td {
	border-right: 0;
}
#tbl_calendar #calendar_date_title,
#tbl_calendar .month.next,
#tbl_calendar .weekdays td {
	border-left: 0;
}
#tbl_calendar td:first-child {
	border-left: 0;
}
#tbl_calendar td:last-child {
	border-right: 0;
}
#tbl_calendar thead tr td {
	border-top: 0;
	background-color: #555555;
	background-color: var(--club-color-table-title);
	color: #ffffff;
	color: var(--club-color-txt-on-dark);
}
#tbl_calendar thead tr td,
#tbl_calendar tbody tr:last-child td {
	border-bottom: 0;
}
#tbl_calendar td {
	border: solid 1px #ddd;
	width: 20px;
	height: auto;
	overflow: hidden;
	text-align: center;
	color: #000;
	text-decoration: none;
	background-color: white;
	padding: 0;
}
#tbl_calendar #calendar_date_title {
	text-transform: uppercase;
}
#tbl_calendar tr.weekdays td {
	padding: 5px 0;
	background-color: white;
	color: black;
	font-weight: bold;
}
#tbl_calendar td.empty {
	color: #ccc;
}
#tbl_calendar td.today {
	background-color: #8180c4;
	background-color: var(--club-color-bg-dark-ff);
	color: #ffffff;
	color: var(--club-color-txt-on-dark);
}
#tbl_calendar td.selected {
	background-color: #030089;
	background-color: var(--club-color-bg-dark);
	color: #ffffff;
	color: var(--club-color-txt-on-dark);
}
#tbl_calendar thead td.month:hover,
#tbl_calendar tbody td:hover,
#tbl_calendar tbody td.empty:hover {
	background-color: #ddd;
	color: #000;
}
#tbl_calendar a,
#tbl_calendar a:hover,
#tbl_calendar a:focus {
	padding: 5px 0;
	color: inherit;
	text-decoration: none;
	display: block;
}

table + .sub-cal {
	margin-top: 0;
}
.sub-cal input {
	width: 100%;
}
.sub-cal.search + .sub-cal.search input {
	border-top: 0;
}

/* rc_popups.css */
.rc_popup {
	position: absolute;
	border: solid 1px #000;
	border-color: #bbb #555 #555 #bbb;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: verdana;
	z-index: 114;
	white-space: nowrap;
}

.rc_popup li {
	display: block;
	list-style: none;
}
.rc_popup li.break {
	height: 6px;
	background-color: #eee;
}
.rc_popup li.hide-option {
	display: none;
}

.rc_popup a {
	display: block;
	padding: 2px 4px 2px 24px;
	background-color: #eee;
	background-position: 4px center;
	background-repeat: no-repeat;
	line-height: 24px;
	cursor: pointer;
	text-decoration: none;
	color: #333;
}

.rc_popup a:hover,
.rc_popup a:focus {
	color: #fff;
	background-color: #aaa;
}

.rc_popup a.rc-reserve {
	background-image: url(/images/icons/add.png);
}
.rc_popup a.rc-block,
.rc_popup a.rc-unblock {
	background-image: url(/images/icons/delete.png);
}
.rc_popup a.rc-edit {
	background-image: url(/images/icons/pencil.png);
}
.rc_popup a.rc-finish,
.rc_popup a.rc-checkin {
	background-image: url(/images/icons/pencil_go.png);
}
.rc_popup a.rc-move {
	background-image: url(/images/icons/arrow_out.png);
}
.rc_popup a.rc-copy,
.rc_popup a.rc-repeat {
	background-image: url(/images/icons/copy.png);
}
.rc_popup a.rc-receipt {
	background-image: url(/images/icons/cup.png);
}
.rc_popup a.rc-info {
	background-image: url(/images/icons/information.png);
}
.rc_popup a.rc-noshow {
	background-image: url(/images/icons/noshow.png);
}
.rc_popup a.rc-cancel {
	background-image: url(/images/icons/cancel.png);
}



table.rc_popup td {
	background-color: #eee;
	cursor: pointer;
	padding: 4px;
}
table.rc_popup tr:hover td {
	background-color: #aaa;
	color: #fff;
}
table.rc_popup td.a {
	width: 16px;
	text-align: center;
	border-right-width: 0;
}
table.rc_popup td.b {
	font-weight: normal;
	border-left-width: 0;
}
table.rc_popup td img {
	border: none;
	width: 16px;
	height: 16px;
}

table.rc_popup tr.break td,
table.rc_popup tr.break:hover td {
	background-color: #eee;
	height: 10px;
	font-size: 1px;
	padding: 0;
	cursor: default;
}

/* restyle26.css */
/**
 * Icons: Lucide v1.52.0, ISC license, see /images/icons/lucide/LICENSE
 * Browse: https://lucide.dev/icons/
 * Add: take https://unpkg.com/lucide-static@1.52.0/icons/<name>.svg, drop the comment and the svg tag's class/width/height,
 *      use ' instead of ", encode < > # as %3C %3E %23, add it as --icon-<name> below
 * Use: set --icon: var(--icon-<name>) on the element, a ::before masks it in currentColor
 */

html.restyle26 {

	--font: system-ui, Lucida Sans Unicode, Lucida Grande, sans-serif;

	--title-padding: 10px;
	--title-line-height: 1.5rem;
	--label-color: #555;
	--card-radius: 10px;
	--card-shadow: 0 0 14px rgba(0,0,0,.25);

	--icon-calendar-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 14v2.2l1.6 1'/%3E%3Cpath d='M16 2v3'/%3E%3Cpath d='M21 7.338V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2.338'/%3E%3Cpath d='M3 9h5.859'/%3E%3Cpath d='M8 2v3'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E");
	--icon-calendar-days: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 13h.01'/%3E%3Cpath d='M12 13h.01'/%3E%3Cpath d='M16 13h.01'/%3E%3Cpath d='M8 17h.01'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M16 17h.01'/%3E%3C/svg%3E");
	--icon-calendar-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18h6'/%3E%3Cpath d='M16 2v3'/%3E%3Cpath d='M19 15v6'/%3E%3Cpath d='M21 11.5V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h8.3'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 2v3'/%3E%3C/svg%3E");
	--icon-calendar-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='m14 13-4 4'/%3E%3Cpath d='m10 13 4 4'/%3E%3C/svg%3E");
	--icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
	--icon-chart-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");
	--icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
	--icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	--icon-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E");
	--icon-circle-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662'/%3E%3C/svg%3E");
	--icon-circle-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
	--icon-clipboard-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
	--icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
	--icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E");
	--icon-external-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
	--icon-file-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
	--icon-fold-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-6'/%3E%3Cpath d='M12 8V2'/%3E%3Cpath d='M4 12H2'/%3E%3Cpath d='M10 12H8'/%3E%3Cpath d='M16 12h-2'/%3E%3Cpath d='M22 12h-2'/%3E%3Cpath d='m15 19-3-3-3 3'/%3E%3Cpath d='m15 5-3 3-3-3'/%3E%3C/svg%3E");
	--icon-graduation-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
	--icon-hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E");
	--icon-id-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 19a4 4 0 00-8 0'/%3E%3Cpath d='M16 10h2'/%3E%3Cpath d='M16 14h2'/%3E%3Ccircle cx='9' cy='12' r='3'/%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3C/svg%3E");
	--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
	--icon-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
	--icon-list-checks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 5h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 19h8'/%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3C/svg%3E");
	--icon-lock-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E");
	--icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
	--icon-log-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E");
	--icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");
	--icon-message-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3C/svg%3E");
	--icon-message-square-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3Cpath d='M12 15h.01'/%3E%3Cpath d='M12 7v4'/%3E%3C/svg%3E");
	--icon-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='m15 19-3 3-3-3'/%3E%3Cpath d='m19 9 3 3-3 3'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='m5 9-3 3 3 3'/%3E%3Cpath d='m9 5 3-3 3 3'/%3E%3C/svg%3E");
	--icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
	--icon-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17V7'/%3E%3Cpath d='M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8'/%3E%3Cpath d='M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	--icon-refresh-cw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
	--icon-repeat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
	--icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--icon-shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--icon-shopping-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.103 6.034h17.794'/%3E%3Cpath d='M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z'/%3E%3C/svg%3E");
	--icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
	--icon-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2'/%3E%3Cpath d='M13 17v2'/%3E%3Cpath d='M13 11v2'/%3E%3C/svg%3E");
	--icon-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14.66V17a1 1 0 0 1-1 1 2 2 0 0 0-2 2v2'/%3E%3Cpath d='M14 14.66V17a1 1 0 0 0 1 1 2 2 0 0 1 2 2v2'/%3E%3Cpath d='M17.916 10H19.5A2.5 2.5 0 0 0 22 7.5V5a1 1 0 0 0-1-1h-3'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z'/%3E%3Cpath d='M6.084 10H4.5A2.5 2.5 0 0 1 2 7.5V5a1 1 0 0 1 1-1h3'/%3E%3C/svg%3E");
	--icon-user-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 11 2 2 4-4'/%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E");
	--icon-user-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E");
	--icon-user-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='17' x2='22' y1='8' y2='13'/%3E%3Cline x1='22' x2='17' y1='8' y2='13'/%3E%3C/svg%3E");
	--icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E");
	--icon-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
	--icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");

	img.clublogo {
		object-fit: cover;
	}

	#main-menu {
		--icon: var(--icon-dot);

		margin: 4px;
	}
	#main-menu li a:first-child {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 6px 8px;
		border-radius: 6px;
	}
	#main-menu li a:first-child > span {
		overflow: hidden;
		white-space: nowrap;
	}
	#main-menu li a:first-child::before {
		content: "";
		flex: 0 0 18px;
		height: 18px;
		background-color: currentColor;
		mask: var(--icon) center / contain no-repeat;
	}
	#main-menu li.active a,
	#main-menu li a:hover,
	#main-menu li a:focus {
		width: auto;
	}

	#main-menu .menu-reservations { --icon: var(--icon-calendar); }
	#main-menu .menu-blocking-courts { --icon: var(--icon-lock); }
	#main-menu .menu-block-reservations { --icon: var(--icon-repeat); }
	#main-menu .menu-strips { --icon: var(--icon-ticket); }
	#main-menu .menu-contract-reservations { --icon: var(--icon-file-text); }
	#main-menu .menu-group-management { --icon: var(--icon-shield-check); }
	#main-menu .menu-player-management { --icon: var(--icon-users); }
	#main-menu .menu-memberships { --icon: var(--icon-id-card); }
	#main-menu .menu-waiting-list { --icon: var(--icon-hourglass); }
	#main-menu .menu-daily-financial-report { --icon: var(--icon-chart-line); }
	#main-menu .menu-invitation-list { --icon: var(--icon-mail); }
	#main-menu .menu-cancellation-report { --icon: var(--icon-calendar-x); }
	#main-menu .menu-class-activities { --icon: var(--icon-graduation-cap); }
	#main-menu .menu-options { --icon: var(--icon-settings); }
	#main-menu .menu-reservation-rules { --icon: var(--icon-list-checks); }
	#main-menu .menu-checkins { --icon: var(--icon-clipboard-check); }
	#main-menu .menu-balance { --icon: var(--icon-wallet); }
	#main-menu .menu-club-items-sold { --icon: var(--icon-shopping-bag); }
	#main-menu .menu-complaints { --icon: var(--icon-message-square-warning); }
	#main-menu .menu-competition-management { --icon: var(--icon-trophy); }
	#main-menu .give-feedback { --icon: var(--icon-message-circle); }
	#main-menu .menu-my-account { --icon: var(--icon-circle-user); }
	#main-menu .menu-logoff { --icon: var(--icon-log-out); }

	.matrix-nav {
		--icon: var(--icon-dot);
	}
	.matrix-nav a.matrix-date-nav[data-offset] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		min-width: 36px;
		height: 36px;
		font-size: 0;
	}
	.matrix-nav a.matrix-date-nav[data-offset]::before {
		content: "";
		width: 20px;
		height: 20px;
		background-color: currentColor;
		mask: var(--icon) center / contain no-repeat;
	}
	.matrix-nav a.matrix-date-nav[data-offset="-1"] { --icon: var(--icon-chevron-left); }
	.matrix-nav a.matrix-date-nav[data-offset="+1"] { --icon: var(--icon-chevron-right); }

	.matrix-nav .button3 {
		border-radius: 8px;
	}
	.matrix-nav .button3::before {
		content: "";
		display: inline-block;
		vertical-align: -3px;
		width: 16px;
		height: 16px;
		margin-right: 8px;
		background-color: currentColor;
		mask: var(--icon) center / contain no-repeat;
	}
	.matrix-nav .matrix-nav-checkin { --icon: var(--icon-clipboard-check); }
	.matrix-nav .matrix-nav-week { --icon: var(--icon-calendar-days); }
	.matrix-nav .matrix-nav-new-player { --icon: var(--icon-user-plus); }
	.matrix-nav .matrix-nav-future { --icon: var(--icon-calendar-clock); }
	.matrix-nav .matrix-nav-condense { --icon: var(--icon-fold-vertical); }
	.matrix-nav #ethrly-button .toggle { --icon: var(--icon-lightbulb); }

	.matrix-nav #ethrly-button .toggle img {
		display: none;
	}

	table.matrix {
		border-collapse: separate;
		border-spacing: 3px 1px;
	}
	table.matrix td.slot {
		border-color: #0000001a;
		border-radius: 4px;
	}
	table.matrix .matrix-header th {
		border: 0;
	}

	.rc_popup {
		--icon: var(--icon-star);

		padding: 4px;
		border: 0;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: var(--card-shadow);
		font-family: var(--font);
		font-size: 13px;
	}
	.rc_popup li.break {
		height: 1px;
		margin: 4px 6px;
		background-color: #ddd;
	}
	.rc_popup a {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 2px 10px;
		border-radius: 6px;
		background-color: transparent;
		background-image: none;
	}
	.rc_popup a::before {
		content: "";
		flex: 0 0 16px;
		height: 16px;
		background-color: currentColor;
		mask: var(--icon) center / contain no-repeat;
	}
	.rc_popup a:hover,
	.rc_popup a:focus {
		background-color: #eee;
		color: #000;
	}

	.rc_popup a.rc-reserve { --icon: var(--icon-calendar-plus); }
	.rc_popup a.rc-block { --icon: var(--icon-lock); }
	.rc_popup a.rc-unblock { --icon: var(--icon-lock-open); }
	.rc_popup a.rc-edit { --icon: var(--icon-pencil); }
	.rc_popup a.rc-finish { --icon: var(--icon-circle-check); }
	.rc_popup a.rc-checkin { --icon: var(--icon-user-check); }
	.rc_popup a.rc-move { --icon: var(--icon-move); }
	.rc_popup a.rc-copy { --icon: var(--icon-copy); }
	.rc_popup a.rc-repeat { --icon: var(--icon-repeat); }
	.rc_popup a.rc-receipt { --icon: var(--icon-receipt); }
	.rc_popup a.rc-info { --icon: var(--icon-info); }
	.rc_popup a.rc-noshow { --icon: var(--icon-user-x); }
	.rc_popup a.rc-cancel { --icon: var(--icon-circle-x); }

	.rc_popup li.custom-option a {
		background-image: none !important;
	}

	body:not(.mobile) div.lightbox div.lbborder .top-buttons {
		--title-offset: var(--lbborder-padding);
		--title-height: calc(2 * var(--title-padding) + var(--title-line-height));
		--chip-size: 26px;
		--chip-inset: calc((var(--title-height) - var(--chip-size)) / 2);

		top: calc(var(--title-offset) + var(--chip-inset));
		right: calc(var(--title-offset) + var(--chip-inset));
		display: flex;
		gap: 8px;
		padding: 0;
		border-radius: 0;
		background-color: transparent;
	}
	body:not(.mobile) div.lightbox div.lbborder:has(> table:first-of-type:not(.card), > form:first-of-type > table:first-of-type:not(.card)) .top-buttons {
		--title-offset: calc(var(--lbborder-padding) + var(--table-border-width) + var(--table-spacing));
	}
	body:not(.mobile) div.lightbox table.card > thead > tr.tblUpTitle:first-child > :last-child {
		padding-right: 120px;
	}
	body:not(.mobile) div.lightbox div.lbborder > table:first-of-type:not(.card) > :first-child > tr.tblUpTitle:first-child > :last-child,
	body:not(.mobile) div.lightbox div.lbborder > form:first-of-type > table:first-of-type:not(.card) > :first-child > tr.tblUpTitle:first-child > :last-child {
		padding-top: var(--title-padding);
		padding-right: 120px;
		padding-bottom: var(--title-padding);
		line-height: var(--title-line-height);
	}
	div.lightbox div.lbborder .top-buttons a {
		--icon: var(--icon-x);

		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--chip-size);
		height: var(--chip-size);
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0 1px 4px rgba(0,0,0,.35);
		color: #333;
	}
	div.lightbox div.lbborder .top-buttons a + a {
		margin-left: 0;
	}
	div.lightbox div.lbborder .top-buttons a:hover,
	div.lightbox div.lbborder .top-buttons a:focus {
		background-color: #eee;
		color: #000;
	}
	div.lightbox div.lbborder .top-buttons a::before {
		content: "";
		width: 16px;
		height: 16px;
		background-color: currentColor;
		mask: var(--icon) center / contain no-repeat;
	}
	div.lightbox div.lbborder .top-buttons img {
		display: none;
	}
	div.lightbox div.lbborder .top-buttons a.top-refresh { --icon: var(--icon-refresh-cw); }
	div.lightbox div.lbborder .top-buttons a.top-new-tab { --icon: var(--icon-external-link); }
	div.lightbox div.lbborder .top-buttons a.top-close { --icon: var(--icon-x); }

	table.card {
		border: 0;
		border-spacing: 0;
		margin-bottom: 20px;
		border-radius: var(--card-radius);
		box-shadow: var(--card-shadow);
	}
	table.card.data-table,
	body.mobile table.card {
		width: 100%;
	}
	table.card thead tr.tblUpTitle:first-child > th {
		padding: var(--title-padding);
		line-height: var(--title-line-height);
		border-radius: var(--card-radius) var(--card-radius) 0 0;
	}

	body:not(.mobile) div.lightbox table.card {
		margin-bottom: 0;
		box-shadow: none;
	}
	table.card tbody td,
	table.card tbody th {
		padding: 10px 14px;
	}

	table.card.data-table th,
	table.card.data-table td {
		padding-right: 8px;
		padding-left: 8px;
	}
	table.card.data-table tr > :first-child {
		padding-left: 14px;
	}
	table.card.data-table tr > :last-child {
		padding-right: 14px;
	}
	body:not(.mobile) table.card.data-table tr:not(.tblUpTitle) > :first-child {
		padding-left: 8px;
	}
	body:not(.mobile) table.card.data-table tr:not(.tblUpTitle) > :last-child {
		padding-right: 8px;
	}
	table.card.data-table thead tr.tblTitle {
		background-color: #fff;
	}
	table.card.data-table thead tr.tblTitle > th,
	table.card.mixed-table tr.tblTitle > th {
		padding-top: 10px;
		padding-bottom: 6px;
		border-bottom: solid 1px #ddd;
		color: var(--label-color);
		font-size: 12px;
	}
	table.card.mixed-table tr:is(.odd, .even) > * {
		border-top: 0;
	}
	table.card.data-table tbody tr + tr > *,
	table.card.mixed-table tr:not(.tblTitle) + tr:is(.odd, .even) > * {
		border-top: solid 1px #eee;
	}
	table.card.mixed-table tbody.details .tblTitle {
		font-weight: bold;
		text-align: left;
		color: var(--label-color);
	}
	table.card:is(.form-table, .info-table) tbody tr:not(.tblUpTitle) > th,
	table.card:is(.form-table, .info-table) tbody td.tblTitle,
	table.card:is(.form-table, .info-table) tbody tr.tblTitle > td {
		font-weight: bold;
		text-align: left;
		color: var(--label-color);
	}
	table.card:is(.form-table, .info-table) tr.tblTitle > * {
		border-bottom: 0;
	}
	table.card:is(.form-table, .info-table) tr.tblTitle:has(> th + th) > th {
		padding-top: 10px;
		padding-bottom: 6px;
		border-bottom: solid 1px #ddd;
		color: var(--label-color);
		font-size: 12px;
	}
	table.card:is(.form-table, .info-table) tbody tr:is(.odd, .even) > * {
		border-top: 0;
	}
	table.card:is(.form-table, .info-table) tbody tr.tblUpTitle > * {
		padding: 10px 14px;
	}
	table.card:is(.form-table, .info-table) tr.spacer {
		display: none;
	}
	table.card.form-table select,
	table.card.form-table textarea,
	table.card.form-table input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]) {
		padding: 6px 8px;
		border: solid 1px #ccc;
		border-radius: 8px;
		background-color: #fff;
	}
	table.card:is(.form-table, .info-table) tfoot td {
		padding: 16px 14px 14px;
	}
	table.card .button,
	.make-reservation .button.submit {
		padding: 7px 14px;
		border-radius: 8px;
	}
	table.card .button + .button,
	table.card .button + a {
		margin-left: 6px;
	}
	table.card .button:not(.submit, .cancel) {
		background: #ddd;
		color: #000;
	}
	table.card .button.cancel {
		background-image: none;
	}
	table.card .button.submit,
	.make-reservation .button.submit {
		background: var(--club-color-table-title);
		color: var(--club-color-txt-on-table-title);
	}

	body:not(.mobile) div.lightbox table.card thead tr.tblUpTitle:first-child > th {
		border-radius: var(--lbborder-radius) var(--lbborder-radius) 0 0;
	}
	body:not(.mobile) table.card tbody td,
	body:not(.mobile) table.card tbody th {
		padding-top: 6px;
		padding-bottom: 6px;
	}
	body:not(.mobile) table.card:is(.form-table, .info-table, .mixed-table) tbody td,
	body:not(.mobile) table.card:is(.form-table, .info-table, .mixed-table) tbody th {
		padding-right: 8px;
		padding-left: 8px;
	}
	body:not(.mobile) table.card:is(.form-table, .info-table) tfoot td {
		padding: 10px 8px 8px;
	}
	body:not(.mobile) table.card:is(.form-table, .info-table) tbody th.tblTitle,
	body:not(.mobile) table.card:is(.form-table, .info-table) tbody td.tblTitle,
	body:not(.mobile) table.card.mixed-table tbody.details .tblTitle {
		white-space: nowrap;
	}
	body:not(.mobile) table.card:is(.form-table, .info-table, .mixed-table) thead + tbody > tr:first-child > * {
		padding-top: 12px;
	}

	body.mobile table.card:is(.form-table, .info-table) tbody td,
	body.mobile table.card:is(.form-table, .info-table) tbody th {
		display: block;
	}
	body.mobile table.card:is(.form-table, .info-table) tbody tr:not(.tblUpTitle) > th,
	body.mobile table.card:is(.form-table, .info-table) tbody td.tblTitle,
	body.mobile table.card:is(.form-table, .info-table) tbody tr.tblTitle > td {
		padding-top: 12px;
		padding-bottom: 4px;
	}
	body.mobile table.card:is(.form-table, .info-table) tbody th + td,
	body.mobile table.card:is(.form-table, .info-table) tbody th + td + td,
	body.mobile table.card:is(.form-table, .info-table) tbody td.tblTitle + td,
	body.mobile table.card:is(.form-table, .info-table) tbody tr.tblTitle + tr > td,
	body.mobile table.card:is(.form-table, .info-table) tbody tr:has(> .tblTitle:only-child) + tr > td {
		padding-top: 0;
	}
	body.mobile table.card:is(.form-table, .info-table) tbody tr:has(> th + td + td) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
	}
	body.mobile table.card:is(.form-table, .info-table) tbody tr:has(> th + td + td) > th {
		grid-column: 1 / -1;
	}
	body.mobile table.card:is(.form-table, .info-table) tbody tr:has(> th + td + td) > th + td {
		white-space: normal;
	}
	body.mobile table.card:is(.form-table, .info-table) tbody tr:has(> th + td + td) > td + td {
		text-align: right;
	}
	body.mobile table.card:is(.form-table, .info-table) tbody tr.tblTitle:has(> th + th) {
		display: none;
	}
	body.mobile table.card:is(.form-table, .info-table) tbody td.right {
		text-align: left;
	}
	body.mobile table.card.form-table select,
	body.mobile table.card.form-table textarea,
	body.mobile table.card.form-table input[type=text] {
		box-sizing: border-box;
		width: 100%;
	}
	body.mobile table.card.form-table select,
	body.mobile table.card.form-table textarea,
	body.mobile table.card.form-table input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]) {
		padding: 10px;
	}
	body.mobile table.card.form-table td:has(> .ms-search) {
		display: flex;
		gap: 6px;
	}
	body.mobile table.card.form-table .ms-search {
		flex: 0 0 7em;
		min-width: 0;
	}
	body.mobile table.card.form-table .ms-search + select {
		flex: 1;
		min-width: 0;
		margin-left: 0;
	}
	body.mobile table.card .button,
	body.mobile .make-reservation .button.submit {
		box-sizing: border-box;
		width: 100%;
		padding: 12px;
	}
	body.mobile table.card .button + .button {
		margin-top: 8px;
		margin-left: 0;
	}
	body.mobile table.card .actions .button {
		margin-bottom: 0;
	}

	.member-list-members li {
		display: flex;
		align-items: center;
		gap: 8px;
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.member-list-members li + li {
		margin-top: 0;
		border-top: solid 1px #eee;
	}
	table.card .member-list-members li,
	table.card .member-list-members:empty::after {
		padding-right: 0;
		padding-left: 0;
	}
	.member-list-members a.action-del {
		order: 1;
		margin-left: auto;
		float: none;
	}
	.member-list-container a.action-add {
		flex: none;
		align-self: center;
		vertical-align: middle;
	}

	body.resshell .make-reservation {
		margin-top: 1em;
	}
	body.resshell:not(.mobile) table.card {
		min-width: 450px;
	}

	body.resshell .schedule-index-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	body.resshell .schedule-index-button {
		width: auto;
		float: none;
		padding: 12px;
		border: 0;
		border-radius: 8px;
		background: var(--club-color-table-title);
		color: var(--club-color-txt-on-table-title);
		font-weight: bold;
		text-decoration: none;
	}
	body.resshell .schedule-index-button:hover {
		opacity: .8;
	}
	body.resshell .schedule-index-button:active,
	body.resshell .schedule-index-button:focus {
		color: var(--club-color-txt-on-table-title) !important;
	}

}