@import "components/typeahead";
@import "components/tree_view";
@import "components/spinner";

.main-content {
  background-color: #f5f5f5;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  margin: 20px 12px;
  padding: 15px;
}

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

.breadcrumbs {
  margin-top: 49px;
  background-image: -webkit-linear-gradient(#ffffff, #f5f5f5);
  background-image: linear-gradient(#ffffff, #f5f5f5);
  border: 1px solid #ddd;
  padding: 5px 15px;

  button {
    float: left;
    padding: 3px 12px;
  }
}

.breadcrumb {
  padding: 4px 15px;
  margin-bottom: 0;
  list-style: none;
  background: transparent;
}

.breadcrumb li{
  display: inline-block;
  color: #000;
  a {
    color: #000;
  }
}

.breadcrumb > li:before{
  content: "/ " !important; // Unicode space added since inline-block means non-collapsing white-space
  padding: 0 5px;
  color: #000;
}

.breadcrumb > li.first:before {
  content: " " !important;
}

.breadcrumb li.active{
  color: #000;
}

.modal-body {
  overflow-y: scroll;
  max-height: 550px;
  text-align: center;
}

.modal-content img {
  max-width: 100%;
}

.table-view {
  width: 100%;
  margin-top: 20px;

  thead {
    border-left: 1px solid #cdcdcd;
  }

  th {
    padding: 10px;
    background-image: -webkit-linear-gradient(#eeeeee, #e0e1e2);
    background-image: linear-gradient(#eeeeee, #e0e1e2);
    border-bottom: 1px solid #cdcdcd;
    border-right: 1px solid #cdcdcd;
    font-size: 12px;
    text-shadow: 0px 1px #fff;
  }

  td {
    padding: 10px;
    border-bottom: 1px solid #cdcdcd;
    font-size: 12px;
  }

  .actions {
    button {
      margin-right: 5px;
    }
  }

}

.table-striped {
  width: 100%;
  margin-top: 20px;

  thead {
    border-left: 1px solid #cdcdcd;
  }

  th {
    padding: 10px;
    background-image: -webkit-linear-gradient(#eeeeee, #e0e1e2);
    background-image: linear-gradient(#eeeeee, #e0e1e2);
    border-bottom: 1px solid #cdcdcd;
    border-right: 1px solid #cdcdcd;
    font-size: 12px;
    text-shadow: 0px 1px #fff;
    width:20%;
  }

  td {
    padding: 10px;
    border-bottom: 1px solid #cdcdcd;
    font-size: 12px;
    width:80%;
  }

  .actions {
    button {
      margin-right: 5px;
    }
  }

}

.batch-actions .btn {
  margin-bottom: -2px;
  padding: 4px 12px;
  .caret {
    margin-left: 5px;
  }
}

.table-header-settings {
  margin-left: 10px;
  .btn {
    margin-bottom: -2px;
    padding: 4px 12px;
    .glyphicon {
      vertical-align: text-top;
    }
  }
}

.navbar-inverse .navbar-nav > li > a {
  color: #fff;
  &:hover {
    text-decoration: underline;
  }
}

.per-page {
  float: right;
  margin: 35px 15px 0 0;
  button {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: normal;
  }
}

.pager, .pagination {
  margin: 35px 0 0;
  li {
    margin-right: 10px;
  }

}

.checkbox-list{
  width: 50px !important;
}

.table-item-actions {
  .btn {
    margin-bottom: 5px;
  }
}

.form-horizontal {
  margin-left: 0;

  .form-group {
    max-width: 500px;
    margin-left: 0;
  }

  .btn-warning {
    margin-left: 10px;
  }
}

.show-details {
  tr {
    border-bottom: 1px solid #cdcdcd;
  }
  th {
    padding: 10px;
    font-size: 12px;
    background-color: #e0e1e2;
  }
  td {
    background-color: #e0e1e2;
    padding: 10px;
    font-size: 12px;
  }

}

html, body {
  margin: 10px;
}

.breadcrumb-action {
  .btn{
    margin-right: 5px;
  }
}

.search-container {

  .search {
    margin-top:10px;
    margin-left: 0px;

    .controls {
      .ember-text-field {
        display:inline;
        border-radius: 3px;
        border: 1px solid rgb(180,180,180);
      }
    }

    .search-button{
      margin-top: 10px;
    }
  }
}


.admin-form {

  .admin-attribute {
    margin-bottom: 10px;

    .controls {
      display:inline;
      margin-left: 10px;

      .ember-text-field {
        width: 400px;
        border: 1px solid rgb(180,180,180);
        border-radius: 3px;
      }
    }
  }

  .admin-fileupload {
    margin-bottom: 10px;

    .asset_wrapper {

      .ember-view {
        margin-bottom: 10px;
        .asset{

          .btn-danger{
            vertical-align: top;
            margin-left: 10px;
          }
        }
      }
    }

  }
}

.thumbnail {
  position: relative;
  padding: 0px;
}

.thumbnail img {
  width: 100%;
}

.delete-asset {
  position: absolute;
  top: 0px;
  right: 15px;
}

.asset_holder li {
  list-style: none;
  display: inline;
}

.loading-container {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.71);
  top: 0;
  left: 0;
}

.loading-indicator {
  color: white;
  margin: 0 auto;
}

.loading-text {
  font-size: 1.3vmax;
}

.error-indicator {
  color: white;
  margin: 0 auto;
}

.error-header {
  font-size: 3vmax;
  display: block;
  width: 100%;
}

.red {
  color: red;
}

.error-footer {
  display: block;
  width: 100%;
  margin-top: 5rem;
  color: #d2d2d2;
}