/* Touch-friendly countdowns, also on Safari 9. */
.clock-button { display: block; position: relative; padding: 0; border: 0; background: none; text-align: inherit; -webkit-appearance: none; }
.clock-button:hover { color: #d9f4c8; }
.timer-indicator { position: absolute; left: 100%; bottom: 2px; margin-left: 6px; max-width: 63px; font-size: 9px; line-height: 1.4; font-weight: 400; letter-spacing: 0; color: #c4edb1; text-align: left; white-space: pre-line; font-variant-numeric: tabular-nums; }
.timer-indicator.is-done { color: #edbc7b; }
.timers-overlay { z-index: 45; }
.timer-details { max-width: 680px; }
.timer-details h2 { margin-right: 20px; }
.timer-details .close-button { width: 44px; height: 44px; }
.timer-presets { margin: 18px -3px 0; }
.timer-presets button { display: inline-block; min-width: 65px; min-height: 58px; margin: 3px; padding: 8px 12px; background: #233932; border: 1px solid #678263; border-radius: 10px; color: #d9f4c8; font-size: 24px; font-variant-numeric: tabular-nums; }
.timer-presets span { display: block; font-size: 10px; color: #a9c7b3; }
.timer-custom label { display: inline-block; vertical-align: bottom; font-size: 11px; color: #a6bcbd; margin-right: 10px; }
.timer-custom input, .timer-custom select { display: block; width: 90px; height: 44px; margin-top: 6px; border: 1px solid #52696e; border-radius: 7px; background: #111b1f; color: #edf3ed; font: inherit; font-size: 19px; padding: 6px 9px; }
.timer-custom input:focus, .timer-custom select:focus { outline: 2px solid #c4edb1; outline-offset: 2px; }
.timer-custom button { vertical-align: bottom; }
.timer-details .quiet-button, .timer-alarm-details .quiet-button { min-height: 44px; font-size: 12px; border-radius: 8px; padding: 8px 12px; }
.timer-primary { background: #c4edb1; color: #19272c; border-color: #c4edb1; }
.timer-sound { margin-top: 18px; }
#timer-sound-status { display: inline-block; font-size: 11px; color: #a6bcbd; margin: 7px 0 0 10px; }
.details #timer-error, .details #timer-storage-status { color: #edbc7b; margin-top: 10px; }
.timer-card { position: relative; border: 1px solid #3d5157; border-radius: 10px; margin-top: 10px; padding: 14px; }
.details .timer-card h3 { margin: 0 0 7px; font-size: 13px; }
.timer-card .timer-countdown { display: inline-block; font-size: 34px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1.2; }
.timer-state { display: inline-block; margin-left: 12px; font-size: 11px; color: #a6bcbd; }
.timer-card.is-paused .timer-countdown { color: #a6bcbd; }
.timer-card.is-done { border-color: #edbc7b; }
.timer-card.is-done .timer-countdown, .timer-card.is-done .timer-state { color: #edbc7b; }
.timer-card.is-finished { opacity: .7; }
.timer-actions { margin-top: 12px; }
.timer-actions button { margin: 0 6px 0 0; }
.timer-actions button:disabled { opacity: .5; cursor: default; }
.timer-alarm-overlay { z-index: 100; }
.timer-alarm-details { max-width: 510px; border: 2px solid #edbc7b; }
.night .timer-alarm-details { border-color: #edbc7b; }
.timer-alarm-details h2 { color: #f1d88d; font-size: 38px; }
.timer-alarm-item { padding: 15px 0; border-bottom: 1px solid #526052; }
.timer-alarm-item strong { display: inline-block; width: 65%; vertical-align: middle; font-size: 16px; font-weight: 400; padding-right: 8px; }
.timer-alarm-actions { margin-top: 20px; }
.timer-alarm-actions button { margin: 0 6px 6px 0; }
@media (min-width: 600px) {
  .timer-card { display: inline-block; vertical-align: top; width: 49%; margin-right: 1%; }
}
@media (min-width: 850px) and (max-width: 1100px) {
  .timer-indicator { font-size: 8px; max-width: 48px; margin-left: 4px; }
}
@media (min-width: 561px) and (max-width: 849px) {
  .clock-button { margin-left: auto; }
  .timer-indicator { left: auto; right: 100%; margin: 0 8px 0 0; text-align: right; }
}
@media (max-width: 500px) {
  .timers-overlay, .timer-alarm-overlay { padding: 12px 8px; }
  .timer-details, .timer-alarm-details { padding: 22px 16px; }
  .timer-presets button { min-width: 59px; padding: 8px; }
  .timer-custom label { margin-right: 6px; }
  .timer-custom input, .timer-custom select { width: 72px; }
  .timer-details .quiet-button { padding: 8px 10px; }
}