/* Aplikasi Jam */

.clockapp {
  --grouped: #000;
  --bg: #000;
  --card: #1c1c1e;
  --text: #fff;
  --sep: rgba(84, 84, 88, 0.6);
  --fill: #2c2c2e;
  --bar: rgba(22, 22, 22, 0.94);
  background: #000;
  color: #fff;
}
.clockapp .nav-head {
  background: #000;
}
.clockapp .tabbar button.on {
  color: #ff9f0a;
}
.wc,
.al {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--sep);
}
.wc small,
.al small {
  display: block;
  color: #98989f;
  font-size: 14px;
}
.wc b {
  font-size: 24px;
  font-weight: 400;
}
.wc-t {
  font-size: 54px;
  font-weight: 200;
  font-feature-settings: "tnum";
}
.al b {
  font-size: 54px;
  font-weight: 200;
  display: block;
  line-height: 1.1;
}
.al.off b,
.al.off small {
  color: #636366;
}
.sw,
.tm {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  min-height: 0;
}
.sw-time {
  font-size: 80px;
  font-weight: 200;
  font-feature-settings: "tnum";
  letter-spacing: -1px;
}
.sw-btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 40px 18px 18px;
}
.cb {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  font-size: 16px;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px currentColor;
}
.cb.gray {
  background: #333;
  color: #fff;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #333;
}
.cb.green {
  background: #0a3a1a;
  color: #30d158;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #0a3a1a;
}
.cb.red {
  background: #3a0f0d;
  color: #ff453a;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #3a0f0d;
}
.cb.orange {
  background: #3a2508;
  color: #ff9f0a;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #3a2508;
}
.sw-laps {
  width: 100%;
  border-top: 0.5px solid var(--sep);
}
.sw-laps div {
  display: flex;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 0.5px solid var(--sep);
  font-feature-settings: "tnum";
}
.tm {
  padding-top: 70px;
}
.tm-ring {
  position: relative;
  width: 270px;
  height: 270px;
}
.tm-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.tm-ring circle {
  fill: none;
  stroke: #333;
  stroke-width: 3;
}
.tm-ring .tm-prog {
  stroke: #ff9f0a;
  stroke-dasharray: 283;
  stroke-linecap: round;
}
.tm-left {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 60px;
  font-weight: 200;
  font-feature-settings: "tnum";
}
.tm-pick {
  display: flex;
  gap: 20px;
  margin: 60px 0;
}
.tm-pick label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 18px;
}
.tm-pick input {
  width: 96px;
  font-size: 56px;
  font-weight: 200;
  text-align: center;
  background: #1c1c1e;
  border: 0;
  border-radius: 14px;
  color: #fff;
  padding: 6px;
  outline: none;
}