/* foglalás űrlap */
.resGrid {
  display: grid;
  margin: auto;
  padding-bottom: 24px;
  grid-gap: 0 24px;
  max-width: 1800px;
  align-items: stretch;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  grid-template-areas: ".   resMessage resMessage  ." ".   resBlockDate resBlockDate  ." ".   resLabelSelectedDate resBlockSelectedDate  ." ".   reserveProduct reserveProduct  ." ".   resLabelNamePartner resBlockNamePartner  ." ".   resLabelEmail resBlockEmail  ." ".   resLabelTel resBlockTel ." ".   resLabelStart resBlockStart  ." ".   resLabelQuantity resBlockQuantity  ." ".  . reserveBtn .";
}
.resGrid .resMessage {
  grid-area: resMessage;
}
.resGrid .resBlockSelectedDate {
  grid-area: resBlockSelectedDate;
  display: grid;
  margin: auto;
  padding: 24px 0px;
  grid-gap: 0 24px;
  max-width: 1800px;
  align-items: stretch;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "resDate  resHour ." "dateErr  hourErr .";
}
.resGrid .resBlockSelectedDate .resDate {
  grid-area: resDate;
}
.resGrid .resBlockSelectedDate #hourDiv {
  grid-area: resHour;
}
.resGrid .resBlockSelectedDate .dateErr {
  grid-area: dateErr;
}
.resGrid .resBlockSelectedDate .timeErr {
  grid-area: hourErr;
}
.resGrid .resBlockSelectedDate input {
  transform: unset;
}
.resGrid .resBlockSelectedDate select {
  transform: unset;
}
.resGrid .resBlockNamePartner {
  grid-area: resBlockNamePartner;
}
.resGrid .resBlockEmail {
  grid-area: resBlockEmail;
}
.resGrid .resBlockTel {
  grid-area: resBlockTel;
}
.resGrid .resBlockStart {
  grid-area: resBlockStart;
}
.resGrid .resBlockQuantity {
  grid-area: resBlockQuantity;
}
.resGrid .resBlockDate {
  grid-area: resBlockDate;
}
.resGrid .resLabelSelectedDate {
  grid-area: resLabelSelectedDate;
}
.resGrid .resLabelNamePartner {
  grid-area: resLabelNamePartner;
}
.resGrid .resLabelEmail {
  grid-area: resLabelEmail;
}
.resGrid .resLabelTel {
  grid-area: resLabelTel;
}
.resGrid .resLabelStart {
  grid-area: resLabelStart;
}
.resGrid .resLabelQuantity {
  grid-area: resLabelQuantity;
}
.resGrid .reserveBtn {
  grid-area: reserveBtn;
  justify-self: start;
  margin: 0;
}
.resGrid .reserveProduct {
  grid-area: reserveProduct;
}
.resGrid .resBlock input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  align-self: center;
}
.resGrid .resBlock select {
  width: 100%;
  height: 40px;
  line-height: 40px;
  align-self: center;
}
.resGrid .resBlockQuantity select {
  width: 30%;
}
.resGrid input,
.resGrid textarea {
  border-radius: 0;
}
.validateGrid {
  display: grid;
  margin: auto;
  padding-bottom: 24px;
  grid-gap: 0 24px;
  max-width: 1800px;
  align-items: stretch;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  grid-template-areas: ".   valMessage valMessage  ." ".   validateLabel validateBlockCode  ." ".  . validateBtn .";
}
.validateGrid .valMessage {
  grid-area: resMessage;
}
.validateGrid .validateBlockCode {
  grid-area: validateBlockCode;
}
.validateGrid .validateLabel {
  grid-area: validateLabel;
}
.validateGrid .validateBtn {
  grid-area: validateBtn;
  justify-self: start;
  margin: 0;
}
.validateGrid .validateReservation {
  grid-area: validateReservation;
}
.validateGrid .valBlock input {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.validateGrid input,
.validateGrid textarea {
  border-radius: 0;
}
.resLabel {
  transform: translateY(20%);
  padding-left: 10px;
  max-width: initial;
}
.valLabel {
  transform: translateY(20%);
  padding-left: 10px;
  max-width: initial;
}
@media (max-width: 800px) {
  .resGrid {
    grid-template-columns: 1fr 2fr ;
    grid-template-areas: "   resMessage resMessage  " "   resBlockDate resBlockDate  " "   resLabelSelectedDate resBlockSelectedDate  " "   reserveProduct reserveProduct  " "   resLabelNamePartner resBlockNamePartner  " "   resLabelEmail resBlockEmail  " "   resLabelTel resBlockTel " "   resLabelStart resBlockStart  " "   resLabelQuantity resBlockQuantity  " "  . reserveBtn ";
  }
  .resGrid .resBlockSelectedDate {
    grid-area: resBlockSelectedDate;
    grid-template-columns: 1fr;
    grid-template-areas: "resDate" "dateErr" "resHour " "hourErr ";
  }
}
@media (max-width: 400px) {
  .resGrid {
    display: inline-block;
  }
}
/*************  calendar *****************/
.resHead {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
  display: inline-block;
}
.calendar .resNavEmpty {
  display: block;
  height: 30px;
  width: 30px;
  float: left;
}
.calendar .resNavLeft {
  background: unset;
  background-color: unset;
  display: block;
  background-size: unset;
  height: unset;
  width: unset;
  float: left;
}
.calendar .resReset {
  display: block;
  float: left;
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
  width: 220px;
}
.calendar .resNavRight {
  background: unset;
  background-color: unset;
  display: block;
  height: unset;
  width: unset;
  float: left;
}
.reservationTable {
  width: 100%;
  border-spacing: 0;
}
.thDays.sunday {
  color: #dd2020;
}
.reservationTable .selected {
  background: yellow;
}
.reservationTable .calDay {
  border: 1px solid #ccc;
}
.reservationTable .closed {
  min-height: 60px;
}
.reservationTable .calDay.past {
  background-color: #EEE;
}
.reservationTable .calDay.future {
  background-color: #EEE;
}
.reservationTable .thDays.saturday,
.reservationTable .calDay.saturday,
.reservationTable .calDay.restday {
  color: #3b7bb9;
}
.reservationTable .saturday.workday {
  color: #404040;
}
.reservationTable .thDays.sunday,
.reservationTable .calDay.holiday,
.reservationTable .calDay.sunday {
  color: #dd2020;
}
.reservationTable .calDay.today {
  /*border-color:#dd2020;*/
  background-color: #DDFFDD;
}
.reservationTable .calDay.workday {
  color: #404040;
}
.reservationTable .dayNr {
  float: left;
}
.reservationTable .editCalendar {
  display: inline-block;
  float: right;
  min-height: 12px;
}
.reservationTable .ooBlock {
  padding: 3px 0;
}
.adminPage .reservationTable .ooBlock {
  padding: 0 0 6px 4px;
}
.reservationTable .dayNr {
  float: left;
  font-weight: bold;
  font-size: 14px;
}
.reservationTable .dayNr {
  margin-right: 5px;
}
.reservationTable .holidayName {
  float: left;
  font-size: 12px;
}
.reservationTable .exceptionTime,
.reservationTable .workdayMoved,
.reservationTable .restdayMoved,
.reservationTable .openHourTime,
.reservationTable .openHourName {
  clear: both;
}
.adminPage .reservationTable .exceptionTime {
  color: #a57800;
}
.reservationTable .deleteException {
  display: block;
  width: 16px;
  height: 16px;
  float: left;
}
.reservationTable .editException {
  display: block-inline;
  min-width: 20px;
  min-height: 16px;
  float: left;
  line-height: 16px;
}