.floating_mpdiv {
    background-color: #c5d7ff;
    padding: 10px 10px 10px 10px;
    -webkit-box-shadow: 7px 7px 2px -4px rgba(0,0,0,1);
    -moz-box-shadow: 7px 7px 2px -4px rgba(0,0,0,1);
    box-shadow: 7px 7px 2px -4px rgba(0,0,0,1);
    margin-left:5px;
    max-width:40%;
}
.darkendate {
    filter:brightness(75%);
}
.close_mp_dialog {
    font-size: 20px;
    cursor: pointer;
    color: black;
    float: right;
    margin-top: -5px;
    z-index: 2;
}
    .close_mp_dialog:hover {
        font-size: 20px;
        cursor: pointer;
        color: #5F82CB;
    }
ul.ul_calend {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: .5em;
    margin: 0 auto;
    max-width: 44em;
    padding: 0;
}

li.li_calend {
    text-align: left;
    grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
    display: inline;
    list-style: none;
    margin-left: 0;
    padding-left: 2px;
    font-size: calc(14px + (19 - 14) * ((100vw - 300px) / (1600 - 300)));
}
    li.li_calend > .tooltip-wrapper {
        display: flex;
        text-align:center;
        justify-content: center;
        color: lightgoldenrodyellow;
        font-weight: bold;
        line-height: normal;
        font-size: calc(12px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));
        bottom: 12px;
    }
    li.li_calend > .tooltip-wrapper-top {
        display: flex;
        text-align: center;
        justify-content: center;
        color: lightgoldenrodyellow;
        font-weight: bold;
        line-height: normal;
        font-size: calc(10px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));
        bottom: 12px;
    }
    li.li_calend span {
        display: flex;
        text-align:center;
        margin-bottom:10px;
    }
ul.weekdays {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

    ul.weekdays li {
        height: 1.5vw;
        color:whitesmoke;
        text-align:center;
    }

ul.day-grid li {
    background-color: #fff;
    border: 1px solid #eaeaea;
    height: 4vw;
    max-height: 125px;
    transition: box-shadow .3s;
}
    ul.day-grid li:hover {
        background-color: #eaeaea;
        border: 1px solid #eaeaea;
        height: 4vw;
        max-height: 125px;
        cursor: pointer;
        -webkit-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
        box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
    }
    ul.day-grid li:active {
        background-color: #eaeaea;
        border: 5px solid white;
        height: 4vw;
        max-height: 125px;
        cursor: pointer;
        -webkit-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
        box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
    }

/*ul.weekdays abbr[title] {
    border: none;
    font-weight: 800;
    text-decoration: none;
}*/


ul.day-grid li.other_month {
    background: repeating-linear-gradient(-45deg, #eaeaea, #eaeaea 5px, #fff 5px, #fff 10px);
    transition: box-shadow .3s;
}
    ul.day-grid li.other_month:hover {
        background: repeating-linear-gradient(-45deg, #fff, #fff 5px, #eaeaea 5px, #eaeaea 10px);
        cursor: pointer;
        -webkit-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
        box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
    }

@media all and (max-width: 992px) {
    .floating_mpdiv {
        background-color: #c5d7ff;
        padding: 10px 10px 10px 10px;
        -webkit-box-shadow: 7px 7px 2px -4px rgba(0,0,0,1);
        -moz-box-shadow: 7px 7px 2px -4px rgba(0,0,0,1);
        box-shadow: 7px 7px 2px -4px rgba(0,0,0,1);
        max-width: 100%;
        margin-top: 10px;
        margin-left: 0px;
    }
    ul.ul_calend {
        grid-gap: .25em;
    }
    ul.weekdays {
        margin-top: 0.5em;
        margin-bottom: 0.85em;
    }

        ul.weekdays li {
            height: 1.5vw;
            color: whitesmoke;
            text-align: center;
            font-size: 14px;
        }

/*    ul.weekdays > li abbr:after {
        content: attr(title);
        font-size: calc(14px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));
        text-align: center;
    }*/

    li.li_calend > .tooltip-wrapper {
        display: flex;
        justify-content: center;
        color: lightgoldenrodyellow;
        font-weight: bold;
        font-size: calc(14px + (19 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    ul.day-grid li {
       
        height: 8vw;
    }

        ul.day-grid li:hover {
            height: 8vw;
        }

        ul.day-grid li:active {
            height: 8vw;
        }
}