html, body {
	height:100%;
	margin:0;
}
body {
	overflow-y:scroll !important; /* keep bootstrap modals from messing around */
	overflow-x:hidden;
	position:relative;
	top:0;
	opacity:1;
}
body {
    padding-right:0 !important; /* keep bootstrap modals from messing around */
}
body.leave-bottom {
	top:20%;
	opacity:0;
}
body.prepare-enter-top {
	top:-20%;
	opacity:0;
	-webkit-transition: none;
    transition: none;
}
body.enter-top {
	top:0;
	opacity:1;
	-webkit-transition: all 0.4s;
    transition: all 0.4s;
}
div#header {
	height:100%;
	background-image:url(<?php echo $config->urls->templates."assets/logister_wqhd.jpg";?>);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	color:#520000;
	position:relative;
	display:flex;
	display:-webkit-flex;
	flex-direction:row;
	-webkit-flex-direction:row;
	align-items:center;
	-webkit-align-items:center;
    overflow:hidden;
}
.goto-start-1 {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	cursor:pointer;
}
.goto-start-1 i {
    color:#520000;
    text-shadow: 0px 2px 20px #520000;
    position:relative;
    -webkit-animation: follow-glow 1.75s ease-out;
    -webkit-animation-iteration-count: infinite;
}
div#logo-right-top {
	position:absolute;
	right:0;
	top:0;
	background-color:transparent;
	color:#000000;
	margin:15px;
	padding:1em;
	font-family:Courier;
	font-weight:bold;
	border-top:1px solid black;
	border-bottom:1px solid black;
	padding:4px 4px 2px 4px;
}
div.tagline {
	flex-grow:1;
	-webkit-flex-grow:1;
	text-align:center;
	text-shadow: 0px 2px 20px #520000;
}
div.tagline h1 {
	font-size:1.4em;
}
#flex-container {
	height:100%; /* min-height for overflow-scrolling */
	display:flex;
	display:-webkit-flex;
	flex-direction:column;
	-webkit-flex-direction:column;
	justify-content:space-between;
	-webkit-justify-content:space-between;
	position:relative;
	padding:0;
}
#flex-container.scroll {
    height:auto;
    min-height:100%;
}
#main-content {
	flex-grow:1;
	width:100%;
	display:flex; /* nested flex */
	display:-webkit-flex;
	min-height:0; /* [ffox] http://stackoverflow.com/a/28639686 */
	position:relative;
	/*overflow-x:hidden;*/ /*kollidiert mit canvas overflow*/
}
div.outer-container {
	height:100%;
}
div.bg-fullscreen.container {
}
div.bg-fullscreen.transition {
	position:absolute;
	left:0;
	right:0;
	top:0;
}
div.bg-fullscreen.container [data-url] a {
    text-decoration:none
}
div.footer {
	flex:none;
	-webkit-flex:none;
	width:100%;
	border-radius:0;
}
div.footer .copyright {
    float:right;
}
div.footer .userdata {
    float:left;
    color:#ffffff;
}
div.footer a, div.footer a:link, div.footer a:visited {
    color:#ffffff;
    text-decoration:none;
    transition:color 0.25s linear;
}
div.footer a:hover {
    transition:color 0.25s linear;
}
div.footer a#logout:hover {
    color:#ff5555;
}
div.footer a#login:hover {
    color:#77ff77;
}
#topnav, #triggernav {
	z-index:1000;
	top:0;
	width:100%;
	border-radius:0;
    /*background: #000000;
    background: -webkit-linear-gradient(left, #222222 , #520000);
    background: -moz-linear-gradient(right, #222222 , #520000);
    background: linear-gradient(to right, rgba(255,255,255,0.7) , rgba(93,93,93,0.7));*/
    background:rgba(255,255,255,0.9);
    padding:0;
}
#triggernav {
    z-index: 900;
}
/*sticky.container.fixedsticky-on {
	height:20px;
}*/
div.content {
	padding-top:15px;
}
.transparency-gradient {
	background: linear-gradient(to top,  rgba(247,247,249,0) 0%,rgba(247,247,249,1) 100%);
	height:20px;
}
.showcase img {
	width:100%;
	top:105px;
}
.showcase-title {
	width:100%;
	top:90px;
	margin-right:-15px;
	background-color:rgba(247,247,249,0);
	
}
.showcase-title h2 {
	background-color:rgba(247,247,249,1);
	margin:-15px 0 0 0;
	padding:15px 0 0 0;
}
.showcase-title.fixedsticky-on h2 {
	margin:0;
}
.icon-bar:after {
	content: '';
    display: block;
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    opacity:1;
}
.middle-bar:after {
	top:50%;
}
.bottom-bar:after {
	top:100%;
}
.navbar-toggler:not(.collapsed) .top-bar:after {
    -webkit-transform:translate(0, 9px) rotate(45deg);
	transform:translate(0, 9px) rotate(45deg);
}
.navbar-toggler:not(.collapsed) .bottom-bar:after {
    -webkit-transform:translate(0, -9px) rotate(-45deg);
	transform:translate(0, -9px) rotate(-45deg);
}
.navbar-toggler:not(.collapsed) .middle-bar:after {
	opacity:0;
}
.navbar-desktop:not(.navbar-triggers) li.nav-item {
    padding: 0 2rem;
    /*border-radius: 5px;*/
    transition: box-shadow 0.4s ease-out;
    background-color: transparent;
    border: none;
}
.navbar-desktop:not(.navbar-triggers) li.nav-item+.nav-item {
    margin-left:8px;
}
.navbar-desktop:not(.navbar-triggers) li.nav-item a, .navbar-desktop:not(.navbar-triggers) li.nav-item.active a {
    color:#520000;;
}
.navbar-desktop:not(.navbar-triggers) li.nav-item a:hover, .navbar-desktop:not(.navbar-triggers) li.nav-item a:focus, .navbar-desktop:not(.navbar-triggers) li.nav-item.active a {
    color:#ffffff;
    text-shadow: 0px 0px 10px #ffffff;
}
.navbar-desktop:not(.navbar-triggers) li.nav-item:hover, .navbar-desktop:not(.navbar-triggers) li.nav-item.active {
    /*box-shadow: 0px 0px 30px #520000;*/
}
.navbar-desktop:not(.navbar-triggers) li.nav-item.active {
    text-shadow: 0px 0px 10px #ffffff;
    position:relative;
}
.navbar-desktop:not(.navbar-triggers) li.nav-item.active {
    background-color: #696969;
    border-color: #696969;
}
.navbar-desktop:not(.navbar-triggers) li.nav-item a, .navbar-desktop:not(.navbar-triggers) li.nav-item.active a {
    color: #fff;
}
#topnav {
    background: #520000;
    /*position:sticky;
    top:0;*/
    /*rgba(82,0,0,0.95)*/
}
.auth #triggernav {
    background-color:transparent;
}
.navbar-triggers li.nav-item {
    padding:6px 8px;
}
.navbar-triggers li.nav-item .nav-link {
    padding:0;
}
.navbar-triggers li.nav-item .nav-link:hover, .navbar-triggers li.nav-item .nav-link:focus {
    color:#696969;
}
#topnav li.nav-item:first-child {
}
.navbar-triggers li.nav-item:last-child {
}
.navbar-triggers li.nav-item.trigger:hover, .navbar-triggers li.nav-item.active {
    background-color: #696969;
}
.navbar-triggers li.nav-item.trigger:hover a, .navbar-triggers li.nav-item.active a {
    color:#ffffff!important;
}
@media (max-width: 320px) {
    div.modal .modal-dialog .btn {
        font-size: 0.82rem;
    }
    div.tagline h1 {
       font-size:1.4em;
    }
}
@media (min-width: 360px) {
    div.tagline h1 {
       font-size:1.6em;
    }
}
@media (min-width: 412px) {
    div.tagline h1 {
       font-size:1.8em;
    }
}
@media (min-width: 544px) {
	.showcase img {
		width:544px;
	}
	.showcase-title {
		width:544px;
	}
}
@media (min-width: 768px) {
	.showcase img {
		width:150px;
	}
	.showcase-title {
		width:525px;
	}
	div.tagline h1 {
       font-size:3em;
    }
}
@media (min-width: 992px) {
	.showcase img {
		width:205px;
	}
	.showcase-title {
		width:690px;
	}
	div.tagline h1 {
       font-size:4em;
    }
}
@media (min-width: 1200px) {
	.showcase img {
		width:255px;
	}
	.showcase-title {
		width:840px;
	}
	div.tagline h1 {
       font-size:5em;
    }
}

div.modal .modal-title {
    font-size:1.3rem;
}
div.modal .modal-header {
    background-color:#520000;
    color:#ffffff;
}
div.modal .modal-header button.close {
    color:#ffffff;
}
div.modal .modal-dialog .btn {
    margin-left:6px;    
}
.btn.btn-default {
	background-color: rgb(221, 221, 221);
}
div.modal .modal-dialog .btn:first-child {
    margin-left: 0;
}
@media (min-width: 320px) {
    div.modal-dialog {
        min-width:300px
    }
}
.modal.dialog-login .form-group:last-child {
    margin-bottom:0;
}
.modal.dialog-login .modal-body {
    padding-bottom:3px;
}
.dialog-login .account {
    color:#520000;
    position:relative;
    top:-3px;
}
.dialog-login .register {
    cursor:pointer;
    transition:all 0.25s linear;
    text-shadow: 0px 0px 1px #520000;
}
.dialog-login .register:hover {
    text-shadow: 0px 0px 25px #520000;
}

div#container {
    width:100%;
    margin-top:15px;
}
div.question-display .card p:last-child {
    margin-bottom:0;
}
div.question-display textarea {
    resize:none;
}
div.question-display .btn {
    float:right;
    margin:9px 0 0 6px;
}
div.question-display .btn#btn-done {
    float:left;
    margin:9px 0 0 0;
}
div.question-display label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:pointer;
}
div.question-display .checkbox:last-child label {
    margin-bottom:0;
}
div.question-display .card {
    background-color: #520000;
    color: #ffffff;
    box-shadow: 0px 0px 10px #520000;
}

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}
input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

/*** awesome bootstrap checkbox ***/
.abc-checkbox {
    padding-left: 20px;
}
.abc-checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px;
}
.abc-checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top:2px;
    margin-left: -20px;
    margin-top:-1px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    box-sizing:border-box;
}
.abc-checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 2px;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    margin-top:-1px;
    font-size: 11px;
    line-height:15px;
    color: #55595c;
    z-index:1000;
}
.abc-checkbox input[type="checkbox"] {
    opacity: 0;
    z-index: 1;
    /*display: none; /* Beheben von Problem, wenn Antwortoption auf zwei Zeilen bspw. bei Mobilgeräten */
    position:absolute; /* weniger invasiv */
}
/*.abc-checkbox input[type="checkbox"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}*/
.abc-checkbox input[type="checkbox"]:not(:checked) + label::after {
    -webkit-transform:scale(2.0);
    transform:scale(2.0);
    opacity:0;
    content: "";
}
.abc-checkbox input[type="checkbox"]:checked + label::after {
    font-family: "FontAwesome";
    content: "";
    -webkit-transform:scale(1.0);
    transform:scale(1.0);
    transition:all 0.35s ease-out;
}
.abc-checkbox input[type="checkbox"]:disabled + label {
    opacity: 0.65;
}
.abc-checkbox input[type="checkbox"]:disabled + label::before {
    background-color: #eceeef;
    cursor: not-allowed; }
.abc-checkbox.checkbox-inline {
    margin-top: 0;
}

/* comments */
#show-comments {
    position:absolute;
    z-index:100;
    right:0;
    top:0;
    margin: 20px;
}
.comments-button {
    cursor:pointer;
    padding: 0.5rem 1rem;
    border-radius:5px;
    color: #f7f7f9;
    background-color: #520000;
    transition:all 0.25s linear;
}
.comments-button:hover, .comments-button.hover {
    text-shadow: 0px 0px 25px #ffffff;
}
#comments-container {
    position:absolute;
    z-index:11;
    height:100%;
    width:0;
    top:0;
    right:0;
    opacity:0;
    background: linear-gradient(to right,  rgba(0,0,0,0.75) 0%, rgba(32,82,131,0.45) 100%);
    overflow-x:hidden;
    overflow-y:auto;
    transition:all 0.65s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#comments-container.active {
    width:300px;
    opacity:1;
}
#comments {
}
#insert-comment {
    display:inline-block;
    margin:0;
}
.dialog-insert-comment textarea {
    resize:none;
}
.card.comment {
    clear:both;
    margin-bottom:0;
}
.comment>.comment {
    width:calc(100% - 2rem);
    left: 2rem;
}
.comment div.delete {
    float:right;
    cursor:pointer;
    font-size:1.3em;
}
.comment .card-header {
    line-height:1.3em;
}
.comment .card-text .date {
    float:right;
}
.comment .card-text .post-answer {
    float:left;
    cursor:pointer;
}
.comment>.card-block {
    margin-bottom:1rem;
}
.progress-spinner-container-sm {
    position:absolute;
    top:20px;
    left:66px;
    z-index:101;
    opacity:1;
    display:none;
}
.progress-spinner-container-sm .uil-ring-css {
    width:48px;
    height:48px;
    margin:0;
}
.progress-spinner-container-sm .uil-ring-css > div {
    position: absolute;
    display: block;
    width: 36px;
    height:36px;
    top: 6px;
    left: 6px;
    border-radius: 18px;
    box-shadow: 0 2px 0 0 #ffffff;
}
#not_public {
    display:none;
    color:#ffffff;
    width:290px;
    overflow:hidden;
}
#not_public .info {
    margin: 20px 64px 0 20px;
}
#not_public .account {
    margin: 20px 20px 0 20px;
}
#not_public .login, .register, span.login {
    cursor:pointer;
    transition:all 0.25s linear;
    text-shadow: 0px 0px 1px #ffffff;
}
.login:hover, .login.hover, .register:hover, .register.hover {
    cursor:pointer;
    text-shadow: 0px 0px 25px #520000;
}

#init-spinner.progress-spinner-container {
    background-color:transparent;
}

.breadcrumbs {
    clear:both;
    padding-top:8px;
}
.breadcrumbs a {
    text-decoration:none;
    color:#ffffff;
}
.breadcrumbs+.navbar-triggers li {
    margin-top:12px;
}
.navbar-triggers a.nav-link {
    padding-top:0.2rem;
    padding-bottom:0.2rem;
}
.navbar-triggers a.nav-link.hint {
    color:#dfdfdf;
    text-shadow:0px 0px 10px #ffffff;
}
.navbar#topnav {
    padding-bottom:0;
    white-space: nowrap;
}
.navbar-triggers {
    border-top:none;
    border-bottom:1px solid #696969;
}
#triggernav .navbar-triggers li {
    margin-left:0;
    border-radius:0;
}
.navbar-triggers ul {
    flex-wrap:nowrap;
    white-space: nowrap;
    overflow-x: auto;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
    color: #696969;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(93,93,93,1);
}
li[data-parent-stub] {
    display:none;
}

/* imageViewer */
.image-container {
    margin:0 auto;
    overflow-x:auto;
    overflow-y:hidden;
}
div.imageViewer {
    position:relative;
    margin:10px;
}
div.imageViewer {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div.regionBox {
    position:absolute;
    overflow:hidden;
    z-index:900;
    background-color:rgba(172, 172, 172, 0.3);
    cursor:pointer;
    transition: background-color 200ms linear;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear; 
}
div.regionBox:hover {
    background-color:rgba(153, 204, 153, 0.3);
    transition: background-color 200ms linear;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear; 
}
div.regionBox.selected {
    background-color:rgba(153, 221, 153, 0.3);
    border:1px solid black;
}
div.regionBox div.label {
    background-color:rgba(51, 51, 51, 0.7);
    color:#ffffff;
    font-weight:bold;
    font-family:arial, helvetica, sans-serif;
    padding:4px 6px;
}
div.regionBox div.label.numbering {
    float:right;
}
div.regionBox div.label.type {
    float:left;
    font-size:smaller;
}

/* modals */
.modal.configure-instance .modal-dialog {
    min-width:600px;
    /*max-width:800px;*/
}
@media (max-width:600px) {
    .modal.configure-instance .modal-dialog {
        min-width:calc(100% - 30px);
    }
}
.modal.configure-instance.body-no-topmargin .modal-body {
    padding-top:0;
}
.modal.configure-instance.body-no-margin .modal-body {
    padding:0;
    overflow-x:hidden;
}
.modal.configure-instance.body-no-margin .modal-header, .modal.configure-instance.body-no-margin .modal-footer {
    border:none;
}
.modal-backdrop {
    z-index:1050;
}

.regionconfig-container {
    top:0;
    right:0;
    z-index:999;
}
.regionconfig-container > nav {
    transition: all 0.4s ease-out;
}
.regionconfig-container ul {
    margin:0;
}
@media (max-width: 1199px) {
    .regionconfig-container {
        position:absolute;
        max-height:100%;
        overflow-y:auto;
    }
    .regionconfig-container>nav {
        top:0!important;
    }
    .image-container {
        margin:0;
    }
}
@media (min-width: 1200px) {
    .regionconfig-container {
        flex:0 0 auto;
        display:flex;
        flex-direction:column;
        min-width:250px;
    }
    .image-container {
        flex:1 1 auto;
    }
}
/* fixes bootstrap 4.1 adding unnecessary margin to navbar-toggler on opening modal */
 .navbar-toggler, nav.navbar {
    /*margin-right:0!important;*/
}

.toggle, .refresh {
    border:none;
    outline:0;
    cursor:pointer;
}
i.toggle {
    transition: transform 0.25s ease-out;
}
i.toggle.collapsed {
    transform:rotate(-90deg) translateX(0px);
}

#sticky-utils {
    height:32px;
    overflow:visible;
}

.importdocs-container {
    position:fixed;
    bottom:0;
    left:0;
    z-index:1;
}
.importdocs-container .progress {
    min-width:200px;
}
.simplebar-scrollbar {
    display:none;
}

.imageViewer canvas {
    position:absolute;
}
canvas.select {
    cursor:pointer;
}
.set-cropmarks .imageViewer {
    cursor:crosshair;
}

.scancontrols-container {
    position:absolute;
    height:100%;
}
.scancontrols-container>nav {
    transition:all 0.4s ease-out;
    z-index:999;
    white-space: nowrap;
}
.scancontrols-container>nav button {
    text-shadow: 0px 2px 8px #ffffff;
    transition:all 0.2s linear;
}
.scancontrols-container>nav button:hover {
    text-shadow: 0px 2px 30px #ffffff;
}
.scancontrols-container i {
    transition:all 0.2s ease-in;
}
.scancontrols-container i.fa-spin {
    font-size:2em;
}

div.txListViewer.select {
    width:100%;
    /*margin-left:-1px;*/
    float:left;
    clear:both;
}
div.txwCategory label {
    margin:0;
    font-weight:normal;
}
div.select div.option {
    float:left;
    background-color:#e5e5e5;
    border:1px solid #ffffff;
    color:#000000;
    padding:4px 6px;
    cursor:pointer;
    width:20%;
    transition: background-color 200ms ease-out;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space:nowrap;
}
div.select div.option:hover {
    background-color:#cccccc;
    transition: background-color 200ms ease-out;
}
div.select div.option.selected {
    background-color:#000000;
    color:#ffffff ;
    transition: none;
}
div.select div.option:empty {
    display:none
}
.regionBox .boxHandle {
    background-color:rgba(0, 123, 255, 0.6)!important;
    transition: background-color 200ms linear;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
}
.regionBox .boxHandle:hover {
    background-color:rgba(0, 123, 255, 1)!important;
}
.boxHandle.dir-n, .regionBox.resize.dir-n, .image-container.resize.dir-n {
    cursor:n-resize;
}
.boxHandle.dir-s, .regionBox.resize.dir-s, .image-container.resize.dir-s {
    cursor:s-resize;
}
.boxHandle.dir-w, .regionBox.resize.dir-w, .image-container.resize.dir-w {
    cursor:w-resize;
}
.boxHandle.dir-e, .regionBox.resize.dir-e, .image-container.resize.dir-e {
    cursor:e-resize;
}

i.activity {
    opacity:0;
    transition: opacity 0.3s ease-out;
}
i.activity.activity-on {
    opacity:1;
}

.card.teaser {
    cursor:pointer;
    transition:all 0.4s ease-out;
    z-index:100;
}
.card.teaser .card-img-top i {
    font-size:12rem;
    text-shadow: 0px 0px 0px #ffffff;
    transition:all 0.4s ease-out;
}
.card.teaser:hover i {
    text-shadow: 0px 0px 20px #ffffff;
}
.card.teaser:not(.no-scale):hover {
    transform:scale(1.2);
    z-index:101;
}

.btn.start {
    box-shadow: 0 0 0px #ffffff;
    color:#ffffff;
    transition: all 0.3s ease-in;
}
.btn.start:hover {
    box-shadow: 0 0 16px #520000;
}

.hero-home .hero-img {
    background-image:url(../assets/bg-720p.jpg);
    background-size:cover;
    background-position:bottom;
    width:256px;
}
.hero-home .hero-tagline h1 {
    color:#520000;
}

/* common effects */
@-webkit-keyframes pulsate {
    0% {transform: scale(0.6, 0.6)}
    80% {transform: scale(1.0, 1.0) rotate(-20deg)}
    100% {transform: scale(0.6, 0.6) rotate(0deg)}
}
@-webkit-keyframes follow-glow {
    0% {color:rgba(82,0,0,0); text-shadow: 0px 2px 20px rgba(82,0,0, 1); top:-2.75rem}
    30% {top:-0.5rem;}
    60% {color:rgba(255,255,255,0.8); text-shadow: 0px 2px 20px rgba(255, 255, 255, 1); top:0}
    100% {color:rgba(255,255,255,1); text-shadow: 0px 2px 30px rgba(255, 255, 255, 1); top:0}
}
/* welcome-page flexible layout */
.welcome-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width:100%;
    height:100%;
    color:#ffffff;
}
.welcome-nav {
    position:relative;
    top:20%;
    left:-20%;
    transition:left 0.3s ease-out;
}
.welcome-label {
    padding:0.75rem 4rem;
    margin-bottom:0.2rem;
    font-size:4rem;
    background-color:rgba(0, 139, 139, 0.7);
    text-align:center;
    text-shadow: 0px 0px 1px #000;
    box-shadow: 0px 0px 5px #520000;
    border:1px solid #520000;
    transition:font-size 0.3s ease-out;
}
.welcome-buttons {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.welcome-button {
    width:49%;
    margin:0.2rem 0;
    padding:0;
    text-align: center;
    cursor:pointer;
    text-shadow: 0px 0px 1px #000;
    box-shadow: 0px 0px 5px #520000;
    border:1px solid #520000;
    transition:box-shadow 0.25s ease-out;
    background-color:rgba(86, 37, 93, 0.7);
    transition:font-size 0.3s ease-out;
}
.welcome-button:hover {
    box-shadow: 0px 0px 25px #ffffff;
}
.welcome-button.request-logout {
    border:1px solid #a52a2a;
    box-shadow: 0px 0px 5px #a52a2a;
}
.welcome-button.request-logout:hover {
    box-shadow: 0px 0px 25px #a52a2a;
}
.welcome-button.request-login {
    border:1px solid #28a745;
    box-shadow: 0px 0px 5px #28a745;
}
.welcome-button.request-login:hover {
    box-shadow: 0px 0px 25px #28a745;
}
@media (min-width: 992px) {
    .welcome-label {
        font-size:64px;
    }
    .welcome-button {
        font-size:16px;
    }
}
@media (min-width: 1200px) {

}
@media (min-width: 2500px) {

}
@media (min-width: 3500px) {
    .welcome-label {
        font-size:96px;
    }
    .welcome-button {
        font-size:24px;
    }
}
@media (max-width: 767px) {
    .welcome-nav {
        left:0
    }
    .welcome-label {
        font-size:36px;
    }
    .welcome-button {
        font-size:12px;
    }
}

.confirm-edit {
    display:none;
}

#main-content .popover {
    z-index:999;
}

h4.title {
    font-size: 1.2rem;
    background-color:#ffffff;
    color:#520000;
}
.admin-page .hint-icon{float:right;text-shadow:0px 0px 8px #ffff00;cursor:pointer;transition:all 0.5s ease-out;}
.admin-page .hint-icon:hover{text-shadow:0px 0px 15px #ffff00;transition:all 0.5s ease-out;}
.admin-page .hint-icon.user-settings{text-shadow:0px 0px 8px #520000;}
.admin-page .hint-icon.user-settings:hover{text-shadow:0px 0px 15px #520000;}
.admin-page .modal-body{overflow:auto;}
.admin-page .modal .modal-body{background-color:#ffffff;}
.admin-page .key-value{cursor:pointer;}

i.logo-lefthand {
    transform:rotate(225deg);
    margin-right:0.5rem;
}
i.logo-righthand {
    transform:rotate(45deg);
    margin-left:0.5rem;
}
.pulse {
    text-shadow: 0 0 50px rgba(0,191,171,1.0);
}
.pulse:hover {
    animation: none;
}
@keyframes pulse {
    0% {
        text-shadow: 0 0 0 0px rgba(0,191,171,1.0);
    }
    70% {
        text-shadow: 0 0 0 50px rgba(0,191,171,1.0);
    }
    100% {
        text-shadow: 0 0 0 0 rgba(0,191,171,0);
    }
}

.bg-main {
    background-color:#520000
}
.color-main {
    color:#520000
}
.bg-logout {
    background-color:#a52a2a;
}

.progress-spinner > .uil-ring-css > div {
    box-shadow: 0 6px 0 0 #520000;
}


#drawing {
    min-height:600px;
}
#drawing>svg {
    flex-grow:1;
}
@media (min-height: 800px) {
    #drawing>svg {
        max-width: 80vh;
    }
}

svg g.timeslice {
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ui-slider-range.ui-widget-header {
    background:#520000;
}
#player .ui-slider-handle.ui-state-active {
    background:#520000;
    /*border:1px;*/
}
#player .ui-slider-handle:focus {
    outline:none;
}

/** plx default theme overrides */
.plx-tableman .header-background, .plx-tableman table thead th, .plx-tableman table thead th div.lbl {
    background-color:#520000!important;
    color:#ffffff;
}
.plx-tableman [data-col] div.sort:not(.active) {
    color:#ffffff;
}
.plx-tableman [data-col] div.sort.active {
    color:#696969
}
.plx-tableman .action-filter {
    background-color:#520000;
}
.plx-tableman table.table td {
    vertical-align:middle;
}
/** bootstrap default theme overrides */
.btn-primary {
    background-color:#520000;
    border-color:#520000;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary:hover {
    background-color: #696969;
    border-color: #696969;
}
.btn-primary.focus, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(232,154,0,0.5);
}
.btn-primary:disabled, .btn-primary.disabled {
    color:#ffffff;
    background-color:#520000;
    border-color:#520000;
    cursor:not-allowed;
}

.btn-success {
    background-color:#696969;
    border-color:#696969;
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle, .btn-success:hover {
    background-color: #520000;
    border-color: #520000;
}
.btn-success.focus, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(93,93,93,0.5);
}

.text-primary {
    color: #520000!important;
}
a.text-primary:focus, a.text-primary:hover {
    color: #696969!important;
}
.data-control.highlight-control {
    background-color:#696969;
    border-color:#696969;
    transition:all 0.3s ease-out;
}
.data-control.highlight-control i {
    color:#ffffff;
}
.data-control.highlight-control:hover {
    background-color: #520000;
    border-color: #520000;
    transition:all 0.3s ease-out;
}
.custom-control.custom-checkbox>.custom-control-label {
    margin-top:1px;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
    background-color:#520000;
}
.custom-checkbox .custom-control-input:not(:disabled):active~.custom-control-label::before {
    outline-color:#696969;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #696969;
}
.custom-checkbox .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0px #fff;
}
.custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color:#520000;
}
.custom-radio .custom-control-input:not(:disabled):active~.custom-control-label::before {
    background-color:#520000;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #696969;
}
.custom-radio .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0px #fff;
}

li .remove-item {
    opacity:0;
}
li.active-item>.remove-item {
    opacity:1;
}
li .add-document {
    opacity:0;
    transition:all 0.3s ease-out;
}
li.active-item>.add-document, li:hover>.add-document {
    opacity:1;
}

.phase-control i {
    color: #520000;
    transition:all 0.3s ease-out;
    cursor:pointer;
}
.phase-control i:hover {
    color:#696969;
}

.progress-spinner-container>.progress-spinner>.display {
    position: absolute;
    width: 100%;
    top: 50%;
    font-family: Courier New, monospace;
    font-weight: bold;
    line-height: 0.5rem;
    font-size: 2rem;
}

h4.title.galleryTitle {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255,255,255,0.9);
}
.galleryContainer:first-child h4.title.galleryTitle {
    margin-top:0!important;
}

#shares a {
    font-size:smaller
}
#shares a:hover {
    text-decoration:none;
    text-shadow: 0 0 2px #696969;
}

a, a.link {
    color:#520000;
}
#exCollapsingNavbar2 a, #exCollapsingNavbar2 a.link {
    color:#ffffff;
}
a:hover, a.link:hover {
    color:#696969;
}

/* Survey.KeyEditor */
.keysEditor table {
    display:flex;
    margin-bottom:0;
}
.keysEditor table>tbody {
    width:100%;
}
.keysEditor table tr, .keysEditor table th {
    display: flex;
    width:100%;
    border-left:1px solid rgba(93,93,93,1);
    border-right:1px solid rgba(93,93,93,1);
    overflow-x:auto;
}
.keysEditor table tr:last-child {
    border-bottom:1px solid rgba(93,93,93,1);
}
.keysEditor table>tbody td {
    display:flex;
    align-items:center;
    border:none;
}
.keysEditor table>tbody td.key-value {
    flex-grow: 1;
}
.keysEditor .data-controls {
    display:flex;
    background-color:rgba(93,93,93,1);
    color:#fff;
}
.keysEditor .data-controls>div {
    padding:0.5rem 0.75rem;
}
.keysEditor .data-controls>div:not(:first-child) {
    padding-left:0rem;
}
.keysEditor td:not(:first-child) {
    padding-left:0;
}
.keysEditor:not(:last-child) {
    margin-bottom:1rem;
}
.keysEditor .key-action.remove-keyvalue, .keysEditor .add-keyvalue {
    width:auto;
}
.keysEditor>h4.title, .instance-preview h4.title {
    background-color:rgba(93,93,93,1);
    color:#fff;
    padding: 0.25rem 0;
    margin-bottom:0;
}
.instance-preview h4.title {
    background-color:#696969;
}
.keysEditor>h4.title>i, .instance-preview h4.title>i {
    display: flex;
    align-items: center;
    margin-left: -1px;
    text-shadow: none;
}
.keysEditor .ui-sortable-placeholder {
    visibility: visible!important;
}
.keysEditor .table-striped tbody tr:nth-of-type(odd) {
    background-color: unset;
}
.keysEditor .table-striped tbody tr:not(:last-child):not(.ui-sortable-helper) {
    border-bottom:1px solid rgba(0,0,0,.05);
}
.keysEditor .ui-sortable-helper, .keysEditor .table-striped tbody tr:nth-of-type(odd).ui-sortable-helper {
    border:none;
    background-color:rgba(93,93,93,0.1);
}
.keysEditor .ui-sortable-helper .key-action {
    visibility:hidden;
}
.keysEditor .row {
    margin:0;
}
.keysEditor .edit-options>span {
    color:#520000;
    text-shadow: 0px 2px 10px #520000;
    transition: all 0.3s;
}
.keysEditor .edit-options>span:hover {
    color:#696969;
    text-shadow: 0px 2px 10px #696969;
}
.keysEditor div[contenteditable] {
    cursor:text;
    min-width:100px;
    background-color: rgba(93,93,93,0.1);
}
.keysEditor div[contenteditable]:focus {
    outline-color:rgba(93,93,93,1)
}
.keysEditor table>tbody td.key-value div[contenteditable] {
    width:100%;
}
.module-options .keysEditor>h4.title {
    color:rgba(93,93,93,1);
    background-color:#fff;
    padding: 0.25rem 0;
    margin-bottom:0;
}
.module-options .keysEditor table tr {
    border:none;
}
.module-options .keysEditor table:not(.ui-sortable) tr>td {
    padding:0;
}
.module-options .keysEditor table tr>td.key-action ~ td {
    padding:0.75rem;
}
.module-options .keysEditor table tr>td.key-action {
    padding:0.75rem 0 0.75rem 0.75rem;
}
.module-options .keysEditor table:not(.ui-sortable) tr>td.key-action {
    border-left:1px solid #520000;
}
.module-options .keysEditor table.ui-sortable {
    border:1px solid rgba(0,0,0,.05);
    border-left:1px solid #520000;
}
.keysEditor.d-lg-flex>.row tr {
    display:flex;
    flex-direction:column;
}
.keysEditor.d-lg-flex>.row tr>td {
    width:100%!important;
    margin-bottom:0.25rem;
}
.progress-spinner-container {
     background-color: rgba(200,200,200,0.3);
}

.bootstrap-datetimepicker-widget table td {
    padding:0.3rem;
}

.configure-instance .inline-date > i {
    font-size:120%;
}

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #520000;
}

.ce-editor>.toolbar {
    position:absolute;
    top:0;
    right:0;
}
.survey-content .ce-editor>.toolbar {
    display:flex;
}
.ce-editor>.toolbar .btn {
    margin-left:0.3rem
}
.ce-editor>.toolbar .btn-color {
    height:1.5rem
}
.ce-editor>.toolbar .btn-red {
    background-color: red
}
.ce-editor>.toolbar .btn-yellow {
    background-color: yellow
}
.ce-editor>.toolbar .btn-green {
    background-color: green
}
.ce-editor>.toolbar .btn-transparent {
    background-color: transparent;
    border:1px solid #999999;
}
/*.ce-editor>.toolbar>.btn-icon {
    display:flex
}*/
.keysEditor .ce-editor .collapsible {
    background-color:#520000;
    color:#ffffff;
}
.keysEditor .ce-editor .toggle {
    color:#520000;
}

.bg-almost-transparent {
    background-color:rgba(255,255,255,0.9)
}

.card-polite {
    border: 1px solid #520000;
    box-shadow: 0px 0px 0px #520000;
    transition:all 0.3s ease-out;
}
.card-polite:hover {
    box-shadow: 0px 0px 20px #520000;
}

.form-signin .form-control:focus {
    border-color: #520000;
    box-shadow: 0 0 0 0.2rem rgba(93,93,93,.25);
}
.form-signin.exam {
    background-color:rgba(93,93,93,0.9);
    color:#ffffff;
}
.form-signin.exam a {
    color:#ffffff;
}

#listData tr td[data-col='grade'] textarea {
    cursor:text;
}

.min-w-50 {
    min-width:50%!important;
}
.line-height-25 {
    line-height:2.5
}
.browse-next, .browse-prev {
    cursor:pointer;
}
.data-viewer .add-userset, .data-viewer .remove-userset {
    display:none;
}
.btn.add-userset i {
    cursor:pointer;
    transition:all 0.3s ease-out;
    text-shadow:0 0 0 #ffffff;
}
.btn.add-userset i:hover {
    text-shadow:0 0 10px #000;
    color:#ffffff;
}
[data-instance]>.data {
    box-shadow:0 0 0 #205283;
    transition:all 0.3s ease-out;
}
[data-instance]>.data.highlight {
    box-shadow:0 0 30px #205283;
}
[data-instance]>.data.highlight.danger {
    box-shadow:0 0 30px darkred;
}
button.remove-userset~.data.rounded.highlight input {
    border-color:transparent;
}


body .container .instance-action, body .container .instance-title, body .container .add-instance, body .container .add-instance *, body .container li:not(.active-version) {
    text-shadow:0 0 0 #696969;
}
body .container .instance-action:hover, body .container .instance-title:hover, body .container .add-instance:hover *, body .container li.formbuilder-instance:hover, body .container li.selected, body .container .formbuilder-instance.active-item {
    text-shadow:0 0 15px #520000;
}
body .container .copy-item:hover, body .container .add-document:hover,  body .container .template-item:hover {
     text-shadow:0 0 16px #696969;
     color:#696969;
}
body .container .add-document .text-primary {
    color:unset!important;
}

.form-control:focus {
    border-color: #520000;
    box-shadow: 0 0 0 0.2rem rgba(93,93,93,.25);
}
.form-control::selection, [contenteditable]::selection {
    background: rgba(0,128,23,.25);
}

.plxSpinner .progress-spinner > div, .progress-spinner-container .progress-spinner > div {
}

#logo-we {
    background: url(/site/templates/assets/cstaehli-logoshort-neu-t.png) no-repeat center center;
    background-size: contain;
    background-color:#0b0414;
    background-color:transparent;
}