/* SKIN - BEGIN */
	
:root {

	--first-brand-color: #906;
	--second-brand-color: #357;
	--contrast-brand-color: #fff;
	--text-color: #322;
	--bg-color: var(--light-color);
	--bg-main-color: #fff;
	--dark-color: #212121;
	--medium-color: #E0DDDD;
	--light-color: #F9F8F7;
	--font-family: sans-serif;

	--topbar-color: #7c7777;
	--box-shadow: 3px 3px 3px rgba(0,0,0,0.03);

	--table-border-color: #EEEDEB;
	--th-bg-color: var(--table-border-color);
	--td-bg-color-odd: #FFFFFF;
	--td-bg-color-even: var(--light-color);
	--td-bg-color-hover: #F7F5F3;
	--td-bg-color-error: #FFEEEE;
	--td-bg-color-error-hover: #FFE0E0;

	--field-color: #7C7777;
	--field-bg-color: #fff;
	--field-border-color: #dddfdf;

	--btn-color: var(--second-brand-color);
	--btn-bgcolor-from: #fff;
	--btn-bgcolor-to: #fff;
	--btn-border: 2px solid var(--second-brand-color);

	--btn-hover-color: var(--first-brand-color);
	--btn-hover-bgcolor-from: var(--first-brand-color);
	--btn-hover-bgcolor-to: var(--first-brand-color);
	--btn-hover-border: 2px solid var(--first-brand-color);

	--btn-svg-color: invert(23%) sepia(9%) saturate(5419%) hue-rotate(174deg) brightness(98%) contrast(70%);
	--btn-svg-hover-color: invert(9%) sepia(63%) saturate(7500%) hue-rotate(311deg) brightness(98%) contrast(99%);
	--btn-svg-border: 2px solid #000;

	--info-color:  #788;
	--info-bg-color: #effcff;
	--success-color: #694;
	--success-bg-color: #f0ffef;
	--alert-color: #b90;
	--alert-bg-color: #ffffef;
	--error-color: #a22;
	--error-bg-color: #ffefef;

}

@keyframes fade_in_show {
	0% {
		opacity: 0;
		/* transform: scale(0)*/
	}

	100% {
		opacity: 1;
		/* transform: scale(1) */
	}
}

@keyframes blink-animation {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}	
}


html { scroll-behavior: smooth; margin: 0; padding: 0; border: 0; height: 100%; }
body { font-family: var(--font-family); color: var(--text-color); background-color: var(--bg-color); font-size: 100%; font-size: calc(13px + 0.14vw); margin: 88px 0 0; min-height: 100vh;  min-height: calc( 100vh - 88px) }
html, body { scroll-padding-top: 100px; }
body:after { position: absolute; content: ""; width: 100%; height: 3px; background: var(--first-brand-color); background: linear-gradient(45deg, var(--first-brand-color) 0%, var(--second-brand-color) 100%); left: 0; bottom: -1px; }
body > *:not(a) { min-width: 300px;  max-width: 100vw }

*:focus { outline: 1px dotted var(--light-color) }

a { text-decoration: none; color: var(--first-brand-color); transition: all 0.3s, text-indent 0s; cursor: pointer; } 
a:hover { text-decoration: underline; opacity: 0.8; }
a.disabled, a[disabled] { color: #666; pointer-events: none; filter: saturate(0); opacity: 0.5; }
a.disabled:hover { opacity: 0.35; }
a.disabled:active { pointer-events: none; }
section a { color: var(--second-brand-color); }
section a:hover { color: var(--first-brand-color); text-decoration: none; }

label[for] { cursor: pointer; }

img  { 	max-width: 100%; height: auto; }

.small, small { font-size: 0.75em; }
.align-center { text-align: center; }

p 	{ font-size: 0.9em; margin-bottom: 1em; }
h1 	{ font-size: 1.8em; margin-bottom: 1.2em; }
h2 	{ font-size: 1.6em; margin-bottom: 1.2em; }
h3 	{ font-size: 1.4em; margin-bottom: 1.2em; }
h4 	{ font-size: 1.2em; margin-bottom: 1.2em; }
h5 	{ font-size: 1.1em; margin-bottom: 1.2em; }
h6 	{ font-size: 1.0em; margin-bottom: 1.2em; }

h2 .small, h2 small, h2 a { font-size: 0.5em; font-size: calc(12px + 0.05em); font-weight: normal; }
h3 .small, h3 small, h3 a,
h4 .small, h4 small, h4 a,
h5 .small, h5 small, h5 a { font-size: 0.6em; font-size: calc(10px + 0.05em); font-weight: normal; }

code { border-radius: 2px; padding:0.2em; margin: 0.3em 0.2em; font-size: 0.9em; color: var(--info-color); background: var(--info-bg-color); border: 1px solid rgba(0,0,0,0.05); }

ul.list { list-style: outside; list-style-type: square; margin-left: 1em; font-size: 1em}
ul.list li { margin: 0.3em 0; }
ul.list li a { padding: 0.2em; }
ul.list.disabled a { display: none; }
ul.list ul { margin-left: 2em; }

.row { display: flex; flex-direction: column; gap: 1em; }
.col { transition: 0.3s; }

.btn { background: var(--btn-bgcolor-from); color: var(--btn-color); border: var(--btn-border); padding: 0.2em 1em; max-width: 100%; text-decoration: none; transition: 0.3s; cursor: pointer; border-radius: 3px; }
.btn:hover, .btn.active{ background: var(--btn-bgcolor-to); border: var(--btn-hover-border);  color: var(--btn-hover-color); }
a.btn { display: inline-block; }
a.hover-btn { padding: 0.5em 0.2em; margin: 0.3em 0.2em; display: inline-block; }
a.hover-btn:hover { background: var(--light-color); border-radius: 0.2em; }

a.to-top { position: fixed; width: 3em; height: 3em; line-height: 1em; bottom: 2%; right: 2%; border-radius: 1.5em; background: var(--bg-main-color); box-shadow: 5px 5px 5px rgba(0,0,0,0.2); color: var(--second-brand-color); padding: 1em; text-align: center; }
a.to-top:before { display: inline; font-size: 100%; }
a.to-top:hover { color: var(--first-brand-color); text-decoration: none; }

.blink { animation: blink-animation 2s steps(10, start) infinite; }
.copy-link.active, 
.copied { animation: fade_in_show 0.5s; }
.fa-copy { display: inline-block !important; }
.copied:before, .copied:hover:before  { content:"\f46c";  color: var(--success-color)}

span.if-not-active { display: inline; }
span.if-active { display: none; }
.active > span.if-not-active { display: none; }
.active > span.if-active { display: inline; }

#maintenance {
	position: fixed; 
	top: 0;
	left: 0;
	z-index: 10001;
	padding: 14px;
	border-right: 1px solid #F00;
	border-bottom: 1px solid #F00;
	border-bottom-right-radius: 8px;
	background-color: #FFF;
	background-image: linear-gradient(355deg, rgba(255, 0, 0, .25) 0%, rgba(255, 0, 0, .05) 100%);
	font-size: 15px;
	color: #F00;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	background-color: var(--light-color);
	box-shadow: -1px var(--box-shadow);
}
.video-container > * {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.hide-xs {}
.hide-md {}
.hide-lg {}

.print-only { display: none; }

/* fa-icons */ 
.fa-icon:before, .fa-after:after,
div.icons > a:before,
a.data-option:before,
a.orderBy.asc:before, a.orderBy.desc:before,
main .navigation ol > li > a:before, main .navigation a.nav-back:before,
#topbar #logout:before,
nav > #ham:before,
nav > #hammobile:before,
.msg.box:before  
/* ALL ICONS */ { font-family: var(--fa-style-family-classic); font-weight: var(--fa-style, 900); display: inline-block; font-size: 0.9em; vertical-align: 0; min-width: 1.3em; text-align: center; margin-right: 0.1em; }

a.fa-icon, a.fa-after { white-space: nowrap }
.fa-after:after { margin-left: 0.3em; margin-right: 0 }

.fa-big:before { font-size: 1.5em; vertical-align: -0.1em; }
.fa-icon span { display: none; }
.fa-after.blank:after { content: " \f08e"; }
.fa-after:before {display: none}

a.edit:before      { content: "\f044"; }
a.delete:before    { content: "\f2ed"; }
a.moveUp:before    { content: "\f062"; }
a.moveDown:before  { content: "\f063"; }
a.dataEdit:before  { content: "\f0ce"; }
a.checked:before   { content: "\f058"; }
a.unchecked:before { content: "\f00d"; }
a.download:before  { content: "\f019"; }

#topbar a.wowcast-D:before { content: "\f625"; }
#topbar a.wowcast-N:before { content: "\f144"; } 
#topbar a.wowcast-A:before { content: "\f09c"; } 
#topbar a.wowcast-Q:before { content: "\f51c"; } 
#topbar a.wowcast-M:before { content: "\f302"; } 
#topbar a.wowcast-C:before { content: "\f2bb"; }

/* (to) vertical tablet */
@media(max-width: 768px) {
	body { margin-top: 126px } 
	.hide-xs { display: none !important; }
	a.fa-icon { padding: 0.3em; margin: 0.1em; }	
}
/* (from) vertical tablet */
@media(min-width: 768px) {
	.row { flex-direction: row; }
	.hide-md { display: none !important; }
}
/* (from) horizontal tablet / PC */
@media(min-width: 1024px) {
	.hide-lg { display: none !important; }
}


/* Forms */
::placeholder { opacity: 0.5; }
option:disabled { color: #bbb; }
optgroup:empty { display: none }
*:hidden, *[hidden], *.hidden { display: none }

label[for] { cursor: pointer; }
fieldset:disabled label[for] { cursor: default; }
fieldset:disabled label span.red { display: none; }
fieldset:not(.buttons) input:read-only { opacity: 0.75; }
	
input { margin: 0; }

h1 { text-align: center; }
hr { border: none; height: 1px; color: var(--medium-color); background-color: var(--medium-color); margin: 0.5em 0; }

form { padding: 2%; max-width: 1279px; margin: 0 auto; }

form h2 { font-size: 120%; background-color: var(--light-color); padding: 1em 2em; margin: 2% -0.2% 3%; }
form h2:first-child { margin-top: -0.2%; }
form h2 small { font-size: 12px; font-weight: normal; }

form fieldset { border: none; padding: 0.8em 0; margin: 0; }
form fieldset.inline { display: inline-block; width: auto; margin-right: 2em; }
form fieldset.disabled { opacity: 0.5; }
form fieldset label { display: block; font-weight: bold; }
form fieldset.inline label { display: inline-block; }
form fieldset input { vertical-align: middle; }

form fieldset input[type=text],
form fieldset input[type=email],
form fieldset input[type=number],
form fieldset input[type=password],
form fieldset input[type=url],
form fieldset textarea { width: 100%; }

input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="file"],
input[type="date"],
input[type="time"],
input[type="url"],
textarea,
select {
	border: 1px solid var(--field-border-color);
	background: var(--field-bg-color);
	color: var(--field-color);
	font-weight: bold;
	padding: 0.6em 0.8em;
	border-radius: 2px;
	box-shadow: var(--box-shadow) inset;
	transition: outline 0.3s;	
}

input:disabled,
textarea:disabled,
select:disabled {
	background: #fcfcfc;
	color: #aaa;
	border-color: #ddd;
}

input:disabled + a:not(.carpet-open) ,
textarea:disabled + a:not(.carpet-open) ,
select:disabled + a:not(.carpet-open) {
	pointer-events: none;
	opacity: 0.5;
	filter: grayscale(1);
}

input:not([type="button"]):focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--th-bg-color);
}

/* Buttons color + black icons example: recover to using bg colors
input[type=submit], input[type=button], input[type=reset], button {
	color: var(--btn-color);
	background-color: var(--btn-bgcolor-to);
	border: var(--btn-border);
	background: linear-gradient(center top, var(--btn-bgcolor-from), var(--btn-bgcolor-to));
	background: -moz-linear-gradient(center top, var(--btn-bgcolor-from), var(--btn-bgcolor-to));
	background: -webkit-gradient(linear, 0 0, 0 100%, from(var(--btn-bgcolor-from)), to(var(--btn-bgcolor-to)));
	transition: color 0.3s;
}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, button:hover {
	color: var(--btn-hover-color);
	background-color: var(--btn-hover-bgcolor-to);
	border: var(--btn-hover-border);
	background: linear-gradient(center top, var(--btn-hover-bgcolor-from), var(--btn-hover-bgcolor-to));
	background: -moz-linear-gradient(center top, var(--btn-hover-bgcolor-from), var(--btn-hover-bgcolor-to));
	background: -webkit-gradient(linear, 0 0, 0 100%, from(var(--btn-hover-bgcolor-from)), to(var(--btn-hover-bgcolor-to)));
}
*/

.buttons input[type=submit], .buttons  input[type=button], .buttons  input[type=reset], .buttons  button {
	color: #000;
	background-color: transparent;
	border: var(--btn-svg-border) !important;
	transition: 0.3s;
	filter: var(--btn-svg-color);
}
.buttons input[type=submit]:hover, .buttons  input[type=button]:hover, .buttons  input[type=reset]:hover,.buttons  button:hover {
	filter: var(--btn-svg-hover-color);
}

.buttons input[type=submit]:focus, .buttons  input[type=button]:focus, .buttons  input[type=reset]:focus,.buttons  button:focus {
	outline: var(--btn-svg-border);
	border-color: transparent !important;
}

form fieldset.buttons { display: flex; flex-direction: column; justify-content: flex-end; border-top: 1px solid #DDD; padding: 1em 0 0 0; margin-top: 2em; }
form fieldset.buttons:first-child { border-top: none; padding-top: 0; margin-top: 0; }
form fieldset.buttons > * {
	margin-top: 0.6em;
	height: auto !important;
	padding: 0.5em 1em;
	cursor: pointer;
}

form fieldset.buttons > :first-child { margin-top: 0; }
form fieldset.buttons > :disabled { pointer-events: none; opacity: 0.5; filter: saturate(0) !important; }

/* Buttons color + black icons example: recover to using bg colors
form fieldset.buttons > .clickme {
	color: var(--btn-hover-bgcolor-from);
	border: var(--btn-hover-border);
}
form fieldset.buttons > .clickme:hover {
	color: var(--btn-hover-color);
}
*/

form fieldset.buttons > .clickme {
	filter: var(--btn-svg-hover-color);
}
form fieldset.buttons > .clickme:hover {
	opacity: 0.7;
}

form fieldset textarea { height: 80px; }
form fieldset select { width: 100%; }

form fieldset input[type=radio] { float: left; clear: left; margin-top: 4px; }
form fieldset input[type=radio] + label { display: inline; vertical-align: middle; font-weight: normal; margin: 3px 0 0 4px; float: left; text-align: left; }
form fieldset input[type=checkbox] + label { display: inline; vertical-align: middle; font-weight: normal; margin-right: 12px; }

form .fieldNote { margin: -0.5em 0.3em 0 0; padding-bottom: 1em; font-size: 10px; font-size: calc(10px + 0.1vw); color: #888; text-align: justify; }
form .fieldNote progress { display: none; width: 300px; }
form .fieldNote p { margin: 0; }
form .fieldNote.big { font-size: 12px; font-size: calc(11px + 0.1vw); }
form .fieldNote br { margin-bottom: 0.5em; }

form fieldset div.editor { width: 100%; background-color: white; }
form fieldset div.editor.disabled { background-color: unset; }
form fieldset div.editor p { margin: 4px; }
form fieldset div.editor .trumbowyg-box { border-color: var(--medium-color) }
form fieldset div.editor .trumbowyg-editor { padding: 0; }
form fieldset div.editor .trumbowyg-textarea { padding: 4px; }
.trumbowyg-modal-box form { border: 0; padding: 0; background-color: unset; position: static; }



form fieldset div.editor .trumbowyg-variables-button { color: var(--text-color) }
form fieldset div.editor .trumbowyg-button-group button { color: var(--text-color) }
form fieldset div.editor .trumbowyg-button-group button:hover { color: var(--text-color) }
form fieldset div.editor .trumbowyg-editor-preview .trumbowyg-editor img { cursor: inherit; }
form fieldset div.editor .trumbowyg-editor-preview .trumbowyg-editor a.red img { border: 1px dashed var(--error-color)}
form fieldset div.editor .trumbowyg-preview button:not(.trumbowyg-preview-button) { opacity: 0.2; cursor: default; pointer-events: none; }
form fieldset div.editor .trumbowyg-dropdown button { height: 26px; line-height: 26px; font-size: 13px; }
.trumbowyg-modal-box form { border: 0; padding: 0; background-color: unset; position: static; }

form fieldset div.editor .trumbowyg-editor-box h1,
form fieldset div.editor .trumbowyg-editor-box h2,
form fieldset div.editor .trumbowyg-editor-box h3,
form fieldset div.editor .trumbowyg-editor-box h4 { background: none !important; margin: 4px !important; padding: 0 !important; text-align: initial }

form fieldset div.editor .trumbowyg-editor-box h1 {font-size: 1.8em !important }
form fieldset div.editor .trumbowyg-editor-box h2 {font-size: 1.6em !important }
form fieldset div.editor .trumbowyg-editor-box h3 {font-size: 1.4em !important}
form fieldset div.editor .trumbowyg-editor-box h4 {font-size: 1.2em !important }

form fieldset div.editor .trumbowyg-button-pane { padding: 0; background-color: var(--th-bg-color); border-color: var(--th-bg-color); z-index: 2 }
form fieldset div.editor .trumbowyg-dropdown { z-index: 2 }
form fieldset div.editor .trumbowyg-button-pane .trumbowyg-button-group::after { background: var(--medium-color)}
form fieldset div.editor .trumbowyg-button-pane button.trumbowyg-preview-button { background-image:  url(../img/preview-on.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; }
form fieldset div.editor .trumbowyg-button-pane button.trumbowyg-preview-button.trumbowyg-active { background-image: url(../img/preview-off.png); }

.trumbowyg-body-fullscreen #topbar,
.trumbowyg-body-fullscreen .topnav,
.trumbowyg-body-fullscreen main .navigation { display: none; }

form fieldset div.editor.h120 { height: 120px; min-height: 120px; }
form fieldset div.editor.h120 .trumbowyg-box { height: 120px; min-height: 120px; }
form fieldset div.editor.h120 .trumbowyg-editor { height: 80px; min-height: 80px; }
form fieldset div.editor.h120 .trumbowyg-textarea { height: 80px; min-height: 80px; }

form fieldset div.editor.h320 { height: 320px; min-height: 320px; }
form fieldset div.editor.h320 .trumbowyg-box { height: 320px; min-height: 320px; }
form fieldset div.editor.h320 .trumbowyg-editor { height: 280px; min-height: 280px; }
form fieldset div.editor.h320 .trumbowyg-textarea { height: 280px; min-height: 280px; }

form fieldset div.editor.h420 { height: 420px; min-height: 420px; }
form fieldset div.editor.h420 .trumbowyg-box { height: 420px; min-height: 420px; }
form fieldset div.editor.h420 .trumbowyg-editor { height: 380px; min-height: 380px; }
form fieldset div.editor.h420 .trumbowyg-textarea { height: 380px; min-height: 380px; }
form fieldset div.editor.h420 .trumbowyg-box.trumbowyg-fullscreen { height: 100%; }

form div.preview { border: 16px solid white; padding: 8px; margin: -6px -8px; }
form div#previewParams { display: none; }
form div.preview textarea#previewTextarea {
	border: 1px solid var(--medium);
    margin: 3px -7px -10px -7px;
    width: calc(100% + 14px);
	height: 300px;
	min-height: 300px;
	resize: vertical;
	white-space: pre;
}

form.invalid fieldset input:invalid,
form.invalid fieldset select:invalid,
form.invalid fieldset textarea:invalid { border: 1px solid #C66; box-shadow: 0 3px 3px #C66; }

form.invalid fieldset input:invalid:focus,
form.invalid fieldset select:invalid:focus,
form.invalid fieldset textarea:invalid:focus { outline: 1px solid #C66; }

form div.preview { border: 16px solid white; padding: 1em; margin: -0.8em -1em; }
form textarea.preview {
	display: none;
	border: none;
	margin: -6px -8px;
	width: calc(100% + 16px);
	height: 300px;
	min-height: 300px;
	resize: vertical;
	white-space: pre;
}

/* Fancy checkbox: slider */
label.switch { position: relative; display: inline-block; width: 40px; min-width: 40px; height: 24px; vertical-align: middle; }
label.switch input { opacity: 0; width: 0; height: 0; } /* Hide default HTML checkbox */
form fieldset.inline label.switch { margin-left: 0.5em; }

/* The slider */
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 2px; bottom: 2px; background: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: var(--first-brand-color); }
input:focus + .slider { box-shadow: 0 0 1px var(--first-brand-color); }
input:checked + .slider:before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); }
input:disabled + .slider:before,
fieldset:disabled input + .slider:before { filter: saturate(0); opacity: 0.6; }
input:checked:disabled + .slider:before,
fieldset:checked:disabled input + .slider:before { filter: brightness(0.8);  }

/* Rounded sliders */
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

label.switch + a { margin-left: 1em; }

.if-checked, .if-not-checked { display: none; }
.if-checked.active, .if-not-checked.active { display: inherit; animation: fade_in_show 0.5s; }
label.switch + .if-checked.active, label.switch + .if-not-checked.active { display: inline-block; vertical-align: middle; margin-top: 0.2em; }

.masterOnly { background-color: #99006611; border-left: 3px solid #906;}

/* < 568px, horizontal mobile */
@media(max-width: 567px)
{
	form fieldset label { padding: 0.3em 0; }
	form fieldset input[type="radio"] { margin: 0.6em 0.2em 0.6em 0; }
	form fieldset input[type="radio"] + label { margin: 0.25em 0 0 0.2em; }
	label.switch { margin: 0.2em; }
	form fieldset input + a.fa-icon { padding: 0; top: 0.25em; }
	.masterOnly { padding-left: 0.5em; padding-right: 0.5em}	
}

/* >= 568px, horizontal mobile */
@media(min-width: 568px)
{
	form fieldset { display: flex; align-items: center; }
	form fieldset.buttons { align-items: unset; }
	form fieldset label:not(label.switch):first-child{ display: inline-block; width: 25%;  min-width: 25%; padding-right: 1em; text-align: right; }
	form fieldset label.switch:first-child { margin-left: 5em; margin-left: calc(25% - 40px - 1em); margin-right: 0 ; }
	form fieldset label.switch + label { margin-left: 1em }

	form fieldset select,
	form fieldset input[type=number] { width: initial; }

	form fieldset input[type=text],
	form fieldset input[type=email],
	form fieldset input[type=password],
	form fieldset input[type=url],
	form fieldset textarea { width: 65%; }

	form fieldset input[type=radio]:first-child,
	form fieldset input[type=checkbox]:first-child { margin-left: 25%; }

	form fieldset input[type=radio] { float: none; clear: none; margin-top: 0; }
	form fieldset input[type=radio] + label { width: auto; float: none; margin: 0 12px 0 5px; text-align: left; }
	form fieldset input[type=checkbox] + label { width: auto; margin-left: 5px; text-align: left; }

	form .fieldNote { margin: -3px 12px 0 25%; }
	form .fieldComplement { margin: -3px 12px 0 25%; }

	form fieldset div.editor { width: 65%; }

	form fieldset.inline label { width: auto; padding-right: 0.2em; }
	form fieldset.inline label.switch { width: 40px; margin-right: 20px; margin-left: 0; }

	.left25 { margin-left: 25%; margin-right: 10%}
}

/* (from) vertical tablet */
@media(min-width: 768px)
{
	
	/* Buttons color + black icons example: recover to using bg colors
	input[type=submit], input[type=button], input[type=reset], button {
		background-image: var(--image), linear-gradient(center top, var(--btn-bgcolor-from), var(--btn-bgcolor-to));
		background: var(--image), -moz-linear-gradient(center top, var(--btn-bgcolor-from), var(--btn-bgcolor-to));
		background: var(--image), -webkit-gradient(linear, 0 0, 0 100%, from(var(--btn-bgcolor-from)), to(var(--btn-bgcolor-to)));
	}
	input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, button:hover {
		color: var(--btn-hover-color);
		background-color: var(--btn-hover-bgcolor-to);
		background: var(--image), linear-gradient(center top, var(--btn-hover-bgcolor-from), var(--btn-hover-bgcolor-to));
		background: var(--image), -moz-linear-gradient(center top, var(--btn-hover-bgcolor-from), var(--btn-hover-bgcolor-to));
		background: var(--image), -webkit-gradient(linear, 0 0, 0 100%, from(var(--btn-hover-bgcolor-from)), to(var(--btn-hover-bgcolor-to)));
	}
	form fieldset.buttons > *, form fieldset.buttons > *:hover { margin: 0 0 0 1.2em; padding: 0.5em 1em 0.5em 3em; background-size: 1em auto, 100%; background-position: 1em center, top left; background-repeat: no-repeat, no-repeat; }	
	*/
		
	form fieldset.buttons > *, form fieldset.buttons > *:hover { background-image: var(--image); margin: 0 0 0 1.2em; padding: 0.5em 1em 0.5em 3em; background-size: 1em auto ; background-position: 1em center ; background-repeat: no-repeat; border-radius: 3px}
	form fieldset.buttons { flex-direction: row; }
	form fieldset.buttons > .secure { --image: url(../webfonts/solid/lock.svg); }
	form fieldset.buttons > .save { --image: url(../webfonts/solid/floppy-disk.svg); }
	form fieldset.buttons > .close { --image: url(../webfonts/solid/xmark.svg); }
	form fieldset.buttons > .reset { --image: url(../webfonts/solid/rotate-left.svg); }
	form fieldset.buttons > .delete { --image: url(../webfonts/solid/trash-can.svg); }
	form fieldset.buttons > .goBack { --image: url(../webfonts/solid/arrow-left.svg); }
	form fieldset.buttons > .goToLive { --image: url(../webfonts/solid/circle-play.svg); }
	form fieldset.buttons > .dataEdit { --image: url(../webfonts/solid/pen-to-square.svg); }
	form fieldset.buttons > .search { --image: url(../webfonts/solid/magnifying-glass.svg); }
	form fieldset.buttons > .confirm { --image: url(../webfonts/solid/check.svg); }
	form div.preview fieldset.buttons > * { padding-left: 10px; }
	form div.preview table.data td { text-align: center; }
}

/* Login */ 
body.login { display: flex; flex-direction: column; align-content: center; min-height: 100vh; margin:0 ; align-items: center; justify-content: center; padding: 5% 2% 0; background: var(--bg-color) url(https://storage.wowcast.co/assets/img/thumblist.jpg); background-size: cover;}
body.login:after { display: none }
body.login #loginTopbar { z-index: 9; background-color: var(--first-brand-color); border-bottom: 0.4em solid var(--medium-color); padding: 1em 1.5em 1em 0.8em; margin: 0 auto 0; width: 100%; min-width: 300px; max-width: 450px; box-shadow: var(--box-shadow); display: flex;  flex-direction: row;  flex-wrap: nowrap; justify-content: space-between; align-items: center; border-top-left-radius: 10px; border-top-right-radius: 10px; }

NObody:not(.login) #loginTopbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9; background-color: #906; border-bottom: 8px solid #CCC; padding: 15px 25px 15px 10px; }
#loginTopbar * { }
#loginTopbar .logo { max-width: 62%}
#loginTopbar .service { font-size: 1.1em;   display: flex;   align-items: center;   margin-top: 0.1em; }
#loginTopbar .service img { opacity: 0.35; padding: 0 10px; }
#loginTopbar .service span { color: var(--contrast-brand-color); }

body.login #loginForm { padding: 1.5em 2.5em 2.5em; box-shadow: var(--box-shadow); margin: 0 auto 15vh; display: block; width: 100%; min-width: 300px; max-width: 450px; background:var(--bg-main-color); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
body:not(.login) #loginForm { width: auto; max-width: 480px; margin: 128px auto 0 auto; padding: 16px; box-shadow: var(--box-shadow); }
#loginForm fieldset input[type=checkbox] + label { margin-left: 5px; }
#loginMessage { display: none; text-align: center; color: var(--error-color); margin-top: 8px; }
#loginForm .buttons { margin-top: 0 }

#topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9; background-color: var(--bg-main-color); padding: 8px; height: 48px; overflow: visible; color: var(--topbar-color); z-index: 10;}
#topbar:after { position: absolute; content: ""; width: 100%; height: 1px; background: var(--first-brand-color); background: linear-gradient(45deg, var(--first-brand-color) 0%, var(--second-brand-color) 100%); left: 0; bottom: 0; opacity: 0.15 }
#topbar * { line-height: 30px; vertical-align: middle; }
#topbar .logo { display: inline-block; width: 90px; overflow: hidden;  }
#topbar .logo img { height: 24px; max-width: initial; }
#topbar .service { display: inline-block; height: 30px; font-size: 18px; }
#topbar .service img { opacity: 0.35; padding: 0 5px; }
#topbar .service > span > span { display: none; }

#topbar .env, #topbar .account { display: none; }

#topbar .wowcast, 
NO #topbar .account { float: right; font-size: 0.8rem; padding: 0.3em; top: -0.3em; z-index: 1; text-align: right; overflow: visible; }
#topbar .wowcast .opened,
NO #topbar .account .opened { display: none; position: absolute; top: 2.8em; max-width: 100vw; background: var(--bg-main-color); padding: 0.5em; animation: fade_in_show 0.5s; box-shadow: 0px 0px 2px 2px #EEEEEE88; }

#topbar .wowcast .fa-icon:before { font-size: 1.5em; }
NO #topbar .wowcast .open { color: var(--topbar-color); }
NO #topbar .wowcast .open:before { content: "\f142 \f142 \f142"; letter-spacing: 0.1em; }
#topbar .wowcast .opened { flex-wrap: wrap; justify-content: stretch; justify-items: flex-start; top: 2.8em; width: 20em; right: 0; text-align: center; font-size: 1.1em; }
#topbar .wowcast:hover .opened { display: flex; }
#topbar .wowcast .opened .ecosystem { margin-top: 0.5em; padding-top: 0.5em; border-top: 1px solid var(--light-color); }
#topbar .wowcast .opened .services { display: flex; flex-wrap: wrap; justify-content: stretch; margin: 0.5em 0; }
#topbar .wowcast .opened .services a:before { display: block; }
#topbar .wowcast .opened .services a { flex: 1 1 33.333%; /* 3 por línea */ display: block; margin: 0.5em 0; color: var(--second-brand-color); }
#topbar .wowcast .opened .services a:hover,
#topbar .wowcast .opened .services a.active { color: var(--first-brand-color); text-decoration: none; }
#topbar .wowcast .opened .services a[disabled] { opacity: 0.5; filter: grayscale(1); pointer-events: none; }
#topbar .wowcast .opened span { display: block; width: 100%; }
NO #topbar a.wowstream:before { content: "\f144"; }
NO #topbar a.wowaccess:before { content: "\f09c"; }
NO #topbar a.wowqa:before { content: "\f51c"; }
NO #topbar a.wowmicrosites:before { content: "\f302"; }
NO #topbar a.wowcass:before { content: "\f2bb"; }

NO #topbar .account .opened { text-align: left; right: 0; }
NO #topbar .account:hover .opened { display: block; }
#topbar .initials { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding-right: 2.3em; margin-bottom: 0.5em; }
#topbar .initials:before { content: attr(data-initial); display: inline-block; color: var(--bg-main-color); background: var(--first-brand-color); border-radius: 1.2em; font-weight: bold; position: absolute; right: 0; top: 0; width: 2.3em; text-align: center; overflow: hidden; }
#topbar .opened .initials { padding-right: 0; line-height: 0; }
#topbar .opened .initials:before { line-height: 2.3em; font-size: 1.5em; font-weight: normal; position: relative; }
#topbar #logout { display: block; text-decoration: none; padding: 0 8px; background-color: var(--light-color); width: 100%; }
#topbar #uname, #topbar #aname  { padding: 0 8px; white-space: nowrap; }

/* (to) horizontal mobile */
@media(max-width: 567px){
	#topbar .logo { display: inline-block; width: 67px; overflow: hidden; }
	#topbar .logo img { height: 18px; max-width: initial; }
	#topbar .service { display: inline-block; height: 30px; font-size: 16px; }	
	NO #topbar .wowcast .opened { right: -5em !important; left: auto; }
	#topbar .initials { width: 2em; overflow: hidden; text-overflow: ellipsis; box-sizing: content-box; }
}

/* (from) horizontal mobile */
@media(min-width: 568px) {
	#topbar .logo { width: auto; animation: fade_in_show 0.5s; }
	#topbar .service > span > span { display: inline; vertical-align: baseline; }
    NO #topbar #aname { display: none; }
}


.topnav { flex-wrap: nowrap; background: var(--light-color); font-size: 0.8rem; min-height: 3.1em; padding: 0 1em; height: 40px;overflow: hidden;position: fixed;width: 100%;top: 48px;z-index: 3;}

nav { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; }

nav > #ham,
nav > #hammobile { width: 40px; height: 40px; line-height: 40px; text-indent: 60px; overflow: hidden; cursor: pointer; flex-shrink: 0; position: relative; display: none; }
nav > #hammobile { display: block; }

nav > #ham:before,
nav > #hammobile:before { content: "\f0c9"; position: absolute; width: 100%; height: 100%; text-align: center; display: block; left: -54px; right: 0; font-size: 16px; }

nav > #breadcrumb { flex-grow: 1; padding: 0.6em 0; white-space: nowrap; display: inline-flex;align-items: center; gap: 0.2em;justify-content: flex-start; max-width: calc(100vw - 6.5em);}
nav > #breadcrumb .bcTitle { display: none; opacity: 0.8; font-weight: bold; margin-right: 0.5em; }
nav > #breadcrumb .bcSeparator { font-size: 0.4rem; vertical-align: middle; padding: 0 0.2em; }
nav > #breadcrumb a.highlight {font-weight: bold; font-size: 1.15em; }

/* (to) vertical horizontal mobile */
@media(max-width: 567px){
	nav > #breadcrumb a { overflow: hidden; white-space: nowrap; display: inline-block; vertical-align: -0.3em; min-width: 1.2em; }
	nav > #breadcrumb:has(a:nth-last-child(n+4)) a:not(.highlight) { text-overflow: ".";}
	nav > #breadcrumb:has(a:nth-last-child(n+4)) a:last-child:not(.highlight) { min-width: 20%;  text-overflow: "."; word-break:break-all;}		
	nav > #breadcrumb .highlight, nav > #breadcrumb .eventname  { text-overflow: ellipsis !important; flex-shrink: 1}
	nav > #breadcrumb a:hover, nav > #breadcrumb a.highlight:last-child { min-width: fit-content !important }
}

/* (from) vertical tablet */
@media(min-width: 768px)
{
	nav > #ham { display: block; }
	nav > #hammobile { display: none; }
	nav > #breadcrumb .bcTitle { display: inline; }
	nav > #breadcrumb .bcSeparator { display: inline-block; }
}

/* Top filters on lists page */
.top-filters { margin: 0.5em 0; padding: 1em; background: var(--light-color); margin-bottom: 2em; }
.top-filters form { padding: 0}
.top-filters a[data-toggle=".list-filters"] { display: block; padding: 0.5em 0.8em 0.5em 1em; font-size: 0.85em; text-align: center; }
.top-filters:has( a[data-toggle=".list-filters"] ) form.list-filters { display: flex; display: none; animation: fade_in_show; background: transparent; flex-direction: column  }
.top-filters form.list-filters.active { display: flex !important;  }

@media(max-width: 567px) {
	.top-filters:has( a[data-toggle=".list-filters"] ) form fieldset input[type="text"][name="filter-search"] { width: 90%; width: calc(100% - 2.8em - 2px); }
}
@media(min-width: 1024px) {
	.top-filters a[data-toggle=".list-filters"] { display: none; }
	.top-filters:has( a[data-toggle=".list-filters"] ) form.list-filters { flex-direction: row }
	.top-filters:has( a[data-toggle=".list-filters"] ) form.list-filters fieldset label { width: auto !important; padding-right: 0.5em !important; }
	.top-filters:has( a[data-toggle=".list-filters"] ) form.list-filters { display: flex; padding: 0; justify-content: center; flex-wrap: wrap; }
	.top-filters:has( a[data-toggle=".list-filters"] ) form.list-filters fieldset { display: inline-flex; padding: 0.2em 0.5em; }
}

/* Boxes and messages */ 
.box { display: block; padding: 2%; box-shadow: var(--box-shadow); border: 1px solid var(--light-color); }
.mini.box { text-align: center; }

.info.box,
.msg.box         { background: var(--info-bg-color); color: var(--info-color); box-shadow: none; border: 1px solid rgba(0,0,0,0.02); padding-left: calc(2% + 2.2em); line-height: 1.2em; }
.msg.box.success { background: var(--success-bg-color); color: var(--success-color); }
.msg.box.alert   { background: var(--alert-bg-color);   color: var(--alert-color);   }
.msg.box.error   { background: var(--error-bg-color);   color: var(--error-color);   }

.msg.box:before         { font-size: 1.5em; margin-left: -1.8em; min-width: 1.8em; position: absolute; }
.msg.box.info:before    { content: "\f05a"; }
.msg.box.success:before { content: "\f058"; }
.msg.box.alert:before   { content: "\f071"; }
.msg.box.error:before   { content: "\f057"; }

.msg.box span    { display: inherit; }
.msg.box code { color: inherit; background: transparent; border: none; }

.msg.box a.closer { position: absolute; top: 0; right: 0; padding: 4px 8px; background-color: rgba(128, 128, 128, 0.15); }
.msg.box span.timer { position: absolute; display: block; bottom: 0; right: 0; width: 100%; height: 2px; background-color: rgba(128, 128, 128, 0.15); transition: none; }
.msg.box.timeout span.timer { width: 0%; transition-behavior: normal; transition-delay: 0; transition-duration: inherit; transition-property: width; transition-timing-function: linear; }

/* Event resume */ 
.row.event-resume { flex-direction: row; flex-wrap: wrap; }
.event-resume { font-size: 80%; max-width: 1279px; margin: 0 auto; padding: 0 2%}
.event-resume .col { flex: 1; display: flex; align-items: baseline; justify-content: center; background: var(--light-color); box-shadow: none; }
.event-resume .big { display: block; font-size: 3em; white-space: nowrap; }
.event-resume .col > * { display: inline-block; }
.event-resume .col .fa-icon { font-size: 3em; color: var(--first-brand-color); opacity: 0.7; }
.event-resume .col p { text-align: left; font-size: inherit}
.event-resume .col .goto:after { content: "\f105";  margin-left: 0;}
.event-resume .col:has(.big.disabled) { opacity: 0.5; }
.event-resume .col:has(.big.hidden) { display: none;}
.event-resume .col:has(.big.disabled) a { color: var(--text-color);  }
.event-resume a[disabled]{ opacity: 1; color: inherit } 
.event-resume a[disabled]:after,.event-resume a[disabled]:before { display: none !important;  } 


/* < 568px, horizontal mobile */
@media(max-width: 567px) {
	.event-resume { margin-bottom: 3em;}
}

/* < 568px, horizontal mobile */
@media(max-width: 567px) {
	.event-resume { margin-bottom: 3em;}
}


/* llem memories =) */
#wowCarpet { z-index: 20; }

.carpet { position: fixed; width: 100%; top:0; bottom:0; z-index:10; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; overflow: auto; display: none; }
.carpet-content { width: 1000px; max-width: 90%; margin: 5% 2%; padding: 5vh 5vw; background: var(--bg-main-color); }
.carpet.active { display: flex; }
.carpet.larger.active { display: block; }
.carpet.larger .carpet-content { margin: 5% auto; }
.carpet-content a { color: var(--second-brand-color) }
.carpet-content a:hover { color: var(--first-brand-color) }
a.carpet-close { position: absolute; right: 10px; top: 10px; color: var(--text-color); opacity: 0.4; text-decoration: none !important; font-size: 1.6em; }
a.carpet-close:hover { color: var(--text-color); }

.carpet .carpet-loader { width: 90%; max-width: 300px; height: 90%; min-height: 150px; max-height: 300px; margin: 0 auto; background: url(../img/check.gif) no-repeat center center; background-size: 50%; background-color: var(--bg-main-color); }

.carpet-content.narrow { max-width: 650px }
.carpet-content.narrow p:first-line { font-weight: bold; font-size: 1.4em; line-height: 2em; }

.asyncContent { width: 600px !important; max-width: 90%; padding: 5vh 5vw !important; background: var(--bg-main-color) !important; box-shadow: var(--box-shadow) !important; color: var(--text-color) !important; font-size: 1.1em }
.asyncButtonsFieldset { justify-content: flex-start !important; flex-direction: row-reverse !important }
.asyncButtonsFieldset .asyncButton { color: #000; background-color: transparent; border: var(--btn-svg-border) !important; filter: var(--btn-svg-color); padding: 0.5em 1em; border-radius: 3px; transition: 0.3s;  margin-left: 1em !important; opacity: 1 !important; }
.asyncButtonsFieldset .asyncButton:hover,
.asyncButtonsFieldset .asyncConfirm { filter: var(--btn-svg-hover-color); }
.asyncButtonsFieldset .asyncConfirm:hover { opacity: 0.8 !important }

/* (from) vertical tablet */
@media(min-width: 768px)
{
	.asyncButtonsFieldset .asyncButton, 
	.asyncButtonsFieldset .asyncButton:hover { background-image: var(--image); margin: 0 0 0 1.2em; padding: 0.5em 1em 0.5em 2.6em; background-size: 1em auto ; background-position: 1em center ; background-repeat: no-repeat; }
	.asyncButtonsFieldset .asyncCancel  { --image: url(../webfonts/solid/arrow-left.svg); }
	.asyncButtonsFieldset .asyncConfirm { --image: url(../webfonts/solid/check.svg); }
}

/* <main> + <div class="navigation"> + <section> */
main { display: flex; flex-direction: column; }
main > section { padding: 3% 2% 6%; background: var(--bg-main-color); z-index: 0 }
main .navigation { font-size: 0.95em; line-height: 1.6; background-color: var(--second-brand-color); box-shadow: -5px -5px 5px rgba(0,0,0,0.2) inset; color: var(--light-color);}
main .navigation .wrap { margin: 0; padding: 0; border: 0; width: 100%; background-color: var(--second-brand-color); box-shadow: -5px -5px 5px rgba(0,0,0,0.2) inset; z-index:  2 !important;  }
main .navigation.mobile { padding-top: 0; }
main .navigation b { display: block; padding: 3% 5%; background: rgba(255,255,255,0.1); }
main .navigation b a { color: var(--light-color); padding: 0; display: block; text-decoration: none !important; }
main .navigation ol { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
main .navigation ol > li { margin-top: 1px; width: 100%; display: flex; align-items: center; justify-content: center }
main .navigation ol > li > a { padding: 2% 5%; flex-grow: 1; color: var(--contrast-brand-color); white-space: nowrap; }
main .navigation ol > li > a:before { font-size: 1.05em; min-width: 1.8em }
main .navigation ol > li > a > span { font-size: 0.75em; font-weight: normal; }
main .navigation ol > li:hover > a { text-decoration: none; opacity: 0.8; }
main .navigation ol > li.active > a { font-weight: bold; background: var(--first-brand-color); padding: 3% 5%; }
main .navigation ol > li:has(+ .submenu) { cursor: pointer }
main .navigation .submenu ol, main .navigation .submenu ol, main .navigation .submenu ol:first-child { margin: 0; padding: 0; width: 100%; font-size: 0.85em}
main .navigation .submenu ol > li > a {  padding-left: 4em; padding-left: calc(5% + 2em) }

main .navigation ol > li > a small:not(:empty) { display: inline-block; margin-right: 0.25em; vertical-align: 0.12em;}
main .navigation ol > li > a small:not(:empty):before { content: "("}
main .navigation ol > li > a small:not(:empty):after{ content: ")"}

main .navigation.compact:not(.mobile) ol > li > a small:not(:empty) {   text-indent: 0;   display: block;   position: absolute;   right: 0.05rem;   font-size: 8px;   top: 0.7rem;   width: 0.6rem;   text-align: left;   overflow:  hidden;    white-space: nowrap;text-overflow: "+"; opacity: 0.7} 
main .navigation.compact:not(.mobile) li.submenu > ol > li > a small:not(:empty){   right: -0.15rem; } 
main .navigation.compact:not(.mobile) ol > li > a small:not(:empty)::before, main .navigation.compact:not(.mobile) ol > li > a small:not(:empty)::after {   display: none; }

main .sub.navigation { all:revert;  padding: 0.5em; }
main .sub.navigation ol { display: flex; flex-direction: row; flex-wrap: wrap; list-style: none; margin: 0 0 1.2em 0; padding: 0;  }
main .sub.navigation ol > li { display: block; width:auto; white-space: nowrap; padding: 0; border: 1px solid  var(--light-color); margin: 0.5em 0.5em; border-radius:0.2em; background: var(--light-color); cursor: pointer }
main .sub.navigation ol > li a { font-weight: bold; color: var(--second-brand-color); width: auto; display: inline-flex; padding: 0.3em 1em !important; margin: 0 !important; align-items: center}
main .sub.navigation ol > li.active {  border-color: color-mix(in srgb, var(--first-brand-color) 40%, transparent); background: transparent; outline: 2px solid color-mix(in srgb, var(--first-brand-color) 30%, transparent);}
main .sub.navigation ol > li.active a { color: var(--first-brand-color); background: transparent  }
main .sub.navigation ol > li a:hover { color: var(--first-brand-color) }
main .sub.navigation ol > li a.checked::before { color: var(--first-brand-color); opacity: 0.7 }
main .sub.navigation > div { padding: 0.5em }

main .sub.navigation .sub-tab { background-color: var(--light-color); border: 1px solid var(--medium-color); display: none; }


/* <div class="navigation"> (to) vertical tablet */
@media(max-width: 767px) {
	main > section { padding: 6% }
	NO.main:has(.navigation.mobile) { top: -42px; }
	main .navigation:not(.mobile) { padding-top:0; display: flex; flex-direction: row; align-items: center; min-height: 3em; justify-content: space-between; text-align: right; max-width:100vw; overflow-x: auto; scrollbar-width: thin; z-index: 2 !important; top: 88px !important; position: fixed; width: 100%; }
	main .navigation:not(.mobile) .wrap { width: 100vw !important; }
	main .navigation:not(.mobile) b { display: none; }
	main .navigation:not(.mobile) ol { flex-direction: row; justify-content: space-between; min-height: 3em; width: 100%; }
	main .navigation:not(.mobile) ol > li { margin-top: 0; }
	main .navigation:not(.mobile) b a,
	main .navigation:not(.mobile) ol > li > a { overflow: hidden; text-indent: 1000px; white-space: nowrap; max-width: 3.5em; position: relative; padding: 0.2em 5% }
	main .navigation:not(.mobile) ol > li.active > a { background: none; text-shadow: 3px 3px 3px var(--first-brand-color); }
	main .navigation:not(.mobile) b a:before,
	main .navigation:not(.mobile) ol > li > a:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: 0; font-size: 1.2em; }
	main .navigation:not(.mobile) ol > li:has(+ .submenu) { display: none; }
	main .navigation:not(.mobile) ol > li.submenu { display: flex; padding: 0.2em; background: rgba(255,255,255,0.1); justify-content: space-evenly; flex-direction: row; }
	
	main .sub.navigation:not(.mobile) { top: inherit !important; position: relative; display: block; text-align: left }
	main .sub.navigation:not(.mobile) ol { justify-content: flex-start; }
	main .sub.navigation:not(.mobile) ol > li { margin-top: 0.5em }
	main .sub.navigation:not(.mobile) ol > li a	{ overflow: inherit; text-indent: initial; max-width: initial; }
	main .sub.navigation:not(.mobile) ol > li > a::before { display: inline-block; position: relative; top: inherit; left: inherit; width: auto; height: auto; }
	main .sub.navigation:not(.mobile) ol > li.active > a { background: inherit; text-shadow: none; }
}

/* <div class="navigation"> (from) vertical tablet */
@media(min-width: 768px) {
	main { flex-direction: row; min-height: 100vh; min-height: calc(100vh - 89px); }
	main .navigation { flex: 1 1 0; display: block; align-items: stretch; max-width: 16em; min-width: 14em; }
	main .navigation .wrap { height: 100%; z-index: 8; }
	main > section { flex: 5 1 0; max-width: calc(100vw - 14em); overflow-x: visible }
	main > .navigation[style*="none"] + section { max-width: 100vw; }
	main .navigation ol:first-child,
	main .navigation ol + b,
	main .navigation b + ol { margin-top: 1em; }
	main .navigation b,	
	main .navigation b a,
	main .navigation ol > li > a { text-overflow: ellipsis; overflow: hidden; }
	
	main .navigation.compact, 
	main .navigation.compact .wrap { max-width: 3.5em; min-width: 3.5em; }
	main .navigation.compact b a,
	main .navigation.compact ol > li > a { overflow: hidden; text-indent: 1000px; white-space: nowrap; max-width: 3.5em; position: relative; padding: 0.4em 5%; text-overflow: clip; }	
	main .navigation.compact b a:before,
	main .navigation.compact ol > li > a:before { display: block; position: absolute; left: 0; width: 100%; height: 100%; text-indent: 0; }	
	main .navigation.compact ol > li.submenu { background: rgba(255,255,255,0.1); }	
	main .navigation.compact + section { max-width: calc(100vw - 3.5em); }
}

/* <navclass="tabs"> */
nav.tabs { margin-top: 1.5em; }
nav.tabs:first-child { margin-top: 0; }
nav.tabs a { display: inline-block; padding: 0.5em 0.8em 0.5em 1em; font-size: 0.85em; white-space: nowrap; font-weight: bold; }
nav.tabs a span { vertical-align: middle; }
nav.tabs a:hover, nav.tabs a.active { color: var(--first-brand-color); }

nav.tabs.scroll a { border-left: 1px solid var(--medium-color); }
nav.tabs.scroll a:first-child { border-left: none; padding-left: 0; }

nav.tabs.opentab a { padding: 0.8em 1em 0.7em 1em; background: var(--light-color); border: 1px solid var(--light-color); border-bottom-color: var(--first-brand-color); border-right-color: var(--medium-color); outline: none; }
nav.tabs.opentab a.active { border-color: var(--first-brand-color); border-bottom-color: var(--bg-main-color); background: var(--bg-main-color) }

/*(to) horizontal tablet / PC */
@media(max-width: 1023px) {
	nav.tabs.scroll { display: none; }
	nav.tabs.opentab a { margin: 0.5em; border-color: var(--medium-color) !important; }
	nav.tabs.opentab a.active { margin: 0.5em; border-color: var(--first-brand-color) !important; }
}

.tabs-info > div { display: none; transition: 0.6s; padding: 2% 0 4%; }
.tabs-info > div.active { display: block; animation: fade_in_show 0.5s; }
.tabs-info > div.active h3:first-child { display: none; }
.tabs-info > div.active + div.active h3:first-child { display: block; }
.tabs-info > div.active + div.active { border-top: 2px solid var(--light-color); }

.top-actions { display: flex; justify-content: space-between; align-items: center; padding: 1% 0; vertical-align: middle; }
.top-actions form { padding: 0; margin: 0; }
.massive_select { margin-right: 0.5em; white-space: nowrap }
.massive_select .fa-icon:before { font-size: 1.2em; }


/*  Print preview */
.togglePrint.active { background: var(--light-color); border-radius: 0.2em; color: var(--first-brand-color); }

.print-preview #topbar .wowcast,
NO .print-preview #topbar .env,
NO .print-preview #topbar .account,
.print-preview .topnav,
.print-preview main .navigation { display: none; }

.print-preview .no-print:not(.print-settings) { display: none; }
.print-preview .print-only { display: block; }
.print-preview .devices table.data.print-only { display: table; }
.print-preview .devices table.data.print-only tr:nth-child(n + 6) { display: none; }
.print-preview .print-only.flex { display: flex; }

/* <div class="pagination"> */
.pagination { margin: 12px; display: flex; align-items: center; justify-content: flex-end; }
.pagination > * { padding: 0.1em 0.5em; margin: 0.1em; }
.pagination > a { color: var(--text-color); text-decoration: none; }
.pagination > a.pag-active { background-color: var(--first-brand-color); color: var(--contrast-brand-color); font-weight: bold; }
.pagination > .pag-select { padding: 0.2em; }
.pagination > .pag-item { display: none; }

.pag-items { white-space: nowrap; }

/* <div class="pagination"> (from) vertical tablet */
@media(min-width: 768px) {
	.pagination { margin: 1em 0; }
	.pagination > .pag-select { display: none; }
	.pagination > .pag-item { display: inline-block; }
}

a.orderBy.asc:before { content: "\f077"; }
a.orderBy.desc:before { content: "\f078"; }

/* <table> */
table a { opacity: 0.65; }
table span.fa-icon:before { font-size: 1.3em; vertical-align: -0.13em; }

div.icons { font-size: 1.4em; display: flex; align-items: baseline; }
div.icons > * { display: inline-flex; align-items: center; overflow: hidden; height: 1.4em; width: 1.3em; margin: 0 0.1em; line-height: 1; text-align: center; transition: 0.3s; white-space: nowrap;}
table.fancy div.icons { justify-content: space-between; }

a.data-option  { float: right; z-index: 2; padding: 0.2em; margin: 0.3em; display: inline-flex; align-items: center;}
a.data-option:before { font-size: 1.4em; }
a.data-add:before    { content: "\f0fe"; }
a.data-import:before { content: "\f0ee"; margin-right: 0.2em; }
a.data-export:before { content: "\f0ed"; margin-right: 0.2em; }

.data-title { padding: 0.5em 0.2em; font-weight: bold; }
.data-option + .data-title { display: inline-block; vertical-align: baseline; top: 0.1em; margin-right: 0.5em; line-height: 1.6em}
.data-title a.hover-btn { margin: -0.6em 0.2em -0.6em 0; }

.data-title .small,
.data-title small,
.data-title span,
.data-title a:not(.hover-btn) {
    font-size: 0.5em;
    font-size: calc(12px + 0.05rem);
    font-weight: normal;
}

.table-container { clear: both; margin: 1.2em 0 }

/* (to) vertical tablet */
@media screen and (max-width: 767px) {
	table.data div.icons a { margin: 0.5rem 0.3rem; }
}

/* (from) horizontal tablet */
@media screen and (min-width: 768px) {
	table.data div.icons { justify-content: center;  }
}

/* (to) horizontal tablet / PC */
@media screen and (max-width: 1023px)
{
	.data-title { clear: both; }
}

/* <table class="data"> */
table.data { border-spacing: 0; font-size: 0.85rem; margin-bottom: 2vw; min-width: 100%; }
table.data > thead > tr { background-color: var(--th-bg-color);}
table.data > thead > tr > th { padding: 0.5rem; border-bottom: 2px solid var(--table-border-color); }
table.data > thead > tr > th.primary { text-decoration: underline; }
table.data > tbody { border-top: 1px solid var(--table-border-color); }
table.data > tbody > tr { border-bottom: 1px solid var(--table-border-color); }
table.data > tbody > tr:nth-child(odd) { background-color: var(--td-bg-color-odd); }
table.data > tbody > tr:nth-child(even) { background-color: var(--td-bg-color-even); }
table.data > tbody > tr:hover { background-color: var(--td-bg-color-hover); }
table.data > tbody > tr.error { background-color: var(--td-bg-color-error); }
table.data > tbody > tr.error:hover { background-color: var(--td-bg-color-error-hover); }
table.data > tbody > tr > td { padding: 0.5rem; border-bottom: 2px solid var(--table-border-color); }
table.data > tbody > tr > td > input[type=checkbox] { vertical-align: middle; }
table.data > tfoot > tr { background-color: var(--th-bg-color); }
table.data > tfoot > tr > td { padding: 0.5rem; }
table.data img { max-width: 100px; }

/* <table class="data"> (from) horizontal tablet / PC */
@media(min-width: 1024px) {
	table.data > thead > tr > th,
	table.data > tbody > tr > td { padding: 1vw; }
}

/* <table class="fancy"> */
table.fancy { margin-bottom: 5vw; width: 100%; font-size: 0.9rem;}
table.fancy thead { display: none; }
table.fancy tbody { display: flex; gap: 2vw; flex-wrap: wrap; justify-content: stretch; }
table.fancy tbody tr { display: flex; flex-direction: column; box-shadow: var(--box-shadow); border: 1px solid var(--light-color); width: 48.5%; }
table.fancy tbody td { display: block; padding: 0.3rem 0.8rem; }

/* Home <table class="fancy modtable"> */
table.fancy.modtable tr { padding-bottom: 3rem; }
table.fancy.modtable td {text-align: left !important;}
table.fancy.modtable td[data-label="Actions"], 
table.fancy.modtable td[data-column="actions"] { position: absolute; bottom: 0.3rem; width: 100%; }
table.fancy.modtable td[data-label="Actions"] div {width: 100%;}
table.fancy.modtable td[data-label="ID"], 
table.fancy.modtable td[data-column="ID"], 
table.fancy.modtable td[data-column="id"] { padding: 0.5em 0.2em; min-width: 2em; text-align:center !important; z-index: 1; position: absolute; top: 0; right: 8%; width: auto; text-align: center; background: var(--dark-color); color: var(--contrast-brand-color); font-size: 0.9em; }
table.fancy.modtable td[data-label="Key"], 
table.fancy.modtable td[data-column="key"] {display: none !important}
table.fancy.modtable td[data-label="Name"], 
table.fancy.modtable td[data-column="name"] {min-height: 8em; display: flex; align-items: flex-end; padding-bottom: 1em; margin-bottom: 0.6em; font-size: 1.1em;}
table.modtable 		 td[data-column="name"] {font-weight:bold}
table.fancy.modtable td[data-label="Name"]:before, 
table.fancy.modtable td[data-column="name"]:before {content:""; position: absolute; top:0; left: 0; width: 100%; height: 100%; opacity: 0.75; background: var(--light-color) url(../img/thumblist.jpg) center top no-repeat; background-size: cover}
table.modtable td[data-label="Name"] a, 
table.modtable td[data-column="name"] a { display: flex; align-items: center; }
table td a[data-initials]::before { content: attr(data-initials); display: inline-block; aspect-ratio: 1 / 1; background: var(--first-brand-color); color: var(--contrast-brand-color); border-radius: 100%; padding: 0.2em 0.4em; margin-right: 0.5em; text-transform: uppercase; min-width: 2.3em; line-height: 1.9em; vertical-align: middle; overflow: hidden; text-align: center; }

#topbar:has(a.wowcast-Q.active) ~ main table.fancy.modtable td[data-column="name"]::before {
  background-color: #9f7a7a;
  background-blend-mode: overlay;
}
#topbar:has(a.wowcast-A.active) ~ main table.fancy.modtable td[data-column="name"]::before {
  background-color: #787;
  background-blend-mode: overlay;
}

/* (to) horizontal mobile */
@media(max-width: 450px) {
	table.fancy tbody { justify-content: center }
	table.fancy tr { min-width: 220px }
/*	table.fancy.modtable td[data-label="Name"] a:before,
	table.fancy.modtable td[data-column="name"] a:before { display: none }*/
}

@media(min-width: 896px) {
	table.fancy tbody tr { width: 31%; min-width: 31%; }	
}

@media(min-width: 1152px) {
	table.fancy tbody tr { width: 23%; min-width: 23%; }	

}
@media(min-width: 1440px) {
	table.fancy tbody tr { width: 17%; min-width: 17%; }
}

@media(min-width: 1980px) {
	table.fancy tbody tr { width: 250px; min-width: 250px; }
}

/* media print */
@media print {
	body { margin: 0; background: #fff; }
	body:after { display: none; }
	.to-top { display: none !important }
	#topbar { position: relative; display: none; }
	#topbar .wowcast,
	NO #topbar .env,
	NO #topbar .account,
	.topnav,
	main .navigation { display: none; }
	.no-print { display: none; }
	.print-only { display: block; }
	.print-preview-only { display: none }
	.print-only.flex { display: flex; }
	.break { break-after: page; }
}

@media  print and (orientation: landscape) {
	.break-landscape { break-after: page; }
}

@media  print and (orientation: portrait) {
	.break-portrait { break-after: page; }
}
/* STYLISH SKIN - END */