* { font-family: sans-serif; }

:root {
  --popupbackcolor:rgba(43,126,125,0.4);
  --buttongrey: rgb(128,128,128);
  --menucolor: rgba(43,126,125,245);
  --cocolor:rgba(43,126,125,245);
  --sitebackground:rgb(255,255,255);
  --appbackground:rgba(255,255,255,255);
  --menubackcolor:rgb(55,162,162);  
  --smartbackground: rgb(55,162,162);
  --smartgrey: rgb(245,245.245);
  --readonlybackground: rgba(43,126,125,0.4);
  --starttext: rgb(102,102,102);
  --startbackground: rgba(55,162,162,0.1);  
}
fieldset { 
  border: none;
}    
#id_cookie_title {
    font-size:1.2em;
    font-weight:bold;
}
.cls_btn_check {
    font-size: 1.2em;
}
#id_btn_cancel_login,
#id_btn_login {
    font-size: 1.2em;
}
// Anfang
.cls_check_container {
  
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cls_check_container input {
  cursor: pointer;
  
}
/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
.cls_link_dl {
    margin-left:40px;
}


// Ende



        
.cls_checkbox {
  float: left;
  height:20px;
  margin-right:40px;

}
.cls_td_header {
    font-size: 2.2em;
    font-weight: bold;
    color: black;
    
}
.cls_td_header_formell {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--starttext);
    text-align:center;
} 
.cls_td_header_formell_left {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--starttext);
    text-align:left;
}
.cls_td_point {
    margin-top:40px;
    font-size: 1.8em;
    font-weight: bold;
    color: var(--starttext);
    
}
.cls_td_point_formell {
    margin-top:40px;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--starttext);
    
}  
.cls_prolog_formell{
    font-size:1em;
   
    margin-top:20px;
    
   width:100%;
   
   text-align:left;
}
.cls_prolog_dskt {
    font-size:1.4em;
   
    margin-top:40px;
    margin-left:20%;
    margin-right:20%;
   width:60%;
   
   text-align:center;
}
.cls_start_img_dskt {
    width:70%;
    max-width:1200px;
    height:auto;
    margin-top:20px;
}
.cls_prolog_smart {
    font-size:1.4em;
   
    margin-top:40px;
    
   width:100%;
   
   text-align:center;
}
.cls_start_img_smart {
    width:90%;
    max-width:800px;
    height:auto;
    margin-top:20px;
}


.cls_td_start {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--starttext);
    animation: start_slow 4s linear 1;
}
@keyframes start_slow {
  0%   {opacity:0;}
  100% {opacity:1;}
}
.cls_img_start {
    width:20%;
}
// Start Startbild-Test
.gallery {
  position: relative;
  background: none; 
  border: none; 
  
}
 
.gallery figure,
.gallery cls_btn_big {
 position:absolute;
width:95%;

}

.cls_gallery_img {
    width:70%;
    max-width:1500px;
    height:auto;
}
nav label:hover {
    background:var(--menubackcolor);
 } 
.gallery figcaption {
  position: absolute;
  left: 1em;
  font-size: 2em;
  font-weight: bold;
  bottom: 0.5em;
  color: white;
}
      
@-webkit-keyframes bilder {
    
   0% {opacity: 1;} 
  34% {opacity: 1;}
  35% {opacity: 0;}
 100% {opacity: 0;}
}

@keyframes bilder {
    
   0% {opacity: 1;} 
  34% {opacity: 1;}
  35% {opacity: 0;}
 100% {opacity: 0;}
}

.gallery figure:nth-of-type(1) {  
  animation: bilder 15s 7s infinite;
  
  
}

.gallery figure:nth-of-type(2) {  
  animation: bilder 15s 2s infinite;
  
  
}

.gallery figure:nth-of-type(3) {  
  animation: bilder 15s 12s infinite;
  
  
}

@keyframes wechseln {
    0% {opacity: 1; transform: scale(1,1); z-index: 20;}
   20% {opacity: 1; transform: scale(1,1);}
   34% {opacity: 0; transform: scale(0,0);}
  100% {opacity: 1; transform: scale(0,0);}
  
}

.gallery figure:nth-of-type(4) { 
  animation: wechseln 15s 10s infinite;
  
}

.gallery figure:nth-of-type(5) {  
  animation: wechseln 15s 5s infinite;
  
}

.gallery figure:nth-of-type(6) {  
  animation: wechseln 15s infinite;
  
}
//--Ende Startbild-Test
#main_img {
  width:100%;
  height:auto;
  position:relative;
  top:140px;
  z-index:10;  
  
  
} 

#main_img figure {
  position: relative; 
  width: 100%;
  margin: 0;
  padding: 0;
}



#main_img img {
  height:auto;
  width: 100%;
  margin: 0;
  padding: 0;  
}
#main_img .animate1 {
   animation: cycle1 4s linear 1;
   position:absolute;
}

#main_img .animate2 {
   animation: cycle2 8s linear 1;
   position:absolute;
}
#main_img .animate3 {
   animation: cycle3 12s linear 1;
   position:absolute;
}

@keyframes cycle1 {
   0%  { opacity:1 ;} 
   100%  { opacity: 0; } 
}
@keyframes cycle2 {
   0%  { opacity:0 ;} 
   100%  { opacity: 1;} 
   
}
@keyframes cycle3 {
   0%  { opacity:0 ;} 
   85%  { opacity: 0; }
   100% {opacity:1;} 
}

input:read-only {
    background-color:var(--readonlybackground);
  
}
.cls_input_large::-webkit-calendar-picker-indicator {
	display: none;
}
textarea {
  font-size:1em;
}

button:focus {
  
  outline-width: 0;
}
.cls_div_graph {
    max-width:6000px;
}

#id_show_popup {
  /*background-color: var(--smartbackground);*/
}
/* Neu eingefügt, evtl. wieder weg*/
.cls_td_label {
    font-size:.8em;
    color: var(--cocolor);
    padding-left:15px;
}
.cls_td_label_xl {
    font-size: 1em;
    color: var(--cocolor);
    padding-left:15px;
    padding-bottom:0;
}
.cls_td_label_xl_left {
    font-size: 1em;
    color: var(--cocolor);
    padding-left:0px;
    padding-bottom:0;
}
.cls_input_xl {
    padding-top:0;
    
}
.flex-container {
  display: flex;
  flex-direction: column;
}

.cls_td_navi {
  width:120px;
  
}
.cls_td_between {
  
}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
@media all and (width: 90%) {
.flex-container {
    flex-direction: row;
    flex-wrap: wrap;
    height:20px;
  }
} 
#id_btn_forgot {
    color: var(--cocolor);
}
/*
.flex-item {
	border-style: solid;
  border-width: 0.5px;
  
  border-color:lightgrey;
	margin: .5em;
	padding: .5em;  
	background: rgb(255,255,255);
  max-width:26em;
} */
.flex-item {
  border:0;
  height:20px;
	margin: .5em;
	padding: .5em;  
	background: rgb(255,255,255);
  
}
/* Ende neu eingefügt */


.cls_free_label {
  border: 1px;
  margin: 1em 0 1em 0;
  position: relative;
  
}
.cls_free_label label {
  position: absolute;
  color: var(--cocolor);
  
  background: #fff;
  padding: 0 .5em;
  font-size: .8em;
  bottom-margin: -.6em;
  left: .5em;
}
.cls_free_label label.like-placeholder {
font-size: 1em;
top: .5em;
left: .5em;
}
.cls_free_label input {
  padding: .5em;
}


.cls_top_label {
  border: 1px;
  margin: 1em 0 1em 0;
  position: relative;
  height:30px;
}
.cls_top_label label {
  position: absolute;
  color: var(--cocolor);
  
  background-color: rgba(255, 255, 255, 0);
  padding: 0 .5em;
  font-size: .8em;
  top: -1.1em;
  left: .5em;
}
.cls_top_label label.like-placeholder {
font-size: 1em;

top: -1.1em;
left: .5em;
background-color: rgba(255, 255, 255, 0);
} 
.cls_top_label input {
  padding: .5em;
  top: -1.1em;
}


.b_submit {
    font-size: 0.8em;
  border: 1px solid var(--cocolor);
  border-radius: 0.2em;
  color:black;
  background-color: var(--appbackground);
  padding: 10px 10px;
  width: 160px;
  
}
.b_submit:hover,
.cls_btn_td_small:hover,
.cls_btn_small,
.cls_btn_medium:hover ,
.cls_btn_big:hover
.cls_btn_td_medium:hover ,
.cls_btn_td_mini:hover{
  background-color: var(--menubackcolor);
  color:black;
}

body {
  background: var(--sitebackground)
  color:black;
  
}
label,textarea,input, select {
  margin-bottom:0;
}
textarea {
  width:100%;
  height:300px;
  resize: none;
 
}

input[type=text],input[type=password],textarea {
  width: 100%;
    
  padding: 12px 20px;
  margin: 6px 0;
  display: inline-block;
  //border: 1px solid #ccc;
  //box-sizing: border-box;
}
#first_line {
  position:fixed;
  top:10px;
  left:0;
}
#id_tab_menu {
  position:relative;
  top:150px;
  
}
#id_header_mldg {
  position:relative;
  top:120px;
  background-color: white;
  color:red;
}
.cls_label_input {
  font-size:.8em;
  margin-bottom:-10px;
}
.cls_label_select {
  font-size:1em;
  color: var(--cocolor);
}
.cls_label_small {
  font-size:.8em;
  //background-color: #ffffff;
    background-color: red;
}
.cls_smart_button {
  position:fixed;
  top: 0;
  width:100px;
  text-align: center;
  background-color: var(--appbackground);
  color: var(--cocolor);
  padding: 0 0;
 
  border: none;
  cursor: pointer;
  font-size:1em;
}
#id_end_app {
  position:fixed;
  top: 0px;
  right:0;
  width:150px;
  text-align: center;
  background-color: var(--appbackground);
  color: var(--cocolor);
  padding: 0 0;
  border: none;
  cursor: pointer;
  height:25px;
  font-size:1em;  
 
}
.header-input {
  display: inline-block;
  width: 100%;
  
  position: fixed;
  top:30px;
 
}

.cls_tbl_sum {
    font-weight:bold;
    margin-bottom: 20px;
    background-color: var(--menubackcolor);
}
.header-input label {
  position: absolute;
  font-weight: normal;
  color:var(--cocolor);
  background: #fff;
  /*padding: 0 .5em;*/
 
  top: -.4em;
  left: .5em;
  transition: all .3s ease;
}
.header-input label.like-placeholder {
  color: var(--buttongrey);
  
  font-weight:normal;
  top: 1.1em;
  left: .5em;
  cursor:text;
}
.header-input input {
  height:35px;
  margin-bottom:0;
  margin-right:0;
}
.fancy-input {
  display: inline-block;
  width: 100%;
  
  
  margin: 1em 0 1em 0;
  position: relative;
  
}
.fancy-input label {
  position: absolute;
  font-weight: bold;
  background: #fff;
  padding: 0 .5em;
  font-size: .8em;
  top: -.8em;
  left: .5em;
  transition: all .3s ease;
}
.fancy-input label.like-placeholder {
  color: var(--buttongrey);
  font-size: .8em;
  top: .5em;
  left: .5em;
  cursor:text;
}
.fancy-input input {
  
  
  padding: .5em;
}
#id_kb,
#id_pr,
#id_report {
  width:100%;
  
}
/* Tabs mit radio-Buttons */
/* Tabs mit radio-Buttons */
.tabbed figure { 
   display: block; 
   margin-left: 0; 
   border-bottom: 1px solid silver;
   clear: both;
   
  
}

.tabbed > input,
.tabbed figure > div { display: none; }

.tabbed figure>div {
  padding: 10px;
  font-size:1em;
  width: 100%;
  border: 1px solid silver;
  background: #fff;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
  //du
  
}
#id_menu_tab {
  width: 95%;
   
  overflow: auto;
}
#tab_pr:checked ~ figure .tab_pr,
#tab_kb:checked ~ figure .tab_kb,
#tab_report:checked ~ figure .tab_report { display: block; }

nav label {
   font-size:1em;
   width:170px;
   
   float: left;
   padding: 5px 15px;
   border-top: 1px solid silver;
   border-right: 1px solid silver;
   border-radius: 0em 1em 0em 0em;
   /*background: hsl(210,50%,50%);*/
   background: var(--menucolor);
   color: #eee;
}

/*nav label:nth-child(1) { border-left: 1px solid silver; }
nav label:hover { background: var(--menubackcolor) };
nav label:active { background: #ffffff; }*/

#tab_pr:checked ~ nav label[for="tab_pr"],
#tab_kb:checked ~ nav label[for="tab_kb"],
#tab_report:checked ~ nav label[for="tab_report"] {
  background: white;
  
  font-size:1em;
 
  color: #111;
  position: relative;
  border-bottom: none;
}

#tab_pr:checked ~ nav label[for="tab_pr"]:after,
#tab_kb:checked ~ nav label[for="tab_kb"]:after,
#tab_report:checked ~ nav label[for="tab_report"]:after {
  
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  
  background: white;
  left: 0;
  bottom: -1px;
}


.cls_form_classic {
    position:relative;
    width:100%;
}
.cls_table_form {
    position:relative;
    border: 1px solid var(--cocolor);
    width:95%;
    margin-top:40px;
    /* in Chrome gab es Probleme, weil die Höhe 100% innerhalb id_popup eingestellt wurde. Damit hat sich alles auseinander gezogen. Mit height:1px ist Problem behoben*/
    height:1px;
    /*margin-bottom:60px;*/
    left:3%;
    right:2%;
    text-align: left;
    background-color:var(--smartgrey);
}
.cls_table_footer {
    position:relative;
    border: 1px solid var(--cocolor);
    width:95%;
    margin-top:10px;
    /* in Chrome gab es Probleme, weil die Höhe 100% innerhalb id_popup eingestellt wurde. Damit hat sich alles auseinander gezogen. Mit height:1px ist Problem behoben*/
    height:1px;
    /*margin-bottom:60px;*/
    left:3%;
    right:2%;
    text-align: left;
    background-color:var(--smartgrey);
}

.table_classic {

    position:relative;
  width:95%;
    margin-top:10px;
    margin-bottom: 10px;
    /* in Chrome gab es Probleme, weil die Höhe 100% innerhalb id_popup eingestellt wurde. Damit hat sich alles auseinander gezogen. Mit height:1px ist Problem behoben*/
    height:1px;    
    /*margin-bottom:60px;*/
    left:0%;
    right:2%;
    text-align: left;
    
}
.cls_tr_none {
    display:none;
}
.cls_tr_classic {
  line-height:1em;
  valign:top;
  
  
  
}
.cls_tr_form {
  line-height:1em;
  valign:top;
  height: 10px;
}
.cls_tr_footer {
  line-height:1em;
  valign:top;
  height: 20px;
}
.cls_tr_form_navi {
  line-height:1em;
  valign:top;
  height: 50px;
}
.cls_input_header {
  font-size:.8em;
  width:90%;
  height:35px;
  
  padding-bottom:0;
}
.cls_input_small {
  font-size:1em;
  max-width:150px;
  height:29px;
  //padding-bottom:0;
}

.cls_input_col_num {
 font-size:1em;
  max-width:150px;
  height:30px;
  padding-bottom:0;
  text-align:right;
  border:none;
}                                        
.cls_input_field_num {
 font-size:1em;
  max-width:150px;
  height:20px;
  padding-bottom:0;
  text-align:right;
  
}
.cls_input_medium {
  font-size:1em;
  
  max-width:300px;
  height:29px;
  
  padding-bottom:0;
}
.cls_input_large,.cls_input_large[type = password] {
  font-size:1em;
  width:80%; 
  max-width:700px;   
  height:30px;
  padding-bottom:0;
}
.cls_select_large {
  font-size:1em;
  /*width:100%; */
  width:90%;
  min-width:300px;
  max-width:400px;   
  height:30px;
  padding-bottom:0;
}
.cls_input_free {
  font-size:1em;
  /*width:100%;*/
  width:90%;
  height:300px;
  padding-bottom:0;
}
.cls_tr_bottom {
  line-height:0em;
  valign:bottom;
  margin-bottom:0;
}
.cls_tr_header {
  line-height:2em;
  font-size:1.2em;
  font-weight: bold;
  valign:top;
}
.cls_tr_header_th {
  line-height:2.2em;
  font-size:1.4em;
  font-weight: bold;
  valign:top;
}
.cls_td_titel {
  max-width:100px;
  background-color: var(--menubackcolor);  
}
.cls_td_left {
  min-width:150px;
}
.img_td {
    border: 0;
    text-align: left;
    width: 30%;
}
.tip_img {
    border: 0;
    text-align: center;
}
#id_hinweis {
  color:red;
}
#id_popup_titel {
  margin-top:7px;
  margin-left:10px;
  font-size:1.4em;
  font-weight: bold;
  text-align: center;
  
}
.container {
  display: inline-block;
  cursor: pointer;
}
.barcontainer {
  position:fixed;
  cursor: pointer;
  right:20px;
  top:20px;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: var(--menucolor);
  margin: 6px 0 ;
  transition: 0.4s;
  
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
#logo_site {
  position: fixed;
  top:20px;
  left:20px;
}
#id_menue_td_leer {
  border:0;
  width:30%;
  
}
#id_menue_td_right {
  border:0;
  width:40%;
  
}
#id_primonti_small {
  postion:fixed;
  width:400px;
  left:0px;
  margin-left:0;
}
#id_popup_menue {
  position: fixed;
  color:var(--menucolor);
	text-decoration: none;	
  font-size: 1.2em;
  top: 25px;
  right:20px; 
}

#id_popup_button {
  postion:fixed;
  margin-top: 0;
  margin-right:0;  
}
/* Set a style for all buttons */
button {
  background-color: var(--cocolor);
  
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
.cls_btn_td_small {
  font-size:1.5em;
  border: 1px solid var(--cocolor);
  position:static;
  background-color: var(--appbackground);
  color: var(--cocolor);
  margin: 0 0 0 0;
  padding: 0 0 30px 0;  
  /*padding: 0px 20px 30px 0;
  padding-top:0;*/
  cursor: pointer;
  height:40px;
  width: 40px;
  
}
.cls_btn_td_mini {
  font-size:1.5em;
  align: center;
  border: 1px solid var(--cocolor);
  position:static;
  background-color: var(--appbackground);
  color: grey;
  margin: 0 0 0 0;
  padding: 0 0 0 0;

  cursor: pointer;
    width: 30px;
    height: 30px;
  
}
.cls_td_rowmark {
  font-size:2em;
  color: var(--cocolor);
  
}
.cls_btn_small {
  font-size:1em;
  border: 1px solid var(--cocolor);
  position:static;
  background-color: var(--appbackground);
  color: white;
  padding: 0 0;
  cursor: pointer;
  height:35px;
  width: 40px;
} 
.cls_btn_medium {
  font-size:0.8em;
  border: 1px solid var(--cocolor);
  position:static;
  background-color: var(--appbackground);
  color:black;
  padding: 0 0;
  cursor: pointer;
  height:30px;
  width: 150px;
  
}
.cls_btn_big {
  margin-top: 40px;
  margin-buttom:100px;
  font-size:1.5em;
  border: 1px solid black;
  position:relative;
  background-color: var(--smartbackground);
  color:black;
  padding: 0 0;
  cursor: pointer;
  height:50px;
  width: 300px;
  
}
.cls_btn_td_medium {
  font-size:0.8em;
  border: 1px solid var(--cocolor);
  position:static;
  background-color: var(--appbackground);
  color:black;
  padding: 0 0;
  margin: 6px;
  cursor: pointer;
  height:30px;
  width:140px;
  
}
.cls_btn_td_medium_smart {
  font-size:0.7em;
  border: 1px solid var(--cocolor);
  position:static;
  background-color: var(--appbackground);
  color:black;
  padding: 0 0;
  cursor: pointer;
  height:30px;
  width: 90px;
  
}
button:hover {
  opacity: 0.8;
  
}
.cls_input_hidden {
  position:fixed;
  visibility: hidden;
 
  
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  top:0;
  width:100%;
  height:100%;
  
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}
/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  min-height:40px;
  margin: 24px 0 12px 0;
  position: relative;
  
}
.closecontainer {
  top:100px;
  text-align: right;
   min-height:40px;
  margin: 24px 0 12px 0;
  position: fixed;
  right:20%;
  z-index:100;
  
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 400px;
  
}
.cls_close {
  position: fixed;
  right: 25px;
  top: 80;
  color: #000;
  font-size: 35px;
  font-weight: bold;
  z-index: 100;
}
.cls_close:hover,
.cls_close:focus {
  color: red;
  cursor: pointer;
}
/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 2.2em;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
     
  }
}
#id_primonti_logo {
  position:fixed;
  width:150px;
  height:auto;
  left:40px;
  top:10px;
}
#id_primonti_small {
  position:relative;
  width:150px;
  height:auto;
  left:5px;
}
.underlined-example-wrapper {
  /*padding: 21px 20px 19px;*/
  padding: 3px 3px 3px;
  display: inline-block;
}

.underlined-example {
	position: relative;
	color:var(--menucolor);
	text-decoration: none;
	font-size: 1em;
  display:inline-block;
}

.underlined-example:hover {
	color:var(--menucolor);
}

.underlined-example::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 3px;
	bottom: 0;
	left: 0;
	/*background-color: rgb(128,128,128);*/
  background-color: var(--cocolor);
  visibility: hidden;
  transition: all 0.3s ease-in-out 0s;
  transform: scaleX(0);
}

.underlined-example:hover::before,
.post-preview:hover .underlined-example::before {
  visibility: visible;
  transform: scaleX(1);
}


.cls_main_menue {
  position: relative;
  color:var(--menucolor);
	text-decoration: none;	
  font-size: 1em;

}
/*#id_menue {
  position: fixed;
  width:100%;
  margin-top:10px;
  margin-left:auto;
  margin-right:0;
  right:0;
} */
.cls_popup_header {
  position:fixed;
  display:flex;
  text-align:center;
  top:20px;
  border: 1px solid;
  background-color: var(--menucolor);
  font-size: 1em;
  animation-name: animatezoom;
  animation-duration: .5s;
  height:40px;
  width:80%;
  // Änderung Duschl 6.1.2023
  // min-width:400px;
  min-width:340px;
  max-width:1000px;
 
  z-index:80;
}
.cls_popup {
  position:fixed;
  display:flex;
  text-align:center;
  top:60px;
  
  border: 1px solid;
  background: white;
  font-size: 1em;
  animation-name: animatezoom;
  animation-duration: .5s;
  height:100%;
  width:80%;
  
  // Änderung Duschl 6.1.2023
  // min-width:400px;
  min-width:340px;
  max-width:1000px;
  
  
  
  overflow: auto;
 
  z-index:80;
}
.cls_popup_content {
  display:flex;
  text-align:center;
  top:60px;
  
  //border: 1px solid;
  background: white;
  font-size: 1em;
  
  height:100%;
  width:80%;
  // Änderung Duschl 6.1.2023
  // min-width:400px;
  min-width:340px;
  max-width:1000px;  
  overflow: auto;
  z-index:80;
}
.cls_popup_footer {
  position:fixed;  
  text-align:center;
  
  //border: 1px solid;
  background: white;
  font-size: 1em;
  height: 20px;
  width:80%;
  // Änderung Duschl 6.1.2023
  // min-width:400px;
  min-width:340px;
  max-width:998px;  
  z-index:80;
}
.cls_div_start   {
  position:fixed;
  
  top:80px;
  bottom:90px;
  overflow:auto;
  text-align:center;
  background: var(--startbackground);
  font-size: 1em;
  width: 99%;
  
  padding-top:20px;
  z-index:90;  
}

.cls_table_body  {
  position:relative;
  overflow:auto;
  text-align:center;
  font-size: 1em;
  width: 99%;
  
  padding-top:20px;
  z-index:90;  
}
.cls_table_menue {
  position:fixed;
  top:80px;
  border: 0;
  background: white;
  font-size: 1em;
  width: 100%;
  animation-name: animate_width;
  animation-duration: 1.5s;
  padding-top:80px;
  padding-bottom:80px;
  padding-right:20px;
  z-index:90;  
}
@keyframes animate_body_width {
  0%   {width:0%;opacity:0;}
  25%  {width:25%;opacity:0;}
  100% {width:99%;opacity:1;}
}
@keyframes animate_width {
  0%   {width:0%;opacity:0;}
  25%  {width:25%;opacity:0;}
  100% {width:100%;opacity:1;}
}

.cls_menue_table {

  position:fixed;
  // Änderung Duschl 6.1.2023
  // min-width:400px;
  min-width:340px;
  max-width:700px;
  width:30%;
  top:20px;
  left:35%;
  /*min-width: 500px;
  max-width: 800px;*/
  
}

#id_menue_td_first {
  border:0;
  
}
#id_menue_td_popup_img {
  border:0;
  width:89%;
  text-align:left; 
}

.cls_menue_td {
    border-left: 2px solid rgb(195,195,195);
    
    color: black;
    position: relative;
    
    
}
	
#id_head_site {
  position:fixed;
  border-style: solid;
  border-width: 0.5px;
  border-color:var(--cocolor);
	
  top: 0px;
  height:70px;
  width:99%;
  text-align: center;
  background-color:var(--sitebackground);
  margin-bottom: 100px;

  z-index:30;
}
#id_background {
  position: fixed;
  display: none;
  top:0;
  left:0;
  width:100%; 
  height:100%;
  background-color: var(--popupbackcolor);
z-index:105;
  /*border:2px solid;
  border-color:rgb(0,0,0);
    */
}


#id_app {
  position: fixed;
  display: none;
  top:0;
  left:0;
  width:100%; 
  height:100%;
  background-color: var(--appbackground);
  overflow: auto;
  z-index:100; 
}	
#id_popup {
  position: relative;
  /* Popup vergrößern */
  
  margin: 100px auto 100px auto;
  
  //margin:auto auto auto auto;
  width:100%; 
  max-width:1000px;
  
z-index:110;
  /*border:2px solid;
  border-color:rgb(0,0,0);
    */
}
#id_popup_select {
  position: relative;
  
  margin: 100px auto 100px auto;
  width:100%; 
  max-width:1000px;
  
z-index:120;
  /*border:2px solid;
  border-color:rgb(0,0,0);
    */
}
#id_dialog {
  position: relative;
  align: left;
  //margin: 100px auto 100px auto;
  width:100%; 
  //max-width:1000px;
  left:0;
  
  /*min-width:400px;
  max-width:1400px;
  
  margin-left:auto;
  margin-right:auto;
  */
z-index:10;
  /*border:2px solid;
  border-color:rgb(0,0,0);
    */
}
#id_output_site {
  border:0;
}


.container {
  padding: 16px;
 
}
/* Extra styles for the cancel button */
.cancelbtn {
  width: 100%;
  
  background-color: var(--buttongrey);
}
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.flex-bar {
  position:fixed;
  border-style: solid;
  border-width: 0.5px;
  border-color:var(--cocolor);
  bottom:5px; 
  width:99%;
  text-align: center;
  background-color:var(--sitebackground);
  //border-radius: 1em 1em 1em 1em;
  z-index: 20;
}
.a_legal {
  font-weight:normal;
  font-size: 1em;
  color:rgb(0,0,0);
  margin-left: 2em;
  margin-right: 2em;
  text-decoration: none;
}
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  /*font-size: 18px;*/
  font-size:1em;
  cursor: pointer;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
.sum_header {
  background-color: --var(--menubackcolor);
}

details {
    border: 1px solid gainsboro;
    grid-column: 2 / 3;
    height: min-content;
    transition: all .5s;
    cursor: default;
}

summary {
    position: relative;  
    line-height: 300%;
	padding-left: 1em;
    cursor:default;
}

summary::marker {
   color: transparent;
}

summary::after {
    width: 1rem;
    height: 1em;
    position: absolute;
    top: 0;
    left: 0em;
	color: green;
    content: '+';
	font-size: 2em;
	font-weight: bold; 
    text-align: right;
    transition: transform .2s;
}

details[open] summary::after { 
    /*transform: translate(5px,0) rotate(45deg);*/
    width: 1rem;
    height: 1em;
    position: absolute;
    top: 0;
    left: 0em;    
    content: '-';
    color: green;
	font-size: 2em;
	font-weight: bold; 
    text-align: right;
    transition: transform .2s;    
} 

details[open] summary {
    background: rgb(255, 235, 230);
    }
.cls_myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  /*font-size: 18px;*/
  font-size:1em;
  cursor: default;
}

.cls_myTable th, .cls_myTable td {
  padding: 12px;
} 

.cls_myTable tr {
  border-bottom: 1px solid #ddd;
}

.cls_myTable tr.header, .cls_myTable tr:hover {
  background-color: #f1f1f1;
}
.cls_myTable tr.sum_header:hover {
   background-color: var(--menubackcolor);
}    
.cls_myTable tr.sum_header {
   background-color: var(--menubackcolor);
}
.th_header_left {
    text-align: left;
    font-size: 1em;
}
.th_header_num {
    text-align: right;
    
}
.data_view_num {
  text-align: right;
  
}
.cls_myTable tr.th_header_left:hover {
   background-color: var(--menubackcolor);
}    
.cls_myTable tr.th_header_left {
   background-color: var(--menubackcolor);
}