.tab-pane {
  display: none;

  &.actived {
    display: block;
  }
}

// modal

#modal-background {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;

  &.level-2 {
    z-index: 2000;
  }
}

.modal-dialog {
  position: fixed;
  display: none;
  width: 420px;
  max-width: 90%;
  max-height: 90%;
  top: 50%;
  left: 50%;
  background: white;
  border: 1px solid #ccc;
  overflow: auto;
  @include box-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
  @include box-sizing(border-box);

  &.no-scroll {
    overflow: visible;
  }

  .modal-header {
    @include clearfix();

    .title {
      padding: 15px;
      float: left;
      font-weight: bold;
      color: #555;
    }

    .modal-close {
      display: inline-block;
      cursor: pointer;
      float: right;
      padding: 15px;
      color: #999;

      i {
        margin-right: 0;
      }

      &:hover {
        color: #444;
      }
    }
  }

  .modal-content {
    padding: 15px;
    @include clearfix();
  }

  .dropdown-menu {
    max-height: 150px;
    overflow: auto;
  }

  .field {
    .input-prepend,
    .input-append,
    #{$all-text-inputs} {
      width: 100%;
    }

    textarea {
      width: 100%;
    }
  }

  .tabs {
    float: left;
    width: 20%;

    nav {
      li {
        a {
          display: block;
          color: #555;
          padding: 15px;
          position: relative;
          overflow: hidden;
          white-space: nowrap;

          &.actived,
          &:hover {
            color: $linkColor;
          }
        }
      }
    }
  }

  .tab-content {
    padding: 15px;
    float: right;
    width: 80%;
    @include box-sizing(border-box);
  }
}
// alert message

#alert-messages {
  position: fixed;
  top: 60px;
  left: 50%;
  width: 500px;
  margin-left: -250px;
  z-index: 2000;

  @media (max-width: 625px) {
    width: 80%;
    margin-left: -40%;
  }

  .alert-message {
    background-color: #999;
    border-radius: $buttonRadius;
    color: #fff;
    margin-bottom: 10px;
    padding: 7px 15px;
    position: relative;
    text-align: center;
    @include box-shadow(0 1px 5px rgba(0, 0, 0, 0.3));

    &.closeable {
      padding-right: 37px;
    }

    .alert-close {
      cursor: pointer;
      position: absolute;
      display: inline-block;
      padding: 7px 10px;
      top: 0;
      right: 0;
      color: white;
    }

    i.icon-remove {
      margin-right: 0;
    }

    &.alert-loading {
      background-color: rgba(0, 0, 0, 0.5);
    }

    &.alert-info {
      background-color: $blue;
    }

    &.alert-warning {
      background-color: $yellow;
    }

    &.alert-error {
      background-color: $red;
    }

    &.alert-success {
      background-color: $green;
    }
  }
}

.flash-message {
  padding: 10px 34px 10px 10px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 3px;
  position: relative;
  @include clearfix();

  .flash-close {
    cursor: pointer;
    position: absolute;
    width: 14px;
    padding: 10px;
    top: 0;
    right: 0;
  }

  &.flash-success {
    background-color: lighten($green, 5%);
    border-color: $green;
    color: #fff;

    a {
      color: #fff;
    }
  }

  &.flash-info {
    background-color: lighten($blue, 5%);
    border-color: $blue;
    color: #fff;

    a {
      color: #fff;
    }
  }

  &.flash-warning {
    background-color: lighten($yellow, 5%);
    border-color: $yellow;
    color: #fff;

    a {
      color: #fff;
    }
  }

  &.flash-error {
    background-color: lighten($red, 5%);
    border-color: $red;
    color: #fff;

    a {
      color: #fff;
    }
  }
}

.two-columns {
  @include clearfix();

  .column {
    float: left;
    width: 45%;
    margin-right: 5%;
  }

  @media (max-width: 480px) {
    .column {
      float: none;
      width: 100%;
      margin-right: 0;
      margin-bottom: 30px;
    }
  }
}

table.nice-table {
  width: 100%;
  margin: 0 auto 20px;
  border: 1px solid #ccc;
  @include box-sizing(border-box);

  tr {
    border-bottom: 1px solid #ddd;
  }

  th {
    text-align: left;
    @include linear-gradient(#fff, #eee);
  }

  th, td {
    padding: 15px;

    &.align-right {
      text-align: right;
    }
  }

  &.max {
    width: 99%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .min {
    width: 1%;
    white-space: nowrap;
  }

  .button {
    display: inline;
  }
}
