/* body and background */
body {font-family:"Segoe UI"; background:black; color:white;}
@media only screen and (max-device-width: 600px) {
	body:before {background-image:url("https://static.kiwio.eu/background/1/background_fresh_mobile_small.jpg");}
}
@media only screen and (min-device-width:601px) and (max-device-width:900px) {
	body:before {background-image:url("https://static.kiwio.eu/background/1/background_fresh_mobile.jpg");}
}
@media (min-device-width:901px) {
	body:before {background-image:url("https://static.kiwio.eu/background/1/background_fresh.jpg");}
}

/* general loader popup */
div#circle_loader_panel {width:100%; height:100%; left:0; top:0; position:fixed; display:none; opacity:0; transition:opacity 0.2s ease; z-index:100000;}
div#circle_loader {position:fixed; width:80px; left:calc(50% - 40px); top:calc(40% - 40px);}

div#circle_loader .duo {height:20px; width:50px; background:hsla(0, 0%, 0%, 0.0); position:absolute;}
div#circle_loader .duo, div#circle_loader .dot {animation-duration:0.8s; animation-timing-function:ease-in-out; animation-iteration-count:infinite;}
div#circle_loader .duo1 {left:0;}
div#circle_loader .duo2 {left:30px}
div#circle_loader .dot {width:20px; height:20px; border-radius:10px; background:#89D100; position:absolute;}
div#circle_loader .dot-a {left:0px;}
div#circle_loader .dot-b {right:0px;}

@keyframes spin {
    0% { transform: rotate(0deg) }
   50% { transform: rotate(180deg) }
  100% { transform: rotate(180deg) }
}

@keyframes onOff {
    0% { opacity: 0; }
   49% { opacity: 0; }
   50% { opacity: 1; }
  100% { opacity: 1; }
}

div#circle_loader .duo1 {animation-name:spin;}
div#circle_loader .duo2 {animation-name:spin; animation-direction:reverse;}
div#circle_loader .duo2 .dot-b {animation-name:onOff;}
div#circle_loader .duo1 .dot-a {opacity:0; animation-name:onOff; animation-direction:reverse;}

/* device adaptive classes */
@media only screen and (max-width:900px) {
	.desktop_only {display:none;}
}
@media only screen and (min-width:901px) {
	.mobile_only {display:none;}
}

/* general default classes */
.default_background {background:rgba(0,0,0,0.5);}
.clickable {cursor:pointer;}

/* buttons */
button {background-color:black; color:rgb(222,222,222); outline:0px none; padding:0.4em; font-weight:bold; margin-left:0.25em; margin-right:0.25em; cursor:pointer; border-radius:2px; opacity:0.85; transition:opacity 0.1s ease, border-color 0.2s ease; border:1px solid rgb(50,50,50);}
button:hover {opacity:1;}
button.success {background-color:var(--accent-color); color:black;}
button.cancel {background-color:var(--accent-red);}
button:focus, button:hover {border-color:var(--accent-color);}
button.success:focus, button.success:hover {border-color:white;}
button.cancel:focus, button.cancel:hover {border-color:white;}

/* inputs */
input {border:1px solid grey; padding:0.25em; transition:border-color 0.2s ease; background-color:rgba(0,0,0,0.75); color:white; font-family:"Muli"; border-radius:3px;}
input:focus {outline:0px none; border-color:var(--accent-color);}
input.error {border-color:var(--accent-red);}
input.small {width:7.5em;}
input.medium {width:9em;}

textarea {background:rgba(0,0,0,0.75); color:white; font-family:"Muli"; border:1px solid grey; border-radius:3px;}
textarea:focus {outline:0px none; border-color:var(--accent-color);}

table {margin:2px; padding:3px;}
table tr td {margin:2px; padding:2px;}


table.form_default {margin-right:0; margin-left:0; padding-left:0; padding-right:0; width:98%; max-width:60em;}
table.form_default > * > tr > td:first-child {padding-left:0;}
table.form_default > * > tr > td:last-child {padding-right:0;}
table.form_default > * > tr > td:nth-child(2) {width:69%;}
table.form_default > * > tr > td:nth-child(2) > input, table.form_default > * > tr > td:nth-child(2) > textarea {width:98%;}

@media only screen and (max-width:900px) {
	table.form_default > * > tr > td {display:inline-block;}
}

table.default {width:98%; max-width:60em;}
table.default > thead {background:rgba(0,0,0,0.6); color:white;}
table.default > thead > tr > td {font-weight:bold;}
table.default > tbody {color:rgb(225,225,225);}
table.default > tbody > tr:nth-child(odd) {background:rgba(0,0,0,0.3);}
table.default.mark_first_column > tbody > tr > td:first-child {font-weight:bold;}

/* data and privacy transparency information */
.data_transparency_information {padding:0.15em; border:1px solid var(--accent-color); border-radius:3px; cursor:help; display:inline-block; text-align:center;}

/* HorizontalSelect */
.horizontal_select {white-space:nowrap;}
.horizontal_select > span {border:1px solid grey; background:rgba(0,0,0,0.25); padding-left:0.5em; padding-right:0.5em; cursor:pointer;}
.horizontal_select > span:hover {background:rgba(255,255,255,0.1);}
.horizontal_select > span.selected {background: var(--accent-color); color:black;}
.horizontal_select > span:first-child {border-bottom-left-radius:3px; border-top-left-radius:3px;}
.horizontal_select > span:last-child {border-bottom-right-radius:3px; border-top-right-radius:3px;}

/* Container links */
div#container_right {width:13%; position:fixed; overflow-y:auto; overflow-x:hidden; height:98%; top:1%; right:0; background:rgba(0,0,0,0.5); border-radius:3px 0px 0px 3px; display:none;}
@media only screen and (max-width:900px) {
	div#container_right {display:none;}
}

/* Startseite Content */
div#start_content {width:86%; left:0.5%; border-radius:3px; position:fixed; overflow-y:auto; overflow-x:hidden; top:1%; height:calc(100% - 2%); text-align:center;}
div#start_content > div {display:inline-block; padding-left:2%; width:100%;}
div#start_content > div > div {float:left; background:rgba(0,0,0,0.5); border-radius:2px; text-align:center; margin:1%; padding:0.75%; width:21%; cursor:pointer; transition:background 0.15s ease; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
div#start_content > div > div:hover {background:rgba(0,0,0,0.7);}
@media only screen and (max-width:900px) {
	div#start_content {width:98.5%;}
	div#start_content > div > div {width:96%; box-sizing:border-box;}
}

/* App-Screen */
div.content_area, div.app_container {left:1%; width:98%; position:fixed; border-radius:3px 0px 0px 3px; background:rgba(0,0,0,0.5); height:98%; top:1%; overflow-x:hidden; overflow-y:auto; transform:translate(110%, 0); transition:transform 0.25s ease-out;}
div.app_container.active {transform:translate(0,0);}
/* animationen */
div#start_content, div#container_left, div#container_right, div.top_notificatio, div.content_area {transition:transform 0.2s ease-out;}


/*scrollbars*/
*::-webkit-scrollbar {width:9px;height:9px; background:transparent;}
*::-webkit-scrollbar-button:start:decrement, *::-webkit-scrollbar-button:end:increment{display:none;height:0;background-color:transparent;}
*::-webkit-scrollbar-track-piece{background-color:transparent;-webkit-border-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;}
*::-webkit-scrollbar-thumb:vertical{height:50px;background-color:rgba(0,0,0,0.5);-webkit-border-radius:8px;}
*::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:rgba(0,0,0,0.5);-webkit-border-radius:8px;}

/* links */
a:link, a:visited {transition:color 0.2s ease; color:rgb(230,230,230);}
a:hover {color:white;}