/* hintergrund nur aus langeweile */
body{
    /* background-image:url('/public/img/home-office.jpg');
    background-size:cover;
    background-position: center bottom;
    background-attachment: fixed;
    background-repeat:no-repeat; */
    background-color: #efefef;
}
:root{
    --ferien: #4286f4;
    --komp:#8adb8f;
    --zivi:#4d9b69;
    --frei:#f4b942;
    --weiter:#f4fc64;
    --we:#444;
    --extern:#fccb64;
    --feiertag:#aaa;
    --bruecke: #6242f4;
    --prifer :#ffa899 ;
}
.message-wrapper{
    padding:20px 0;
}
.personen-liste-container{
    max-height:63vh;
    overflow-y:auto;
}
#month-form{
    display:block;
    clear:both;
    margin:0 auto !important;
    float:none;
    width:auto;
}
.calendar-wrapper{
    margin : 0 auto;
    width: max-content;
}

.jahr-tage-bruecke{ background-color:var(--bruecke); }
.jahr-tage-ferien{ background-color:var(--ferien); }
.jahr-tage-frei{ background-color:var(--frei); }
.jahr-tage-we{ 
    background-color:var(--we); 
    border-color:#444 !important;

    background-color:#444;
    color:#999;
}
.jahr-tage-komp{ background-color:var(--komp); }
.jahr-tage-extern{ background-color:var(--extern); }
.jahr-tage-zivi{ background-color:var(--zivi); }
.jahr-tage-weiter{ background-color:var(--weiter); }
.jahr-tage-feiertag{ background-color:var(--feiertag); border-color:#aaa !important;}
.jahr-tage-schulferien{ 
    text-align:left !important;
    padding-left:10px;
    border:1px solid #aaa !important;
    background: repeating-linear-gradient(
        45deg,
        #eee,
        #eee 10px,
        #ccc 10px,
        #ccc 20px
    );
}

tr.schulferien{color:#555;}
.jahr-tage-prifer{
    background: var(--prifer);
}

.table tr td, .table tr th{
    border-color:#aaa !important;
}
.table tr:first-child td, .table tr:first-child th{
    border:0;
}
table.table2 tr td:first-of-type{
    border-right:1px solid #333;
}
td.fixed{
    position:absolute;
    background-color:#fff;
    float:left;
    clear:both;
    border:1px solid red;
    width:200px;
    overflow:hidden;
    left:0px;
}
.table3 tr td, .table3 tr th{
    box-sizing: border-box;
    border-right:1px solid;
    text-align: center;
}
.table3 tr{
    clear:both;
}
.table3 tr td:last-child{
    border-right:0;
}
.table3 tbody tr td{
    width:46px;
    min-width:46px;
    max-width:46px;
}
.ueberzug{
    background:#f44242;
    border-top:0 !important;
}
#jahr-wrapper{
    width:calc(100% - 40px);
    min-height:80vh;
    background-color:#fff;
    overflow:scroll;
    position:relative;
    margin:0 20px;
    box-shadow:0 0 5px 0 #ccc;
}
[class*="tag-"]{
    width:80px;
    height:80px;
    background-color:#e8e8e8;
    display:block;
    float:left;
    text-align:center;
    padding:12px 0px;
    margin:0px 5px;
    transition: 0.2s;
    box-shadow:1px 1px 1px #aaa;
    border-radius:2px;
}
[class*="tag-"] h6{
    margin-top:10px;
    font-size:12px;
}
[class*="tag-"] input[type=checkbox]{
    position:relative;
    width:100%;
    height:100%;
    display:none;
}
[class*="tag-"].selected {
    display:block;
    border:0;
    background: rgb(202, 202, 202);
    transition: 0.04s;
    box-shadow:inset 1px 1px 2px #aaa;

}
.tag-schulferien{               border-bottom:8px solid var(--info) !important;}
.tag-schulferien.tag-weekend, .tag-schulferien.tag-weekend div.innerdiv{border:0;}
.tag-ferien div.innerdiv{       border-color:#4286f4 transparent transparent transparent;}
.tag-frei div.innerdiv{         border-color:#f4b942 transparent transparent transparent;}
.tag-komp div.innerdiv{         border-color:#8adb8f transparent transparent transparent;}
.tag-zivi div.innerdiv{         border-color:#4d9b69 transparent transparent transparent;}
.tag-weiter div.innerdiv{       border-color:#f4fc64 transparent transparent transparent;}
.tag-extern div.innerdiv{       border-color:#fccb64 transparent transparent transparent;}
.tag-feiertag div.innerdiv{     border-color:#aaa transparent transparent transparent;}
.tag-schulferien.tag-weekend{   border:0 !important;}
.tag-prifer .innerdiv{          border-color:var(--prifer) transparent transparent transparent;}
.tag-bruecke .innerdiv{           border-color:#6242f4 transparent transparent transparent;}
.tag-weekend{
    /*Wochenende*/
    background-color:#444;
    color:#999;
    box-shadow:0;
    border-radius: 10%;
}
.tag-weekend input{
    content:"disabled";
}
.tag-frei.tag-feiertag{ border-bottom:8px solid #f4b942 !important; }
.tag-ferien.tag-feiertag{ border-bottom:8px solid #4286f4 !important; }
.tag-komp.tag-feiertag{ border-bottom:8px solid #8adb8f !important; }
.tag-zivi.tag-feiertag{ border-bottom:8px solid #4d9b69 !important; }
.tag-weiter.tag-feiertag{ border-bottom:8px solid #f4fc64 !important; }
.tag-extern.tag-feiertag{ border-bottom:8px solid #fccb64 !important; }
.tag-bruecke.tag-feiertag{ border-bottom:8px solid #6242f4 !important; }

.guthaben-block{
    background:#fff;

    width:100%;
    height:auto;

    margin:5px;
    margin-top:20px;
    padding:10px;

    float:left;
    display:block;
}

.month-block{
    width:50px;
    height:50px;
    border:1px solid #afafaf;
    float:left;
    text-align:center;
    margin:2px;
    padding:12px 0px;
}
.month-block.ferien{
    background-color: #4286f4 !important;
    color:#fff;
}
.month-block.ferien a{
    color:#fff !important;
    text-decoration:none;
}
.unselectable {
    -moz-user-select:none;
    -webkit-user-select:none;
}
a.delete{
    color:#f44d41;
    float:right;
}
.innerdiv{
    margin-top:-35px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 24px 24px 0 0;
    border-color: transparent transparent transparent transparent;
}
.table-daten{
    position: absolute;
    left:0;
    top:0;
    border-collapse: collapse;
    background-color: #fff;
    z-index: 21;
}
.tbl-sald td{
    width:0 !important;
    min-width: auto !important;
    max-width: auto !important;
    border:0 !important;
    padding:0 !important;
}
.table-daten tr td{
    text-align:center;
    min-width:30px;
    max-width:30px;
    border:1px solid #ccc;
    max-height:30px !important;
    min-height:30px !important;
}
.table-daten tr td:first-child{
    text-align:left;
    min-width:250px;
    max-width:250px;
}
.table-fixedpersonen{
    position: absolute;
    left:0;
    top:90px; /*=====WEGEN FIXIERTEN MONATEN ÜBER DEN PERSONEN======*/
    border-collapse: collapse;
    background-color: #fff;
    z-index: 20;
}
.table-fixedpersonen tr{
    
    max-height:30px !important;
    min-height:30px !important;
}
.table-fixedpersonen tr td{
    text-align:left;
    min-width:250px;
    max-width:250px;
    border:1px solid #ccc;
    max-height:30px !important;
    min-height:30px !important;
}
.table-uebersicht{
    border-collapse: collapse;
    position: absolute;
    left:250px;
    top:90px;
}
.table-uebersicht tr:first-child{
    font-weight:bold;
}
.table-uebersicht tr:nth-child(2){
    font-weight:bold;
}
.table-uebersicht tr td:first-child{
    text-align:left;
    min-width:250px;
    max-width:250px;
}
.table-uebersicht tr td{
    max-width:30px;
    min-width:30px;
    height:20px;
    border:1px solid #ccc;
    text-align: center;
}

#context-menu{
    position: fixed;
    display:block;
    top:50%;
    left:50%;
    z-index:999999999999;
    
}

.grid-container {
  display: grid;
  grid-column-gap: 20px;/*hap */
  grid-row-gap :20px;/*hap */
  grid-template-columns: auto auto auto auto;
  margin: 0em 4em 0em 4em;
  /*background-color: #2196F3;*//*hap */

}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 3px solid rgba(90, 201, 255, 1);/*hap */
  padding: 1em;
  font-size: 1em;
  margin: 0em 1em 1em 1em;
  width: auto;
}

.form_btn{

    margin: 1em 0em 0em 0em;
}

.table-druck{
    border-collapse: collapse;
    background-color: #fff;
    z-index: 2;
}
.table-druck tr td{
    text-align:center;
    min-width:30px;
    max-width:30px;
    border:1px solid #ccc;
    max-height:30px !important;
    min-height:30px !important;
}

.form_button_loeschen{

    display: inline-block;
}

.list-group-item{
    padding: 0.3rem 1.25rem !important;
}

.zenter{
    
    display: table;
  width: 100%;
}

.zen{
    display:table-cell;
    vertical-align:middle;
}