/* Keep the optional third break type on the same row at every viewport. */
html body .rm-time-clock-break-title {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}
html body #rmTimeClockBreakTypeOptions {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: stretch !important;
  width: 100% !important;
}
html body .rm-time-clock-break-remaining { grid-column: 2; grid-row: 1; }
html body :is(.rm-time-clock-break-type-options,.top-manager-time-clock-type-toggle) {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: minmax(0,1fr) !important;
  width: 264px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  border: 1px solid #425671 !important;
  background: #102035 !important;
  box-shadow: none !important;
}
html body :is(#rmTimeClockBreakTypeOptions,.top-manager-time-clock-type-toggle) > button {
  min-width: 0 !important;
  width: 100% !important;
  height: 36px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  border-radius: 5px !important;
  border: 0 !important;
  background: transparent !important;
  color: #dce7f7 !important;
  -webkit-text-fill-color: #dce7f7 !important;
}
html[data-theme="light"] body :is(#rmTimeClockBreakTypeOptions,.top-manager-time-clock-type-toggle) { background: #edf3fa !important; border-color: #c6d5e6 !important; }
html[data-theme="light"] body :is(#rmTimeClockBreakTypeOptions,.top-manager-time-clock-type-toggle) > button:not(.active) { color: #34465e !important; -webkit-text-fill-color: #34465e !important; }
html body :is(.rm-time-clock-break-type-options,.top-manager-time-clock-type-toggle) > .hide { display: none !important; }
html body :is(#rmTimeClockBreakTypeOptions,.top-manager-time-clock-type-toggle) > button.active {
  background: #1259b5 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.store-restroom-setting {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  cursor: pointer;
}
.store-restroom-setting small { display: block; margin-top: 5px; font-weight: 400; letter-spacing: 0; }
#adminRestroomBreakEnabled {
  appearance: none !important;
  flex: 0 0 44px;
  width: 44px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 1px solid #718096 !important;
  border-radius: 999px !important;
  background: #64748b !important;
  position: relative;
  cursor: pointer;
  margin: 0;
}
#adminRestroomBreakEnabled::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
}
html body #adminLoginStoreFormOverlay input#adminRestroomBreakEnabled { background: #64748b !important; border-color: #64748b !important; box-shadow: none !important; }
html body #adminLoginStoreFormOverlay input#adminRestroomBreakEnabled:checked { background: #1259b5 !important; border-color: #1259b5 !important; }
#adminRestroomBreakEnabled:checked::after { transform: translateX(18px); }
#adminRestroomBreakEnabled:disabled { cursor: default; opacity: .6; }
html body :is(#adminRestroomBreakEnabled,.rm-time-clock-break-type-option,.top-manager-time-clock-type-toggle > button):focus-visible { outline: 2px solid #1683ff; outline-offset: 3px; }