html, body {
font-family: 'Open Sans', sans-serif;
font-size: 15px;   
}


.headerpop {
  height: 50px;
  background-color: #fff;
  padding: 10px 0px 0px 0px ;
  font-family: 'Open Sans', sans-serif;
}


h1{
font-family: 'Open Sans', sans-serif;
color: #1a5f79; 
margin-left:0px; 
font-weight: 100;
font-size: 22px;   
}

h2{
font-family: 'Open Sans', sans-serif;
color: #eaa30b; 
margin-left:0px;
margin-top:20px; 
font-weight: 100;
font-size: 18px;   
}

h3{
font-family: 'Open Sans', sans-serif;
color: #000000; 
margin-left:0px; 
font-weight: 100;
font-size: 18px;   
}

h3.hinweis{
font-family: 'Open Sans', sans-serif;
color: #8b1c1c; 
margin-left:0px; 
font-weight: 100;
font-size: 18px;   
}
 

.flow a {
padding-right: 5px;
display:flex;
}

@import url('https://fonts.googleapis.com/css?family=Hind:300,400');

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}



.accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 99%;
  padding: 1rem 3rem 1rem 1rem;
  color: #7288a2;
  font-size: 1.00rem;
  font-weight: 200;
  border-bottom: 0px solid #e5e5e5;
}

.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #03b5d2;
}



.accordion a.active {
  color: #03b5d2;
  border-bottom: 0px solid #03b5d2;
  width: 99%;
}



.accordion a.active::after {
 
  
}

.accordion .content {
  opacity: 0;
  padding: 0 1rem;
  max-height: 0;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  clear: both;
  -webkit-transition: all 0.2s ease 0.15s;
  -o-transition: all 0.2s ease 0.15s;
  transition: all 0.2s ease 0.15s;
  width: 99%;
}

.accordion .content p {
  
}

.accordion .content.active {
  opacity: 1;
  padding: 1rem;
  max-height: 100%;
  -webkit-transition: all 0.35s ease 0.15s;
  -o-transition: all 0.35s ease 0.15s;
  transition: all 0.35s ease 0.15s;
}
h4{
font-family: 'Open Sans', sans-serif;
color: #eaa30b; 
margin-left:0px;
margin-bottom:5px; 
font-weight: 100;
font-size: 18px;   
}

h5{
font-family: 'Open Sans', sans-serif;
color: #2e377c; 
margin-left:0px;
margin-bottom:0px;
margin-top:10px; 
font-weight: 200;
font-size: 17px; 
}

h5.page{
font-family: 'Open Sans', sans-serif;
color: #1a5f79; 
margin-left:0px; 
font-weight: 100;
font-size: 16px; 
margin-top:10px;
}

h5.frame{
font-family: 'Open Sans', sans-serif;
color: #1a5f79; 
margin-left:0px; 
font-weight: 100;
font-size: 16px; 
margin-top:8px;
}

h5.content{
font-family: 'Open Sans', sans-serif;
color: #585858; 
margin-left:0px; 
font-weight: 100;
font-size: 14px; 
margin-top:8px;
}

h7{
font-family: 'Open Sans', sans-serif;
color: #eaa30b; 
margin-left:0px;
margin-bottom:-5px; 
font-weight: 100;
font-size: 18px;   
}

.result{
font-family: 'Open Sans', sans-serif;
color: #692513; 
margin-left:0px;
margin-bottom:0px; 
font-weight: 100;
font-size: 22px;   
}

img{
float:left;	
margin-right:70px;	
}

.searchh2
{
font-size: 22px;
font-family: 'Open Sans', sans-serif;
color: #fac11a; 
margin-left:25px; 
font-weight: 100; 
 
}

 
 
}
.projecthead
{
font-size: 22px;
font-family: 'Ubuntu', sans-serif;
color: #fac11a; 
margin-bottom:-10px;
margin-left:0px;
font-weight: 100; 
 border: 0px dotted #cccccc;
}



.kreis {
     border-radius: 50%;
	 border: 8px solid #f9f9f9;
}


.projectimages 
{ 
  color: #000;
  width: 160px;
  min-height: 30px;
  padding:20px 0 0 30px;
  border: 0px dotted #cccccc;
  float:left;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  border-radius: 18px;
   
 
}


.rowone 
{ background-color: #fafafa;
  color: #000;
  width: 100%;
  min-height: 30px;
  padding:10px 10px 10px 10px;
  border-bottom: 1px dotted #cccccc;
   float:left;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
   margin-top:5px;
  
   
   
 
 
   
 
}

.rowone:hover 
{   
  background-color: #edf3f8;
  color: #fff; 
 margin-top:5px;  
}

.rowtwo 
{ background-color: #fff;
  color: #000;
  width: 100%;
  min-height: 30px;
  padding:10px 10px 10px 10px;
  border-bottom: 1px dotted #cccccc;
   float:left;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
   margin-top:5px;
 
 
   
 
}

.rowtwo:hover 
{   
  background-color: #edf3f8;
  color: #fff;  
   margin-top:5px;
}

/* remove standard-styles */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
} 
 

/* style für alle anderen Formulare */
.f_global{
  border:0px solid #cccccc;
   width: 80%;
    margin:5px;
	padding:6px 0 0 10px;
	 
}

/* style für alle anderen Formulare */
.f_globalzwei{
  border:0px solid #cccccc;
   width: 100%;
    margin:5px;
	padding:6px 0 0 10px;
	float:left; 
}





.inhalt 
{ 
  width: 80%;
  min-height: 30px;
  padding:50px 50px 0px 50px;
  
  float:left;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
border:1px solid #cccccc;
}

.headervereinbarung 
{ 

  color: #000;
  width: 98%;
  min-height: 30px;
  padding:20px 20px 20px 20px;
  background-color:#d7ecf7;  
  float:left;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
   
 
}
.headerlv
{ 

  color: #000;
  width: 98%;
  min-height: 30px;
  padding:20px 20px 20px 20px;
  background-color:#d7ecf7;  
  text-align: right;
  float:left;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
   
 
}

.logout
{ 

  color: #000;
  width: 70%;
  min-height: 20px;
  padding:20px 20px 20px 20px;
  margin-left:250px;
  border:1px solid #cccccc;
 
  float:left;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
   
 
}


.vereinbarung 
{ 

  color: #000;
  width: 100%;
  min-height: 30px;
  padding:0px 0px 0px 0px;
  border-bottom: 1px solid #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
float:left;
}

.inhaltlinks 
{ 

  color: #000;
  width: 22%;
  min-height: 100px;
  padding:10px 10px 0px 0px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  float:left;
  text-align: right;
  vertical-align: middle;
  display: table-cell;
  
}

.inhaltrechts 
{ 

  color: #000;
  width: 70%;
  min-height: 150px;
  padding:10px 0px 0px 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  border-left: 1px solid #000;
  float:left;
}

.inhaltlinksklein 
{ 

  color: #000;
  width: 22%;
  min-height: 30px;
  padding:10px 10px 0px 0px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  float:left;
  text-align: right;
  vertical-align: middle;
  display: table-cell;
  
}

.inhaltrechtsklein 
{ 

  color: #000;
  width: 70%;
  min-height: 30px;
  padding:10px 0px 0px 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  border-left: 1px solid #000;
  float:left;
  vertical-align: middle;
  display: table-cell;
}

.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 50px;
    margin-bottom: 14px;
    padding-top: 13px;
    cursor: pointer;
    font-size: 15px;
}
    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
.control_indicator {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 31px;
    background: #e6e6e6;
    border: 0px solid #000000;
}
.control-radio .control_indicator {
    border-radius: undefined%;
}

.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #cccccc;
}

.control input:checked ~ .control_indicator {
    background: #2aa1c0;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #0e6647d;
}
.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator:after {
    display: block;
}
.control-checkbox .control_indicator:after {
    left: 9px;
    top: 4px;
    width: 11px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}

.warenkorb 
{ 

  color: #000;
  width: 98%;
  min-height: 30px;
  padding:0px 0px 0px 20px;
  float:left;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  border: 1px dotted #cccccc;
  margin-bottom:30px;
   
   
 
}

.inhaltform 
{ 

  color: #000;
  width: 95%;
  min-height: 30px;
  padding:0px 0px 0px 50px;
  border-top: 0px dotted #cccccc;
  float:left;
}  
  .inhaltformzwei 
{ 

  color: #000;
  width: 100%;
  min-height: 30px;
  
  border: 0px dotted #cccccc;
  float:left;
  
   
   
 
}




.zeile1 
{ 
  color: #000000;
  width: 94%;
  min-height: 25px;
  margin-left:-30px;
  margin-bottom:30px;
  padding-left: 30px;
   padding-right: 30px;
  padding-bottom: 30px;
  float:left;
    background-color:#ffffff;  
 font-family: 'Open Sans', sans-serif;
   
 
}


.zeile1:hover 
{   
  
}

.zeile2 
{ 
  color: #000000;
  width: 100%;
  min-height: 25px;
  margin-left:-30px;
  margin-bottom:30px;
  padding-left: 30px;
  padding-bottom: 30px;
  float:left;
  border-top: 1px dotted #cccccc;
    background-color:#fff;  
 font-family: 'Open Sans', sans-serif;
   
 
}


.zeile2:hover 
{   
     
   
 }

.boxlogin
{   
  font-family: 'Open Sans', sans-serif;   
   
 }


 
 .boxlinks
{ 
  color: #000000;
  width: 50%;
  min-height: 25px;
  margin-left:-30px;
  margin-bottom:-30px;
  padding-left: 30px;
  padding-bottom: 30px;
  font-family: 'Open Sans', sans-serif;
  float:left;
  border-right: 1px dotted #cccccc;
}





.boxrechts
{ 
  color: #000000;
  width: 40%;
  min-height: 25px;
  margin-left:20px;
  padding-left: 30px;
  padding-bottom: 30px;
  border-left: 0px dotted #cccccc; 
  font-family: 'Open Sans', sans-serif;
  float:left;
  margin-bottom:-30px;

}



.iframelinks
{ 
  color: #000000;
  width: 50%;
  height: 500px;
  margin-left:-30px;
  margin-bottom:-30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  font-family: 'Open Sans', sans-serif;
  float:left;
  border-right: 1px dotted #cccccc;
}





.tip
{ 
  color: #000000;
  width: 90%;
  min-height: 25px;
  padding: 10px 10px 10px 10px; 
  font-family: 'Open Sans', sans-serif;
  background-color:#f8fcff;
  margin-bottom:20px;

}





 .resultlinks
{ 
  color: #000000;
  width: 90%;
  margin-left:0px;
  margin-bottom:5px;
  padding-left: 5px;
  padding-bottom: 5px;
  font-family: 'Open Sans', sans-serif;
  float:left;
  border-top: 1px dotted #cccccc;
  
}

.resultlinks:hover
{ 
  
 color: #496798; 
}

.resultrechts
{ 
  color: #000000;
  width: 4%;
  margin-left:0px;
  margin-bottom:5px;
  padding-left: 5px;
  padding-top: 5px;
  font-family: 'Open Sans', sans-serif;
  float:left;
   border-bottom: 0px dotted #cccccc;
  
}

.resultrechts:hover
{ 
  
}




/* remove standard-styles */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 97%;
  float:left;
} 
 

select {
  
  border: 1px solid #bbb;
  padding:.80em 1em .80em 1em;
  margin:5px 10px 20px 0px; 
   width: 97%;
  background-color:white;
  background-image:url(../images/select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
  color: #626262;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  
}

select.suche {
  
  border: 1px solid #bbb;
  padding:.40em 1em .40em 1em;
  margin:10px 20px 0px 0px; 
  width: 400px;
  background-color:white;
  background-image:url(images/select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
  color: #626262;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  
}
 

select.teilnehmer {
  
  border: 1px solid #bbb;
  padding:.40em 1em .40em 1em;
  margin:0px 5px 0px 0px; 
  width: 400px;
  background-color:white;
  background-image:url(images/select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
  color: #626262;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  
}

select teilnehmer:hover {
  background-color:#fefefe;
}


select:hover {
  background-color:#fefefe;
}

.text {
  
  border: 1px solid #bbb;
  padding:.80em 1em .80em 1em;
  margin:10px 10px 10px 0px; 
  min-width: 97%;
  background-color:white;
  color: #626262;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  
}
.text:hover {
  background-color:#ededed;
}

.textklein {
  
  border: 1px solid #bbb;
  padding:.20em 1em .20em 1em;
  margin:5px 5px 5px 0px; 
  width: 80%;
  
  background-color:white;
  color: #626262;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  
}
.textklein:hover {
  background-color:#fefefe;
}


.textganzklein {
  
  border: 1px solid #bbb;
  padding:.20em 1em .20em 1em;
  margin:5px 5px 5px 5px; 
  width: 60%;
  font-weight: 300;
  background-color:white;
   color: #626262;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  
}
.textganzklein:hover {
  background-color:#fefefe;
}

textarea.notiz
{
  
  border: 1px solid #bbb;
  padding:.80em 1em .80em 1em;
  margin:10px 10px 10px 0px; 
  width: 97%;
  background-color:white;
  color: #626262;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  height:200px;
  
}

textarea.notiz:hover {
 background-color:#ededed;
}





textarea
{
  
  border: 1px solid #bbb;
  padding:.80em 1em .80em 1em;
  margin:10px 10px 10px 0px; 
  width: 97%;
  background-color:white;
  color: #626262;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  
}

textarea:hover {
 background-color:#ededed;
}

/* hide browser-styling (arrow) in IE10 */
select::-ms-expand {
  display:none;
}

.lt-ie10 select {
    background-image: none;
}



option {
  background:#fefefe;
  border-top:1px solid #ccc;
  padding:.5em 1em .5em 1em;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  
}
 

/* Gradient transparent - color - transparent */

hr {
    
    border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255,255,0,0.3); 
}



form { 
width: 100%; 
}

form .klein{ 
width: 10%; 
}

.button {
  border:0px solid #D8D8D8;
  background-color: #0095d4;
 font-family: 'Open Sans', sans-serif;
  font-size: 14px;  
  color:#ffffff;
  margin:5px 5px 5px 0px; 
  padding:10px;
  -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
 }

.button:hover {
  border:´0px solid #D8D8D8;
  background-color: #555555;
font-family: 'Open Sans', sans-serif;
  font-size: 14px;    
  color:#fff;
   margin:5px 5px 5px 0px; 
  padding:10px;
  -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

     
 }






.button1 {
  border:1px solid #D8D8D8;
  background-color: #d4d4d4;
 font-family: 'Open Sans', sans-serif;
  font-size: 12px;  
  color:#000;
   
  padding:5px;
  -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
 }

.button1:hover {
  border:1px solid #D8D8D8;
  background-color: #555555;
font-family: 'Open Sans', sans-serif;
  font-size: 12px;    
  color:#fff;
 
  padding:5px;
  -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

     
 }



.button2 {
  border:1px solid #D8D8D8;
  background-color: #91d882;
 font-family: 'Open Sans', sans-serif;
  font-size: 14px;    
  color:#fff;
   margin:5px 5px 5px 0px; 
  padding:10px;
  -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
 }

.button2:hover {
  border:1px solid #D8D8D8;
font-family: 'Open Sans', sans-serif;
  font-size: 14px;    
  color:#fff;
   margin:5px 5px 5px 0px; 
  padding:10px;
  -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

     
 }




 
 .buttonklein {
  border:1px solid #D8D8D8;
  background-color: #0095d4;
 font-family: 'Open Sans', sans-serif;
  font-size: 12px;  
  color:#ffffff;
  margin:0px 5px 0px 0px; 
  padding:3px;
  -moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
 }

.buttonklein:hover {
 
 background-color: #fbc10a;
 
}


 .imageButton {
        opacity:.6; /* Firefox */
        filter:alpha(opacity:60); /* Internet Explorer */
    }
    .imageButton:hover {
        opacity:1; /* Firefox */
        filter:alpha(opacity:100); /* Internet Explorer */
    } 

#a.b:link, a.b:visited, a.b:hover, a.b:active
{
 font-family:Arial;
 font-size:14px;
 text-align:center;
 text-Decoration: none;
 width:100px;
 height:20px;
 padding:3px;
}
#a.b:link, a.b:visited
{
 color:#000000;
 background-color:#bcbcbc;
 border-left:2px solid #efefef;
 border-top:2px solid #efefef;
 border-right:2px solid #000000;
 border-bottom:2px solid #000000;
}
#a.b:hover, a.b:active
{
 color:#ffffff;
 background-color:#5555aa;
 border-left:2px solid #efefff;
 border-top:2px solid #efefff;
 border-right:2px solid #000055;
 border-bottom:2px solid #000055;
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 98%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	margin-bottom:2px;
}

button.accordion.active, button.accordion:hover {
    background-color: #ccc; 
}

div.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
}

.table {
    
 
font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  width: 98%; 
   
}

td {
    
 background-color:#f7f8f8;
font-family: 'Open Sans', sans-serif;
  font-size: 14px;
     border:1px solid #fcfcfc;
    margin:3px;
    padding:2px 1px 0px 10px;
    vertical-align: top;
    
}


td.ceckliste {
    
 background-color:#fff;
font-family: 'Open Sans', sans-serif;
  font-size: 14px;
     border:1px solid #fcfcfc;
}

td.ecvet {
    
 background-color:#cfdbe2;
font-family: 'Open Sans', sans-serif;
  font-size: 14px;
     border:1px solid #fcfcfc;
    margin:3px;
    padding:10px 1px 10px 10px;
    vertical-align: top;
    
}


.table_teilnehmer {
    
 background-color:#dedede;
font-family: 'Open Sans', sans-serif;
  font-size: 14px;
     border:1px solid #fcfcfc;
    margin:3px;
   padding:2px 1px 0px 10px;
    vertical-align: top;
    
}





td .hover{
    
 background-color:#f1f1f1;

}

td.head {
    
 
    font-family: 'Open Sans', sans-serif;
     font-size: 14px;
     border:0px solid #ccc;
     background-color:#ccc; 
}

td.blank {
    
 
    font-family: 'Open Sans', sans-serif;
     font-size: 14px;
     border:0px solid #ccc;
     background-color:#fff; 
}

tr {
    
 background-color:#d8e5ff;
font-family: 'Open Sans', sans-serif;
  font-size: 14px;
     border:1px solid #ccc;
    margin:3px;
    padding:3px;
    
}



page {
  background: white;
  display: block;
  margin: 0 auto;
  padding:50px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
page[size="A3"] {
  width: 29.7cm;
  height: 42cm;
}
page[size="A3"][layout="portrait"] {
  width: 42cm;
  height: 29.7cm;  
}
page[size="A5"] {
  width: 14.8cm;
  height: 21cm;
}
page[size="A5"][layout="portrait"] {
  width: 21cm;
  height: 14.8cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #497bae;
    color: #fff;
    text-align: center;
    padding: 3px;
    border-radius: 2px;
     top: -5px;
    right: 105%; 
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1000;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #497bae;
}


/* Tooltips container */
.tooltips {
    position: rightSS;
    display: inline-block;
    border-bottom: 0px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltips text */
.tooltips .tooltiptexts {
    visibility: hidden;
    width: 200px;
    background-color: #497bae;
    color: #fff;
    text-align: center;
    padding: 3px;
    border-radius: 2px;
     top: -5px;
    right: 105%; 
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1000;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltips:hover .tooltiptexts {
    visibility: visible;
}

.tooltips .tooltiptexts::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #497bae;
}

#container {
    background-color: #f3f3ed;
  padding:20px 20px 20px 30px;
  border: 1px solid #e8e8e2;
    overflow: auto;
	margin-bottom:30px;
 
}

 input.larger {
      width: 20px;
      height: 20px;
	  background-color: #f3f3ed;
	  }
	  
details[open] summary ~ * {
  animation: open 0.3s ease-in-out;
}

@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  width: 99%;
  padding: 5 5 5 5;
  border-top: 1px solid #3482c5;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  font-weight: 100;
  list-style: none;
  color: #123867;
  background-color: #fff;
  margin:3px;

}

details summary:after {
  content: "+";
  color: #3482c5;
  position: absolute;
  font-size: 1.85rem;
  line-height: 0;
  margin-top: 0.75rem;
  right: 20;
  font-weight: 200;
  transform-origin: center;
  transition: 200ms linear;
}
details[open] summary:after {
  transform: rotate(45deg);
  font-size: 2rem;
}
details summary {
  outline: 0;
}
details p {
  font-size: 0.95rem;
  margin: 0 0 1rem;
  padding-top: 1rem;
}


.ver th {
   text-align: left; vertical-align: top;
}
.ver th span {
   writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
  text-orientation: mixed
}
.labeled {
   -ms-writing-mode: tb-rl; 
   writing-mode: vertical-rl; 
   transform:rotate(180deg);
   font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding:10px;
  background-color: #faf5b7;
}


.labeledblue {
	   -ms-writing-mode: tb-rl; 
   writing-mode: vertical-rl; 
   transform:rotate(180deg);
   font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding:10px;
  background-color: #b7e6fa;
}

.labeledorange {
	   -ms-writing-mode: tb-rl; 
   writing-mode: vertical-rl; 
   transform:rotate(180deg);
   font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding:10px;
  background-color: #f2c78a;
}

.labeledgreen {
	   -ms-writing-mode: tb-rl; 
   writing-mode: vertical-rl; 
   transform:rotate(180deg);
   font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding:10px;
  background-color: #bae5ba;
}




.labeledleer {
   -ms-writing-mode: tb-rl; 
   writing-mode: vertical-rl; 
   transform:rotate(180deg);
   font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding:5px;
  background-color: #fff;
   text-align: center;
   vertical-align: middle;
}