/* divs ------------------------------------------ */

.web-resas-list {
    padding: 20px;
}
.listroom-intro {
    padding: 20px;
}
.roompage-header {
    margin-bottom: 15px;
    border: 5px solid transparent;
    user-select: none;
}
.roompage-header:hover {
    background: #f5f5f5;
    border-color: #f5f5f5;
    cursor: pointer;
}
.image {
    pointer-events: none;
}
#calendar-wrapper {
    text-align: center;
}
#calendar-month {
    display: inline-block;
}
.title-infos {
    font-size: 18px;
    font-weight: bold;
}
.subtitle-infos {
    font-size: 14px;
    font-weight: bold;
}
.desc-infos {
    font-size: 14px;
    color: #888;
}
#resa-wrapper {
    text-align: center;
    padding: 20px;
}

.form-wrapper {
    padding: 20px;
}


/* calendar ------------------------------------------- */

.cal-title-container {
    display: flex;
}
.cal-prev {
    width: 42px;
    padding: 6px 15px 6px 15px;
    font-size: 16px;
    cursor: pointer;
}
.cal-next {
    width: 42px;
    padding: 6px 15px 6px 15px;
    font-size: 16px;
    cursor: pointer;
}
.cal-prev:hover, .cal-next:hover {
    background: rgb(48, 92, 152);
}
.cal-title-month {
    text-align: center;
    flex-grow: 1;
    padding: 6px;
}


.calendar-table {
    width:100%;
    border-collapse: collapse;
}
.calendar-table td {
    border: 1px solid #fff;
    padding: 6px;
    text-align:center;
    font-size: 14px;
    background: #ddd;
    color: #aaa;
    width:70px;
}
.calendar-table td.cm {
    background: #eee;
    color: #222;
    font-weight: bold;
    cursor: pointer;
}
.calendar-table td.cm.past {
    background: #fbdfdf;
}

.calendar-table td.tm {
    background: #cff8cf;
}
.calendar-table .head td {
    background: #a6c4d2;
    color: #fff;
}
.head-month td {
    border: 1px solid #fff;
    text-align:center;
    font-size: 14px;
    background: rgb(28, 67, 120);
    color: #fff;
    width:70px;
    padding: 0;
}
.calendar-table td.disp {
    background: #acf6ac;
}
.calendar-table td.disp:hover {
    background: #96f596;
}
.calendar-table td.nodisp {
    background: #f6855c;
    color: #fff;
}
.calendar-table td.disp.select {
    background: limegreen;
}
.calendar-table td.quota {
    background: rgba(255, 194, 96, 0.7);
}
.calendar-table td.quota:hover {
    background: rgba(245, 181, 79, 0.7);
}


.webr-resume-wrapper {
    margin: 30px;
}
.webr-resume-table {
    width: 100%;
}

.webr-resume-table td {
    background: #f7f7f7;
    padding: 5px;
    border-bottom: 2px solid #fff;
}

.webr-resume-table td.label {
    color: var(--secondary);
}

/* slots */

.slot-data {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px 20px;
    background: #fff;
    margin-bottom: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}
.slot-tarif {
    font-size: 13px;
    font-weight: normal;
    color: #888;
}

.slot-data-log {
    display: flex;
    padding: 5px 20px;
    font-size: 11px;
}
.slot-data.slot-reserved {
    background-image: repeating-linear-gradient(30deg, #eee, #eee 30px, #f5f5f5 30px, #f5f5f5 60px);
}
.slot-data div.label {
    text-align:left;
    width: 150px;
    font-weight: 700;
    flex-grow: 1;
    padding-top: 5px;
    padding-left: 20px;
}
.slot-data div.info {
    color: green;
    min-width: 100px;
    padding-top: 5px;
}
.slot-data div.info-reserved {
    color: #aaa;
    min-width: 100px;
    padding-top: 5px;
}
.slot-button-reserv {
    padding: 6px 10px;
    color: #fff;
    background: limegreen;
    font-size: 14px;
    border: none;
    cursor: pointer;
}
.slot-button-reserv.button-reserv-option {
    background: #ffa142;
}
.slot-button-reserv:hover {
    background: #20af20;
    transition: background-color 0.2s ease-in-out;
}
.slot-button-reserv.button-reserv-option:hover {
    background: #e18930;
}

.slot-btnbox .btnbox-nobtn-reserv {
    background: transparent;
    padding: 6px 10px;
    font-size: 14px;
    border: none;
}
.slots-date-global {
    margin-bottom: 5px;
}
.slots-container {
    max-width: 490px;
    margin: 0 auto;
}
.slot-partial {
    color: orangered;
    font-size: 11px;
    font-style: italic;
}