/* Timepicker Containers */ .timepicker-modal {

max-width: 325px;
max-height: none;

}

.timepicker-container.modal-content {

display: flex;
flex-direction: column;
padding: 0;

}

.text-primary {

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

}

/* Clock Digital Display */ .timepicker-digital-display {

flex: 1 auto;
background-color: $secondary-color;
padding: 10px;
font-weight: 300;

}

.timepicker-text-container {

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

}

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

cursor: pointer;

}

.timepicker-span-hours {

margin-right: 3px;

}

.timepicker-span-minutes {

margin-left: 3px;

}

.timepicker-display-am-pm {

font-size: 1.3rem;
position: absolute;
right: 1rem;
bottom: 1rem;
font-weight: 400;

}

/* Analog Clock Display */ .timepicker-analog-display {

flex: 2.5 auto;

}

.timepicker-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;

}

.timepicker-canvas, .timepicker-dial {

      position: absolute;
      left: 0;
right: 0;
top: 0;
bottom: 0;

} .timepicker-minutes {

visibility: hidden;

}

.timepicker-tick {

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

}

.timepicker-tick.active, .timepicker-tick:hover {

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

} .timepicker-dial {

transition: transform 350ms, opacity 350ms;

} .timepicker-dial-out {

&.timepicker-hours {
        transform: scale(1.1, 1.1);
}
&.timepicker-minutes {
        transform: scale(.8, .8);
}
      opacity: 0;

} .timepicker-canvas {

      transition: opacity 175ms;
line {
        stroke: $secondary-color;
        stroke-width: 4;
        stroke-linecap: round;
}

} .timepicker-canvas-out {

opacity: 0.25;

} .timepicker-canvas-bearing {

stroke: none;
fill: $secondary-color;

} .timepicker-canvas-bg {

stroke: none;
fill: $secondary-color;

}

/* Footer */ .timepicker-footer {

margin: 0 auto;
padding: 5px 1rem;
display: flex;
justify-content: space-between;

}

.timepicker-clear {

color: $error-color;

}

.timepicker-close {

color: $secondary-color;

}

.timepicker-clear, .timepicker-close {

padding: 0 20px;

}

/* Media Queries */ @media #{$medium-and-up} {

.timepicker-modal {
  max-width: 600px;
}
.timepicker-container.modal-content {
  flex-direction: row;
}
.timepicker-text-container {
              top: 32%;
      }
      .timepicker-display-am-pm {
        position: relative;
        right: auto;
        bottom: auto;
        text-align: center;
        margin-top: 1.2rem;
      }

}