/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* GLOBAL ---------------------------------------------------------------------------------------------------------------------------------------- */

@import url(//fonts.googleapis.com/css?family=Open+Sans:300,700);
@import url(//fonts.googleapis.com/css?family=Oswald:200,300,400,700);
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:200,300,400,700);

Roboto Condensed

:root {
	--bg_head_navi: #5E6E6C;
	--bg_head_navi_s: #505858;
	--bg_head_navi_link: #576664;
	--bg_head_navi_link_hover: #4D5B59;
	--bg_bcmb_sepr: #434242;
}

#map {} /* Image Map + area */

#area {
	position: relative;
	min-height: 100%;
	width: 100%px;
}

h1 {
	font: 400 28px Oswald, sans-serif;
	color: white;
}

#container_cont h1 {
	font: 400 28px Oswald, sans-serif;
	color: orange;
}

#container_cont h2, #container_cont a.anker {
	font: 400 16px Roboto Condensed, sans-serif;
	color: orange;
	margin: 10px 0;
}

#container_cont h3 {
	font: 400 16px Roboto Condensed, sans-serif;
	color: orange;
	margin: 10px 0;
}

#container_cont p {
	font: normal 16px Roboto Condensed, sans-serif;
	color: #3B3B3B;
	margin: 20px 0;
	line-height: 1.5em;
}

a:link {
	text-decoration: none;
	color: orange;
}
a:visited {
	color: orange;
}
a:hover {
	color: #E09200;
}


a:focus, a:active {
	outline: none;
}

ul, ol {
	margin: 5px 0 5px 20px;
	padding: 0px;
	font: normal 16px Roboto Condensed, sans-serif;
	color: #3A3A3A;
	line-height: 1.5em;
	list-style-type: circle;
}

.cleaner {
	clear: both;
}

#container_cont p.msg_txt_green {color: #2DD22D;}
#container_cont p.msg_txt_red {color: #D22D2D;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* HEAD ------------------------------------------------------------------------------------------------------------------------------------------ */

#head {
	position: fixed;
	height: 56px;
	width: 100%;
	top: 0;
	background-image: linear-gradient(to top, #525b5b 0%,#5E6E6C 20%);
	z-index: 100;
}

#head_split {
	position: relative;
	display: block;
	height: 16px;
	width: 100%;
	background-color: #2E2D2D;
}

#container {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 56px auto 0 auto;
}

#head_open {
	position: relative;
	height: 360px;
	min-width: 1180px;
	max-width: 1920px;
	background-color: #5E6E6C;
	margin: 0 auto;
}

#head_open div {
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: left top;
}

#head_docking {
	position: relative;
	display: block;
	height: 50px;
	width: 100%;
	z-index: 80;
}

#head_docking_cont {
	position: relative;
	display: block;
	min-width: 1180px;
	max-width: 1920px;
	height: 50px;
	margin: 0 auto;
	background: #2E2D2D;
}

#breadcrumb {
	display: inline-block;
	text-align: center;
	padding: 5px 5px 0 5px;
}

#breadcrumb ul {
	list-style: none;
	display: inline-table;
	height: 40px;
	margin: 0;
}

#breadcrumb ul li {
	display: inline;
}

#breadcrumb ul li a {
	display: block;
	float: left;
	box-sizing: border-box;
	height: 40px;
	background: #2E2D2D;
	text-align: center;
	padding: 8px 12px 0 24px;
	position: relative;
	margin: 0 2px 0 0;
	font-size: 15px;
	text-decoration: none;
	color: #fff;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#breadcrumb ul li a:after {
	content: "";
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 10px solid #2E2D2D;
	position: absolute; right: -10px; top: 0;
	z-index: 1;
	-webkit-transition: border 0.2s linear, visibility 0.2s linear;
	-moz-transition: border 0.2s linear, visibility 0.2s linear;
	-o-transition: border 0.2s linear, visibility 0.2s linear;
	transition: border 0.2s linear, visibility 0.2s linear;
}

#breadcrumb ul li a:before {
	content: "";
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 10px solid #434242;
	position: absolute; left: 0; top: 0;
	-webkit-transition: border 0.2s linear, visibility 0.2s linear;
	-moz-transition: border 0.2s linear, visibility 0.2s linear;
	-o-transition: border 0.2s linear, visibility 0.2s linear;
	transition: border 0.2s linear, visibility 0.2s linear;
}

#breadcrumb ul li:first-child a {
}

#breadcrumb ul li:first-child a:before {
	display: none;
}

#breadcrumb ul li:first-child a {
	padding-left: 15px;
}

#breadcrumb ul li:last-child a:after {
	display: none;
}

#breadcrumb ul li a:hover {
	background: orange;
}

#breadcrumb ul li:last-child a {
	padding-right: 20px;
	background: transparent;
	pointer-events: none;
	cursor: default;
	color: orange;
}

#breadcrumb ul li a:hover:after {
	border-left-color: orange;
}

#search_in {
	display: inline;
	box-sizing: border-box;
	height: 40px;
	width: 605px;
	border: none;
	border: 0;
	float: right;
	margin: 5px 0;
	padding: 0 15px;
	font: normal 20px Roboto Condensed, sans-serif;
	color: #EEE;
	background: #434242;
}

@media only screen and (max-width: 1300px) {
	#search_in {
		width: 470px;
	}
}

#search_in:focus {
    outline:none;
}

datalist {
  -webkit-appearance: none;
  appearance: none;
}

#search_send {
	display: flex;
    justify-content: center;
    align-items: center;
	height: 40px;
	width: 60px;
	float: right;
	margin: 5px;
	background-color: orange;
	cursor: pointer;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#search_send:hover {
	background-color: #E09200;
}

/* HEAD NAVIGATION ------------------------------------------------------------------------------------------------------------------------------- */
#service-up {
	margin-right: 0px;
	min-width: 1180px;
	max-width: 1920px;
	margin: 0 auto;
}

ul.service-up-ul {
	height: 56px;
	padding:0px;
	margin: 0px;
	float: right;
	list-style: none;
	background: #576664;
}

ul.service-up-ul li {
	display: inline;
	position: relative;
	height: 56px;
	float: left;
	margin:0px;
	padding:0px;
	background-image: linear-gradient(to top, #525b5b 0%,#5E6E6C 20%);
}

ul.service-up-ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	width: 135px;
	text-decoration: none;
	font: normal 15px Roboto Condensed, sans-serif;
	color: #FDFDFD;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

ul.service-up-ul li div {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	text-decoration: none;
	font: normal 15px Roboto Condensed, sans-serif;
	color: #FDFDFD;
	padding: 0 8px 0 15px;
}

ul.service-up-ul li div span {
	font: normal 14px Roboto Condensed, sans-serif;
	color: #FDFDFD;
}

ul.service-up-ul li a:hover {
	color: #FDFDFD;
	background: #465351;
}

ul.service-up-ul svg {
	margin: 0 6px 0 -3px;
}

/* HEAD NAVIGATION DROP-DOWN --------------------------------------------------------------------------------------------------------------------- */
ul.service-up-ul li:hover > ul {
	visibility: visible;
	opacity: 1;
}

ul.service-up-ul ul, ul.service-up-ul ul li ul {
	list-style: none;
	margin: 0;
	padding: 0;
	visibility: hidden;
	position: absolute;
	z-index: 99999;
	background: #576664;
	opacity: 0;
	-webkit-transition: opacity 0.2s linear, visibility 0.2s linear;
	-moz-transition: opacity 0.2s linear, visibility 0.2s linear;
	-o-transition: opacity 0.2s linear, visibility 0.2s linear;
	transition: opacity 0.2s linear, visibility 0.2s linear;
}

ul.service-up-ul ul {
    top: 56px;
    right: 0px;
}

ul.service-up-ul ul li ul {
	top: 0;
	right: 120px;
}

ul.service-up-ul ul li {
	height: 50px;
	background: #576664;
	clear: both;
	width: 100%;
}

ul.service-up-ul ul li a{
	clear: both;
	display: flex;
	align-items: left;
	justify-content: flex-start;
	height: 50px;
	width: 185px;
	text-decoration: none;
	font: normal 14px Roboto Condensed, sans-serif;
	color: #FFF;
	padding: 0 10px;
}

ul.service-up-ul li a.first {
	border-left: 0 none;
}

ul.service-up-ul li a.last {
	border-right: 0 none;
}

/* HEAD INFO ------------------------------------------------------------------------------------------------------------------------------------- */
ul.info {
	float: left;
}

/* HEAD SLIDER ----------------------------------------------------------------------------------------------------------------------------------- */
#head_open .head_slide {
	position: relative;
	width: 100%;
	height: 100%;
}

#head_open .smoothy {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}

#head_open .smoothy div {
	position: absolute;
	box-sizing: border-box;
	right: 0px;
	background: rgba(115,115,115,0.7);
	margin: 0 50px 0 0;
	padding: 25px;
	height: 100%;
	width: 625px;
}

#head_open .smoothy p {
	margin: 20px 0;
	font: normal 16px Roboto Condensed, sans-serif;
	line-height: 150%;
	color: white;
}

#head_open .smoothy button {
	background-color: orange;
	border: 0;
	color: white;
	padding: 12px 44px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font: bold 16px Roboto Condensed, sans-serif;
	cursor: pointer;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#head_open .smoothy button:hover {
	background-color: #E09200;
}

#head_open .smoothy:first-child {
	display: block;
}

#head_open .head_slide_nav a {
	position: absolute;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.65);
	top: 0;
	left: 0;
	width: 50px;
	height: 100%;
	line-height: 360px;
	font-weight: 900;
	font-size: 42px;
	text-align: center;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#head_open .head_slide_nav a:hover {
	background: rgba(46, 45, 45, 0.6);
	color: #FDFDFD;
}

#head_open .head_slide_nav a.next {
	left: auto;
	left: initial;
	right: 0;
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* CONTENT --------------------------------------------------------------------------------------------------------------------------------------- */

#container_cont {
	position: relative;
	display: block;
	min-width: 1180px;
	max-width: 1920px;
	background: #FAFAFA;
	margin: 0 auto;
}

div#content_main {
	box-sizing: border-box;
	min-width: 1180px;
	max-width: 1680px;
	padding: 30px 15px;;
	margin: 0 auto;
}



/* CONTENT PROC Table ---------------------------------------------------------------------------------------------------------------------------- */
#tb_ps_cont {
	width: 100%;
	padding: 20px 0 50px 0;
}

.tb_ps {
	font: normal 15px Roboto Condensed, sans-serif;
	color: #3A3A3A;
}

.tb_ps tr.td_in td {
	box-sizing: border-box;
	background-color: #F2F2F2;
}

.tb_ps td.td_ava {
	padding: 0px;
	line-height: 0px;
}

.tb_ps tr#tr_class td {
	height: 50px;
	padding: 0 15px;
	font-weight: bold;
	background-color: #E8E8E8;
	text-align: center;
}

.tb_ps td.td_sub {
	height: 50px;
	padding: 0 15px;
	font-size: 18px;
	font-weight: bold;
	color: #FFF;
}

.td_sub.ls {
	background-color: #617380;
}

.td_sub.mt {
	background-color: #985832;
}

.td_sub.rs {
	background-color: #FD4482;
}

.td_sub.ese {
	background-color: #92A895;
}

.td_sub.se {
	background-color: #F07F02;
}

td.td_pec {
	/* 1600-3x5-170 = 1495 | :5*100/1495 = 20% */
	width: 20%;
}

.tb_ps td#td_ava_rs {
	width: 120px;
	vertical-align: top;
	background: none;
}

.tb_ps td#td_ava_rs div {
	width: 100%;
	height: 66px;
	margin: 0 0 3px 0;
	cursor: pointer;
}

.tb_ps td#td_ava_rs div.ls {
	background-color: #617380;
}

.tb_ps td#td_ava_rs div.mt {
	background-color: #985832;
}

.tb_ps td#td_ava_rs div.rs {
	background-color: #FD4482;
}

.tb_ps td#td_ava_rs div.ese {
	background-color: #92A895;
}

.tb_ps td#td_ava_rs div.se {
	background-color: #F07F02;
}

.tb_ps td#td_vide {
	height: 170px;
	width: 45px;
 	vertical-align: middle;
	padding: 0;
	background-color: #E8E8E8;
}

.tb_ps td#td_vide div {
	display: inline-block;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	writing-mode: vertical-lr;
	-ms-writing-mode: tb-rl;
	padding-right: 3px;
}

.tb_ps td.set_cent {
 	text-align: center;
	vertical-align: middle;
}



/* CONTENT INNER-PROC Table ----------------------------------------------------------------------------------------------------------------------- */
.tr_table_close {
	display: none;
}

#tb_pec {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border-collapse: separate;
    border-spacing: 3px;
	width: calc(100% + 6px);
	margin: -3px;
}

.td_separator {
	position: relative;
	width: 100%;
	height: calc(100% + 6px);
	margin: 0 0 -3px 0;
}

.td_separator.ls {
	background-color: #8A9BA9;
}

.td_separator.mt {
	background-color: #C78057;
}

.td_separator.rs {
	background-color: #FE95B8;
}

.td_separator.ese {
	background-color: #c0cdc2;
}

.td_separator.se {
	background-color: #ECC363;
}

#td_pec_select {
	height: 170px;
}

.pec_inactive {
	position: relative;
	cursor: pointer;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	width: 100%;
	height: 100%;
	margin: 0;
	font-size: 18px;
	-webkit-transition: color 0.2s linear, background 0.2s linear, visibility 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear, visibility 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear, visibility 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear, visibility 0.2s linear;
}

#td_pec_select div:hover {
	color: white;
}

.ls #td_pec_select div:hover {
	background-color: #8A9BA9;
}

.mt #td_pec_select div:hover {
	background-color: #C78057;
}

.rs #td_pec_select div:hover {
	background-color: #FE95B8;
}

.ese #td_pec_select div:hover {
	background-color: #c0cdc2;
}

.se #td_pec_select div:hover {
	background-color: #ECC363;
}

.pec_active {
	position: relative;
	width: 100%;
	height: calc(100% + 3px);
	margin: 0 0 -3px 0;
	font-size: 20px;
	color: white;
	-webkit-transition: color 0.2s linear, background 0.2s linear, visibility 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear, visibility 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear, visibility 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear, visibility 0.2s linear;
}

.ls #td_pec_select .pec_active  {
	background-color: #8A9BA9;
}

.mt #td_pec_select .pec_active {
	background-color: #C78057;
}

.rs #td_pec_select .pec_active  {
	background-color: #FE95B8;
}

.ese #td_pec_select .pec_active  {
	background-color: #c0cdc2;
}

.se #td_pec_select .pec_active  {
	background-color: #ECC363;
}

.td_mips {
	vertical-align: top;
	width: 180px;
}

.td_mips.ls {
	background-color: #8A9BA9;
}

.td_mips.mt {
	background-color: #C78057;
}

.td_mips.rs {
	background-color: #FE95B8;
}

.td_mips.ese {
	background-color: #c0cdc2;
}

.td_mips.se {
	background-color: #ECC363;
}

.tb_mips {
	width: 100%;
	margin: 0;
	padding: 0;
}

.tb_mips td {
	box-sizing: border-box;
	padding: 10px;
}

.td_ips {
	box-sizing: border-box;
	padding-top: 3px;
	vertical-align: top;
}

.tb_ips {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border-collapse: separate;
    border-spacing: 3px;
	width: calc(100% + 6px);
	margin: -3px;
}

.tb_ips td {
	box-sizing: border-box;
	padding: 10px;
	background-color: #E8E8E8;
}

.td_ava_btn {
	box-sizing: border-box;
	text-align: center;
	color: #FDFDFD;
	font-size: 12px;
	font-weight: bold;
	padding-top: 16px;
}


/* CONTENT INNER-PROC MENU Table ------------------------------------------------------------------------------------------------------------------ */
.td_mips ul {
	position: relative;
	width: 100%;
	padding:0px;
	margin: 0px;
	list-style: none;
}

.td_mips ul li {
	position: relative;
	width: 100%;
	margin:0px;
	padding:0px;
}

a.pec_tb_inactive {
	box-sizing: border-box;
	display: flex;
	padding: 0 15px;
	align-items: center;
	justify-content: left;
	height: 50px;
	width: 100%;
	text-decoration: none;
	font: normal 13px Roboto Condensed, sans-serif;
	color: #FDFDFD;
	font-weight: bold;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
	cursor: pointer;
}

.td_mips ul li a:hover {
	color: #FDFDFD;
}

.td_mips.ls li a:hover {
	background-color: #617380;
}

.td_mips.mt li a:hover {
	background-color: #985832;
}

.td_mips.rs li a:hover {
	background-color: #FD4482;
}

.td_mips.ese li a:hover {
	background-color: #92A895;
}

.td_mips.se li a:hover {
	background-color: #F07F02;
}

a.pec_tb_active {
	color: #FFF;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
	cursor: pointer;
}

.td_mips.ls li a.pec_tb_active {
	background-color: #617380;
}

.td_mips.mt li a.pec_tb_active {
	background-color: #985832;
}

.td_mips.rs li a.pec_tb_active {
	background-color: #FD4482;
}

.td_mips.ese li a.pec_tb_active {
	background-color: #92A895;
}

.td_mips.se li a.pec_tb_active {
	background-color: #F07F02;
}

/* CONTENT GRID SWITCH AB ------------------------------------------------------------------------------------------------------------------------ */

#switch_a {
	table-layout: fixed;
	width: 49%;
	float: left;
}

#switch_a div {
	height: 100%;
	width: 100%;
}

#switch_a tr.tri1 {
	background-color: #5E6E6C;
}

#switch_a tr.tri2 {
	background-color: #F2F2F2;
}

#switch_a td.i_h {
	padding: 0 15px;
	font: normal 24px Roboto Condensed, sans-serif;
	font-weight: bold;
	color: #FDFDFD;
	height: 50px;
}

#switch_a td.i_r {
	font: normal 16px Roboto Condensed, sans-serif;
	color: #666;
	height: 50px;
	cursor: pointer;
}

#switch_a .i_r div, #switch_a .i_h div {
	display: flex;
	align-items: center;
	justify-content: center;
}

#switch_a .i_h div {
	justify-content: flex-start;
}

#switch_a .i_r div:hover {
	color: #3B3B3B;
	background-color: #E2E2E2;
}

#switch_a .switch_a_active {
	color: #3B3B3B;
	background-color: #E2E2E2;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#switch_a .i5 div {
	display: none;
}

#switch_a .i5 div.switch_a_active_c {
	display: block;
}

#switch_a .i5 {
	padding: 15px;
	font: normal 16px Roboto Condensed, sans-serif;
	color: #3B3B3B;
	background-color: #F2F2F2;
}

div.cont {
	padding: 25px 0;
}

#switch_b {
	table-layout: fixed;
	width: 49%;
	float: right;
}

#switch_b tr.trb1 {
	background-color: #5E6E6C;
}

#switch_b tr.trb2 {
	background-color: #F2F2F2;
}

#switch_b div {
	height: 100%;
	width: 100%;
}

#switch_b td.b1 {
	padding: 0 15px;
	font: normal 24px Roboto Condensed, sans-serif;
	font-weight: bold;
	color: #FDFDFD;
	height: 50px;
}

#switch_b .b1 div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}


#switch_b tr.trb2 td {
	padding: 15px;
	font: normal 16px Roboto Condensed, sans-serif;
	color: #3B3B3B;
	background-color: #F2F2F2;
	line-height: 1.5em;
}

#switch_b tr.trb2 ul {
	margin: 0;
	list-style-type: circle;
	list-style-position: outside;
	padding-left: 15px;
	font: normal 16px Roboto Condensed, sans-serif;
	color: #3B3B3B;
	line-height: 1.5em;
}


/* CONTENT GRID ---------------------------------------------------------------------------------------------------------------------------------- */
.flex_dash_box {
	position: relative;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 80%;
	margin: 0 auto;
	justify-content: center;
}

.flex_dash_box div.d1 {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 250px;
	height: 100%;
	margin: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-moz-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-o-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
}

/* d2 als Titel-Bereich inkl. Video ergänzt, 12.07.22 SB*/
.flex_dash_box div.d2 {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 400px;
	height: 100%;
	margin: 5px;
	display: flex;
	align-items: left;
	justify-content: left;
	text-decoration: none;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-moz-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-o-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
}

.flex_dash_box div.d1 div {
	width: 100%;
}

.flex_dash_box div.d1.dshlnk div img {
	width: 100px;
	height: 100px;
}

.flex_dash_box div.d1 div:first-child {
	box-sizing: border-box;
	padding-top: 20px;
	height: 60%;
}

.flex_dash_box div.d1 div:first-child svg circle {
	fill: #5E6E6C;
}

.flex_dash_box div.d1.dshlnk div:first-child svg path {
	fill: #5E6E6C;
}


.flex_dash_box div.d1 div:last-child {
	height: 40%;
	padding: 0 8px 8px 8px;
	font: normal 16px Roboto Condensed, sans-serif;
	line-height: 130%;
	color: #3B3B3B;
	text-align: center;
}

.flex_dash_box div.d1 div:last-child span {
	font: normal 18px Oswald, sans-serif;
	color: orange;
}

.flex_dash_box div.d1.dshlnk:hover {
	transform: scale(1.04);
	background-color: #E8E8E8;
	cursor: pointer;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-moz-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-o-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	}

.flex_dash_box div.d1.dshlnk div:first-child {
	text-align: center;
	padding-top: 10px;
}

.flex_dash_box div.d1.dshlnk div:last-child span:last-child {
	color: #666;
	font: normal 16px Roboto Condensed, sans-serif;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* BUTTONS --------------------------------------------------------------------------------------------------------------------------------------- */

/* BUTTONS STYLE --------------------------------------------------------------------------------------------------------------------------------- */
#btn_grp {
	width: 100%;
	margin: 60px 0 60px 0;
}

.btn_nrm {
	height: 42px;
	margin: 25px auto;
	color: #FFF;
	border: 2px solid #CCC;
	background-color: #626664;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	/* text-transform: uppercase; */
	letter-spacing: 1px;
	/* font-weight: 700; */
	outline: none;
	position: relative;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

.btn_nrm:hover {
	background-color: #8B9D9B;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

.btn_gfx {
	margin: 25px auto;
	border: 2px solid #CCC;
	color: inherit;
	background: none;
	cursor: pointer;
	display: inline-block;
	font: normal 15px Roboto Condensed, sans-serif;
	/* text-transform: uppercase; */
	letter-spacing: 1px;
	/* font-weight: 700; */
	outline: none;
	position: relative;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

.btn_gfx:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

/* Pseudo elements for icons */
.btn_gfx:before {
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

/* BUTTONS ICON SEPERATOR ------------------------------------------------------------------------------------------------------------------------ */
.btn_gfx.btn_sep {
	padding: 12px 40px 12px 100px;
}

.btn_gfx.btn_sep:before {
	background: rgba(0,0,0,0.15);
}

.btn_gfx.btn_c {
	background-color: #626664;
	color: #fff;
}

.btn_gfx.btn_c:hover {
	background-color: #8B9D9B;
}

.btn_gfx.btn_c:active {
	background-color: #626664;
	/* top: 2px; */
}

.btn_gfx.btn_c:before {
	position: absolute;
	height: 100%;
	width: 75px;
	left: 0;
	top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_block {
	display: block;
}

/* BUTTONS UPLOAD -------------------------------------------------------------------------------------------------------------------------------- */
input[type="file"]#btn_upld {
    display: none;
}

#btn_upl {
	width: 276px;
	height: 42px;
	border: 2px solid #CCC;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
}

#btn_upld {
	border: 0;
	margin: 0;
	padding: 0;
	width: 40%;
	height: 100%;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMCcgaGVpZ2h0PSczMCcgdmVyc2lvbj0nMS4xJyB2aWV3Qm94PScwIDAgMzAgMzAnPgo8ZyBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxLjU3cHg7Ij4KPHJlY3QgeD0iOS4xNzYiIHk9IjEuODE2IiB3aWR0aD0iMTIuNTE2IiBoZWlnaHQ9IjEzLjA4OSIvPgo8cGF0aCBkPSJNNi45NDcsMTguODM3bDAsLTE1Ljg2bDIuMjI5LDAiLz4KPHBhdGggZD0iTTQuNzE4LDIyLjg5OGwwLC0xOC43NjFsMi4yMjksMCIvPgo8cGF0aCBkPSJNMTIuMDMzLDQuOTc4bDUuMjAxLDAiLz4KPHBhdGggZD0iTTEyLjAzMyw4LjI2NWw2LjgwMSwwIi8+CjxwYXRoIGQ9Ik0xMi4wMzMsMTEuNTUzbDYuODAxLDAiLz4KPHBhdGggZD0iTTQuNzE4LDguMjY1bC0yLjkxNCwwbDAsMTkuOTE5Ii8+CjxwYXRoIGQ9Ik0yOC4yNjQsMTQuOTA1bC0xOS4xNDUsMGwtNy4zMTUsMTMuMjc5bDE5LjE0NSwwbDcuMzE1LC0xMy4yNzlaIi8+CjwvZz4KPC9zdmc+") no-repeat;
	background-position: center center;
	background-color: #535755; /* #0099BF */
	cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#btn_upld:hover {
	background-color: #8B9D9B; /* #00CAFC; */
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#btn_upl button {
	margin-left: auto;
	border: 0;
	background-color: #626664;
	color: #fff;
	width: 60%;
	height: 100%;
	cursor: pointer;
	font-size: 15px;
	letter-spacing: 1px;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#btn_upl button:hover {
	background-color: #8B9D9B;
}

/* BUTTONS ICONS --------------------------------------------------------------------------------------------------------------------------------- */
.btn_gfx.ico_info:before {
	content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMCcgaGVpZ2h0PSczMCcgdmVyc2lvbj0nMS4xJyB2aWV3Qm94PScwIDAgMzAgMzAnPgo8ZyBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxLjU3cHg7Ij4KPHBhdGggZD0iTTEuODIzLDE0LjcyNGwyNi4zNzEsLTkuMjFsLTguNjQ3LDE4LjA4MmwtNC4yOTcsLTQuNjUybC00LjQ5LDMuNDg5bC0xLjg3MywtNS4yNjZsLTcuMDY0LC0yLjQ0M1oiLz4KPHBhdGggZD0iTTguODg3LDE3LjE2N2wxOS4wMTYsLTExLjQ1OWwtMTcuMDEzLDE2LjU2M2w0LjQ5LC0zLjAzNiIvPgo8L2c+Cjwvc3ZnPg==");
}

.btn_gfx.ico_dwn:before {
	content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMCcgaGVpZ2h0PSczMCcgdmVyc2lvbj0nMS4xJyB2aWV3Qm94PScwIDAgMzAgMzAnPgo8ZyBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxLjU3cHg7Ij4KPHBhdGggZD0iTTE3LjIwNywxMC41MzFsMCwtOC44NThsLTQuNDU3LDBsMCw4Ljg1OCIvPgo8cGF0aCBkPSJNMTIuNzUsMTAuNTMxbC00LjM0NiwwbDYuNTc1LDYuNTQ3bDYuNTc0LC02LjU0N2wtNC4zNDYsMCIvPgo8cGF0aCBkPSJNOS40NDksNi4xMjlsLTcuNjQ4LDBsMCwyMi4wMDhsMjYuNDEsMGwwLC0yMi4wMDhsLTcuNzAzLDAiLz4KPHBhdGggZD0iTTEuODAxLDE3LjA3OGw0LjQwMiwwYzAsMCAwLDQuNDAyIDQuMzQ2LDQuNDAybDguOTE0LDBjMCwwIDQuMzQ2LDAuMDU1IDQuMzQ2LC00LjQwMmw0LjQwMiwwIi8+CjwvZz4KPC9zdmc+");
}

.btn_gfx.ico_analyze:before {
	content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMCcgaGVpZ2h0PSczMCcgdmVyc2lvbj0nMS4xJyB2aWV3Qm94PScwIDAgMzAgMzAnPgo8ZyBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxLjU3cHg7Ij4KPHBhdGggZD0iTTE5LjEzNiwyOC4yMDlsLTE3LjMwMSwwbDAsLTI2LjM5NWwxMC45NTksMGw2LjM0Miw1LjUwOWwwLDIwLjg4NloiLz4KPGNpcmNsZSBjeD0iMTkuMTAxIiBjeT0iMTQuNjQ4IiByPSI1LjY0OSIvPgo8cGF0aCBkPSJNMjMuMzAzLDE4LjU2OWw1LjI0Myw1LjIzOCIvPgo8cGF0aCBkPSJNMTguMDcxLDYuODVsLTQuNjc2LDBsMCwtNC4wNjNsNC42NzYsNC4wNjNaIi8+CjxwYXRoIGQ9Ik01LjAwMSw3LjMyM2w0LjYyNywwIi8+CjxwYXRoIGQ9Ik01LjAwMSwxMS4yMTdsOS4zNzgsMCIvPgo8cGF0aCBkPSJNNS4wMDEsMTUuMTE2bDguMjU1LDAiLz4KPHBhdGggZD0iTTUuMDAxLDE5LjAxMWw4LjkzNiwwIi8+CjxwYXRoIGQ9Ik01LjAwMSwyMi45MWwxMC44MDcsMCIvPgo8L2c+Cjwvc3ZnPg==");
}

.btn_gfx.ico_save:before {
	content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMCcgaGVpZ2h0PSczMCcgdmVyc2lvbj0nMS4xJyB2aWV3Qm94PScwIDAgMzAgMzAnPgo8ZyBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxLjU3cHg7Ij4KPHBhdGggZD0iTTEyLjIxNSw3Ljg4NWwtNi4yNjQsMGwwLDE4LjE3MiIvPgo8cGF0aCBkPSJNMy45NTIsMjguMTUybDI0LjE3NywwbDAsLTIwLjI2N2wtNi4yOTcsMCIvPgo8cGF0aCBkPSJNOS40MjgsNC4xNDhsMCwtMi4zMjFsLTcuNTU3LDBsMCwyNC4yMDJjMCwxLjE2NSAwLjkyOCwyLjEyNCAyLjA1NSwyLjEyNGMxLjEyNywwIDIuMDU1LC0wLjk1OSAyLjA1NSwtMi4xMjQiLz4KPHBhdGggZD0iTTIxLjgzMiw0LjE0OGw0LjEzNCwwbDAsMy43MzciLz4KPHBhdGggZD0iTTkuNDI4LDQuMTQ4bDIuNzg3LDAiLz4KPHBhdGggZD0iTTE5LjM1NywxMi43NTNsMCwtMTAuOTRsLTQuNzIyLDBsMCwxMC45NCIvPgo8cGF0aCBkPSJNMTQuNjM1LDEyLjc2MWwtNC42MDUsMGw2Ljk2Niw3LjE3Mmw2Ljk2NiwtNy4xNzJsLTQuNjA1LDAiLz4KPHBhdGggZD0iTTIzLjk0LDE5Ljc3M2wwLDMuOTYzbC0xMy45MSwwbDAsLTMuOTYzIi8+CjwvZz4KPC9zdmc+");
}

.btn_gfx.ico_select:before {
	content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMCcgaGVpZ2h0PSczMCcgdmVyc2lvbj0nMS4xJyB2aWV3Qm94PScwIDAgMzAgMzAnPgo8ZyBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxLjU3cHg7Ij4KPHJlY3QgeD0iOS4xNzYiIHk9IjEuODE2IiB3aWR0aD0iMTIuNTE2IiBoZWlnaHQ9IjEzLjA4OSIvPgo8cGF0aCBkPSJNNi45NDcsMTguODM3bDAsLTE1Ljg2bDIuMjI5LDAiLz4KPHBhdGggZD0iTTQuNzE4LDIyLjg5OGwwLC0xOC43NjFsMi4yMjksMCIvPgo8cGF0aCBkPSJNMTIuMDMzLDQuOTc4bDUuMjAxLDAiLz4KPHBhdGggZD0iTTEyLjAzMyw4LjI2NWw2LjgwMSwwIi8+CjxwYXRoIGQ9Ik0xMi4wMzMsMTEuNTUzbDYuODAxLDAiLz4KPHBhdGggZD0iTTQuNzE4LDguMjY1bC0yLjkxNCwwbDAsMTkuOTE5Ii8+CjxwYXRoIGQ9Ik0yOC4yNjQsMTQuOTA1bC0xOS4xNDUsMGwtNy4zMTUsMTMuMjc5bDE5LjE0NSwwbDcuMzE1LC0xMy4yNzlaIi8+CjwvZz4KPC9zdmc+");
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* TEAM ------------------------------------------------------------------------------------------------------------------------------------------ */
#ll_team {
	width: 60%;
	table-layout: fixed;
	border-collapse: collapse;
	border: 0;
	font: normal 16px Roboto Condensed, sans-serif;
	color: #3B3B3B;
	margin: 50px auto;
	background-color: #f1f3f3;
}

#ll_team td {
	vertical-align: top;
}

#ll_team .team_label {
	width: 100%;
	padding: 15px;
	background-color: #2E2D2D;
	color: orange;
	font-size: 24px;
}

#ll_team .team_pix {
	width: 400px;
	line-height: 0px;
	padding: 0;
	margin: 0;
}

#ll_team .team_pix img {
	width: 100%;
}

#ll_team #team_dats {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

#ll_team #team_dats tr:nth-child(even) {
	background-color: #f1f3f3;
}

#ll_team #team_dats tr:nth-child(odd) {
	background-color: #e3e8e7;
}

#ll_team #team_dats td:first-child {
	width: 140px;
	font-weight: bold;
}

#ll_team #team_dats td {
	align-items: top;
	padding: 15px;
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Formulare ------------------------------------------------------------------------------------------------------------------------------------- */

.form-li-1 {
	margin: 40px auto;
	max-width: 600px;
}
.form-li-1 li {
	padding: 0;
	display: block;
	list-style: none;
	margin: 10px 0 0 0;
}
.form-li-1 label {
	margin: 16px 0 2px 0;
	padding: 0px;
	display: block;
	font-weight: bold;
	font-size: 11px;
}

.form-li-1 input[type=text],
.form-li-1 input[type=date],
.form-li-1 input[type=datetime],
.form-li-1 input[type=number],
.form-li-1 input[type=search],
.form-li-1 input[type=time],
.form-li-1 input[type=url],
.form-li-1 input[type=email],
.form-li-1 input[type=password],
.form-li-1 button.former,
textarea,
select {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 2px solid #CCC;
	padding: 10px;
	margin: 0px;
	font-size: 16px;
	color: #666;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	outline: none;
}
.form-li-1 input[type=text]:focus,
.form-li-1 input[type=date]:focus,
.form-li-1 input[type=datetime]:focus,
.form-li-1 input[type=number]:focus,
.form-li-1 input[type=search]:focus,
.form-li-1 input[type=time]:focus,
.form-li-1 input[type=url]:focus,
.form-li-1 input[type=email]:focus,
.form-li-1 input[type=password]:focus,
.form-li-1 textarea:focus,
.form-li-1 select:focus {
	border: 2px solid #8B9D9B;
}
.form-li-1 input:hover, select:hover, textarea:hover, button.former:hover {
	border: 2px solid #8B9D9B;
}
.form-li-1 .field-divided {
	width: 49.6%;
}
.form-li-1 .field-dividet {
	width: 32.9%;
}

.form-li-1 .field-long {
	width: 100%;
}
.form-li-1 .field-select {
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.form-li-1 .field-textarea {
	height: 100px;
}

.form-li-1 .required {
	color:red;
}
.form-li-1 button.former {
	cursor: pointer;
}

select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #CCC, #CCC);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

.dts {
	position: relative;
	width: 600px;
	margin: 10px auto;
	font-size: 16px;
	line-height: 1.5em;
}

.dts input: hover {
	border: 2px solid #8B9D9B;
}

.form-li-1 input[type=text].red,
.form-li-1 input[type=date].red,
.form-li-1 input[type=datetime].red,
.form-li-1 input[type=number].red,
.form-li-1 input[type=search].red,
.form-li-1 input[type=time].red,
.form-li-1 input[type=url].red,
.form-li-1 input[type=email].red,
.form-li-1 input[type=password].red,
textarea.red,
select.red {
	border: 2px solid #D22D2D;
}

/* The container */
.dts label {
	display: block;
	position: relative;
	padding-left: 50px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.dts input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.dts .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #CCC;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
}

.dts label:hover input ~ .checkmark {
	background-color: #8B9D9B;
}

.dts label input:checked ~ .checkmark {
	background-color: orange;
}

.dts label:hover input:checked ~ .checkmark {
	background-color: #E09200;
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.dts label input:checked ~ .checkmark:after {
	display: block;
}

.dts label .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.dts label span.red {
	background-color: #D22D2D;
}

div.lo {
	width: 100%;
	margin: 10px 0;
}

div.lo label {
	display: inline-block;
	width: 125px;
}

.dts .checkmark.lo {
	background-color: palegreen;
}

.dts label:hover input ~ .checkmark.lo {
	background-color: limegreen;
}

.dts label input:checked ~ .checkmark.lo {
	background-color: lightgreen;
}

.dts label:hover input:checked ~ .checkmark.lo {
	background-color: green;
}

.secure {
	/*text-align: center;*/
	width: 600px;
	margin: 0 auto;
}

.secure strong {
	color: #D22D2D;
}

label.dts_pure {
	display: block;
	position: relative;
	cursor: pointer;
	height: 25px;
	width: 25px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.dts_pure input {
	display: none;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.dts_pure .checkmark {
	position: absolute;
	height: 25px;
	width: 25px;
	background-color: #CCC;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
}

label.dts_pure:hover input ~ .checkmark {
	background-color: #8B9D9B;
}

label.dts_pure input:checked ~ .checkmark {
	background-color: orange;
}

label.dts_pure:hover input:checked ~ .checkmark {
	background-color: #E09200;
}

label.dts_pure input:checked ~ .checkmark:after {
	display: block;
}

.dts_pure .checkmark_all {
	background-color: #5E6E6C;
}

label.dts_pure input:checked ~ .checkmark_all {
	background-color: #5E6E6C;
}

label.dts_pure:hover input:checked ~ .checkmark_all {
	background-color: #8B9D9B;
}

label.dts_pure .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

input[type=text].txt-conf {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 2px solid #CCC;
	padding: 10px;
	margin: 0px;
	font-size: 16px;
	color: #666;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	outline: none;
}

input[type=text].txt-conf:focus {
	border: 2px solid #8B9D9B;
}
input[type=text].txt-center {
	text-align: center;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* FOOTER ---------------------------------------------------------------------------------------------------------------------------------------- */

#basement {
	display: grid;
	display: -ms-grid;
	grid-template-columns: 1fr 2fr 1fr;
	-ms-grid-columns: 1fr 2fr 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	min-width: 1180px;
	max-width: 1920px;
	margin: 0 auto;
	background-color: #2E2D2D;
	grid-template-areas: "i1 i2 i3"
                         "i4 i4 i4"
                         "i5 i5 i5";
}

#basement div {
	padding: 50px 50px 25px 50px;
}

#basement .i1 {
	grid-area: 1 / 1 / 2 / 2;
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}

#basement .i2 {
	grid-area: 1 / 2 / 2 / 3;
	-ms-grid-row: 1;
	-ms-grid-column: 2;
}

#basement .i3 {
	grid-area: 1 / 3 / 2 / 4;
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}

#basement .i4 {
	grid-area: 2 / 1 / 3 / 4;
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
}

#basement .i5 {
	text-align: center;
	grid-area: 3 / 1 / 4 / 4;
	-ms-grid-row: 4;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	background-color: #1F1E1E;
}

#basement h3 {
	font: 400 16px Roboto Condensed, sans-serif;
	color: orange;
}

#basement p {
	font: 300 16px Roboto Condensed, sans-serif;
	color: #FDFDFD;
	text-align: center;
	line-height: 1.5em;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* TB-LISTER ------------------------------------------------------------------------------------------------------------------------------------- */

table.tb_lister {
	table-layout: fixed;
	width: 100%;
	margin: 20px 0;
	font: 300 16px Roboto Condensed, sans-serif;
	color: #3A3A3A;
	border-collapse: collapse;
	}

table.tb_lister a {
	font-weight: 400;
	}

table.tb_lister th {
	background-color: #E3E3E3;
	text-align: left;
	padding: 10px 6px;
	font-weight: 700;
}

table.tb_lister th.x, table.tb_lister td.x {
	width: 48px;
}

table.tb_lister .shelter {
	display: none;
}

table.tb_lister th div {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
}

table.tb_lister tr.open {
	display: table-row;
}

table.tb_lister tbody.open {
	display: table-row-group;
}

table.tb_lister td {
	padding: 10px 6px;
	border: 1px solid #F1F1F1;
}

table.tb_lister tr td.c, table.tb_lister tr th.c {
	padding: 0px;
	text-align: center;
}

table.tb_lister tr td img {
	height: 28px;
	width: 28px;
}

table.tb_lister tr:nth-child(even) {
	background-color: #F3F3F3;
}

table.tb_lister tr:hover {
	background-color: #E3E3E3;
	cursor: pointer;
}

table.tb_lister tr.trans:hover {
	background-color: transparent;
}

table.tb_lister tr.fs_mark th, table.tb_lister td.fs_mark {
	background-color: #465351;
	color: #FDFDFD;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* RS-TOOL --------------------------------------------------------------------------------------------------------------------------------------- */

/* Formulare */
div.former {
	width: 550px;
	margin: 25px auto;
	}

input.txt-field {
	display: block;
	margin: 0px 0px 20px 0px;
	padding: 3px;
	height: 20px;
	width: 250px;
	border: 2px solid #CCC;
	font: 15px, Roboto Condensed,Sans-serif;
	}

input.txt-field:focus {
	/*border: 2px solid #00CAFC;*/

input.invalid {
    border-color: red;
}
	}

select.txt-field {
	display: block;
	margin: 0px 0px 20px 0px;
	padding: 3px 3px 3px 3px;
	height: 28px;
	width: 256px;
	border: 1px solid #BBB;
	font:15px, Roboto Condensed,Sans-serif;
	}

textarea.txt-notiz {
	display: block;
	margin: 0px 0px 20px 0px;
	padding: 3px;
	height: 150px;
	width: 250px;
	border: 1px solid #BBB;
	font-family: Roboto Condensed, Sans-serif;
	font-size: 15px;
	}

button.txt-submit {
	display: block;
	margin: 15px 0 15px 175px;
	height: 34px;
	width: 100px;
	border: 2px solid #DDD;
	background-color: #0099BF;
	font: normal 15px Roboto Condensed, sans-serif;
	color: #FFF;
	}

button.txt-submit:hover {
	background-color: #00CAFC;
	cursor: pointer;
	}

input.txt-green {
	border:1px solid #BBBBBB;
	background-color: #EFFFFF;
	}

input.save-submit {
	margin: 0 auto;
	}

input.test {
	display: inline;
	margin: 0px;
	height: 28px;
	}

input.testin {
	margin: 0;
	}

label.testin {
	width: 300px;
	}

input.stm, select.stm {
	display: inline;
	width: 45px;
	}

input.smf {
	display: inline;
	width: 25px;
	margin: 0 5px;
	text-align:center;
	}

img.smf {
	vertical-align:-3px;
	}

input.ustm {
	display: inline;
	width: 30px;
	margin: 0px;
	}

input.ultm {
	display: inline;
	width: 320px;
	margin: 0px;
	}

input.ltm {
	display: inline;
	width: 195px;
	}

input.mtm {
	display: inline;
	width: 118px;
	}

select.stm {
	display: inline;
	width: 60px;
	}

select.testin1 {
	display: inline;
	width: 120px;
	margin-right: 10px;
	margin-bottom: 0px;
	}

select.testin2 {
	display: inline;
	width: 190px;
	margin-right: 10px;
	margin-bottom: 0px;
	}

button.anima {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	font: bold 16px Roboto Condensed, sans-serif;
	color: #888;
	}


.tooltip {
    position: relative;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: #007DA4;
    color: #FFF;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 250%;
    left: 50%;
    margin-left: -90px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
	z-index: 100;
}

.tooltip_block {
    position: relative;
}

.tooltip_block .tooltiptext_block, .tooltip_nohover {
    visibility: hidden;
    width: 180px;
    background-color: #6E6EA4;
    color: #FFF;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 110%;
    left: 50%;
    margin-left: -90px;
}

.tooltip_block:hover .tooltiptext_block {
    visibility: visible;
}

table.list {
	width: 100%;
	padding: 20px 0;
	font: normal 15px Roboto Condensed, sans-serif;
	color: #3A3A3A;
	}

table.list_value {
	width: 700px;
	padding: 15px 0;
	font: normal 15px Roboto Condensed, sans-serif;
	color: #3A3A3A;
	}

table.ds {
	width: 75%;
	padding: 20px 0;
	font: normal 15px Roboto Condensed, sans-serif;
	color: #3A3A3A;
	margin: 0 auto;
	}

table.ds td {
	padding: 0 12px 0 12px;
	vertical-align: top;
	}

table.ds td input {
	margin-top: 14px;
	}

table.list tr.tr-head, table.list_value tr.tr-head {
	background-color: #626664; /* #DEE9FF; */
	font-weight: bold;
	color: #FFFFFF; /* #0099BF; */
	}

table.list td, table.list_value td {
	padding: 5px;
	}

.tb_rs td {
	font-size: 11px;
	}

td.vertic_rs {
 	vertical-align: center;
	}

.tb_rs td.bg_a {
	background-color: #D9D9D9;
	}

.tb_rs td.bg_b {
	background-color: #E9E9E9;
	}

td.vertic_rs {
 	vertical-align: center;
	}

td.vertic_rs div {
	display: inline-block;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	writing-mode: vertical-lr;
	-ms-writing-mode: tb-rl;
	padding-right: 3px;
	}


.tb_rs td.set_cent {
 	text-align: center;
	vertical-align: middle;
	}

.tb_rs tr.rs_class_tr {
	border-top: 1px solid;
	}

.rota_0 {
    -webkit-transform: rotate(0deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(0deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(0deg);  /* IE 9 */
    -o-transform: rotate(0deg);  /* Opera 10.50-12.00 */
    transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

.rota {
    -webkit-transform: rotate(-180deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(-180deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(-180deg);  /* IE 9 */
    -o-transform: rotate(-180deg);  /* Opera 10.50-12.00 */
    transform: rotate(-180deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Lehrlinie ------------------------------------------------------------------------------------------------------------------------------------- */
#switch_lr {
	table-layout: fixed;
	width: 100%;
}

#switch_lr div {
	height: 100%;
	width: 100%;
}

#switch_lr tr.lr1 {
	background: #5E6E6C;
}

#switch_lr tr.lr1 td:last-child {
	text-align: center;
	font-size: 1.6em;
	color: #FFF;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
	cursor: pointer;
}

#switch_lr tr.lr1 td:last-child:hover {
	background: orange}

#switch_lr tr.lr2 {
	background: #F2F2F2;
}

#switch_lr td.i_h {
	padding: 0 15px;
	font: normal 24px Roboto Condensed, sans-serif;
	font-weight: bold;
	color: #FDFDFD;
	height: 50px;
}

#switch_lr td.i_r {
	font: normal 16px Roboto Condensed, sans-serif;
	color: #666;
	height: 50px;
	cursor: pointer;
}

#switch_lr .i_r div, #switch_lr .i_h div {
	display: flex;
	align-items: center;
	justify-content: center;
}

#switch_lr .i_h div {
	justify-content: flex-start;
}

#switch_lr .i_r div:hover {
	color: #3B3B3B;
	background: #E2E2E2;
}

#switch_lr .switch_lr_active {
	color: #3B3B3B;
	background: #E2E2E2;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#switch_lr .ix > div {
	display: none;
}

#switch_lr .ix > div div:last-child {
	/* padding: 15px; */
}

#switch_lr .ix div.switch_lr_active_c {
	display: block;
}

#switch_lr .i_xrc {
	display: none;
}

#switch_lr .ix {
	padding: 15px;
	font: normal 16px Roboto Condensed, sans-serif;
	color: #3B3B3B;
	background-color: #F2F2F2;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Formulare ------------------------------------------------------------------------------------------------------------------------------------- */
input.txt-submit {
	display: block;
	margin: 15px 0 15px 175px;
	height: 25px;
	width: 140px;
	border:1px solid #BBB;
	background-color: #EFEFEF;
	font:13px, Arial,Sans-serif;
	}

input.graphem {
	display: inline;
	margin: 0px;
	padding: 2px;
	height: 24px;
	border: 1px solid #EEE;
	background-color: #FFF;
	text-align: center;
	}

.sl_graphem [selected] {
	color: #01DF3A;
	font-weight: bold;
}

/* RS - Tool Progress */

.brcb_container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	min-width: 480px;
	padding: 50px 0 15px 0;
}

.brcb {
	display: flex;
	border-radius: 0px;
	overflow: hidden;
	margin: auto;
	text-align: center;
	top: 50%;
	width: 100%;
	// max-width: 1200px;
	height: calc(40px * 1.5);
	transform: translateY(-50%);
	z-index: 1;
	background-color: #ddd;
	font-size: 14px;
}

.brcb a {
	position: relative;
	display: flex;
	flex-grow: 1;
	text-decoration: none;
	margin: auto;
	height: 100%;
	padding-left: 40px;
	padding-right: 0;
	color: #666;
	pointer-events: none;
}

.brcb a:first-child {
	padding-left: calc(40px / 2.5);
}

.brcb a:last-child {
	padding-right: calc(40px / 2.5);
}

.brcb a:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: calc(40px * 1.5);
	height: calc(40px * 1.5);
	top: 0;
	right: calc(40px / 1.35 * -1);
	background-color: #ddd;
	border-top-right-radius: 0px;
	transform: scale(0.8) rotate(45deg);
	box-shadow: 2px -2px rgba(0,0,0,0.25);
	z-index: 1;
}

a.sel {
	background-color: #5E6E6C;
	color: white;
}

a.sel:after {
	background-color: #5E6E6C;
}

.brcb a:last-child:after {
	content: none;
}

.brcb_in {
	display: flex;
	flex-direction: column;
	margin: auto;
	z-index: 2;
}

.brcb_ti {
	font-weight: bold;
	margin-bottom: 5px;
}

.brcb a.active, .brcb a:hover{
	background: orange;
	color: white;
}

.brcb a.active:after, .brcb a:hover:after {
	background: orange;
	color: white;
}

// 1000px
///////////////////////
@media all and (max-width: 1000px) {
	.brcb {
		font-size: 12px;
	}
}

table.rs_tool {
	width: 98%;
	margin: 20px 0;
	font: normal 16px Roboto Condensed, sans-serif;
	color: #3A3A3A;
	border-collapse: collapse;
}
table.rs_tool th, table.rs_tool td {
  border: 1px solid #F1F1F1;
}
table.rs_tool td {
  padding: 10px 6px;
}
table.rs_tool td.first {
	background-color: #8B9D9B; /* #007DA4; */
	color: #FFF;
	font-weight: bold;
}
table.rs_tool td.hlne {
	background-color: #8B9D9B; /* #007DA4; */
}
table.rs_tool td.second {
	padding: 10px 6px;
}
table.rs_tool td.third {
	width: 30px;
}
table.rs_tool td.third_fx {
	color: #CCC;
}
.edt_grapheme {
	display: none;
}
.third_x:hover {
	color: #242;
	cursor: pointer;
}
#edt_sentences {
	padding: 0;
}
#edt_sentences_head td {
	font-weight: bold;
	background-color: #FFF;
}
#edt_sentences_head td:first-child {
	width: 20%;
}
#edt_sentences_head td:nth-child(3) {
	width: 30%;
}
.list_sentences {
	width: 100%;
	margin: 0;
	font: normal 13px Roboto Condensed, sans-serif;
	color: #3A3A3A;
	border-collapse: collapse;
	border-style: hidden;
}
.uxb, .ux {
	color: #CCC;
}
.kxb, .kx {
	color: #242;
}
.ux, .kx {
	cursor: pointer;
}
.kx:hover {
	text-decoration: underline;
	text-decoration-style: wavy;
}
.linky {
	cursor: pointer;
}
.eplus_switch:hover {
	color: orchid;
}
.zplus_switch:hover {
	color: dodgerblue;
}
.splus_switch:hover {
	color: orange;
}
input.wd_new {
	display: block;
	margin: 0px;
	padding: 3px;
	height: 20px;
	width: 110px;
	border: 1px solid #BBB;
	font: 12px, Arial,Sans-serif;
	cursor: pointer;
	opacity: 0.3;
}
textarea {
	font-family: "Arial", Arial, sans-serif;
	font-size: 14px;
}
input.wd_new:hover {
	opacity: 1;
}

input[type="file"]#upld {
    display: none;
}

#upld_btn {
	display: table;
	width: 100%;
	height: 38px;
	font-size: 15px;
	margin: 15px 0;
	border: 2px solid #CCC;
	color: #FFF;
	background-color: #626664; /* #0099BF */
	cursor: pointer;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
    cursor: pointer;
}

#upld_btn:hover {
	background-color: #8B9D9B; /* #00CAFC; */
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
}

#upld_btn span {
	display: table-cell;
	vertical-align: middle;
}

input.txt-field_new, textarea.txt-field_new {
	box-sizing: border-box; /* border-width fix */
	width: 99%;
	height: 38px;
	font-size: 15px;
	color: #666;
	margin: 8px 0;
	border: 2px solid #CCC; /* */
	padding: 5px 5px 5px 36px;
	-webkit-transition: border 0.2s linear, visibility 0.2s linear;
	-moz-transition: border 0.2s linear, visibility 0.2s linear;
	-o-transition: border 0.2s linear, visibility 0.2s linear;
	transition: border 0.2s linear, visibility 0.2s linear;
	}

textarea.txt-field_new {
	height: 200px;
	}

input.txt-field_new:focus, input.txt-field_new:hover, input.txt-field_new:focus, textarea.txt-field_new:hover {
	border: 2px solid #8B9D9B; /* #00CAFC; */
	-webkit-transition: border 0.2s linear, visibility 0.2s linear;
	-moz-transition: border 0.2s linear, visibility 0.2s linear;
	-o-transition: border 0.2s linear, visibility 0.2s linear;
	transition: border 0.2s linear, visibility 0.2s linear;
	}


/* Login */
div#login {
	width: 300px;
	margin: 45px auto;
	text-align: center;
	}

div#login input {
	box-sizing: border-box; /* border-width fix */
	width: 100%;
	height: 38px;
	font: normal 15px Roboto Condensed, sans-serif;
	color: #666;
	margin: 8px 0;
	border: 2px solid #CCC;
	padding: 5px 5px 5px 36px;
	/* <svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' version='1.1' viewBox='0 0 30 30'><circle fill='#CCC' cx='18' cy='17' r='6'/></svg> */
	-webkit-transition: border 0.2s linear, visibility 0.2s linear;
	-moz-transition: border 0.2s linear, visibility 0.2s linear;
	-o-transition: border 0.2s linear, visibility 0.2s linear;
	transition: border 0.2s linear, visibility 0.2s linear;
	}

div#login input.user {
	background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20version%3D%271.1%27%20viewBox%3D%270%200%2030%2030%27%3E%0A%20%20%20%3Cpath%20fill%3D%27%23CCC%27%20d%3D%27M16%2020c-1%2C0%20-1%2C0%20-1%2C0%20-1%2C0%20-2%2C1%20-3%2C2%20-1%2C0%20-1%2C0%20-1%2C1%20-1%2C0%20-1%2C1%20-1%2C1%200%2C1%200%2C1%200%2C1%201%2C1%201%2C1%201%2C1l0%200c1%2C1%202%2C1%203%2C1%203%2C1%207%2C1%2010%2C0%201%2C0%203%2C-1%204%2C-2%200%2C0%200%2C0%200%2C-1%200%2C-1%20-1%2C-1%20-1%2C-2%20-1%2C-1%20-3%2C-2%20-4%2C-2%200%2C0%200%2C0%200%2C0%200%2C0%200%2C0%20-1%2C0%200%2C0%200%2C0%200%2C0%20-1%2C1%20-2%2C1%20-3%2C1%20-1%2C0%20-2%2C0%20-3%2C-1l0%200c0%2C0%200%2C0%200%2C0z%27%2F%3E%0A%20%20%20%3Cpath%20fill%3D%27%23CCC%27%20d%3D%27M19%2010c-1%2C0%20-2%2C1%20-3%2C1%200%2C1%200%2C1%200%2C1%200%2C0%20-1%2C0%20-1%2C0%200%2C1%200%2C1%200%2C2%200%2C0%200%2C1%200%2C2%200%2C1%201%2C2%201%2C3%201%2C0%201%2C1%202%2C1%200%2C0%201%2C0%202%2C0%201%2C0%201%2C0%201%2C-1%200%2C0%201%2C0%201%2C0%200%2C0%200%2C0%200%2C0%200%2C-1%201%2C-1%201%2C-2%200%2C-2%200%2C-3%20-1%2C-5%200%2C-1%20-1%2C-1%20-1%2C-1%20-1%2C-1%20-2%2C-1%20-2%2C-1z%27%2F%3E%0A%3C%2Fsvg%3E") no-repeat;
	background-color: #FFF;
	}
div#login input.ukey {
	background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20version%3D%271.1%27%20viewBox%3D%270%200%2030%2030%27%3E%0A%3Cpath%20fill%3D%27%23CCC%27%20d%3D%27M12%2019c1%2C-1%203%2C-2%205%2C-1l0%200%208%20-8%201%200%20-8%208%200%200%208%20-8%201%200%201%201%200%202%20-1%201%20-1%20-1%200%201%200%201%20-1%200%20-1%200%20-1%201%200%202%20-1%200%20-1%200%200%201%200%201%20-1%201%200%200c1%2C2%200%2C4%20-1%2C5%20-2%2C2%20-5%2C2%20-7%2C0%20-2%2C-2%20-2%2C-5%200%2C-7zm1%204c0%2C0%201%2C0%202%2C0%200%2C1%200%2C2%200%2C2%20-1%2C1%20-2%2C1%20-2%2C0%20-1%2C0%20-1%2C-1%200%2C-2z%27%2F%3E%0A%3C%2Fsvg%3E") no-repeat;
	background-color: #FFF;
	}

div#login input:focus, div#login input:hover {
	border: 2px solid #8B9D9B;
	-webkit-transition: border 0.2s linear, visibility 0.2s linear;
	-moz-transition: border 0.2s linear, visibility 0.2s linear;
	-o-transition: border 0.2s linear, visibility 0.2s linear;
	transition: border 0.2s linear, visibility 0.2s linear;
	}

div#login button {
	width: 100%;
	height: 38px;
	font: normal 15px Roboto Condensed, sans-serif;
	margin: 15px 0;
	border: 2px solid #CCC;
	color: #FFF;
	background-color: #626664; /* #0099BF */
	cursor: pointer;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
	}

div#login button:hover {
	background-color: #8B9D9B; /* #00CAFC; */
	-webkit-transition: background 0.2s linear, visibility 0.2s linear;
	-moz-transition: background 0.2s linear, visibility 0.2s linear;
	-o-transition: background 0.2s linear, visibility 0.2s linear;
	transition: background 0.2s linear, visibility 0.2s linear;
	}

/* pupil input */

.pupil_input_container {
  background: #FAFAFA;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pupil_input_container > .link-right {
    font: normal 16px Roboto Condensed, sans-serif;
	color: orange;
	line-height: 1.5em;
    margin: 10px;
}

.pupil_input_container > .link-left {
    font: normal 16px Roboto Condensed, sans-serif;
	color: orange;
	line-height: 1.5em;
    margin: 10px;
}

.pupil_input_container > .right {
  position: absolute;
  right: 0;
}

.pupil_input_container > .left {
  position: absolute;
  left: 0;
}

@media (max-width: 480px) {
  .pupil_input_container {
    flex-direction: column;
  }
  .pupil_input_container > .right {
    position: static;
    align-self: flex-end;
  }
}

div#pupil_input_header {
	max-width: 800px;
    margin: 10px auto 5px auto;
	text-align: center;
}

div#pupil_input_form {
    margin: auto;
}

div#pupil_input_form input {
    margin: 0 1em 0 1em;
}

div#pupil_input_form input:focus, div#pupil_input_form input:hover {
	border: 2px solid #8B9D9B;
	-webkit-transition: border 0.2s linear, visibility 0.2s linear;
	-moz-transition: border 0.2s linear, visibility 0.2s linear;
	-o-transition: border 0.2s linear, visibility 0.2s linear;
	transition: border 0.2s linear, visibility 0.2s linear;
	}

img#pupil_input_logo_fach {
    width: 20em;
    height: auto;
    margin: 1em;
}

img#pupil_input_navi_l {
    width: 5em;
    height: auto;
    margin: 0 2 0 2;
}

.pupil_input_label {
    font: normal 16px Roboto Condensed, sans-serif;
    font-weight: bold;
	color: #3B3B3B;
	margin: 0;
	line-height: 1.5em;
}

p#pupil_input_name {
    font: normal 12px Roboto Condensed, sans-serif;
    font-weight: bold;
	color: #3B3B3B;
	margin: 0;
	line-height: 1.5em;
}

p#pupil_input_q {
    font: normal 24px Roboto Condensed, sans-serif;
    font-weight: bold;
	color: #3B3B3B;
	line-height: 1.5em;
}

p#pupil_input_mzp {
	font: normal 8px Roboto Condensed, sans-serif;
	color: #3B3B3B;
	margin: 0;
	line-height: 1.5em;
}

hr {
	border: 0px;
	border-top: solid 1px #E0E0E0;
	border-bottom: solid 1px #FFF;
	margin: 25px 0;
	}

hr#pupil_input {
    border: 0px;
	border-top: solid 1px #E0E0E0;
	border-bottom: solid 1px #FFF;
	margin: 0.5em;
}

.body {
    min-height: 100%;
}

.footer {
    width: 100%;
    bottom: 5;
}

.header_light {
    color: #FDFDFD;
}

.hidden {
    display: none;
}

.show-modal {
  font-size: 2rem;
  font-weight: 600;
  padding: 1.75rem 3.5rem;
  margin: 5rem 2rem;
  border: none;
  background-color: #fff;
  color: #444;
  border-radius: 10rem;
  cursor: pointer;
}

.close-modal {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

.modal {
  position: absolute;
  overflow-y: scroll;
  /* top: 30%; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  background: #FAFAFA;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 5;
}

.btn-img {
    border: none;
    background-color: white;
}

/* Style the input fields */
.tab {
  width: 100%;;
  border: none;
}

.tab-flex {
    display: flex;
    flex-flow: nowrap row;
    justify-content: center;
    align-items: center;
}

.tab-navi {
    border: none;
    width: 56px;
    height: 56px;
    background-color: #FAFAFA;
    cursor: pointer;
}

/* Mark input boxes that gets an error on validation: */
.tab.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

/* Mark the active step: */
.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: orange;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Kummerkasten ------------------------------------------------------------------------------------------------------------------------------------- */

#kummer_div{
		  z-index:1000;
		  position: fixed;
		  bottom: 10px;
		  right: 10px;
		  width: 50px;
		  height: 50px;
		  text-align: center;
		  padding: 10px 10px;
		  background: #bb0000;
		  border-radius: 5px;
		}

		#kummer_div a{
		  text-decoration: none;
		  color: #fff;
		  text-transform: capitalize;
		  letter-spacing: 1px;
		}
				
		#kummer_close {
		  position: absolute;
		  top: 5%;
		  left: 90%;
		  color: #fff;
		  height: 30px;
		  width: 30px;
		  font-size: 30px;
		  line-height: 30px;
		  text-align: center;
		}

		#kummer_close:hover, #kummer_close:focus {
		  color: #000000;
		  cursor: pointer;
		}