section.doctor-details {
  background-color: #f8f8f8;
}
section.doctor-details .doctor-details-inner .doctor-details-top {
  display: flex;
  gap: var(--space-m);
}
@media screen and (width < 768px) {
  section.doctor-details .doctor-details-inner .doctor-details-top {
    flex-wrap: wrap;
  }
  section.doctor-details .doctor-details-inner .doctor-details-top .doctor-basic {
    flex: 1 0 100%;
  }
}
section.doctor-details .doctor-details-inner .doctor-details-top .doctor-image {
  flex: 0 0 17.5%;
  aspect-ratio: 5/6;
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (width < 768px) {
  section.doctor-details .doctor-details-inner .doctor-details-top .doctor-image {
    flex: 0 0 55%;
    margin: auto;
  }
}
section.doctor-details .doctor-details-inner .doctor-details-top .doctor-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.doctor-details .doctor-details-inner .doctor-tag {
  background-color: var(--pantai-light-blue);
  color: white;
  border-radius: 3rem;
  display: inline-block;
  font-size: var(--step--1);
  padding: 0.15rem var(--space-xs);
}
section.doctor-details .doctor-details-inner .doctor-details-sections {
  background-color: white;
  padding: var(--space-m);
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (width < 768px) {
  section.doctor-details .doctor-details-inner .doctor-details-sections {
    padding: var(--space-s);
  }
}
section.doctor-details .doctor-details-inner .doctor-details-item-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
section.doctor-details .doctor-details-inner .doctor-details-item {
  flex: 0 0 calc(50% - var(--space-s) / 2);
}
@media screen and (width < 768px) {
  section.doctor-details .doctor-details-inner .doctor-details-item {
    flex: 0 0 100%;
  }
}
section.doctor-details .doctor-details-inner .doctor-details-item .doctor-details-item-title {
  font-weight: bold;
  color: var(--pantai-blue);
  line-height: 1.6;
}
section.doctor-details .doctor-details-inner .doctor-details-opd-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
section.doctor-details .doctor-details-inner .doctor-details-opd-item {
  flex: 0 0 calc(25% - var(--space-s) * 3 / 4);
  background-color: #ffa787;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: var(--space-2xs) var(--space-3xs);
  border: 2px solid #ffa787;
  cursor: pointer;
}
@media screen and (width >= 1400px) {
  section.doctor-details .doctor-details-inner .doctor-details-opd-item {
    flex: 0 0 calc(20% - var(--space-s) * 4 / 5);
  }
}
@media screen and (width < 992px) {
  section.doctor-details .doctor-details-inner .doctor-details-opd-item {
    flex: 0 0 calc(33.3333333333% - var(--space-s) * 2 / 3);
  }
}
@media screen and (width < 768px) {
  section.doctor-details .doctor-details-inner .doctor-details-opd-item {
    flex: 0 0 calc(50% - var(--space-s) * 1 / 2);
  }
}
section.doctor-details .doctor-details-inner .doctor-details-opd-item:not(.disabled):hover {
  background-color: #f59e7e;
}
section.doctor-details .doctor-details-inner .doctor-details-opd-item.closed {
  background-color: white;
  color: #ffa787;
  cursor: not-allowed;
}
section.doctor-details .doctor-details-inner .doctor-details-opd-item.closed:not(.disabled):hover {
  background-color: #fff6f2;
}
section.doctor-details .doctor-details-inner .doctor-details-opd-item.disabled {
  cursor: auto;
}
section.doctor-details .doctor-profile-location .default-button {
  cursor: pointer;
  background-color: var(--pantai-green);
  padding: var(--space-2xs);
  transition: all 0.12s ease;
}
section.doctor-details .doctor-profile-location .default-button.ehealth-button {
  background-color: var(--pantai-blue);
}
section.doctor-details .doctor-profile-location .default-button.ehealth-button:hover {
  background-color: var(--pantai-blue-darker);
}
section.doctor-details .doctor-profile-location .btn-view-clinical-hours {
  filter: grayscale(0.65);
}
section.doctor-details .doctor-profile-location .btn-view-clinical-hours.active {
  filter: grayscale(0);
}
section.doctor-details .doctor-profile-location .btn-view-clinical-hours:hover {
  background-color: var(--pantai-green-darker);
}/*# sourceMappingURL=doctor-details.css.map */