label.ast-form-label {
    font-size: 12px;
    justify-self: flex-start;
    color: #757575;
}

.section-content {
    background-color: white;
}

#or-separator > span {
    margin-left: 20px;
    margin-right: 20px;
}

.ast-login-title {
    display: none;
}

#loginContainer, #or-separator {
    display: flex;
    justify-content: center;
}

#loginContainer.logged-in, #or-separator {
    display: none;
}

#loggedMessage.logged-in {
    display: block;
    margin-bottom: 20px;
    margin-top: 20px;
}

#loggedMessage {
    display: none;
}

.ident_title {
    display: none;
}

#auth {
    margin-top: 20px;
}

.ident_tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.ident_tabs .tab-btn {
    margin-right: 12px;
}

.accountCreationLayer {
    margin-top: 20px;
}

.ast-form-group.connectionLogin {
    justify-content: flex-start;
    flex-direction: row;
}

.ast-form-group.reset-password {
    text-align: left;
}

.account-creation-form-title.section-title {
    display: none;
}

#main-content {
    width: 100%;
}

#rst-booking-section {
    display: flex;
    flex-direction: column;
}

#form-content {
    display: grid;
    margin-bottom: 24px;
}

#restaurantPersonContainer{
    margin-bottom: 50px;
}

.restau-number-of-persons, .restau-book-slots {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 12px;
    row-gap: 12px;
}

.restau-book-summary-subtitle {
    font-size: 20px;
    font-family: Roboto-Light !important;
}

.restaurant_detail {
    display: flex;
    justify-content: left;
    width: 100%;
    align-items: center;
}

.restau-number-of-persons .restau-person-item, .restau-slot-item {
    box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.2);
    border: solid 1px black;
    border-radius: 4px !important;
    background-color: white;
    width: 70px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.restau-slot-item {
    width: 80px !important;
    height: 40px !important;
}

.restau-number-of-persons .restau-person-item.selected, .restau-slot-item.selected {
    color: white;
    background-color: #00ADB3;
}

.restau-number-of-persons .restau-person-item:not(.selected):hover, .restau-slot-item:not(.selected):hover {
    cursor: pointer;
    background-color: #F0F0EF;
}

.restaurant-book-titles {
    border-top: solid #E0E0E0 1px;
    border-bottom: solid #E0E0E0 1px;
    font-family: Roboto-Medium;
    font-size: 24px;
    height: 70px;
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 20px;
}

.restaurant-service-title {
    font-family: Roboto-Medium;
    font-size: 18px;
    width: 100%;
}

.restaurant-book-titles .icon.title-icon:before {
    margin-right: 40px;
}

.restaurant-book-titles-txt {
    display: flex;
    align-items: center;
}

#rst-booking-section-title-container {
    width: 100%;
    max-width: 1273px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #00ADB3;
    padding: 54px;
    margin: auto;
    margin-bottom: 52px;
    margin-top: 12px;
}

#rst-booking-section-title {
    color: white;
    font-family: Rufina-Bold;
    font-size: 40px;
}

#rst-booking-section-subtitle {
    color: white;
    font-family: Roboto-Light;
    font-size: 24px;
}

#restaurantPersonComments {
    margin-top: 22px;
    font-family: Roboto-Italic;
}

#restaurantDatesTitle{
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


#restaurantServiceFilter{
    border: solid 1px black;
    border-radius: 4px !important;
    cursor: pointer;
}

#restaurantServiceFilter .multi-select-container {
    border: none;
    padding: 2px 8px 2px 8px;
    width: 200px;

}

#restaurantServiceFilter .multi-select-button{
    display: flex;
    justify-content: start;
    align-items: center;
}

#restaurantServiceFilter .multi-select-button-txt{
    margin-left: 8px;
}

#restaurantServiceFilter .multi-select-container:hover, #restaurantServiceFilter .multi-select-container:hover .multi-select-button{
    cursor: pointer;
}

#restaurantServiceFilter .multi-select-container:hover .icon-filter:before {
    color: #00ADB3;
}

.btn-add-restau-book-to-cart{
    width: 320px;
}

#restaurantBookingContainer {
    justify-content: center;
}

#restaurantBookConditions{
    margin-top: 50px;
}

.restau-final-step {
    display: flex;
    width: 100%;
}

.restaurant_btn_reservation {
    display: flex;
    justify-content: right;
    width: 100%;
}

@media screen and (min-width: 1400px) {
    #form-content {
        display: flex;
        grid-gap: 20px;
        flex-direction: column;
        width: 800px;
        margin: 0 auto;
    }

    #restaurantPersonContainer {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    #restaurantDateContainer {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #restaurantHourContainer {
        grid-column: 1/2;
        grid-row: 3/4;
        margin-left: 2rem;
    }

    #restaurantBookConditions{
        grid-column: 1/3;
        grid-row: 4/5;
    }

    #restaurantBookingContainer{
        grid-column: 1/3;
        grid-row: 5/6;
    }

    .btn-add-restau-book-to-cart{
        width: 320px;
    }

}

@media screen and (min-width: 700px) and (max-width: 1399px) {
    .ident_tabs {
        flex-direction: column;
    }

    .ident_tabs .tab-btn {
        margin-right: 0;
        margin-bottom: 8px;
    }

    #form-content {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 20px;
    }

    #restaurantPersonContainer {
        margin-bottom: 50px;
        grid-column: 1/2;
        grid-row: 1/2;
    }

    #restaurantDateContainer {
        margin-bottom: 50px;
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #restaurantHourContainer {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    #restaurantBookConditions{
        grid-column: 1/3;
        grid-row: 4/5;
    }

    #restaurantBookingContainer{
        grid-column: 1/2;
        grid-row: 5/6;
    }

    .restaurant-book-titles, #rst-booking-section-title {
        font-size: 20px;
    }

    .restau-book-summary-subtitle {
        font-size: 16px;
    }

    #rst-booking-section-subtitle {
        font-size: 16px;
    }

    #rst-booking-section-title {
        margin-bottom: 20px;
    }

    #rst-booking-section-title-container {
        margin-bottom: 22px;
        padding: 19px 8px 19px 8px;

    }

    #restaurantPersonComments {
        margin-top: 20px;
    }

    .btn-add-restau-book-to-cart{
        width: 320px;
    }

}

@media screen and (min-width: 396px) and (max-width: 699px) {
    .ident_tabs {
        flex-direction: column;
    }

    .ident_tabs .tab-btn {
        margin-right: 0;
        margin-bottom: 8px;
    }

    #form-content {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 10px;
    }

    #restaurantPersonContainer {
        margin-bottom: 50px;
        grid-column: 1/2;
        grid-row: 1/2;
    }

    #restaurantDateContainer {
        margin-bottom: 50px;
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #restaurantHourContainer {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    #restaurantBookConditions{
        grid-column: 1/2;
        grid-row: 4/5;
    }

    #restaurantBookingContainer{
        grid-column: 1/2;
        grid-row: 5/6;
    }

    .restaurant-book-titles, #rst-booking-section-title {
        font-size: 20px;
    }

    .restau-book-summary-subtitle {
        font-size: 16px;
    }

    #rst-booking-section-subtitle {
        font-size: 16px;
    }

    #rst-booking-section-title {
        margin-bottom: 20px;
    }

    #rst-booking-section-title-container {
        margin-bottom: 22px;
        padding: 19px 8px 19px 8px;

    }

    #restaurantPersonComments {
        margin-top: 20px;
    }

    .btn-add-restau-book-to-cart{
        height: auto;
    }

    .restau-final-step{
        display: inline-block;
        width: 100%;
    }

    .restaurant_detail {
        justify-content: center;
        margin-bottom: 8px;
    }

    .restaurant_btn_reservation {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #restaurantServiceFilter .multi-select-container {;
        width: 140px;
    }
}

@media screen  and (max-width: 460px) {

    #restaurantServiceFilter .multi-select-container {;
        width: 35px;
    }
}

@media screen  and (max-width: 396px) {

    .ident_tabs {
        flex-direction: column;
    }

    .ident_tabs .tab-btn {
        margin-right: 0;
        margin-bottom: 8px;
    }

    #form-content {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 10px;
    }

    #restaurantPersonContainer {
        margin-bottom: 30px;
        grid-column: 1/2;
        grid-row: 1/2;
    }

    #restaurantDateContainer {
        margin-bottom: 30px;
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #restaurantHourContainer {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    #restaurantBookConditions{
        grid-column: 1/2;
        grid-row: 4/5;
    }

    #restaurantBookingContainer{
        grid-column: 1/2;
        grid-row: 5/6;
    }

    .restau-number-of-persons {
        column-gap: 36px;
        row-gap: 22px;
    }

    .restau-number-of-persons .restau-person-item, .restau-slot-item {
        width: 42px;
        height: 44px;
    }

    .restaurant-book-titles, #rst-booking-section-title {
        font-size: 16px;
    }

    .restau-book-summary-subtitle {
        font-size: 12px;
    }

    #rst-booking-section-subtitle {
        font-size: 12px;
    }

    #rst-booking-section-title {
        margin-bottom: 12px;
    }

    #rst-booking-section-title-container {
        margin-bottom: 22px;
        padding: 19px 8px 19px 8px;

    }

    #restaurantPersonComments {
        margin-top: 20px;
    }

    .btn-add-restau-book-to-cart{
        height: auto;
    }

    .restau-final-step {
        display: inline-block;
        width: 100%;
    }

    .restaurant_detail {
        justify-content: center;
        margin-bottom: 8px;
    }

    .restaurant_btn_reservation {
        display: flex;
        justify-content: center;
        width: 100%;
    }

}