.card {
  background: black; //$card-black-background;
  border: 0;
  position: relative;
  width: 100%;
  margin-bottom: 30px;
  box-shadow: $box-shadow;

  label {
    color: rgba(#fff, 0.6);
  }

  .card-title {
    margin-bottom: 0.75rem;
  }

  .card-body {
    padding: 15px;

    &.table-full-width {
      padding-left: 0;
      padding-right: 0;
    }

    .card-title {
      color: #fff;
      text-transform: inherit;
      font-weight: $font-weight-light;
      margin-bottom: 0.75rem;
    }

    .card-description,
    .card-category {
      color: rgba(#fff, 0.6);
    }
  }

  .card-header {
    &:not([data-background-color]) {
      background-color: transparent;
    }
    padding: 15px 15px 0;
    border: 0;
    color: rgba(#fff, 0.8);

    .card-title {
      color: #fff;
      font-weight: 100;
    }

    .card-category {
      color: gray;
      margin-bottom: 5px;
      font-weight: 300;
    }
  }

  .map {
    border-radius: $border-radius-sm;

    &.map-big {
      height: 420px;
    }
  }

  &.card-white {
    background: #fff;

    .card-title {
      color: $black;
    }
    .card-category,
    .stats {
      color: gray; // $card-stats-gray;
    }

    //style for inputs

    @include form-control-placeholder(rgba($black, 0.4), 1);
    .has-danger {
      .form-control,
      .input-group-prepend .input-group-text {
        border-color: $danger-states;
      }
    }

    .input-group-prepend .input-group-text {
      border-color: rgba($black-states, 0.2);
      color: $black-states;
    }

    .form-control {
      color: $black;
      border-color: $black; // rgba($black-states,0.2);
      &:focus {
        border-color: $primary;
      }
    }
    label:not(.btn):not(.error) {
      color: inherit; // $default;
    }

    .form-group.no-border,
    .input-group.no-border {
      .form-control,
      .form-control + .input-group-prepend .input-group-text,
      .form-control + .input-group-append .input-group-text,
      .input-group-prepend .input-group-text,
      .input-group-append .input-group-text {
        background-color: gray; // $opacity-gray-3;
        &:focus,
        &:active,
        &:active {
          background-color: gray; // $opacity-gray-5;
        }
      }

      .form-control {
        &:focus {
          & + .input-group-prepend .input-group-text,
          & + .input-group-append .input-group-text {
            background-color: transparent; // $transparent-bg;
          }
        }
      }
    }

    .input-group[disabled] {
      .input-group-prepend .input-group-text,
      .input-group-append .input-group-text {
        background-color: $black;
      }
    }

    .form-control[disabled],
    .form-control[readonly],
    fieldset[disabled] .form-control {
      background: gray; //$light-gray;
      border-color: black; //rgba($black-states,0.3);
    }

    .input-group-focus {
      .input-group-prepend .input-group-text,
      .input-group-append .input-group-text,
      .form-control {
        background-color: #fff;
        border-color: $primary;
      }

      &.no-border {
        .input-group-prepend .input-group-text,
        .input-group-append .input-group-text {
          background-color: gray; // $opacity-gray-5;
        }
      }
    }
    .input-group-prepend .input-group-text {
      border-right: none;
    }

    .input-group-append .input-group-text {
      border-left: none;
    }

    .has-danger .form-control:focus,
    .has-success.input-group-focus .input-group-append .input-group-text,
    .has-success.input-group-focus .input-group-prepend .input-group-text {
      border-color: red; // $danger-states;
    }

    .has-success .form-control:focus,
    .has-success.input-group-focus .input-group-append .input-group-text,
    .has-success.input-group-focus .input-group-prepend .input-group-text {
      border-color: darken($success, 10%);
    }
  }

  &.card-plain {
    background: transparent;
    box-shadow: none;
  }

  .image {
    overflow: hidden;
    height: 200px;
    position: relative;
  }

  .avatar {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: 15px;
  }

  label {
    font-size: $font-size-sm;
    margin-bottom: 5px;
  }

  .card-footer {
    background-color: transparent;
    border: 0;
    padding: 15px;

    .stats {
      i {
        margin-right: 5px;
        position: relative;
      }
    }

    h6 {
      margin-bottom: 0;
      padding: 7px 0;
    }
  }
}

.card-body {
  padding: $card-spacer-y;
}

.card-chart {
  overflow: hidden;
  .card-header {
    .card-title {
      i {
        font-size: 16px;
        margin-right: 5px;
        margin-bottom: 3px;
      }
    }
    .card-category {
      margin-bottom: 5px;
    }
  }
  .card-body {
    padding-left: 5px;
    padding-right: 5px;
    .tab-space {
      padding: 0;
    }
  }
  .table {
    margin-bottom: 0;

    td {
      border-top: none;
      border-bottom: 1px solid rgba(#fff, 0.1);
    }
  }

  .card-progress {
    margin-top: 30px;
    padding: 0 10px;
  }

  .chart-area {
    height: 220px;
    width: 100%;
  }
  .card-footer {
    margin-top: 15px;

    .stats {
      color: gray; // $dark-gray;
    }
  }

  .dropdown {
    position: absolute;
    right: 20px;
    top: 20px;

    .btn {
      margin: 0;
    }
  }

  &.card-chart-pie {
    .chart-area {
      padding: 10px 0 25px;
      height: auto;
    }

    .card-title {
      margin-bottom: 10px;
      i {
        font-size: 1rem;
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .card.card-chart {
    .card-header .btn-group-toggle {
      .tim-icons {
        font-size: $font-size-base;
        top: -1px;
      }
    }
  }
}