.ar-date-calendar > .clock > .content {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.ar-date-calendar > .clock > .content > ul {
  width: 50%;
  overflow-y: auto;
  scrollbar-width: none;
}
.ar-date-calendar > .clock > .content > ul:nth-child(2) {
  border-left: solid 1px var(--gray-200);
}
.ar-date-calendar > .clock > .content > ul::-webkit-scrollbar {
  display: none;
}
.ar-date-calendar > .clock > .content > ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  cursor: pointer;
}
.ar-date-calendar > .clock > .content > ul > li > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: var(--input-height);
  cursor: pointer;
}
.ar-date-calendar > .clock > .content > ul > li > span > span {
  display: grid;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 75%;
  border-radius: var(--border-radius-sm);
}
.ar-date-picker > .calendar-wrapper > .clock > .content > ul > li:not(.selection-time) > span > span:hover {
  background-color: var(--gray-200);
  color: var(--gray-700);
}
.ar-date-calendar > .clock > .content > ul > li.selection-time > span > span {
  background-color: var(--success);
  color: var(--white);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success);
}