#subset_container {
  position: absolute;
  top: 4rem;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .5rem;
  overflow-y: auto;
}

#subset_container label.subset-label {
  width: 100%;
}

#subset_container .playlist_container {
  overflow: auto;
  white-space: nowrap;
  margin-left: 1.8rem;
  margin-right: 1.8rem;
}

#subset_container .layer_container {
  width: 100%;
  border: 1px solid #f8f9fa;
  border-top: 0px;
  border-bottom: 0px;
}

#subset_container .layer_container.reduced {
  width: 14.5vw;
}

#subset_container .layer_container.selected {
  background-color: #343a40!important;
  color: #f8f9fa;
}

#subset_container .layer_container .layer_container-middle {
  min-height: 8vh;
}

#subset_container .layer_container .layer_container-middle > img {
  max-height: 11vh;
}

#subset_container .playlist {
  position: relative;
}

#subset_container .playlist > .playlist_sortable{
  position: absolute;
  top: 10vh;
}

#parentsPopup .modal-body > div {
  max-height: 35vh;
  overflow-y: auto;
}

#parents_table .th,
#parents_table .td {
  padding: .5rem;
}

#subsetStackList .stack_layer_container {
  max-height: 35vh;
  overflow-y: auto;
}

#color_table_src {
  height: 2.5vh;
  width: 10vw;
  margin-top: .5vh;
  position: relative;
}

.slider_opacity {
  opacity: .5;
}

#ediCtPopup .modal-body > div,
 #ediClassPopup .modal-body > div{
  height: 50vh;
  overflow-y: auto;
}

#ediCtPopup .modal-body .ct-list-group.selected {
  background: #343a40;
  border-radius: .2rem;
  color: #f8f9fa;
}

#ediCtPopup .modal-body .ct-list-group > p {
  width: 4vw;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: .1rem;
}

#ediCtPopup .modal-body .ctpreview,
#ediCtPopup .modal-footer .ctpreview {
  width: 4vw;
  height: 1.2vh;
}

/* ORDER PAGE  */
#order-div {
  padding-top: 3.5rem;
  padding-left:2rem; 
  padding-right:2rem;
  padding-bottom: 1rem;
}

#order-div .grid-table-td span {
  word-wrap: break-word;
}

#ediClassPopup .btn-checkbox > span.checkbox::before{
  content: "\f0c8";
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-size: larger;
}

#ediClassPopup .btn-checkbox.checked > span.checkbox::before {
  content: "\f14a";
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-size: larger;
  color: #28a745;
}

@media(max-width:1024px)  {
  #subset_container .layer_container.reduced {
    width: 20.5vw;
  }
}

@media(max-width:768px)  {
  #parentsPopup .modal-body > div {
    max-height: 57vh;
  }

  #parents_table {
    font-size: .65rem;
  }

  #parents_table .table td,
  #parents_table .table th {
    padding: .2rem;
  }

  #subsetStackList {
    font-size: .7rem;
  }
  
  #subsetStackList .btn-sm {
    font-size: .7rem;
  }

  #subsetStackList .btn-group-sm>.btn {
    font-size: .7rem;
  }

  #subset_container .layer_container.reduced {
    width: 29.5vw;
  }
}

@media only screen and (min-width:319px) and (max-width:575.98px) {
  #subset_container .playlist > .playlist_sortable {
    top: 14vh;
  }

  #subset_container .layer_container.reduced {
    width: 40vw;
  }

  #order-div {
  padding-left:.2rem; 
  padding-right:.2rem;
}
}