
body {
    background-color : #f2f2f2;
}

h2 {
    padding     : 10px;
    margin      : 0 0 10px 0;
    font-size   : 160%;
    font-weight : normal;
}

.roundBtn {
    display       : inline-block;
    border-radius : 100%;
    width         : 32px;
    height        : 32px;
    text-align    : center;
    line-height   : 32px;
    cursor        : pointer;
}

.roundBtn:hover {
    background : #d3d3d3;
}

.roundBtn img {
    width : 18px;
}





#h2-reservation {
    background      : url(../images/img1.JPG);
    height          : 175px;
    background-size : cover;
    color           : #ffffff;
}

#h2-reservation span {
    display : block;
    padding : 10px 20px;
}

.popoverHtml {
    position      : absolute;
    background    : #ffffff;
    border-radius : 8px;
    z-index       : 150;
    box-shadow    : 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
    width         : 350px;
    opacity       : 1;
    transition    : all ease 0.3s;
    display       : none;
    max-width     : 95vw;
}

.popoverHtml header img {
    height : 24px;

}


#wrapper-calendar {
    height         : 100%;
    flex-direction : column;
    display        : flex;
}


.cal-days {
    display               : grid;
    grid-template-columns :repeat(7, calc(100% / 7 - 1px) );
}





