.customInputContainer {
  width: 20rem;
  display: flex;
  max-width: 20rem;
  margin-right: 2rem;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  z-index: 999;
}

.customInputContainer .customInput {
  margin: 0 1rem;
  cursor: pointer;
  user-select: none;
  font-size: 1.16rem;
  justify-content: space-between;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
}

.customInputContainer .customInput i {
  transition: transform 0.3s ease-in-out;
}

.customInputContainer.show .customInput i {
  transform: rotate(90deg);
}

.customInputContainer :is(.customInput, .options) {
  width: 100%;
  display: flex;
/*  color: #202020;*/
  background: #fff;
  align-items: center;
/*  border-radius: 0.3rem;*/
  border-radius: 10px;
  position: absolute;
  top: 0;
  margin-top: 5px;
}

.customInputContainer .options {
  display: none;
  padding: 0.6rem;
  font-size: 1.1rem;
  justify-content: start;
  flex-direction: column;
  margin: 0.8rem 1rem 0rem 1rem;
  transition: background-color 0.1s ease-in-out;
}

.customInputContainer.show .options {
  display: block;
/*  top: 85%;*/
  top: 0;
}

/*.customInputContainer.hide .options {
  display: none;
}*/

.customInputContainer .options :is(.searchInput, ul) {
  width: 100%;
  max-height: 15rem;
  overflow-y: scroll;
  position: relative;
  padding-left: 0;
}

.customInputContainer .options ul::-webkit-scrollbar {
  width: 6px;
  position: relative;
}

.customInputContainer .options ul::-webkit-scrollbar-track{
    width: 2px;
    border-radius: .2rem;
    background: rgb(0 0 0 / 10%)
}

.customInputContainer .options ul::-webkit-scrollbar-thumb{
    border-radius: .2rem;
    background: rgb(0 0 0 / 30%);
}

.customInputContainer .options .searchInput {
  display: flex;
  padding: 0 0.4rem;
  overflow-y: auto;
  align-items: center;
  border-radius: 0.4rem;
  color: rgb(0 0 0 / 50%);
  border: 2px solid rgb(0 0 0 / 30%);
}

.customInputContainer .options .searchInput.focus {
  border: 2px solid rgb(52 211 153 / 70%);
}

.customInputContainer .options .searchInput input[type="text"] {
  border: 0;
  width: 100%;
  outline: none;
  height: 2.5rem;
  font-size: 1rem;
  padding: 0 0.4rem;
  border-radius: 0.4rem;
}

.customInputContainer .options .searchInput input[type="text"]::placeholder {
  font-size: 1rem;
  color: rgb(0 0 0 / 50%);
}

.customInputContainer .options ul {
  margin: 0.5rem 0;
}

.customInputContainer .options ul li {
    cursor: pointer;
    list-style: none;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid rgb(204 204 204 / 50%);
}

.customInputContainer .options ul li.selected {
    background: rgb(52 211 153 / 50%);
}

.customInputContainer .options ul li.selected:hover {
    background: rgb(52 211 153 / 50%);
}

.customInputContainer .options ul li:last-child {
  border: 0;
}

.customInputContainer .options ul li:hover {
  background: rgb(52 211 153 / 20%);
}

.customInput-subContainer {
  width: 20rem;
  display: flex;
  max-width: 20rem;
  margin-right: 2rem;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  z-index: 999;
}

.customInput-subContainer .customInput-sub {
  margin: 0 1rem;
  cursor: pointer;
  user-select: none;
  font-size: 1.16rem;
  justify-content: space-between;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
}

.customInput-subContainer .customInput-sub i {
  transition: transform 0.3s ease-in-out;
}

.customInput-subContainer.show .customInput-sub i {
  transform: rotate(90deg);
}

.customInput-subContainer :is(.customInput-sub, .options-sub) {
  width: 100%;
  display: flex;
/*  color: #202020;*/
  background: #fff;
  align-items: center;
/*  border-radius: 0.3rem;*/
  border-radius: 10px;
  position: absolute;
  top: 0;
  margin-top: 5px;
}

.customInput-subContainer .options-sub {
  display: none;
  padding: 0.6rem;
  font-size: 1.1rem;
  justify-content: start;
  flex-direction: column;
  margin: 0.8rem 1rem 0rem 1rem;
  transition: background-color 0.1s ease-in-out;
}

.customInput-subContainer.show .options-sub {
  display: block;
/*  top: 85%;*/
  top: 0;
}

.customInput-subContainer .options-sub :is(.searchInput-sub, ul) {
  width: 100%;
  max-height: 15rem;
  overflow-y: scroll;
  position: relative;
  padding-left: 0;
}

.customInput-subContainer .options-sub ul::-webkit-scrollbar {
  width: 6px;
  position: relative;
}

.customInput-subContainer .options-sub ul::-webkit-scrollbar-track{
    width: 2px;
    border-radius: .2rem;
    background: rgb(0 0 0 / 10%)
}

.customInput-subContainer .options-sub ul::-webkit-scrollbar-thumb{
    border-radius: .2rem;
    background: rgb(0 0 0 / 30%);
}

.customInput-subContainer .options-sub .searchInput-sub {
  display: flex;
  padding: 0 0.4rem;
  overflow-y: auto;
  align-items: center;
  border-radius: 0.4rem;
  color: rgb(0 0 0 / 50%);
  border: 2px solid rgb(0 0 0 / 30%);
}

.customInput-subContainer .options-sub .searchInput-sub.focus {
  border: 2px solid rgb(52 211 153 / 70%);
}

.customInput-subContainer .options-sub .searchInput-sub input[type="text"] {
  border: 0;
  width: 100%;
  outline: none;
  height: 2.5rem;
  font-size: 1rem;
  padding: 0 0.4rem;
  border-radius: 0.4rem;
}

.customInput-subContainer .options-sub .searchInput-sub input[type="text"]::placeholder {
  font-size: 1rem;
  color: rgb(0 0 0 / 50%);
}

.customInput-subContainer .options-sub ul {
  margin: 0.5rem 0;
}

.customInput-subContainer .options-sub ul li {
    cursor: pointer;
    list-style: none;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid rgb(204 204 204 / 50%);
}

.customInput-subContainer .options-sub ul li.selected {
    background: rgb(52 211 153 / 50%);
}

.customInput-subContainer .options-sub ul li.selected:hover {
    background: rgb(52 211 153 / 50%);
}

.customInput-subContainer .options-sub ul li:last-child {
  border: 0;
}

.customInput-subContainer .options-sub ul li:hover {
  background: rgb(52 211 153 / 20%);
}

.text-block-select {
  /* margin-right: 100px; */
/*  color: #999;*/
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}








.customInput-name-Container {
  width: 20rem;
  display: flex;
  max-width: 20rem;
  margin-right: 2rem;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  z-index: 999;
}

.customInput-name-Container .customInput-name {
  margin: 0 1rem;
  cursor: pointer;
  user-select: none;
  font-size: 1.16rem;
  justify-content: space-between;
/*  padding: 0.6rem 1rem 0.6rem 0.6rem;*/
}

.customInput-name-Container .customInput-name i {
  transition: transform 0.3s ease-in-out;
}

.customInput-name-Container.show .customInput-name i {
  transform: rotate(90deg);
}

.customInput-name-Container :is(.customInput-name, .options-name) {
  width: 100%;
  display: flex;
/*  color: #202020;*/
  background: #fff;
  align-items: center;
/*  border-radius: 0.3rem;*/
  border-radius: 10px;
  position: absolute;
  top: 0;
  margin-top: 5px;
}

.customInput-name-Container .options-name {
  display: none;
  padding: 0.6rem;
  font-size: 1.1rem;
  justify-content: start;
  flex-direction: column;
  margin: 0.8rem 1rem 0rem 1rem;
  transition: background-color 0.1s ease-in-out;
}

.customInput-name-Container.show .options-name {
  display: block;
  top: 85%;
/*  top: 0;*/
}

/*.customInputContainer.hide .options {
  display: none;
}*/

.customInput-name-Container .options-name :is(ul) {
  width: 100%;
  max-height: 15rem;
  overflow-y: scroll;
  position: relative;
  padding-left: 0;
}

.customInput-name-Container .options-name ul::-webkit-scrollbar {
  width: 6px;
  position: relative;
}

.customInput-name-Container .options-name ul::-webkit-scrollbar-track{
    width: 2px;
    border-radius: .2rem;
    background: rgb(0 0 0 / 10%)
}

.customInput-name-Container .options-name ul::-webkit-scrollbar-thumb{
    border-radius: .2rem;
    background: rgb(0 0 0 / 30%);
}

.customInput-name-Container .options-name .searchInput-name {
  display: flex;
  padding: 0 0.4rem;
  overflow-y: auto;
  align-items: center;
  border-radius: 0.4rem;
  color: rgb(0 0 0 / 50%);
  border: 2px solid rgb(0 0 0 / 30%);
}

.customInput-name-Container .options-name .searchInput-name.focus {
  border: 2px solid rgb(52 211 153 / 70%);
}

.customInput-name-Container .options-name .searchInput-name input[type="text"] {
  border: 0;
  width: 100%;
  outline: none;
  height: 2.5rem;
  font-size: 1rem;
  padding: 0 0.4rem;
  border-radius: 0.4rem;
}

.customInput-name-Container .options-name .searchInput-name input[type="text"]::placeholder {
  font-size: 1rem;
  color: rgb(0 0 0 / 50%);
}

.customInput-name-Container .options-name ul {
  margin: 0.5rem 0;
}

.customInput-name-Container .options-name ul li {
    cursor: pointer;
    list-style: none;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid rgb(204 204 204 / 50%);
}

.customInput-name-Container .options-name ul li.selected {
    background: rgb(52 211 153 / 50%);
}

.customInput-name-Container .options-name ul li.selected:hover {
    background: rgb(52 211 153 / 50%);
}

.customInput-name-Container .options-name ul li:last-child {
  border: 0;
}

.customInput-name-Container .options-name ul li:hover {
  background: rgb(52 211 153 / 20%);
}



.customInput-dropdown{
  width: 100%;
  height: 60px;
  display: flex;
  margin-right: 2rem;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 15px;
  z-index: 999;

}

.customInput-dropdown .customInput {
/*  margin: 0 1rem;*/
  cursor: pointer;
  user-select: none;
  font-size: 1.16rem;
  justify-content: space-between;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
}

.customInput-dropdown .customInput i {
  transition: transform 0.3s ease-in-out;
}

.customInput-dropdown.show .customInput i {
  transform: rotate(90deg);
}

.customInput-dropdown :is(.customInput, .options) {
  width: 100%;
  display: flex;
  color:#333333;
  background: #fff;
  align-items: center;
/*  border-radius: 0.3rem;*/
  border-radius: 10px;
  border: 1px solid #cccccc;
  position: absolute;
  top: 0;
  margin-top: 5px;
}

.customInput-dropdown .options {
  display: none;
  padding: 0.6rem;
  font-size: 1.1rem;
  justify-content: start;
  flex-direction: column;
  margin: 0.8rem 1rem 0rem 1rem;
  transition: background-color 0.1s ease-in-out;
}

.customInput-dropdown.show .options {
  display: block;
  top: 65%;
/*  top: 0;*/
}

/*.customInputContainer.hide .options {
  display: none;
}*/

.customInput-dropdown .options :is(.searchInput, ul) {
  width: 100%;
  max-height: 15rem;
  overflow-y: scroll;
  position: relative;
  padding-left: 0;
}

.customInput-dropdown .options ul::-webkit-scrollbar {
  width: 6px;
  position: relative;
}

.customInput-dropdown .options ul::-webkit-scrollbar-track{
    width: 2px;
    border-radius: .2rem;
    background: rgb(0 0 0 / 10%)
}

.customInput-dropdown .options ul::-webkit-scrollbar-thumb{
    border-radius: .2rem;
    background: rgb(0 0 0 / 30%);
}

.customInput-dropdown .options .searchInput {
  display: flex;
  padding: 0 0.4rem;
  overflow-y: auto;
  align-items: center;
  border-radius: 0.4rem;
  color: rgb(0 0 0 / 50%);
  border: 2px solid rgb(0 0 0 / 30%);
}

.customInput-dropdown .options .searchInput.focus {
  border: 2px solid rgb(52 211 153 / 70%);
}

.customInput-dropdown .options .searchInput input[type="text"] {
  border: 0;
  width: 100%;
  outline: none;
  height: 2.5rem;
  font-size: 1rem;
  padding: 0 0.4rem;
  border-radius: 0.4rem;
}

.customInput-dropdown .options .searchInput input[type="text"]::placeholder {
  font-size: 1rem;
  color: rgb(0 0 0 / 50%);
}

.customInput-dropdown .options ul {
  margin: 0.5rem 0;
}

.customInput-dropdown .options ul li {
    cursor: pointer;
    list-style: none;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid rgb(204 204 204 / 50%);
}

.customInput-dropdown .options ul li.selected {
    background: rgb(52 211 153 / 50%);
}

.customInput-dropdown .options ul li.selected:hover {
    background: rgb(52 211 153 / 50%);
}

.customInput-dropdown .options ul li:last-child {
  border: 0;
}

.customInput-dropdown .options ul li:hover {
  background: rgb(52 211 153 / 20%);
}


@media screen and (max-width: 320px) {
  .customInputContainer :is(.customInput, .options) {
    width: auto;
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 5px;
  }

  .customInputContainer {
    min-width: 100%;
    max-width: unset;
    display: block;
  }

  .customInput-subContainer :is(.customInput-sub, .options-sub) {
    width: auto;
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 5px;
  }

  .customInput-subContainer {
    min-width: 100%;
    max-width: unset;
    display: block;
  }


  .customInput-dropdown :is(.customInput, .options) {
    width: auto;
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 5px;
  }

  .customInput-dropdown {
    min-width: 100%;
    height: unset;
    max-width: unset;
    display: block;
  }

  /*.text-block-7 {
    white-space: nowrap;
  }*/
}

@media screen and (max-width: 379px) {
  .customInputContainer :is(.customInput, .options) {
    width: auto;
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 5px;
  }
  .customInputContainer {
    min-width: 100%;
    max-width: unset;
    display: block;
  }

  .customInput-subContainer :is(.customInput-sub, .options-sub) {
    width: auto;
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 5px;
  }

  .customInput-subContainer {
    min-width: 100%;
    max-width: unset;
    display: block;
  }
}

@media screen and (max-width: 479px) {
  .customInputContainer :is(.customInput, .options) {
    width: auto;
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 5px;
  }

  .search-wrapper-cari-dokter{
    padding: 40px 20px;
  }

  .customInputContainer {
    width: 300px;
    display: block;

    margin-right: 0px;
  }

  .customInput-subContainer {
    width: 300px;
    display: block;

    margin-right: 0px;
  }



  .customInput-subContainer :is(.customInput-sub, .options-sub) {
    width: auto;
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 5px;
  }

  .customInput-subContainer {
    min-width: 100%;
    max-width: unset;
    display: block;
  }

  .text-block-7 {
    white-space: nowrap;
  }

  .search-input {
    height: 50px;
    margin-bottom: unset;
  }

  .customInput-name-Container {
    width: 300px;
    display: block;

    margin-right: 0px;
  }

  .customInput-name-Container :is(.customInput-name, .options-name) {
    width: auto;
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 5px;
  }


}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
  
   /* Small desktop / ipad view: 3 tiles */
   .wrapper-cari-dokter {
      width: 100%;
      justify-content: space-between;
   }

   .customInputContainer :is(.customInput, .options) {
    width: 100%;
   }

   .customInput-subContainer :is(.customInput-sub, .options-sub) {
    width: 100%;
   }

   .search-2 {
/*    width: 80%;*/
   }

   .customInput-name-Container :is(.customInput-name, .options-name) {
    width: 100%;
   }

    .customInputContainer {
      width: 35%;
    }

    .customInput-subContainer {
      width: 35%;
    }

    .customInput-name-Container {
      width: 35%;
    }

    .customInput-dropdown {
      min-width: 100%;
      height: unset;
      max-width: unset;
      display: block;
    }

}

@media only screen and (max-width : 1050px) and (min-width : 991px) {
  .search-2 {
    width: 80%;
   }
}