/*!
 * Materialize v1.0.0 (http://materializecss.com)
 * Copyright 2014-2017 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */




/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */








/*********************
  Transition Classes
**********************/

/*********************
  Media Query Classes
**********************/






@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}

@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}

/*******************
  Utility Classes
*******************/







/* Checkboxes
   ========================================================================== */
/* Remove default checkbox */



/* Indeterminate checkbox */


/* Switch
   ========================================================================== */



/* Select Field
   ========================================================================== */


/* File Input
   ========================================================================== */




/***************
    Nav List

/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */

@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */



@-webkit-keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
  }
  /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg);
  }
  /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg);
  }
  /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg);
  }
  /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg);
  }
  /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg);
  }
  /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg);
  }
  /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg);
  }
  /* 4   * ARCSIZE */
}

@keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
  /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg);
            transform: rotate(540deg);
  }
  /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg);
            transform: rotate(675deg);
  }
  /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg);
            transform: rotate(810deg);
  }
  /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg);
            transform: rotate(945deg);
  }
  /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
  /* 4   * ARCSIZE */
}

@-webkit-keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes red-fade-in-out {
  from {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}

@keyframes red-fade-in-out {
  from {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}

@-webkit-keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}

@keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}

@-webkit-keyframes green-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes green-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */




@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(130deg);
  }
}

@keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
}

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
  }
  to {
    -webkit-transform: rotate(-130deg);
  }
}

@keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  to {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg);
  }
}

#spinnerContainer.cooldown {
  /* duration: SHRINK_TIME */
  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}






.bookslide .carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400px;
  -webkit-perspective:100px;
          perspective: 100px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}


.bookslide .carousel.carousel-slider {
  top: 0;
  left: 0;
}

.bookslide .carousel.carousel-slider .carousel-fixed-item {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 1;
}

.bookslide .carousel.carousel-slider .carousel-fixed-item.with-indicators {
  bottom: 68px;
}

.bookslide .carousel.carousel-slider .carousel-item {
  width: 100%;
  height:70%;
  min-height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

.bookslide .carousel.carousel-slider .carousel-item h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.bookslide .carousel.carousel-slider .carousel-item p {
  font-size: 15px;
}

.bookslide .carousel .carousel-item {
  visibility: hidden;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.bookslide .carousel .carousel-item > img {
  width: 100%;
}

.bookslide .carousel .indicators {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}

.bookslide .carousel .indicators .indicator-item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 24px 4px;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  border-radius: 50%;
}

.bookslide .carousel .indicators .indicator-item.active {
  background-color: #fff;
}

.bookslide .carousel.scrolling .carousel-item .materialboxed,
.carousel .carousel-item:not(.active) .materialboxed {
  pointer-events: none;
}

.bookslide .tap-target-wrapper {
  width: 800px;
  height: 800px;
  position: fixed;
  z-index: 1000;
  visibility: hidden;
  -webkit-transition: visibility 0s .3s;
  transition: visibility 0s .3s;
}

.bookslide .tap-target-wrapper.open {
  visibility: visible;
  -webkit-transition: visibility 0s;
  transition: visibility 0s;
}

.bookslide .tap-target-wrapper.open .tap-target {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: .95;
  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

.bookslide .tap-target-wrapper.open .tap-target-wave::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.bookslide .tap-target-wrapper.open .tap-target-wave::after {
  visibility: visible;
  -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
          animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  -webkit-transition: opacity .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
  transition: opacity .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s 1s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
}

.bookslide .tap-target {
  position: absolute;
  font-size: 1rem;
  border-radius: 50%;
  background-color: #ee6e73;
  -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

.bookslide .tap-target-content {
  position: relative;
  display: table-cell;
}

.bookslide .tap-target-wave {
  position: absolute;
  border-radius: 50%;
  z-index: 10001;
}

.bookslide .tap-target-wave::before, .tap-target-wave::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff;
}

.bookslide .tap-target-wave::before {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.bookslide .tap-target-wave::after {
  visibility: hidden;
  -webkit-transition: opacity .3s,
 visibility 0s,
 -webkit-transform .3s;
  transition: opacity .3s,
 visibility 0s,
 -webkit-transform .3s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s,
 -webkit-transform .3s;
  z-index: -1;
}

.bookslide .tap-target-origin {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10002;
  position: absolute !important;
}

.bookslide .tap-target-origin:not(.btn):not(.btn-large):not(.btn-small), .tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover {
  background: none;
}

@media only screen and (max-width: 600px) {
  .bookslide .tap-target, .tap-target-wrapper {
    width: 600px;
    height: 600px;
  }
}

.bookslide .pulse {
  overflow: visible;
  position: relative;
}

.bookslide .pulse::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: inherit;
  border-radius: inherit;
  -webkit-transition: opacity .3s, -webkit-transform .3s;
  transition: opacity .3s, -webkit-transform .3s;
  transition: opacity .3s, transform .3s;
  transition: opacity .3s, transform .3s, -webkit-transform .3s;
  -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
          animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  z-index: -1;
}

@-webkit-keyframes pulse-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}

@keyframes pulse-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}

/* Modal */
.bookslide .datepicker-modal {
  max-width: 325px;
  min-width: 300px;
  max-height: none;
}

.bookslide .datepicker-container.modal-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
}

.bookslide .datepicker-controls {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 280px;
  margin: 0 auto;
}

.bookslide .datepicker-controls .selects-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.bookslide .datepicker-controls .select-wrapper input {
  border-bottom: none;
  text-align: center;
  margin: 0;
}

.bookslide.datepicker-controls .select-wrapper input:focus {
  border-bottom: none;
}

.bookslide .datepicker-controls .select-wrapper .caret {
  display: none;
}

.bookslide .datepicker-controls .select-year input {
  width: 50px;
}

.bookslide .datepicker-controls .select-month input {
  width: 70px;
}

.bookslide .month-prev, .month-next {
  margin-top: 4px;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

/* Date Display */
.bookslide .datepicker-date-display {
  -webkit-box-flex: 1;
  -webkit-flex: 1 auto;
      -ms-flex: 1 auto;
          flex: 1 auto;
  background-color: #26a69a;
  color: #fff;
  padding: 20px 22px;
  font-weight: 500;
}

.bookslide .datepicker-date-display .year-text {
  display: block;
  font-size: 1.5rem;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.7);
}

.bookslide .datepicker-date-display .date-text {
  display: block;
  font-size: 2.8rem;
  line-height: 47px;
  font-weight: 500;
}

/* Calendar */
.bookslide .datepicker-calendar-container {
  -webkit-box-flex: 2.5;
  -webkit-flex: 2.5 auto;
      -ms-flex: 2.5 auto;
          flex: 2.5 auto;
}

.bookslide .datepicker-table {
  width: 280px;
  font-size: 1rem;
  margin: 0 auto;
}

.datepicker-table thead {
  border-bottom: none;
}

.bookslide .datepicker-table th {
  padding: 10px 5px;
  text-align: center;
}

.bookslide .datepicker-table tr {
  border: none;
}

.datepicker-table abbr {
  text-decoration: none;
  color: #999;
}

.bookslide .datepicker-table td {
  border-radius: 50%;
  padding: 0;
}

.bookslide .datepicker-table td.is-today {
  color: #26a69a;
}

.bookslide .datepicker-table td.is-selected {
  background-color: #26a69a;
  color: #fff;
}

.bookslide .datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
  color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.bookslide .datepicker-day-button {
  background-color: transparent;
  border: none;
  line-height: 38px;
  display: block;
  width: 100%;
  border-radius: 50%;
  padding: 0 5px;
  cursor: pointer;
  color: inherit;
}

.bookslide .datepicker-day-button:focus {
  background-color: rgba(43, 161, 150, 0.25);
}

/* Footer */
.bookslide .datepicker-footer {
  width: 280px;
  margin: 0 auto;
  padding-bottom: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.bookslide .datepicker-cancel,
.datepicker-clear,
.datepicker-today,
.datepicker-done {
  color: #26a69a;
  padding: 0 1rem;
}

.bookslide .datepicker-clear {
  color: #F44336;
}

/* Media Queries */
@media only screen and (min-width: 601px) {
  .bookslide .datepicker-modal {
    max-width: 625px;
  }
  .bookslide .datepicker-container.modal-content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .bookslide .datepicker-date-display {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 270px;
        -ms-flex: 0 1 270px;
            flex: 0 1 270px;
  }
  .bookslide .datepicker-controls,
  .datepicker-table,
  .datepicker-footer {
    width: 320px;
  }
  .bookslide  .datepicker-day-button {
    line-height: 44px;
  }
}

/* Timepicker Containers */
.bookslide .timepicker-modal {
  max-width: 325px;
  max-height: none;
}

.bookslide .timepicker-container.modal-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
}

.bookslide .text-primary {
  color: white;
}

/* Clock Digital Display */
.bookslide .timepicker-digital-display {
  -webkit-box-flex: 1;
  -webkit-flex: 1 auto;
      -ms-flex: 1 auto;
          flex: 1 auto;
  background-color: #26a69a;
  padding: 10px;
  font-weight: 300;
}

.bookslide .timepicker-text-container {
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.bookslide .timepicker-span-hours,
.timepicker-span-minutes,
.timepicker-span-am-pm div {
  cursor: pointer;
}

.bookslide .timepicker-span-hours {
  margin-right: 3px;
}

.bookslide .timepicker-span-minutes {
  margin-left: 3px;
}

.bookslide .timepicker-display-am-pm {
  font-size: 1.3rem;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-weight: 400;
}

/* Analog Clock Display */
.bookslide .timepicker-analog-display {
  -webkit-box-flex: 2.5;
  -webkit-flex: 2.5 auto;
      -ms-flex: 2.5 auto;
          flex: 2.5 auto;
}

.bookslide .timepicker-plate {
  background-color: #eee;
  border-radius: 50%;
  width: 270px;
  height: 270px;
  overflow: visible;
  position: relative;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.bookslide .timepicker-canvas,
.timepicker-dial {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.bookslide .timepicker-minutes {
  visibility: hidden;
}

.bookslide .timepicker-tick {
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.87);
  line-height: 40px;
  text-align: center;
  width: 40px;
  height: 40px;
  position: absolute;
  cursor: pointer;
  font-size: 15px;
}

.bookslide .timepicker-tick.active,
.timepicker-tick:hover {
  background-color: rgba(38, 166, 154, 0.25);
}

.bookslide .timepicker-dial {
  -webkit-transition: opacity 350ms, -webkit-transform 350ms;
  transition: opacity 350ms, -webkit-transform 350ms;
  transition: transform 350ms, opacity 350ms;
  transition: transform 350ms, opacity 350ms, -webkit-transform 350ms;
}

.bookslide .timepicker-dial-out {
  opacity: 0;
}

.bookslide .timepicker-dial-out.timepicker-hours {
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}

.bookslide .timepicker-dial-out.timepicker-minutes {
  -webkit-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
}

.bookslide .timepicker-canvas {
  -webkit-transition: opacity 175ms;
  transition: opacity 175ms;
}

.bookslide .timepicker-canvas line {
  stroke: #26a69a;
  stroke-width: 4;
  stroke-linecap: round;
}

.bookslide .timepicker-canvas-out {
  opacity: 0.25;
}

.bookslide .timepicker-canvas-bearing {
  stroke: none;
  fill: #26a69a;
}

.bookslide .timepicker-canvas-bg {
  stroke: none;
  fill: #26a69a;
}

/* Footer */
.bookslide .timepicker-footer {
  margin: 0 auto;
  padding: 5px 1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.bookslide .timepicker-clear {
  color: #F44336;
}

.bookslide .timepicker-close {
  color: #26a69a;
}

.bookslide .timepicker-clear,
.timepicker-close {
  padding: 0 20px;
}

/* Media Queries */
@media only screen and (min-width: 601px) {
  .bookslide  .timepicker-modal {
    max-width: 600px;
  }
  .bookslide .timepicker-container.modal-content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .bookslide  .timepicker-text-container {
    top: 32%;
  }
  .bookslide .timepicker-display-am-pm {
    position: relative;
    right: auto;
    bottom: auto;
    text-align: center;
    margin-top: 1.2rem;
  }
  
}