/* เฟรมแถบค้นหา */
.tabseach {
  height: auto;
  background-color: #f8f9fa;
}

/* แถบเลือกประเภทค้นหา */
#seachbar .btn-group {
  margin: 0.8rem 0;
  padding: 1%;
}

.btn-primary {
  background-color: #983ad1;
  border-color: #983ad1;
}

.btn-primary.active {
  background-color: #701da3;
  border-color: #701da3;
}

/* เฟรมแถบ taxonomic ranks */
.tabtaxorank {
  height: auto;
  background-color: #f8f9fa;
}

#taxotext {
  width: 12.666667%;
  margin: 1rem 0;
}

#box_select {
  margin: 1rem 0;
  width: 87.333333%;
}

#select_fam {
  width: 30%;
}

/* เฟรมแถบการ์ดข้อมูลที่ดึงจากฐานข้อมูล */
.tabcard {
  height: auto;
  background-color: #f8f9fa;
}

.flex-card {
  display: flex;
  flex-wrap: wrap;
}

/* เฟรมแถบค้นหาจากอักษรขึ้นต้นของชื่อวิทยาศาสตร์ */
.tabsciname {
  height: auto;
  background-color: #f8f9fa;
  padding: 1rem;
}

.sciname {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  border: 1px solid transparent;
  border-radius: 10px;
  border-color: #701da3;
  padding: 1%;
  color: #fff;
}

.sciname .part {
  padding: 2%;
  border: 1px solid transparent;
  border-color: #983ad1;
  border-radius: 10px;
  color: #983ad1;
  font-size: 15px;
  margin: 0.5em;
  text-align: center;
}

.btn-toolbar {
  margin: 0 0 1rem;
}

.btn-toolbar .btn-group {
  flex-wrap: wrap;
}

#bottonrps {
  margin: 3px 0;
  flex: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-color: #f5e4ff;
  background-color: #f5e4ff;
  color: #701da3;
}

.flex-sciname {
  display: flex;
  flex-wrap: wrap;
}

.listsciname {
  padding: 10px;
  margin-bottom: 10px;
  color: #000;
}

/* เฟรมหน้าจอ responsive */
@media screen and (max-width: 1258px) {
  .sciname .part {
    max-width: 60%;
  }
}

@media screen and (max-width: 992px) {
  .sciname .part {
    padding: 0%
  }
}

@media screen and (max-width: 870px) {
  #taxotext {
    width: 15.666667%;
  }

  #box_select {
    width: 84.333333%;
  }
}

@media screen and (max-width: 813px) {
  #taxotext {
    width: 16.666667%;
  }

  #box_select {
    width: 83.333333%;
  }

  #select_fam {
    width: 40%;
  }

  #scinameseach {
    width: 100%;
    margin: 1rem 0;
  }

  #bottonrps {
    margin-left: 0;
    flex: inherit;
  }

  .sciname .part {
    padding: 2%;
    max-width: 100%;
  }
}

@media screen and (max-width: 781px) {
  #taxotext {
    width: 17.666667%;
  }

  #box_select {
    width: 82.333333%;
  }
}

@media screen and (max-width: 737px) {
  #taxotext {
    width: 21.666667%;
  }

  #box_select {
    width: 78.333333%;
  }
}

@media screen and (max-width: 476px) {
  .sciname .part {
    max-width: 60%;
  }
}

@media screen and (max-width: 426px) {
  #seachbar {
    width: 100% !important;
  }
}

@media screen and (max-width: 415px) {
  #taxotext {
    width: 30.666667%;
  }

  #box_select {
    width: 69.333333%;
  }

  #select_fam {
    width: 100%;
  }
}

@media screen and (max-width: 391px) {
  #taxotext {
    width: 31.666667%;
  }

  #box_select {
    width: 68.333333%;
  }
}

@media screen and (max-width: 376px) {
  #taxotext {
    width: 33.666667%;
  }

  #box_select {
    width: 66.333333%;
  }
}

@media screen and (max-width: 361px) {
  #taxotext {
    width: 34.666667%;
  }

  #box_select {
    width: 65.333333%;
  }
}

@media screen and (max-width: 321px) {
  #seachbar {
    padding: 0;
  }

  .tabsciname {
    padding: 0 1rem;
  }
}