﻿.datepicker-calendar-overlay {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    right:0;
    z-index: 19
}        


        .datepicker-calendar-container {
            background-color: #fff;
            width: 320px;
            height: 355px;
            position: absolute;
            padding: 8px;
            box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
            border-radius: 5px;
            left: 50%;
            z-index: 20;
            margin-left: -160px;
            top: 50%;
            margin-top: -210px;
        }

        .datepicker-controls {
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            height: 40px;
            align-items: center;
        }

        .datepicker-controls button {
            width: 40px;
            height: 40px;
            border: none;
            cursor: pointer;
        }

        .datepicker-controls button.month-prev {
            background: url(../images/svg/chevron_left-24px.svg) center center no-repeat;
        }

        .datepicker-controls button.month-next {
            background: url(../images/svg/chevron_right-24px.svg) center center no-repeat;
        }

        .datepicker-titel-monat {
            margin-right: 5px;
            font-weight: bold;
        }

        .datepicker-tage {
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            height: 40px;
        }

        .datepicker-tage span {
            flex-basis: calc(100% / 7);
            -ms-flex-preferred-size: 14.28%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-sizing: border-box;
        }

        .datepicker-tage-container {
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex: 1;
        }

        .datepicker-tage-container button {
            /*flex-basis: calc(100% / 7);*/
            flex-basis: 14.27%;
            /*-ms-flex-preferred-size: 14.28%;*/
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color .2s ease,background .2s ease,color .2s ease;
            position: relative;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            background-color: transparent;
            border: 2px solid transparent;
            border-radius: 5px;
            font-size: 14px;
        }

        .datepicker-tage-container button:hover{
            background-color: rgba(0,0,0,0.05);
        }

        .datepicker-tage-eintrag,
        .datepicker-tage-eintrag-leer {
            /*-webkit-flex-basis: calc(100% /7);
            flex-basis: calc(100% /7);*/
            /*-ms-flex-preferred-size: 13.52%;
            display: -webkit-flex;
            display: -ms-flexbox;*/
            flex-basis: 14.27%;
            display: flex;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color .2s ease, background .2s ease, color .2s ease;
            position: relative;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            height: 43px;
        }

        .datepicker-tage-eintrag-leer{
            cursor: default;
        }

        .datepicker-tage-eintrag.heute {
            border-color: #000;
        }

        .datepicker-tage-eintrag.aktiv {
            background-color: blue;
            color: #fff;
            font-weight: 600;
        }

        .info {
            position: absolute;
            top: 20px;
            left: 20px
        }