@import "client/common";

body.media-controls-popup.popup {

  text-align:center;

  background-color: #242323;

  #minimal-container {
    padding-bottom:0px;
  }

  .media-controls-popup {
    padding:15px 15px 3px 15px;
  }

  .field {
    margin-top:20px;
  }

  .icheckbox_minimal {
    float:left;
  }

  label {
    float: left;
    margin-left: 5px;
    margin-top:2px;
  }

  h3 {
    text-align:left;
    margin-bottom:5px;
  }

  .actions {
    position:relative;
    margin-top:20px;
    font-size:11px;
    margin-bottom:10px;

  }

  .help-link {
    position:absolute;
    left:-6px;
    top:0;
  }
  .close-link {

  }

  .display-metronome {
    font-size:12px;
    margin-top:35px;
  }

  .header {
    padding-bottom:20px;
    h3 {
      text-align:center;
      font-weight:bold;
    }

    h4 {
      margin-top:15px;
      font-size:12px;
      font-weight:normal;

      span {
        vertical-align:middle;
      }
      img {
        vertical-align:middle;
        margin-left:5px;
        height:16px;
      }
    }

    h5 {
      font-size:12px;
      font-weight:normal;

      span {
        vertical-align:middle;
      }
      img {
        vertical-align:middle;
        margin-left:5px;
        height:16px;
      }
    }
  }

  .extra-controls {
    margin-top:20px;
    h4 {
      text-align:left;
      font-size:14px;
      a {
        font-size:11px;
        position:absolute;
        right:20px;
      }
      &.custom-mix-header {
        margin-top:20px;
      }
    }

    .my-mixes {
      margin-top:5px;
      max-height:170px;
      border-width:1px;
      border-bottom-color:#676767;
      border-top-color:#676767;
      border-left-color:#171717;
      border-right-color:#171717;
      border-style:solid;
      overflow:auto;

      @include border_box_sizing;
    }

    .mixdown-display {
      display:table;
      font-size:12px;
      color:$ColorTextTypical;
      width:100%;

      border-width:1px 0;
      border-top-color:#343434;
      border-bottom-color:#282828;
      border-style:solid;
      background-color:#2c2c2c;
      @include border_box_sizing;
      border-spacing:7px;
      text-align: left;

      &.active {
        background-color:#44423f;
      }
    }

    .active-stem-select {
      max-width:141px;
    }

    .mixdown-name {
      line-height:125%;
      width:210px;
      text-align:left;
      display: table-cell;
      vertical-align: middle;
    }

    .mixdown-actions {
      display: table-cell;
      vertical-align: middle;
      margin-left:10px;
      width:100px;
      white-space:nowrap;
      min-width:100px;
    }

    .mixdown-stateful {
      display:inline-block;
      vertical-align:middle;
      width:24px;
      height:24px;
      cursor:pointer;
    }


    .mixdown-download {
      width:24px;
      height:24px;

      cursor:pointer;

      &.not-ready {
        visibility:hidden;
      }
    }

    .mixdown-play {
      width:24px;
      height:24px;
      margin-right:10px;

      cursor:pointer;
    }
    .mixdown-edit {
      margin-left:10px;
      width:24px;
      height:24px;

      cursor:pointer;
    }

    .mixdown-delete {
      margin-left:10px;

      width:24px;
      height:24px;
      cursor:pointer;
    }
    .create-mix {
      margin-top:5px;
      border-color:$ColorTextTypical;
      border-style: solid;
      border-width:1px 0;
      padding: 7px 0 20px;

      &.not-active {
        padding:7px 0 7px;
      }

      p {
        line-height:125%;
        color:$ColorTextTypical;
        text-align:left;
        font-size:12px;
      }

      .field {
        display:block;
        height:25px;
        margin-top:15px;
      }

      ul.error-text {
        float:right;
        display:block !important;
        color: red;
        margin-top: 5px;
      }

      a.create-mix-btn {
        margin-top:15px;
        float:right;
        margin-right: 2px;
        margin-top: 3px;
      }
      label {
        display:inline;
        float:left;
      }

      select, input {
        width:170px;
        float:right;
        @include border_box_sizing;
        background-color:$ColorTextBoxBackground;
      }
    }
  }

  .arrow-down {
    float:none;
    margin-left:5px;
    margin-top:0;
    margin-right:0;
    border-top: 4px solid #fc0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    display:inline-block;
    padding-top:1px;
  }
  .arrow-up {
    float:none;
    margin-right:0;
    margin-left:5px;
    margin-bottom:2px;
    border-bottom: 4px solid #fc0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    display:inline-block;
    padding-top:1px;
  }
}