@charset "utf-8";
/* CSS Document */
/* ###################### SOFT RESET */
* {
	margin: 0px;
	padding: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0px;
}
*:focus {
	outline: 0;
}
/* ###################### FONT FACE */
/*@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: normal;
	src: local('Open Sans'),
		 local('OpenSans'),
		 url('../type/OpenSans.woff') format('woff'),
		 url('../type/OpenSans.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: bold;
	src: local('Open Sans Bold'),
		 local('OpenSans-Bold'),
		 url('../type/OpenSans-Bold.woff') format('woff'),
		 url('../type/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: normal;
	src: local('Open Sans Italic'),
		 local('OpenSans-Italic'),
		 url('../type/OpenSans-Italic.woff') format('woff'),
		 url('../type/OpenSans-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: bold;
	src: local('Open Sans Bold Italic'),
		 local('OpenSans-BoldItalic'),
		 url('../type/OpenSans-BoldItalic.woff') format('woff'),
		 url('../type/OpenSans-BoldItalic.ttf') format('truetype');
}*/
@font-face {
	font-family: 'Font Awesome';
	font-style: normal;
	font-weight: normal;
	src: url('../type/fa-solid-900.woff') format('woff'),
		 url('../type/fa-solid-900.ttf') format('truetype');
}
/*@font-face {
	font-family: 'Font Awesome Brands';
	font-style: normal;
	font-weight: normal;
	src: url('../type/fa-brands-400.woff') format('woff'),
		 url('../type/fa-brands-400.ttf') format('truetype');
}*/
@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: normal;
	src: local('Exo Regular'),
		 local('ExoRegular'),
		 url('../type/Exo-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Exo';
	font-style: italic;
	font-weight: normal;
	src: local('Exo Italic'),
		 local('ExoItalic'),
		 url('../type/Exo-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: bold;
	src: local('Exo Bold'),
		 local('ExoBold'),
		 url('../type/Exo-Bold.ttf') format('truetype');
}
/* ###################### VARIABLES */
:root {
	/* LAYOUT COLORS */
	--main: 0,0%,100%;
	--alt: 0,0%,0%;
	--link: 180,100%,65%;
	--highlight: 315,75%,35%;
	/* NEUTRAL COLORS */
	--black: 0,0%,0%;
	--dark: 0,0%,10%;
	--gray: 0,0%,60%;
	--light: 0,0%,90%;
	--white: 0,0%,100%;
	/* COLOR PALETTE */
	--red: 5,100%,27%;
	--orange: 30,100%,60%;
	--yellow: 45,100%,65%;
	--lime: 110,100%,75%;
	--green: 105,35%,35%;
	--teal: 180,100%,65%;
	--cyan: 190,100%,38%;
	--blue: 230,75%,30%;
	--purple: 280,80%,20%;
	--magenta: 340,62%,45%;
	/* CORNERS */
	--corner: 0.3rem;
	--inner-corner: 0.3rem;
	--outer-corner: 0.35rem;
	/* OPACITY */
	--transparent: 0;
	--semitransparent: 0.4;
	--translucent: 0.7;
	--opaque: 1;
	/* FONTS AND SPACING*/
	--main-font: 'Exo', 'Open Sans', Arial, Helvetica, sans-serif;
	--title-font: 'Exo', 'Open Sans', Arial, Helvetica, sans-serif;
	--code-font: 'Exo', 'Open Sans', Arial, Helvetica, sans-serif;
	--icon-font: 'Font Awesome';
	--title-spacing: 0.05rem;
	--double-spacing: 0.1rem;
	--main-font-size: 0.8rem;
	--main-line-height: 1.2rem;
}
/* ###################### BASIC TAGS*/
html, body {
	margin: 0px;
	padding: 0px;
}
iframe, 
video {
	margin: 0px;
	padding: 0px;
	border: none;
}
html {
	min-height: 100vh;
	font-size: calc( 16px + (24 - 16) * (100vw - 440px) / (1900 - 440) );
}
body {
	background: hsla(var(--magenta),1);
	color: hsla(var(--gray),1);
	font-family: var(--main-font);
	font-size: var(--main-font-size);
	line-height: var(--main-line-height);
}
a {
	color: hsla(var(--link),var(--translucent));
	text-decoration: none;
	transition: color 0.3s;
}
a:hover {
	color: hsla(var(--link),var(--opaque));
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--title-font);
	font-weight: normal;
	display: block;
}
h1 {
	--h-font-size: 2.8rem;
	--h-line-height: 3rem;
	font-size: var(--h-font-size);
	line-height: var(--h-line-height);
	font-weight: bold;
}
h2 {
	--h-font-size: 2rem;
	--h-line-height: 2.2rem;
	font-size: var(--h-font-size);
	line-height: var(--h-line-height);
}
h3 {
	--h-font-size: 1.8rem;
	--h-line-height: 2rem;
	font-size: var(--h-font-size);
	line-height: var(--h-line-height);
}
h4 {
	--h-font-size: 1.6rem;
	--h-line-height: 1.8rem;
	font-size: var(--h-font-size);
	line-height: var(--h-line-height);
}
h5 {
	--h-font-size: 1.4rem;
	--h-line-height: 1.6rem;
	font-size: var(--h-font-size);
	line-height: var(--h-line-height);
}
h6 {
	--h-font-size: 1.2rem;
	--h-line-height: 1.4rem;
	font-size: var(--h-font-size);
	line-height: var(--h-line-height);
}
.terms {
	font-size: 0.8rem;
	line-height: 1.4rem;
}
.title {
	color: hsla(var(--white),var(--opaque));
	margin-bottom: 1rem;
}
.center {
	margin: 0px auto;
	text-align: center;
}
/* BACKGROUND COLOR */
.bg-primary {
	--fill-color: var(--blue);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
}
.bg-secondary {
	--fill-color: var(--purple);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
}
.bg-success {
	--fill-color: var(--green);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
}
.bg-danger {
	--fill-color: var(--red);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
}
.bg-warning {
	--fill-color: var(--orange);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
}
.bg-info {
	--fill-color: var(--cyan);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
}
.bg-light {
	--fill-color: var(--light);
	--text-color: var(--alt);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
}
.bg-dark {
	--fill-color: var(--dark);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
}
.bg-highlight {
	--fill-color: var(--teal);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
}
.button-default {
	--fill-color: var(--cyan);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
	margin: 1rem;
}
.busy {
	--fill-color: var(--magenta);
	--text-color: var(--main);
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
	pointer-events: none;
	opacity: 0.5;
}
/* STATUS */
.active {
	
}
:disabled {
	opacity: var(--semitransparent);
	border-color: hsla(var(--main),var(--semitransparent));
	pointer-events: none;
}
/* ###################### FRAME */
.frame-border {
	position: relative;
	box-sizing: border-box;
	background-clip: border-box;
	border: 1px solid transparent;
	border-color: hsla(var(--main),var(--semitransparent));
	border-radius: var(--inner-corner);
}
.frame-shadow {
	transition: box-shadow 0.3s, transform 0.3s, color 0.3s, border-color 0.3s, background 0.3s;
	box-shadow: 0px 0px 6px 0px hsla(var(--black),var(--transparent));
}
.frame-shadow:hover {
	box-shadow: 0px 3px 6px 0px hsla(var(--black),var(--semitransparent));
	transform: translate3d(0px, -1px, 10px);
	border-color: hsla(var(--main),var(--translucent));
}
.frame-outline {
	position: relative;
	box-sizing: border-box;
	background-clip: border-box;
	z-index: 3;
	border-radius: var(--inner-corner);
	box-shadow: inset 0 0 0 1px hsla(var(--main),var(--semitransparent));
	transition: background 0.3s, box-shadow 0.3s, color 0.3s, transform 0.3s;
}
.frame-outline:hover {
	box-shadow: inset 0 0 0 1px hsla(var(--main),var(--translucent));
	transform: translate3d(0px, -1px, 10px);
}
.frame-outline::after {
	border: none;
    content: '';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 0 2px hsla(var(--main),var(--transparent));
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	padding: 0.5rem;
	transform: translate(-50%, -50%);
	transform-origin: center;
    transition: box-shadow 0.3s, padding 0.3s;
	border-radius: var(--outer-corner);
}
.frame-outline:hover::after {
	border: none;
    box-shadow: 0 0 0 2px hsla(var(--main),var(--translucent));
    z-index: 4;
	padding: 0.1rem;
}
/* ###################### ALERT */
.alert {
	position: relative;
	box-sizing: border-box;
	margin-bottom: 1rem;
	border-radius: var(--inner-corner);
	pointer-events: all;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.alert-wrapper {
	box-sizing: border-box;
	padding: 1rem;
}
.alert a {
	color: hsla(var(--main),var(--translucent));
	font-weight: bold;
}
.alert a:hover {
	color: hsla(var(--main),var(--opaque));
}
.alert-heading {
	display: block;
	font-size: 1.2rem;
	line-height: 1.6rem;
	font-weight: normal;
}
.alert hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid transparent;
	border-color: hsla(var(--main),var(--semitransparent));
}
/* ###################### BTN */
.btn,
.button-default {
	position: relative;
	box-sizing: border-box;
	padding: 0.3rem 0.6rem;
	border-radius: 3rem;
	background: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--text-color),var(--opaque));
	font-family: var(--main-font);
	font-size: 0.8rem;
	line-height: 1.2rem;
	display: inline-block;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	border: 1px solid transparent;
	transition: box-shadow 0.3s, transform 0.3s, color 0.3s, border-color 0.3s;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px hsla(var(--black),var(--transparent));
}
.btn:hover,
.button-default:hover {
	box-shadow: 0px 3px 6px 0px hsla(var(--black),var(--semitransparent));
	transform: translate3d(0px, -1px, 10px);
	color: hsla(var(--main),var(--opaque));
}
.btn.frame-border {
	border-color: hsla(var(--main),var(--semitransparent));
}
.btn.frame-border:hover {
	border-color: hsla(var(--main),var(--translucent));
}
.btn-outline {
	background: hsla(var(--fill-color),var(--transparent));
	border-color: hsla(var(--fill-color),var(--translucent));
	color: hsla(var(--fill-color),var(--translucent));
}
.btn-outline:hover {
	background: hsla(var(--fill-color),var(--transparent));
	border-color: hsla(var(--fill-color),var(--opaque));
	color: hsla(var(--fill-color),var(--opaque));
}
.btn-lg {
	padding: 1rem 1rem;
	font-size: 1rem;
	line-height: 1rem;
}
.btn-sm {
	padding: 0.2rem 0.4rem;
	font-size: 0.6rem;
	line-height: 1rem;
}
.btn-block {
	display: block;
	width: 100%;
}
/* ###################### BADGE */
.badge {
	box-sizing: border-box;
	display: inline-block;
	/*border: 1px solid transparent;
	border-color: hsla(var(--main),var(--semitransparent));*/
	text-transform: uppercase;
	color: hsla(var(--main),var(--opaque));
	font-size: calc(var(--h-font-size) - 0.6rem);
	line-height: calc(var(--h-line-height) - 0.6rem);
	padding: 0.1rem 0.5;
	border-radius: 6rem;
}
h1 .badge, h2 .badge, h3 .badge, h4 .badge, h5 .badge, h6 .badge {
	padding: 0.1rem calc(var(--h-font-size) - 0.8rem);
	font-size: calc(var(--h-font-size) - 0.6rem);
	line-height: calc(var(--h-line-height) - 0.6rem);
}
td .badge {
	padding: 0.1rem 0.5rem;
}
.badge .frame-border {
	border-radius: 6rem;
}
/* **************************************************
FORMS
************************************************** */
input[type='text'], 
input[type='email'], 
input[type='password'] {
	font-family: var(--main-font);
	display: block;
	background: hsla(var(--white),0);
	box-sizing: border-box;
	transition: color 0.3s, box-shadow 0.3s, border-color 0.3s;
	width: 100%;
	border: none;
	border-bottom: 2px solid hsla(var(--gray),0.6);
	font-size: 1.2rem;
	color: hsla(var(--gray),1);
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	transition: border 0.3s;
}
input[type='text']:hover, 
input[type='email']:hover, 
input[type='password']:hover {
	border-bottom: 2px solid hsla(var(--cyan),0.4);
}
input[type='text']:focus, 
input[type='email']:focus, 
input[type='password']:focus {
	border-bottom: 2px solid hsla(var(--cyan),1);
}
select {
	font-family: var(--main-font);
	display: block;
	box-shadow: 0px 0px 10px 0px hsla(var(--black),0.2) inset;
	background: hsla(var(--white),1);
	color: hsla(var(--gray),1);
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	padding: 0px 0.5rem;
	padding-right: 1.5rem;
	border: 2px solid transparent;
	border-color: hsla(var(--gray),1);
	border-radius: 2rem;
	transition: color 0.3s, box-shadow 0.3s, border-color 0.3s;
	width: 100%;
	cursor: pointer;
}
option {
	font-family: var(--main-font);
	color: hsla(var(--alt),0.8);
}
input[type='text']:disabled, 
input[type='email']:disabled, 
input[type='password']:disabled,
select:disabled {
	opacity: 0.4;
	cursor: auto;
}
.select-wrapper {
	position: relative;
}
.select-wrapper::before {
	display: block;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	position: absolute;
	font-family: 'Font Awesome';
	content: '\f078';
	font-size: 0.6rem;
	color: hsla(var(--gray),0.6);
	transition: color 0.3s;
	pointer-events: none;
	user-select: none;
	top: 0px;
	right: 0px;
}
.select-wrapper:hover::before {
	color: hsla(var(--gray),1);
}
label.input-checkbox, 
label.input-radio {
	display: block;
	min-height: 2rem;
	line-height: 1rem;
	font-size: 0.8rem;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
	position: relative;
	box-sizing: border-box;
	padding: 0.5rem;
	padding-left: 2.5rem;
	user-select: none;
}
label.input-checkbox::before, 
label.input-radio::before {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 2rem;
	height: 2rem;
	font-family: 'Font Awesome';
	content: '\f00c';
	color: hsla(var(--main),0);
	line-height: 2rem;
	text-align: center;
	font-size: 0.8rem;
	transition: color 0.3s, border 0.3s;
	box-shadow: 0px 0px 10px 0px hsla(var(--black),0.2) inset;
	background: hsla(var(--white),0.05);
	pointer-events: none;
	user-select: none;
	border-radius: 0.3rem;
}
label.input-checkbox::after, 
label.input-radio::after { 
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 2rem;
	height: 2rem;
	border: 2px solid hsla(var(--gray),var(--translucent));
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	transition: border 0.3s;
	border-radius: 0.3rem;
}
input[type='checkbox']:checked + label.input-checkbox::before, 
input[type='radio']:checked + label.input-radio::before, 
input[type='checkbox']:checked + label.input-checkbox, 
input[type='radio']:checked + label.input-radio {
	color: hsla(var(--cyan),1);
}
input[type='checkbox']:checked + label.input-checkbox::after, 
input[type='radio']:checked + label.input-radio::after {
	border: 2px solid hsla(var(--cyan),1);
}
input[type='checkbox']:disabled + label.input-checkbox, 
input[type='radio']:disabled + label.input-radio {
	opacity: 0.4;
	cursor: auto;
}
::-webkit-input-placeholder {
	color: hsla(var(--gray),1);
}
:-moz-placeholder {
	color: hsla(var(--gray),1);
	opacity: 1;
}
::-moz-placeholder {
	color: hsla(var(--gray),1);
	opacity: 1;
}
:-ms-input-placeholder {
	color: hsla(var(--gray),1);
}
::-ms-input-placeholder {
	color: hsla(var(--gray),1);
}
:placeholder-shown {
	color: hsla(var(--gray),1);
}
.warning {
	color: hsla(var(--red),1) !important;
}
.hidden-input, 
.form-group input[type='checkbox'],
.form-group input[type='radio'],
.form-group input[type='file'] {
	display: block;
	width: 0px;
	height: 0px;
	position: absolute;
	overflow: hidden;
	opacity: 0;
	z-index: 1;
	visibility: hidden;
	pointer-events: none;
}
.form-group {
	display: flex;
	flex-flow: row nowrap;
	box-sizing: border-box;
	position: relative;
	margin-bottom: 1rem;
}
.form-info {
	font-size: 0.7rem;
	font-weight: bold;
	padding-top: 0.5rem;
	border-top: 1px solid hsla(var(--alt),0.1);
}
.form-group label, 
.form-row label {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	text-wrap: nowrap;
	font-size: 1.2rem;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	margin-right: 0.5rem;
}
.form-group small {
	font-size: 0.6rem;
}


.form-row > div {
	margin-bottom: 1rem;
}
.form-grid {
	display: grid;
	grid-column-gap: 0.5rem;
    grid-template-columns: repeat(12, 1fr);
}
.form-grid .form-group, 
.form-grid .form-group.span-1 {
	grid-column: span 12;
}
.form-grid .form-group.span-2 {
	grid-column: span 6;
}
.form-grid .form-group.span-3 {
	grid-column: span 4;
}
.form-grid .form-group.span-4 {
	grid-column: span 3;
}




.settings-group {
	display: block;
	list-style-type: none;
	transition: border-color 0.3s;
	border: 2px solid transparent;
	border-color: hsla(var(--magenta),1);
	border-radius: 1rem;
}
.settings-group:hover {
	border-color: hsla(var(--cyan),1);
}
.settings-group .settings-label {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 0.3rem;
	font-size: 0.8rem;
	line-height: 1.2rem;
	font-weight: bold;
	text-transform: uppercase;
	user-select: none;
	color: hsla(var(--magenta),1);
	transition: background 0.3s, color 0.3s;
	cursor: pointer;
}
.settings-group .settings-label:hover {
	color: hsla(var(--cyan),1);
}
.settings-group .settings-label::before {
	font-family: 'Font Awesome';
	display: inline-block;
	content: '\f013';
	margin-right: 0.2rem;
}
.settings-group .settings-label::after {
	font-family: 'Font Awesome';
	display: block;
	content: '\f078';
	font-size: 1rem;
	line-height: 1.1rem;
	width: 1rem;
	height: 1rem;
	text-align: center;
	position: absolute;
	right: 0.5rem;
	top: 0.3rem;
	transition: transform 0.3s;
}
.settings-group .hidden-input:checked + .settings-label::after {
	transform: rotateX(180deg);
}
.settings-group:has(.hidden-input:checked) {
	border-color: hsla(var(--gray),1);
}
.settings-group:has(.hidden-input:checked) .settings-label {
	color: hsla(var(--gray),1);
}
.settings-wrapper {
	position: relative;
	box-sizing: border-box;
	background-clip: border-box;
	overflow: hidden;
	max-height: 0px;
	transition: max-height 0.6s, border-color 0.3s;
}
.settings-group .hidden-input:checked ~ .settings-wrapper {
	max-height: 40rem;
}
.settings-inner {
	padding: 1rem;
}
.settings-warning {
	border-radius: 0 0 1rem 1rem;
	background: hsla(var(--red),0.2);
}

/* **************************************************
ASPECT RATIO
************************************************** */
.aspect-ratio {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	overflow: hidden;
	box-sizing: border-box;
}
.aspect-ratio > img, 
.aspect-ratio > a, 
.aspect-ratio > video,
.aspect-ratio > iframe, 
.aspect-ratio > figure {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0px;
	left: 0px;
}
.aspect-ratio > figure img, 
.aspect-ratio > a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.aspect-ratio-ultrawide {
	padding-bottom: 42.2%;
}
.aspect-ratio-square {
	padding-bottom: 100%;
}
/* **************************************************
PAGE
************************************************** */
.content-wrapper {
	padding: 1rem 0px;
}
.form-area {
	background: hsla(var(--white),1);
	padding: 2rem 1.5rem;
	border-radius: 3rem;
}
.page-body {
	position: relative;
	box-sizing: border-box;
	padding-bottom: 10rem;
}
.page-limit {
	box-sizing: border-box;
	width: 100%;
	max-width: 1900px;
	padding: 0px 1rem;
	margin: 0px auto;
}
.qr-code-wrapper {
	box-sizing: border-box;
	margin: 0px auto;
	text-align: center;
}
.qr-code{
	width: 100%;
	max-width: 16rem;
	margin: 0px auto;
	background: hsla(var(--white),var(--opaque));
}
.footer {
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
}
.footer-logo {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	width: 100%;
}
.footer-logo img {
	height: 3rem;
}
.footer-content {
	width: 100%;
	padding: 0.5rem;
	box-sizing: border-box;
	background: hsla(var(--white),var(--opaque));
}
.image-wrapper {
	position: relative;
	box-sizing: border-box;
	padding: 0px 1.5rem;
}
.image-wrapper img {
	width: 100%;
	pointer-events: none;
	transition: width 0.3s, opacity 0.3s;
}
.image-wrapper-alt {
	padding-top: 0.5rem;
	text-align: center;
}
.image-wrapper-alt img {
	width: 1%;
	opacity: 0;
	pointer-events: none;
	transition: width 0.3s, opacity 0.3s;
}
.lang {
	padding: 0 1rem;
}
/* **************************************************
TABLE
************************************************** */
.table-wrapper {
	background: hsla(var(--white),var(--opaque));
	border-radius: 1rem;
	padding: 1rem;
	box-sizing: border-box;
	min-height: 30rem;
}
.table-overflow {
	overflow-x: scroll;
}
.table-wrapper-inner {
	background: hsla(var(--white),1);
	box-shadow: 0px 0px 10px 0px hsla(var(--black),0) inset;
	border: 2px solid transparent;
	border-color: hsla(var(--black),1);
	border-radius: var(--corner);
}
table {
	width: 100%;
	border-spacing: 0px;
	border-collapse: collapse;
	font-size: 0.8rem;
	font-family: var(--plain-font);
}
table.table-fixed {
	table-layout: fixed;
	min-width: 100%;
}
table[align='center'] {
	margin: 0px auto;
}
table col:hover {
	background: hsla(var(--main-front),0.6);
}
tbody {
	
}
tr {
}
td, th {
	position: relative;
	background-clip: padding-box;
	box-sizing: border-box;
	padding: 0.3rem 0.5rem;
	background: hsla(var(--main-front),0.1);
	/*border-bottom: 0.3rem solid transparent;*/
	transition: background 0.3s, color 0.3s;
	font-weight: normal;
	text-align: left;
}
th {
	background: hsla(var(--alt-front),0.1);
	font-weight: bold;
}
tr:hover td {
	background: hsla(var(--main-highlight),1);
	color: hsla(var(--alt),1);
}
td::after, 
th::after {
	content: '';
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: calc(100% + 0.3rem);
	box-sizing: border-box;
	border-right: 1px solid transparent;
	border-color: hsla(var(--main),0.2);
	user-select: none;
	pointer-events: none;
}
td:last-child::after, 
th:last-child::after {
	border-color: transparent;
}
tr:last-child td::after, 
tr:last-child th::after {
	height: 100%;
}
/* **************************************************
SCROLL
************************************************** */
.scrollbar {
	scrollbar-width: 6px;
}
.scrollbar::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background: transparent;
}
.scrollbar::-webkit-scrollbar-track {
	background: hsla(var(--gray),0);
	transition: background 0.3s;
	border: none;
}
.scrollbar::-webkit-scrollbar-track:hover {
	/*background: hsla(var(--main-front),0.1);*/
}
.scrollbar::-webkit-scrollbar-thumb {
	background: hsla(var(--gray),0.2);
	transition: background 0.3s;
	border: none;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
	background: hsla(var(--gray),0.4);
}

.scrollbar::-webkit-scrollbar-thumb:active {
	background: hsla(var(--highlight),0.4);
}
.scrollbar::-webkit-scrollbar-corner {
	background: transparent;
}
@media all and (min-width: 961px) {
	.content-wrapper {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
	}
	.form-wrapper {
		width: 50%;
	}
	.image-wrapper {
		width: 50%;
	}
	.image-wrapper img {
		width: 120%;
	}
}

@media all and (max-width: 960px) {
	.content-wrapper {
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-start;
	}
	.page-limit {
		max-width: 80%;
	}
	.image-wrapper img {
		width: 1%;
		opacity: 0;
	}
	.image-wrapper-alt img {
		width: 70%;
		opacity: 1;
	}
}
@media all and (max-width: 660px) {
	.page-limit {
		max-width: 100%;
	}
	h1 {
		--h-font-size: 2.4rem;
		--h-line-height: 2.6rem;
	}
	h2 {
		--h-font-size: 1.6rem;
		--h-line-height: 1.8rem;
	}
	.form-grid .form-group.span-2 {
		grid-column: span 12;
	}
}