/*
 * @Description: stylesheet of information/reservation.tpl
 * @Author: jinlei + Lisa
 * @Date: 2021-08-09 14:54:58
 * @LastEditTime: 2021-11-04 13:51:09
 * @LastEditors: Please set LastEditors
 */


/* jinlei *** */


/* #reservation-horaire .horaire .item:hover, */


/* #reservation-personne .item:hover, */

div.zabuto_calendar td[id*="zabuto_calendar_"]:hover .day.active {
    background: var(--sixth-color);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent!important;
}

.actived,
.actived:focus,
.actived:hover,
button.button-selected,
div.zabuto_calendar td[id*="zabuto_calendar_"]:hover .day.actived {
    background: var(--background-second-color-oblique)!important;
    color: var(--first-color)!important;
    border: none;
}

div.zabuto_calendar .table tr.calendar-month-header th span {
    font-size: var(--size-3)!important;
    font-weight: var(--weight-2)!important;
}


/* *** */


/* padding */

.content-reservation {
    padding: 0 var(--padding-reservation) 6rem;
}

.reservationsSteps {
    padding: 0 var(--padding-step-reservation) 1%;
}

.reservationsSteps div {
    width: 16.71%;
    height: calc(70px + (80 - 70)*(100vw - 768px)/(1920 - 768));
    background: var(--background-first-color);
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.05));
}

.reservationsSteps div i {
    font-size: calc(16px + (24 - 16)*(100vw - 768px)/(1920 - 768));
    width: 100%;
    text-align: center;
    line-height: calc(70px + (80 - 70)*(100vw - 768px)/(1920 - 768));
    /* vertical-align: top!important; */
}


/* input of reservation steps */

.reservationsSteps input {
    background-color: transparent;
    border: none!important;
    bottom: 25px;
    /* left: -5%; */
    text-align: center;
    color: var(--first-color)!important;
    position: relative;
    width: 100%;
    border-bottom: 0!important;
}


/* box background of reservation */

.box-reservation-date {
    margin-top: 3%;
    box-shadow: -10px -10px 40px rgba(80, 80, 80, 0.05), 10px 10px 40px rgba(132, 110, 110, 0.05);
    padding: 0 0 3%;
    background: var(--background-first-color);
}

.box-reservation-date.bgc-1.text-center {}

.content-reservation tr:nth-child(even):not(.modal-footer *) {
    border-bottom: none;
}

.calendar-month-navigation span {
    background: var(--sixth-color);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent!important;
}


/* icon direction */

.bi.bi-chevron-left,
.bi.bi-chevron-right {
    font-size: 30px;
    color: black;
}


/* style of button toggle */


/* .btn-toggle-white {
    background: var(--background-first-color);
    border: 1px solid var(--fourth-color);
    color: var(--fourth-color);
    width: 200px;
    height: var(--h-main);
}

.box-menu-toggle-white {
    background: var(--background-first-color-transparent-1);
    width: 200px;
    margin-top: -2px;
    border: 1px solid var(--fourth-color);
    border-top: 0px;
    border-radius: 0;
    backdrop-filter: blur(20px);
}

.box-menu-toggle-white button:active,
.box-menu-toggle-white button:hover {
    background: var(--sixth-color);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent!important;
} */


/* person button */

.person-button {
    width: 80px;
    background: var(--background-first-color-transparent-1);
    border: 1px solid var(--third-color);
    height: 38px;
    margin: 2%;
    color: var(--fourth-color);
}


/* nb person more than 9 */

.plus-nb-person {
    width: 80px;
    border: 1px solid var(--third-color);
    height: 38px;
    margin: 2%;
}

.plus-nb-person>button {
    color: var(--fourth-color);
    border: none;
    width: 100%;
    height: 100%;
    background: var(--background-first-color-transparent-1);
}

.plus-nb-person .box-menu-toggle-white {
    max-width: 80px!important;
    left: 1.24px!important;
    padding: 0;
}

.plus-nb-person .box-menu-toggle-white .dropdown-item {
    padding: 0;
    text-align: center;
    color: var(--fourth-color);
}

.angle-down {
    background: var(--sixth-color);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent!important;
}

.btn-group .fas.fa-angle-down {
    position: absolute;
    right: 34px;
    top: 20px;
}


/* commentaire */

.box-reservation-note,
.box-reservation-telephone {
    margin-top: 3%;
    padding: 0 0 3%;
}

.box-reservation-note h4,
.box-reservation-telephone h4 {
    font-weight: 500;
}

.box-reservation-note #note,
.box-reservation-telephone #inputTelephone {
    width: 100%;
    font-size: var(--size-4);
    border: none;
    border-bottom: 1px solid var(--second-color);
    background: none;
    resize: none;
    font-family: var(--font-family-2);
}


/* button reserve */

#resSubmitButton {
    max-width: 468px;
    width: 100%;
}

@media (max-width: 1400px) {
    .reservationsSteps div {
        width: 27%;
    }
}

@media (max-width: 768px) {
    .reservationsSteps div {
        width: 30%;
    }
}