.bk-blue{
    background: rgb(37, 37, 212);
}

.menu-container{
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.flex{
    display: flex;
}

.grid{
    display: grid;
}

.ml-auto{
    margin: 0 auto;
}

.add-new{
    background: white;
}


.show{
    display: auto;
}

.hide{
    display: none;
}

.tables-picker{
    cursor: pointer;
}

.tables-picker div{
    flex-wrap: wrap;
}

.datepiker-body-template{
    grid-template-columns: repeat(7, 1fr);

}

.add-new-reservation-div{
    padding: 2em 1em 0em 1em;
}

.picker-selected{
    background-color: blue;
    color: white;
}

.timepicker-selected{
    background-color: blue;
    color: white;
}

.datepicker-days div, .datepicker-grid div{
    text-align: center;
}

.datepicker-grid{
    grid-template-rows: repeat(6, 1fr);
}


.timepicker-grid{
  grid-template-columns: repeat(4, 30px);
}

.timepicker-grid div{
    text-align: center;
}

.number-grid{
    grid-template-columns: repeat(5, 1fr); 
    grid-template-rows: repeat(7, 1fr);
}

.timepicker-bar{
    width: 1pt;
    height: 140px;
    background-color: rgb(16, 16, 24);
    margin: 0 8pt;
}

.form-check-input{
    width: 25px;
    height: 25px;
}

#list{
    width: 100vw;
}

#list label{
    border-radius: 0 !important;
}

@media only screen and (max-width: 800px)  {
    .inputs, .tables-picker {
        display: flex;
        flex-direction: column;
    }

    .inputs > div:nth-child(1){
        padding-bottom: 1em;
    }

    .timepicker-grid{
        grid-template-columns: repeat(7, 1fr);
    }

    .tables-picker > div{
        padding-bottom: 1em;
    }

    .array-buttons{
        margin-top: 10pt;
    }

    .array-buttons-div button{
        margin-left: 10px;
    }
}