@font-face { font-family: 'Material Symbols Outlined'; font-style: normal;
  src: url('../fonts/material-design-icons/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2') format('woff2');
}

.material-symbols-outlined, .material-symbols-filled{
  font-family: 'Material Symbols Outlined';
  font-weight: 300; 
  font-size: 24px; /* Preferred icon size */
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.material-symbols-filled{
  font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}
/*<span class="material-symbols-outlined">home</span>*/


html, body {
        text-align:left;
        font: 1em/130% Calibri, Arial, Verdana, Lucida, sans-serif;
        color: #555;
        width: 100%; height: 100%;
        margin:0;padding:0;
        background-color:#fff;
        position:relative;
}


a:active {
        color: #409fff;
        font-weight: normal;
        text-decoration: none;
}

a:hover {
        color: #00afff;
        text-decoration: none;
}
a:visited {
        color: #256fb9;
        text-decoration: none;
}
a {
        color: #256fb9;
        text-decoration: none;
}
a IMG {border:none;}
A:hover .Bild_Rahmen {background-color: #f60;}
A .Bild_Rahmen {border:1px solid #ddd;}

P {margin:0; margin-bottom:10px;}

h1, h2, h3, h4        {
        /*font: 1em/1.2em 'Raleway', Verdana, Lucida, Arial, sans-serif;*/
        color: #060F2B;
        text-align:left;
        margin-top:0px;
        text-shadow: 2px 1px 1px #ccc;
        -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none;  hyphens: none;

        }

h1        {
        font-size:130%;
        font-variant:small-caps;
        font-weight: 300;
        margin-top: 0px;
        margin-bottom: 5px;
        line-height:1.2em;
        padding-bottom: 0px;
        }
/*h1:first-letter {color:#B22D0D;font-weight: 400;        }*/


h2        {
        font-size: 110%;
        margin-bottom: 5px;
        font-variant:small-caps;
        /*text-transform: uppercase;*/
        }

h3        {
        font-size: 100%;
        margin-bottom: 5px;
        margin-left: 0px;
        font-variant:small-caps;
        letter-spacing: 1px;
        }
h4        {
        font-size: 100%;
        margin-bottom: 5px;
        font-weight:900;
        }
h5        {
        background-color: transparent;
        font-size: 100%;
        font-weight:400;
         color:#888;
         margin:0px;
         margin-bottom:8px;
        text-transform: uppercase;
        }

b { font-weight:500;text-shadow: 1px 1px 1px #666;
  letter-spacing: 0.1em;
  padding-left:2px;

}



HR{
        border:none;
        border-top:1px solid #415958;
         border-top:1px solid #519C37;
         border-top:1px solid #cccccc;
        height:0px; /*Hack, damit HR im  IE & FF gleich*/
}
IMG {max-width:100%;}
IMG.icon{max-width:none;max-height:none;}

.liste{
  margin-top:10px;
  margin-bottom:10px;
  margin-left:0px;
  padding-left:20px;
  list-style-image:url(../images/liste.gif);
  }

.liste li
{  margin-bottom:10px;
   padding-left:5px;
   margin-left:0px;
   line-height:150%;
}

.hinweis {line-height:1.2; font-size:85%;}

/********************      Template-Klasssen     ********************************************/


.datatable {background-color:#e0e0e0;border:1px solid #cccccc; border-spacing: 1px;padding:1px; min-width:300px;width:100%;
  /*border-bottom-right-radius: 10px;  border-bottom-left-radius: 10px;*/
  box-shadow:         2px 2px 4px 0px rgba(0,0,0,0.4);}
.datatable>TBODY>TR>TD, .datatable>TBODY>TR>TH{ padding:10px;padding-top:5px;padding-bottom:5px; min-height:10em; line-height:130%; text-align:left;}
.datatable>TBODY>TR>TH{ background-color:#006ec0; color:#fff;font-weight:400;}
.datatable>TBODY>TR>TH A{color:#fff;}

.datatable>TBODY>TR>TD {background-color:#eeeeee;}
.datatable TR:nth-child(odd) TD {background-color:#f9f9f9;}
.datatable>TBODY>TR>TD:first-child::after { content: "";   display: inline-block;   vertical-align: top;   min-height: 1.4em; /*Ersatz für min-height*/ }
.datatable>TBODY>TR:hover>TD {background-color:#fff;}




.upload {border:1px solid #ccc;margin-top:5px;margin-bottom:5px;padding:5px; padding-top:10px;padding-bottom:10px;}

.upload INPUT[type=text] {width:calc(100% - 400px);max-width:62%; border-bottom:1px solid #ccc;}
 
.upload IMG {margin-bottom:5px;}
.upload IMG.Bild {float:right;max-height:140px}
@media (max-width: 500px){
  .upload IMG.Bild {width:100%; height:auto; max-height: none;}
  .upload INPUT[type=text] {width:100% }
}


.Akkordeon>LABEL>DIV:first-child{  background:#006ec0;}

.akzeptiertHell>TD{background-color:#aFa !important;}

.akzeptiert{border-left:20px solid #0a0;}
.abgelehnt{border-left:20px solid #aaa;}
.beworben{border-left:20px solid #268edf;}


.BewerbungsBox{
  box-sizing: border-box; padding:10px;padding-left:20px;padding-right:20px; 
		float:right; margin-left:20px;margin-bottom:10px; 
		width:38%; max-width:100%; 
		border:1px solid #ccc; background-color:#fafafa; font-size:90%; 
}
@media (max-width: 800px){
  .BewerbungsBox{ width:100%; max-width:100%; margin-left:0;}
}


.header{background-color:#006ec0; color:#fff;padding:10px;padding-left:15px}
.header A{color:#fff; cursor:pointer;}

.header_grau{background-color:#eee; color:#333;padding:10px;padding-left:15px}
.header_grau A{color:#999; cursor:pointer;}

.Logbuch {padding:15px; padding-top:5px}
.Logbuch .Bild{max-height:150px; float:right; margin:5px;}


.popup>DIV{
		display:none;
		position:absolute;
		background-color:#fff; border:1px solid #ccc;
		padding:10px;
		margin-left:-10px;
		cursor:pointer;
		width:800px;
		max-width:90%;
		box-shadow:2px 2px 8px rgba(0,0,0,0.3);
		
}
.popup>input:checked+DIV{display:block;z-index: 1;}

DIV.TimeInfo{border:1px solid #ccc; border-top: none;; padding:5px 10px;}
DIV.TimeInput{border-top:1px solid #fff; padding-bottom:8px;padding-top:8px;padding-left:8px;padding-right:8px;}
.TimeInput INPUT {padding-left:5px;padding-right:5px;}
/*.TimeInput INPUT:nth-of-type(1){border-right:none;padding-left:0;padding-right:0;} 
.TimeInput INPUT:nth-of-type(2){border-left:none;padding-left:0;padding-right:0;} 
.TimeInput INPUT:nth-of-type(3){vertical-align: bottom;  width:545px; max-width:100%;} /*text*/
*/ 
.TimeInput IMG{vertical-align: middle;}

.TimeInput{background-color:#f0f0f0;}
.TimeInput:nth-of-type(2n){background-color:#fafafa;}
.TimeInput:last-of-type{background-color:#fff;}
.TimeInput.neuer_abschnitt{padding-bottom:15px;border-bottom:20px solid #006ec0;}

/*************************************/
LABEL.mehr{cursor:pointer;}
LABEL.mehr>input{margin-top:10px;display:inline-block;display:none; }
DIV.mehr{display:none;}
LABEL.mehr>input:checked + DIV{display:block;}

.datatable > TBODY > TR.lastedited > TD{background-color:#b6d6ed;}


#LogbuchEdit{
		display:none;   /*display: block; display: -webkit-flex; display: flex;*/
  position:absolute;
  z-index:900;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 220px;
  /*bottom: 0;*/
		/*background-color:rgba(255,255,255,0.8);*/
  -webkit-align-items: center;
  align-items: center;
}

#LogbuchEdit>DIV{
		margin:auto;
		padding:25px; padding-top:10px;
		border:1px solid #ccc;
  background-color:#fff;
  box-shadow: 2px 3px 20px 2px rgba(0, 0, 0, 0.2);
		max-width:600px;
		min-width:60%;
}
@media (max-width: 800px){
  #LogbuchEdit>DIV{
		width:100%;
  }
}

/*************************************************/
a.tooltip{outline: none;}
.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted #888;*/
}
.tooltip .tooltiptext {
    visibility: hidden;
    font-size:95%;
    line-height:1.2;
    width: 280px;
    text-align:left;
    background-color: #F9F8F4;
    background-color: rgba(249,248,244,0.95);
    color: #888;
    border-radius: 5px;
    padding: 10px 15px;
    box-shadow:         2px 3px 6px 2px rgba(0, 0, 0, 0.4);
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}




/*********** Formulare *****************************************************************************************************/
FORM{ display:inline}

input, textarea, select,button{
  box-sizing: border-box;
  background-color: #F5f7fF;
  color: #000;
  padding-left:5px;
  border: 1px solid #c7c7c7;
  padding:5px;
  line-height:1.2em;
  font-size:13px;
}



textarea {padding:5px;
  border:1px solid #ccc;
  border-top:1px solid #aaa;
  border-left:1px solid #bbb;
  -moz-box-shadow:    1px 1px 6px 0px #999;
  -webkit-box-shadow: 1px 1px 6px 0px #999;
  box-shadow:         1px 1px 2px 0px #999;
}
input{
  display:inline-block;
  padding-left:5px;padding-right:5px;
  border-top:1px solid #999;
  border-left:1px solid #bbb;
  border:none;
  border-bottom:1px solid #ccc;
  
  outline: none; /*Remove Chrome and Safari glows on focus*/
  cursor:pointer;
}


input:hover{background: #fff;}
input:hover, textarea:hover{
  box-shadow:         0px 0px 6px 3px #ffF;
}
textarea:hover, textarea:focus{background-color: #fff; }
input:focus{background: #fff; border-bottom:1px solid #268edf;}
input:focus, textarea:focus{
  box-shadow:         0px 0px 6px 3px rgb(38,142,223,0.2);
}

input:-moz-read-only{ background-color: #eee;}
input:read-only{ background-color: #eee;} 

INPUT[type=date] {width: 135px;}
INPUT[type=time] {width: 80px;}
INPUT[type=text],
INPUT[type=email] {  
  width: 100%;
  max-width: 100%;
}
@media (max-width: 800px){
  INPUT[type=checkbox]{border:1px solid #f00;transform: scale(1.4);}
}
INPUT[type=submit],button {
        border:1px solid #999;
        font-weight:700;
        padding-right:15px;
        padding-left:15px;
        margin-right:20px;
        min-width:160px;
        box-shadow:3px 2px 3px 0px rgba(0,0,0,0.2);
        color:#666;
        cursor:pointer;
}

button{padding:5px;margin-bottom:10px; display:table-row;}
button .icon,button .text{display:table-cell;vertical-align: middle;text-align:center;}
button .text{width:100%}


INPUT[type=submit]:hover,
button:hover{
       box-shadow:0px 0px 1px 0px rgba(0,0,0,0.1);
    animation-duration: 0.5s;               /* Dauer der Animation*/
    background-color: #268edf;
    color:#fff;
}


.schatten{      box-shadow:         3px 2px 6px 0px rgba(0,0,0,0.3);}


.select2-selection--single{border-radius:0 !important;}
.select2-dropdown         {border-radius:0 !important; box-shadow:         3px 2px 6px 0px rgba(0,0,0,0.3);}
.select2-results__options LI{font-size:80%}

.select2-container--default .select2-results>.select2-results__options{
    /*max-height: 75% !important;*/
  max-height: 800px !important;
}

.Filter{position:relative; white-space:nowrap;}
.Filter INPUT{max-width:95%;}
.Filter A{color:#f00 !important;font-weight:600; margin-left:-15px;vertical-align: middle; font-size:130%;cursor:pointer;}

.titel {background-color:#268edf; color:#fff;}