#phenotype_add {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 40px;
  border-radius: 2em;
  background: #ff8c00;
  color: #fff;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

#phenotype_add:hover {
  background-color: #ff7000;
}
.ripper_effect {
  position:relative;
   -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
}

.ripper_effect:after {
  content: "";
  background: #E6B476;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -40px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.ripper_effect:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.search-box_wrapper{width:100% !important;}

#phenotype_doc_input_btn_wrapper{
  width: 100%;
  /* height: 30px; */
  user-select: none;
  margin-top: 10px;

  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}


#phenotype_doc_input_btn_wrapper button {
  border-radius: 5px;
  padding-left: 8px;
  padding-right: 8px;
  color: #067ABC;
  border: 1px solid #067ABC;
  margin-right: 5px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;

}

#phenotype_doc_input_btn_wrapper button:hover{
  background-color: #067ABC;
  color: #fff;
}



#phenotype_add i {margin-right: 0.2em;}

.phenotype_add_wrapper{
  text-align:center;
  /* margin-top:10px; */
}

.phenotype_title_sub{
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}

#phenotype_num {
  margin-left: 10px;
}

#phenotypic-btn-filter {
  margin: 0px;
}

#phenotypic-btn-filter span {
  margin-top: 2px;
}

#phenotypic-btn-filter.active,#phenotypic-btn-filter:hover {
  background: #484545;
  color: #fff
}

#phenotype_filter {
  border-top: solid 1px #AEB0B5;
  border-radius: 0 !important;
  margin-top: 10px;
  padding-top: 10px;
  width: 100%; 
  background-color: #fff !important;
  display: none;
}

#phenotype_filter.active {
  display: block !important;
}

#phenotype_filter .ctl {
  text-align: left;
}

#phenotype_filter .ctl button {
  font-size: 16px;
  border: solid 1px;
  border-radius: 5px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

#phenotype_filter table {
  width: 100%;
  text-align: left;
}

#phenotype_filter table tr{
  border-top: solid 1px #AEB0B5;
}

#phenotype_filter table tr td {
  padding-top: 8px;
  padding-bottom: 8px;
}

#phenotype_filter table tr td.title {
  white-space: nowrap;
  padding-right: 10px;
  padding-top: 10px;
}

#phenotype_selectedfilter_wrap {
/*  border-top: solid 1px #AEB0B5;*/
  width: 100%;
  background-color: #fff !important;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  margin-bottom: 5px;
  /*display: none;*/
}

#phenotype_selectedfilter_wrap div{
    padding-top: 5px;
    margin-right: 5px;
    font-size: 13px;
}
#phenotype_selectedfilter_wrap span{
  border: solid 1px #AEB0B5;
  border-radius: 5px !important;
  padding: 5px 5px 5px 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  white-space: nowrap;
}
#phenotype_list {
  border-top: solid 1px #AEB0B5;
  border-radius: 0 !important;
  padding-top: 10px;
  width: 100%; 
  background-color: #fff !important;
  display: block !important;
}

#phenotype_list .phenotype_list_row {
  border: solid 1px #AEB0B5;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

/*
#phenotype_list .phenotype_list_row .phenotype_list_row_header {
  font-size: 18px;
}

@media screen and (max-width: 1150px) {
    #phenotype_list .phenotype_list_row .phenotype_list_row_header {
        font-size: 16px;
    }
}
*/

#phenotype_list .phenotype_list_row .phenotype_list_row_header .phenotype_list_row_header_sub{
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

#phenotype_list .phenotype_list_row .phenotype_list_row_header .phenotype_list_row_header_sub .detail_display_switch {
  cursor: pointer;
}

#phenotype_list .phenotype_list_row.active .phenotype_list_row_header .phenotype_list_row_header_sub .detail_display_switch{
  transform: rotateX(180deg);
}

.list-tag{
  margin-left: 15px;
  margin-right: 50px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  border: solid 1px #067ABC;
  color: #067ABC;
  font-family: Verdana, sans-serif !important;
  font-size: inherit;
  cursor: pointer;
  -webkit-transition: background 0.2s,color 0.1s;
  transition: background 0.2s,color 0.1s;
}

.list-tag[aria-expanded="false"] {
  color: #067ABC;
}

.list-tag:hover {
  color: #fff;
  background-color: #067ABC;
  transition: 0.5s;
}

.list-tag[aria-expanded="true"] {
  color: #fff;
  background-color: #067ABC;
  transition: 0.5s;
}


#phenotype_list .phenotype_list_row .phenotype_list_row_header .phenotype_list_row_header_sub .hpo_delete {
  color: #AEB0B5;
  cursor: pointer;
}
#phenotype_list .phenotype_list_row .detail {
  border-top: solid 1px #AEB0B5;
  padding-top: 10px;
  width: 100%;
  display: none;
}

#phenotype_list .phenotype_list_row.active .detail {
  display: block;
  margin-bottom: 5px;
}

#phenotype_list .phenotype_list_row .detail table{
  text-align:left;
}



#phenotype_list .phenotype_list_row .detail table tr {
  padding-bottom: 5px;
}

#phenotype_list .phenotype_list_row .detail table tr td {
  vertical-align: middle;
  padding-right: 5px;
  padding-bottom: 5px;
}
#phenotype_list .phenotype_list_row .detail table tr td.phenotype_input {
  padding-right: 20px;
}

.phenotype_cbx_wrapper{
  position: relative;
  /*font-size: 18px;*/
  font-weight: 400;
  display: inline-flex;
  margin-right: 15px;
}

.phenotype_cbx_wrapper input[type="checkbox"]{
  height: 16px;
  width: 16px;
  padding: 0;
  box-sizing:border-box;
  cursor: pointer;
  position: absolute;
  margin-top: 0.3rem;
  accent-color: #007BFF;
}
.phenotype_cbx_wrapper label {
  font-size: inherit;

  font-weight: 400;
  display: inline-block;
  margin-bottom: 0;
  /*line-height:  1.5;*/
  text-align:   left;
  padding-left: 20px;
  padding-top:  1px;
}


#phenotype_list .phenotype_list_row .detail table tr td select {
  padding: 0.35em 0.5em;
  border: 1.5px solid #e3e3e3;
  border-radius: 0.3em;
  appearance: button;
  background: #fff;
  width: 100%;
  cursor: pointer;
}

#phenotype_list .phenotype_list_row .detail table tr td input.age-year {
  width: 80px !important;
}

#phenotype_list .phenotype_list_row .detail table tr td select.age-month {
  width: 140px !important;
}

#phenotype_list .phenotype_list_row .detail table tr td select.age-day {
  width: 140px !important;
}

#phenotype_list .phenotype_list_row .detail table tr td input[type="text"],
#phenotype_list .phenotype_list_row .detail table tr td input[type="number"],
#phenotype_list .phenotype_list_row .detail table tr td input[type="select"] {
  width: 100%;
  padding: 0.35em 0.5em;
  border: 1.5px solid #e3e3e3;
  border-radius: 0.3em;
  background: #fff;
  cursor: pointer;
}

#phenotype_list .phenotype_list_row .detail table.phenotype-list-table-large {display: block;}
#phenotype_list .phenotype_list_row .detail table.phenotype-list-table-medium {display: none;}
#phenotype_list .phenotype_list_row .detail table.phenotype-list-table-small {display: none;}

@media screen and (max-width: 1024px) {
  #phenotype_list .phenotype_list_row .detail table.phenotype-list-table-large {display: none;}
  #phenotype_list .phenotype_list_row .detail table.phenotype-list-table-medium {display: block;}
  #phenotype_list .phenotype_list_row .detail table.phenotype-list-table-small {display: none;}
}

@media screen and (max-width: 600px) {
  #phenotype_list .phenotype_list_row .detail table.phenotype-list-table-large {display: none;}
  #phenotype_list .phenotype_list_row .detail table.phenotype-list-table-medium {display: none;}
  #phenotype_list .phenotype_list_row .detail table.phenotype-list-table-small {display: block;}
}

#phenotype-detail-switch {
  width:  32px;
  height: 24px;
  margin-right:15px;
  margin-left: 5px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  
}

/* slider track */
#phenotype-detail-switch::-webkit-slider-runnable-track {
   background-color: #AEB0B5;
   border-radius: 5px;
   height: 10px;
}

#phenotype-detail-switch.active::-webkit-slider-runnable-track {
   background-color: #007BFF;
}

/* slider thumb */
#phenotype-detail-switch::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -4px; /* Centers thumb on the track */
   margin-right: -1px;
   background-color: #fff;
   border: solid 1px #AEB0B5;
   height:18px;
   width: 18px;
   border-radius: 50%;
}