:root {
  --background: #fff;
  --bg-cal-odd: #e8eeec;
  --text: #4a6670ff;
  --text-cal: #000000;
  --text-booked: #450000;
  --text-goth: #edc1ff;
  --text-steam: #ffccc1;
  --bg-cell-day: #ffffff;
  --bg-cell-we: #bddde6;
  --bg-cell-day-pick: #7dce82ff;
  --bg-cell-we-pick: #4eb35f;
  --bg-cell-day-booked: #ffc9c9;
  --bg-cell-we-booked: #ffadad;
  --bg-cell-day-goth: #a3a3a3;
  --bg-cell-we-goth: #616161;
  --bg-cell-day-steam: #bf8c62;
  --bg-cell-we-steam: #5d5031;
  }
  

body {
  background-image: url("header-1.jpg");
  background-repeat: no-repeat;
    color: var(--text);
    background-color: var(--background);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

H1 {
  margin: 4px 0px 10px 0px;
}

#yearheader {
  margin: 10px 0px;
  font-size: 24px;
  font-weight: bold;
}

#previousyear, #nextyear{
  margin: 0px;
  background: var(--background);
  border: none;
  font-size: large;
  font-weight: bold;
  color: var(--text);
}

.yearbutton {
  display: inline-block;
  width: 60px;
  text-align: center;
}

.yearbutton:hover {
  cursor: pointer;
}

#errorMSG {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2;
  cursor: pointer;
}

#errorText {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 25px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

#calendar {
  display: table;
  margin: 10px 0px;
  width: 700px;
  max-width: 100%;
  border-spacing: 1px;
  background-color: var(--background);
  font-size: small;
  user-select: none;
  transition: 0.5s;
}

#calendar a {
  color: var(--text-cal);
  text-decoration: none;
  display: block;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.cmonthbox {
  border: solid 1px #000;
  border-radius: 4px;
  margin: 4px;
  height: 100px;
  transition-property: height;
  transition-duration: 0.3s;
}

.cmonthhead {
  display: flex;
}

.cmonthname {
  font-size: xx-large;
  flex: 1;
  flex-basis: 100%;
  padding: 4px;
}

.cmonththumb {
  flex: 1;
  margin: 4px 4px 0px 0px;
}

.cmonththumbalt {
  flex: 1;
  display: none;
  margin: 10px 10px 0px 0px;
}

.monthopen {
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin: 0px 10px;
  display: grid;
  animation-duration: 0.3s;
  animation-name: slidedown;
}

@keyframes slidedown {
  from {
    translate: 50% -50%;
    scale: 1%;
  }

  to {
    translate: 0% 0%;
    scale: 100%;
  }
}

@keyframes slideup {
  from {
    translate: 0% 0%;
    scale: 100%;
  }

  to {
    translate: -50% 50%;
    scale: 1%;
  }
}

.monthclosed, .thumbclosed {
  display: none;
}

.cdaycell, .cWEcell, .cdaybooked, .cWEbooked, .cdaygoth, .cWEgoth, .cdaysteam, .cWEsteam, .cdaypicked, .cWEpicked {
  border: solid 1px #000;
  display: inline-block;
  height: 35px;
  width: auto;
  padding: 4px;
  transition: 0.1s;
}

.cWEcell {
  background-color: var(--bg-cell-we);
}

.cdaycell {
  background-color: var(--bg-cal-odd);
}

.vrow {
  display: table-row;
}

.vblankdefault, .vdaycell, .vWEcell, .vmonthname, .vWEbooked, .vdaybooked, .vdaypickcell, .vWEpickcell, .vdaygoth, .vWEgoth, .vdaysteam, .vWEsteam  {
  display: table-cell;
  text-align: center;
  transition: 0.1s;
  width: calc(100% / 12);
}


#calendar .vdaygoth a, #calendar .vWEgoth a, #calendar .cdaygoth a, #calendar .cWEgoth a {
  color: var(--text-goth);
}

#calendar .vdaysteam a, #calendar .vWEsteam a, #calendar .cdaysteam a, #calendar .cWEsteam a {
  color: var(--text-steam);
}

.vdaycell.day, .vWEcell.day, .vdaypickcell.day, .vWEpickcell.day, .vdaygoth.day, .vWEgoth.day, .vdaysteam.day, .vWEsteam.day  {
  border: none;
  background-color: transparent;
  display: block;
  text-align: center;
}

.vdaypickcell, .cdaypicked {
  background-color: var(--bg-cell-day-pick);
}

.vWEpickcell, .cWEpicked {
  background-color: var(--bg-cell-we-pick);
}

.vWEbooked, .cWEbooked {
  background-color: var(--bg-cell-we-booked);
  color: var(--text-booked);
}

.vdaybooked, .cdaybooked {
  background-color: var(--bg-cell-day-booked);
  color: var(--text-booked);
}

.vdaygoth, .cdaygoth {
  background-color: var(--bg-cell-day-goth);
  color: var(--text-goth);
}

.vWEgoth, .cWEgoth {
  background-color: var(--bg-cell-we-goth);
  color: var(--text-goth);
}

.vdaysteam, .cdaysteam {
  background-color: var(--bg-cell-day-steam);
  color: var(--text-steam);
}

.vWEsteam, .cWEsteam {
  background-color: var(--bg-cell-we-steam);
  color: var(--text-steam);
}

.vdaycell:nth-child(odd){
  background-color: var(--bg-cal-odd);
}

.hWEcell, .vWEcell {
  background-color: var(--bg-cell-we);
  color: black;
}

.hmonthname {
  text-align: left;
  border-right: solid 2px #ffffff;
  padding: 0px 2px;
}

.vmonthname {
  text-align: center;
  border-bottom: solid 2px #000000;
  font-weight: bold;
}

 .switch {
  margin: 0px 0px 0px 20px;
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: #6e94aa;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 35px;
}

.slider.round:before {
  border-radius: 50%;
} 

#blurb {
  margin: 0px 0px 10px 0px;
  font-size: 1.2em;
}

#sendrequest {
  display: inline;
  margin: 0px 10px;
}

button {
  background-color: #007007;
  border: solid 2px #7c9f80;
  border-radius: 6px;
  padding: 4px 6px;
  margin: 0px 4px;
  color: #ffffff;
  text-wrap: nowrap;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

button a {
  color: #fff;
  text-decoration: none;
}

.buttonenabled {
  transition: 0.2s;
  opacity: 1;
  cursor: pointer;
  pointer-events: all;
}

.buttondisabled {
  transition: 0.2s;
  opacity: 0.2;
  pointer-events: none;
}

#requestbox, #sentok {
  border: solid 2px #aaa;
  box-shadow: 5px 5px 5px #615331;
  position: fixed;
  display: none;
  width: 50%;
  max-height: 50%;
  top: 25%;
  left: 25%;
  margin: 0px;
  padding: 10px;
  background-color: #f2f6f8; /* Black background with opacity */
  z-index: 2;
  overflow-y: scroll;
}
.requesttext {
  margin: 5px;
}

#requestmsg {
  padding: 10px 10px 0px 10px;
  margin: 0px;
}
#requestbox textarea {
  width: 90%;
  margin: 5px 10px;
  height: 6em;
}

#requestbox h1, #sentok h1 {
  margin: 6px 0px 20px 0px;
  padding: 0px;
  font-size: larger;
}

#sentok p {
  color: #000;
}

#requestcontrols {
  margin: 10px 0px;
  text-align: right;
}

#requestnights {
  margin: 0px 0px 20px 0px;
}

.rnight {
  border-bottom: solid 1px #ccc;
  padding: 4px 0px 2px 0px;
  margin: 0px 5% 4px 0px;
  color: #333;
}

.textboxerror {
  border: solid 1px #f00;
  background-color: #ffe3da;
}

.textboxclear {
  border: solid 1px #323232;
  background-color: #fff;
}

.hero-image {
  height: 300px;
}
/* Place text in the middle of the image */
.hero-text {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #222031;
}

.hero-text a, .hdrbutton {
  border: solid 1px #ffffff;
  padding: 4px 8px;
  margin: 0px 2px;
  color: #202020;
  text-decoration: none;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3);
}

#tooltip {
  display: none;
  position: absolute;
  margin-top: -35px;
  margin-left: -10px;
  background-color: #000;
  padding: 4px 8px 4px 6px;
  border-radius: 10px;
  color: #d997ff;
  font-family: "Trade Winds", system-ui;
  font-weight: 400;
  font-style: normal;
}



#waiting {
  display: none;
  position:fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

#waiting img {
  width: 25%;
}

@media screen and ((max-width: 600px) or (max-height: 600px)) {
  #requestbox {
    width: 100%;
    height: 100%;
    max-height: 100%;
    top: 0px;
    left: 0px;
    padding: 0px 4px 0px 4px;
    border: none;
    box-shadow: none;
  }
  #requestbox textarea {
    margin: 2px 4px;
  }

  #requestcontrols {
    text-align: left;
  }
  .hero-text {
    left: 6px;
    top: 0px;
  }

  #waiting img {
    width: 50%;
  }
}