/**
 * moj.slot-picker - UI components for selecting time slots
 * @version v0.22.2
 * @link https://github.com/ministryofjustice/moj_slotpicker
 * @license OGL v2.0 - https://github.com/ministryofjustice/moj_slotpicker/blob/master/LICENCE.md
 */
@-ms-viewport {
  width: device-width; }
@-o-viewport {
  width: device-width; }
@font-face {
  font-family: GDS-Logo;
  src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); }
@-ms-viewport {
  width: device-width; }
@-o-viewport {
  width: device-width; }
.BookingCalendar-mask {
  position: relative;
  overflow: hidden;
  height: 279px;
  border-bottom: 1px solid #dee0e2; }

table.BookingCalendar-dates {
  width: 100%;
  font-size: 19px;
  border-width: 0 1px;
  border-style: solid;
  border-color: #dee0e2;
  border-collapse: collapse;
  background: #dee0e2 url("images/unavailable_tile.png"); }
  table.BookingCalendar-dates th,
  table.BookingCalendar-dates td {
    width: 14.28571%; }
  table.BookingCalendar-dates thead th {
    padding: 3px 0 0;
    font-weight: bold;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    background: #f8f8f8;
    border-bottom: 2px solid #bfc1c3; }
  table.BookingCalendar-dates tbody td {
    padding: 0;
    border-color: #dee0e2;
    border-style: solid;
    border-width: 0 0 1px 1px; }
  table.BookingCalendar-dates td:last-child > div {
    border-right: 1px solid #dee0e2; }
  table.BookingCalendar-dates tbody tr:last-child td {
    border-bottom: none; }

a.BookingCalendar-dateLink,
a.BookingCalendar-dateLink:visited {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: #0b0c0c;
  text-decoration: none; }

a.BookingCalendar-dateLink:hover {
  color: #0b0c0c;
  text-decoration: underline;
  background: #d5e8f3; }
a.BookingCalendar-dateLink.is-chosen {
  overflow: hidden; }
  a.BookingCalendar-dateLink.is-chosen:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #2b8cc4 transparent transparent; }
    @media (min-width: 641px) {
      a.BookingCalendar-dateLink.is-chosen:after {
        border-width: 0 15px 15px 0; } }
a.BookingCalendar-dateLink .BookingCalendar-day {
  padding-left: 3px; }

.BookingCalendar-date--bookable {
  background: #fff; }
  .BookingCalendar-date--bookable.is-active {
    background: #96c6e2; }

.BookingCalendar-content {
  position: relative;
  min-height: 55px; }

.BookingCalendar-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0;
  color: #fff;
  line-height: normal;
  text-align: center;
  background: #6f777b; }

.BookingCalendar-tag--today {
  background: #2b8cc4; }

ul.BookingCalendar-legend {
  padding: 0;
  list-style: none; }
  ul.BookingCalendar-legend > li {
    display: table-cell;
    font-family: "nta", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 400;
    text-transform: none; }
    @media (max-width: 640px) {
      ul.BookingCalendar-legend > li {
        font-size: 14px;
        line-height: 1.14286; } }
    ul.BookingCalendar-legend > li:last-child .BookingCalendar-legendDesc {
      margin-right: 0; }
  @media (max-width: 640px) {
    ul.BookingCalendar-legend {
      margin: 0;
      padding: 0 15px 20px;
      background: #dee0e2; } }

.BookingCalendar-legendBox {
  float: left;
  width: 29px;
  height: 29px;
  margin: 0 5px 0 0;
  background: #fff;
  border: 1px solid #dee0e2; }
  @media (max-width: 640px) {
    .BookingCalendar-legendBox {
      border-width: 2px;
      border-color: #999; } }

.BookingCalendar-legendDesc {
  float: left;
  margin-right: 1em;
  font-family: "nta", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
  text-transform: none;
  line-height: 0; }
  @media (max-width: 640px) {
    .BookingCalendar-legendDesc {
      font-size: 14px;
      line-height: 1.14286; } }

.BookingCalendar-legendBox--unavailable {
  background: #dee0e2 url("images/unavailable_tile.png"); }

.BookingCalendar-header {
  position: relative;
  border: 1px solid #dee0e2;
  background: #fff; }

.BookingCalendar-currentMonth {
  display: block;
  font-family: "nta", Arial, sans-serif;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  text-transform: none;
  margin: 0;
  padding: 0.5em 0;
  text-align: center; }
  @media (max-width: 640px) {
    .BookingCalendar-currentMonth {
      font-size: 18px;
      line-height: 1.2; } }

a.BookingCalendar-nav {
  display: none; }
  a.BookingCalendar-nav.is-active {
    display: block; }

a.BookingCalendar-nav--next,
a.BookingCalendar-nav--prev {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.632em;
  font-family: "nta", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.31579;
  font-weight: 400;
  text-transform: none;
  color: #0b0c0c;
  line-height: 30px;
  text-decoration: none;
  background: no-repeat 0 -80px; }
  @media (max-width: 640px) {
    a.BookingCalendar-nav--next,
    a.BookingCalendar-nav--prev {
      font-size: 16px;
      line-height: 1.25; } }
  a.BookingCalendar-nav--next:hover,
  a.BookingCalendar-nav--prev:hover {
    text-decoration: underline; }

a.BookingCalendar-nav--prev {
  margin-left: 10px;
  padding-left: 40px;
  background-image: url("images/prev.png"); }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    a.BookingCalendar-nav--prev {
      background-position: 0 10px;
      background-size: 30px; } }

a.BookingCalendar-nav--next {
  left: auto;
  right: 0;
  margin-right: 10px;
  padding-right: 40px;
  background-image: url("images/next.png");
  background-position: 100% -80px; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    a.BookingCalendar-nav--next {
      background-position: 100% 10px;
      background-size: 30px; } }

.BookingCalendar-navFull {
  display: none; }
  @media (min-width: 769px) {
    .BookingCalendar-navFull {
      display: inline; } }

.SlotPicker-timeSlots {
  display: none; }
  .SlotPicker-timeSlots.is-active {
    display: block; }

.SlotPicker-days {
  overflow: hidden;
  margin: 0;
  padding: 0; }
  @media (max-width: 768px) {
    .SlotPicker-days {
      margin-bottom: 0; } }

.SlotPicker-day {
  position: relative;
  display: none;
  overflow: hidden;
  padding: 0.5em;
  list-style: none;
  background: #dee0e2; }
  @media (max-width: 640px) {
    .SlotPicker-day {
      border-width: 1px 0; } }
  .SlotPicker-day.is-active {
    display: block; }

.SlotPicker-dayTitle {
  font-family: "nta", Arial, sans-serif;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  text-transform: none;
  margin: 0; }
  @media (max-width: 640px) {
    .SlotPicker-dayTitle {
      font-size: 18px;
      line-height: 1.2; } }

.SlotPicker-dayOneSlot {
  margin: 0; }

.SlotPicker-label {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
  box-sizing: border-box;
  min-width: 120px;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.3em 15px 0.3em 46px;
  font-size: 24px;
  line-height: 1.2em;
  border: 2px solid #bfc1c3;
  background: #fff url("images/tick_off.png") 7px 12px no-repeat; }
  @media (max-width: 640px) {
    .SlotPicker-label {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 10px;
      background-position: 7px 3px; }
      .SlotPicker-label.is-active {
        border-color: #2b8cc4;
        background-color: #d5e8f3; } }
  .SlotPicker-label.is-active {
    background-image: url("images/tick_on.png"); }
  .SlotPicker-label.is-disabled {
    color: #bfc1c3;
    background-image: url("images/tick_disabled.png"); }
  .SlotPicker-label:last-child {
    margin-right: 0;
    margin-bottom: 0; }

.SlotPicker-slot {
  position: absolute;
  top: -99px;
  left: -99px;
  margin-top: -7px; }

.SlotPicker-duration {
  display: block; }
  @media (max-width: 640px) {
    .SlotPicker-duration {
      display: inline; } }

.SlotPicker-choices {
  zoom: 1;
  margin: 0;
  list-style-type: none; }
  @media (min-width: 769px) {
    .SlotPicker-choices {
      min-height: 236px; } }

.SlotPicker-choice {
  padding: 10px;
  background: #dee0e2; }
  .SlotPicker-choice + .SlotPicker-choice {
    padding-top: 0; }
  .SlotPicker-choice .SlotPicker-choiceInner {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    min-height: 60px;
    padding: 10px;
    background: #fff;
    border: 1px solid #bfc1c3; }
  .SlotPicker-choice .SlotPicker-prompt {
    display: none;
    margin-left: 55px;
    padding: 5px 18%;
    text-align: center;
    color: #6f777b; }
    @media (max-width: 640px) {
      .SlotPicker-choice .SlotPicker-prompt {
        margin-left: 45px;
        padding-left: 10%;
        padding-right: 10%; } }
  .SlotPicker-choice.is-clicked .SlotPicker-prompt {
    display: block; }
  .SlotPicker-choice.is-chosen .SlotPicker-choiceInner {
    padding-left: 65px;
    padding-right: 80px; }
    @media (max-width: 640px) {
      .SlotPicker-choice.is-chosen .SlotPicker-choiceInner {
        padding-left: 55px; } }
    .SlotPicker-choice.is-chosen .SlotPicker-choiceInner p {
      font-size: 24px; }
    .SlotPicker-choice.is-chosen .SlotPicker-choiceInner .SlotPicker-prompt {
      display: none; }
    .SlotPicker-choice.is-chosen .SlotPicker-choiceInner .SlotPicker-icon--remove,
    .SlotPicker-choice.is-chosen .SlotPicker-choiceInner .SlotPicker-icon--promote {
      display: block; }
    .SlotPicker-choice.is-chosen .SlotPicker-choiceInner .SlotPicker-date {
      font-weight: bold; }
    .SlotPicker-choice.is-chosen .SlotPicker-choiceInner .SlotPicker-position {
      background-color: #6f777b; }
  .SlotPicker-choice.is-active .SlotPicker-position {
    background-color: #2b8cc4; }
  .SlotPicker-choice p {
    margin: 0; }

.SlotPicker-choiceContent {
  position: relative;
  top: 0;
  -webkit-transition: top 0.3s ease-out;
  transition: top 0.3s ease-out; }

.SlotPicker-promoteHelp {
  display: none; }
  .SlotPicker-promoteHelp.is-chosen {
    display: block; }

.SlotPicker-position {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 100%;
  background: #bfc1c3;
  color: #fff;
  width: 55px;
  font-size: 48px;
  font-weight: bold;
  margin: -10px 0 0 -10px; }
  @media (max-width: 640px) {
    .SlotPicker-position {
      width: 45px; } }
  .SlotPicker-position span {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -0.6em;
    text-align: center; }

.SlotPicker-icon {
  display: none;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  overflow: hidden;
  text-indent: 999px;
  background: no-repeat 0 -90px; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .SlotPicker-icon {
      background-position: 0 0;
      background-size: 100%; } }

.SlotPicker-icon--remove {
  background-image: url("images/remove.png"); }

.SlotPicker-icon--promote {
  right: 50px;
  background-image: url("images/promote.png"); }

/*# sourceMappingURL=moj.slot-picker.css.map */