header {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/Food.png);
}


h3 {
    margin-block-start: 0;
    margin-block-end: 0;
}

p {
    margin: 0;
}

/* FOOD */
.foodimg {
    width: 100%;
}

#buttonOverview,
#buttonReservation {
    float: right;
    width: 20%;
}

#makeareservation {
    margin-right: 0px;
}


.btn-primary, .btn-primary:hover {
    background-color: #FD6A02 !important;
    color: black !important;
    font-family: Arial !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    border: transparent !important;
}

.btn-primary:hover {
    background-color: orange !important;
    color: white !important;
    font-family: Arial !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    border: transparent;
}

.stars {
    display: inline;
    width: 1em;
    margin-right: 4px;
}

#starsHeader {
    display: inline;
}

.imgIcons {
    margin-top: 4px;
    display: inline;
    float: right;
    width: 1em;
    margin-right: 4px;
}

/* Filterbar */

.filterlabelSubtitle {
    font-weight: bold;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    background-color: #A5A5A5;
    padding: 1px 8px 1px 8px;
}

.grid-container > section {
    /*background-color: rgba(255, 255, 255);*/
}

.filterbarFoodGrid {
    margin-left: unset;
}

#filterbarFood {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* RESTAURANTRESERVATION */

#restaurantNameReservation {
    text-align: left;
}

.wrapper {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(4, [col] 60% );
    grid-template-rows: repeat(2, [row] auto  );
    background-color: #fff;
}

.confirmationBox {
    grid-column: col 3 / span 2;
    grid-row: row 2;
}

.formBox {
    grid-column: col / span 2;
    grid-row: row 2;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.seatsBox {
    grid-column: 1 / 3;
    grid-row: 1;
}

.sectionsBox {
    grid-column: 1;
    grid-row: 2;
}

.datesBox {
    grid-column: 2;
    grid-row: 2;
}

.noteBox {
    grid-column: 1 / span 2;
    grid-row: 3;
}


.confirmationBoxTitle {
    font-weight: bold;
    margin-top: 5px;
}

.confirmationBoxSubtitle {
    font-style: italic;
}


/* FOOD RESTAURANT INFO */
.container {
    display: grid;
    width: 100%;
    grid-template-areas: "restaurantContentDescription restaurantContentInfoPictureCosts restaurantContentInfoCosts restaurantContentInfoCosts"
  "restaurantContentDescription restaurantContentInfoPictureTime restaurantContentInfoSessions restaurantContentInfoDays"
  "restaurantContentDescription restaurantContentInfoPictureLocation restaurantContentInfoAddress restaurantContentInfoAddress"
  "restaurantContentDescription restaurantContentInfoPictureLinks restaurantContentInfoLinks restaurantContentInfoLinks";
    grid-template-columns: auto 4% 20% 20%;
}

.container > section {
    /* border: 1px dashed #888; */
}

.restaurantContentDescription {
    margin-right: 0px;
    border-right: 2px solid black;
    grid-area: restaurantContentDescription;
}

.restaurantContentInfoPictureCosts {
    grid-area: restaurantContentInfoPictureCosts;
}

.restaurantContentInfoCosts {
    grid-area: restaurantContentInfoCosts;
}

.restaurantContentInfoPictureTime {
    grid-area: restaurantContentInfoPictureTime;
}

.restaurantContentInfoSessions {
    grid-area: restaurantContentInfoSessions;
}

.restaurantContentInfoDays {
    grid-area: restaurantContentInfoDays;
}

.restaurantContentInfoPictureLocation {
    grid-area: restaurantContentInfoPictureLocation;
}

.restaurantContentInfoAddress {
    grid-area: restaurantContentInfoAddress;
}

.restaurantContentInfoPictureLinks {
    grid-area: restaurantContentInfoPictureLinks;
}

.restaurantContentInfoLinks {
    grid-area: restaurantContentInfoLinks;
}


/* RESTAURANT RESERVATION */

#noteTextArea {
    height: 3%;
    width: 80%;
    font-family: Arial;
    font-size: 1em;
}

#confirmationBoxTitleCosts {
    position: absolute;
    bottom: 0;
    left: 0;
}

#costsBox {
    position: relative;
    height: 100%;
}

#makeareservation {
    float: right;
    width: 42%;
}

#noteSubNoteLabel {
    margin-top: 5px;
}

.restaurantReservationCLCostsTitle,
.restaurantReservationCLReservationcosts,
.restaurantReservationCLAmount,
.confirmationBoxAmount,
.restaurantReservationCLTotal,
.restaurantReservationCLDays,
.restaurantReservationCLSession,
.restaurantReservationCLYourNote {
    background: #EFEFEF;
}

.restaurantReservationCLCostsTitle,
.restaurantReservationCLReservationcosts,
.restaurantReservationCLDays,
.restaurantReservationCLYourNote {
    padding-left: 6px;
}

.containerReservation {
    display: grid;
    min-width: 80vw;
    grid-template-areas: "restaurantReservationCLRestaurantLabel restaurantReservationCLRestaurantLabel restaurantReservationCLCostsTitle restaurantReservationCLCostsTitle restaurantReservationCLCostsTitle"
  "restaurantReservationCISeatsTitle restaurantReservationCISeatsCB restaurantReservationCLReservationcosts restaurantReservationCLAmount restaurantReservationCLTotal"
  "restaurantReservationCIDays restaurantReservationCISessions restaurantReservationCLDays restaurantReservationCLDays restaurantReservationCLSession"
  "restaurantReservationCINote restaurantReservationCINote restaurantReservationCLYourNote restaurantReservationCLYourNote restaurantReservationCLYourNote"
  "restaurantReservationCINote restaurantReservationCINote restaurantReservationCLSideNote restaurantReservationCLSideNote restaurantReservationCLSideNote";
    grid-template-columns: 25% auto 14% 14% 14%;
    grid-temgrid-template-rows: 8% 12% 20% 40% 20%;
}

.containerReservation > section {
    /*border: 1px dashed #888;*/
}

.restaurantReservationCLRestaurantLabel {
    grid-area: restaurantReservationCLRestaurantLabel;
}

.restaurantReservationCLCostsTitle {
    grid-area: restaurantReservationCLCostsTitle;
}

.restaurantReservationCISeatsTitle {
    grid-area: restaurantReservationCISeatsTitle;
}

.restaurantReservationCISeatsCB {
    grid-area: restaurantReservationCISeatsCB;
}

.restaurantReservationCLReservationcosts {
    grid-area: restaurantReservationCLReservationcosts;
}

.restaurantReservationCLAmount {
    grid-area: restaurantReservationCLAmount;
}

.restaurantReservationCLTotal {
    grid-area: restaurantReservationCLTotal;
}

.restaurantReservationCIDays {
    grid-area: restaurantReservationCIDays;
}

.restaurantReservationCISessions {
    grid-area: restaurantReservationCISessions;
}

.restaurantReservationCLDays {
    grid-area: restaurantReservationCLDays;
}

.restaurantReservationCLSession {
    grid-area: restaurantReservationCLSession;
}

.restaurantReservationCINote {
    grid-area: restaurantReservationCINote;
}

.restaurantReservationCLYourNote {
    grid-area: restaurantReservationCLYourNote;
}

.restaurantReservationCLSideNote {
    grid-area: restaurantReservationCLSideNote;
}


#errorMessage{
    color: red;
    text-align: right;
}

/* GRID FOOD.php */
.containerFood {
    padding-left: 5px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 3%;
    color: #FFFFFF;
    background: #000000;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas: "foodRestaurantName foodRestaurantName foodRestaurantPrice"
  "foodRestaurantImage foodRestaurantTypes foodRestaurantTypes"
  "foodRestaurantImage foodRestaurantSession foodRestaurantSession"
  "foodRestaurantImage foodRestaurantLocation foodRestaurantLocation"
  "foodRestaurantStars foodRestaurantNote foodRestaurantNote";
    grid-template-columns: 40% 40% 20%;
    grid-template-rows: 10% 20% auto 20% 12% 8%
}

.containerFood > div {
    border: 1px dashed #888;
}

.foodRestaurantName {
    grid-area: foodRestaurantName;
    color: #FD6A02;
}

.foodRestaurantPrice {
    text-align: right;
    padding-right: 8%;
    font-size: 1.4em;
    grid-area: foodRestaurantPrice;
}

.foodRestaurantImage {
    grid-area: foodRestaurantImage;
}

.foodRestaurantTypes {
    padding-left: 5px;
    grid-area: foodRestaurantTypes;
}

.foodRestaurantSession {
    padding-left: 5px;
    grid-area: foodRestaurantSession;
}

.foodRestaurantLocation {
    padding-left: 5px;
    grid-area: foodRestaurantLocation;
}

.foodRestaurantStars {
    text-align: center;
    grid-area: foodRestaurantStars;
}

.foodRestaurantNote {
    grid-area: foodRestaurantNote;
}

section#foodRestaurantContainer {
    width: 48%;
    float: left;
    margin: 1%;
}

.btnFood{
    width: 50%;
    float: left;
    margin-right: 0;
    margin-left: 0;
}

section.starscheck {
    padding-left: 19%;
}


#reservationCreated{
    text-align: left;
}