:root {
    /* Farb-Definition und -Bezeichnung gem. DRK Style-Guide*/ 
        --softrot:                  #e46450;
        --dunkelblau:               #002d55;
        --mittelblau:               #698caf;
        --hellblau:                 #ebf5ff;
        --dunkelgrau:               #554f4a;
        --mittelgrau:               #e0ddd6;
        --extern:                   #efeeea;
        --intern:                   #2dff55;
        --fusszeile:                #e60005;    
        --hauptmenu:                #e60005;    
        --untermenu:                #698caf;    
        --hintergrund:              #efeeea;    
        --links:                    #e60005;    
        --rot:                      #e60005;
        --gruen:                    #2dff55;
        --anwesenheit0:             #00ff00;
        --anwesenheit1:             #ffff00;
        --anwesenheit2:             #ff7f00;
        --anwesenheit3:             #ff0000;

	--high_ueberschrift:		60px;
}

body {
    font-family: Open Sans;
    font-size: 14px;
    background: var(--hintergrund);
}

.inhalt {
    overflow:visible;
    top: calc(var(--high_ueberschrift) + 65px);
    left: 15px;
    bottom: 56px;
    padding: 0px;
    margin: 0px;
    border-collapse:collapse; 
    background: var(--hintergrund);
    overflow: auto;;
    position: fixed;
    width: calc(100% - 30px);
}

.fusszeile {
    position: fixed;
    color: var(--hintergrund);
    text-align: center;
    bottom: 15px;
    left: 15px;
    width: calc(100% - 30px);
    background-color: var(--fusszeile);
}


.ortsverein {
    background: var(--hintergrund);
    font-size: 12px;
    float: none;
}


.spacer {
    float: left;
    margin: 0;
    width: 20%;
    max-height: 75px;
    height: 75px;
    background: var(--hintergrund);
    text-align: right;
    border: none; 
    padding:0px;
    display: inline;
}

.ueberschrift { 
    /* width: auto;*/
    background: var(--hintergrund);
    /*
    border: none; 
    max-height: 180px;
    height: 180px;
    padding:0px;
    */
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    /*
    display: inline;
    */
}

.organisation {
    float: right;
    margin: 0;
    width: 20%;
    max-height: 75px;
    height: 75px;
    background: var(--hintergrund);
    text-align: right;
    border: none; 
    padding:0px; 
    display: inline;
}

.oben { 
    background: var(--hintergrund);
    top: 15px;
    left: 15px;
    right: 15px;
    overflow: auto;
    position:fixed;
    width: calc(100% - 30px);
    padding: 0;	
}

.reihe1 { 
    float: left;
    width: 100%;
    height: var(--high_ueberschrift);
    background: var(--hintergrund);;
}

.reihe2 {
    float: left;
    width: 100%;
    background: var(--hintergrund);;
}

.reihe3 {
    float: left;
    width: 100%;
    background: var(--hintergrund);;
}


.menu { 
    width: calc(100%);
    border: none; 
    padding:0px; 
    font-weight: 400;
    background-color: var(--hauptmenu);
    white-space: nowrap;
}


.menu2 { 
    width: calc(100%);
    border: none; 
    font-weight: 100;
    padding:0px; 
    background-color: var(--untermenu);
    white-space: nowrap;
}


h1 {
    text-align: center;
    padding:0px; 
}


h2 {
    text-align: center;
}


p.terminals,
ul.terminals,
li.terminals {
    text-align: center;
} 


li.aktiv {
    float:left;
    background-color: var(--untermenu);
}


li.inaktiv {
    float:left;
    background-color: var(--linkinaktiv);
}


img.logo {
    max-height: 75px;
    max-width: 75px;
    padding: 0;
    width: auto;
}


div.menu a {
    display: inline-block;
    color: var(--hintergrund);
    text-align: center;
    padding: 0px;
    text-decoration: none;
}


div.menu li {
    border-right: 1px solid var(--hintergrund);
    border-left: 1px solid var(--hintergrund);
}


div.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


div.menu li a {
    display: block;
    color: var(--hintergrund);
    text-align: center;
    padding: 3px 3px;
    text-decoration: none;
}


div.menu li {
    float: left;
}


div.menu a:hover {
    background-color: var(--mittelblau);
}


div.menu2 a {
    display: inline-block;
    color: var(--hintergrund);
    text-align: center;
    padding: 0px;
    text-decoration: none;
}


div.menu2 li {
    border-right: 1px solid var(--hintergrund);
    border-left: 1px solid var(--hintergrund);
}


div.menu2 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


div.menu2 li a {
    display: block;
    color: var(--hintergrund);
    text-align: center;
    padding: 3px 3px;
    text-decoration: none;
}


div.menu2 li {
    float: left;
}


div.menu2 a:hover {
    background-color: var(--hauptmenu);
}


div.zeitanzeige {
    color: var(--hintergrund);
    text-align: center;
    bottom: 0;
    width: 100%;
    background-color: var(--fusszeile);
}


div.fusszeile a {
    color: var(--hintergrund);
    text-decoration: none;
}


div.fusszeile a:hover {
    background-color: var(--mittelblau);
}


.Formular1 {
    color: var(--hintergrund);
}


a,
table a {
    color: var(--links);
}


a.lost {
    color: var(--rot);
}


a.notlost {
    color: var(--gruen);
}


a:hover {
    color: var(--mittelblau);
}


table th a {
    color: var(--hellblau);
    text-decoration: none;
}


table th a:hover
{
    color: var(--dunkelblau);
    text-decoration: none;
}


table.separate {
    /*width: 90%;*/
    margin-left: Auto;
    margin-right: Auto;
    padding: 10px;
    border-radius: 10px;
    /* margin: 5px; */
    border-spacing: 0;
    border-collapse: separate;
}


tbody.separate {
    /*width: 90%;*/
    margin-left: 5%;
    margin-right: 5%;
    padding: 10px;
    border-radius: 10px;
    /* margin: 5px; */
    border-spacing: 0;
    border-collapse: separate;
}


thead.separate th {
    padding: 5px 6px;
    border-bottom: 1px solid var(--mittelblau);
    border-right: 1px solid var(--hellblau);
    border-left: 1px solid var(--hellblau);
}    


thead.separate tr:first-child th:first-child {
    padding: 5px 6px;
    border-bottom: 1px solid var(--mittelblau);
    border-right: 1px solid var(--mittelblau);
    border-left: 1px solid var(--mittelblau);
    border-bottom-left-radius:10px;
}

thead.separate tr:first-child th:last-child {
    padding: 5px 6px;
    border-bottom: 1px solid var(--mittelblau);
    border-right: 1px solid var(--mittelblau);
    border-left 1px solid var(--mittelblau);
    border-bottom-right-radius:10px;
}

thead.separate tr:first-child th:last-child,
table.separate td,  
tbody.separate td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--mittelblau);
    border-right: 1px solid var(--mittelblau);
    border-left: 1px solid var(--mittelblau);
}

table.separate th {
    background: var(--mittelblau);
    color: var(--hellblau);
}


table.separate tr:last-child td:first-child,
tbody.separate tr:last-child td:first-child ,
tfoot.separate tr:last-child td:first-child {
    border-bottom-left-radius:10px;
}


table.separate tr:last-child td:last-child, 
tbody.separate tr:last-child td:last-child ,
tfoot.separate tr:last-child td:last-child {
    border-bottom-right-radius:10px;
}


table.separate tr th:first-child, 
table.separate tr td:first-child, 
tbody.separate tr td:first-child {
    border-left: 1px solid var(--mittelblau);
}

//tbody.separate 
tr:nth-child(even){
    border-left: 1px solid var(--mittelblau);
    background-color: #2f2f2f;
}

table.separate tr th:first-child, 
table.separate tr td:first-child, 
tbody.separate tr td:first-child {
    border-left: 1px solid var(--mittelblau);
}

tbody  tr:nth-child(odd)  {background-color: #f2f2f2;}
tbody  tr:nth-child(even) {background-color: var(--hellblau);}

tbody.separate tr:nth-child(odd){
    border-left: 1px solid var(--mittelblau);

}


table.separate tr:first-child th, 
tbody.separate tr:first-child th,
table.separate tr:first-child td, 
tbody.separate tr:first-child td {
    border-top: 1px solid var(--mittelblau);
}

table.separate tr:first-child th:first-child, 
tbody.separate tr:first-child th:first-child ,
table.separate tr:first-child td:first-child, 
tbody.separate tr:first-child td:first-child {
    border-top-left-radius:10px
}


table.separate tr:first-child th:last-child, 
tbody.separate tr:first-child th:last-child ,
table.separate tr:first-child td:last-child, 
tbody.separate tr:first-child td:last-child {
    border-top-right-radius:10px
}


tfoot.separate {
    /*width: 90%;*/
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    padding: 10px;
    /* border-radius: 10px; */
    /* margin: 5px; */
    border-spacing: 0;
    /* background-color: var(--mittelblau); */
    border-right: 1px solid var(--hellblau);
    border-left: 1px solid var(--hellblau);
    /*border-collapse: separate;*/
}


tfoot.separate th {
    padding: 5px 6px;
    border-bottom: 1px solid var(--mittelblau);
    border-right: 1px solid var(--hellblau);
    border-left: 1px solid var(--hellblau);
}    

tfoot.separate td th {
    padding: 5px 6px;
    border-bottom: 1px solid var(--mittelblau);
    border-right: 1px solid var(--hellblau);
    border-left: 1px solid var(--hellblau);
}

tfoot.separate tr:first-child th:last-child  {
    border-top: 1px solid var(--mittelblau);
    border-top-right-radius:10px
}


tfoot.separate tr:first-child th:first-child  {
    border-top: 1px solid var(--mittelblau);
    border-top-left-radius:10px
}

tfoot.separate tr:last-child th:last-child  {
    border-top: 1px solid var(--mittelblau);
    border-bottom-right-radius:10px
}


tfoot.separate tr:last-child th:first-child  {
    border-top: 1px solid var(--mittelblau);
    border-bottom-left-radius:10px
}


thead.separate tr th a:hover {
    color: var(--softrot);
}


.extern,
td.extern,
tr.extern {
    background-color: var(--extern);
}


.intern,
td.intern,
tr.intern {
    background-color: var(--intern);
}


table.termsettings {
    
}


.blink_me {
  animation: blinker 2s linear infinite;
}



@keyframes blinker {  
  50% { opacity: 0; }
}


.outline {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

progress {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  background: var(--mittelgrau);
}

progress.stufe0 {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  color: var(--anwesenheit0);
}

progress.stufe0::-webkit-progress-value {
  border: 0;
  height: 20px;
  border-radius: 5px;
  background: var(--anwesenheit0);
}

progress.stufe0::-webkit-progress-bar {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  background: var(--mittelgrau);
}

progress.stufe0::-moz-progress-bar {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  background: var(--anwesenheit0);
}

progress.stufe1 {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  color: var(--anwesenheit1);
}

progress.stufe1::-webkit-progress-value {
  border: 0;
  height: 20px;
  border-radius: 5px;
  background: var(--anwesenheit1);
}

progress.stufe1::-webkit-progress-bar {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  background: var(--mittelgrau);
}

progress.stufe1::-moz-progress-bar {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  background: var(--anwesenheit1);
}

progress.stufe2 {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  color: var(--anwesenheit2);
}

progress.stufe2::-webkit-progress-value {
  border: 0;
  height: 20px;
  border-radius: 5px;
  background: var(--anwesenheit2);
}

progress.stufe2::-webkit-progress-bar {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  background: var(--mittelgrau);
}

progress.stufe2::-moz-progress-bar {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  background: var(--anwesenheit2);
}


progress.stufe3 {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  color: var(--anwesenheit3);
}

progress.stufe3::-webkit-progress-value {
  border: 0;
  height: 20px;
  border-radius: 5px;
  background: var(--anwesenheit3);
}

progress.stufe3::-webkit-progress-bar {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  background: var(--mittelgrau);
}

progress.stufe3::-moz-progress-bar {
  border: 0;
  width: 100px;
  height: 20px;
  border-radius: 5px;
  background: var(--anwesenheit3);
}

tr.leerzeile {
    background: var(--rot);
}

th.uhrzeit {
    border: 1px solid var(--dunkelblau);
    background: var(--hellblau);
}

th.offen {
    border: 1px solid var(--dunkelblau);
    background: var(--hellblau);
}

th.geschlossen {
    border: 1px solid var(--dunkelblau);
    background: var(--hellblau);
    display: none;
}

td.belegt {
    border: 1px solid var(--dunkelblau);
    background: var(--gruen);
    text-align: center;
}

td.unbelegt {
    border: 1px solid var(--dunkelblau);
    background: var(--rot);
    text-align: center;
}

td.nichtbenoetigt {
    border: 1px solid #000000;
    background: var(--dunkelblau);
    text-align: center;
}

td.geschlossen {
    border: 1px solid #000000;
    background: #000000;
    text-align: center;
    display: none;
}

a.unbesetzt:link,
a.unbesetzt:hover,
a.unbesetzt:visited,
a.unbesetzt:active {
    color: var(--mittelblau);
    text-decoration: none;
}