@if $debugging == true {
  *{border:solid 1px red;background:rgba(255,0,0,.2)}
}

%block {
  width: px(125);
  height: px(110);
  padding-top: px(25);
  margin: 0 px(10) px(10) 0;
  display: block;
}
%side-expand {
  // margin-left: -#{px(24)};
  // margin-right: -#{px(24)};
}

html {
  font-size: $html-font-size + px;
}

.#{$alias} {
  font-family: $primary_font;

  .#{$alias}-message {
    font-size: px(12);
      border-bottom: px(1) solid #d2d2d2;
      padding: px(45) px(8) px(45) px(45);
      position: relative;
      vertical-align: middle;
      cursor: default;
      background-color: $light-gray;
      background-position: px(12) px(12);
      background-repeat: no-repeat;
      // margin-bottom: px(15);

    &.#{$alias}-error {
        background-color: $danger;
        border-color: #eb979b;
        color: $white;
        width: 100%;
        background-repeat: no-repeat;
        background-position: px(25) px(27);
        border-bottom-left-radius: px(3);
        border-bottom-right-radius: px(3);
        &:before {
            font-family: FontAwesome;
          font-size: px(26);
          content: "\f06a";
          margin-right: px(20);
          vertical-align: middle;
        }
        div {
          &.#{$alias}-error-details,
          span {
            margin-left: -#{px(15)};
            margin-top: px(30);
          }
        }
        span {
          margin-bottom: px(20);
        }

        a {
          color: $orange;
        }
        h3 {
          font-weight: $medium;
          color: $black;
          font-size: px(18);
          line-height: px(39);
        }
        p,
        div {
            margin: 0;
          margin-top: -#{px(18)};
          font-weight: $normal;
          font-size: px(14);
          line-height: px(35);
          margin-left: px(40);
        }
        &.#{$alias}-error-using-module {
          @include border-radius(px(3));
          border-bottom: none;
          &:before {
            font-size: px(36);
          }
        } 
    }
    &.#{$alias}-success {
      background: $success;
      color: $white;
    }
    &.#{$alias}-warning {
      background: $warning;
      color: $white;
    }
    &.#{$alias}-info {
      background-color: $info;
        background-image: url(images/message-info.png);
        border-color: #a6d3e8;
        color: $white;
        background-repeat: no-repeat;
        padding: px(19) 0 px(19) px(62);
        background-position: px(25) px(17);
        margin-left: 0px;
        margin-top: px(2);
        h3 {
          font-weight: $medium;
          color: $black;
          font-size: px(18);
          line-height: px(39);
        }
        p {
            margin: 0;
          margin-top: -#{px(18)};
          font-weight: $normal;
          font-size: px(14);
          line-height: px(35);
        } 
    }
  }
  
  .#{$alias}-custom-checkbox {
    cursor: pointer;
    
    i {
      background-image: url('images/checkbox.png');
      width: px(18);
      height: px(18);
      &.checked {
        background-position: px(18) 0 ;
      }
    }
  }
  
  .#{$alias}-list-table-right-col {
    &:nth-child(3) {
      clear: right;
    }
    
    .#{$alias}-box-show-per-pages {
      float: right;
      label {
        width: px(62) !important;
      }
      select {
        width: px(96) !important;
      }
    }
    .#{$alias}-list-table-pagination {
      clear: none;
      float: right;

      .tablenav-pages {
        margin-right: px(5) !important;
      }
    }
  }
  ##{$alias}-lightbox-overlay {
    border-radius: 4px !important;
    height: 100.2% !important;
    width: 100.2% !important;
    border: 1px solid transparent;
    left: -#{px(1.5)} !important;
    top: -#{px(1)} !important;  
    ##{$alias}-lightbox-container {
      left: 15% !important;
      top: px(120) !important;
      h1 {
        width: px(1001) !important;
        i {
          color: $white;
        }
      }
      th,
      td {
        padding: px(10);
      }
    }
  }
  ##{$alias}-error-popup {
    background: #d9534f;
    color: $white;
    left: 50%;
    padding: px(20) px(40);
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    h2 {
      color: $white;
      i{
        &.fa {
          margin-right: px(5);
        }
      }
    }
    ##{$alias}-ajax-error-reason-title {
      font-size: px(16);
    }
    ##{$alias}-ajax-error-reasons {
      li{
        list-style: inside none disc;
      }
      a {
        color: #fff;
        cursor: help;
        text-decoration: underline;
      }
    }
    ##{$alias}-refresh-button {
      border: px(1) solid #fff;
      color: #fff;
      display: inline-block;
      margin: 0 auto;
      padding: px(5) px(10);
      &:hover {
        opacity: 0.8;
      }
      i{
        &.fa {
          margin-right: px(5);
        }
      }
    }
  }
  .panel {
    // margin-bottom: px(38);
  }

  a {
    &:focus {
      outline: none;
      box-shadow: none;
    }
    &:hover {
      text-decoration: none;
    }
  }
  .#{$alias}-no-padding {
    padding: 0 !important;
  }
  .#{$alias}-callout {
    padding: px(32) px(24);
    line-height: px(28);
    background: lighten($gray,52%);
    &.#{$alias}-callout-default {
      border-left: solid px(2) $gray;
      a {
        color: $gray;
      }
    }
    &.#{$alias}-callout-primary {
      border-left: solid px(2) $primary;
      a {
        color: $primary;
      }
    }
    &.#{$alias}-callout-secondary {
      border-left: solid px(2) $secondary;
      a {
        color: $secondary;
      }
    }
    &.#{$alias}-callout-success {
      border-left: solid px(2) $success;
      a {
        color: $success;
      }
    }
    &.#{$alias}-callout-info {
      border-left: solid px(2) $info;
      a {
        color: $info;
      }
    }
    &.#{$alias}-callout-warning {
      border-left: solid px(2) $warning;
      a {
        color: $warning;
      }
    }
    &.#{$alias}-callout-danger {
      border-left: solid px(2) $danger;
      a {
        color: $danger;
      }
    }
  }
  
  .#{$alias}-form-button,
  .#{$alias}-form-button-small {
    padding: px(10) px(16);
    border: none 0;
    border-radius: px($border-radius);
    cursor: pointer;
    font-size: px(11);
    font-weight: $bold;
    text-transform: uppercase;
    text-decoration: none;
    &.#{$alias}-form-button-info {
      color: $white;
      background: $info;
      &:hover {
        background: darken($info, 20%);
      }
    }
    &.#{$alias}-form-button-success {
      color: $white;
      background: $success;
      &:hover {
        background: darken($success, 20%);
      }
    }
    &.#{$alias}-form-button-warning {
      color: $white;
      background: $warning;
      &:hover {
        background: darken($warning, 20%);
      }
    }
    &.#{$alias}-form-button-primary {
      color: $white;
      background: $primary;
      &:hover {
        background: darken($primary, 20%);
      }
    }
    &.#{$alias}-form-button-danger {
      color: $white;
      background: $danger;
      &:hover {
        background: darken($danger, 20%);
      }
    }

    &.#{$alias}-form-button-small {
      padding: px(4) px(15);
      height: px(28);
      font-size: px(10);
    }
  }

  a.#{$alias}-form-button,
  a.#{$alias}-form-button-small {
    display: inline-block;
    height: auto;
    line-height: px(20);
  }
  
  .#{$alias}-content {
      width: 100%;
      min-height: px(600);
      padding-bottom: px(20);
      padding-left: px(5);
      margin: 0;
      position: relative;
      display: table;
      &>* {
        z-index: 1;
        display: table-cell;
        position: relative;
        height: 100%;
      }
    &:before {
      content: '';
      top: 0;
      right: 0;
      bottom: 0;
      left: -#{px(20)};
      z-index: 0;
      position: absolute;
      display: block;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/403670+0,2675b9+20,2454a2+47,26957d+68,4ebd45+100 */
      background: $gradient1;
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDAzNjcwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMjY3NWI5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDclIiBzdG9wLWNvbG9yPSIjMjQ1NGEyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjglIiBzdG9wLWNvbG9yPSIjMjY5NTdkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRlYmQ0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
      background: -moz-linear-gradient(-56deg,  $gradient1 0%, $gradient2 20%, $gradient3 47%, $gradient4 68%, $gradient5 100%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,$gradient1), color-stop(20%,$gradient2), color-stop(47%,$gradient3), color-stop(68%,$gradient4), color-stop(100%,$gradient5));
      background: -webkit-linear-gradient(-56deg,  $gradient1 0%,$gradient2 20%,$gradient3 47%,$gradient4 68%,$gradient5 100%);
      background: -o-linear-gradient(-56deg,  $gradient1 0%,$gradient2 20%,$gradient3 47%,$gradient4 68%,$gradient5 100%);
      background: -ms-linear-gradient(-56deg,  $gradient1 0%,$gradient2 20%,$gradient3 47%,$gradient4 68%,$gradient5 100%);
      background: linear-gradient(146deg,  $gradient1 0%,$gradient2 20%,$gradient3 47%,$gradient4 68%,$gradient5 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient1}', endColorstr='#{$gradient5}',GradientType=1 );
    }
    .#{$alias}-sidebar {
      padding: px(34) 0;
      width: px(268);
      vertical-align: top;
      
      &,
      a {
        color: $white;
      }
      
      .logo {
        position: relative;
      }
      
      .#{$alias}-title {
        position: relative;
        font-size: px(30);
        display: inline-block;
        padding-top: px(36);
        padding-bottom: px(54);
        font-family: $primary_font;

        &:hover {
          color: $primary;
        }

        span {
          position: absolute;
          top: px(50);
          right: 0;
          font-size: px(18);
          font-weight: $light;

          i {
            color: #ef9f00;
            font-weight: $bold;
            font-style: normal;
          }
        }
      }
      .#{$alias}-nav {
        .#{$alias}-nav-title {
          font-size: px(15);
          font-weight: $bold;
          margin-bottom: px(19);
          overflow-x: hidden;
          padding-top: px(12);
          white-space: nowrap;
          width: 97%;
          &:after {
            content: '';
            width: 100%;
            height: px(1);
            margin-left: px(30);
            margin-top: px(8);
            background: rgba($white,.3);
            display: inline-block;
            vertical-align: top;
          }
        }
        ul {
          margin-bottom: px(14);
          li.#{$alias}-section-dashboard {
            a {
              font-size: px(15);
            }
          }
          li {
            &.active {
              > a {
                color: $orange;
    
                i {
                  color: $white;
                }
              }
              .#{$alias}-sub-menu {
                display: block;
              }
            }
            a {
              font-size: px(14);
              font-weight: $bold;
              line-height: px(30);
              text-decoration: none;
              text-shadow: 0 1px 2px rgba(0,0,0,.25);
              
              i, & > span:first-child {
                margin-right: px(9);
                vertical-align: middle;
              }

              &:hover, 
              &.active {
                color: $orange;

                i {
                  color: $white;
                }
              }
            }
            .#{$alias}-sub-menu {
              display: none;
            }
            ul {
              li {
                margin: px(6) 0 0;
                padding-left: px(30);
                
                &:first-child {
                  margin-top: px(10);
                }
                &.active {
                  > a {
                    color: $orange;
    
                    i {
                      color: $white;
                    }
                  }
                }
                a {
                  font-size: px(12);
                  font-weight: $normal;
                  line-height: px(25);
                }
              }
            }
          }
        }
      }
    }
    .#{$alias}-main {
      padding: px(22) px(20);
      position: relative;
      .panel {
        color: $gray;
        h1 {
          font-size: px(24);
          font-weight: $medium;
        }
        h2 {
          margin: 0;
          font-size: px(18);
          color: $black;
        }
        img.#{$alias}-spaced {
          margin-right: px(16);
        }
      }
      ##{$alias}-status-box {
          background: #e67e22;
        color: #fff;
        display: block;
        padding: px(10) px(23);
        &.#{$alias}-error {
          background: #c0392b;
        }
        &.#{$alias}-success {
          background: #68c64b;
        }
        &.#{$alias}-info {
          background: #2980b9;
        }
      }
    }
    .#{$alias}-tab {
      color: $gray;
      border-right: solid px(1) $medium-gray;
      display: inline-block;
      padding: px(21) px(28) px(20) px(24);
      text-transform: uppercase;
      &:hover {
        color: $primary;
        background: lighten($gray, 50%);
      }
      img {
        margin-right: px(16);
      }
    }
    .#{$alias}-dashboard-icons {
      ul {
        margin: 0 0 -#{px(25)} 0;
        li {
          display: inline-block;
        }
      }
    }
    .#{$alias}-dashboard-icons {
      ul {
        li {
          margin: 0;
          vertical-align: text-top;
          a {
            @extend %block;
            background: lighten($gray, 52%);
            color: $gray;
            font-weight: $medium;
            border-radius: px($border-radius-small);
            font-size: px(12);
            text-align: center;
            position: relative;
            overflow: hidden;
            //overflow bug fix
            opacity: .99;

            i, & > span:first-child {
              display: block;
              margin: auto;
              padding-bottom: px(10);
              font-size: px(36);
              transform: scale(.9);
              transition: $transition_links;
              position: relative;
              color: $primary;
            }

            span {
              position: relative;
              z-index: 99;
            }

            &:before {
              content: '';
              background-color: $primary;
              width: 140%;
              height: 150%;
              position: absolute;
              top: 90%;
              left: -110%;
              transform: rotate(45deg);
              transition: $transition_links;
              z-index: 0;
            }

            &:hover {
              color: #fff;

              &:before {
                top: -25%;
                left: -20%;
              }
              
              i, & > span:first-child {
                transform: scale(1);
                top: -#{px(2)};
                color: $white;
              }
            }
          }
        }
      }
    }
    .#{$alias}-support {
      font-size: px(16);
      strong {
        color: $black;
      }
    }
    .#{$alias}-changelog {
      article {
        height: px(280);
        padding: px(22);
        font-size: px(13);
        border: solid px(1) lighten($gray,40%);
        border-radius: px($border-radius-big);
        background: lighten($gray,52%);
        overflow-y: auto;

        h2 {
          font-size: px(14);
        }
        h3 {
          font-size: px(12);
          padding: px(2) 0;
          margin: px(2) 0;
        }
      }
    }

    .#{$alias}-setup {
      &.#{$alias}-panel {
        .#{$alias}-panel-body {
          .panel-heading {
            padding: 0;
          }
          .#{$alias}-form-row {
            @extend %side-expand !optional;
          }
        }
        .#{$alias}-tabs-header {
          @extend %side-expand !optional;
          font-size: 0;
          //margin-top: -#{px(24)};
          //margin-bottom: px(24);
          background: $light-gray;
            //margin-left: -#{px(24)};
            //margin-right: -#{px(24)};
          //margin: -#{px(13)} -#{px(16)} 0;

          li {
            display: inline-block;
            margin: 0;
            padding: 0;
            margin-right: px(2);
            margin-bottom: px(0);

            &.#{$alias}-section-dashboard a {
              font-size: px(15);
              font-weight: $bold;
            }

            a {
              font-family: $primary_font;
              display: inline-block;
              font-size: px(14);
              padding: px(20) px(24);
              color: $black;
              text-decoration: none;

              &:hover,
              &.active {
                color: #e41e26;
                background: $white;
              }
            }
          }
        }
        .#{$alias}-panel-footer {
          padding: px(24);
          @extend %side-expand !optional;
        }
        .#{$alias}-form-label {
          width: px(180);
          height: px(40);
          padding-top: px(10);
          display: block;
          float: left;
        }
        .#{$alias}-form-item {
          margin-left: px(180);
        }

        input[type="text"],
        select,
        textarea {
          width: 100%;
          height: auto;
          padding: px(10) px(16);
          border: solid px(1) lighten($gray,45%);
          border-radius: px($border-radius);
          clear: both;
        }
        input[type="checkbox"],
        input[type="radio"] {
          margin-top: px(12);
          outline: none;
        } 
        textarea {
          height: px(100);
        }
        .#{$alias}-form-note {
          font-size: px(12);
          font-weight: $medium;
          color: lighten($gray,25%);
          display: block;
          margin-top: px(10);
        }
        .#{$alias}-multiselect-half {
          display: inline-block;
          width: 42%;

          select {
            height: auto;
          }
        }
        .multisel_l2r_btn {
          padding-top: px(20);
          width: 90%;
        }
      }
    }
  }

  .#{$alias}-section-header {
    .#{$alias}-panel-heading {
      padding: px(24);
      h1 {
        color: $black;
        border: none;
        padding: 0;
        padding-bottom: px(20);
      }
    }
  }

  .#{$alias}-tab {
    font-size: px(11);
    font-weight: $medium;
    padding-top: px(20);

    &:last-child {
      margin-left: -4px;
    }

    > span, i {
      bottom: -2px;
      font-size: px(15);
      padding-right: px(10);
      position: relative;

      &.#{$alias}-icon-other_products {
        color: $danger;
      }
    }
  }

  .#{$alias}-demo-keys {
    strong {
      color: lighten($primary, 5%);
    }

    h3 {
      font-size: px(13);
    }

    h4 {
      font-size: px(14);
    }

    margin-bottom: px(30);
    background: $light-gray;
    border-left-color: $info !important;
    color: $gray;

    div.last-requests {
      a {
        color: $white;
      }
    }

    table {
      display: none;
      margin-top: px(20);
      border: 1px solid $white;
      thead tr {
        background: $info;
        th {
          padding: px(5) px(10);
          color: $white;
        }
      }

      tbody tr {
        // background: lighten( $gray, 40% );
        background: $white;

        td {
          padding: px(5) px(10);
          color: lighten( $black, 10% );
        }
      }
    }
  }

  /* Pagination */
  .tablenav {
    display: inline-block;
    margin: 0;
    vertical-align: top;

    .tablenav-pages {
      margin: 0;

      .displaying-num {
        margin-right: px(9);
      }

      .displaying-num,
      .paging-input {
        font-size: px(14);
        line-height: px(35);
        vertical-align: middle;
      }

      .pagination-links {

        .first-page,
        .prev-page,
        .next-page,
        .last-page {
          @include border-radius(px(3));
          background: #f2f2f2;
          border: none;
          height: px(32);
          margin-right: -#{px(1)};
          padding-top: px(7);
          width: px(40);

          &:hover {
            background: $orange;
            color: $white;
          }
        }

        .paging-input {

          .current-page {
            @include border-radius(px(3));
            background: $orange;
            border: none;
            color: $white;
            height: px(32);
            margin-right: px(9);
            outline: none;
            padding-top: px(5);
            vertical-align: top;
            width: px(40) !important;
          }

          .total-pages {
            padding-right: px(8);
          }
        }
      }
    }
  }

  .#{$alias}-box-show-per-pages,
  .tablenav {
    margin: px(15) 0 0;
  }

  .#{$alias}-box-show-per-pages {
    margin-right: px(1);
    
    select {
      @include border-radius(3px);
      display: inline-block;
      font-size: px(14);
      height: px(32);
      line-height: px(25);
      padding-left: px(9);
      width: px(66);

      &:active {
        height: px(32);
      }
      
      &:focus {
        height: px(32);
      }
    }

    label {
      color: #383838;
      font-size: px(14);
      font-weight: $normal;
      line-height: px(25);
      margin-left: px(6);
      padding-top: px(4);
      vertical-align: top;
    }
  }

  /* Tables */
  .#{$alias}-table {
    &, th, td {
      border: px(1) solid $medium-gray;
    }

    thead {
      background: $light-gray;
      min-height: px(30);
    }
  }
}