.mixer-container > div {
    padding:2px;
}
.mixer-balance {
  grid-area: balance;
  padding-left:10px;
  padding-right:10px;
}
.mixer-balance > input {
    width: 80px

}
.mixer-volume {
  grid-area: volume;
  align: center;
}
.mixer-volume > input[type="range"] {
   height: 50px;
   width: 80px;
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
}
.mixer-mute {
  grid-area: mute;
}
.mixer-options {
  grid-area: options;
}
.mixer-random {
  grid-area: random;
}
.mixer-random_count {
  grid-area: random_count;
}
.mixer-random_count > input {
  width: 80px;
}
.mixer-random_interval {
  grid-area: random_interval;
}
.form-align-right{
    text-align: right;
}
.mixer-id {
  grid-area: id;
}
.mixer-id > span{
  overflow: hidden;
}
.mixer-image {
  grid-area: image;
}
.mixer-play {
  grid-area: play;
  text-align: right;
}
.mixer-skip {
  grid-area: skip;
  text-align: right;
}
.mixer-fade {
  grid-area: fade;
  text-align: right;
}
.mixer-gap {
  grid-area: gap;
  text-align: right;
}
.mixer-extra {
  display: grid;
  grid-template-columns: 80px 100px 60px 50px;
  column-gap: auto;
  row-gap: 0px;
  widht: 100%;
  grid-template-rows: auto;
  grid-template-areas:
    "skip skip skip skip"
    "fade fade fade fade"
    "gap gap gap gap";
  text-align: right;
}
.mixer-remove {
  grid-area: remove;
  text-align:right;
}
.mixer-lock {
  grid-area: lock;
  text-align:right;
}

.mixer-container {
  display: grid;
  grid-template-columns: 80px 100px 60px 25px 25px;
  column-gap: auto;
  row-gap: 0px;
  margin-bottom: 10px;
  grid-template-rows: auto;
  grid-template-areas:
    "id id id lock remove "
    "volume random random random random"
    "volume  options play play play"
    "balance  options play play play"
    "extra extra extra extra extra";
padding: 5px;
/*border-color: rgba(0,0,0,0.3);*/
}

#collapsed-extra.collapsed > i.open {
    display: none;
}

#collapsed-extra > i.open {
    display: inline;
}

#collapsed-extra.collapsed > i.closed {
    display: inline;
}
#collapsed-extra > i.closed {
    display: none;
}

.mixer-container:nth-child(3n) {
  margin-left: 10px;
}
.mixer-container:nth-child(3n +1) {
  margin-right: 10px;
}


#subforms-container{
    display: flex;
    flex-wrap: wrap;
    width:100%;
    grid-area: subforms;
}
.mixer-oc-tree {
    margin: 5px;
    padding: 5px;
  grid-area: tree;
  overflow-x: clip;
}
.mixer-oc-channels {
  grid-area: channels;
}
.mixer-oc-channels > form {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 40px auto;
  row-gap: 10px;
  padding: 5px;
  margin: 5px;
  grid-template-areas:
    "add"
    "subforms"
    "tags";
}
.mixer-oc-add {
  grid-area: add;
}
.mixer-oc-tags {
  grid-area: tags;
}
#overall-container {
  display: grid;
  grid-template-columns: 1.5fr 4.5fr;
  grid-template-rows: auto;
  grid-template-areas:
    "tree channels";
  background: #F8F8F8;
  border-radius: 10px;
}
.is-hidden{
    display: none;
}

.bar {
  height: 20px;
  background-color: #f5f5f5;
}
.bar::before {
  content: '';
  display: flex;
  justify-content: end;
  width: calc(var(--percent) * 1%);
  height: 100%;
  background: #CCFFE5;
  white-space: nowrap;
}