/* calendar table */
table {
    width: 100%;
}
.list-inline {
    text-align: center;
}
.list-inline-item {
    display: inline-block;
}
.list-inline-item:not(:last-child) {
    margin-right: .5rem;
}

.title {
  letter-spacing: 2px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
  margin-top:0;
}

#calendar tr {
}
#calendar th {
    height: 20px;
    font-weight: bold;
    color: #fff;
    background: #282E34;
    border: 0;
}
#calendar td {
    border: 0;
    vertical-align: top;
    background: #f7f7f7;
    padding: 5px;
}
#calendar td {
    width: 14.28571428571429%; /* 1/7th of 100% to equalise all columns */
    height: 95px;
}
#calendar th:nth-of-type(6), #calendar th:nth-of-type(7) {
    background: #282E34;
}
#calendar td:nth-of-type(6), #calendar td:nth-of-type(7) {
    background: #efefef;
}

#calendar td.today {
    background-color: #FFD20B;
}
#calendar td a, .am, .pm {
    color: #fff;
    cursor: pointer;
    padding: 2px 7px;
    border-radius: 7px;
}
.key {
  padding: 10px 0;
}

span.date {
 display: block;
 width: 95%;
}
.key .am, .key .pm {
 display: inline;
}
span.date {
 font-weight: bold;
}
span.am,
span.pm {
 display: inline-block;
 font-size: 90%;
}

.key .am {
  background: #28a026;
}
.key .pm {
  background: #6fb70b;
}
.am.green a {
  background: #28a026;
}
.pm.green a {
  background: #6fb70b;
}
.amber a {
  background: #FF6600;
}
.red a {
  background: #CC0000;
}
    .am a:hover {
      background: #6fb70b;
    }
    .pm a:hover {
      background: #28a026;
    }
.full {
 color: #BBBBBB;
}

/* details form */
label {
    display: inline-block;
    width: 100%;
    padding: 4px;
}
input[type=text],
input[type=date],
select {
    width: 100%;
    font-size: 100%;
    padding: 6px;
    border: 0px;
    background: #efefef;
    -webkit-appearance: none;
}
/*input#displaydate,
select#displaytime {
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}*/
.hide,
.hideleft {
    display: none;
}

input[type=submit] {
    background: #FFD20B;
    color: #000;
    text-transform: uppercase;
    padding: 8px 12px;
    border: 0px;
    border-radius: 10px;
    margin: 5px 0 0 2px;
    cursor: pointer;
    -webkit-appearance: none;
}



/***** MEDIA QUERIES *****/


/* Small devices (mobile (landscape), 420px and up) */
@media (min-width: 400px) {

    body {
    border: 0px solid red;
    }

}

/* Small devices (mobile (landscape), 620px and up) */
@media (min-width: 472px) {

    body {
    border: 0px solid cyan;
    }

    .hideleft {
    display: inline;
    }

}


/* Small devices (tablets (portrait), 768px and up) */
@media (min-width: 768px) {

  body {
    border: 0px solid orange;
    }

}


/* Medium devices (tablets (landscape), 1024px and up)    */
@media (min-width: 1024px) {

    body {
    border: 0px solid lime;
    }


}


/* Medium devices (desktops, 1170px and up)    */
@media (min-width: 1170px) {

    body {
    border: 0px solid blue;
    }

    label {
    width: 110px;
    }
    input[type=text],
    input[type=date],
    select {
        width: 260px;
    }

}

/* Large devices (large desktops, 1400px and up)    */
@media (min-width: 1400px) {

    body {
    border: 0px solid lilac;
    }


}