@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;
}

.psp-box-update {
  padding:30px;
}

.psp-update-text{
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 24px;
}
.psp-sidebar img {
    width: auto !important;
    max-width: inherit !important
}

.#{$alias}-numtoordinal {
    width: 30px;
    height: 30px;
    display: inline-block;
    color: #fff;
    background-color: #37474F;
    border-radius: 3px;
    padding: 7px 5px 5px 5px;
    font-size: 13px;
    margin-right: 10px;
    text-align: center;
}

##{$alias}-lightbox-seo-report-response .#{$alias}-multikw-tab-menu {
  height: 60px;
}


##{$alias}-lightbox-container .#{$alias}-seo-status-container {
    margin: 20px 10px 0px 10px;
}

##{$alias}-lightbox-container .#{$alias}-multikw .#{$alias}-dashboard-box {
  padding-top:5px;
}
.subtabsHeader {
  margin-left: 10px;
    li {
          display: inline-block;
      a {
        padding: 10px;
        margin-right: 10px;
        color: $orange;
      }
  }
}

.subtabsHeader .active {
  color: $orange;
  background: #f2f2f2;

}

/* Progress Bar */
.#{$alias}-progress-small {
	display: inline-block;
	position: relative;
	width: px(200); 
	margin: px(4);
	background: #fff;
	margin-right: px(50);
	text-align: left;
  height:9px;
  border: 1px solid #f2f2f2;

	.#{$alias}-progress-bar {
		display: block;
		height: px(3);
		position: relative;
		-webkit-transition: 0.4s linear;
		-moz-transition: 0.4s linear;
		-o-transition: 0.4s linear;
		transition: 0.4s linear;
		width: px(45);
		-webkit-transition-property: width, background-color;
		-moz-transition-property: width, background-color;
		-o-transition-property: width, background-color;
		transition-property: width, background-color;
		div {
			display: inline-block;
		}
		/* define the progress bar colors by sizes */
		&.size_0_20 {
			 background: repeating-linear-gradient(-160deg, #e74c3c, #e74c3c 5px, #de7368 5px, #de7368 10px);
		}
		&.size_20_40 {
			//background-color: #e67e22;
      background: repeating-linear-gradient(-160deg, #ff7800, #ff7800 5px, #ffa376 5px, #ffa376 10px);
		}
		&.size_40_60,
		&.size_60_80 {
			background-color: #f1c40f;
		}
		&.size_80_100 {
			background-color: #4caf50;
		}
	}
	.#{$alias}-progress-score {
		width: px(38);
		background: #fff;
		text-align: center;
		cursor: default;
		position: absolute;
		line-height: px(14);
		vertical-align: middle;
		color: #2d2d2d;
		font-weight: bold;
		font-size: px(13);
		font-family: $primary-font;
    border:none;
    top:-3px;
	}
}

.#{$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("#framework_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;
        border-radius: 3px;
        h3 {
          font-weight: $medium;
          color: $white;
          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("#framework_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 {
    position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	
    ##{$alias}-lightbox-container {
      left:50%;
	  top:50%;
	  position:fixed;
	  transform: translate(-50%, -50%);
      > 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 {
    border: none !important;
  }

  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: 12px 30px;
    border: none 0;
    border-radius: px($border-radius);
    cursor: pointer;
    font-size: px(12);
    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 !important;
      background: $danger;
      &:hover {
        background: darken($danger, 20%);
      }
    }

    &.#{$alias}-form-button-small {
      padding: px(4) px(15) !important;
      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(240);
      vertical-align: top;

      &.#{$alias}-sidebar-collapsed {
        width: px(20);
        z-index: 99;

        .#{$alias}-nav li {
          position: relative;
          .#{$alias}-sub-menu {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            position: absolute;
            right: -#{px(318)};
            top: -#{px(18)};
            width: px(300);
            background-color: #b83803;
            padding-top: 10px;
            padding-bottom: 10px;
          }
        }
      }
      &,
      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: #fff;
        }

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

          i {
            color: #fff;
            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;
              }
              .#{$alias}-sub-menu {
                display: block;
              }
            }
            a {
              font-size: px(14);
              font-weight: $bold;
              line-height: px(30);
              text-decoration: none;
              
              i, & > span:first-child {
                margin-right: px(9);
                vertical-align: middle;
              }

              &:hover, 
              &.active {
                color: $orange;
              }
            }
            .#{$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;
                  }
                }
                a {
                  font-size: px(12);
                  font-weight: $normal;
                  line-height: px(25);
                }
              }
            }
          }
          li.psp-section-collapse_menu {
            opacity: .5;
            &:hover {
              opacity: 1;
              color: #fff;
              a {
                color: #fff;
              }
            }
          }
        }
      }
    }
    .psp-form {
      padding-top: 0px !important;
  }
    .#{$alias}-main {
      padding: px(22) px(20);
      position: relative;
      .panel {
        border-radius: 0 !important;
        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);
    }
  }
  
	##{$alias}-ajax-response {
		position: relative;
	}
	##{$alias}-ajaxLoadingBox {
		/*width: px(60);*/
		padding-left: px(40);
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: px(-40);
		margin-top: px(-20);
		background: #fff url("#framework_url/images/ajax-loader.gif") no-repeat px(10) center;
	}

##{$alias}-tab-div-id-page_status .#{$alias}-multikw-tab-menu{
  height:59px;
 }
  /* Multi Keywords - sub tabs */
  .#{$alias}-multikw {
	.#{$alias}-multikw-tab-menu {
		 
		height: 75px;
    background: #fff;
		margin: 0px 0px 0px 0px;
    border-radius:3px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: -30px;
 

		a {
			display: inline-block;
		  padding: 8px 21px 7px 12px;
			font: normal 13px Arial, Helvetica, sans-serif;
			text-decoration: none;
			color: $black; 
			float: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
      border-radius:3px;
      margin-right: 10px;

			&:hover,
      &.open {
        color: #fff;
        background-color: #1d4054;

        .#{$alias}-progress-score {
          color: #fff;
        }

        .#{$alias}-numtoordinal {
          background: #4caf50;
        }
			}
			&:active, &:focus, &:active {
  			outline: none;
  		}


      .#{$alias}-progress {
        width: px(120);
        margin-left: 0;

        .#{$alias}-progress-score {
          background: none;
        }
      }
		}
	}


	.#{$alias}-multikw-tab-container {
		width: 98%;
		margin: 0% 1% 1% 1%;
	}
  .#{$alias}-multikw-meta-box-container {
    background-color:#fafafa;
    margin-top:50px;
  }
	.#{$alias}-dashboard-box {
		border-radius: 3px;
		-webkit-box-shadow: 0 1px 0 1px #fff;
		-moz-box-shadow: 0 1px 0 1px #fff;
		box-shadow: 0 1px 0 1px #fff;
		float: left;
		margin: -18px 0 1% 1.6%;
		min-height: 140px;
		background-color: #fff;
    padding-top:20px;
		&:first-child {
		margin-left: 0px;
		}
		&.span_3_of_3 {
		width: 100%;
		}
		&.span_2_of_3 {
		width: 66.1%;
		}
		&.span_2_of_1 {
		width: 32.2%;
		}
		&.span_2_of_2 {
		width: 49%;
		}

		h1 {
			color: #2d2d2d;
			position: relative;
			font: bold 16px Arial, Helvetica, sans-serif !important;
			width: 97%;
			display: block;
			border-bottom: 1px solid #f2f2f2;
			padding: 0px 0px 8px 0px;
			margin: 10px 1.5% 10px 1.5%;
     
			a {
				display: block;
				width: 17px;
				height: 15px;
				position: absolute;
				top: 0px;
				right: 0px;
			}


		}
     h1:before {
         font-family: 'seo-checks';
         font-size: px(16);
         content: "\e903";
         margin-right: 10px;
      }
	}
		.#{$alias}-dashboard-box-content {
			margin: 10px 1.5% 10px 1.5%;
			width: 97%;
			
			> table.form-table > tbody > tr > td:nth-child(1) {
				width: 25%;
			}
		}
  }
}

.#{$alias} {
  .#{$alias}-form-button-group {
    font-size: px(16);
    float: left;
    margin-right: px(2);
    padding: px(5) px(5);
    
    &:last-child {
      margin-right: 0;
    }

    i.fa-eye {
      color: #ffa800;
    }
    i.fa-eye-slash {
      color: #27ae60;
    }
    i.fa-refresh {
      color: #795548;
    }
    i.fa-edit {
      color: #3194f1;
    }
    i.fa-times {
      color: #e41e26;
    }
  }
}

.psp-icon-content_spinner:before {
  content: "\e90d";
}

.tipsy_menu {
  .tipsy-inner {
    background-color: #000;
  }
  .tipsy-arrow {
    display: none;
  }
}

