/*Backend CSS*/
@import "__lesshat.less";

@color-scheme-primary: #3D8EB9;

.theme-left-col,
.theme-right-col {
  display: inline-block;
  float: left;
  width: 50%;
  padding: 15px;
  .box-sizing(border-box);
}

.trow {
  padding: 5px 0;
  .tlabel {
    display: block;
    padding: 0 0 5px;
    font-weight: 700;
    color: #555;
  }
}

// ----------------------------------------------------------------------------
// Uploader
// ----------------------------------------------------------------------------
.demonstrator_uploader {
  .media-container {
    max-width: 200px;
    img {
      max-width: 100%;
      height: auto;
    }
  }
}

// ----------------------------------------------------------------------------
// Repeatable items
// ----------------------------------------------------------------------------
.themes-repeatable-block {
  margin-bottom: 10px;
  &.smk_accordion .acc_section {
    margin: -1px 0 0 0;
    > div:nth-child(1) {
      padding-right: 40px;
    }
    > div:nth-child(2) {
      background-color: #fafafa;
    }
  }
  > li {
    &.sfa-theme-noindex {
      display: none !important;
    }
    > div:nth-child(1) {
      > .badge {
        display: inline-block;
        padding: 3px;
        color: #333;
        background: #eee;
        border-radius: 2px;
        margin-left: 5px;
      }
      .delete-theme {
        display: block;
        color: red;
        background: transparent;
        position: absolute;
        right: 9px;
        top: 9px;
        &:hover {
          background-color: red;
          color: #fff;
        }
      }
      .section-theme-category {
        float: right;
        background-color: #87766C;
        color: #fff;
        padding-left: 7px;
        padding-right: 7px;
        &:empty {
          background-color: transparent;
        }
      }
      .section-theme-id {
        background: transparent;
        color: #888;
        font-style: italic;
      }
    }
  }
}

.demonstrator-styles-group {
  background: #fff;
  margin: 10px;
  border-radius: 4px;
  margin-top: 15px;
}

.demonstrator-styles-list {
  > .sfa-style-noindex {
    display: none !important;
  }

  > li {
    position: relative;
    padding: 10px;
    padding-right: 35px;
    border-bottom: 1px dashed #ccc;
    .delete-style {
      display: block;
      color: #EE5F5B;
      background: transparent;
      position: absolute;
      right: 0;
      top: 9px;
      padding: 2px 3px;
      border-radius: 2px;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        background-color: #EE5F5B;
        color: #fff;
      }
    }
    &:last-of-type {
      border-bottom: 0;
    }
  }

  .trow {
    padding: 2px 0;
    .tlabel {
      display: block;
      padding: 0 0 2px;
      font-weight: 400;
      color: #888;
    }
  }

}

.demonstrator-styles-header {
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 700;
}

.form-repeatable-button {
  display: block;
  padding: 9px 18px;
  border-radius: 2px;
  color: @color-scheme-primary;
  background-color: #fff;
  border: 1px dashed @color-scheme-primary;
  text-transform: uppercase;
  text-align: center;
  font-size: 12px;
  position: relative;
  margin-bottom: 20;
  cursor: pointer;
  font-weight: 700;
  &:hover {
    background: #E8FFFF;
    // color: #fff;
  }

  &.simple {
    display: inline-block;
    font-weight: 700;
    color: @color-scheme-primary;
    background-color: #E7E7E7;
    padding: 5px 12px;
    margin-bottom: 15px;
    border: 0;
    &:hover {
      background-color: @color-scheme-primary;
      color: #fff;
    }
  }
}

.form-table {
  tr.full-row {
    th,
    td {
      width: 100%;
      display: block;
      padding: 0;
    }
  }
}

.dts-panel-content {
  max-width: 1600px;
}

.right-notice {
  border: 1px solid #5BC0DE;
  background-color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 20px;
  margin: 25px 0 15px;
  p {
    font-size: 18px;
    color: #666;
  }
  .right-notice-button {
    display: inline-block;
    padding: 10px 25px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #39B4FF;
    color: #39B4FF;
    .transition(all .2s);
    &:hover {
      color: #fff;
      background-color: #39B4FF;
    }
  }
}

.right-block {
  margin: 30px 0 15px;
  .social-share {
    display: block;
    text-decoration: none;
    background-color: #333;
    color: #fff;
    border-radius: 3px;
    padding: 7px;
    margin: 10px 1px 0;
    &.twitter {
      background-color: #4da7de;
    }
    &.googleplus {
      background-color: #dd4b39;
    }
    &.facebook {
      background-color: #3e5b98;
    }
    &:hover {
      opacity: .95;
    }
  }
}

.github-link {
  display: inline-block;
  text-decoration: none;
  background-color: #333;
  color: #fff;
  border-radius: 3px;
  padding: 7px;
  margin: 10px 1px 0;
  img {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
  }
  &:hover,
  &:active,
  &:visited,
  &:focus {
    color: #fff;
  }
  &:hover {
    opacity: .95;
  }
}

.rating {
  display: inline-block;
  text-decoration: none;
  color: #FEC606;
  padding: 0;
  margin: 10px 1px 0;

  &:active,
  &:visited,
  &:focus {
    color: #FEC606;
  }
  &:hover {
    color: #FF7416;
  }
}