:root {
  --transition: all 0.2s ease;
}

body, html {
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
}

.jenna-sue {
  font-family: JennaSue;
}

section {
  position: relative;
}

.aad-header {
  padding: 0.5rem 0rem;
  position: sticky;
  top: 0px;
  z-index: 1010;
  background: white;
}
.aad-header .header-logo {
  flex: 0 0 150px;
}
.aad-header .header-logo img {
  width: 100%;
  height: auto;
}
@media (max-width: 992px) {
  .aad-header .header-logo {
    flex: 0 0 100px;
  }
}
.aad-header .header-items {
  display: flex;
  gap: 1rem;
  align-self: center;
}
.aad-header .header-items .header-item {
  display: flex;
  gap: 0.25rem;
  font-size: var(--step--1);
  color: var(--text-gray);
  align-items: center;
}
.aad-header .header-items .header-item img {
  width: 20px;
  height: auto;
}
.aad-header .header-items .header-dropdowm-item {
  position: relative;
  cursor: pointer;
  align-self: center;
}
.aad-header .header-items .header-dropdowm-item .arrow {
  --size: 6px;
  margin-bottom: 5px;
  margin-left: 3px;
}
.aad-header .header-items .header-dropdowm-item .dropdown-items {
  position: absolute;
  top: 100%;
  right: 50%;
  transform: translateX(50%);
  visibility: hidden;
  opacity: 0;
  background: white;
  border-radius: 0.5rem;
  border: 1px solid #a9a9a9;
  transition: var(--transition);
  overflow: hidden;
}
.aad-header .header-items .header-dropdowm-item .dropdown-items .dropdown-item {
  font-size: var(--step--1);
  padding: 0.375rem 0.75rem;
  transition: var(--transition);
}
.aad-header .header-items .header-dropdowm-item .dropdown-items .dropdown-item:hover {
  background: #eae9e9;
}
.aad-header .header-items .header-dropdowm-item:hover .arrow {
  transform: rotateZ(45deg);
  margin-bottom: 0px;
}
.aad-header .header-items .header-dropdowm-item:hover .dropdown-items {
  visibility: visible;
  opacity: 1;
}
.aad-header .header-user-profile {
  position: relative;
}
.aad-header .header-user-profile .profile-icon {
  --size: 40px;
  cursor: pointer;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
}
.aad-header .header-user-profile .profile-icon .no-login {
  width: 100%;
  height: 100%;
  background: var(--pantai-blue);
  color: white;
  display: grid;
  place-items: center;
}
.aad-header .header-user-profile .profile-icon .logined {
  width: 100%;
  height: 100%;
}
.aad-header .header-user-profile .profile-icon .logined img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.aad-header .header-user-profile .profile-icon .logined .question-count {
  position: absolute;
  background: var(--pantai-orange);
  color: white;
  border-radius: 50%;
  line-height: 1;
  height: 1.5em;
  width: auto;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  font-size: var(--step--2);
  top: -0.5em;
  right: -0.5em;
}
.aad-header .header-user-profile .profile-items {
  padding: 0.5rem 0.75rem;
  border: 1px solid #a9a9a9;
  font-size: var(--step--1);
  overflow: hidden;
  border-radius: 0.5rem;
  width: 250px;
}
.aad-header .header-user-profile .profile-items .user-profile-general .user-img {
  --size: 50px;
}
.aad-header .header-user-profile .profile-items .d-item {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  display: flex;
  gap: 0.75rem;
  cursor: pointer;
  transition: var(--transition);
  color: black;
}
.aad-header .header-user-profile .profile-items .d-item:hover {
  background: #f8f8f8;
}
.aad-header .header-user-profile .profile-items .d-item.active {
  background: #f8f8f8;
  color: var(--pantai-blue);
}
.aad-header .header-search {
  border-radius: 10em;
  border: 1px solid #a9a9a9;
  font-size: var(--step--1);
  padding: 0.5rem 0.75rem;
  align-self: center;
}
.aad-header .header-search .search-input {
  border: none;
  width: 75px;
}
.aad-header .header-search .search-input:focus-within {
  outline: none;
}
.aad-header .header-items-mobile {
  height: max-content;
}
.aad-header .header-items-mobile .header-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
}
.aad-header .header-items-mobile .header-item .header-search.mobile {
  padding: 0.25rem 0.5rem;
}
.aad-header .header-items-mobile .header-mobile-dropdown {
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0px;
  background: white;
  padding: 1rem 0.75rem;
}
.aad-header .header-items-mobile .header-mobile-dropdown .profile-items {
  background: rgba(48, 127, 222, 0.2);
  border: none;
  width: 100%;
}
.aad-header .header-items-mobile .header-mobile-dropdown .profile-items {
  font-size: var(--step-0);
}
.aad-header .burger-bar {
  font-size: 1.25rem;
}
.aad-header .header-mobile-dropdown {
  display: grid;
  visibility: hidden;
  opacity: 0;
  grid-template-rows: 0fr;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.2);
  transition: all 0.35s ease;
}
.aad-header .header-mobile-dropdown .header-user-profile {
  overflow: hidden;
}
.aad-header .header-mobile-dropdown.active {
  visibility: visible;
  opacity: 1;
  grid-template-rows: 1fr;
}
.aad-header .other-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0rem 0.5rem;
}
.aad-header .other-items .dropdown-items {
  padding: 0.75rem calc(16px + 0.5rem) 0rem;
}
.aad-header .other-items .dropdown-items > *:not(:last-child) {
  margin-bottom: 0.5rem;
}
.aad-header .other-items .header-item img {
  width: 16px;
}
.aad-header .other-items .header-item[aria-expanded=false] .arrow {
  transform: rotateZ(225deg);
}
.aad-header .other-items .header-item .arrow {
  --size: 6px;
  margin-top: -4px;
  margin-left: auto;
  transform: rotateZ(45deg);
}

#ask-doctor-banner .banner-facet {
  display: grid;
  color: var(--pantai-blue);
}
#ask-doctor-banner .banner-facet > * {
  grid-area: 1/1;
}
#ask-doctor-banner .banner-facet img {
  width: 100%;
}
#ask-doctor-banner .banner-facet .banner-header {
  font-size: calc(var(--step-5) * 2.5);
}
#ask-doctor-banner .banner-search-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  background: var(--pantai-blue);
  border-radius: 1rem;
  position: relative;
  height: 100%;
}
#ask-doctor-banner .banner-search-container .banner-search {
  --btn-height: 50px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
#ask-doctor-banner .banner-search-container .banner-search .search-bar {
  border-radius: 10em;
  border: 1px solid white;
  height: var(--btn-height);
  padding: 0px var(--space-xs);
  background: white;
  position: relative;
  place-content: center;
  flex-grow: 1;
  min-width: 265px;
}
#ask-doctor-banner .banner-search-container .banner-search .search-bar .search-input {
  border: none;
  width: 100%;
  padding-right: 2.5rem;
}
#ask-doctor-banner .banner-search-container .banner-search .search-bar .search-input::placeholder {
  color: #a9a9a9;
  font-weight: bold;
}
#ask-doctor-banner .banner-search-container .banner-search .search-bar .search-input:focus, #ask-doctor-banner .banner-search-container .banner-search .search-bar .search-input:focus-within {
  outline: none;
}
#ask-doctor-banner .banner-search-container .banner-search .search-bar .search-icon {
  --size: 40px;
  background: var(--pantai-light-blue);
  border-radius: 50%;
  position: absolute;
  right: 5px;
  top: 5px;
  color: white;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: var(--transition);
}
#ask-doctor-banner .banner-search-container .banner-search .search-bar .search-icon:hover {
  background: var(--pantai-light-blue-darker);
}
#ask-doctor-banner .banner-search-container .banner-search .ask-doctor-btn {
  display: flex;
  flex-grow: 1;
  border: 1px solid white;
  gap: 1rem;
  background: var(--pantai-yellow);
  height: var(--btn-height);
  justify-content: center;
  color: white;
  font-weight: bold;
  padding: var(--space-xs);
  border-radius: 10em;
  transition: var(--transition);
  cursor: pointer;
}
#ask-doctor-banner .banner-search-container .banner-search .ask-doctor-btn img {
  width: 24px;
  height: 24px;
}
#ask-doctor-banner .banner-search-container .banner-search .ask-doctor-btn:hover {
  background: var(--pantai-yellow-darker);
}
@media (max-width: 768px) {
  #ask-doctor-banner .banner-search-container {
    padding: 1rem;
  }
  #ask-doctor-banner .banner-search-container .banner-search {
    flex-direction: column;
    gap: 0.5rem;
  }
  #ask-doctor-banner .banner-search-container .banner-search .search-bar, #ask-doctor-banner .banner-search-container .banner-search .ask-doctor-btn {
    width: 100%;
  }
}

.top-view-question {
  background: #fcf5e2;
}

.asnwered-question {
  background: #f8f8f8;
}
.asnwered-question .video-item {
  cursor: pointer;
}

.question-item {
  border-radius: 1rem;
  padding: 1rem;
  background: white;
  margin-bottom: 1rem;
  transition: var(--transition);
}
.question-item .profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.question-item .profile .profile-img {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
}
.question-item .profile .profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.question-item .question-info .question-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.question-item .question-img {
  --size: 115px;
  border-radius: 0.5rem;
  overflow: hidden;
  width: var(--size);
  min-width: var(--size);
  height: var(--size);
}
.question-item .question-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.question-item .views img {
  width: 24px;
  height: 24px;
}
.question-item:hover {
  box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.2);
}
.question-item:nth-child(4n+1) .profile .profile-img .bg-white {
  background: #fe79d7 !important;
  color: white !important;
  font-size: var(--step-3);
}
.question-item:nth-child(4n+2) .profile .profile-img .bg-white {
  background: #ffbc29 !important;
  color: white !important;
  font-size: var(--step-3);
}
.question-item:nth-child(4n+3) .profile .profile-img .bg-white {
  background: #4cb748 !important;
  color: white !important;
  font-size: var(--step-3);
}
.question-item:nth-child(4n) .profile .profile-img .bg-white {
  background: #307fde !important;
  color: white !important;
  font-size: var(--step-3);
}

#top-viewed-questions-swiper {
  --swiper-theme-color: var(--pantai-blue);
  position: relative;
}
#top-viewed-questions-swiper .swiper-slide {
  height: auto;
}
#top-viewed-questions-swiper .swiper-slide:nth-child(3n-1) .main-question-item {
  --item-color: var(--pantai-pink);
}
#top-viewed-questions-swiper .swiper-slide:nth-child(3n) .main-question-item {
  --item-color: var(--pantai-green);
}
#top-viewed-questions-swiper .swiper-pagination .swiper-pagination-bullet {
  border: 1px solid var(--swiper-theme-color);
  background: none;
  opacity: 1;
}
#top-viewed-questions-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--swiper-theme-color);
}
#top-viewed-questions-swiper .swiper-button-prev, #top-viewed-questions-swiper .swiper-button-next {
  --size: 45px;
  --swiper-navigation-size: 20px;
  color: gray;
  background: white;
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-content: center;
  box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.2);
}
#top-viewed-questions-swiper .swiper-button-prev {
  left: calc(var(--size) / 2 * -1);
}
#top-viewed-questions-swiper .swiper-button-next {
  right: calc(var(--size) / 2 * -1);
}

.dashboard-panel {
  padding: 1rem;
  border-radius: 1rem;
  background: white;
}
.dashboard-panel .user-profile {
  display: flex;
  gap: 0.5rem;
}
.dashboard-panel .user-profile .user-img {
  --size: 64px;
  overflow: hidden;
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  min-width: var(--size);
}
.dashboard-panel .user-profile .user-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dashboard-panel .user-profile .email {
  word-break: break-all;
}
.dashboard-panel .d-item-collapse {
  border-radius: 0.5rem;
  overflow: hidden;
}
.dashboard-panel .d-item-collapse.active {
  background: #f8f8f8;
}
.dashboard-panel .d-item-collapse.active .d-item {
  color: var(--pantai-blue);
}
.dashboard-panel .d-item-collapse .inner-items {
  display: flex;
  gap: 0.75rem;
  flex-direction: column;
  padding: 0.5rem calc(1rem + 15.14px + 0.75rem);
}
.dashboard-panel .d-item-collapse .inner-items .item {
  transition: var(--transition);
}
.dashboard-panel .d-item-collapse .inner-items .item:hover {
  color: var(--pantai-blue);
}
.dashboard-panel .d-item-collapse .inner-items .item.active {
  color: var(--pantai-blue);
}
.dashboard-panel .d-item-collapse .d-item {
  position: relative;
}
.dashboard-panel .d-item-collapse .d-item .arrow {
  --size: 6px;
  --border: 0.15em solid #A9A9A9;
  position: absolute;
  margin-top: 5px;
  right: 1rem;
}
.dashboard-panel .d-item-collapse .d-item[aria-expanded=true] .arrow {
  transform: rotateZ(45deg);
  margin-top: 8px;
}
.dashboard-panel .d-item {
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  gap: 0.75rem;
  cursor: pointer;
  transition: var(--transition);
}
.dashboard-panel .d-item:hover {
  background: #f8f8f8;
}
.dashboard-panel .d-item.active {
  background: #f8f8f8;
  color: var(--pantai-blue);
}

.nav-items-container {
  position: relative;
}
.nav-items-container .nav-items-listing {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid #a9a9a9;
}
.nav-items-container .nav-items-listing .nav-item {
  font-weight: bold;
  color: #A9A9A9;
  margin-bottom: 1rem;
  padding: 0rem 0.5rem;
  cursor: pointer;
}
.nav-items-container .nav-items-listing .nav-item.active {
  color: var(--pantai-blue);
}
.nav-items-container .selected-line {
  position: absolute;
  bottom: 2.5px;
  height: 4px;
  background: var(--pantai-blue);
  border-radius: 10em;
  transition: var(--transition);
}

#large-search-section .search-bar {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  background: white;
  border-radius: 10em;
  padding: 1rem 1.5rem;
  align-items: center;
  color: #a9a9a9;
  border: 2px solid white;
}
#large-search-section .search-bar .search-icon {
  font-size: 1.25rem;
}
#large-search-section .search-bar .search-input {
  border: none;
  font-weight: bold;
  color: inherit;
  width: 100%;
}
#large-search-section .search-bar .search-input:focus-within {
  outline: none;
}
#large-search-section .search-bar .search-input::placeholder {
  color: inherit;
}

#category-listing-container .category-listing {
  display: flex;
  gap: 1.5rem;
}
#category-listing-container .category-listing .filter-alpha {
  background: var(--pantai-blue);
  color: white;
  padding: 0.25rem;
  border-radius: 10em;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: start;
}
#category-listing-container .category-listing .filter-alpha .alpha {
  padding: 0.25rem;
  line-height: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: var(--transition);
  cursor: pointer;
}
#category-listing-container .category-listing .filter-alpha .alpha:hover, #category-listing-container .category-listing .filter-alpha .alpha.active {
  background: var(--pantai-light-blue);
}
#category-listing-container .filter-listing {
  flex-grow: 1;
}
#category-listing-container .filter-listing .listing-item {
  padding-bottom: 1.5rem;
}
#category-listing-container .filter-listing .listing-item .item-title {
  padding-left: 1em;
}
#category-listing-container .filter-listing .listing-item:not(:last-child) {
  border-bottom: 1px solid #a9a9a9;
  margin-bottom: 1.5rem;
}

.question-table-container .question-list-table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0rem 1rem;
}
.question-table-container .question-list-table .table-row {
  display: table-row;
  text-decoration: none;
  color: inherit;
  background: white;
  overflow: hidden;
  border-radius: 0.5rem;
}
.question-table-container .question-list-table .table-row.main {
  font-size: var(--step--1);
  font-weight: bold;
}
.question-table-container .question-list-table .table-row.main .table-cell {
  white-space: nowrap;
}
.question-table-container .question-list-table .table-cell {
  display: table-cell;
  padding: 0.75rem 1rem;
  vertical-align: middle;
}
.question-table-container .question-list-table .table-row:not(.main) .table-cell:first-child {
  font-weight: bold;
  color: var(--pantai-blue);
}
.question-table-container .question-list-table .table-row:not(.main):hover {
  background: #eaf2fd;
}
.question-table-container .status-btn {
  width: max-content;
}

.user-profile-general {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.user-profile-general .user-img {
  --size: 64px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
}
.user-profile-general .user-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-question-item {
  --item-color: var(--pantai-blue);
  background: var(--item-color);
  padding: 1.5rem 1.5rem 5rem;
  border-radius: 1rem;
  position: relative;
  height: 100%;
}
.main-question-item .user-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.main-question-item .user-profile .user-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid white;
}
.main-question-item .user-profile .user-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-question-item .user-profile .user-info {
  color: white;
}
.main-question-item p, .main-question-item a {
  color: white;
}
.main-question-item .question-btn-container {
  position: absolute;
  background: #fcf5e2;
  padding-left: 0.75rem;
  padding-top: 0.75rem;
  bottom: 0px;
  right: 0px;
  border-top-left-radius: 2rem;
}
.main-question-item .question-btn-container .question-btn {
  background: var(--item-color);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  padding: 1rem;
  color: white;
  display: grid;
  place-items: center;
  transition: var(--transition);
}
.main-question-item .question-btn-container .inverted-br {
  position: absolute;
}
.main-question-item .question-btn-container .inverted-br.btm-left {
  transform: rotateZ(-180deg);
  left: 0px;
}
.main-question-item .question-btn-container .inverted-br.top-right {
  transform: rotateX(180deg) rotateY(180deg);
  top: 0px;
  right: 0px;
}
.main-question-item .question-btn-container .inverted-br::before {
  --br-size: 30px;
  content: "";
  position: absolute;
  background-color: var(--item-color);
  bottom: calc(var(--br-size) * -1);
  height: var(--br-size);
  width: calc(var(--br-size) / 2);
  border-top-left-radius: calc(var(--br-size) / 2);
  box-shadow: 0 calc(var(--br-size) / 2 * -1) 0 0 #fcf5e2; /* This is where the magic happens! */
}
.main-question-item:hover .question-btn {
  transform: rotateZ(45deg);
}

.spec-btn {
  border-radius: 10em;
  text-decoration: none;
  color: #6D6F71;
  background: white;
  border: 1px solid white;
  padding: 0.25em 1em;
  transition: var(--transition);
  cursor: pointer;
}
.spec-btn.lightgray {
  background: #f8f8f8;
  font-weight: bold;
}
.spec-btn.invert, .spec-btn.trans {
  background: transparent;
}
.spec-btn.spec {
  color: white;
}
.spec-btn.small {
  font-size: var(--step--1);
  border: 1px solid #6D6F71;
}
.spec-btn:hover {
  background: #eceff0;
}
.spec-btn:hover.invert.spec {
  background: white;
  color: #6D6F71;
}

.doctor-profile-long {
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid #a9a9a9;
  display: flex;
}
.doctor-profile-long .doc-img {
  flex: 0 0 35%;
}
.doctor-profile-long .doc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-item-long {
  background: white;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 0.5rem;
  border: 1px solid #d3d3d3;
  transition: var(--transition);
}
.video-item-long .video-long-title {
  line-height: 1;
}
.video-item-long .desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.video-item-long .video-img {
  flex: 0 0 150px;
  border-radius: 0.375rem;
  overflow: hidden;
}
.video-item-long .video-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .video-item-long .video-img {
    flex: 0 0 120px;
  }
}
.video-item-long:hover {
  border-color: gray;
  box-shadow: 2px 2px 10px 2px rgba(128, 128, 128, 0.2);
}
@media (max-width: 768px) {
  .video-item-long {
    padding: 0.75rem;
  }
}

.login-form {
  padding: 2rem 2rem 2.5rem;
  border-radius: 1rem;
  background: white;
}
.login-form input:not([type=checkbox]) {
  width: 100%;
  background: transparent;
  border-radius: 0.25rem;
  border: 2px solid #d4d4d4;
  padding: 0.5rem 0.75rem;
}
.login-form input:not([type=checkbox])::placeholder {
  color: #b4b4b4;
}
.login-form .password-wrapper {
  position: relative;
}
.login-form .password-wrapper .password-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  font-size: 1.25rem;
  transform: translateY(-50%);
  color: #a9a9a9;
  cursor: pointer;
}
.login-form .password-wrapper .password-icon > * {
  transition: var(--transition);
}
.login-form .password-wrapper .password-icon:hover {
  color: black;
}
.login-form .social-btns {
  display: flex;
  gap: 0.75rem;
}
.login-form .social-btns .social-btn {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: bold;
  border-radius: 10em;
  border: 1px solid #a9a9a9;
  padding: 0.75rem 1rem;
  flex-grow: 1;
  transition: var(--transition);
}
.login-form .social-btns .social-btn img {
  width: auto;
  height: 30px;
}
.login-form .social-btns .social-btn:hover {
  background: #f8f8f8;
}

.post-question .select2-container--default {
  width: 100% !important;
}
.post-question .select2-container--default .select2-selection--multiple {
  padding: 0rem;
  padding: 0.5rem;
  border: 2px solid #d4d4d4;
  min-height: 2.65rem;
}
.post-question .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-left: 0rem !important;
  margin-bottom: 0rem;
}
.post-question .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  border: 1px solid #a9a9a9;
  margin: 0rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 10em;
  background: white;
}
.post-question .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  position: relative;
  padding: 0rem;
  border: none !important;
  border-radius: 50%;
  background: #e4e2e2;
  margin: 0rem;
  padding: 0.25em;
}
.post-question .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span {
  line-height: 1;
  width: 8.8px;
  height: 8.8px;
  display: grid;
  place-content: center;
  font-size: 14px;
}
.post-question .select2-container--default .select2-search--inline {
  display: none;
}

.default-btn {
  border-radius: 10em;
  color: white;
  font-weight: bold;
  background: var(--pantai-blue);
  padding: 0.75rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.default-btn:hover {
  background: var(--pantai-blue-darker);
}
.default-btn.yellow {
  background: #ffbc29;
}
.default-btn.green {
  background: #4cb748;
}
@media (max-width: 768px) {
  .default-btn {
    width: 100%;
  }
  .default-btn.align-right {
    margin-right: unset;
    width: max-content;
  }
  .default-btn.align-left {
    margin-left: unset;
    width: max-content;
  }
}

.or-text-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.or-text-wrapper .line {
  height: 1px;
  width: 100%;
  background: var(--text-gray);
}

.general-input {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 2px solid #d4d4d4;
}
.general-input.select {
  padding: 0.44rem 0.5rem;
}
.general-input.textarea {
  resize: none;
}

.grid-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  .grid-row-3 {
    gap: 1.25rem 0.75rem;
  }
}

.data-item {
  border-radius: 1rem;
  text-align: center;
  font-weight: bold;
  padding: 2rem;
  color: white;
}
@media (max-width: 768px) {
  .data-item {
    padding: 1rem;
  }
}
.data-item .title {
  line-height: 1em;
  font-size: calc(var(--step-5) * 1.5);
  margin-bottom: 0.5rem;
}
.data-item.main {
  background: white;
  color: #6d6f71;
}
.data-item.main .title {
  color: var(--pantai-blue);
}
.data-item.yellow {
  background: #ffbc29;
}
.data-item.lightblue {
  background: #00b4eb;
}
.data-item.orange {
  background: #ff6c37;
}
.data-item.pink {
  background: #fe79d7;
}
.data-item.green {
  background: #4cb748;
}
.data-item.gray {
  background: #a9a9a9;
}
.data-item.blue {
  background: #307fed;
}
.data-item.lightgreen {
  background: #89dc65;
}
.data-item.purple {
  background: #9c79fe;
}
.data-item.red {
  background: #ff4537;
}
.data-item.middle-blue {
  background: #2295e5;
}
.data-item.middle-green {
  background: #69c356;
}

.status-btn {
  --color: var(--pantai-blue);
  font-size: var(--step--2);
  background: rgba(48, 127, 237, 0.1019607843);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  border: 1px solid var(--color);
  color: var(--color);
  font-weight: bold;
  width: max-content;
}
.status-btn.new {
  --color: var(--pantai-yellow);
  background: rgba(255, 188, 41, 0.1019607843);
}
.status-btn.answered {
  --color: var(--pantai-green);
  background: rgba(76, 183, 72, 0.1019607843);
}
.status-btn.pending {
  --color: var(--pantai-pink);
  background: rgba(254, 121, 215, 0.1019607843);
}
.status-btn.rejected {
  --color: var(--text-gray);
  background: rgba(109, 111, 113, 0.1019607843);
}
.status-btn.unassigned {
  --color: var(--text-gray);
  background: #ffdecb;
}

.bg-f3f3f3 {
  background: #f3f3f3;
}

.bg-f8f8f8 {
  background: #f8f8f8;
}

.bg-fcf5e2 {
  background: #fcf5e2;
}

div[contenteditable] {
  min-height: 5rem;
}

.arrow {
  --size: 12px;
  --border: 0.2em solid #A9A9A9;
  padding: calc(var(--size) / 2);
  border-left: var(--border);
  border-top: var(--border);
  transition: var(--transition);
}
.arrow.up {
  transform: rotateZ(45deg);
}
.arrow.down {
  transform: rotateZ(225deg);
}
.arrow.left {
  transform: rotateZ(-45deg);
}
.arrow.right {
  transform: rotateZ(135deg);
}

.pagination-button {
  display: flex;
  justify-content: end;
  gap: 1rem;
  color: #A9A9A9;
  font-weight: bold;
  align-items: center;
}
.pagination-button .pagination-numbers {
  display: flex;
  gap: 0.25rem;
}
.pagination-button .pagination-numbers .number {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pagination-button .pagination-numbers .number:hover {
  background: rgba(48, 127, 222, 0.2);
}
.pagination-button .pagination-numbers .number.active {
  background: var(--pantai-blue);
  color: white;
}
.pagination-button .arrow {
  cursor: pointer;
}
.pagination-button .arrow:hover {
  border-color: gray;
}
@media (max-width: 768px) {
  .pagination-button {
    justify-content: center;
  }
}

.copy-btn {
  --color: var(--pantai-blue);
  cursor: pointer;
  border: 1.5px solid var(--color);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  width: max-content;
  color: var(--color);
  transition: var(--transition);
}
.copy-btn:hover {
  background: rgba(48, 127, 222, 0.05);
}

.action-btn {
  --color: var(--pantai-blue);
  display: flex;
  gap: 0.5rem;
  border: 2px solid var(--color);
  background: var(--color);
  color: white;
  border-radius: 10em;
  padding: 0.75em 1em;
  align-items: center;
  line-height: 1;
  font-weight: bold;
  transition: var(--transition);
  cursor: pointer;
}
.action-btn.reject {
  --color: #FF6C37;
}
.action-btn.save {
  --color: var(--pantai-blue);
}
.action-btn.publish {
  --color: var(--pantai-green);
}
.action-btn.send-doctor {
  --color: var(--pantai-light-blue);
}
.action-btn.send-contact-centre {
  --color: #ffbc29;
}
.action-btn.resend-doctor {
  --color: var(--text-gray);
}
.action-btn.reverse {
  background: white;
  color: var(--color);
}
.action-btn.reverse:hover {
  background: var(--color);
  color: white;
}

.horizontal-see-more {
  --color: var(--pantai-blue);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--color);
}
.horizontal-see-more .text {
  color: var(--color);
  font-weight: bold;
  text-wrap: nowrap;
  transition: var(--transition);
}
.horizontal-see-more::before {
  content: "";
  height: 1.5px;
  display: block;
  flex-grow: 1;
  background: var(--color);
}
.horizontal-see-more:hover .text {
  transform: translateX(5px);
}

.edit-profile .user-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  font-size: calc(var(--step-5) * 2);
}
@media (max-width: 768px) {
  .edit-profile .user-image {
    max-width: 200px;
    margin: 0rem auto 2rem;
  }
}

@media (max-width: 992px) {
  #floating-image {
    bottom: 1rem;
  }
}
#videoModal {
  background: rgba(0, 0, 0, 0.8);
}
#videoModal .modal-body {
  /* Track */
  /* Handle */
}
#videoModal .modal-body::-webkit-scrollbar {
  width: 5px;
}
#videoModal .modal-body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#videoModal .modal-body::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #32c2ee;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
#videoModal .modal-content {
  background: transparent;
  border: none;
  border-radius: 0px;
}
#videoModal .modal-content .modal-header {
  border: none;
}
#videoModal .modal-content .btn-close {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(267deg) brightness(107%) contrast(102%);
}
#videoModal .modal-content iframe {
  margin: 0px !important;
}

.doctor-btn {
  --color: var(--text-gray);
  background: white;
  color: var(--color);
  border: 1px solid var(--color);
  padding: 0.5rem 1rem;
  border-radius: 10em;
  font-weight: bold;
  transition: var(--transition);
  cursor: pointer;
}
.doctor-btn:hover {
  background: #f8f8f8;
}
.doctor-btn.active {
  background: var(--color);
  color: white;
}

.question-table-container {
  overflow: auto;
  cursor: grab;
}

.question-table-container:active {
  cursor: grabbing;
}

.select2 .default-dropdown-select {
  padding-right: 35px;
}