$key_required: #FF5722;
$required: #FFC107;
$cond_required: #4caf50;
$error: darken($key_required, 20);

.form-create {

  input,
  select,
  textarea {
    margin: .3em 0;
    width: 100%;
  }

  button {
    float: left;
  }

  .form-create__main {
    //width: 70%;
    tr:nth-child(odd) {
      background: $base-gray-light
    }
  }

  .form-create__key {
    margin: 1em 0;

    span {
      margin: .1em 0;
      font-size: .95em;
    }

    & > span {
      display: block;
    }

    .key {
      overflow: hidden;
      position: relative;

      span:first-of-type {
        width: 35px;
        display: inline-block;
        padding-left: 10px;
      }

      &::before {
        content: "";
        display: inline-block;
        height: inherit;
        width: 7px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        //  background-color: #607D8B;
      }

      &.key_required::before {
        background-color: $key_required;
      }
      &.required::before {
        background-color: $required;
      }
      &.cond_required::before {
        background-color: $cond_required;
      }
    }
  }

  .predefined {
    opacity: .7;
  }


  table{
    border-collapse: collapse;

    .button_filter_data{
      float: right;
      min-width: 55px;
      min-height: 35px;
      border: 1px solid #dcdcdc;
      background: #f4f4f4;
      color: #4BC0A5;
      cursor: pointer;
      text-align: center;

      .fa-search{
        line-height: 30px;
        color: #4BC0A5;
      }

      &:hover{
        border-color: #c3c3c3;

        .fa-search{
          color: #359882 !important;
        }
      }
    }

    tr {
      // force min tr-height to 50px
      &::before {
        min-height: 50px;
        content: '';
        width: 0;
        display: inline-block;
      }

      &.key {
        border: solid;
        border-width: 1px 1px 1px 15px;

        &.key_required {
          background-color: lighten($key_required, 41);
          border-color: $key_required;
        }

        &.required {
          background-color: lighten($required, 45);
          border-color: $required;
        }

        &.cond_required {
          background-color: lighten($cond_required, 47);
          border-color: $cond_required;
        }
        &.error {
          background-color: lighten($error, 30);
          border-color: $error;
        }
      }

    }
  }


  //
  // Add Plants form on Agglomeration eddit view
  //
  #plant-view, #successor-view, #agg-view {
    div{
      width: 100%;
      overflow: hidden;
      display: inline-block;
      float: left;
      margin: 3px 0;
    }

    input {
      max-width: 70px;
      height: 1em;
    }

  }

  #edit-percent {
      position: relative;
      bottom: 2px;
  }

  #change-percent {
    padding: 0px 1px;
    &[contenteditable] {
      background-color: white;
    }

  }

}
