.wrap-list {

  .wrap-group {
    padding: 30px;
    background-color: @widget-bg;
    .box-shadow(0 1px 5px rgba(0,0,0,.1));
    border-radius: 3px;
    margin-bottom: 15px;

    &-heading {
      font-size: (@font-size-base * 1.25);
      background-color: @widget-header-bg;
      border-bottom: 1px solid @widget-header-border;
      margin-top: -30px;
      margin-bottom: 30px;
      margin-left: -30px;
      margin-right: -30px;
      padding: 20px 30px;
      color: @widget-header-color;
      border-radius: 3px 3px 0 0;
    }

    .row {
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .row {
        margin-left: -15px;
        margin-right: -15px;
      }

      .tab-content {
        padding: 15px;

        .row {
          margin-left: 0;
          margin-right: 0;

          .col-lg-2 {
            width: 16.666666666666664%;
          }

          .col-lg-10 {
            width: 83.33333333333334%;
            padding-right: 0;
          }
        }
      }
    }

    .col {
      padding-left: 0;

      .col {
        padding-left: 15px;
      }
    }

    label {
      font-weight: normal;
      text-align: left;
    }

    .help-block {
      font-style: italic;
    }

    .alert {
      margin-bottom: 0;
      padding: 7px 15px 7px 30px;

      &::before {
        font-size: 15px;
        left: 10px;
        top: 10px;
      }
    }

    // controls inside 
    .control-group-inner {
      label {
        font-size: 12px;
        color: #888;
      }
    }

    // uploading files and shit
    .upload-group .file-upload + .file-upload,
    .file-uploaded-group .input-group + .input-group,
    .file-uploaded-group + .upload-group {
      margin-top: 20px;
    }

    .upload-group .disabled,
    .file-uploaded-group .disabled {
      border-right: 0 none;
    }

    .file-uploaded-group .disabled {
      border-color: @brand-primary;
      background-color: fadeout(@brand-primary, 95%);
      .placeholder(@brand-primary);
    }

    .upload-group .input-group + .input-group {
      margin-top: 5px;
    }

    .thumbnails-grid + .upload-group {
      margin-top: 20px;
    }

    .thumbnails-grid {
      .clearfix();
      margin-left: -5px;

      > .input-group {
        padding-left: 5px;
        padding-bottom: 5px;
        width: 50%;
        float: left;
      }

      .thumbnail {
        .caption {
          padding: 9px 0;

          &+.caption {
            padding-top: 0;
          }
        }
      }
    }

  }

  .form-actions {
    margin-top: 30px;

    &.inline {
      label {
        font-weight: normal;
        margin-left: 20px;
      }
      input, select {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  .col-lg-2 {
      width: 240px;
    }
    .col-lg-4 {
      width: 480px;
    }

    &--in-tab {
      .wrap-group {
        padding: 30px 15px 30px;
        background-color: @widget-bg;
        margin: -10px -10px 15px;
        .box-shadow(none);

        &-heading {
          font-size: (@font-size-base * 1.25);
          font-weight: 500;
          background-color: @widget-header-bg;
          border-bottom: 1px solid #ddd;
          margin-top: -30px;
          margin-bottom: 30px;
          margin-left: -15px;
          margin-right: -15px;
          padding: 10px 15px;

          h4 {
            margin: 0;
            line-height: @line-height-base;
          }
        }
      }
    }
}

// thumbnails with delete actions

.wrap-list .wrap-group .thumbnail {

  img {
    max-width: 100%;
  }

  &.with-actions {
    position: relative;
    width: auto;
    max-width: none;
    margin-bottom: 10px;
    float: left;
    .clearfix();

    .caption {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
  }
}

// responsive columns in configs

@media (max-width: 1200px) {
  .wrap-list {
    .col-lg-2 {
      float: left;
      width: 33.33333333333333%;
    }
    .col-lg-4,
    .col-lg-5,
    .col-lg-8 {
      float: left;
      width: 66.66666666666666%;
    }
  }
}

@media (max-width: @screen-sm) {
  .wrap-list {
    .col-lg-2 {
      float: none;
      width: auto;
    }
    .col-lg-4,
    .col-lg-5,
    .col-lg-8 {
      float: none;
      width: auto;
    }
  }
}





.wrap-list + .form-actions {
  margin-top: 30px;
}

.box-simple {
  margin-bottom: 30px;
  padding: @padding-base-vertical @padding-base-horizontal+6;
  font-size: @font-size-base;
  line-height: @line-height-base;
  background: #fff;
  color: @gray;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
  
  height: 200px;
  overflow: auto;

  &.fieldset {
    margin-bottom: 6px;
  }

  &-large {
    height: 250px;
  }

  &-xlarge {
    height: 300px;
  }

  &-small {
    padding: 0;

    .x-tree-node-text {
      font-size: 12px;
    }
  }
}

#sqlButtons a {
  margin-bottom: 10px;
}

#query_history {
  margin-top: 40px;
  margin-bottom: 0;

  .box-simple {
    height: 150px;

    li {
      margin-bottom: 10px;
    } 
  }
}

.js-tooltip {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

.field_type,
.field_type + .row,
.wrap-row {
  margin-top: 15px;
}
 
.form-horizontal {

  .help-block {
    margin-bottom: 0;
    font-size: @font-size-small;
  }

  .actions {
    margin-top: 6px;
  }
}

.wrap-block {
  background: #f5f5f5;
  padding: 10px;

  .actions-panel {
    border-top: 1px solid #eee;
    padding: 10px 10px 0;
    margin: 10px -10px 0;
    text-align: right;
  }
}

// feedback modal

#send-feedback-modal {
  form {
    margin: 0;
  }
}

// quick-stats

.quick-stats-block {
  position: relative;
  // background: @link-color;
  background-color: #f5f5f5;
  color: @link-color;
  text-align: right;
  padding: 20px;
  .clearfix();
  margin-bottom: 20px;

  a {
    color: @link-color;
  }

  .icon {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 90px;
    height: 90px;
    line-height: 90px;
    color: @link-color;
    text-align: center;
    font-size: 90px;
    border-radius: 50%;
  }

  .first {
    font-size: 42px;
    font-weight: normal;
  }
}