@import "fonts/SourceSansPro-latin-ext/SourceSansPro-latin-ext__lazy-cache.css";
@import "../assets/fontawesome-pro-6.1.1-css/css/all__lazy-cache.css";

:root {
	--font-family:'Source Sans Pro', sans-serif;
	--font-size-normal:20px;
	--font-size-small:calc(var(--font-size-normal) * 0.75);
	--font-size-big:calc(var(--font-size-normal) * 1.5);
	--text-color-hsl-h:229;
	--text-color-hsl-s:65%;
	--text-color-hsl-l:15%;
	--text-color-hsl-a:1.0;
	--text-color-default:hsla(
			var(--text-color-hsl-h),
			var(--text-color-hsl-s),
			var(--text-color-hsl-l),
			var(--text-color-hsl-a)
	);
	--text-color:var(--text-color-default);

	--link-color-default:#6C94D0;
	--link-color:var(--link-color-default);
	/*--link-hover-color-default:#6C94D0;*/
	--link-hover-color-default:var(--text-color-default);
	--link-hover-color:var(--link-hover-color-default);

	--achivement-circle-color:#B5D0EC;


	--font-weight-normal:400;
	--font-weight-bold:700;
	--font-weight-semi-bold:600;

	--border-radius:10px;

	--input-border-color:#B5D0EC;
	--input-background-color:#ffffff;
	--input-text-color:hsla(
			var(--text-color-hsl-h),
			var(--text-color-hsl-s),
			calc(var(--text-color-hsl-l) + 50),
			var(--text-color-hsl-a)
	);

	--bs-tooltip-arrow-size:5px;
	--bs-tooltip-border-radius:6px;
	--bs-tooltip-bg-color:rgba(14, 23, 65, 1.0);
	/*--bs-tooltip-bg-color: #91B9E2;*/
	--bs-tooltip-text-color:#ffffff;
	--scrollbar-width:20; /* --scrollbar-width is overwritten in js getScrollBarWidth() */
	--scrollbar-width-px:calc(var(--scrollbar-width) * 1px);

	--required-mark-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path style="fill:rgba(14, 23, 65, 1.0);" d="M417.1 368c-4.437 7.688-12.5 12-20.81 12c-4.062 0-8.188-1.031-11.97-3.219L248 297.6V456c0 13.25-10.75 24-23.1 24S200 469.3 200 456V297.6l-137.2 79.22C59 378.1 54.88 380 50.81 380c-8.312 0-16.37-4.312-20.81-12c-6.625-11.47-2.687-26.16 8.781-32.78L176 256l-137.2-79.22C27.31 170.2 23.38 155.5 29.1 144C36.59 132.6 51.28 128.5 62.78 135.2L200 214.4V56C200 42.75 210.8 32 224 32S248 42.75 248 56v158.4l137.2-79.22C396.8 128.5 411.4 132.6 417.1 144c6.625 11.47 2.688 26.16-8.781 32.78L271.1 256l137.2 79.22C420.7 341.8 424.6 356.5 417.1 368z"></path></svg>');
}

body {
	background-color:hsla(209, 57%, 93%, 1.0);
	overscroll-behavior-y:none;
	-webkit-overflow-scrolling:touch;
}

body,
dialog,
.normalize {
	font-family:var(--font-family);
	font-weight:var(--font-weight-normal); /*normal*/
	font-size:var(--font-size-normal);
	font-style:normal;
	color:var(--text-color);
}

body.no-scroll {
	overflow:hidden;
}

.body-wrap {
	min-height:100vh;
}

a {
	/*--text-color:var(--link-color-default);*/
	color:var(--text-color);
	/*--link-hover-color:var(--text-color);*/
}

a:active,
a:focus,
a:hover {
	--text-color:var(--link-hover-color);
	color:var(--text-color);
	text-decoration:none;
}

h3, .h3 {
	font-size:var(--font-size-normal);
	font-weight:var(--font-weight-semi-bold);
	margin-top:1em;
	margin-bottom:0.5em;
}

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
	color:var(--text-color);
}

.container {
	max-width:100%;
}

label.small {
	font-weight:var(--font-weight-normal);
	font-size:var(--font-size-small);
}

.no-user-select {
	-webkit-touch-callout:none; /* iOS Safari */
	-webkit-user-select:none; /* Safari */
	-khtml-user-select:none; /* Konqueror HTML */
	-moz-user-select:none; /* Old versions of Firefox */
	-ms-user-select:none; /* Internet Explorer/Edge */
	user-select:none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.normal {
	font-size:var(--font-size-normal);
}

.small {
	font-size:var(--font-size-small);
}

.smaller {
	font-size:0.75em;
}

.big {
	font-size:var(--font-size-big);
}

.bigger {
	font-size:1.5em;
}

b {
	font-weight:var(--font-weight-bold);
}

.bold {
	font-weight:var(--font-weight-bold);
}

.semi-bold {
	font-weight:var(--font-weight-semi-bold);
}

.regular {
	font-weight:var(--font-weight-normal);
}

.italic {
	font-style:italic;
}

.x-disabled {
	pointer-events:none;
	cursor:not-allowed;
}

.text-white, .text-white-hover:hover, .text-color-hover:hover .text-white-hover:not(.text-color-hover) {
	--text-color:#ffffff;
	/*color:var(--text-color);*/
}

.text-light-blue, .text-light-blue-hover:hover, .text-color-hover:hover .text-light-blue-hover:not(.text-color-hover) {
	--text-color:#91B9E2;
	/*color:var(--text-color);*/
}

.text-yellow, .text-yellow-hover:hover, .text-color-hover:hover .text-yellow-hover:not(.text-color-hover) {
	--text-color:#FEC72E;
	/*color:var(--text-color);*/
}

.text-orange, .text-orange-hover:hover, .text-color-hover:hover .text-orange-hover:not(.text-color-hover) {
	--text-color:#FF8A00;
}

.text-red, .text-red-hover:hover, .text-color-hover:hover .text-red-hover:not(.text-color-hover) {
	--text-color:hsla(360, 75%, 52%, 1.0);
}

.text-green, .text-green-hover:hover, .text-color-hover:hover .text-green-hover:not(.text-color-hover) {
	--text-color:rgba(73, 142, 15, 1);
}


.text-default, .text-default-hover:hover, .text-color-hover:hover .text-default-hover:not(.text-color-hover) {
	--text-color:var(--text-color-default);
	/*color:var(--text-color);*/
}

.text-color, .text-color-hover:hover, .text-color-hover:hover .text-color-hover-parents {
	color:var(--text-color);
}


.text-outline, .text-outline-hover:hover {
	/*--text-outline-width-minus: calc(var(--text-outline-width, 1px) * -1);
	text-shadow:
	var(--text-outline-width-minus, -1px) var(--text-outline-width-minus, -1px) 0 var(--text-outline-color, #000),
	0 var(--text-outline-width-minus, -1px) 0 var(--text-outline-color, #000),
	var(--text-outline-width, 1px) var(--text-outline-width-minus, -1px) 0 var(--text-outline-color, #000),
	var(--text-outline-width, 1px)  0 0 var(--text-outline-color, #000),
	var(--text-outline-width, 1px) var(--text-outline-width, 1px) 0 var(--text-outline-color, #000),
	0 var(--text-outline-width, 1px) 0 var(--text-outline-color, #000),
	var(--text-outline-width-minus, -1px) var(--text-outline-width, 1px) 0 var(--text-outline-color, #000),
	var(--text-outline-width-minus, -1px) 0 0 var(--text-outline-color, #000);*/

	/*text-shadow: calc(var(--text-outline-width) * 1) calc(var(--text-outline-width) * 0) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * 0.9239) calc(var(--text-outline-width) * 0.3827) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * 0.7071) calc(var(--text-outline-width) * 0.7071) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * 0.3827) calc(var(--text-outline-width) * 0.9239) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) * 1) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * -0.3827) calc(var(--text-outline-width) * 0.9239) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * -0.7071) calc(var(--text-outline-width) * 0.7071) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * -0.9239) calc(var(--text-outline-width) * 0.3827) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * -1) calc(var(--text-outline-width) * 0) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * -0.9239) calc(var(--text-outline-width) * -0.3827) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * -0.7071) calc(var(--text-outline-width) * -0.7071) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * -0.3827) calc(var(--text-outline-width) * -0.9239) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) * -1) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * 0.3827) calc(var(--text-outline-width) * -0.9239) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * 0.7071) calc(var(--text-outline-width) * -0.7071) 0
	var(--text-outline-color),
	calc(var(--text-outline-width) * 0.9239) calc(var(--text-outline-width) * -0.3827) 0
	var(--text-outline-color);*/

	text-shadow:0 0 var(--text-outline-width) var(--text-outline-color),
	0 0 var(--text-outline-width) var(--text-outline-color),
	0 0 var(--text-outline-width) var(--text-outline-color),
	0 0 var(--text-outline-width) var(--text-outline-color),
	0 0 var(--text-outline-width) var(--text-outline-color),
	0 0 var(--text-outline-width) var(--text-outline-color),
	0 0 var(--text-outline-width) var(--text-outline-color),
	0 0 var(--text-outline-width) var(--text-outline-color);

}

.block {
	display:block;
}

.row.narrow {
	margin-left:-3px;
	margin-right:-3px;
}

.row.narrow > *[class*="col-"] {
	padding-left:3px;
	padding-right:3px;
}

.row.flex {
	display:flex;
	flex-flow:row wrap;
	align-items:stretch;
	position:relative;
}

.row.flex > *[class*="col-"] {
	float:none;
	position:relative;
	min-height:1px;
	/*flex-shrink: 0;
	flex-grow: 0;*/
}

.box {
	--box-padding-default:20px;
	--box-padding:var(--box-padding-default);
	border-radius:var(--border-radius);
	padding:var(--box-padding);
	display:block;
	--text-color:var(--text-color-default);
	/*margin-bottom:32px;*/
	margin-bottom:24px;
	--box-bg-opacity:1;
}

.box.disabled,
.box:disabled,
.box[disabled] {
	pointer-events:none;
	opacity:0.55;
	cursor:not-allowed;
}

.box-narrow {
	--box-padding:6px;
}


.box-white {
	background-color:rgba(255, 255, 255, var(--box-bg-opacity, 1));
}

.box-blue {
	background-color:rgba(181, 208, 236, var(--box-bg-opacity, 1));

}

.box-dark-blue,
a.box-dark-blue,
.box-hover-dark-blue:hover {
	background-color:rgba(14, 23, 65, var(--box-bg-opacity, 1));
	--text-color:#ffffff;
	--link-hover-color:var(--text-color);
	color:var(--text-color);

	--pretty-switch-check-color:rgba(255, 255, 255, 1);
	--pretty-switch-uncheck-color:rgba(255, 255, 255, 0.6);
}

/*.box-dark-blue a,
.box-dark-blue a:active,
.box-dark-blue a:focus,
.box-dark-blue a:hover{
	--text-color:var(--text-color);
	color:var(--text-color);
}*/

.box-solid-blue,
a.box-solid-blue,
.box-hover-solid-blue:hover {
	background-color:hsla(216, 52%, 62%, var(--box-bg-opacity, 1));
	--text-color:#ffffff;
	--link-hover-color:var(--text-color);
	color:var(--text-color);
}

.box-green,
.box-hover-green:hover {
	background-color:rgba(73, 142, 15, var(--box-bg-opacity, 1));
	--text-color:#ffffff;
	color:var(--text-color);
}

.box-green .text-green {
	--text-color:inherit;
}


.box-red,
.box-hover-red:hover {
	background-color:hsla(360, 75%, 52%, var(--box-bg-opacity, 1));
	--text-color:#ffffff;
	color:var(--text-color);
}

.box-gray,
.box-hover-gray:hover {
	background-color:hsla(0, 0%, 90%, var(--box-bg-opacity, 1));
	--text-color:var(--text-color-default);
	color:var(--text-color);
}


.box-transparent,
.box-hover-transparent:hover {
	background-color:transparent;
	margin-bottom:0;
}

.box-rgb {
	--box-rgb-r:255;
	--box-rgb-g:255;
	--box-rgb-b:255;
	background-color:rgba(var(--box-rgb-r), var(--box-rgb-g), var(--box-rgb-b), var(--box-bg-opacity, 1));
}

.box-row > *[class*="col-"] {
	/*margin-bottom:32px;*/
	margin-bottom:24px;
}

.box-row.narrow > *[class*="col-"] {
	margin-bottom:6px;
}

.box-row > *[class*="col-"] > .box {
	height:100%;
	margin-bottom:0;
}

.box .box-header-media {
	--bhm:calc(var(--box-padding) * -1);
	margin:var(--bhm) var(--bhm) var(--box-padding) var(--bhm);
	border-radius:var(--border-radius) var(--border-radius) 0 0;
	overflow:hidden;
}

.box.box-zero-padding {
	--box-padding:0;
	/*padding:0;*/
	overflow:hidden;
}

.box.box-zero-padding .box-content {
	--box-padding:var(--box-padding-default);
	padding:0 var(--box-padding) 0 var(--box-padding);
}

.box .box-content-zero-padding {
	margin:0 calc(var(--box-padding) * -1) 0 calc(var(--box-padding) * -1);
	padding:0;
}

.box h3:first-child,
.box .h3:first-child {
	margin-top:0;
}

ol {
	list-style:none;
	padding-left:3em;
}

ol > li {
	counter-increment:item;
	position:relative;
}

ol > li:before {
	content:counter(item);
	/*margin-left:-3em;*/
	right:100%;
	font-size:var(--font-size-big);
	/*width:3em;*/
	padding-right:1.0em;
	position:absolute;
	display:inline-block;
	text-align:right;
	font-weight:var(--font-weight-semi-bold);
}

ol > li::marker {
	font-weight:var(--font-weight-semi-bold);
}

.btn {
	border-radius:var(--border-radius);
}

.btn .btn-green {
	--text-color:#ffffff;
	background-color:#498E0F;
	border-color:#498E0F;
}

.btn-green:focus,
.btn-green.focus {
	color:#fff;
	background-color:#5c8c31;
	border-color:#498E0F;
}

.btn-green:hover {
	color:#fff;
	background-color:#5c8c31;
	border-color:#498E0F;
}

.btn-green:active,
.btn-green.active {
	color:#fff;
	background-color:#5c8c31;
	border-color:#498E0F;
}

/* ########## app-nav ########## */

:root {
	/*--app-nav-height:100;*/
	--app-nav-height:48;
	--app-nav-height-px:calc(var(--app-nav-height) * 1px);
	--app-nav-line-height:40;
	--app-nav-line-height-px:calc(var(--app-nav-line-height) * 1px);
	--app-nav-li-padding-left:16;
	--app-nav-li-padding-left-px:calc(var(--app-nav-li-padding-left) * 1px);
	--app-nav-text-color:#ffffff;
}

.logged-out {
	--app-nav-height:100;
	--app-nav-height-px:calc(var(--app-nav-height) * 1px);
}

/*
nav.app-nav * {
	border:1px solid #00ff00;
}*/
nav.app-nav {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:var(--app-nav-height-px);
	background-color:rgba(14, 23, 65, 1);

	--text-color:#ffffff;
	color:var(--text-color);

	line-height:var(--app-nav-line-height-px);
	padding:0;

	white-space:nowrap;
	z-index:1000;

	transition:all 500ms ease-in-out;
}


nav.app-nav .app-nav-groups {
	padding-top:calc((var(--app-nav-height) - (var(--app-nav-line-height) + 8/*padding-bottom*/)) * 1px);
}

.app-nav-spacer {
	height:var(--app-nav-height-px);
	transition:all 500ms ease-in-out;
}


nav.app-nav ul {
	padding:0;
	margin:0;
	list-style:none;
	position:relative;
}

nav.app-nav a {
	/*color:inherit;*/
	/*color:var(--text-color);*/
	--text-color:var(--app-nav-text-color);
	text-decoration:none;
	font-weight:inherit;
	font-style:normal;
}

nav.app-nav a:hover,
nav.app-nav a:active,
nav.app-nav a:focus,
nav.app-nav li.focus > a,
nav.app-nav li.focus > .a {
	/*text-decoration:underline;*/
}

nav.app-nav ul ul a {
	display:block;
}

nav.app-nav ul ul a.inline {
	display:inline-block;
}

nav.app-nav .icon-bar {
	background-color:#ffffff;
}

nav.app-nav ul.app-nav-group {
	float:left;
}

nav.app-nav ul.app-nav-group.right {
	float:right;
}

nav.app-nav ul.app-nav-group li {
	cursor:pointer;
}

nav.app-nav ul.app-nav-group > li {
	position:relative;
	display:inline-block;
	line-height:var(--app-nav-line-height-px);
	padding-bottom:8px;
	margin-right:8px;
}

nav.app-nav ul.app-nav-group.right > li {
	margin-right:0;
	margin-left:8px;
}

nav.app-nav ul.app-nav-group > li > ul {
	position:absolute;
	top:100%;
	left:0;
	padding-bottom:8px;
	display:none;
	text-align:left;
}

/* use only .collapse sub items inside this */
nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
	overflow:visible;
	overflow-x:visible;
	overflow-y:auto;
	/*max-height:380px;*/
	max-height:calc(100vh - (var(--app-nav-height-px) + 32px)); /* 100% of window height - nav-bar - 32px to bottom*/
}

/*
@media (min-height: 200px) {
	nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
		max-height:120px;
	}
}
@media (min-height: 300px) {
	nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
		max-height:200px;
	}
}
@media (min-height: 400px) {
	nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
		max-height:280px;
	}
}
@media (min-height: 500px) {
	nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
		max-height:380px;
	}
}

@media (min-height: 600px) {
	nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
		max-height:480px;
	}
}
@media (min-height: 700px) {
	nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
		max-height:580px;
	}
}

@media (min-height: 800px) {
	nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
		max-height:680px;
	}
}

@media (min-height: 900px) {
	nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
		max-height:780px;
	}
}
@media (min-height: 1000px) {
	nav.app-nav ul.app-nav-group > li ul.scroll-overflow {
		max-height:880px;
	}
}
 */

nav.app-nav ul.app-nav-group.right > li > ul {
	left:auto;
	right:0;
	text-align:right;
}

nav.app-nav ul.app-nav-group.hover-nav > li:hover > ul,
	/*nav.app-nav ul.app-nav-group > li:active > ul,*/
	/*nav.app-nav ul.app-nav-group > li:focus > ul,*/
nav.app-nav ul.app-nav-group > li.focus > ul {
	display:block;
}

nav.app-nav ul.app-nav-group > li ul > li.hasSub > ul {
	position:absolute;
	top:0;
	left:100%;
	padding-bottom:8px;
	/*margin-left:-8px;*/
	display:none;
}

nav.app-nav ul.app-nav-group > li ul > li.collapse > ul {
	display:none;
	z-index:20;
}

nav.app-nav ul.app-nav-group > li ul > li.collapse.focus > ul {
	display:block;
}

nav.app-nav ul.app-nav-group.right > li ul > li.hasSub > ul {
	left:auto;
	right:100%;
	/*margin-left:0;
	margin-right:-8px;*/
}

nav.app-nav ul.app-nav-group > li > ul {
	background-color:rgba(110, 150, 209, 1.0);
	box-shadow:3px 3px 6px rgba(0, 0, 0, .5);
	border-radius:0 0 8px 8px;
}

nav.app-nav ul.app-nav-group > li ul > li {
	display:block;
	position:relative;
	padding:0;
}

nav.app-nav ul.app-nav-group > li ul > li > a,
nav.app-nav ul.app-nav-group > li ul > li > .a {
	padding:2px var(--app-nav-li-padding-left-px) 2px var(--app-nav-li-padding-left-px);
}

nav.app-nav ul.app-nav-group.right > li ul > li {
	padding:0;
}

nav.app-nav ul.app-nav-group.right > li ul > li > a,
nav.app-nav ul.app-nav-group.right > li ul > li > .a {
	padding:2px var(--app-nav-li-padding-left-px) 2px var(--app-nav-li-padding-left-px);
}

nav.app-nav ul.app-nav-group > li ul > li.hasSub > ul {
	background-color:rgba(110, 150, 209, 1.0);
	box-shadow:3px 3px 6px rgba(0, 0, 0, .5);
	/*border-radius:0 8px 8px 0;*/
	border-radius:8px;
}

nav.app-nav ul.app-nav-group > li li.hasSub:after {
	content:">";
	display:block;
	position:absolute;
	right:0;
	top:0;
}

nav.app-nav ul.app-nav-group.right > li li.hasSub:after {
	content:"<";
	right:auto;
	left:0;
}

nav.app-nav ul.app-nav-group > li li.collapse > .a:after
	/*nav.app-nav ul.app-nav-group > li li.collapse:after*/
{
	/*font-family: 'Glyphicons Halflings';*/
	/*content:"\e114";*/
	font-family:'Glyphicons Regular';
	/*chevron-down*/
	content:"\E602";
	font-style:normal;
	font-weight:normal;
	margin-left:4px;
	/*
	display:block;
	position:absolute;
	right:3px;
	top:0;*/
}

nav.app-nav ul.app-nav-group > li li.collapse.focus > .a:after
	/*nav.app-nav ul.app-nav-group > li li.collapse.focus:after*/
{
	/*chevron-left*/
	/*content:"\E225";*/
	/*chevron-right*/
	content:"\E224";
}


nav.app-nav ul.hover-nav li:hover > ul,
nav.app-nav ul.app-nav-group > li ul > li.hover-nav:hover > ul,
	/*nav.app-nav ul.app-nav-group > li > ul li:active > ul,*/
	/*nav.app-nav ul.app-nav-group > li > ul li:focus > ul,*/
nav.app-nav ul.app-nav-group > li > ul li.focus > ul {
	display:block;
}

nav.app-nav ul.app-nav-group > li > ul {
	z-index:10;
}

nav.app-nav ul.app-nav-group > li > ul ul {
	z-index:-1;
	/*background-color:red;*/
}

nav.app-nav ul.app-nav-group > li > ul ul ul {
	z-index:-2;
	/*background-color:green;*/
}

nav.app-nav ul.app-nav-group > li > ul ul ul ul {
	z-index:-3;
	/*background-color:purple;*/
}

nav.app-nav ul.app-nav-group ul.indent-1 > li > a,
nav.app-nav ul.app-nav-group ul.indent-1 > li > .a {
	padding-left:calc((var(--app-nav-li-padding-left) * 2) * 1px);
}

nav.app-nav ul.app-nav-group.right ul.indent-1 > li > a,
nav.app-nav ul.app-nav-group.right ul.indent-1 > li > .a {
	padding-right:calc((var(--app-nav-li-padding-left) * 2) * 1px);
}

nav.app-nav ul.app-nav-group ul.indent-2 > li > a,
nav.app-nav ul.app-nav-group ul.indent-2 > li > .a {
	padding-left:calc((var(--app-nav-li-padding-left) * 3) * 1px);
}

nav.app-nav ul.app-nav-group.right ul.indent-2 > li > a,
nav.app-nav ul.app-nav-group.right ul.indent-2 > li > .a {
	padding-right:calc((var(--app-nav-li-padding-left) * 3) * 1px);
}

nav.app-nav #navbar-notification-list {
	/*padding-left:var(--app-nav-li-padding-left-px);
	padding-right:var(--app-nav-li-padding-left-px);*/
	text-align:left;
	min-width:66vw;
	margin-top:10px;
	white-space:normal;
}

nav.app-nav .notification-item,
.notification-list .notification-item {
	padding-left:var(--app-nav-li-padding-left-px);
	padding-right:var(--app-nav-li-padding-left-px);
	padding-top:6px;
	padding-bottom:6px;
	font-size:var(--font-size-small);
	line-height:1.1;
	width:100%;
	display:block;


}

nav.app-nav .notification-item:hover,
.notification-list .notification-item:hover {
	background-color:rgba(255, 255, 255, 0.1);
}

nav.app-nav .notification-item:after,
.notification-list .notification-item:after {
	content:"";
	display:table;
	line-height:0;
	height:0;
	clear:both;
}

/*nav.app-nav .notification-item:before {
	content:"";
	width:12%;
	left:50%;
	transform:translateX(-50%);
	display:block;
	position:absolute;
	bottom:0;
	line-height:0;
	height:0;
	border-bottom:1px solid rgba(255, 255, 255, 0.4);
}*/

nav.app-nav .notification-item.unread,
.notification-list .notification-item.unread {
	/*background-color:#fcf8e3;
	color:#333 !important;*/
	/*font-size:var(--font-size-normal);*/
	font-weight:var(--font-weight-semi-bold);
}

nav.app-nav .notification-item.unseen,
.notification-list .notification-item.unseen {
	/*background-color:#d9edf7;
	color:#333 !important;*/
	/*font-size:var(--font-size-normal);*/
	font-weight:var(--font-weight-semi-bold);
	/*font-weight:var(--font-weight-bold);*/
}

nav.app-nav .notification-item-icon,
.notification-list .notification-item-icon {
	width:50px;
	height:50px;
	border-radius:50%;

	/*background-color:#ffffff;*/
	background-size:60% auto;
	background-position:center center;
	background-repeat:no-repeat;

	float:left;
	margin-right:8px;
	/*display:table-cell;*/
}

nav.app-nav .notification-item-icon[style*="mitarbeiter/dokumente/"],
.notification-list .notification-item-icon[style*="mitarbeiter/dokumente/"] {
	background-size:100% auto;
	margin-top:0.5em;
}

nav.app-nav .notification-item-title,
.notification-list .notification-item-title {
	padding-top:8px;
	float:left;
	width:calc(100% - (50px + 20px));
	vertical-align:center;
}

nav.app-nav .notification-item-timestamp,
.notification-list .notification-item-timestamp {
	font-weight:normal;
	font-size:calc(var(--font-size-normal) * 0.6);
	text-align:left;
	margin-top:6px;
	display:block;
	color:var(--text-color-default);
}

nav.app-nav .online-status-icon {
	position:absolute;
	right:15px;
	top:8px;
	z-index:2;
}

nav.app-nav .main-nav-home {
	position:absolute;
	left:15px;
	top:8px;
	z-index:2;
	cursor:pointer;
}

nav.app-nav .app-nav-logo {
	position:absolute;
	left:15px;
	top:8px;
	z-index:2;
}

nav.app-nav .app-nav-logo.right {
	left:auto;
	right:15px;
}

nav.app-nav .app-nav-logo > img {
	height:2em;
}

nav.app-nav li .list-group {
	color:var(--text-color-default);
}

nav.app-nav #navbar-offlineData {
	min-width:66vw;
	padding:0 16px;
}

.offlineData-count-badge {
	position:relative;
	vertical-align:baseline;
	top:-9px;
	left:-3px;
	font-size:75%;
	line-height:75%;
}

/*.offlineData-count-badge.uploading {
	animation: offlineData-count-badge-uploading 1600ms linear infinite;
	background-image: linear-gradient(90deg,#5bb85d,#ffffff,#5bb85d,#ffffff);
	background-size: 300% 100%;
}*/

/*.offlineData-count-badge.uploading:after*/
#app-nav-offlineData.uploading:after {
	content:"";
	position:absolute;
	left:0;
	bottom:12px;

	display:block;
	width:1.2em;
	height:3px;
	line-height:1px;
	border-radius:10px;
	animation:offlineData-count-badge-uploading 1600ms linear infinite;
	background-image:linear-gradient(90deg, #5bb85d, #ffffff, #5bb85d, #ffffff);
	background-size:300% 100%;
}

@keyframes offlineData-count-badge-uploading {
	0% { background-position:100% 0%; }
	100% { background-position:0% 0%; }
}


.app-nav-toggle {
	/*--text-color:var(--app-nav-text-color);*/
	color:var(--app-nav-text-color);
	position:fixed;
	z-index:1001;
	background:none;
	width:32px;
	height:32px;
	line-height:28px;
	font-size:16px;
	cursor:pointer;
	text-align:center;
	display:none;
	/*top:8px;
	left:8px;*/
	top:auto;
	left:8px;
	bottom:8px;
	opacity:0.15;
}

.app-nav-toggle:hover {
	opacity:1.0;
}

.app-nav-toggle .app-nav-toggle-icon {
	width:100%;
	height:100%;
	border:2px solid var(--text-color);
	background-color:white;
	border-radius:50%;
}

.app-nav-toggle .o {
	display:none;
}

.app-nav-toggle .c {
	display:block;
}

.nav-hidden .app-nav-toggle .o {
	display:block;
}

.nav-hidden .app-nav-toggle .c {
	display:none;
}

.nav-hidden .app-nav-toggle {
	--text-color:var(--text-color-default);
	/*mix-blend-mode:difference;*/
	/*background-blend-mode:difference;*/
	display:block;

}

.nav-hidden .app-nav-toggle .app-nav-toggle-icon {

}


.online nav.app-nav .online-status-icon.glyphicons {
	color:#5cb85c;
}

.offline nav.app-nav .online-status-icon.glyphicons {
	color:#d9534f;
}


.nav-hidden #main-nav-spacer {
	height:0;
}

.nav-hidden nav#main-nav {
	top:calc(var(--app-nav-height-px) * -1);
}

.logged-out nav#main-nav {
	display:none !important;
}

nav#public-main-nav {
	display:none;
}

.logged-out nav#public-main-nav {
	display:block;
}

.nav-hidden nav#public-main-nav {
	top:calc(var(--app-nav-height-px) * -1);
}


#game-notification-count-badge.badge {
	background-color:#e23326;
	color:#ffffff;
	/*animation: notification-badge-blink 3s linear infinite;*/
}

@keyframes notification-badge-blink {
	0% {background-color:#e23326; color:#ffffff;}
	50% {background-color:#ffffff; color:#e23326;}
	100% {background-color:#e23326; color:#ffffff;}
}

/* ########## app-nav ########## */


.achievement-wrap {
	width:100%;
	padding:0.5em;
}

.achievement-wrap.locked {
	opacity:0.5;
	pointer-events:none;
	cursor:not-allowed;

}

.achievement-wrap .achievement-inner {
	padding-bottom:100%;
}

.achievement-wrap .achievement-icon {
	position:absolute;

	/*top:0.5em;
	left:0.5em;
	width:calc(100% - 1em);
	height:calc(100% - 1em);*/
	top:10%;
	left:10%;
	width:80%;
	height:80%;


	border-radius:50%;
	background-color:var(--achivement-circle-color);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:60% auto;
	background-origin:border-box;
	background-image:var(--achivement-icon);
}

.achievement-wrap .achievement-stars {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	background-origin:border-box;
	background-image:url("../img/trophies/trophy-blank-1.svg");
}

.achievement-wrap .achievement-stars[data-stars="1"] {
	background-image:url("../img/trophies/trophy-blank-1.svg");
}

.achievement-wrap .achievement-stars[data-stars="2"] {
	background-image:url("../img/trophies/trophy-blank-2.svg");
}

.achievement-wrap .achievement-stars[data-stars="3"] {
	background-image:url("../img/trophies/trophy-blank-3.svg");
}

.achievement-wrap .achievement-stars[data-stars="4"] {
	background-image:url("../img/trophies/trophy-blank-4.svg");
}

.achievement-wrap .achievement-stars[data-stars="5"] {
	background-image:url("../img/trophies/trophy-blank-5.svg");
}

.achievement-wrap .achievement-todo {
	position:absolute;
	left:0;
	bottom:0;
	width:50%;
	height:50%;
	padding:0;
	margin:0;
	line-height:0;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 100%;
	background-origin:border-box;
	background-image:url("../img/trophies/trophy-todo.svg");
	/*border:1px solid green;*/
}

.achievement-wrap .achievement-xp {
	position:absolute;
	right:10%;
	top:10%;
	width:20%;
	height:20%;
	border-radius:50%;
	--achievement-xp-color:#ffffff;
	color:var(--achievement-xp-color);
	background-color:var(--text-color-default);
	padding:0;
	margin:0;
	line-height:0;
}

.achievement-wrap.todo .achievement-xp {
	background-color:var(--achivement-circle-color);
	--achievement-xp-color:var(--text-color-default);
}

.achievement-wrap .achievement-xp.bottom-right {
	right:10%;
	top:auto;
	bottom:10%;
}

.achievement-wrap .achievement-xp.bottom-left {
	right:auto;
	top:auto;
	left:10%;
	bottom:10%;
}

.achievement-wrap .achievement-xp.top-left {
	right:auto;
	bottom:auto;
	top:10%;
	left:10%;
}

.achievement-wrap .achievement-xp svg {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	position:relative;
	display:block;
}

.achievement-wrap .achievement-xp svg .xp-text:before {
	content:"123";
}


.achievement-wrap .__achievement-xp:before {
	/* content:url("data:image/svg+xml;charset=UTF-8,<svg viewBox='0 0 200 100' preserveAspectRatio='xMinYMid meet' style='width:100%; height:100%;' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><text x='50%' y='50%' style='font-size:120px; fill:#ffffff; text-align:center; font-family:inherit; text-anchor:middle; alignment-baseline:middle;'>77</text></svg>");*/
	/*content: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 100" preserveAspectRatio="xMinYMid meet" style="width:100%25; height:100%25;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Ctext x="50%25" y="50%25" style="font-size:120px; fill:%23ffffff; text-align:center; font-family:inherit; text-anchor:middle; alignment-baseline:middle;"%3E77%3C/text%3E%3C/svg%3E');*/
	content:url('data:image/svg+xml,%3Csvg viewBox="0 0 200 100" preserveAspectRatio="xMinYMid meet" style="width:100%25; height:100%25;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Ctext x="50%25" y="50%25" style="font-size:120px; fill:%23ffffff; text-align:center; font-family:Arial; text-anchor:middle; alignment-baseline:middle;"%3EXX%3C/text%3E%3C/svg%3E');

	display:block;
	width:100%;
	height:100%;
}

.achievement-wrap .__achievement-xp svg > text {
	display:inline;
	content:var(--achievement-xp);
}

/*
.achievement-wrap .achievement-xp svg > text:before {
	content:var(--achievement-xp);
	display:inline;
	fill:var(--achievement-xp-color);
}
*/
.achievement-wrap .achievement-name {
	font-size:var(--font-size-small);
	font-weight:var(--font-weight-semi-bold);
	text-align:center;
	hyphens:auto;
}


#achievements-overview .box {
	margin-bottom:0px;
	height:100%;
}

#achievements-overview .row.narrow > *[class*="col-"] {
	margin-bottom:6px;
}


.splide {
	margin-bottom:32px;
}

.splide .splide__arrows {
	position:initial;
}

.splide .splide__arrows {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	display:none;
}

.splide.splide--arrows {
	padding-bottom:32px;
}

.splide.splide--arrows .splide__arrows {
	display:block;
}

.splide .splide__arrow {
	background-color:transparent;
	/*background-repeat:no-repeat;
	background-size:auto 100%;*/
	line-height:0;
	width:auto;
	height:auto;

	/*position:relative;*/
	top:auto;
	transform:none;
	bottom:0;
	display:block;
}

.splide .splide__arrow.splide__arrow--prev {
	/*background-image:url("../img/icons/arrow-left.svg");*/
}

.splide .splide__arrow:before {
	display:block;
	height:100%;
	width:auto;
}

.splide .splide__arrow.splide__arrow--prev:before {
	content:url("../img/icons/arrow-left.svg");
}

.splide .splide__arrow.splide__arrow--next:before {
	content:url("../img/icons/arrow-right.svg");
}

.splide--invisible-clones .splide__slide--clone {
	visibility:hidden;
}

/*#dashboard-profile-img {
	width:25%;
}*/


/* ########## Survey & Quiz ########## */

:root {
	--survey-footer-height:5em;
	--survey-control-btn-height:2.4em;
	--survey-header-height:0px;
}

.survey {
	background-color:#ffffff;
	border-radius:var(--border-radius);
	box-shadow:3px 3px 6px rgba(0, 0, 0, .5);
	margin-top:20px;
	color:var(--text-color);
}

.survey .survey-header {
	position:relative;
	display:none;
	width:100%;
	/*border:1px solid red;*/
	border-radius:var(--border-radius) var(--border-radius) 0 0;
	padding:10px 32px 10px 32px;

}

.survey.show-header .survey-header {
	display:block;
}

.survey .survey-header .survey-header-media {
	width:auto;
	border-radius:var(--border-radius) var(--border-radius) 0 0;
	margin:-10px -32px -10px -32px;
	overflow:hidden;
}

.survey-pages {

}

.survey fieldset.survey-page {
	margin:0;
	border:0;
}

.survey .survey-page {
	display:none;
	/*min-height:80vh;*/
	min-height:calc(90vh - var(--app-nav-height-px));
	padding:32px;
	position:static;
}

.survey.has-header.show-header .survey-page {
	min-height:calc(90vh - (var(--app-nav-height-px) + var(--survey-header-height)));
}

.survey .survey-page.show-survey-header,
.survey .survey-page.hide-survey-header {}

.survey .survey-page .container {
	width:74%;
	margin-left:auto;
	margin-right:auto;
}

.survey .survey-page .survey-page-top-media {
	margin:-32px -32px 32px -32px;
	padding:0;
	border-radius:var(--border-radius) var(--border-radius) 0 0;
	overflow:hidden;
}

.survey .survey-page .survey-page-top-media > img {
	width:100%;
}


.survey .survey-page.has-footer {
	/*margin-bottom:var(--survey-footer-height);*/
	padding-bottom:calc(var(--survey-footer-height) + 32px);
}

.survey .survey-page.active {
	display:block;
}

.survey .survey-page .survey-page-footer {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:var(--survey-footer-height);

}

.survey .survey-page .survey-page-no,
.survey .survey-page .survey-page-no-static {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
}

.survey .survey-page .survey-page-footer .survery-btn-next,
.survey .survey-page .survey-page-footer .survery-btn-prev {
	position:absolute;
	border:none;
	--text-color:#ffffff;
	color:var(--text-color);
	top:50%;
	transform:translateY(-50%);
	height:var(--survey-control-btn-height);
	line-height:var(--survey-control-btn-height);
	outline:none;
}

.survey .survey-page .survey-page-footer .survery-btn-next:active,
.survey .survey-page .survey-page-footer .survery-btn-next:focus,
.survey .survey-page .survey-page-footer .survery-btn-prev:active,
.survey .survey-page .survey-page-footer .survery-btn-prev:focus {
	outline:none;
}

.survey .survey-page .survey-page-footer .survery-btn-next {
	right:0;
	left:auto;
	background-color:green;
	/*border-radius:var(--border-radius) 0 0 var(--border-radius);*/
	border-radius:calc(var(--survey-control-btn-height) / 2) 0 0 calc(var(--survey-control-btn-height) / 2);
	padding-left:2.5em;
	padding-right:2.0em;
}

.survey .survey-page .survey-page-footer .survery-btn-prev {
	right:auto;
	left:0;
	background-color:red;
	/*border-radius:0 var(--border-radius) var(--border-radius) 0;*/
	border-radius:0 calc(var(--survey-control-btn-height) / 2) calc(var(--survey-control-btn-height) / 2) 0;
	padding-left:2.0em;
	padding-right:2.5em;

}

.survey-quiz-question {
	margin-left:-16px;
	margin-right:-16px;
	margin-bottom:32px;
	padding:16px;
	border:1px solid transparent;
	border-radius:var(--border-radius);
}

.survey-quiz-question.incomplete {
	border:1px solid #faebcc;
}

.survey-quiz-question .question {
	font-weight:var(--font-weight-semi-bold);
}

.survey-quiz-question .subText {
	font-size:var(--font-size-small);
	margin-bottom:16px;
}

.survey-quiz-question .subText:empty {
	display:none;
}

.survey-quiz-question .choice-info {
	font-size:var(--font-size-small);
}

.survey-quiz-question-input-wrap {
	border:1px solid transparent;
	text-align:left;
	margin-bottom:6px;
	padding:3px 8px;
	border-radius:var(--border-radius);
}

.survey-quiz-question-input-wrap label {
	font-weight:normal;
	display:block;
}

.survey-quiz-question-input-wrap.correct {
	border:1px solid #d6e9c6;
}

.survey-quiz-question-input-wrap.wrong {
	border:1px solid #b94a48;
}

.survey-quiz-question-pageResponse {
	border-radius:var(--border-radius);
	border:1px solid #faebcc;
	background-color:#fcf8e3;
	color:#c09853;
	padding:8px;
	font-size:var(--font-size-small);
}

.survey-quiz-question-pageResponse:empty {
	display:none;
}

#survey-modal .modal-dialog {
	width:80%;
	margin-left:auto;
	margin-right:auto;
	margin-top:3em;
}

#survey-modal .modal-content {
	border-radius:var(--border-radius);
}

#survey-modal .modal-body {
	padding:0;
}

#survey-modal .container {
	padding:0;
	margin:-1px;
}

#survey-modal .survey {
	margin-top:0;
}

.survey .survey-modal-close {
	display:none;
	position:absolute;
	top:-0.75em;
	right:-0.75em;
	height:1.5em;
	width:1.5em;
	line-height:0;
	z-index:1100;
	padding:0;
	margin:0
}

.survey .survey-modal-close button {
	display:block;
	height:1.5em;
	width:1.5em;
	line-height:0;
	text-align:center;
	border-radius:50%;
	/*background-color:rgba(14, 23, 65, 1);*/
	background-color:rgba(110, 150, 209, 1.0);
	color:#ffffff;
	border:3px solid #ffffff;
	padding:0;
	margin:0;
	font-weight:var(--font-weight-bold);
	cursor:pointer;
}

.survey .survey-modal-close button:empty:before {
	content:"\2715";
	display:inline;
}

#survey-modal .survey .survey-modal-close {
	display:block;
}

.survey .x-disabled {
	display:none;
}

.login-top-bar {
	position:fixed;
	top:0;
	left:0;
	height:60px;
	width:100%;
	background-color:rgba(14, 23, 65, 1);
	--text-color:#ffffff;
}

.login-top-bar-spacer {
	height:100px;
}

.btn-controls {
	height:4em;
	position:relative;
	display:block;
}

.box > .btn-controls {
	margin-left:calc(var(--box-padding) * -1);
	margin-right:calc(var(--box-padding) * -1);

}

.box > *:last-child.btn-controls {
	margin-bottom:calc(var(--box-padding) * -1);
}

.control-btn {
	font-size:var(--font-size-normal);
	--btn-height:2.0em;
	--btn-border-radius:calc(var(--btn-height) / 2);
	display:inline-block;
	border:none;
	--text-color:#ffffff;
	color:var(--text-color);
	height:var(--btn-height);
	line-height:var(--btn-height);
	outline:none;
	--btn-bg-h:216;
	--btn-bg-s:52%;
	--btn-bg-l:62%;
	--btn-bg-a:1.0;
	background-color:hsla(var(--btn-bg-h), var(--btn-bg-s), var(--btn-bg-l), var(--btn-bg-a));
	padding-left:1.4em;
	padding-right:1.4em;
	border-radius:var(--btn-border-radius);

}

.control-btn.control-btn-slim {
	padding-left:0.4em;
	padding-right:0.4em;
}

.btn-controls > .control-btn {
	display:block;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	outline:none;
}

.btn-controls > .control-btn.left,
.btn-controls > .control-btn-group.left {
	right:auto;
	left:0;
	padding-left:2.0em;
	padding-right:1.4em;
	border-radius:0 var(--btn-border-radius) var(--btn-border-radius) 0;
}

.btn-controls > .control-btn.right,
.btn-controls > .control-btn-group.right {
	left:auto;
	right:0;
	padding-left:1.4em;
	padding-right:2.0em;
	border-radius:var(--btn-border-radius) 0 0 var(--btn-border-radius);
}

/*.btn-controls > .control-btn-group > .control-btn {
	display:inline-block;
	position:initial;
	top:unset;
	transform:unset;
}*/
.control-btn:hover {
	--text-color:#ffffff;
}

.control-btn:active,
.control-btn:focus {
	outline:none;
}

.control-btn-blue {
	--btn-bg-h:216;
	--btn-bg-s:52%;
	--btn-bg-l:62%;
	--btn-bg-a:1.0;
}

.control-btn-green {
	--btn-bg-h:93;
	--btn-bg-s:81%;
	--btn-bg-l:31%;
	--btn-bg-a:1.0;
}

.control-btn-red {
	--btn-bg-h:360;
	--btn-bg-s:75%;
	--btn-bg-l:52%;
	--btn-bg-a:1.0;
}

.control-btn-red:hover,
.control-btn-red:active,
.control-btn-red:focus {
	--btn-bg-l:40%;
}

.control-btn-white {
	--btn-bg-h:0;
	--btn-bg-s:0%;
	--btn-bg-l:100%;
	--btn-bg-a:1.0;
	--text-color:var(--text-color-default);
}

.control-btn-white:hover,
.control-btn-white:active,
.control-btn-white:focus {
	--btn-bg-l:90%;
	--text-color:var(--text-color-default);
}

.control-btn-gray {
	--btn-bg-h:0;
	--btn-bg-s:0%;
	--btn-bg-l:90%;
	--btn-bg-a:1.0;
	--text-color:var(--text-color-default);
}

.control-btn-gray:hover,
.control-btn-gray:active,
.control-btn-gray:focus {
	--btn-bg-l:80%;
	--text-color:var(--text-color-default);
}

.control-btn.small {
	font-size:var(--font-size-small);
}

.control-btn[disabled] {
	cursor:not-allowed;
	opacity:0.6;
}

.modal-body .btn-controls {
	margin-left:-15px;
	margin-right:-15px;
}

/* ########## Profile ########## */


.profile-header {
	background-size:100% auto;
	background-position:center center;
	background-repeat:no-repeat;
	background-image:url("../../../img/app/dummy-user.svg");

	width:100%;
	/*padding-bottom:50%;*/
	padding-bottom:25%;
	margin-bottom:2em;
}

.profile-header-stars {
	position:absolute;
	bottom:-0.7em;
	right:16px;
	width:100%;
	height:1.4em;
	background-repeat:no-repeat;
	background-position:right center;
	background-size:auto 100%;
	background-origin:border-box;
	background-image:url("../img/icons/stars-bar-1-5.svg");
}

.profile-header-stars[data-stars="1"] {
	background-image:url("../img/icons/stars-bar-1-5.svg");
}

.profile-header-stars[data-stars="2"] {
	background-image:url("../img/icons/stars-bar-2-5.svg");
}

.profile-header-stars[data-stars="3"] {
	background-image:url("../img/icons/stars-bar-3-5.svg");
}

.profile-header-stars[data-stars="4"] {
	background-image:url("../img/icons/stars-bar-4-5.svg");
}

.profile-header-stars[data-stars="5"] {
	background-image:url("../img/icons/stars-bar-5-5.svg");
}

#profile-header-img-edit-btn {
	display:block;
	position:absolute;
	right:15px;
	bottom:1.1em;
	height:40px;
	width:40px;
	line-height:35px;
	border-radius:50%;
	border:2px solid var(--text-color-default);
	background-color:#ffffff;
	text-align:center;
	cursor:pointer;
	opacity:0.4;
}

#profile-header-img-edit-btn:hover {
	opacity:1.0;
}

.profile-img-wrap #profile-header-img-edit-btn {
	top:10%;
	right:10%;
}

.team-splide-profile {

}

.team-splide-profile-img-wrap {
	padding-bottom:100%;
}

.team-splide-profile-img {
	position:absolute;
	top:10%;
	left:10%;
	width:80%;
	height:80%;

	border-radius:50%;
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:center center;
}

.team-splide-profile-online-bubble {
	position:absolute;
	right:12%;
	bottom:12%;
	width:15%;
	height:15%;
	border-radius:50%;
	background-color:red;
	padding:0;
	margin:0;
	line-height:0;
	/*display:none;*/ /* wird vorerst nicht benötigt */
}

.team-splide-profile-online-bubble.is-online {
	background-color:hsla(93, 81%, 31%, 1.0);
}

.team-splide-profile-online-bubble.is-offline {
	background-color:hsla(360, 75%, 52%, 1.0);
}

.team-splide-profile-name {
	text-align:center;
	font-size:var(--font-size-small);
}

.team-splide-profile-stars {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	background-origin:border-box;
	background-image:url("../img/trophies/trophy-blank-1.svg");
}

.team-splide-profile-stars[data-stars="1"] {
	background-image:url("../img/trophies/trophy-blank-1.svg");
}

.team-splide-profile-stars[data-stars="2"] {
	background-image:url("../img/trophies/trophy-blank-2.svg");
}

.team-splide-profile-stars[data-stars="3"] {
	background-image:url("../img/trophies/trophy-blank-3.svg");
}

.team-splide-profile-stars[data-stars="4"] {
	background-image:url("../img/trophies/trophy-blank-4.svg");
}

.team-splide-profile-stars[data-stars="5"] {
	background-image:url("../img/trophies/trophy-blank-5.svg");
}

/* ########## /Profile ########## */


.modal-dialog {
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:3em;
}

.modal .modal-content {
	border-radius:var(--border-radius);
}


.modal-close {
	display:none;
}

.modal .modal-close {
	display:block;
	position:absolute;
	top:-0.75em;
	right:-0.75em;
	height:1.5em;
	width:1.5em;
	line-height:0;
	z-index:1100;
	padding:0;
	margin:0
}

.modal .modal-close button {
	display:block;
	height:1.5em;
	width:1.5em;
	line-height:0;
	text-align:center;
	border-radius:50%;
	/*background-color:rgba(14, 23, 65, 1);*/
	background-color:rgba(110, 150, 209, 1.0);
	color:#ffffff;
	border:3px solid #ffffff;
	padding:0;
	margin:0;
	font-weight:var(--font-weight-bold);
	cursor:pointer;
}

.modal-close button:empty:before {
	content:"\2715";
	display:inline;
}

/* ########## Bootstrap ########## */

/* #### .form-control */
.form-control {
	background-color:var(--input-background-color);
	border:1px solid var(--input-border-color);
	border-radius:999px;
	font-size:var(--font-size-normal);
	/*color:var(--text-color-default);*/
	color:var(--input-text-color);
	font-weight:300;
}

select.form-control {
	padding:2px 12px;
}

textarea.form-control {
	border-radius:var(--border-radius);
	resize:none;
}

input[type="file"].form-control::file-selector-button,
input[type="file"].form-control::-webkit-file-selector-button {
	font-size:inherit;
	font-weight:inherit;
	font-family:inherit;
	border:0px solid transparent;
	background-color:transparent;
	/*height:100%;*/
	/*display:inline-block;*/
	/*margin-top:-6px;
	margin-bottom:-6px;
	margin-left:-12px;*/
	padding:0;
	width:0;
	overflow:hidden;
}

.form-control:focus {
	border-color:var(--input-border-color);
	outline:0;
	-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-control::-moz-placeholder {
	color:#999;
	opacity:1;
}

.form-control:-ms-input-placeholder {
	color:#999;
}

.form-control::-webkit-input-placeholder {
	color:#999;
}

.form-control::-ms-expand {
	background-color:transparent;
	border:0;
}

.form-control.required,
.form-control.required-star {
	--required-mark-color:var(--text-color-default);
	--required-mark-color:red;
	/*background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path style="fill:var(--required-mark-color, currentColor);" d="M417.1 368c-4.437 7.688-12.5 12-20.81 12c-4.062 0-8.188-1.031-11.97-3.219L248 297.6V456c0 13.25-10.75 24-23.1 24S200 469.3 200 456V297.6l-137.2 79.22C59 378.1 54.88 380 50.81 380c-8.312 0-16.37-4.312-20.81-12c-6.625-11.47-2.687-26.16 8.781-32.78L176 256l-137.2-79.22C27.31 170.2 23.38 155.5 29.1 144C36.59 132.6 51.28 128.5 62.78 135.2L200 214.4V56C200 42.75 210.8 32 224 32S248 42.75 248 56v158.4l137.2-79.22C396.8 128.5 411.4 132.6 417.1 144c6.625 11.47 2.688 26.16-8.781 32.78L271.1 256l137.2 79.22C420.7 341.8 424.6 356.5 417.1 368z"></path></svg>');*/
	/*background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');*/
	/*--required-mark-image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path style="fill:'+var(--required-mark-color, currentColor)+';" d="M417.1 368c-4.437 7.688-12.5 12-20.81 12c-4.062 0-8.188-1.031-11.97-3.219L248 297.6V456c0 13.25-10.75 24-23.1 24S200 469.3 200 456V297.6l-137.2 79.22C59 378.1 54.88 380 50.81 380c-8.312 0-16.37-4.312-20.81-12c-6.625-11.47-2.687-26.16 8.781-32.78L176 256l-137.2-79.22C27.31 170.2 23.38 155.5 29.1 144C36.59 132.6 51.28 128.5 62.78 135.2L200 214.4V56C200 42.75 210.8 32 224 32S248 42.75 248 56v158.4l137.2-79.22C396.8 128.5 411.4 132.6 417.1 144c6.625 11.47 2.688 26.16-8.781 32.78L271.1 256l137.2 79.22C420.7 341.8 424.6 356.5 417.1 368z"></path></svg>';*/
	/*--required-mark-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path style="fill:var(--required-mark-color, rgba(14, 23, 65, 1.0));" d="M417.1 368c-4.437 7.688-12.5 12-20.81 12c-4.062 0-8.188-1.031-11.97-3.219L248 297.6V456c0 13.25-10.75 24-23.1 24S200 469.3 200 456V297.6l-137.2 79.22C59 378.1 54.88 380 50.81 380c-8.312 0-16.37-4.312-20.81-12c-6.625-11.47-2.687-26.16 8.781-32.78L176 256l-137.2-79.22C27.31 170.2 23.38 155.5 29.1 144C36.59 132.6 51.28 128.5 62.78 135.2L200 214.4V56C200 42.75 210.8 32 224 32S248 42.75 248 56v158.4l137.2-79.22C396.8 128.5 411.4 132.6 417.1 144c6.625 11.47 2.688 26.16-8.781 32.78L271.1 256l137.2 79.22C420.7 341.8 424.6 356.5 417.1 368z"></path></svg>');*/
	background-image:var(--required-mark-image);

	background-repeat:no-repeat;
	background-position:calc(100% - 0.5em) 0.3em;
	background-size:0.5em;
	padding-right:1.1em;
}

/* #### .input-group */

.input-group > .form-control {
	-webkit-box-shadow:none;
	box-shadow:none;
}

.input-group > .form-control:focus {
	/*border-color: #66afe9;*/
	outline:0;
	-webkit-box-shadow:none;
	box-shadow:none;
}

.input-group > .form-control,
.input-group > .input-group-addon,
.input-group > .input-group-btn > .btn,
.input-group-addon {
	font-size:var(--font-size-normal);
	border-radius:999px;
	line-height:1;
}

.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn,
.input-group-addon.input-sm,
.input-sm,
.form-control.small {
	font-size:var(--font-size-small);
	border-radius:999px;
	line-height:1;
}

textarea.form-control.small,
textarea.form-control.input-sm {
	border-radius:var(--border-radius);
}

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn,
.input-group-addon.input-lg,
.input-lg {
	font-size:var(--font-size-normal);
	border-radius:999px;
	line-height:1;
}


.input-group-addon {
	padding:6px 12px;
	font-size:var(--font-size-normal);
	font-weight:normal;
	line-height:1;
	color:var(--text-color-default);
	text-align:center;
	background-color:var(--input-background-color);
	border:1px solid var(--input-border-color);
}

.input-group-addon:first-child {
	padding-right:1px;
}

.input-group-addon:last-child {
	padding-left:1px;
}


.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}

.input-group-addon:first-child {
	border-right:0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}

.input-group-addon:last-child {
	border-left:0;
}

.input-group .input-group-btn ~ .form-control,
.input-group .input-group-addon ~ .form-control {
	border-left:none;
}

.input-group > .form-control:not(:last-child) {
	border-right:none;
}

.input-group .form-control ~ .input-group-btn > .btn:first-child {
	border-left:none;
}

.input-group-btn .btn-default {
	border-color:var(--input-border-color);
}

.btn,
.btn-group-lg > .btn {
	border-radius:999px;
}

/* disable modal setting padding-right to body */
body:not(.modal-open) {
	padding-right:0px !important;
}

/*
.modal-scrollbar-measure {
	display:none;
}*/
/* /modal */

.alert {
	border-radius:var(--border-radius);
	font-size:var(--font-size-small);
}


/* ########## /Bootstrap ########## */


/* ########## Pretty Check & Pretty Switch ########## */
:root {


	--pretty-check-size:1.0;

	--pretty-check-theme-h:229;
	--pretty-check-theme-s:65%;
	--pretty-check-theme-l:15%;
	--pretty-check-theme-a:1.0;
	--pretty-check-theme:hsla(
			var(--pretty-check-theme-h),
			var(--pretty-check-theme-s),
			var(--pretty-check-theme-l),
			var(--pretty-check-theme-a)
	);
	--pretty-check-outline-color:var(--pretty-check-theme);
	--pretty-check-check-color:var(--pretty-check-theme);
	--pretty-switch-track-color:rgba(218, 217, 217, 1.0);
	--pretty-switch-check-color:hsla(
			var(--pretty-check-theme-h),
			var(--pretty-check-theme-s),
			var(--pretty-check-theme-l),
			var(--pretty-check-theme-a)
	);
	--pretty-switch-uncheck-color:hsla(
			var(--pretty-check-theme-h),
			calc(var(--pretty-check-theme-s) - 40%),
			calc(var(--pretty-check-theme-l) + 30%),
			var(--pretty-check-theme-a)
	);

}

.pretty-check.huge,
.pretty-switch.huge {
	--pretty-check-size:3;
}

label.pretty-check,
.pretty-check-label.pretty-check {
	/*padding-left:32px;*/
	padding-left:calc(1.6em * var(--pretty-check-size));
	/*font-size:inherit;*/
	font-weight:400; /*regular*/
	line-height:calc(1.0em * var(--pretty-check-size));

}

label.pretty-switch,
.pretty-switch-label.pretty-switch {
	/*padding-left:44px;*/
	padding-left:calc(2.2em * var(--pretty-check-size));
	/*font-size:inherit;*/
	font-weight:400; /*regular*/
	/*line-height:18px;*/
	line-height:calc(0.9em * var(--pretty-check-size));
}

.radio-inline,
.checkbox-inline {
	/*padding-right:calc(1.6em * var(--pretty-check-size));*/
	padding-right:calc(1.6em);
}


.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
	margin-left:0;
}

.pretty-check > input[type="radio"],
.pretty-switch > input[type="radio"],
.pretty-check > input[type="checkbox"],
.pretty-switch > input[type="checkbox"] {
	font-size:1em;
	width:calc(1.0em * var(--pretty-check-size));
	height:calc(1.0em * var(--pretty-check-size));
	line-height:calc(1.0em * var(--pretty-check-size));
	z-index:2;
	vertical-align:text-bottom;
	opacity:0.0;
	/*margin:0 12px 0 -32px;*/
	margin:0 calc(0.6em * var(--pretty-check-size)) 0 calc(1.6em * var(--pretty-check-size) * -1);
	position:absolute;
	/*margin:0 0 0 -20px;*/
	/*margin-right:6px;*/
	cursor:pointer;
}

.pretty-switch > input[type="radio"],
.pretty-switch > input[type="checkbox"] {
	/*width:32px;
	margin:0 12px 0 -44px;*/
	width:calc(1.6em * var(--pretty-check-size));
	margin:0 calc(0.6em * var(--pretty-check-size)) 0 calc(2.2em * var(--pretty-check-size) * -1);
}

.pretty-check > input[type="radio"] ~ .checkmark,
.pretty-check > input[type="checkbox"] ~ .checkmark {
	position:absolute;
	display:inline-block;
	width:calc(1.0em * var(--pretty-check-size));
	height:calc(1.0em * var(--pretty-check-size));
	line-height:calc(1.0em * var(--pretty-check-size));
	/*font-size:20px;*/
	font-size:1.0em;
	z-index:1;
	vertical-align:text-bottom;
	/*background-color:rgba(0, 255, 0, 0.2);*/
	/*margin-left:-32px;*/
	margin-left:calc(1.6em * var(--pretty-check-size) * -1);
	border:2px solid var(--pretty-check-outline-color);
	/*border:0.1em solid var(--pretty-check-outline-color);*/
	cursor:pointer;
	text-align:center;

}

.pretty-check > input[type="radio"] ~ .checkmark {
	border-radius:50%;
	/* fix for transparent border */
	/*padding:2px;*/
	padding:calc(0.1em * var(--pretty-check-size));
	/* /fix for transparent border */
}

.pretty-check.huge > input[type="radio"] ~ .checkmark {
	/* fix for transparent border */
	/*padding:calc((100% - 1.1em) / 2);*/
	padding:calc(((1.0em * var(--pretty-check-size)) - 0.8em) / 2);
	/* /fix for transparent border */
}

.pretty-check > input[type="radio"]:checked ~ .checkmark:before {
	content:"";
	display:block;
	height:100%;
	width:100%;
	/*border:2px solid rgba(255, 255, 255, 0.0);*/
	border:none;
	border-radius:50%;
	background-color:var(--pretty-check-check-color);
}

/*.pretty-check.huge > input[type="radio"]:checked ~ .checkmark:before {
	position:absolute;
	height:1em;
	width:1em;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
}*/

.pretty-check > input[type="checkbox"] ~ .checkmark {
	/*border-radius:4px;*/
	border-radius:calc(0.2em * var(--pretty-check-size));
	/* fix for transparent border */
	/*padding:2px;*/
	padding:calc(0.1em * var(--pretty-check-size));
	/* /fix for transparent border */
}

.pretty-check > input[type="checkbox"]:checked ~ .checkmark:after {
	content:"";
	display:block;
	height:100%;
	width:100%;
	/*border:2px solid rgba(255, 255, 255, 0.0);*/
	border:none;
	/*background-color:var(--pretty-check-check-color);*/
	background-color:transparent;
	z-index:3;
}

.pretty-check > input[type="checkbox"]:checked ~ .checkmark:before {
	content:"";
	position:absolute;
	margin-left:auto;
	margin-right:auto;
	border-style:solid;
	/*border-color:#ffffff;*/
	border-color:var(--pretty-check-check-color);
	/*
	left:50%;
	top:50%;
	width:30%;
	height:60%;
	 */
	/*
	left:6px;
	top:2px;
	width:5px;
	height:10px;
	border-width:0 2px 2px 0;
	*/
	/*

	left:calc(0.3em * var(--pretty-check-size));
	top:calc(0.1em * var(--pretty-check-size));
	width:calc(0.25em * var(--pretty-check-size));
	height:calc(0.5em * var(--pretty-check-size));
	border-width:0 calc(0.1em * var(--pretty-check-size)) calc(0.1em * var(--pretty-check-size)) 0;
	*/

	left:50%;
	top:50%;
	width:calc(0.25em * var(--pretty-check-size));
	height:calc(0.5em * var(--pretty-check-size));
	border-width:0 calc(0.1em * var(--pretty-check-size)) calc(0.1em * var(--pretty-check-size)) 0;
	transform:translate(-50%, -60%) rotate(45deg);


	/*
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	*/
	/*transform: translate(-50%, -60%) rotate(45deg);*/
	/*transform:rotate(45deg);*/

	z-index:4;
}

.pretty-switch > input[type="radio"] ~ .checkmark,
.pretty-switch > input[type="checkbox"] ~ .checkmark {
	position:absolute;
	display:inline-block;
	/*
	width:32px;
	height:8px;
	border-radius:4px;
	line-height:20px;
	font-size:20px;
	margin-left:-44px;
	margin-top:6px;
	*/

	width:calc(1.6em * var(--pretty-check-size));
	height:calc(0.4em * var(--pretty-check-size));
	border-radius:calc(0.2em * var(--pretty-check-size));
	line-height:calc(1.0em * var(--pretty-check-size));
	font-size:1.0em;
	margin-left:calc(2.2em * var(--pretty-check-size) * -1);
	margin-top:calc(0.3em * var(--pretty-check-size));

	z-index:1;
	vertical-align:text-bottom;
	border:none;
	cursor:pointer;
	text-align:center;
	/*background-color:rgba(224, 15, 38, 0.6);*/
	/*background-color:rgba(218, 217, 217, 1.0);*/
	background-color:var(--pretty-switch-track-color);
	transition:all 200ms ease-in-out;
}

.pretty-switch > input[type="radio"]:checked ~ .checkmark,
.pretty-switch > input[type="checkbox"]:checked ~ .checkmark {
	/*background-color:rgba(224, 15, 38, 0.6);*/
	background-color:hsla(
			var(--pretty-check-theme-h),
			var(--pretty-check-theme-s),
			var(--pretty-check-theme-l),
			0.6
	);
	transition:all 200ms ease-in-out;
}

.pretty-switch > input[type="radio"] ~ .checkmark:before,
.pretty-switch > input[type="checkbox"] ~ .checkmark:before {
	content:"";
	position:absolute;
	display:block;
	/*height:16px;
	width:16px;
	margin-top:-4px;*/
	height:calc(0.8em * var(--pretty-check-size));
	width:calc(0.8em * var(--pretty-check-size));
	margin-top:calc(0.2em * var(--pretty-check-size) * -1);
	border-radius:50%;
	background-color:var(--pretty-switch-uncheck-color);
	left:0;
	transition:all 200ms ease-in-out;
}

.pretty-switch > input[type="radio"]:checked ~ .checkmark:before,
.pretty-switch > input[type="checkbox"]:checked ~ .checkmark:before {
	/*left:16px;*/
	left:calc(0.8em * var(--pretty-check-size));
	/*background-color:var(--pretty-check-check-color);*/
	background-color:var(--pretty-switch-check-color);
	transition:all 200ms ease-in-out;
}

.pretty-switch.standalone {
	/*height:20px;
	width:32px;*/
	height:calc(1.0em * var(--pretty-check-size));
	width:calc(1.6em * var(--pretty-check-size));
	padding-left:0;
	text-align:left;
	line-height:inherit;
}

.input-group .pretty-switch.standalone {
	min-height:18px;
	height:auto;
}

.pretty-switch.standalone > input[type="checkbox"] {
	margin-left:0;
	/*opacity:0.4;*/
	/*background-color:rgba(0, 255, 0, 0.5);*/
}

.pretty-switch.standalone > input[type="checkbox"] ~ .checkmark {
	margin-left:0;
}

.pretty-check.inline {
	padding-left:0;
}

.pretty-check.inline > input[type="radio"],
.pretty-check.inline > input[type="checkbox"] {
	margin-left:0;
	margin-right:0;
	position:relative;
	display:inline-block;
	padding:0;
	vertical-align:middle;
	/*opacity:0.5;*/
}

.pretty-check.inline > input[type="radio"] ~ .checkmark,
.pretty-check.inline > input[type="checkbox"] ~ .checkmark {
	/*margin-left:0;*/
	/*position:relative;*/
	margin-left:calc(1.0em * var(--pretty-check-size) * -1);
}


.pretty-check .label-text {
	line-height:1.3em;
	display:inline-block;
	vertical-align:middle;
}

.pretty-check .label-text-block {
	display:block;
	vertical-align:middle;
}

.pretty-check > input[type="checkbox"]:disabled,
.pretty-check > input[type="radio"]:disabled,
.pretty-switch > input[type="checkbox"]:disabled,
.pretty-switch > input[type="radio"]:disabled {
	cursor:not-allowed;
}

.pretty-check > input[type="checkbox"]:disabled ~ .checkmark,
.pretty-check > input[type="radio"]:disabled ~ .checkmark,
.pretty-switch > input[type="checkbox"]:disabled ~ .checkmark,
.pretty-switch > input[type="radio"]:disabled ~ .checkmark {
	opacity:0.6;
	cursor:not-allowed;
}

/* ########## /Pretty Check & Pretty Switch ########## */

/* ########## Profile Img ########## */


.profile-img-wrap {
	width:100%;
	padding-bottom:100%;
	display:block;
	position:relative;
}

.profile-img-wrap .profile-img {
	position:absolute;
	top:10%;
	left:10%;
	width:80%;
	height:80%;
	border-radius:50%;
	background-color:var(--achivement-circle-color);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	background-origin:border-box;
	background-image:url("../../../img/app/dummy-user.svg");
}

.profile-img-wrap .profile-img-stars {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	background-origin:border-box;
	background-image:url("../img/trophies/trophy-blank-1.svg");
}

.profile-img-wrap .profile-img-stars[data-stars="1"] {
	background-image:url("../img/trophies/trophy-blank-1.svg");
}

.profile-img-wrap .profile-img-stars[data-stars="2"] {
	background-image:url("../img/trophies/trophy-blank-2.svg");
}

.profile-img-wrap .profile-img-stars[data-stars="3"] {
	background-image:url("../img/trophies/trophy-blank-3.svg");
}

.profile-img-wrap .profile-img-stars[data-stars="4"] {
	background-image:url("../img/trophies/trophy-blank-4.svg");
}

.profile-img-wrap .profile-img-stars[data-stars="5"] {
	background-image:url("../img/trophies/trophy-blank-5.svg");
}


.profile-img-wrap .profile-img-online-bubble {
	position:absolute;
	right:12%;
	bottom:12%;
	width:15%;
	height:15%;
	border-radius:50%;
	background-color:red;
	padding:0;
	margin:0;
	line-height:0;
	/*display:none;*/ /* wird vorerst nicht benötigt */
}

.profile-img-wrap .profile-img-online-bubble.is-online {
	background-color:hsla(93, 81%, 31%, 1.0);
}

.profile-img-wrap .profile-img-online-bubble.is-offline {
	background-color:hsla(360, 75%, 52%, 1.0);
}


/*.dashboard-head .profile-img-wrap {
	width:33%;
	padding-bottom:33%;
	margin-left:auto;
	margin-right:auto;
}*/

/* ########## /Profile Img ########## */


.polyfill-input-date input[type="date"] {
	background-image:url("../img/icons/icon-megaphone.svg");
	background-position:right 10px center;
	background-repeat:no-repeat;
	background-size:auto 50%;
	background-color:var(--input-background-color);
	cursor:pointer;
}

.polyfill-input-date input[type="date"][readonly] {
	background-color:var(--input-background-color);
	cursor:pointer;
}

.team-list-row {
	margin-bottom:0.5em;
}

.team-list-row .contact-link {
	margin-right:0.4em;
}

/*
#profile-edit-modal .modal-body {
	padding:0;
}*/

.row.flex > * > .box {
	height:100%;
	margin-bottom:0px;
}

/*
.row.flex > * > .box:after {
	content:" ";
	display:table;
	height:1px;
	line-height:0;
	font-size:0;
	width:100%;
}*/


.ellipsis {
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	display:inline-block;
	max-width:calc(100%);
}

#profile-box-tarifrunde .team-msg {
	margin-top:1em;
	margin-bottom:1em;
	font-size:var(--font-size-small);
	--text-color:#ffffff;
	color:var(--text-color);
	text-align:left;
	/*padding-left:4.6em;*/
}

#profile-box-tarifrunde .team-msg-icon {
	/*position:absolute;
	top:0;
	left:0;*/
}


.faq-hl {
	cursor:pointer;
}

.faq {
	transition:all 500ms ease-in-out;
	padding-top:0.5em;
	padding-bottom:0.5em;
	border-bottom:1px solid var(--input-border-color);
}

.faq .faq-q {
	font-size:var(--font-size-normal);
	/*font-weight:var(--font-weight-semi-bold);*/
	font-weight:var(--font-weight-normal);
	cursor:pointer;
	padding-top:0.5em;
	padding-bottom:0.5em;
	padding-right:1.8em;
}

.faq .faq-a {
	/*display:none;*/
	/*height:0;*/
	font-size:var(--font-size-small);
	/*padding-top:0.5em;*/
	padding-bottom:0.5em;
}

.faq.open .faq-a {
	/*display:block;*/
	/*height:auto;*/
}


.faq .faq-arrow {
	position:absolute;
	right:0.1em;
	top:0.7em;
}

.faq.open .faq-arrow {
	transform:rotate(90deg);
}

/*.faq .faq-a,*/
.faq .faq-arrow {
	transition:all 300ms ease-in-out;
}

/*.faq.open .faq-a,*/
.faq.open .faq-arrow {
	transition:all 300ms ease-in-out;
}

div.offline-donation-list {
	border-top:1px solid #ffffff;
	margin-top:0.5em;
}

div.offline-donation-row {
	line-height:1;
	padding-top:0.5em;
	padding-bottom:0.5em;

	border-bottom:1px solid #ffffff;
}

div.offline-donation-row:hover {
	background-color:rgba(255, 255, 255, 0.2);
}

.form-control-feedback.input-lg {
	border-radius:0 var(--border-radius) var(--border-radius) 0;
	height:46px;
	line-height:46px;
	font-size:var(--font-size-big);
	font-weight:var(--font-weight-normal);
	padding:0;
}

.scroll-anchor {

}

.scroll-anchor:empty {

}

.nav-hidden .scroll-anchor:empty {

}

/*notifications*/
#notifications {
	position:fixed;
	top:calc(var(--app-nav-height-px) + 3px);
	right:3px;
	width:250px;
	z-index:9999;
}

.notification {
	text-align:left;
	border:0px solid #747474;
	background-color:#B5D0EC;
	cursor:pointer;
	padding:0;
	border-radius:6px;
	font-size:var(--font-size-small);
	--text-color:var(--text-color-default);
	color:var(--text-color);

}

/*min-height:50px;*/
#notifications .notification {
	width:100%;
	margin-bottom:4px;
}

.notification a:link {
	color:#0060FF;
	font-weight:bold;
	text-decoration:underline;
}

.notification a:visited {
	color:#0060FF;
	font-weight:bold;
	text-decoration:underline;
}

.notification a:active {
	color:#0060FF;
	font-weight:bold;
	text-decoration:underline;
}

.notification a:hover {
	color:#0060FF;
	font-weight:bold;
	text-decoration:underline;
}

.notification_hl {
	display:block;
	padding:6px 10px 4px 10px;
	font-weight:var(--font-weight-semi-bold);
	background-image:none;
	background-repeat:repeat-x;
	cursor:move;
	color:var(--text-color);
}

.notification_cont {
	display:block;
	padding:6px 10px 10px 10px;
}

.notification_hl + .notification_cont {
	margin-top:-6px;
}

.notification, .notification_cont:after {
	clear:both;
}

.notification_close {
	position:absolute;
	right:6px;
	top:6px;
	z-index:10;
	font-size:70%;
	cursor:pointer;
	--text-color:#000000;
}

.notification.success {
	border-color:#d6e9c6;
	background-color:#5BB85D;
	--text-color:#ffffff;
}

.notification.success .notification_hl {
}

.notification.error {
	border-color:#ebccd1;
	background-color:#BD3630;
	--text-color:#ffffff;
}

.notification.error .notification_hl {

}


.profile-notifications #box-notifications {
	margin-left:calc(var(--box-padding) * -1);
	margin-right:calc(var(--box-padding) * -1);
}

.profile-notifications .notification-list {
	max-height:300px; overflow:auto;
}

.pagination {
	font-size:var(--font-size-small);
}

/** fontawesome 5 / 6 */

.fa,
.fas,
.fa-solid,
.far,
.fa-regular,
.fal,
.fa-light,
.fat,
.fa-thin,
.fad,
.fa-duotone,
.fab,
.fa-brands {
	/*color:var(--text-color);*/
}

i[class*=" fa-"].x05 { font-size:0.5em; vertical-align:middle; }

i[class*=" fa-"].x075 { font-size:0.75em; vertical-align:middle; }

i[class*=" fa-"].smaller { font-size:0.75em; }

i[class*=" fa-"].x15 { font-size:1.5em; vertical-align:middle; }

i[class*=" fa-"].x2 { font-size:2em; }

i[class*=" fa-"].x3 { font-size:3em; }

i[class*=" fa-"].x4 { font-size:4em; }

i[class*=" fa-"].x5 { font-size:5em; }

i[class*=" fa-"].x6 { font-size:6em; }

i[class*=" fa-"].x7 { font-size:7em; }

i[class*=" fa-"].x8 { font-size:8em; }

i[class*=" fa-"].x9 { font-size:9em; }

i[class*=" fa-"].x10 { font-size:10em; }

.fa-fw {

	width:var(--fa-fixed-width, 1.25em); }

/** /fontawesome */

#main-content > .container:nth-of-type(1) > i:nth-of-type(1) {
	margin-top:0.4em;
}

ul.group-list-1, ul.group-list-1 li, ul.group-list-1 ul {
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
}

ul.group-list-1 {

}

ul.group-list-1 ul {
	margin-left:1.3em;

}

.box.group-list-box {
	--box-padding:8px;
	/*padding-right:calc(var(--box-padding) + 1.4em);*/
	margin-bottom:10px;
}

.group-list-box {
	font-size:var(--font-size-small);
}

.group-list-box {
	opacity:0.7;
}

/*.group-list-box:hover,*/
.group-list-box.hasGebiet,
.group-list-box.selectable {
	opacity:1;
}

.box.group-list-box.name-only {
	padding:4px var(--box-padding);
	margin-bottom:4px;
}

.group-list-box .group-list-box-controls {
	position:absolute; right:6px;
	top:6px;
	z-index:3;
	font-size:var(--font-size-normal);
}

.group-list-box .group-list-box-controls i {
	margin-left:0.7em;
}

.group-list-box .organizer-indicator {
	position:absolute;
	left:-0.4em;
	top:-0.4em;
	font-size:var(--font-size-normal);
}


@keyframes group-list-box-activatable {
	0% {
		transform:scale(1.0);
		--tmp-btn-border:inherit;
		/*border:inherit;*/
	}
	50% {
		transform:scale(1.2);
		background-color:rgba(73, 142, 15, var(--box-bg-opacity, 1));
		--text-color:#ffffff;
		color:var(--text-color);
		/*--tmp-btn-border:1px solid #ffffff;*/
		--tmp-btn-border:0 0 0 1px #ffffff;
		box-shadow:0 0 0 1px #ffffff;
	}
	100% {
		transform:scale(1.0);
		--tmp-btn-border:inherit;
		/*border:inherit;*/
	}
}

.group-list-box.animate-activatable {
	transform-origin:right;
	animation:group-list-box-activatable 600ms;

}

.group-list-box.animate-activatable .control-btn-green {
	box-shadow:var(--tmp-btn-border);
}

.modal.modal-full-width .modal-dialog,
.modal-dialog.modal-full-width {
	width:95vw;
}


.tooltip-inner {
	color:var(--bs-tooltip-text-color, #ffffff);
	text-align:center;
	background-color:var(--bs-tooltip-bg-color, #000000);
	border-radius:var(--bs-tooltip-border-radius, 4px);
}

.tooltip.top .tooltip-arrow {
	bottom:0;
	left:50%;
	margin-left:calc(var(--bs-tooltip-arrow-size, 5px) * -1);
	border-width:var(--bs-tooltip-arrow-size, 5px) var(--bs-tooltip-arrow-size, 5px) 0;
	border-top-color:var(--bs-tooltip-bg-color, #000000);
}

.tooltip.top-left .tooltip-arrow {
	bottom:0;
	left:var(--bs-tooltip-arrow-size, 5px);
	border-width:var(--bs-tooltip-arrow-size, 5px) var(--bs-tooltip-arrow-size, 5px) 0;
	border-top-color:var(--bs-tooltip-bg-color, #000000);
}

.tooltip.top-right .tooltip-arrow {
	right:var(--bs-tooltip-arrow-size, 5px);
	border-width:var(--bs-tooltip-arrow-size, 5px) var(--bs-tooltip-arrow-size, 5px) 0;
	border-top-color:var(--bs-tooltip-bg-color, #000000);
}

.tooltip.right .tooltip-arrow {
	margin-top:calc(var(--bs-tooltip-arrow-size, 5px) * -1);
	border-width:var(--bs-tooltip-arrow-size, 5px) var(--bs-tooltip-arrow-size, 5px) var(--bs-tooltip-arrow-size, 5px) 0;
	border-right-color:var(--bs-tooltip-bg-color, #000000);
}

.tooltip.left .tooltip-arrow {
	margin-top:calc(var(--bs-tooltip-arrow-size, 5px) * -1);
	border-width:var(--bs-tooltip-arrow-size, 5px) 0 var(--bs-tooltip-arrow-size, 5px) var(--bs-tooltip-arrow-size, 5px);
	border-left-color:var(--bs-tooltip-bg-color, #000000);
}

.tooltip.bottom .tooltip-arrow {
	margin-left:calc(var(--bs-tooltip-arrow-size, 5px) * -1);
	border-width:0 var(--bs-tooltip-arrow-size, 5px) var(--bs-tooltip-arrow-size, 5px);
	border-bottom-color:var(--bs-tooltip-bg-color, #000000);
}

.tooltip.bottom-left .tooltip-arrow {
	left:var(--bs-tooltip-arrow-size, 5px);
	border-width:0 var(--bs-tooltip-arrow-size, 5px) var(--bs-tooltip-arrow-size, 5px);
	border-bottom-color:var(--bs-tooltip-bg-color, #000000);
}

.tooltip.bottom-right .tooltip-arrow {
	right:var(--bs-tooltip-arrow-size, 5px);
	border-width:0 var(--bs-tooltip-arrow-size, 5px) var(--bs-tooltip-arrow-size, 5px);
	border-bottom-color:var(--bs-tooltip-bg-color, #000000);
}


.meeting-edit-action-bubble {
	position:absolute;
	font-size:var(--font-size-normal);
	width:1.5em;
	height:1.5em;
	line-height:1.5em;
	text-align:center;
	border-radius:50%;
	background-color:rgb(108, 148, 208);
	--text-color:#ffffff;
	color:var(--text-color);
	z-index:2;
}

.quest-dummy-bg {
	background:rgb(181, 208, 236);
	background:linear-gradient(60deg, rgba(181, 208, 236, 1) 0%, rgba(181, 208, 236, 1) 40%, rgba(255, 255, 255, 1) 50%, rgba(181, 208, 236, 1) 60%, rgba(181, 208, 236, 1) 100%);

	background-size:400% 400%;
	animation:quest-dummy-bg-animation 5s ease infinite;
}


@keyframes quest-dummy-bg-animation {
	0% {
		background-position:100% 0%;
	}
	100% {
		background-position:0% 50%;
	}
}

.box.quest-box {
	/*--box-padding:0;*/
}

/*.box.quest-box .box-content {
	--box-padding:var(--box-padding-default);
	padding:0 var(--box-padding) 0 var(--box-padding);
}*/

.quest-box .quest-teaser-images {
	min-height:6em;
	position:relative;
}

.quest-box .quest-teaser-images img {
	width:100%;
	z-index:2;
	position:relative;
}

.quest-box .quest-teaser-images .quest-teaser-image-bg {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	width:100%;
	z-index:2;
	position:relative;
	height:6em;
}

/*.quest-box .box-header-media .quest-title {
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	text-align:center;
	color:#ffffff;
	z-index:4;
}*/
.quest-header-bg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:3;
	background-color:rgba(14, 23, 65, 0.6);
	color:#ffffff;
}

.quest-header-bg .quest-header-bg-content {
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	z-index:3;
	transform:translateY(-50%);
	color:#ffffff;
}

.quest-header-bg .quest-time-info {
	position:absolute;
	right:0;
	bottom:0;
	font-size:var(--font-size-small);
	padding-bottom:0.5em;
	padding-right:var(--box-padding-default);
}

.quest-header-bg:hover {
	background-color:rgba(14, 23, 65, 0.0);
}

/*.quest-header-bg:hover > * {
	opacity:0;
}*/

.quest-progress-track {
	height:20px;
	line-height:20px;
	width:100%;
	overflow:hidden;
	background-color:#ffffff;
	position:relative;
	display:block;
	/*margin-bottom:1px;*/
	/*border: 1px solid #cccccc;*/
	border-style:solid;
	border-color:#cccccc;
	border-width:0px 0 1px 0;
}

.quest-progress-track .quest-progress-bar {
	min-width:10px;
	max-width:100%;
	width:calc(var(--progress) * 1%);
	position:absolute;
	/*position:static;*/ /* eliminate width100 for children */
	left:0;
	height:100%;
	background-color:#FF8A00;
	z-index:1;
	display:block;
	transition:width 400ms ease-in-out;
}

.quest-progress-track .quest-progress-info {
	z-index:3;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	text-align:center;
	font-size:var(--font-size-small);
}

.quest-edit-bubble {
	position:absolute;
	font-size:var(--font-size-normal);
	width:1.5em;
	height:1.5em;
	line-height:1.5em;
	text-align:center;
	border-radius:50%;
	background-color:rgb(108, 148, 208);
	--text-color:#ffffff;
	color:var(--text-color);
	z-index:4;
	cursor:pointer;
}

.quest-edit-bubble[data-action="edit"] {
	top:-0.5em; right:-0.4em;
}

.box.quest-result-data-row {
	margin-bottom:0.5em;
}

.quest-preview-box .meeting-info {
	line-height:110%;
}

.quest-detail-box .box.meeting-row {
	margin-bottom:0.5em;
}

#create-quest-select-team ul.group-list-1 ul {
	margin-left:0.7em;
}

#create-quest-select-team ul.group-list-1 li .box {
	margin-bottom:0.5em;
}


#create-quest-select-team .group-list-1 .box.selected {
	background-color:rgba(73, 142, 15, var(--box-bg-opacity, 1));
	--text-color:#ffffff;
	color:var(--text-color);
}

.quest-finished-badge {
	position:absolute;
	left:-0.4em;
	top:0em;
	z-index:5;
	transform:rotate(-22deg);
	font-size:var(--font-size-normal);
	font-weight:var(--font-weight-bold);

	--text-outline-width:2px;
	--text-outline-color:#ffffff;
}

.quest-finished-badge.ended {
	/*transform: rotate(-23deg);*/
}

.quest-finished-badge.finished {
	/*transform: rotate(-16deg);*/
}

.quest-create-teaserImage-item {
	padding:100% 0 0 0;

	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}

.quest-create-teaserImage-item.selected {
	box-shadow:inset 0px 0px 0px 5px rgba(73, 142, 15, 1);
}

.quest-list-loading {
	min-height:5em;
}

.news-text-wrap {
	word-break:break-all;
	word-break:break-word;
	-webkit-hyphens:auto;
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	hyphens:auto;
}

.news-text-preview-wrap {
	word-break:break-all;
	word-break:break-word;
	-webkit-hyphens:auto;
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	hyphens:auto;
}

#support-box {
	display:block;
	position:fixed;
	width:calc(100vw - 30px);
	right:-100%;
	opacity:0;
	top:calc(var(--app-nav-height-px) + 16px);
	height:calc((100vh - var(--app-nav-height-px)) - (16px + 16px));
	border-radius:var(--border-radius) 0 0 var(--border-radius);
	border-style:solid;
	border-color:transparent;
	border-width:1px 0 1px 1px;
	transition:right 0.6s ease-in-out, opacity 0.6s ease-in-out;
	z-index:601;

	/*background-color:rgba(255, 255, 255, 0.94);*/
	/*background-color: rgba(14, 23, 65, 0.94);*/
	background-color:hsla(216, 52%, 62%, 0.94);
	--input-text-color:var(--text-color-default);
	--text-color:#ffffff;
	color:var(--text-color);

}

/*#support-box.open,*/
body.support-box-open #support-box {
	display:block;
	right:0;
	opacity:1;
	transition:right 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

body.support-box-open {
	overflow:hidden;
	margin-right:var(--scrollbar-width-px);
}

#support-box #support-box-content {
	width:100%;
	height:100%;
	padding:20px;
	overflow:auto;
}

#support-box-close {
	top:-0.4em;
	left:-0.4em;
}

body[data-page="dashboard"] #talk-buttons {
	margin-bottom:26px;
}

body[data-page="dashboard"] #talk-buttons:empty {
	display:none;
}

.small .list-group-item {
	padding:4px 15px;
}

.data-sync-category-container:has(.data-sync-category-list:empty) {
	display:none;
}

.team-card-header-images {
	display:block;
	width:100%;
	position:relative;
	z-index:2;
	/*height:6em;*/
	/*min-height:1px;*/
	/*padding-bottom:20%;*/
}

.team-card-header-image img {
	width:100%;
}

.team-card-header-image-bg {
	width:100%;
	aspect-ratio:5 / 1;
	background-repeat:no-repeat;
	background-position:center center;
}

.team-card-header-image-bg[style*="background-image"] {
	background-size:cover;
}

.team-card #signature-pad .m-signature-pad--body {
	position:relative;
	display:block;
	height:0;
	padding:0;
	overflow:hidden;

	/*background-color:rgba(127, 127, 127, 0.5);*/

	padding-bottom:calc(((1 / 3) * 100) * 1%);
	border-radius:var(--input-border-radius);
	/*padding-bottom:66.6%;*/
}

.team-card #signature-pad canvas {
	background-color:rgba(178, 178, 178, 1);
	position:absolute;
	display:block;
	top:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
	border-radius:var(--input-border-radius);
}
.team-card-privacy-policy {
	font-size:76%;
	max-height:400px;
	overflow-y:auto;
	margin-bottom:32px;
	padding:10px;
	border:1px solid #cccccc;
	background-color:#eeeeee;
	/*border-radius:var(--border-radius);*/
	h1,.h1 {
		font-size:1.8em;
	}
	h2,.h2 {
		font-size:1.5em;
	}
	h3,.h3 {
		font-size:1.3em;
	}
	h4,.h4 {
		font-size:1.1em;
	}
	ol > li:before {
		font-size:inherit;
	}
}
.team-card {
	--answer-color: var(--text-color);
	.answer-color {
		color:var(--answer-color, var(--text-color));
	}
	.answer-color-icon {
		display:inline-block;
		width:1em;
		height:1em;
		padding:1px;
		background-color:#ffffff;
		border-radius:3px;
		border:1px solid color-mix(in srgb, var(--answer-color, #cccccc) 20%, #999999);
		vertical-align:middle;

	}
	.answer-color-icon:after {
		content:"";
		display:block;
		/*width:100%;
		height:100%;*/
		padding-bottom:100%;
		background-color:var(--answer-color, #cccccc);
	}
	span + .answer-color-icon {
		margin-left:0.5em;
	}
}


@media screen and (max-width:700px) {
	.team-card {
		table, tr, td {
			padding:0;
			border:1px solid black;
		}

		table {
			border:none;
		}

		thead {
			display:none;
		}

		tr {
			display:flex;
			width:100%;
			margin-bottom:2em;
			flex-direction:column;
		}

		td {
			/*float:left;*/
			/*width:100%;*/
			display:flex;
			flex-direction:row;
			flex-grow:1;
			flex-shrink:0;
			
			position:relative;
			text-align:left;
		}

		td[data-label]:before {
			content:attr(data-label);
			word-wrap:break-word;
			white-space:normal;
			background:#eee;
			border-right:2px solid black;
			width:35%;
			/*float:left;*/
			padding:1em;
			font-weight:bold;
			/*margin:-1em 1em -1em -1em;*/
			height:100%;
			margin-right:1em;
			display:block;
			position:relative;
			flex-shrink:0;
		}
	}

}

.team-card {
	.entry {
		/*margin-bottom:0.5em;*/
		border-bottom:1px solid #cccccc;
		padding:0.5em 0;
	}
	
	.team-card-entry-form {
		> .box {
			margin-top:0.5em;
		}
	}
	
	
}

.iconCaptcha-wrap {

	.iconCaptcha-text {
		font-size:80%;
	}
	.iconCaptcha-preview,
	.iconCaptcha-sort {
		padding:0.4em;
		text-align:center;
		/*border:1px solid rgb(181, 208, 236);*/
		width:auto;
		margin-right:auto;
		margin-left:auto;
	}
	
	.iconCaptcha-icon {
		display:inline-block;
		margin-right:10px;
		border: 1px solid rgb(181, 208, 236);
		border-radius:10px;
		padding:6px;
		font-size:3rem;
		background-color:#ffffff;
	}
	.iconCaptcha-icon.correct {
		color:green;
		border-color:green;
	}
	.iconCaptcha-icon.sortable {
		cursor:pointer;
	}
	.iconCaptcha-preview {
		/*background-color:#cccccc;*/
		.iconCaptcha-icon {
			color:#999999;
		}
	}
	.iconCaptcha-msg-error {
		
	}
}


dialog:not([open]) {
	display: none;
}

dialog.blank {
	background:none;
	border:none;
}

dialog::backdrop {
	background-color:rgba(62,70,118, 0.8);
}

.input-verificationCode {
	text-align:center;
}
.input-verificationCode-multi {
	display:inline-block;
	width:1.8em;
	margin-right:6px;
	border-radius:6px;
	padding:10px 0.1em;
}
.input-verificationCode-multi:last-of-type {
	margin-right:0;
}

fieldset.blank {
	border:none;
	background-color:transparent;
	font-size:var(--font-size-normal);
	font-weight:var(--font-weight-normal);
	color:inherit;
	padding:0;
	margin:0;
	> legend {
		border:none;
		background-color:transparent;
		font-size:var(--font-size-normal);
		font-weight:var(--font-weight-normal);
		color:inherit;
	}
}