/* Page Basics */ 

:root {
    --bgtitle:          #69f; 
    --bgheadline:       #acf;  
    --bgsubheadline:    #bdf; 
} 
@media (prefers-color-scheme: dark) {
:root {
    --bgmain:           #000;
    --bgcontent:        #0c0c00;
    
    --bgtable:          #fff0f0;
    --clborder:         #666;
    --txmain:           #fff;
    --txtitle:          #000; 
    --txlink:           #f00; 
    --txlinkhov:        #fff; 
    --txplaceholder:    #777;  
    --anwselectbg:      #000;
    --anwselectbgempty: #000a9f;
} 

button#switchtobright {
    display: block;
}   

button#switchtodark {
    display: none;
}     
}   

@media (prefers-color-scheme: light) {  
:root {
    --bgmain:           #fff;
    --bgcontent:        #fcfcff;
    --bgtable:          #fff0f0;
    --clborder:         #eee;
    --txmain:           #000;
    --txtitle:          #fff; 
    --txlink:           #00a;  
    --txlinkhov:        #00f;
    --txplaceholder:    #777;  
    --anwselectbg:      #fff;
    --anwselectbgempty: #fffa9f;     
}  

button#switchtobright {
    display: none;
}   

button#switchtodark {
    display: block;
}     
}  


        
* {
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box; 
    box-sizing:content-box;     
}
body {              
    overflow-y:       scroll;
    background-color: var(--bgmain);
    padding:          0;  
    margin: 0;
    min-height:       100vh;                                                        
    font-size:        1em;
    font-family:      Calibri, Verdana, sans-serif;
    display:          grid;  
    gap:              0; 
    grid-template-columns: 1.5fr 6fr 2fr;    
    grid-template-rows: min-content min-content auto min-content; 
}  
header {  
    grid-column: 1 / -1;
    z-index: 2;    
    padding: 0 1em;
    background: var(--bgtitle);
}      

section#search {
    grid-row: 2;
    grid-column: 1/-1;
    height: 2em; 
    border-bottom: 1px solid  var(--clborder);
    display:          grid;  
    gap:              0; 
    grid-template-columns: 1.5fr 6fr 2fr;                  
}   
#searchinput {  
   border-left: 1px solid var(--clborder);
   box-shadow: 0;
}                   

#searchfill {
   grid-column: 1/span 2;
   border-right: 1px solid var(--clborder); 
}       
#searchform {
    display: block;
} 
       
nav {   
    text-align: right;
    font-size: x-large;
    padding: 2em 1.5em; 
    padding-left: 7em;
    margin: 0;      
    grid-row: 3;
    grid-column: 1; 
    border-right: 1px solid var(--clborder);  
    display: grid;
    grid-template-rows: auto min-content;
}     

nav ul {  
    padding-left: 0;    
}            
nav ul ul {  
    border-top: 1px solid var(--txmain);
    padding-left: 0;           
    padding: .5em;
}


main {            
    background: var(--bgcontent);
    padding: 2em; 
    border-right: 1px solid var(--clborder);
}   

section#tasks { 
    display: flex;
    flex-direction: column;
    gap: .5em;
    color: var(--txmain); 
    padding: 2em 1.5em;  
    margin: 0;      
    border: 0;          
}  

section#tasks div.taskgrid, div#taskcontent {
    display: flex;
    flex-direction: column;
    gap: .5em; 
}        
span#notifications {
    display: none;
} 
div#shownotifications {  
    grid-column: 1/-1;
    display: none;
}  

div.anmeldung_stammdaten {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (width < 70em) {
    body {      
        grid-template-columns: 1.5fr 8fr;  
    }  
    section#tasks { 
        display: none;
    }     
    div#shownotifications {
        display: block;        
    }
}



footer {    
    grid-column: 1 / -1;   
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    padding:5px;     
    border-top: 1px solid var(--clborder);      
    background: var(--bgmain);
    /* background-image: url('../images/backgrounds/footer_bg.png'); */
}      

footer div#templatechoice {

}

ul {
    list-style-type: none;
}
      
.dialog {
    font-size: 0.8em; 
    grid-column: 2; 
    grid-row: 2;
}   


a {
    color:  var(--txlink);     
} 

section.seite {       
    display: grid;       
    gap: 1em;    
    grid-template-rows: repeat(10, min-content);     
    grid-template-columns: 1fr; 
    
}        

section#start {
    grid-template-columns: 1fr 1fr;
}      

section#login {
    grid-template-columns: auto max-content auto;
    grid-template-rows: min-content;
}
section#kinder_detail {
    grid-template-columns: 63% 36%;
}        

section#anwesenheit {            
    grid-template-columns: 64% 35%;
    grid-template-rows: min-content;
} 

section#kinder_uebersicht, section#kinder_uebersicht-next {
    grid-template-columns: 1fr;
} 


footer a {     
    float:right;
    display: block;
    height:50px;
}
footer a:hover {
    background-position: 0px 100px;
}

#head { 
    height:           60px;
}  

div#headcontent {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  
  height: 2em;
}       
div#headcenter {
  float: right; 
  padding-top: 7px; 
  padding-right: 150px;
}           
span#pagetitle {
  font-size: x-large;
  font-weight: bold;
  color: #fff;
}  

div.box {
    display: flex;
    flex-direction: column;  
    overflow: hidden;  
    background: var(--bgmain); 
    margin-bottom: 1em;
}                          
div.boxtitel {  
    padding: .25em .5em;
    height: 1.5em; 
    background: var(--bgtitle);
    color: #fff;    
    font-weight: bold; 
}         
div.boxinhalt { 
    padding: .5em;
    background: var(--bgmain);
    color: var(--txmain); 
    border: 1px solid var(--bgtitle); 
    border-top: 0; 
}  
div.box_titellos { 
    padding: .5em;
    background: var(--bgmain);
    color: var(--txmain);  
    border: 1px solid var(--clborder);
}
     
section#start div.box {              
    border: 1px solid var(--bgtitle);
    margin-bottom: 0;
}      

section#start div.boxinhalt {  
    border: 0;
}

#logininfo {
    line-height: 1.5em;
    text-align: right; 
}     
span.login {
  font-size: large;
  color: #fff;
}
div#orgachoose{
    text-align: center;
} 

#searchbar {  
    height:31px;   
    padding-top:10px; 
    border: 1px solid var(--clborder);     
}

#searchbread {   
    padding-top: 2px;
    float:left;    
    padding: 0 1em; 
 /* background-color: #eef;      */
    border: 1px solid var(--clborder); 
    height:20px;    
}

#searchinput {
    height:2em;
    background-color: #transparent;
    float:right;   
}

#searchinput input {
    color:var(--txplaceholder);
    width:260px;
    height:20px;
    background-color: var(--bgmain);
    padding-left: 10px; 
    padding-right: 10px;
    margin:0;   
    line-height: 1.2em; 
    border: 0px solid var(--bgheadline);
    float: right;    
}

#searchinput input:focus {
    color:var(--txmain);
}  

.logtext {
  color:          #fff;
}  

.logcnt {
  color:          #aae;
}        
.logquery {
  color:          #2EFEF7;
}
.logerr {
  color:          #f00;
  font-weight:    bold;
}
.logwarn {
  color:          rgb(255, 94, 0);
  font-weight:    bold;
}


#loginbox {
    width:350px;
    margin-left: 275px;
    margin-top:50px;
    font-size:0.9em;
}     

h1 {                 
    color: #000;
    background: var(--bgheadline);
    grid-column:         1 / -1;
    margin-left:         0px;
    padding:             5px 10px 5px 10px;
    font-weight:         bold;
    font-size:           1.2em;  
    border:              0;   
    text-align:          center;  
}   
h2 {
    grid-column:         1 / -1;
    margin-left:         0px;
    padding:             1px 10px 2px 10px;
    font-weight:         bold;
    font-size:           1.2em;    
    background:          var(--bgsubheadline);
    border:              0;    
}  
h4 {
    text-align: center;
}


a.footer_kf {  
  margin-top: 0; 
  text-align: right;
  background-size: 90px 200px;
}

th {
    text-align: left;
}     

tbody tr.liste:hover {
    background: none;
    text-align: left;
}    

tbody tr.liste td {
    text-align: left;   
    vertical-align: top;
}  

textarea {
    font-family: Calibri, Arial;    
    font-size: 9.5pt; 
    padding: .25em;
}   
  
/** Einstellungen f�r L�schdialog bei Urlaubseintr�gen
 *  s. includes/kinder_detail.inc.php [rp] */

div.darkenedbg {
    position: fixed; 
    display: grid;
    grid-template-columns: auto max-content auto;
    grid-template-rows: auto max-content auto;  
    z-index: 3; 
    top: 0;     
    left: 0;  
    bottom: 0;     
    right: 0;
    background: rgba(20,20,20,0.7);   
    text-align: center;
    vertical-align: center;
} 

fieldset.dialog {  
    grid-row:        2;
    grid-column:     2;  
    text-align:      center; 
    padding:         30px; 
    z-index:         10000;
    width:           350px;   
    border:          1px solid #666;
}      
div.dialogtitel {       
    margin-top:    -10px;
    font-weight:   bold;    
    background:    linear-gradient(#cef, #acf);
    border:        1px solid #ccc;     
    border-bottom: 0;      
    padding:       2px;
    box-shadow:    -1px -1px 1px 0 #9af inset; 
    text-align:    center;
}    

div.deldialog {
  position: fixed; 
  z-index: 20; 
  top: 45%;     
  left: 45%; 
  min-height: 100px;    
  width: 300px;
  margin-top: -50px;
  margin-left: -150px;
  background-color: #ddd;
  border: 1px solid var(--txmain); 
  text-align: center; 
  padding:20px;
}  

div.rmddialog   {
  grid-row:        2;
  grid-column:     2;  
  z-index: 20;      
    width:           350px; 
  background-color: #ddd;
  border: 1px solid #aaa; 
  text-align: center; 
  padding:20px;
}       

div.rmddialog legend {
  font-weight: bold; 
    border-bottom: 1px solid #aaa;
}      

div.rmddialog span.highlight {
  color: #f00;
  font-weight: bold;
}      

div.rmddialog span.sql {
  background-color: var(--bgmain);
  font-family: Courier New;
}  

div.maildialog   {
  position: fixed; 
  z-index: 20; 
  top: 30%;     
  left: 45%;  
  width: 450px;
  margin-top: -50px;
  margin-left: -150px;
  background-color: #ddd;
  border: 1px solid var(--txmain); 
  padding:20px;
}      

div.maildialog table {
  width: 95%;
}  

.maildialog ol {
    list-style-type: none;  
  float: left;  
  margin: 0;
  margin-left: -0px;
  width: 400px;
}   
.maildialog ol li {
  list-style-type: none;  
  float: left; 
  margin: 0;
  width: 100%;
}     

div.maildialog div.nachricht {
  border:              1px solid #aaa; 
  height:              150px; 
  width: 385px;
  background-color: var(--bgmain); 
  overflow-x: hidden;   
  margin-left: 0px;
} 

div.maildialog div#msg_txt { 
  
} 

div.maildialog div#msg_sig {
  background-color: var(--bgmain);   
  pointer-events: none;
}  

div.maildialog input[type=text] {   
  width: 300px;
}       
div.maildialog textarea {   
  width: 365px; 
  resize: none;
  overflow: auto;  
  padding: 2px;   
  padding-right: 20px; 
  Font-family:Calibri;
  Font-Size:11pt; 
  border: 0;    
  word-wrap: normal;
}

table#bezugspersonen {
  font-size: small;     
  width: 100%;          
  border-collapse: collapse;
  padding: 0;  
}     

a.ok {
  color: #090;
}       

a.exc {
  color: #960;
}        

table#uebersicht {       
  width: 100%; 
  border-collapse: collapse;
  padding: 0;  
  color: var(--txmain);     
  border: 1px solid var(--bgmain);
  overflow: hidden;
}  
table#uebersicht tbody tr.err {
  background-color: var(--bgtable);  
}  

table#uebersicht tbody tr.ok {
  background-color: #f0fff0; 
}      

table#uebersicht tbody tr.exc {
  background-color: #fffff0; 
}       

table#uebersicht tbody tr:hover {
  background-color: #eef;
  transition: all ease 0.5s; 
}    

table#uebersicht th {  
  background: var(--bgheadline);
  color: var(--txtitle);
  border: 0; 
  min-width: 70px;     
  font-weight: normal; 
  text-align: center; 
}  

div#bezugpersonen {    
    width:                 100%;
    display:               grid;   
    gap:                   .5em;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));         
}     

div.bezugperson {    
/*    display: grid;
    grid-template-columns: max-content max-content;  */
    padding:          10px;        
    border:           1px solid #ccc; 
    background-color: var(--bgmain); 
    color: var(--txmain); 
}           
div.bezugperson a { 
} 

div.bezugperson:hover { 
    color: #000;              
    background-color: #def;
}         
div.bezugperson:hover a { 
    color: #000;              
    background-color: #def;
}         

div.bezugperson div.actions { 
    display: block;   
    margin-top: 0px;
    margin-right: 0px;
    height: 20px;
    float: right;
    width: 70px;   
    text-align: right; 
    z-index: 600; 
    opacity: 0.9;
}   

div.bezugperson div.actions a.hovershow {  
    font-size: 1.2em;
    display: none;
    background: none;             
    padding: 0;
    padding-bottom: 3px;
}  

div.bezugperson:hover div.actions a.hovershow {   
    display: block;
}     

table#uebersicht td {
  border: 0;  
  text-align: center; 
  background-color: transparent;  
  padding-left: 2px;   
  padding-right: 2px;
}    


table#uebersicht td.name { 
  text-align: left; 
  min-width: 100px;     
  padding-right: 5px;
}   

table#uebersicht td a.pdf { 
  color:  #00f;
  height: 100%;
  display: block;       
  border: 1 px solid var(--txmain); 
  background-color: var(--bgmain); 
  padding: 0;
}       

table#uebersicht td a.pdf:hover { 
  color:  #00f;  
  background-color: #ccf;
}   

div.sql {
  width: 90%;
  background-color: var(--bgmain);   
  text-align: left;
}
table#uebersicht tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;   
  text-decoration: none;
  padding-left: 2px;     
  padding-right: 2px;
}  

 table#uebersicht tbody tr td a {
  display: block;
  color: #000;
  width: 100%;
  height: 100%;   
  text-decoration: none;
}        

table#uebersicht tbody tr a.ok span.name {
  color: #090; 
  display: block;
  text-align: left;
  max-width: 100px;
}      

table#uebersicht tbody tr a.err span.name {
  color: #f00;      
  display: block;
  text-align: left;
  max-width: 100px;
}   

table#uebersicht tbody tr:hover a {
  color: var(--txlink);     
  background-color: transparent;
}           
table#uebersicht tbody tr:hover a span.name {
  color: var(--txlink); 
}    

table#uebersicht tbody span.tbllarge {
  font-size: x-large;
}     

table#uebersicht tbody span.tblxlarge {
  font-size: x-large;
}     

table#uebersicht tbody a.pdflink {
  color: #00f;
  font-weight: bold;     
  
}       

table#uebersicht tbody a.pdflink:hover {
  color: #99f;
}


table#stammdaten  {
  text-align: left;
}  

table#meldungen  {
  text-align: left;
}        

span.success {
  color: #090;
  font-weight: bold;
}  

tr.toplin {
  border-top: 1px solid #999; 
}

tr.toplin td {
  border-right: 1px solid #999; 
  padding: 5px;
}      
tr.toplin td.last {
  border-right: 0; 
}   

main a, #searchbread a {
  color: var(--txlink);
  text-decoration: none;  
  padding-left: 3px;  
  padding-right: 3px;  
}   


main a.nomargin {
    padding: 0px;
    margin: 0px;
}    

main a.anw, #searchbread a {
  padding-left:  0;  
  padding-right: 0px;  
} 

main a:hover, #searchbread a:hover {
  color: var(--txlinkhov);
} 

main a.bzp_boxlink {
    margin-top: 0; 
    color: var(--txmain); 
    padding: 0; 
    display: block;  
}

/** Hinweise, Warnungen, Best�tigungen */   

div.hinweis {
  color: #000;  
  background-color: #cef;
  padding: 10px; 
  grid-column: 1/-1;
  font-style: italic;
}     
div.warnung {
  color: #fff;  
  background-color: #d3004a;
  border: 1px solid #d3004a;
  padding: 10px; 
  font-style: italic;
}       
 
section#tasks a div.warnung:hover { 
    color: #d3004a;
    background: #fff; 
}
div.ack {
  color: #000;  
  background-color: #afa;
  border: 0px solid #696; 
  padding: 10px;
}       
div.donetask {
  color: #000;  
  background-color: #aaa;
  padding: 10px;
}   

/** includes: Anwesenheit */        

div.anwrow {
  display: table-row; 
}    

div.anwname {
  display: table-cell; 
  width:   12em;  
}      

div.anwzeit {
  display: table-cell; 
  width:   6em;
}   

div.anwausw { 
  display: table-cell;
}        

/** includes: Bezugspersonen */   
div.sugrow {
    display: table-row;
}  /**    
div.sugrow:hover {
    background-color: #aaf;
}     */

div.sugcell {   
    display:    table-cell;
    width:      200px;
    text-align: left;
}    

div.sugbox {
    display:          table-cell; 
    width:            30%;      
    padding:          3px; 
    background-color: var(--bgmain); 
    border:           1px solid #ccc;     
}     

div.sugbox:hover {
    background-color: #def;
    
}    

div.sugbox a {
    color: var(--txmain);
} 

div.sugbox a:hover {
    background-color: #def;
}     

span.highlight {
    background: #eef;
}

/** Einrichtungsauswahl */
/* div#orgachoose {
  border: 1px solid var(--bgtitle);
  background-image: linear-gradient(#acf, #69f);   
  padding: 2px 10px 2px 10px; 
}  */   

span.orga {
  color: var(--txtitle);
    font-size: 1em;
    font-family: Calibri, Verdana, sans-serif;
}
select#orgachoose { 

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid transparent;
  color: #000;
  padding: 0 0 0 0; 
    font-size: 1em;
    font-family: Calibri, Verdana,sans-serif;
  background-color: transparent;
  background-image:url(/images/icons/select-arrow_black.png);
  background-position: right;
  background-repeat: no-repeat;    
  width: 15em;
}      
select#orgachoose:hover { 
  border: 1px solid var(--bgheadline);
  background-color: #d2e4ff; 
  transition: all ease 1s;
  background-image:url(/images/icons/select-arrow_black.png);  
  color: var(--txmain);
}          
select#orgachoose:focus {
  border: 1px solid #aaa; 
  border-bottom: 0;
  color: #000;         
  background-color: #d2e4ff; 
  background-image:url(/images/icons/select-arrow_black.png);
}      
select#orgachoose option { 
  border: 1px solid #d2e4ff;
  background-color: #d2e4ff; 
  transition: all ease 0.3s;  
  color: #000;
}      
select.valid {
  min-width: 100px;
}  
     
select#gruppenwahl {
  width: 100%;
}  


select { 
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #aaa;
  color: var(--txmain);
  font-size: 1em;
  font-family: Calibri, Verdana,sans-serif;
  background-color: var(--bgmain);
  background-image:url(/images/icons/select-arrow_black.png);
  background-position: right;
  background-repeat: no-repeat; 
}   

div.kasten {
    width:   .9em;
    height:  .9em;  
    margin-bottom: -2px;
    border:  1px solid #ccc;
    display: inline-block;
}

select.anw {
}
select.anw:hover {  
  transition: all ease 0.3s; 
}     
select.anw option {
}      
 
select.empty {
  background-color: var(--anwselectbgempty);  
}  
select#batchtype {
  min-width: 150px;
}

option {
  background-color: var(--bgmain);  
  color: var(--txmain);   
}             

div#log {
  background-color: #000; 
  color: #6f6; 
  font-family: Courier New; 
  padding: 0px; 
  overflow: scroll;  
}    

p.backlink {
   grid-column: 1/-1;
}   

a.backlink {   /*
  border:                     1px solid #ccc;    
  border-left:                0;
  background-image: linear-gradient(to right, #fff, #ccc);
  */
}      

select.zeit {
  width: 70px;
}

select.datum {
  width: 90px;
}  

#details_upperleft {  
    grid-row: 2;
    grid-column: 1;
}  

#details_upperright {    
    grid-row: 2;
    grid-column: 2;
}

#details_lower {       
    grid-row: 3;
    grid-column: 1 / span 2;
}       

div.actionbox {
    padding-right: 1em;
}                      
div.actionbox a {
    padding: 0;
}

input.eb_titel {       
    width:      400px; 
    padding:   .25em; 
}

textarea.eb_teaser {        
    width:      410px;   
    height:     150px;
    resize:     none; 
    overflow:   auto;   
} 

div.useredit {    
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto min-content min-content;
    gap: .3em;
}    

div.useredit div.namerow { 
    grid-column: 1/-1;
    font-weight: normal;
    font-size: large;
}      
div.useredit form {
    margin: 0;
}     

span.impficon {;    
    background: linear-gradient(transparent, black, transparent); 
    font-size: 1.2em; 
    font-style: initial;
}    

div.ep_invite {
    display: grid;
    grid-template-columns: 1fr 10fr;
    grid-template-rows: 1em 1em; 
    
}            

section#ereignisplan a {
    color: #000;
}     

div.dropzone {
    min-height: 3em;
    padding:    3px;
    margin:     0;
    background-color:  var(--bgmain);
    border:     1px solid var(--clborder); 
}

div.subtitle {
    background: var(--bgheadline);
}