/*
//////////////////////////////////////////////////////////////////////////////////
// 																				//
// COPYRIGHT:  NICK VAN KOLLENBURG							 					//
// nickvankollenburg@gmail.com													//
// 																				//
//////////////////////////////////////////////////////////////////////////////////
*/

/** Font imports */
@font-face {
  font-family: Arista;
  src: url(../fonts/arista.ttf);
}
@font-face {
  font-family: Vagrounded;
  src: url(../fonts/vagrounded.ttf);
}


/* Fonts
-------------------------------------------------------------- */
body {
	font-family: 'Inter', sans-serif;
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size);
	line-height: var(--font-line-height);
	letter-spacing: -0.02em;
	
	color: rgb(var(--color-text));
}

h1, h2 {
	letter-spacing: -0.01em;
	font-family: 'Vagrounded';
	color: rgb(var(--color-text));
}
h1 {
	font-size: var(--font-size-h1);
	line-height: var(--mybms-font-line-height-h1);
}
h2 {
	font-size: var(--font-size-h2);
	line-height: var(--font-line-height-h2);
}
.h1, .h2 {
	letter-spacing: -0.01em;
	font-family: 'Vagrounded';
	color: rgb(var(--color-text));
}
.h1 {
	font-size: var(--font-size-h1);
	line-height: var(--mybms-font-line-height-h1);
}
.h2 {
	font-size: var(--font-size-h2);
	line-height: var(--font-line-height-h2);
}

.font-arista {
	font-family: 'Arista';
	letter-spacing: 0.05em;
}
.font-vagrounded {
	font-family: 'Vagrounded';
}

.small {
	font-size: 12px;
}
.bold {
	font-weight: var(--font-weight-bold);
}
.normal {
	font-weight: var(--font-weight-normal);
}



/* Colors
-------------------------------------------------------------- */
/**
Black:
#595959

Red:
#EC1A23
*/
.color-primary {
	color: rgb(var(--color-primary));
}
.color-secondary {
	color: rgb(var(--color-secondary));
}
.color-tertiary {
	color: rgb(var(--color-tertiary));
}
.color-accent {
	color: rgb(var(--color-accent));
}
.color-warning {
	color: rgb(var(--color-warning));
}
.color-success {
	color: rgb(var(--color-success));
}
.color-mybms, .ql-color-mybms {
	color: rgb(var(--color-mybms));
}
.color-white, .ql-color-white {
	color: rgb(var(--color-white));
}


/* App colors
-------------------------------------------------------------- */
.color-app-primary, .ql-color-primary {
	color: rgb(var(--color-app-primary));
}
.color-app-secondary, .ql-color-secondary {
	color: rgb(var(--color-app-secondary));
}
.color-app-tertiary, .ql-color-tertiary {
	color: rgb(var(--color-app-tertiary));
}
.color-app-accent, .ql-color-accent {
	color: rgb(var(--color-app-accent));
}
.color-app-warning, .ql-color-warning {
	color: rgb(var(--color-app-warning));
}
.color-app-success, .ql-color-success {
	color: rgb(var(--color-app-success));
}


/* Icons
-------------------------------------------------------------- */
span.icon {
	cursor:pointer;
	
	display: block;
	position: relative;
	
	width: 20px;
	height: 20px;
	
	background-size: cover;
	
	transition:
		filter 0.2s ease-in-out,
		opacity 0.2s ease-in-out,
		transform 0.2s ease-in-out;
}
span.icon:hover {
	filter: drop-shadow(var(--text-shadow-light));
	opacity: .80;
	transform: scale(1.15);
}
span.icon img {
	max-width: 100%;
	max-height: 100%;
}


/* Graphics
-------------------------------------------------------------- */
div.line {
	background-color: #F2F2F3;
	width: 100%;
	height: 1px;
}


/* Hyperlinks
-------------------------------------------------------------- */
a {
	color: #000;
	text-decoration: none;
	
	transition:
		color 0.2s ease-in-out,
		font-weight 0.2s ease-in-out,
		text-decoration 0.2s ease-in-out,
		text-shadow 0.2s ease-in-out;
}
a:hover {
	color: #CCC;
	text-decoration: underline;
}


/* Button icons
-------------------------------------------------------------- */
div.button-icon {
	cursor: pointer;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	
	background-color: rgb(var(--color-secondary));
	background-repeat: no-repeat;
	background-size: contain;
	
	border-radius: var(--border-radius);
	
	opacity: 1;
	
	width: var(--button-icon-width);
	height: var(--button-icon-height);
	
	transition:
		background-color 0.2s ease-in-out,
		opacity 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}
div.button-icon-deactive {
	pointer-events: none;
	opacity: 0.3;
}
div.button-icon:hover {
	box-shadow: 0 0px 10px rgb(var(--color-accent) / 0.2);
	opacity: var(--button-opacity-hover);
}
div.button-icon-submit {
	background-color: rgb(var(--button-color-background-submit));
}
div.button-add {
	background-image: url(../images/icons/buttons/add.svg);	
}
div.button-back {
	background-image: url(../images/icons/buttons/back.svg);
}
div.button-up {
	background-image: url(../images/icons/buttons/up.svg);
}
div.button-down {
	background-image: url(../images/icons/buttons/down.svg);
}
div.button-delete {
	background-image: url(../images/icons/buttons/delete.svg);
}
div.button-modify {
	background-image: url(../images/icons/buttons/modify.svg);
}
div.button-editor {
	background-image: url(../images/icons/buttons/editor.svg);
}
div.button-settings {
	background-size: 65%;
	background-position: 50% 50%;
	background-image: url(../images/icons/buttons/settings.svg);
}


/* Buttons
-------------------------------------------------------------- */
.button,
input.btn-prompt-close,
input.btn-prompt-close-alert,
input.btn-prompt-action {
	cursor: pointer;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	
	font-family: var(--button-font);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	letter-spacing: var(--button-letter-spacing);
	
	text-decoration: none;
	text-transform: uppercase;
	
	color: rgb(var(--button-color));
	background-color: rgb(var(--button-color-background));
	
	border: 0px;
	border-radius: var(--button-border-radius);
	
	display: inline-block;
	padding: 8px 20px;
	opacity: 1;
	
	transition:
		opacity 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}
input.btn-prompt-action,
input.btn-prompt-close,
input.btn-prompt-close-alert {
	opacity: 1;
}
div.button {
	pointer-events: none;
	opacity: 0.3;
}
.submit-hidden {
	position: absolute;
	visibility: hidden;
}
.button:hover,
input.btn-prompt-action:hover,
input.btn-prompt-close:hover,
input.btn-prompt-close-alert:hover {
	box-shadow: 0 0px 10px rgb(var(--color-accent) / 0.2);
	opacity: var(--button-opacity-hover);
}

input.btn-prompt-action:hover,
input.btn-prompt-close:hover,
input.btn-prompt-close-alert:hover {
	opacity: var(--button-opacity-hover);
}
.button-submit,
input.btn-prompt-action {
	color: rgb(var(--button-color-submit));
	background-color: rgb(var(--button-color-background-submit));
}

.button-mybms,
input.btn-prompt-close-alert {
	color: rgb(var(--button-color-mybms));
	background-color: rgb(var(--button-color-background-mybms));
}
.button-opacity {
	opacity: 1;
}
.button-opacity:hover {
	opacity: var(--button-opacity-hover);
}


/* Inputs
-------------------------------------------------------------- */
.input {
	font-family: var(--input-font);
	font-size: var(--input-font-size);
	font-weight: var(--input-font-weight);
	
	color: rgb(var(--color-input-text));
	background-color: var(--color-input-background);
	
	border: var(--input-border);
	border-radius: var(--input-border-radius);
	
	box-shadow: var(--input-box-shadow);
	
	width: var(--input-width);
	padding: var(--input-padding);
	
	opacity: var(--input-opacity);
	
	transition: all 0.25s ease-in-out;
}
.input.select {
	cursor: pointer;
	
	width: calc(var(--input-width) + 12px);
	transition: all 0.3s ease-in-out;
}
.input:not(:disabled):not(.select):hover {
	opacity: var(--input-opacity-hover);
	color: rgb(var(--color-input-text-hover));
	background-color: var(--color-input-background-hover);
	box-shadow: var(--input-box-shadow-hover);
	border: var(--input-border-hover);
}
.input:not(:disabled):not(.select):focus {
	opacity: var(--input-opacity-active);
	color: rgb(var(--color-input-text-active));
	background-color: var(--color-input-background-active);
	box-shadow: var(--input-box-shadow-active);
	border: var(--input-border-active);
}
.input.select:hover {
	opacity: var(--input-opacity-hover);
	color: rgb(var(--color-input-text-hover));
	background-color: var(--color-input-background-select-hover);
	box-shadow: var(--input-box-shadow-hover);
	border: var(--input-border-hover);
}
.input.select:focus {
	opacity: var(--input-opacity-hover);
	color: rgb(var(--color-input-text-hover));
	background-color: var(--color-input-background-select-hover);
	box-shadow: var(--input-box-shadow-hover);
	border: var(--input-border-hover);
}
.input-small {
	font-size: var(--input-font-size-small);
}

.enlarge:not(:disabled):hover {
	transform: scale(1.02);
}
.enlarge:not(:disabled):focus {
	transform: scale(1.02);
}

input.text {

}
input.password {

}
textarea.textarea {
	resize: none;
}
select.select {

}


/** Checkbox */
div.check-box {
	width: fit-content;
	
	display: inline-flex;
	justify-content: start;
	align-items: center;
	
	transition: all 0.2s ease-in-out;
	
	text-wrap: nowrap;
}
div.check-box:hover {
	opacity: 0.7;
}
div.check-box-disabled {
	pointer-events:none;
	
	opacity: 0.5;
}
div.check-box .check-box-field {
	cursor: pointer;
	
	background: transparent;
	box-shadow: inset 0px 0px 5px rgb(0 0 0 / 0.3);
	
	border: 1px solid rgb(var(--color-primary));
	border-radius: var(--checkbox-border-radius);
	
	width: 15px;
	height: 15px;
}
div.check-box .check-box-field span.check-box-span {
	display: block;
	position: relative;
	
	top: 0.2em;
	left: 2px;
	
	width: calc(100% - 3px);
	height: calc(100% - 3px);
}
div.check-box .check-box-checked span {
	background: var(--checkbox-background);
	background-repeat: no-repeat;
	background-size: contain;
}
div.check-box .check-label {
	cursor: pointer;
	padding: 0px 7px 0px 5px;
}
div.check-box .check-label:focus {
	opacity: 0.7;
}


/** Range Slider Fields */
div.range-outline {
	width: 100%;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
div.range-fields {
	display: flex;
	justify-content: space-between;
	align-items: end;
	
	width: 100%;
	
	font-size: 11px;
	
	color: var(--color-primary);
}
div.range-field-min {
	font-weight: var(--font-weight-bold);
	color: rgb(var(--color-text) / 0.8);
}
div.range-field-max {
	font-weight: var(--font-weight-bold);
	color: rgb(var(--color-text) / 0.8);
}
div.range-field-value {
	font-size: 12px;
	
	font-weight: var(--font-weight-bold);
	border-radius: 50%;
	border: 1px solid rgb(var(--color-white));
	
	background-color: rgb(var(--color-mybms));
	color: rgb(var(--color-white));
	
	width: 30px;
	height: 30px;
	
	margin-top: 7px;
	margin-bottom: 9px;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

/** Range Slider */
input.range {
	-webkit-appearance: none;
	appearance: none;

	flex: 1;
	height: 8px;
	
	width: 100%;

	border-radius: 999px;
	background: rgb(var(--color-white));
	border: 1px solid rgb(var(--button-color-background-submit));

	outline: none;
	cursor: pointer;
}

input.range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;

	width: 20px;
	height: 20px;

	border-radius: 50%;
	border: 1px solid rgb(var(--color-white));
	background: rgb(var(--button-color-background-submit));

	box-shadow: var(--shadow-light);
	
	cursor: pointer;

	transition:
		transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}

input.range::-webkit-slider-thumb:hover {
	transform: scale(1.15);
	box-shadow: var(--shadow);
}

input.range::-moz-range-thumb {
	width: 20px;
	height: 20px;

	border-radius: 50%;
	border: 1px solid rgb(var(--color-white));
	background: rgb(var(--button-color-background-submit));

	box-shadow: var(--shadow-light);
	
	cursor: pointer;

	transition:
		transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}

input.range::-moz-range-thumb:hover {
	transform: scale(1.15);
	box-shadow: var(--shadow);
}

/** Toggle Switch */
div.switch {
	width: 100%;
}
div.switch-disabled {
	pointer-events:none;
	opacity: 0.3;
}
.switch-inline {
	--switch-button-size: calc(var(--switch-height) - (var(--switch-padding) * 2));
	--switch-move: calc(var(--switch-width) - var(--switch-button-size) - (var(--switch-padding) * 2));
	--switch-speed: 0.2s ease-in-out;

	position: relative;
	display: inline-block;

	width: var(--switch-width);
	height: var(--switch-height);
}
.switch-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.switch-slider {
	position: absolute;
	inset: 0;

	cursor: pointer;
	border-radius: 999px;

	background-color: rgb(var(--color-primary) / 0.7);
	transition:
		background-color var(--switch-speed),
		box-shadow var(--switch-speed);
}
.switch-slider::before {
	content: "";

	position: absolute;
	left: var(--switch-padding);
	top: var(--switch-padding);

	width: var(--switch-button-size);
	height: var(--switch-button-size);

	border-radius: 50%;
	background-color: rgb(var(--color-white));

	transition:
		transform var(--switch-speed);
}
.switch-input:checked + .switch-slider {
	background-color: rgb(var(--color-mybms));
}

.switch-input:checked + .switch-slider::before {
	transform: translateX(var(--switch-move));
}
.switch-input:focus-visible + .switch-slider {
	box-shadow: 0 0 0 2px rgb(var(--color-mybms) / 0.35);
}


/* Forms
-------------------------------------------------------------- */
div.form-outline {
}
form.form {

}
ul.form-list {
	font-size: 15px;
	line-height: 19px;
	list-style: none;
	
	margin: 0px;
	padding: 0px;
}
ul.form-list li:nth-child(1) {
	padding-top: 0px;
}
ul.form-list li {
	padding-top: 12px;
}
ul.form-list li div.form-label {
}
ul.form-list li div.form-error {
	color: #EC1A23;
	font-weight: bold;
}
ul.form-list li div.form-item {
	margin-top: 5px;
}


/* Errors & messages
-------------------------------------------------------------- */

/* Error style */
div.error-outer {
	background-color: #eeeeee;
	border: 1px solid #cccccc;
	
	display: inline-block;
	width: 100%;
	
	padding: 10px;
	margin-bottom: 20px;
}
div.error-outer span {
	font-weight: bold;
	font-size: 20px;
	display: block;
	margin-bottom: 10px;
}
ul.error-list {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
ul.error-list li {
	height: 30px;
}
div.error-prefix {
	float: left;
}
div.error-prefix div {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	
	position: relative;
	top: 9px;
	
	width: 7px;
	height: 7px;
	
	margin: 0px 10px 0px 10px;
}
div.error-line {
	float: left;
}

/* Message style */
div.message-outer {
	border: 1px solid black;
	background-color: #5883af;
	
	display: inline-block;
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
}
div.message-outer span {
	font-weight: bold;
	font-size: 20px;
	
	display: block;
	margin-bottom: 10px;
}
ul.message-list {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
ul.message-list li {
	height: 30px;
}
div.message-prefix {
	float: left;
}
div.message-prefix div {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	
	position: relative;
	top: 9px;
	
	width: 7px;
	height: 7px;
	
	margin: 0px 10px 0px 10px;
}
div.message-line {
	float: left;
}


/* Loading icon
-------------------------------------------------------------- */
.loader {
	position: relative;
	width: 100%;
	height: 100%;
	min-width: 15px;
	min-height: 15px;
	max-width: 200px;
	max-height: 200px;

	border-radius: 50%;

	/* Background-ring */
	background:
		radial-gradient(
			circle,
			transparent 54%,
			rgb(255 255 255) 56%,
			rgb(230 230 230) 69%,
			transparent 71%
		);

	box-shadow: inset 0px 0px 10px 1px rgb(var(--color-secondary) / 0.2);
}

.loader-ring {
	position: absolute;
	inset: 0;

	border-radius: 50%;

	/* Create a filled circle with the gradient */
	background: var(--color-mybms-loader-gradient);

	/* Create a ring from the filled circle */
	mask:
		radial-gradient(
			circle,
			transparent 0 54%,
			black 56% 69%,
			transparent 71%
		);

	-webkit-mask:
		radial-gradient(
			circle,
			transparent 0 54%,
			black 56% 69%,
			transparent 71%
		);

	animation: mybms-loader-spin 1.5s linear infinite;
}

@keyframes mybms-loader-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}


/* Layover
-------------------------------------------------------------- */
@media screen and (min-width:  0px)  {
	div.layover {
		max-width: 90%;
	}
}
@media screen and (min-width: 1100px) {
	div.layover {
		max-width: 70%;
	}
}
@media screen and (min-width: 1500px) {
	div.layover {
		max-width: 40%;
	}
}

div.layover-alpha {
	position: fixed;
	z-index: 99950;
	
	width: 100%;
	height: 100%;
	
	top: 0;
	left: 0;
	
	margin: 0px;
}
div.layover-alpha-background {
	background: rgb(var(--color-mybms-light) / 0.2);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}
div.layover {
	background: var(--color-mybms-layover-gradient);
	box-shadow:  5px 5px 16px -8px #868686;
	
	border: 1px solid #ccc;
	border-radius:  var(--border-radius);
	
	position: absolute;
	z-index: 99951;
	
	max-height: 85%;
	overflow-x: none;
	overflow-y: auto;
	
	left:-2500px;
	top:-2500px;
	
	margin: 0px auto;
}
div.layover-inner {
	position: relative;
	width: 100%;
}
div.layover-padding {
	padding: 10px 10px 15px 10px;
}
div.layover-header {
	border-bottom: 1px solid transparent;
	border-image: var(--color-mybms-border-gradient);
	
	display: flex;
	justify-content: space-between;
	align-items: start;
	
	width: 100%;
	
	padding-bottom: 10px;
}
div.layover-title {
	cursor: default;
	
	font-family: 'VAGRounded';
	font-size: 20px;
	line-height: 19px;
	font-weight: bold;
	
	position: relative;
	top: 4px;
	padding-right: 25px;
}
div.layover-close {
	cursor: pointer;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	
	background-color: rgb(var(--color-secondary));
	background-image: url(../images/icons/buttons/close.svg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	border-radius: var(--border-radius);
	
	width: 25px;
	height: 25px;
	
	transition:
		transform 0.2s ease-in-out,
		opacity 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}
div.layover-close:hover {
	transform: scale(1.02);
	opacity: .7;
	box-shadow: 0 0px 10px #999;
}
div.layover-drag {
	cursor: move;
}
div.layover-content {
	margin-top: 10px;
}

/* For devices with a minimum width of 0px (Small) */
@media screen and (min-width:  0px)  {
		
	div.layover {
		min-width: 50%;
	}
}

/* For devices with a minimum width of 1025px (Large) */
@media screen and (min-width:  1025px)  {
		
	div.layover {
		min-width: 0;
	}
}


/* Prompts
-------------------------------------------------------------- */
div.prompt-alpha {
	background: rgb(var(--color-mybms-light) / 0.2);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	
	position: fixed;
	z-index: 99990;
	
	width: 100%;
	height: 100%;
	
	top: 0;
	left: 0;
	
	margin: 0px;
}
div.prompt-alpha-alert {
	background: rgb(var(--color-mybms-light) / 0.2);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	
	position: absolute;
	z-index: 99992;
	left:-500px;
	top:-500px;
	
	width: 100%;
	height: 100%;
	
	margin: 0px;
}
div.prompt {
	background: var(--color-mybms-prompt-gradient);
	box-shadow:  5px 5px 16px -8px #868686;
	
	border: 1px solid #ccc;
	border-radius:  var(--border-radius);
	
	position: absolute;
	left:-500px;
	top:-500px;
	
	max-width: 90%;
	min-width: 350px;
	
	margin: 0px auto;
}
div.prompt-prompt {
	z-index: 99991;	
}
div.prompt-confirm {
	z-index: 99991;	
}
div.prompt-date {
	z-index: 99991;	
}
div.prompt-alert {
	z-index: 99993;
	top: -200%;
	left: -200%;
}
div.prompt-inner {
	position: relative;
	width: 100%;
}
div.prompt-padding {
	padding: 10px;
}
div.prompt-header {
	border-bottom: 1px solid #ccc;
	
	padding-bottom: 10px;
	margin-bottom: 10px;
}
div.prompt-header span {
	font-family: 'VagRounded';
	font-size: 20px;
	font-weight: var(--font-weight-bold);

	position: relative;
	top: 2px;
	
	padding-right: 25px;
}
div.prompt-content {
	font-size: 14.5px;
	line-height: 17px;
	
	padding: 0px 10px 5px 0px;
}
div.prompt-input {
	padding: 0px 10px 10px 0px;
}
div.prompt-buttons {
	padding: 10px 0px 5px 0px;
}
div.prompt-content ul {
	margin: 0px 20px;
	padding: 0px;
}
div.prompt-content li {
	padding: 2px 0px;
}


/* Context Menu
-------------------------------------------------------------- */
ul.contextmenu {
	font-size: var(--context-font-size);
	
	background: var(--context-background);
	box-shadow:  var(--shadow-overlay);
	
	border: var(--context-border);
	border-radius:  var(--border-radius);
	
	list-style: none;
	
	position: absolute;
	z-index: 99999;
	
	width: auto;
	margin: 0px;
	padding: 0px;
	
	top: 650px;
}
ul.contextmenu li.item {
	cursor: pointer;
	border-radius:  var(--border-radius);
	
	min-width: 200px;
	
	margin: 5px 5px;
	padding: 0px 5px 5px 5px;
	
	transition: transform 0.2s ease;
}
ul.contextmenu li.context-disabled {
	pointer-events: none;
	opacity: 0.5;
}
ul.contextmenu li.item:not(.context-disabled):hover {
	background-color: var(--context-item-hover);
}
ul.contextmenu li.item span {
	position: relative;
	top: 3px;
	left: 5px;
}
ul.contextmenu li.spacer {
	border-top: var(--context-spacer-border-color);
}


/* Tooltips
-------------------------------------------------------------- */
@media screen and (min-width: 0px)  {
	.tooltip-outline {
		min-width: 50px;
		max-width: 150px;
	}
}
@media screen and (min-width: 768px)  {
	.tooltip-outline {
		min-width: 50px;
		max-width: 150px;
	}
}
@media screen and (min-width: 1100px)  {
	.tooltip-outline {
		min-width: auto;
		max-width: 300px;
	}
}
.tooltip-outline {
	font-size:12px;
	font-weight:500;
	
	background-color: #fff;
	box-shadow:  5px 5px 16px -8px #868686;
	
	border: 1px solid #ccc;
	border-radius:  var(--border-radius);
	
	position:absolute;
	z-index: 999999;
	left:-500px;
	top:-500px;
	
	text-wrap: wrap;
	
	margin: 0px;
	padding: 3px 7px 3px 7px;
}
.tooltip-icon::before {
	content: "?";
	cursor: pointer;

	font-family: 'VagRounded';
	font-size: 10px;
	line-height: 1;

	color: rgb(var(--color-white));
	background-color: rgb(var(--color-mybms));
	opacity: 0.5;
	
	position: relative;
	top: -2px;
	
	text-indent: -0.7px;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	width: 13px;
	height: 13px;

	margin-left: 10px;
	border-radius: 50%;
	
	transition: opacity 0.2s ease;
}


/* Construction screen
-------------------------------------------------------------- */
div.construction {
	margin:0px auto;
	text-align: center;
	padding-top: 100px;
}
div.construction h1 {
	font-size: 30px;
	padding-top: 30px;
	font-family: 'Arista';
}
div.construction h2 {
	font-size: 20px;
	padding-top: 10px;
	font-family: 'Arista';
}
div.construction ul.form {
	list-style: none;
}
div.construction ul.form li {
	padding-top: 10px;
}

/* For devices with a minimum width of 0px (Small) */
@media screen and (min-width:  0px)  {
		
	div.construction-left {
		text-align: left;
		display: inline-block;
		max-width: 400px;
		margin: 0px 10px 0px 10px;
	}

	div.construction-right {
		display: inline-block;
		width: 200px;
		margin: 0px 10px 0px 10px;
	}

	div.construction-right img{
		max-width: 100%;
		position: relative;
		top: 30px;
	}
}

/* For devices with a minimum width of 1024px (Large) */
@media screen and (min-width:  1024px)  {
	div.construction-left {
		text-align: left;
		display: inline-block;
		max-width: 400px;
		margin: 0px 10px 0px 10px;
		position: relative;
		top: -50px;
	}

	div.construction-right {
		display: inline-block;
		width: 400px;
		margin: 0px 10px 0px 100px;
	}

	div.construction-right img{
		max-width: 100%;
		position: relative;
		top: 100px;
	}
}