.time-picker {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 3px;
  width: 318px; }
  .time-picker .info {
    display: flex;
    padding: 15px;
    width: 100%;
    height: 63px;
    align-items: center; }
    .time-picker .info span {
      border: 1px solid #dce0e0;
      padding: 10px;
      line-height: 0.78;
      cursor: pointer; }
  .time-picker .info:first-child {
    border-bottom: 1px solid #dce0e0;
    font-size: 18px;
    justify-content: center; }
  .time-picker .info:last-child {
    justify-content: flex-end;
    border-top: 1px solid #dce0e0; }

.time-picker-container {
  height: 333px;
  background-color: #fff;
  display: flex;
  text-align: center; }
  .time-picker-container .columns {
    width: 50%;
    overflow-y: scroll;
    margin: 0;
    padding: 0; }
    .time-picker-container .columns .id {
      color: gray; }
    .time-picker-container .columns li {
      list-style: none;
      padding: 15px; }
    .time-picker-container .columns li:hover:not(.id):not(.disabled) {
      background-color: rgba(155, 89, 182, 0.4);
      color: #fff;
      cursor: pointer; }
    .time-picker-container .columns li.active {
      background-color: rgba(155, 89, 182, 0.6);
      color: #fff; }
    .time-picker-container .columns li.disabled {
      color: #cacccd;
      cursor: default; }
  .time-picker-container .columns:first-child {
    border-right: 1px solid #dce0e0; }

@media only screen and (max-width: 767px) and (orientation: landscape) {
  .time-picker-container {
    height: 180px; }
  .time-picker .info {
    height: 50px; } }