/* ==========================================================================

$BASE-TIME-PICKER
========================================================================== */

/**

* The list of times.
*/

.picker__list {

list-style: none;
padding: 0.75em 0 4.2em;
margin: 0;

} /**

* The times on the clock.
*/

.picker__list-item {

border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
margin-bottom: -1px;
position: relative;
background: #fff;
padding: .75em 1.25em;

} @media (min-height: 46.75em) {

.picker__list-item {
  padding: .5em 1em;
}

} /* Hovered time */ .picker__list-item:hover {

cursor: pointer;
color: #000;
background: #b1dcfb;
border-color: #0089ec;
z-index: 10;

} /* Highlighted and hovered/focused time */ .picker__list-item–highlighted {

border-color: #0089ec;
z-index: 10;

} .picker__list-item–highlighted:hover, .picker–focused .picker__list-item–highlighted {

cursor: pointer;
color: #000;
background: #b1dcfb;

} /* Selected and hovered/focused time */ .picker__list-item–selected, .picker__list-item–selected:hover, .picker–focused .picker__list-item–selected {

background: #0089ec;
color: #fff;
z-index: 10;

} /* Disabled time */ .picker__list-item–disabled, .picker__list-item–disabled:hover, .picker–focused .picker__list-item–disabled {

background: #f5f5f5;
border-color: #f5f5f5;
color: #ddd;
cursor: default;
border-color: #ddd;
z-index: auto;

} /**

* The clear button
*/

.picker–time .picker__button–clear {

display: block;
width: 80%;
margin: 1em auto 0;
padding: 1em 1.25em;
background: none;
border: 0;
font-weight: 500;
font-size: .67em;
text-align: center;
text-transform: uppercase;
color: $timepicker-clock-color;

} .picker–time .picker__button–clear:hover, .picker–time .picker__button–clear:focus {

color: #000;
background: #b1dcfb;
background: #ee2200;
border-color: #ee2200;
cursor: pointer;
color: #fff;
outline: none;

} .picker–time .picker__button–clear:before {

top: -0.25em;
color: $timepicker-clock-color;
font-size: 1.25em;
font-weight: bold;

} .picker–time .picker__button–clear:hover:before, .picker–time .picker__button–clear:focus:before {

color: #fff;

}

/* ==========================================================================

$DEFAULT-TIME-PICKER
========================================================================== */

/**

* The frame the bounds the time picker.
*/

.picker–time .picker__frame {

min-width: 256px;
max-width: 320px;

} /**

* The picker box.
*/

.picker–time .picker__box {

font-size: 1em;
background: #f2f2f2;
padding: 0;

} @media (min-height: 40.125em) {

.picker--time .picker__box {
  margin-bottom: 5em;
}

}

/* ==========================================================================

$DEFAULT-TIME-PICKER
========================================================================== */

.clockpicker-display {

      font-size: 4rem;
      font-weight: bold;
      text-align: center;
      color: rgba(255, 255, 255, 0.6);
font-weight: 400;
      clear: both;
      position: relative;

}

.clockpicker-span-am-pm {

font-size: 1.3rem;
position: absolute;
right: 1rem;
bottom: 0.3rem;
line-height: 2rem;
font-weight: 500;

} @media only screen and (min-width: 601px) {

.clockpicker-display {
        top: 32%;
}
.clockpicker-span-am-pm {
  position: relative;
  right: auto;
  bottom: auto;
  text-align: center;
  margin-top: 1.2rem;
}

}

.text-primary{

color: rgba(255, 255, 255, 1)

} .clockpicker-span-hours {

margin-right: 3px;

} .clockpicker-span-minutes {

margin-left: 3px;

}

.clockpicker-span-hours, .clockpicker-span-minutes, .clockpicker-span-am-pm div {

cursor: pointer;

} .clockpicker-moving {

cursor: move;

} .clockpicker-plate {

      background-color: $timepicker-clock-plate-bg;
      border-radius: 50%;
      width: 270px;
      height: 270px;
      overflow: visible;
      position: relative;
margin: auto;
margin-top: 25px;
margin-bottom: 5px;
      user-select: none;

} .clockpicker-canvas, .clockpicker-dial {

width: 270px;
height: 270px;
position: absolute;
left: -1px;
top: -1px;

} .clockpicker-minutes {

visibility: hidden;

} .clockpicker-tick {

border-radius: 50%;
color: $timepicker-clock-color;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
position: absolute;
cursor: pointer;

} .clockpicker-tick.active, .clockpicker-tick:hover {

background-color: transparentize($secondary-color, .75);

} .clockpicker-dial {

-webkit-transition: -webkit-transform 350ms, opacity 350ms;
-moz-transition: -moz-transform 350ms, opacity 350ms;
-ms-transition: -ms-transform 350ms, opacity 350ms;
-o-transition: -o-transform 350ms, opacity 350ms;
transition: transform 350ms, opacity 350ms;

} .clockpicker-dial-out {

opacity: 0;

} .clockpicker-hours.clockpicker-dial-out {

-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);

} .clockpicker-minutes.clockpicker-dial-out {

-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
-ms-transform: scale(.8, .8);
-o-transform: scale(.8, .8);
transform: scale(.8, .8);

} .clockpicker-canvas {

-webkit-transition: opacity 175ms;
-moz-transition: opacity 175ms;
-ms-transition: opacity 175ms;
-o-transition: opacity 175ms;
transition: opacity 175ms;

} .clockpicker-canvas-out {

opacity: 0.25;

} .clockpicker-canvas-bearing {

stroke: none;
fill: $secondary-color;

} .clockpicker-canvas-bg {

stroke: none;
fill: $secondary-color;

} .clockpicker-canvas-bg-trans {

fill: $secondary-color;

} .clockpicker-canvas line {

stroke: $secondary-color;
stroke-width: 4;
stroke-linecap: round;
/*shape-rendering: crispEdges;*/

}