:root{
    --colorGrey:rgb(255, 255, 255);
    --colorText:#000;
    --color3:rgb(233, 233, 233);
    --color4:rgb(207, 153, 112);
}

.productListing{
    display: none;
    justify-content: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: row;
}

.productListing > div.singleProduct{
    flex: 29.99%;
    background-color: var(--colorGrey);
    border:1px solid var(--color3);
    border-radius: 10px;
    color:var(--colorText);
    transition: .5s all;
    max-width: 29.99%;
    box-shadow: 1px 1px 1px var(--color3);
    padding: 1rem;
}

.productListing > div.singleProduct:hover{
    border:1px solid var(--colorText);
    transition: .5s all;
    cursor: pointer;
}

.productListing > div.singleProduct > h3{
    font-size: 1rem;
    text-transform: uppercase;
    margin-top: 0; 
    margin-bottom: 0;
    min-height: 2.5rem;
    padding:1rem;
    display: block;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.productListing > div.singleProduct > div.detailsProduct{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap; 
    color: var(--color4);
}

div#footer{
    position: fixed;
    background: var(--colorGrey);
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    color: var(--color4);
    box-shadow: 0px 0px 10px var(--color4);
}

button#buttonStep2{
    border-color: var(--color4);
    background-color: var(--colorGrey);
    color:var(--color4);
}

button#buttonStep2:hover, button#buttonStep2:active{
    background-color: var(--color4);
    color:var(--colorText);
}

div.separator{
    height:10rem;
}

div.noResults{
    flex: 100%;
    background-color: var(--colorGrey);
    padding: 1rem;
    border-radius: 10px;
    color: var(--colorText);
    transition: .5s all;
}

span#resetCart{
    font-size:1rem;
    cursor:pointer;
}

div#totalPrice{
    display: flex;
    align-items: center;
    gap: 1rem;
}

div#step2{
    display:none;
    gap:2rem;
}

div#step2 > h2{
    font-size: 1.5rem;
    margin-bottom: 0px;
}

div#topBookingHead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background:var(--colorText);
    color: var(--colorGrey);
}

div#typePayment{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}
 
div#typePayment > div{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--colorText);
    padding: 1rem;
    text-align: center;
    color: var(--colorGrey);
    cursor: pointer;
    opacity: 0.6;
}

div.selectedPayment{
    opacity:1;
}

#formPayment{
    display: none;
}

.productListing > div.singleProduct > h4 {
    font-size: 1rem;
    text-transform: capitalize;
    margin-top: 0;
    margin-bottom: 0;
    min-height: 2.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: block;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-weight:400;
}


#headProductInfos{
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: .5rem;
}

#headProductInfos > div:last-child{
    text-align: center;
}

#headProductInfos > div > svg{
    width:2rem;
    height:2rem;
    fill:var(--color4);
}

#headProductInfos > div > h3{
    font-size: 1.1rem;
    font-weight: normal;
}

#headProductInfos > div > h4{
    font-size: .9rem;
}

span.infosOrder{
    font-size: 1rem;
}

#step2 > div:first-child{
    flex-basis: 66.66%;
    background-color: var(--color3);
    padding: 1rem;
    border-top: 5px solid var(--color4);
    box-shadow: 0px 0px 1px var(--colorText);
}

#step2 > div:last-child{
    flex-basis: 33.33%; 
    background-color: var(--colorGrey);
    box-shadow: 0px 0px 1px var(--colorText);
    padding: 1rem;
}

div.summaryProductSingle{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: .5rem;
    border-bottom: 1px solid var(--color4);
    padding-bottom: 1rem;
}

div#totalTaxesOrder{
    margin-top: 2rem;
    font-size: 1.3rem;
}

div.glm-calendar{
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

div.day{
    cursor: pointer;
}

div.disabled{
    cursor: not-allowed;
    opacity: .6;
}

div.glm-calendar > table > caption{
    font-size: 1.2rem;
    margin: 1rem;
}

form#hour{
    padding-left: 1rem;
    padding-right: 1rem;
}

#bookingEmployee{
    padding-left: 1rem;
    padding-right: 1rem;
}

input#submitForm, button#returnHome{
    background-color: var(--color4);
    border-color: var(--color4);
    color:var(--colorGrey);
}

input#submitForm:disabled{
    opacity: .6;
}

#step2 h2{
    font-size: 1.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#step2 i{
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    display: block;
}

form#formPayment{
    text-align: center;
}

h2.categoryItem > svg{
    width:1rem;
}

h2.categoryItem{cursor: pointer;}

td.day{
    cursor: pointer;
    text-align: center;
}

td.day:hover{
  background-color: var(--color4);
  color: var(--colorGrey);
}

td.selectedDate{
    background-color: var(--color4) !important;
    font-weight:bold; 
}

td.disabledDay, td.disabledDay:hover{
    opacity: 0.6;
    background-color: var(--color4) !important;
    text-align: center;
    color: white;
    cursor:not-allowed;
    pointer-events: none;
}

div.pendingMessage{
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    display: block;
    animation: waviy 1s infinite;
    animation-delay: calc(.1s * var(--i));
}

@keyframes waviy {
    0%,40%,100% {
      transform: translateY(0)
    }
    20% {
      transform: translateY(-10px)
    }
}

@media screen and (max-width:62rem) {
    h2.categoryItem {font-size: 1.5rem;}
    div#step2 {flex-direction: column;}
}

@media screen and (max-width:37.5rem) {
    .productListing{flex-direction: column;}
    .productListing > div.singleProduct {flex: 100%;max-width:100%;}
    div#footer {position: relative;flex-direction: column;gap: 1rem;}
    div#totalPrice{flex-direction: column;}
    span.infosOrder {text-align: center;font-size: .9rem;}
    div.separator {height: 2rem;}
    div#typePayment{flex-direction: column;}
    div.glm-calendar {padding-left: 0;padding-right: 0;}
    table.month td,th{padding:.4rem;}
    select.selectEmployee{margin-bottom:1rem;}
}