/*  UPDATE kurstermine SET kurstermine.datum = DATE_ADD(kurstermine.datum, INTERVAL 30 DAY); */

/* UPDATE kurstermine SET kurstermine.uhrzeit = DATE_ADD(kurstermine.uhrzeit, INTERVAL 30 MINUTE) WHERE kurstermine.id = 6 

UPDATE teilnahmeverwaltung SET teilnahmeverwaltung.datum_buchung = DATE_ADD(teilnahmeverwaltung.datum_buchung, INTERVAL 1 DAY);
*/

/*document.documentElement.style.setProperty('--somevar', 'green'); 
 *  document.documentElement.style.cssText = "--main-background-color: red";
 * document.documentElement.setAttribute("style", "--main-background-color: green");
 * <div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<input type="range" min="5" max="10" step="1" 
   oninput="showVal(this.value)" onchange="showVal(this.value)">
   var primaryColor = document.documentElement.style.getPropertyValue('--primaryColor');
var secondaryColor = document.documentElement.style.getPropertyValue('--secondaryColor');
var errorColor = document.documentElement.style.getPropertyValue('--errorColor');

 * */

@font-face {    
    font-family: 'DroidSans';
    src: url('./DroidSans.eot');
    src: local('DroidSans'), url('./DroidSans.woff') format('woff'), url('./DroidSans.ttf') format('truetype');
}
@font-face {
    font-family: 'Conv_SourceSansPro-Light';
    src: url('./SourceSansPro-Light.eot');
    src: local('Conv_SourceSansPro-Light'), url('./SourceSansPro-Light.woff') format('woff'), url('./SourceSansPro-Light.ttf') format('truetype'), url('./SourceSansPro-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'monospacetypewriterregular';
    src: url('./MonospaceTypewriter-webfont.eot');
    src: url('./MonospaceTypewriter-webfont.eot?#iefix') format('embedded-opentype'),
        url('./MonospaceTypewriter-webfont.woff') format('woff'),
        url('./MonospaceTypewriter-webfont.ttf') format('truetype'),
        url('./MonospaceTypewriter-webfont.svg#monospacetypewriterregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
html{
    padding:0;
    margin: 0;
}
body {
    background-color: var(--hintergrund);
    ; /*var(--hintergrund);*/
    font-family: var(--sans-seriffont);
    font-size: 1em;
    padding:0;
    margin: 0;
}
#wrapper {
    max-width: 100%;/*900px;*/
    margin: 0 auto;
}
h1 {
    font-family: var(--sans-seriffont);
}
a {
    color: var(--schwarz);
    text-decoration: none;
    font-family: var(--sans-seriffont);
    text-decoration: var(--dunkelgrau) dotted underline;
    /*    border-bottom: dotted 2px var(--grau);
        padding-bottom: 0;*/
}
a.orderlink {
    color: var(--schwarz);
    text-decoration: var(--grau) dotted underline;
    font-family: var(--sans-seriffont);
    border-bottom: 0;
    cursor: pointer;
}

/*
a:link {
    background: var(--akzenthover);
    color: var(--weiss);
    border: 1px solid var(--weiss);               var(--white)
    font-weight: normal;
    font-size: 12pt;
    text-decoration: none;

    /*box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);*/
/*box-shadow:  5px 4px 4px -2px var(--dunkelgrau);*/
/*6px 4px 12px -3px #8C8C8C;

padding: 3px 5px;
border-radius: 4px;
margin: 8px;

}
/*
a:hover {  
background: var(--akzenthart);;
}

a.linkeinfach{
text-decoration: none;
color: #009999;       
}
a.linkeinfach:hover{
text-decoration: underline;
cursor: pointer;    
}
a::before {
font-family: 'DroidSans';
content: "\21F1";    
}*/
/*li {
    list-style: none;
}*/
.hide {
    display:none;
}
/*.warning {
    color: red;
    font-weight: bold;
}*/
.warning {
    display:inline-block;
    background-color: red;
    color: white;
    border: solid 1px black;
    border-radius: 4px;
    font-weight: bold;
    font-size: 11pt;
    padding: 2px;
}
.inaktiv {
    color: var(--grau);
    font-weight: bold;
}
.mini {
    font: 9pt monospace, normal;
}
.bggruen{
    background-color: #00ff80;
    border-radius: 4px;
}
.bgrot{
    background-color: #FF0000;
    border-radius: 4px;
}
.calendericons{
    color:var(--akzenthart);/*'#222;*/
    text-shadow: 1px 1px 2px var(--weiss);
    cursor:help;
    font-size:12pt;

    /*    background-color: #ddd;
        border: 1px solid var(--hellgrau);
        border-radius: 2px;*/
}

button.likelink {
    background: none!important;
    border: none;
    padding: 0!important;
    /*optional*/
    /*font-family: arial, sans-serif;
    input has OS specific font-family*/
    color: var(--akzenthart);
    text-decoration: none;
    cursor: pointer;
}
button.likelink:before{
    content: "»";
}

button.likelink:hover {
    background: none!important;
    border: none;
    padding: 0!important;
    /*optional*/
    /*font-family: arial, sans-serif;
    input has OS specific font-family*/
    color: var(--akzenthart);
    text-decoration: underline;
    cursor: pointer;
}

button.accordion {
    font: 1.15em var(--sans-seriffont), bold;
    background-color: var(--accordionbutton);
    color: var(--schwarz);
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
}
.accordion:nth-child(1) {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

button.accordion.active {
    background-color: var(--accordionpanel);
}
button.accordion:hover {
    background-color: var(--accordionhover);
    ;
}

button.accordion:after {
    font-family: 'DroidSans';
    content: '\002B';
    color: var(--dunkelgrau); /*777*/
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    font-family: 'DroidSans';
    content: "\2212";
}

div.panel {
    /*padding: 0 10px;*/
    background-color: var(--weiss);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/*############### Mailkonfiguration drag and drop###################################*/
.drag_and_drop {
    border: 1px var(--dunkelgrau) dashed;
    margin: .5em;
    padding: .5em;
    background: var(--akzentlight);
    min-height: 100px;

}
[draggable=true] {
    cursor: move;
}

/*####################  fixed parent Link ##################*/
/* #parentlink {
  width: 15px;
  height: 15px;
  border-top: 0;
  border-left: 1px;
  border-right: 1px;
  border-bottom: 1px;
  border-color: var(--dunkelgrau);
 border-radius: 4px;
  color: var(--accordionhover);
  background: rgba(200,200,200, 0.4);
   
}*/

.mailpreview {
    background-color:var(--weiss);
    border:1px solid black;
    width:90%;
    max-width: 1024px;
    width:90%;
    padding:1px; 
    margin:5px auto 5px auto;
}
.qrAusdruck {
    margin: 10px;
    padding:10px;
    border:2px solid black;
    border-radius: 7px;
    width:180px;
    text-align:center;
}


/* ############################### span clearer ###################   */

span.clearer {
    position: absolute;
    top: 1px;
    right: 0px;
    z-index: 2;
    border: none;
    height: 20px;
    width: 20px;
    cursor: pointer;
    color: var(--grau);
}

/* ############################################ ALTER EDITOR ###################    
.intLink { cursor: pointer; }
img.intLink { border: 0; }
#toolBar1 select { font-size:1.25em; }
#textBox {
    width: 540px;
    height: 200px;
    border: 1px var(--schwarz)000 solid;
    padding: 12px;
    overflow: scroll;
}
#textBox #sourceText {
    padding: 0;
    margin: 0;
    min-width: 498px;
    min-height: 200px;
}
#editMode label { cursor: pointer; }
*/

/* ############# TOOLTIP  #############*/
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted var(--schwarz);
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--dunkelgrau);
    color: var(--weiss);
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color:  var(--dunkelgrau) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* ##################### The Modal (background) ######################## */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* var(--schwarz) w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: var(--weiss);
    margin: auto;
    padding: 0;
    border: 2px solid var(--accordionhover);
    border-radius: 6px;
    /*    border: 1px solid #888;*/
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.3s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top:-300px;
        opacity:0
    }
    to {
        top:0;
        opacity:1
    }
}

@keyframes animatetop {
    from {
        top:-300px;
        opacity:0
    }
    to {
        top:0;
        opacity:1
    }
}

/* The Close Button */
.close {
    color: red;
    float: right;
    font-size: 2em;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: var(--schwarz);
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 2px;
    background-color:var(--akzentlight);
    color: var(--schwarz);
    height:20px;
}

.modal-body {
    padding: 2px 8px;
}

.modal-footer {
    padding: 2px 4px;
    background-color: var(--akzentlight);
    color: var(--schwarz);
    height:20px;
}

/*############### CSS-Modal #####################*/
/*.modalWindow {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 99999;
    opacity:0;
    pointer-events: none;
    text-align:center;    
}
.modalWindow:target {
    opacity:1;
    pointer-events: auto;
}
.modalWindow > div {
        width: 500px;
    max-width: 66%;
    position: relative;
    margin: 10% auto;
    background: var(--weiss);
    border: 2px solid var(--accordionhover);
    border-radius: 4px;
}
.modalWindowDiv{
    overflow-y: auto; Scrollbar
    max-height:75%;
}*/

/* ############### CSS Accordion ##########################*/
.tab {
    position: relative;
    max-width: 100%;
}

/* (B) HIDE CHECKBOX */
.tab input[type="checkbox"] {
    display: none;
}

/* (C) TAB LABEL */
.tab label {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 4px;
    background: #eee;
    color:var(--schwarz);
    font-family: var(--sans-seriffont);
    cursor: pointer;
}

/* (D) TAB CONTENT */
.tab .tab-content {
    background: var(--hellgrau);
    /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
    /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */
    overflow: hidden;
    transition: max-height 0.3s;
    max-height: 0;
}
.tab .tab-content p {
    padding: 10px;
}

/* (E) OPEN TAB ON CHECKED */
.tab input:checked ~ .tab-content {
    max-height: 100vh;
}

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    -webkit-transition: all .35s;
    transition: all .35s;
}
.tab input:checked ~ label::after {
    transform: rotate(90deg);
}

/*
.row {
    display: -webkit-box;
    display: flex;
}
.row .col {
    -webkit-box-flex: 1;
    flex: 1;
}
.row .col:last-child {
    margin-left: 1em;
}

 Accordion styles 
.tabs {
    overflow: hidden;
}
.rd { versteckt den radioinput
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.tab {
    width: 100%;
    max-width: 500px;
    color: #bbb;
    overflow: hidden;
}
.tab-label {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 4px;
    background: #eee;
    color:var(--schwarz);
    font-family: var(--sans-seriffont);  
    cursor: pointer;      
}
.tab-label:hover {
    background: #ddd;
}
.tab-label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    -webkit-transition: all .35s;
    transition: all .35s;
}
.tab-content {
    max-height: 0;
    padding: 0 4px;
    color: var(--schwarz);
    background: var(--weiss);
    -webkit-transition: all .35s;
    transition: all .35s;
}
.tab-close {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    padding: 4px;
    font-size: 0.75em;
    background: var(--weiss);
    cursor: pointer;
}
.tab-close:hover {
    background: #ddd;
}

input:checked + .tab-label {
    background: #ddd;
}
input:checked + .tab-label::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
input:checked ~ .tab-content {
    max-height: 100vh;
    padding: 4px;
}
*/

/*######################## Kurskalender ##############*/
#angebote_index_kalender, #angebote_index_liste, #angebote_base_kalender, #angebote_base_liste {
    border-right: 1px solid var(--grau);
    border-left: 1px solid var(--grau);
}
#kurskalender_index{
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    /*    background-color: var(--hintergrund);*/
    background-color: var(--hintergrund);
    border: 1px solid var(--grau);
    border-bottom: 0;
    border-top: 0;
}
.woche {
    display: flex;
    border: 1px solid var(--hellgrau);
    max-width: 100%;
    /*border: 1px dotted;*/
    margin:0;
    padding: 0;
    flex-wrap: wrap;
}


#tag {
    /*border: 1px solid var(--dunkelgrau);*/
    margin: 1px;
    padding: 1px;
    /*background: var(--hintergrundheller);*/
    font-weight: bold;
    text-align: center;
    width: 13%;
    min-width: 117px;
    min-height: 120px;
    /* border: 1px solid var(--dunkelgrau); */
    /* background: var(--hintergrundheller); */

    /*background: var(--weiss);*/
}
#tag .uhrzeit {
    text-align: center;
    font-size: 9pt;
}

#tag .titel {
    text-align: center;
    font-size: 11pt;
    margin: 1px 0px;

}

#tag .leitung {
    text-align: right;
    font-size: 10pt;
    font-variant: small-caps;
}
.heute {
    background-color: var(--hellgrau);
    border: 1px solid var(--schwarz); /*#979797;*/
}
.woen {
    background-color:var(--akzentlight);
    border: 1px solid var(--dunkelgrau); /*#979797;*/
}
.werktag {
    background-color: var(--weiss);
    border: 1px solid var(--dunkelgrau); /*#979797;*/
}

#datum:hover { /* Datumsanzeige im Kalender*/
    cursor: pointer;
}
#datum {
        font-size: 12pt;        
    }

.tagesdatum {
    /*    background: var(--dunkelgrau);
        color: var(--weiss);
        font-weight: bold;*/
    text-align: center;
    background: var(--hellgrau);
    color: var(--dunkelgrau); /* #6c6a6a; */
    border-bottom: 1px solid var(--grau); /*#9d9d9d;*/
    font-variant: small-caps;
    font-size: 10pt;
}
.tagesdatum_markiert {
    background: var(--akzentfarbe);
    color: var(--schwarz); /* #6c6a6a; */
    text-shadow: 1px 1px 1px var(--weiss);

}
#tag .kurs {
    /*background: var(--hintergrund);*/
    background: var(--akzentfarbe);
    text-align: left;
    font: 11pt var(--sans-seriffont), normal;
    padding: 2px 4px;
    margin: 4px 2px;
    border: 1px solid white;
    border-radius: 5px;
}
#tag .gruenesFeld {
    /*    border-left: green;*/
}
#tag .beendet {
    /*filter: saturate(0%) brightness(100%) contrast(100%);*/
    /*background: var(--grau);*/
}
/*.aktiv {
    border: solid 1px #000;
    background: var(--akzentrahmen);
}
.inaktiv {
    border: solid 1px #FFF;
    background: var(--akzentfarbe);
}*/


/*##################  KALENDER Liste SWItch  ##################*/
.kalender_liste_switch {
    align:right;
    float:right;
    display: inline;
}

/*############### Formunarelemente #######################*/

.topheader{
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    color: var(--schwarz);
    /* font-variant: small-caps;
        text-shadow: 1px 1px 3px var(--schwarz);*/
    display:block;
    font-size: 1em;
    /*font-weight: bold;
        color:var(--schwarz);
        background-color: var(--accordionbutton);
    color: #252424;*/
    background-color: var(--akzentlight);
    border: 1px solid var(--grau);
    border-bottom: 0;
    margin-bottom: 0;
    padding: 3px 5px;

}
.bottomfooter{
    /*    background-color: var(--accordionpanel);*/
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.bottomfooter{
    display:block;
    /* font-size: 1em;
    font-weight: bold;
        color:var(--schwarz);
        background-color: var(--accordionbutton);
    color: #252424; */
    background-color: var(--akzentlight);
    border: 1px solid var(--grau);
    border-top: 0;
    margin-top: 0;
    padding:3px 5px;
    text-align: left;
    min-height: 28px;
}
.bottomindex{
    text-align: right;
}


.formrow  {
    /*    display: flex;
        flex-direction: row;
        flex-wrap: wrap; */
    border-bottom: 1px dotted var(--dunkelgrau);
    margin:0;
    padding: 0;
    /*background-color: var(--hintergrund);*/
    background-color: var(--hellgrau);
    border-left: 1px solid var(--dunkelgrau);
    border-right: 1px solid var(--dunkelgrau);
    border-top: 0;
}

.formheader{
    display:block;
    font-size: 1em;
    border-left: 1px solid var(--dunkelgrau);
    border-right: 1px solid var(--dunkelgrau);
    /* background-color: var(--dunkelgrau); */
    color: var(--schwarz);
    background-color: var(--akzentlight); /* #c6dfb2;*/
    margin:0;
    padding:3px;
}

.formlabel {
    font-family: 'DroidSans';
    /*text-align: right; */
    /* background-color: var(--hintergrundheller); */
    text-align: left;
    /*background-color: var(--hintergrund);*/
    /* font: all-small-caps; */
    font-variant: small-caps;
    font-size: 10.5pt;
    font-style: normal;
    color: var(--schwarz);
    display:block;
    /*min-width: 120px;*/

    background-color: var(--hellgrau);
    /*    margin: 2px;*/
    padding: 2px 0 0 6px;

}
.forminput {
    font-family: 'Conv_SourceSansPro-Light';
    font-size: 12pt;
    display:block;
    border: 0;
    /*margin: 2px;*/
    padding: 0 0 8px 6px;
    max-width: 100%;
    /*min-width: 800px;*/
    color: var(--schwarz);
}

.formbutton {
    background: var(--akzentfarbe);
    font: 'Conv_SourceSansPro-Light';
    color: var(--schwarz);
    font-weight: normal;
    border: 0px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11pt;
    margin: 2px 2px;
    padding: 3px 8px;
    text-align: center;
    text-decoration: none;
    -webkit-appearance: none !important;
    -moz-appearance: none;
    appearance: none;
}

.formbutton:hover {
    background-color: var(--akzenthover);
    text-shadow: 1px 1px 1px var(--weiss);
    border-radius: 7px;
}
.formbutton:active {
    position:relative;
    top:1px;
}

.formbutton:disabled , .probestunde,
.formbutton[disabled]{
    -webkit-text-decoration-line: line-through; /* Safari */
    text-decoration-line: line-through;
}


.fieldset {
    border: 1px solid var(--dunkelgrau);
    border-radius: 2px;
    background: var(--weiss);
    padding: 3px;
    margin: 0 10px

}
.kursbeschreibung {
    font-family: 'Conv_SourceSansPro-Light';
    font-size: 12pt;
    max-width: 600px;
    margin: 0 0 5px 0;
    padding: 0 0 8px 6px;
}

.ListeInTabelle {
    max-width: 400px;
    margin: 0px 15px 2px 15px;
    padding: 0;
}
/*########################### Formelement markieren, wenn required  #######################################*/

.roterParent {
    border-left: 5px red solid;
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
}
.gruenerParent{
    border-left: 5px green solid;
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
}

.gruenerBalken  {
    border-left: 5px green solid;
    border-bottom: 1px #9C9C9C solid;
    border-right: 1px #9C9C9C solid;
    border-top: 1px #9C9C9C solid;
}
.roterBalken {
    border-left: 5px red solid;
    border-bottom: 1px #9C9C9C solid;
    border-right: 1px #9C9C9C solid;
    border-top: 1px #9C9C9C solid;
}

/*################# PROBESTUNDE JS ####################################*/

/* .probestunde {
    color: red;
} */
.toggle {
    color: green;
}

.haken[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}


.haken[type=checkbox] + span {
    cursor: pointer;
    visibility: hidden;

}

.haken[type=checkbox]:checked + span {
    visibility: visible;
}

.button-container { /*Bei Gastauswahl zwischen Abos*/
    display: flex;
    justify-content: space-around;
}
.flex-button {
    flex: 1;
}
/*#################### HAKEN STATTRADIO######################*/
.haken[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* IMAGE STYLES */
.haken[type=radio] + span {
    font-size: 24px;
    color: green;
    padding:2px 10px;
    cursor: pointer;
    visibility: hidden;

}

/* CHECKED STYLES */
.haken[type=radio]:checked + span {
    font-size: 24px;
    color: green;
    padding:2px 10px;
    visibility: visible;
}

/*################ Radio für Accordion in Iframe ####################*/
.radio_style {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 20px;
}
.radio_style input {
    position: absolute;
    opacity: 0;
}
.radio_class {
    position: absolute;
    top: 5px;
    left: 5px;
    height: 20px;
    width: 20px;
    background-color: var(--akzentlight);
    border-radius: 25%;
}
.radio_style:hover input ~ .radio_class {
    background-color: #66ff66;
}
.radio_style input:checked ~ .radio_class {
    background-color: #00cc00;
}
.radio_style .radio_class:after {
    top: 10px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 80%;
    background: white;
}


/*##############  KUGEL-Icons ################################*/
.kugel {
    margin: 10px 20px;
    border-radius: 50%;
    border: 1px solid var(--schwarz);
    width: 12px;
    height: 12px;
    float: left;
}
.kugelaktiv {
    background-color: var(--akzentfarbe);
}
.kugelcontainer {
    width: 280px;
    height: 35px;
    border: none;
    margin: 0 auto;
}
.rot {
    color: #ff0000;
}
.gelb {
    color: #ff9933;
}
.gruen {
    color: #05b005; /*#00cc00;*/
}
.grau {
    color: var(--grau);
}

/*############################## ABOLISTE  HOVERBOX  #########################*/
.aboheader {
    font-family: 'DroidSans';
    font-weight: bold;
    font-size: 14pt;
    display: inline;
}

.aboliste {
    font-family: 'Conv_SourceSansPro-Light';
    font-size: 13pt;
    margin-top: 0px;
    margin-left: 0px;
    padding-left: 12px;
    list-style: none;
    font-size: 10pt;
}
.aboliste > li:before {
    content: '> ';
}

/*    .hoverbox:hover {
        background: var(--akzentlight);
        cursor: pointer;
    }*/
.hoverbox {
    background: var(--weiss);
    border: 1px solid #bbb;
    border-radius: 7px;
    cursor: pointer;
    margin:4px;
}

.active {
    background: var(--akzentfarbe);
}

.hidden {
    visibility: hidden;
}
.hidden:after{
    content:'ok';
}

.hoverbox:nth-child(1){
    /*        background-color: var(--akzentfarbe);*/
    border-radius: 7px;

}

/* Removes the clear button from date inputs */
input[type="date"]::-webkit-clear-button {
    display: none;
}
/* Removes the spin button */
input[type="date"]::-webkit-inner-spin-button {
    display: none;
}
/* Always display the drop down caret */
input[type="date"]::-webkit-calendar-picker-indicator {
    color: #2c3e50;
}
/* A few custom styles for date inputs */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    color: var(--schwarz);
    font: 0.9em var(--sans-seriffont), normal;
    /* border:1px solid var(--dunkelgrau);   wegen markieren auskommentiert*/
    background:var(--hellgrau);
    padding:2px;
    display: inline-block !important;
    visibility: visible !important;
}

.mydata {
    border:1px solid var(--dunkelgrau);
}

input[type="date"], focus {
    color: var(--schwarz);
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

select {
    /*font: 0.9em var(--sans-seriffont), normal;*/
    background-color: var(--weiss);
    border: 1px var(--dunkelgrau) solid;
    border-radius: 3px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    padding:2px;
}

.userdaten{
    display:block;
    font: 0.8em var(--sans-seriffont), normal;
    vertical-align: middle;
    color:var(--schwarz);
    background-color:var(--accordionpanel); /* #c3cAC7; var(--accordionbutton);*/
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding:3px;
}
#logoutanzeige {
    /*    border: 1px solid var(--schwarz);
        padding: 1px;
        background-color: var(--hellgrau);    */
    border-top-right-radius: 3px;
}
/*##################### TABELLEN #################################*/
/*#kurstabelle  {
    height: 400px;  eingeblendet, damit die Akkordionhöhe im js abgegriffen werden kann
}*/
/*#kurstabelle_buchen {
    height: 330px; 
}*/
#buchungstabelle {
    /*height: 525px;  eingeblendet, damit die Akkordionhöhe im js abgegriffen werden kann*/
}
.kurstabelle {
    border:1px solid var(--schwarz);
    font: 0.9em var(--sans-seriffont), normal;
    border-collapse: collapse;
    /*  width: 100%;*/
}

.kurstabelle td, .kurstabelle th {
    border: 0px solid var(--grau);
    padding: 4px;
}

.kurstabelle tr:nth-child(even){
    background-color: var(--hellgrau)
}

.kurstabelle tr:hover {
    background-color: var(--grau);
}

.kurstabelle th {
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: left;
    font: 0.9em var(--sans-seriffont), bold;
    background-color: var(--dunkelgrau);
    color: var(--weiss);
}

.tabL{
    text-align: right;
    line-height: 12pt;
    background: rgba(125,125,125, 0.1);
    vertical-align: top;
}
.tabR{
    text-align: left;
    line-height: 12pt;
/*    font-weight: bold;*/
    background: rgba(125,125,125, 0.07);
    vertical-align: top;
    max-width: 450px;
}
.borderbottom {
    border-bottom: 1px solid black;
}

/*####################  Tabelle Details  #############################*/
.tabelleDetailsL{
    font-size: 1em;
    text-align: right;
    /*    min-width: 120px;
        background-color: var(--hellgrau);*/
    padding: 2px;
    margin: 0;
}
.tabelleDetailsR{
    text-align: justify;
    font-size: 1em;
    /*    background-color: var(--hellgrau);*/
}
.tabelleDetailsH{
    background-color: var(--dunkelgrau);
    /*    font-size: 1em;*/
}

/*#################### Anzeige Bilder / Dokumente Uploads ################# */

.divcontainer {
    position: relative;
    text-align: center;
    color: var(--weiss);
    display:inline-block;
    margin:0 10px;
}
.textincontainer {
    position: absolute;
    bottom:0;
    left: 0;
    /*transform: translate(50%, 0);*/
}
.textincontainer > a {
    background-color:var(--weiss);
    color: var(--schwarz);
    font-size: 10pt;
    border:none;
}
.bildercontainer{
    overflow-y: auto;
    border:  1px solid var(--dunkelgrau);
    max-width: 100%;
    height: 200px;
    margin:0 10px;
}
/*###################### INSERTS ####################*/
.inserts{
    border: 1px var(--grau) solid;
    font-size: 10pt;
    cursor: pointer;
    background-color: var(--hellgrau);
}
#vorlagen, .select-items  {
    padding: 1px 1px;
}
/*########################### FLEX-Table #####################################*/

.flex_table {
    max-height: 380px;
    overflow-y: scroll;
    display: flex;
    flex-flow: column nowrap;
    font-size: .8rem;
    margin: 0.1rem;
    margin-top: 0;
    line-height: 1.5;
    border-bottom: 1px solid var(--dunkelgrau);
    border-left: 1px solid var(--grau);
    border-right: 1px solid var(--grau);
    flex: 1 1 auto;
}
.halbe_hoehe{
    max-height: 170px;
}

.flex_th, .my_th {
    /*display: none;*/
    font-size: 13pt;
    background-color: var(--akzentlight);
}

.flex_footer {
    /*display: none;*/
    font-size: 13pt;
    font-weight: bold;
    background-color: var(--grau);
}

.flex_th > .flex_td {
    white-space: normal;
    justify-content: center;
}

.flex_tr {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}

.flex_tr:nth-of-type(even) {
    background-color: var(--hellgrau);
}

.flex_tr:nth-of-type(odd) {
    background-color: var(--weiss);
}

.flex_td {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
    flex-basis: 0;
    padding: 0.1em;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0px;
    /*white-space: nowrap;*/
    border-bottom: 1px solid var(--dunkelgrau);
    justify-content: center;
    min-height: 30px; /* für Leerzeilen */
    /*    align-self: center; geht nicht bei zeilenumbruch*/
}
.flex_basis_2prozent {
    flex-basis: 2%;
}

.flex_table_kasten {
    /*width:75%;*/
    max-width:800px;
    margin: 20px auto;
    padding: 0px;
    border: 2px var(--grau) solid;
}

.header{
    background-color: var(--akzentfarbe);
}

.subheader{
    background-color: var(--akzentlight);
}

.footer{
    background-color: var(--akzentlight);
    font: 12pt bold var(--weiss);
}

/*################  TaBLE GRID ##########################*/
/*.grid_tr{
  display: grid;
  grid-template-columns: repeat(8, 1fr);       
}
.grid_td {
      grid-column: 1 / -1;
  grid-row: span 2;
}*/

.even {
    background-color: var(--hellgrau);
}

.odd {
    background-color: var(--weiss);
}
.tabelle {
    border:1px solid var(--schwarz);
    /*    font: 0.9em var(--sans-seriffont), normal;
        border-collapse: collapse;*/
    /*  width: 100%;*/
}

/*################# ABOICONS ###############################*/
.aboicons{
    margin: 2px;
    padding: 3px;
    border-radius: 7px;
    color: var(--schwarz);
}

/*###################  modaltabelle ##############################*/
.modaltabelle {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    overflow: auto;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}
.modaltabelle-window {
    position: relative;
    background-color: var(--hellgrau);
    width: 50%;
    margin: 10% auto;
    padding: 10px;
    border: 2px var(--akzenthart) solid;
    border-radius: 4px;
}
.modaltabelle-text {
    font-family: 'monospacetypewriterregular';
    font-size: 10pt;
}
.openmt {
    display: block;
}
.closemt {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(0,0,0,0.3);
    height: 30px;
    width: 30px;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
}

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

/* ############################## CALENDER #############################*/
.calendar-box {
    display:none;
    background-color:var(--akzentlight);
    border:1px solid var(--dunkelgrau);
    border-radius: 4px;
    position:absolute;
    width:240px;
    padding: 0 5px;
}
.calendar-box select.calendar-month {
    width:90px;
}
.calendar-box select.calendar-year {
    width:70px;
}
.calendar-box .calendar-cancel {
    width:100%;
}
.calendar-box table td {
    width:14%;
    font-size: 10pt;
}
.calendar-box .calendar-title {
    text-align:center;
}
.calendar-box a {
    text-decoration:none;
    font-size: 10pt;
}
.calendar-box .today a {
    padding:0 5px;
    margin-left:-5px;
    background-color:var(--grau);
}
.calendar-box .selected a {
    padding:0 5px;
    margin-left:-5px;
    background-color:var(--weiss);
}

/* ##################### DEMOLOGIN ########################*/
.demologin {
    text-align: right;
    font-family: 'Conv_SourceSansPro-Light';
    font-size: 11pt;
    /*display:block;*/
    border: 0;
    padding: 0 0 4px 4px;
    line-height: 13px;
}

/*#################### SUCHFELD beim Auswerten #####################*/
.suchliste {
    display: none;
    position: absolute;
    background-color: var(--hellgrau);
    min-width: 230px;
    overflow: auto;
    border: 1px solid var(--dunkelgrau);
    z-index: 10;
}

.suchliste a {
    color: black;
    padding: 4px 4px;
    text-decoration: none;
    display: block;
}
/*################# CANVAS ##############################*/
.canvas{
    margin: 0 auto 0 auto;
    padding: 0px;
    text-align: center;
}

/*################## media querys ########################## */

@media (min-width:200px)  { /* smartphones, iPhone, portrait 480x320 phones */
    html {
        font-size: 20px;
    }
    #wrapper{
        max-height: 100%;
    }
    #kurskalender_index { /* die Kalenderansicht scrollt nicht bei kleineren Screens */
        min-height: 100%;
        overflow-y: visible;
        display:block;
        max-height: none;
    }
    #datum, .formbutton { /* obere Zeile Handyansicht Kalender*/
        font-size: 10pt;
        margin: 1px 1px;
        padding: 2px 5px;
    }
    .modaltabelle-window {
        width: 80%;
    }
    .closemt:hover,
    .closemt:focus {
        color: #000000;
        cursor: pointer;
    }
    .kalender_liste_switch {
        display:none;
    }
    .myylink {
        display:none;
    }
    .aboliste {
        font-family: 'Conv_SourceSansPro-Light';
        font-size: 11pt;
    }
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    html {
        font-size: 19px;
    }
    #wrapper{
        max-height: 100%;
    }
    #kurskalender_index { /* die Kalenderansicht scrollt nicht bei kleineren Screens */
        min-height: 100%;
        overflow-y: visible;
        display:block;
        max-height: none;
    }
    #datum, .formbutton {
        font-size: 11pt;
        margin: 2px 2px;
        padding: 3px 8px;
    }
    .modaltabelle-window {
        width: 80%;
    }
    .closemt:hover,
    .closemt:focus {
        color: #000000;
        cursor: pointer;
    }
    .kalender_liste_switch {
        display:none;
    }
    
    .myylink {
        display:none;
    }
    .aboliste {
        font-family: 'Conv_SourceSansPro-Light';
        font-size: 11pt;
    }
}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    html {
        font-size: 18px;
    }
    #wrapper{
        max-height: 100%;
    }
    #kurskalender_index { /* die Kalenderansicht scrollt nicht bei kleineren Screens */
        min-height: 100%;
        overflow-y: visible;
        display:block;
        max-height: none;
    }
    .modaltabelle-window {
        width: 80%;
    }
    .closemt:hover,
    .closemt:focus {
        color: #000000;
        cursor: pointer;
    }
    .kalender_liste_switch {
        display:inline;
    }
    .myylink {
        display:none;
    }
    .aboliste {
        font-family: 'Conv_SourceSansPro-Light';
        font-size: 11pt;
    }
}
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */
    html {
        font-size: 17px;
    }
    #wrapper{
        max-height: 100%;
    }
    #kurskalender_index{ /* die Kalenderansicht scrollt bei größeren Screens */
        max-height: 400px;
        overflow-y: scroll;
        overflow-x: hidden;
        /*    background-color: var(--hintergrund);*/
        background-color: var(--hintergrund);
        border: 1px solid var(--grau);
        border-bottom: 0;
        border-top: 0;
    }
    .modaltabelle-window {
        width: 50%;
    }
    .closemt:hover,
    .closemt:focus {
        color: #000000;
        cursor: pointer;
    }
    .kalender_liste_switch {
        display:inline;
    }
    .myylink {
        display:inline;
    }
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
    html {
        font-size: 16px;
    }
    #kurskalender_index{ /* die Kalenderansicht scrollt bei größeren Screens */
        max-height: 400px;
        overflow-y: scroll;
        overflow-x: hidden;
        /*    background-color: var(--hintergrund);*/
        background-color: var(--hintergrund);
        border: 1px solid var(--grau);
        border-bottom: 0;
        border-top: 0;
    }
    .modaltabelle-window {
        width: 50%;
    }

}
@media (min-width:1281px) { /* hi-res laptops and desktops */
}