body {
    background-color: #7bc8ea;
    text-align: center;
    padding-left: 2%;
    padding-right: 2%;
}

body.showall {
    background-color: aliceblue;
    text-align: center;
    padding-left: 2%;
    padding-right: 2%;
}



table {
  margin-left: auto;
  margin-right: auto;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.auth-link {
  color: white;
}

.wow {
   margin: 0 auto;
}


.navbar {
  background-color: #7bc8ea;
}

.siteimages {
  width: 75%;
  height: auto;
  border-radius: 1em;
}

p.available {
  background-color:#5bffce;
  width: 75%;
  margin: auto;
  padding: 0.5em;
  border-radius: 1em;

}

p.booked {
  background-color: #ff7d7d;
  width: 75%;
  margin: auto;
  padding: 0.5em;
  border-radius: 1em;

}

p.waitingapproval {
  background-color: #f9ff5b;
  width: 75%;
  margin: auto;
  padding: 0.5em;
  border-radius: 1em;

}

#monthtitle {
  font-size: xx-large;
  color: antiquewhite;
}

.center_div{
  margin: auto;
  width:70% /* value of your choice which suits your alignment */
}

/* Calendar formatting begins here */
.jumpto {
  margin-top: 1em;
  margin-bottom: 1em;
}

.calendar {
  border-spacing: 0;
  border-collapse: separate;
  width: 90%;
  background-color: #ece0ad ;
  margin: auto;
  font-size: 13px;
  border-radius: 1em;
  border: 1px solid;
  margin-bottom: 1.5em;
}

th.mon, th.tue, th.wed, th.thu, th.fri, th.sat, th.sun { /* the header for the days of the week */
  font-size: 22px;
  text-align: center;
}

th.month { /* the header for the month */
  padding: 10px;
  text-align: center;
  font-size: 35px;
}

.calendar tr {
  border-bottom: 1px solid black;
}
.calendar td {
  width: 200px;
  height: 150px;
  padding: 5px 5px 5px 5px;
  border-top: 1px solid black;

  vertical-align: top;
}

.calendar td:not(:last-child) {
  border-right: 1px solid black;

}

.date {
  font-size: 1.5em;
}

p.availablecal {
  background-color:#5bffce;
  width: 100%;
  padding: 0.5em;
  border-radius: 1em;

}

p.bookedcal {
  background-color: #ff7d7d;
  width: 100%;
  padding: 0.5em;
  border-radius: 1em;

}

p.waitingapprovalcal {
  background-color: #f9ff5b;
  width: 100%;
  padding: 0.5em;
  border-radius: 1em;

}


ul {
  height: 100%;
  padding: 0px 5px 0px 20px;
}

a {
  color: #17a2b8;
}

@media only screen and (max-width: 650px) {
  .show-only-landscape {
    display: none;
  }
  .show-only-portrait {
    display: inline-block;
  }
}

@media only screen and (min-width: 651px) {
  .show-only-portrait {
    display: none;
  }
}