/*******************************Calendar Top Navigation*********************************/

div#calendar ul.dates li.selected a {
    color: darkred;
    text-decoration: none;
}

@media screen and (min-width: 600px) {
    div#calendar{
        margin:0px auto;
        padding:0px;
        width: 602px;
        font-family:Helvetica, "Times New Roman", Times, serif;
    }

    div#calendar div.box{
        position:relative;
        top:0px;
        left:0px;
        width:100%;
        height:35px;
        background-color:   #787878 ;
    }

    div#calendar div.header{
        line-height:35px;
        vertical-align:middle;
        position:absolute;
        left:11px;
        top:0px;
        width:582px;
        height:35px;
        text-align:center;
    }

    div#calendar div.header a.prev,div#calendar div.header a.next{
        position:absolute;
        top:0px;
        height: 17px;
        display:block;
        cursor:pointer;
        text-decoration:none;
        color:#FFF;
    }

    div#calendar div.header span.title{
        color:#FFF;
        font-size:18px;
    }


    div#calendar div.header a.prev{
        left:0px;
    }

    div#calendar div.header a.next{
        right:0px;
    }




    /*******************************Calendar Content Cells*********************************/
    div#calendar div.box-content{
        border:1px solid #787878 ;
        border-top:none;
    }



    div#calendar ul.label{
        float:left;
        margin: 0px;
        padding: 0px;
        margin-top:5px;
        margin-left: 5px;
    }

    div#calendar ul.label li{
        margin:0px;
        padding:0px;
        margin-right:5px;
        float:left;
        list-style-type:none;
        width:80px;
        height:35px;
        line-height:35px;
        vertical-align:middle;
        text-align:center;
        color:#000;
        font-size: 15px;
        background-color: transparent;
    }


    div#calendar ul.dates{
        float:left;
        margin: 0px;
        padding: 0px;
        margin-left: 5px;
        margin-bottom: 5px;
    }

    /** overall width = width+padding-right**/
    div#calendar ul.dates li{
        margin:0px;
        padding:0px;
        margin-right:5px;
        margin-top: 5px;
        line-height:80px;
        vertical-align:middle;
        float:left;
        list-style-type:none;
        width:80px;
        height:80px;
        font-size:25px;
        background-color: #DDD;
        color:#000;
        text-align:center;
    }

    :focus{
        outline:none;
    }

    div.clear{
        clear:both;
    }

    div#calendar ul.dates li.selected {
        background-color: lightblue !important;
        background-image: url("../img/coronavirus_mini.png");
        background-repeat: no-repeat;
        background-position: 43% 7;
        color:#000;
    }

    div#calendar ul.dates li.selected a {
        vertical-align: text-top
    }

    p.calendar-votes {
        width: 602px;
        margin:10px auto;
    }
    p.scale-votes {
        background-image: url('../img/scale.png');
        background-repeat: no-repeat;
        width: 602px;
        margin:0px auto;
        padding:10px;
        border: thin solid #787878;
        background-size:100% 100%;
    }
}
@media screen and (max-width: 400px) {
    .modal {
        max-width: 380px;
    }
    img.covid {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    img.covid-success {
        max-width: 40px;
    }
}

@media screen and (max-width: 599px) {
    div#calendar{
        margin:0px auto;
        padding:0px;
        width: 301px;
        font-family:Helvetica, "Times New Roman", Times, serif;
    }

    div#calendar div.box{
        position:relative;
        top:0px;
        left:0px;
        width:100%;
        height:35px;
        background-color:   #787878 ;
    }

    div#calendar div.header{
        line-height:35px;
        vertical-align:middle;
        position:absolute;
        left:11px;
        top:0px;
        width:291px;
        height:35px;
        text-align:center;
    }

    div#calendar div.header a.prev,div#calendar div.header a.next{
        position:absolute;
        top:0px;
        height: 17px;
        display:block;
        cursor:pointer;
        text-decoration:none;
        color:#FFF;
    }

    div#calendar div.header span.title{
        color:#FFF;
        font-size:10px;
    }


    div#calendar div.header a.prev{
        left:0px;
    }

    div#calendar div.header a.next{
        right:0px;
    }




    /*******************************Calendar Content Cells*********************************/
    div#calendar div.box-content{
        border:1px solid #787878 ;
        border-top:none;
    }



    div#calendar ul.label{
        float:left;
        margin: 0px;
        padding: 0px;
        margin-top:5px;
        margin-left: 5px;
    }

    div#calendar ul.label li{
        margin:0px;
        padding:0px;
        margin-right:5px;
        float:left;
        list-style-type:none;
        width:35px;
        height:35px;
        line-height:35px;
        vertical-align:middle;
        text-align:center;
        color:#000;
        font-size: 10px;
        background-color: transparent;
    }


    div#calendar ul.dates{
        float:left;
        margin: 0px;
        padding: 0px;
        margin-left: 5px;
        margin-bottom: 5px;
    }

    /** overall width = width+padding-right**/
    div#calendar ul.dates li{
        margin:0px;
        padding:0px;
        margin-right:5px;
        margin-top: 5px;
        line-height:40px;
        vertical-align:middle;
        float:left;
        list-style-type:none;
        width:35px;
        height:35px;
        font-size:15px;
        background-color: #DDD;
        color:#000;
        text-align:center;
    }

    :focus{
        outline:none;
    }

    div.clear{
        clear:both;
    }

    div#calendar ul.dates li.selected {
        background-color: lightblue !important;
        color: black;
    }
    p.calendar-votes {
        width: 301px;
        margin:10px auto;
    }
    p.scale-votes {
        background-image: url('../img/scale.png');
        background-repeat: no-repeat;
        width: 301px;
        margin:0px auto;
        padding:10px;
        border: thin solid #787878;
        background-size:100% 100%;
    }
}

div#calendar ul.dates li a {
    color: black;
    text-decoration: none;
}