/* =============
   Portlets
============= */

.portlet {
  background: $dark;
  border: 1px solid rgba(54, 64, 74, 0.05);
  border-radius: 5px;
  margin-bottom: 20px;
  background-clip: padding-box;

  .portlet-heading {
    border-radius: 3px 3px 0 0;
    padding: 12px 20px;
    .portlet-title {
      float: left;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 0;
      margin-top: 5px;
    }
    .portlet-widgets {
      display: inline-block;
      float: right;
      font-size: 15px;
      line-height: 30px;
      padding-left: 15px;
      position: relative;
      text-align: right;
      .divider {
        margin: 0 5px;
      }
      .collapsed {
        .ion-minus-round {
          &:before {
            content: "\f217" !important;
          }
        }
      }
    }
    a {
      color: #999999;
    }
  }
  .portlet-body {
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 15px;
  }
}

.portlet .portlet-heading.bg-custom a, .portlet .portlet-heading.bg-purple a, .portlet .portlet-heading.bg-info a, .portlet .portlet-heading.bg-success a, .portlet .portlet-heading.bg-primary a, .portlet .portlet-heading.bg-danger a, .portlet .portlet-heading.bg-warning a, .portlet .portlet-heading.bg-inverse a, .portlet .portlet-heading.bg-pink a {
  color: $white;
}

.panel-disabled {
  background: rgba($white, 0.2);
  bottom: 20px;
  left: 10px;
  position: absolute;
  right: 10px;
  top: 0;
  border-radius: 5px;
}

.loader-1 {
  -moz-animation: loaderAnimate 1000ms linear infinite;
  -o-animation: loaderAnimate 1000ms linear infinite;
  -webkit-animation: loaderAnimate 1000ms linear infinite;
  animation: loaderAnimate 1000ms linear infinite;
  clip: rect(0, 30px, 30px, 15px);
  height: 30px;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
  position: absolute;
  top: 50%;
  width: 30px;
  &:after {
    -moz-animation: loaderAnimate2 1000ms ease-in-out infinite;
    -o-animation: loaderAnimate2 1000ms ease-in-out infinite;
    -webkit-animation: loaderAnimate2 1000ms ease-in-out infinite;
    animation: loaderAnimate2 1000ms ease-in-out infinite;
    border-radius: 50%;
    clip: rect(0, 30px, 30px, 15px);
    content: '';
    height: 30px;
    position: absolute;
    width: 30px;
  }
}