:root {
  --arrow-time: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8572 0.624739C11.785 0.484576 11.6881 0.361283 11.5721 0.261937C11.3392 0.0623631 11.0432 -0.0289142 10.7486 0.00805262C10.4541 0.0450195 10.185 0.207225 10.0001 0.459219L4.45039 8.06843C4.38941 8.15282 4.30037 8.2078 4.20246 8.22153C4.10455 8.23525 4.0056 8.20662 3.92692 8.1418L1.81202 6.36626C1.57572 6.16821 1.27673 6.08031 0.980807 6.1219C0.684889 6.16348 0.416288 6.33114 0.234093 6.588C0.0518977 6.84485 -0.0289662 7.16986 0.00928943 7.49153C0.047545 7.81319 0.201787 8.10516 0.438083 8.30321L3.11846 10.5516C3.32222 10.7294 3.55796 10.8589 3.81053 10.9318C4.06309 11.0047 4.32688 11.0194 4.58497 10.9748C4.84305 10.9303 5.0897 10.8276 5.30909 10.6732C5.52847 10.5189 5.71573 10.3164 5.85882 10.0787L11.7565 1.97878C11.8484 1.85302 11.9166 1.70877 11.9571 1.55431C11.9976 1.39985 12.0096 1.23822 11.9924 1.0787C11.9753 0.919173 11.9293 0.764901 11.8572 0.624739Z' fill='%231E95D3'/%3E%3C/svg%3E%0A");
}

.time-hour,
.time-minute {
  align-items: center;
  color: var(--gray-800);
  display: flex;
  font-size: 14px;
  justify-content: center;
  margin: 3px 0;
  min-height: 34px;
  min-width: 160px;
  position: relative;
}

.time-minute {
  min-width: 60px;
}

.time-hour.active,
.time-minute.active {
  background-color: var(--cyan-200);
  border-radius: 8px;
  color: var(--light-blue);
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
}

.time-hour.active::before {
  content: var(--arrow-time);
  position: absolute;
  right: 18px;
  top: 2px;
}