@CHARSET "UTF-8";

html{background-color: /*#202020*/ black; width:100vw; /* AB - avoid jumping content on scrollbar */ font-family: Arial, sans-serif;}
body{font-size:100%;overflow-x: hidden; /* AB - avoid jumping content on scrollbar */ }

* {box-sizing: border-box;}

/* Clearfix */
.row::before, .row::after {display: table;content: '';}
.row::after {clear: both;}
.col-3, .col-4, .col-6, .col-8, .col-9, .col-12 {float: left;}

/* Mobile defaults */
.col-3, .col-4, .col-6, .col-8, .col-9, .col-12 {width: 100%;}

/* Non-mobile, grid */
@media only screen and (min-width: 648px) and (max-width: 999px) {
  .col-3 {width: 162px;}
  .col-6 {width: 324px;}
  .col-9 {width: 486px;}
  .col-12 {width: 648px;}
  .row {max-width: 648px; margin: 0 auto;}
  body {font-size:80%;}
}
@media only screen and (min-width: 1000px) {
  .col-3 {width: 250px;}
  .col-6 {width: 500px;}
  .col-9 {width: 750px;}
  .col-12 {width: 1000px;}
  .row {max-width: 1000px; margin: 0 auto;}
  body {font-size:100%;}
}

img.scale-with-col{max-width:100%;height: auto;}

.questionbox {width: 100%; padding:5px; border: none; background-color:#6e6e6e; font-size: inherit;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.hinweis {color:yellow; font-size:85%;font-style:italic;}
.chart {border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.bar {border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.button, input[type=file] {display: inline-block;cursor: pointer;color:#1e1e1e;padding:10px 26px;text-decoration: none;border: none; font-size: 100%;height: 38px;border-radius: 5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-appearance: none;}
.button:hover, input[type=file]:hover {color:#505050;}
.button-checkbox {cursor: pointer;padding: 10px;margin: 0 -7px 0 0;height: 38px;border-radius: 5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-appearance: none;}
.buttonchars {display: inline-block;cursor: pointer;color:#1e1e1e;padding:8px 0;text-decoration: none;border: none; font-size: 100%;height: 30px;width:30px;margin:3px;border-radius: 5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-appearance: none;}

hr {border-color:#c4b63f;}

table {width:100%;}
table th {text-align:left;}
@media screen and (max-width: 639px) {
  table thead {border: none;height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
  table tr {display: block;margin-bottom: 10px; background-color:#383838;font-size:75%; padding:6px;}
  table td {display: block;text-align: right;}
  table td::before {content: attr(data-label);float: left;color:#76a9ff;}
  table td:last-child {border-bottom: 0;}
}

#menus li a div {display: none;}
#nav img {width: 46px; height: 46px;}
@media only screen and (max-width: 999px) { #nav img {width: 33px; height: 33px;} }
#nav ul {margin:0;padding:0;}
#nav li {list-style:none;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;margin:0;padding:0;}
#nav li a {display:block;text-decoration:none;color:white;padding:2px;}
#nav li a:hover {color:white;background:#383838;}
.show-menu {text-decoration: none;color: #fff;text-align: left;padding: 10px 5px;display: none;}
.show-menu b{font-size:30px;}
.show-menu span{margin-right: 1em;float:right;}
#nav input[type=checkbox]{display: none;}
#nav input[type=checkbox]:checked ~ #menus {display: block;}

/*css-styles-responsive*/
@media screen and (max-width:768px){
  #menus li a div {display: block;}
  #nav ul {margin:0;padding:0;}
  #nav {margin-bottom:20px;}
  #nav ul {position: static;display: none;}
  #nav li {border-bottom: 1px solid #C4B63F;}
  #nav ul li, #nav li a {width: 100%;}
  #nav li a{display:block;height:auto;line-height:normal;text-align:left;padding:10px;}
  .show-menu {display:block!important;line-height:30px; color:#C4B63F}
  .show-menu:hover {cursor:pointer;}
  label {margin:0!important;}
}


.pad-10 {padding-left: 10px; padding-right: 10px; max-width:100%; position:relative;}
.top-5 {padding-top: 5px;}
.top-10 {padding-top: 10px;}
.bottom-10 {padding-bottom: 10px;}
.height-10 {max-height: 10px;}
.height-30 {max-height: 30px;}

.color-01 {color:#1e1e1e;}
.color-02 {color:#454546;}
.color-03 {color:#919194;}
.color-04 {color:#76a9ff;}
.color-05 {color:#90ee7e;}
.color-06 {color:#c4b63f;}
.color-07 {color:#f45b5b;}
.color-08 {color:#ff8100;}

.brdrcolor-01 {border-color:#333333;}
.brdrcolor-02 {border-color:#454546;}
.brdrcolor-03 {border-color:#919194;}
.brdrcolor-04 {border-color:#76a9ff;}
.brdrcolor-05 {border-color:#90ee7e;}
.brdrcolor-06 {border-color:#c4b63f;}
.brdrcolor-07 {border-color:#f45b5b;}

.bgcolor-01 {background-color:#333333;}
.bgcolor-02 {background-color:#454546;}
.bgcolor-03 {background-color:#919194;}
.bgcolor-04 {background-color:#76a9ff;}
.bgcolor-05 {background-color:#90ee7e;}
.bgcolor-06 {background-color:#c4b63f;}
.bgcolor-07 {background-color:#f45b5b;}

.fsize-75 {font-size:75%;}
.fsize-150 {font-size:150%;}
.fsize-200 {font-size:200%;}
.fsize-250 {font-size:250%;}

.normal {font-weight: normal;}
.bold {font-weight: bold;}
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.border-red {-webkit-box-shadow: inset 0px 0px 0px 3px rgba(244,91,91,1); -moz-box-shadow: inset 0px 0px 0px 3px rgba(244,91,91,1); box-shadow: inset 0px 0px 0px 3px rgba(244,91,91,1);border-radius:5px;}
.border-orange {-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,141,51,1); -moz-box-shadow: inset 0px 0px 0px 3px rgba(255,141,51,1); box-shadow: inset 0px 0px 0px 3px rgba(255,141,51,1);border-radius:5px;}
.border-green {-webkit-box-shadow: inset 0px 0px 0px 3px rgba(144, 238, 126,1); -moz-box-shadow: inset 0px 0px 0px 3px rgba(144, 238, 126,1); box-shadow: inset 0px 0px 0px 3px rgbargba(144, 238, 126,1);border-radius:5px;}

.file-upload {position: relative;overflow: hidden;border:none !important;box-shadow: none !important;text-shadow:none;padding: 10px 20px !important;display: inline-block;vertical-align: middle;}
.file-upload input.upload {position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0);}
#fileToUploadUrl {color:#90EE7E; display: inline-block; border:none;	vertical-align: middle;	background: none;	box-shadow: none; padding: 10px; width:100%;font-size: 100%;font-weight: bold;}

.stickybottom {border-top: 1px solid #C4B63F; background: #484848;position: fixed;bottom: 0;left: 0;right: 0;}

/* hide5s */
.hide5s {position: absolute; top:10px; left:0; width:100vw;pointer-events: none;}
.hide5s {-webkit-animation: seconds 1.0s forwards;-webkit-animation-iteration-count: 1;-webkit-animation-delay: 5s;animation: seconds 1.0s forwards;animation-iteration-count: 1;animation-delay: 5s;}
@-webkit-keyframes seconds {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes seconds {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
/* hide5s */

.notification {border-radius: 5px;-moz-border-radius:5px;-webkit-border-radius:5px; padding:20px;}

.chart .bar {margin-bottom: 1px;height: 30px;}
.chart .label {padding: 8px 5px;position: relative;top: -1.2em;}
.progressbar-container {width:100%; height:20px; position:relative; background-color:#6e6e6e; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.progressbar-container {width:100%; height:10px; position:relative; background-color:#6e6e6e; border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
.progressbar {height:10px; position:relative; line-height:inherit; float:left;}
.progressbar-container div:first-child {border-top-left-radius:4px; border-bottom-left-radius:4px;}
.progressbar-container div:last-child {border-top-right-radius:4px; border-bottom-right-radius:4px;}

input, textarea, select {font-family: Arial, sans-serif;font-size:100%}
input[type=text], input[type=password], select {width: 100%; padding:5px; border: none; background-color:#6e6e6e;border-radius: 5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-appearance: none;}
input[type=text]:focus, input[type=password]:focus, select:focus {background-color:#c5c5c5; outline: none;}
textarea {resize: none;height:100px;width: 100%; padding:5px; border: none; background-color:#6e6e6e;border-radius: 5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-appearance: none;}
textarea:focus {background-color:#c5c5c5; outline: none;}
select option {font-weight: bold; white-space: wrap; max-width:100%;}
select {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.scrollbox {overflow: scroll;overflow-x: hidden;height:250px;width: 100%; padding:5px; border: none; background-color:#6e6e6e;border-radius: 5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.shake {animation: shake 3s linear infinite;}
@keyframes shake {
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { transform: rotate(3deg) }
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { transform: rotate(-3deg) }
}

.timer {animation-delay: 2s;animation: 25s linear colorchange;animation-iteration-count: 1;background-color:red;width:100%;height:10px;border-radius:5px;}
@keyframes colorchange {
    0% {background-color: rgb(0,255,0);}
    19% {background-color: rgb(0,255,0);}
    20% {background-color: rgb(128,255,0);}
    39% {background-color: rgb(128,255,0);}
    40% {background-color: rgb(255,255,0);}
    59% {background-color: rgb(255,255,0);}
    60% {background-color: rgb(255,128,0);}
    79% {background-color: rgb(255,128,0);}
    80% {background-color: rgb(255,0,0);}
}