// scss-lint:disable all
/* CALENDARS & CLOCKS */

.calendarbox,
.clockbox {
  margin: 5px auto;
  font-size: 12px;
  width: 19em;
  text-align: center;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
}

.clockbox {
  width: auto;

  h2 {
    background: $clockbox-title-bg;
    border-bottom: 1px solid $clockbox-title-border-color;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

.calendar {
  margin: 0;
  padding: 0;
}

.calendar table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  background: white;
  width: 100%;

  caption {
    caption-side: top;
  }
}

.calendar caption,
.calendarbox h2 {
  margin: 0;
  text-align: center;
  border-top: none;
  background: #f5dd5d;
  font-weight: 700;
  font-size: 12px;
  color: #333;
}

.calendar th {
  padding: 8px 5px;
  background: #f8f8f8;
  border-bottom: 1px solid #ddd;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  color: #666;
}

.calendar td {
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  padding: 0;
  border-top: 1px solid #eee;
  border-bottom: none;
}

.calendar td.selected a {
  background: #79aec8;
  color: #fff;
}

.calendar td.nonday {
  background: #f8f8f8;
}

.calendar td.today a {
  font-weight: 700;
}

.calendar td a,
.timelist a {
  display: block;
  font-weight: 400;
  padding: 6px;
  text-decoration: none;
  color: #444;
}

.calendar td a:focus,
.timelist a:focus,
.calendar td a:hover,
.timelist a:hover {
  background: #79aec8;
  color: white;
}

.calendar td a:active,
.timelist a:active {
  background: #417690;
  color: white;
}

.calendarnav {
  font-size: 10px;
  text-align: center;
  color: #ccc;
  margin: 0;
  padding: 1px 3px;
}

.calendarnav a:link,
#calendarnav a:visited,
#calendarnav a:focus,
#calendarnav a:hover {
  color: #999;
}

.calendar-shortcuts {
  background: white;
  border-top: 1px solid #eee;
  font-size: 11px;
  line-height: 11px;
  padding: 8px 0;
  color: #ccc;
}

.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
  display: block;
  height: 15px;
  padding: 0;
  position: absolute;
  text-indent: -9999px;
  top: 14px;
  width: 15px;
}

.calendarnav-previous {
  background: url(../img/calendar-icons.svg) 0 0 no-repeat;
  left: 10px;
}

.calendarbox .calendarnav-previous:focus,
.calendarbox .calendarnav-previous:hover {
  background-position: 0 -15px;
}

.calendarnav-next {
  right: 10px;
  background: url(../img/calendar-icons.svg) 0 -30px no-repeat;
}

.calendarbox .calendarnav-next:focus,
.calendarbox .calendarnav-next:hover {
  background-position: 0 -45px;
}

.calendar-cancel {
  margin: 0;
  padding: 4px 0;
  font-size: 12px;
  background: #eee;
  border-top: 1px solid #ddd;
  color: #333;
}

.calendar-cancel:focus,
.calendar-cancel:hover {
  background: #ddd;
}

.calendar-cancel a {
  color: black;
  display: block;
}

ul.timelist,
.timelist li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.timelist a {
  padding: 2px;
}
