/*Kalender*/
.calender {
    padding:14px;
    /*margin:20px;*/
    width:314px;
    border:1px solid #ccc;
}
* html .calender,
* + html .calender {
/*    width:282px;*/
}

html {
  height: 100%;
}

body {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.calender div.after,
.calender div.before{
    color:silver;
}
.day {
    float:left;
    width:36px;
    height:30px;
  /*  line-height: 20px;*/
    text-align: center;
    font-size:1.2em;
    margin:2px;
    border:1px solid #ddd;
    border-radius:5px;
}
.day.headline {
    background:silver;
}
.day.current {
    font-weight:bold;
}
.day:hover{
    background:#fea;
}

.clear {
    clear:left;
}

a{
    color:#2a225d;
}

.page-container{
    margin-top: 20px;
    margin-bottom: 20px;
margin-left:5%;    
margin-right:5%;    
}

.reveal{
  height: 400px;
  width: 600px;
  top: calc( 50% - 200px ) !important;
  left: calc( 50% - 300px ) !important;
  margin: 0 !important;
}

.pagination {
    text-align: center;
    height:20px;
    line-height:20px;
    font-weight: bold;
}
.pagihead { 
   display:inline-block;
   background: white;
   width: 140px;
   height: 20px;
   color: black;
}
.pagination a {
    width:20px;
    height:20px;
    display: inline;
}

.selectcolor{
    background-color:#8c8;
}

.weekend{
    background-color:#ddd !important;
}

.holiday{
    background-color:#666 !important;
}

/*hack für table?*/
.grid-x > .auto {
  max-width: 400px;
}

.distance{
    margin:2px;
}


.btn{
    margin:5px;
}




























/*mobile*/
@media only screen and (max-width: 1200px) {

}

.phasen{
    text-align:center;
    border:1px solid #666;
}

.phase1{    background-color:#e9ecef !important;}
.phase2{    background-color:#bac8ff !important;}
.phase3{    background-color:#fff3bf !important;}
.phase4{    background-color:#ffe066 !important;}
.phase5{    background-color:#fcc419 !important;}
.phase6{    background-color:#94d82d !important;}