.input {
  width: 100%;
  border: 1px solid var(--lotus-pink);
  border-radius: 2px;
  background: #f8f8f8;
}
.input input {
  width: 100%;
  border: 0 none;
  border-color: transparent;
  outline: transparent;
  padding: 5px;
}

.alert-bg-red {
  background: var(--alert-red-bg);
  color: var(--alert-red-color);
}

.alert-bg-disabled {
  background: var(--alert-disabled-bg);
  color: var(--alert-disabled-color);
}
.alert-bg-green {
  background: var(--alert-green-bg);
  color: var(--alert-green-color);
}

.time-box.alert-bg-green {
  cursor: pointer;
}
.time-box.alert-bg-red,
.time-box.alert-bg-disabled {
  cursor: not-allowed;
}
/* .time-box.alert-bg-red:hover {
  background: var(--alert-red-bg-hover);
} */
.time-box.alert-bg-green:hover {
  background: var(--alert-green-bg-hover);
}

.time-box input[type="radio"] {
  display: none;
}

.tt-btn {
  cursor: pointer;
}
.input-group-text {
  background-color: #b5aeac;
  color: #fff;
}

.time-box {
  position: relative;
}
.time-box.selected::before {
  font-family: FontAwesome;
  content: "\f00c";
  display: block;
  position: absolute;
  top: -4px;
  right: 4px;
  width: 10px;
  height: 10px;
  z-index: 10;
}
.dot-wrapper {
  position: relative;
  z-index: 5;
}
.dot {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  display: inline-block;
  cursor: pointer;
  font-size: 18px;
}
.dot-red {
  background: var(--alert-red-bg);
  border: 1px solid var(--alert-red-color);
}
.dot-disabled {
  background: var(--alert-disabled-bg);
  border: 1px solid var(--alert-disabled-color);
}
.dot-green {
  background: var(--alert-green-bg);
  border: 1px solid var(--alert-green-color);
}
.fa-lg {
  font-size: 18px;
  vertical-align: 1px;
  color: #957cca;
}

.month-bg-gray-1 {
  background: #f8f8f8;
}

.month-bg-gray-2 {
  background: #f4f4f4;
}