// Define color variables
$grayOne: #151515;
$grayTwo: #616060;
$grayThree: #d9d9d9;
$graySix: #eeeeee;
$grayFour: #f3f3f3;
$grayFive: #f8f8f8;
$wpBlue: #2b76f6;
$Green: #24cb7d;
$brand: #e8294c;
$lightBrand: #FCCFD4;
$veryLightBrand: #fff4f5;
$error: #ff3636;

// Old Styles
/* Links */
.wrap.slimstat a,
[id^="slim_"] a {
  outline: none;
  text-decoration: none;
}

[id^="slim_"] a.slimstat-delete-entry:before {
  color: $error;
}

.slimstat-float-right {
  float: right;
}

/* Filters */
#slimstat-filters-post {
  display: none;
}

#slimstat-filters-form {
  margin-top: 10px;
  padding: 5px;
  position: relative;
  border-radius: 5px;
}

#slimstat-filters input.text,
#slimstat-filters select {
  vertical-align: initial;
  width: 15%;
}

#screen-meta-links {
  position: absolute;
  right: 0;
  z-index: 1;

  .rtl & {
    left: 0;
    right: auto;
  }
}

#slimstat-date-filters {
  padding: 4px 10px 6px 20px;
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: $brand;
  border-radius: 50px;
}

#slimstat-date-filters > a {
  color: #fff;
  white-space: nowrap;
}

#slimstat-date-filters > a::after {
  content: "\f140";
  font: normal 20px/1 "dashicons";
  vertical-align: bottom;
}

#slimstat-date-filters > a.open::after {
  content: "\f142";
}

#slimstat-date-filters .dropdown {
  background-color: #fff;
  box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.1);
  color: #222;
  display: none;
  padding: 12px;
  position: absolute;
  right: -4px;
  top: 35px;
  width: 410px;
  z-index: 120;
  border-radius: 8px;

  .rtl & {
    right: auto;
    left: -4px;
  }
}

#slimstat-date-filters .dropdown strong {
  clear: both;
  display: block;
  font-weight: normal;
  padding: 10px 5px 5px 0;
  text-transform: uppercase;
}

#slimstat-date-filters .dropdown select,
#slimstat-date-filters .dropdown input {
  margin: 0 5px 5px 0;
  height: 27px;
  width: 130px;
}

#slimstat-date-filters .dropdown select.short,
#slimstat-date-filters .dropdown input.short {
  width: 65px;
}

#slimstat-date-filters .dropdown .ui-datepicker-trigger {
  float: right;
  margin: 2px 5px 0 0;

  .rtl & {
    margin: 2px 0 0 5px;
  }
}

#slimstat-current-filters {
  background-color: white;
  color: $grayTwo;
  font-size: 14px;
  overflow: hidden;
  padding: 6px 10px;
  position: relative;
  border-radius: 5px;
  margin-top: 14px;

  @media (max-width: 400px) {
    .button-secondary {
      margin: 2px auto;
    }
  }
}


#slimstat-current-filters .slimstat-remove-filter {
  color: #fff;
}

#slimstat-current-filters .slimstat-filter-list {
  float: left;
  margin: 0;
  padding: 4px 0 5px 5px;
}

#slimstat-current-filters .slimstat-filter-list li {
  display: inline;
  margin: 0 20px 0 0;
  vertical-align: middle;
}

.slimstat-filter-action-button {
  float: right;
  margin-left: 10px !important;
}

/* Reports: Container */
.wrap.slimstat .meta-box-sortables {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-right: -1.3%;

  @media(max-width: 1560px) {
    margin-right: -0.5%;
  }

  .rtl & {
    margin-right: 0;
    margin-left: -1.3%;

    @media(max-width: 1560px) {
      margin-left: -0.5%;
    }

  }
}

/* Single Report */
.wrap.slimstat .postbox,
.wrap.slimstat .sortable-placeholder {
  box-sizing: border-box;
  float: left;
  margin-bottom: 15px;
  min-width: 24.3%;
  overflow: hidden;
  width: 24.3%;
}

.wrap.slimstat .postbox.large {
  width: 49.1%;
}

.wrap.slimstat .postbox.extralarge {
  width: 73.9%;
}

.wrap.slimstat .postbox.full-width {
  width: 98.7%;
}

.sortable-placeholder {
  background-color: #ccc;
  border: 1px dashed #bbb;
  margin-bottom: 9px;
}

/* Single Report: Header and Header Buttons */
.wrap.slimstat .postbox h3 {
  border-bottom: 1px solid #ddd;
  font-size: 1.2em;
  margin: 0;
  padding: 10px;
}

.wrap.slimstat .postbox.tall h3 {
  cursor: auto;
}

.slimstat-tooltip-content {
  display: none;
}

.slimstat .no-refresh .refresh {
  display: none;
}

/* Single Report: Header and Header Buttons - Pagination */
[id^="slim_"] p.pagination {
  font-weight: 600;
  color: black;
  font-size: 14px;
}

[id^="slim_"] p.pagination a {
  color: $grayOne;
  float: right;
  margin-left: 5px;
}

/* Single Report: Inside */
[id^="slim_"] .inside {
  height: 281px;
  margin: 0 !important;
  overflow: auto;
  padding: 0 !important;
}

.wrap.slimstat .postbox.tall .inside {
  height: 605px;
}

[id^="slim_"] p {
  border-bottom: 1px solid $graySix;
  line-height: 1.5em;
  margin: 0;
  min-height: 20px;
  overflow: auto;
  padding: 10px 10px;
  position: relative;
  word-wrap: break-word;
}

[id^="slim_"] p:last-child {
  border-bottom: 0;
}

[id^="slim_"] p .slimstat-tooltip-trigger.corner {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
  left: 0;
}

[id^="slim_"] p span {
  float: right;
}

[id^="slim_"] p span.pageview-screenres {
  margin-left: 10px;
}

[id^="slim_"] .inline-icon {
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  margin-right: 5px;
  vertical-align: middle;
  width: 16px;
  filter: grayscale(40%);
  transition: 0.3s all ease-out;

  &:hover {
    filter: grayscale(0);
  }
}

[id^="slim_"] .spaced {
  margin-left: 15px;
}

#dashboard-widgets-wrap .whois {
  display: none;
}

/* Single Report: Debug Message */
[id^="slim_"] .debug {
  background-color: #000;
  color: #fff;
  display: block;
  font-family: monospace;
  opacity: 0.8;
  padding: 20px;
  position: relative;
}

/* Single Report: Color Coded Entries */
.little-color-box {
  background-color: #eee;
  border: 1px solid #aaa;
  display: block;
  float: left;
  height: 15px;
  margin-right: 10px;
  width: 15px;
}

[id^="slim_"] .header{
  background-color: $grayFive;
  color: #111;
}

[id^="slim_"] .header.is-search-engine,
.little-color-box.is-search-engine {
  background-color: #E2DBFF;
  color: $grayOne;
}

[id^="slim_"] .header.is-direct,
.little-color-box.is-direct {
  background-color: $grayFive;
  color: #111;
}

[id^="slim_"] .header.is-known-user,
.little-color-box.is-known-user {
  background-color: #DDF0FF;
}

[id^="slim_"] .header.is-known-visitor,
.little-color-box.is-known-visitor {
  background-color: #FFE9C8;
}

[id^="slim_"] .header.is-spam,
.little-color-box.is-spam {
  background-color: #EEFF89;
  color: #222;
}

[id^="slim_"] p.loading {
  text-align: center;
  width: 100%;
  padding: 0;
  margin: 0;
  top: 50%;
  line-height: 0;
  transform: translateY(-50%);
  overflow: hidden;
}

[id^="slim_"] p.nodata {
  border: 0;
  color: #999;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

/* Single Report: Chart */
.chart-placeholder {
  height: 280px;
  overflow: hidden;
}

/* Single Report: Modal Window */
.ui-widget-overlay {
  background-color: #222;
  filter: alpha(opacity=60);
  height: 100%;
  opacity: 0.6;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100 !important;
}

.ui-dialog.slimstat {
  border: 0;
  border-radius: 0;
  padding: 0;
  width: 90% !important;
  z-index: 100500 !important;
}

.ui-dialog.slimstat .ui-dialog-titlebar {
  background: #4b8df8;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 1.3em;
  font-weight: normal;
  height: 22px;
  line-height: 1.3em;
  margin: 0;
  padding: 5px 10px;
}

.ui-dialog.slimstat .ui-dialog-titlebar-close {
  background-color: transparent;
  border: 0;
  color: #fff;
  float: right;
  line-height: 1.3em;
  padding: 0;
}

.ui-dialog.slimstat .ui-dialog-titlebar-close:before {
  content: "\e803";
  font-family: slimstat;
}

.ui-dialog .ui-dialog-content {
  clear: both;
}

#slimstat-modal-dialog {
  background-color: #fff;
  display: none;
  max-height: 650px !important;
  overflow: auto;
  padding: 0;
  width: auto;
}

#slimstat-modal-dialog p {
  margin: 0;
  padding: 10px;
}

/* Dashboard Widgets */
#dashboard-widgets [id*="slim_p"].postbox .inside {
  height: 281px;
}

#dashboard-widgets [id*="slim_p"][id*="_01"].postbox .inside {
  height: 290px;
}

#dashboard-widgets #slim_p7_02.postbox .inside {
  height: 320px;
}

.closed .slimScrollDiv {
  height: 0 !important;
}

.nav-tabs {
  margin: 20px 1px 0;
}

.nav-tab {
  font-size: 14px;
  margin: 0 5px 0 0;
}

.nav-tab a {
  color: $grayOne;
  display: block;
  text-decoration: none;
}

.form-table {
  border: 1px solid #ccc;
  margin-top: 0;
}

.form-table th {
  font-weight: 400;
  padding: 15px 10px;
}

.slimstat-options-section-header {
  background-color: #e4e4e4;
  font-size: 1.4em;
  margin: 0;
  padding: 5px 10px;
}

.form-table h3 {
  margin-top: 0;
}

.form-table td span.block-element {
  padding: 0 30px 0 0;
}

.form-table .description {
  color: #999;
  display: block;
  font-style: normal;
  margin-top: 5px;
}

.form-table #slimstat-filter-name,
.form-table #slimstat-filter-operator,
.form-table #slimstat-filter-value {
  width: 20%;
}

[id*="form-slimstat-options"] input[type="number"].small-text {
  width: 85px;
}

[class*="bootstrap-switch-id-addon_network_settings"] {
  float: right;
}

/* Settings */
.CodeMirror {
  height: auto !important;
}

/* Add-ons Page */
.wp-list-table.slimstat-addons {
  margin-bottom: 20px;
}

.wp-list-table.slimstat-addons tbody th {
  border-left: 5px solid #ccc;
}

.wp-list-table.slimstat-addons th,
.wp-list-table.slimstat-addons td {
  border-bottom: 1px solid #ccc;
}

.wp-list-table.slimstat-addons .active th {
  border-color: #10a062;
  border-style: solid;
  border-radius: 0 0 0 5px;
}

.wp-list-table.slimstat-addons .active td {
  border: 0;
}

/* Edit Posts Page */
.column-wp-slimstat {
  text-align: center !important;
  width: 3em;
}

.slimstat-icon:before {
  content: "\f239";
  font-family: dashicons;
}

/* RTL Support */
.rtl #slimstat-current-filters .slimstat-filter-list {
  padding: 0 0 0 75px;
}

.rtl #slimstat-current-filters .slimstat-filter-list li {
  margin-left: 20px;
  margin-right: 0;
}

.rtl #slimstat-remove-all-filters {
  left: 5px;
  right: inherit;
}

.rtl #slimstat-date-filters {
  left: 5px;
  right: inherit;
}

.rtl #slimstat-date-filters span {
  left: 0;
  right: inherit;
}

.rtl .wrap.slimstat .postbox {
  float: right;
}

.rtl .slimScrollBar {
  left: 2px !important;
  right: inherit !important;
}

.rtl [id^="slim_"] p.pagination a {
  float: left;
}

.rtl [id^="slim_"] p span {
  float: left;
}

.rtl .qtip-content {
  text-align: right;
}

.rtl .form-table td span.block-element {
  padding: 0 0 0 30px;
}

/* Customizer */
.slimstat-layout .postbox-container {
  border: 1px solid $grayThree;
  float: none;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 10px;
}

.slimstat-layout .meta-box-sortables {
  overflow: hidden;
  padding: 10px;
}

.slimstat-layout .postbox-container span.title {
  background-color: #c0c0c0;
  color: #fff;
  font-size: 16px;
  margin-bottom: 0;
  padding: 10px;
}

.slimstat-layout .postbox,
.slimstat-layout .sortable-placeholder {
  float: left;
  margin: 0 10px 10px 0;
  min-width: 285px;
}

.slimstat-layout h3 {
  border: 0;
  font-weight: 300;
  font-size: 1.1em;
  margin: 0;
  padding: 5px 10px;
}

/* Responsive */
@media screen and (max-width: 1560px) {
  .wrap.slimstat .postbox {
    width: 32.8%;
  }
  .wrap.slimstat .postbox.large {
    width: 66.1%;
  }
  .wrap.slimstat .postbox.extralarge,
  .wrap.slimstat .postbox.full-width {
    width: 99.4%;
  }
  .wrap.slimstat .postbox h3 {
    font-size: 1em;
    line-height: 1.2em;
  }
  .wrap.slimstat .postbox p {
    font-size: 1em;
    line-height: 1.5em;
  }
}

@media screen and (max-width: 1080px) {
  .wrap.slimstat .postbox {
    width: 49.125%;
  }
  .wrap.slimstat .postbox.large,
  .wrap.slimstat .postbox.extralarge,
  .wrap.slimstat .postbox.full-width {
    width: 99%;
  }
}

@media screen and (max-width: 800px) {
  #slimstat-filters input.text,
  #slimstat-filters select {
    margin: 0 0.5% 0 0;
    width: 26%;
  }
  .wp-core-ui .button-secondary {
    height: 35px;
  }
  #slimstat-date-filters {
    margin-top: 5px;
    position: relative;
    right: inherit;
    top: inherit;
  }
  .wrap.slimstat .postbox,
  .wrap.slimstat .postbox.large,
  .wrap.slimstat .postbox.extralarge,
  .wrap.slimstat .postbox.full-width {
    margin: 0 0 10px;
    width: 99.5%;
  }
  .wrap.slimstat .postbox h3 {
    font-size: 1.4em;
    line-height: 1em;
  }
  .wrap.slimstat .postbox p {
    font-size: 1.1em;
    line-height: 1.4em;
  }

  /* Settings */
  .nav-tab {
    display: block;
    margin: 0;
  }
  .form-table th {
    font-size: 1.4em;
  }
  .form-table th label {
    font-size: 1em;
  }
  .form-table td {
    padding: 10px;
  }
  .form-table .button-primary,
  .form-table .button-secondary {
    height: 30px;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
  }
  .form-table #slimstat-filter-name,
  .form-table #slimstat-filter-operator,
  .form-table #slimstat-filter-value {
    width: 100%;
  }

  /* Add-on: WP SlimStat - User Overview */
  [id^="slim_"] .users .column-name {
    display: none;
  }
}

/* Fontello - Custom Icon Fonts for SlimStat | Uses Fontelico (C) 2012 by Fontello project, Elusive (C) 2013 by Aristeides Stathopoulos, Font Awesome (C) 2012 by Dave Gandy | https://www.fontello.com */
@font-face {
  font-family: "slimstat";
  src: url("slimstat.eot?58272494");
  src: url("slimstat.eot?58272494#iefix") format("embedded-opentype"), url("slimstat.svg?58272494#fontello") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "slimstat";
  src: url("data:application/octet-stream;base64, ") format("woff"),
  url("data:application/octet-stream;base64, ") format("truetype");
}

[class^="slimstat-font-"]:before,
[class*=" slimstat-font-"]:before {
  color: $grayTwo;
  font-family: "slimstat";
  font-style: normal;
  font-weight: normal;
  speak: none;
  font-size: 14px;

  text-decoration: inherit;
  width: 1em;
  margin: 0 0.2em;
  text-align: center;

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
}

.slimstat-font-trash:before {
  content: "\e800";
}

/* '' */
.slimstat-font-clock:before {
  content: "\e801";
}

/* '' */
.slimstat-font-search:before {
  content: "\e802";
}

/* '' */
.slimstat-font-cancel:before {
  content: '';
  background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_417_931)'%3E%3Cpath d='M5.89353 4.99459L8.95228 1.93609C9.06613 1.81821 9.12912 1.66034 9.1277 1.49646C9.12628 1.33259 9.06055 1.17583 8.94466 1.05995C8.82878 0.944073 8.67203 0.878342 8.50815 0.876918C8.34428 0.875494 8.18641 0.938491 8.06853 1.05234L5.00978 4.11084L1.95128 1.05234C1.89328 0.994263 1.8244 0.94819 1.74858 0.916756C1.67276 0.885321 1.59148 0.869141 1.5094 0.869141C1.42733 0.869141 1.34605 0.885321 1.27023 0.916756C1.19441 0.94819 1.12553 0.994263 1.06753 1.05234C1.00945 1.11034 0.96338 1.17922 0.931945 1.25504C0.90051 1.33086 0.88433 1.41214 0.88433 1.49421C0.88433 1.57629 0.90051 1.65757 0.931945 1.73339C0.96338 1.80921 1.00945 1.87809 1.06753 1.93609L4.12603 4.99459L1.06053 8.06034C0.972939 8.14767 0.913252 8.25904 0.889038 8.38033C0.864824 8.50162 0.877172 8.62737 0.924517 8.74164C0.971862 8.85591 1.05207 8.95354 1.15498 9.02216C1.25788 9.09078 1.37884 9.1273 1.50253 9.12709C1.66253 9.12709 1.82253 9.06609 1.94453 8.94409L5.01003 5.87834L8.06853 8.93684C8.12652 8.99495 8.19542 9.04103 8.27127 9.07244C8.34712 9.10384 8.42843 9.11995 8.51053 9.11984C8.63411 9.11981 8.75491 9.08315 8.85765 9.01449C8.9604 8.94583 9.04049 8.84825 9.08779 8.73408C9.1351 8.61991 9.14749 8.49429 9.12342 8.37308C9.09934 8.25186 9.03987 8.14051 8.95253 8.05309L5.89353 4.99459Z' fill='%23FF3636'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_417_931'%3E%3Crect width='9' height='9' fill='white' transform='translate(0.509766 0.494141)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center center/contain;
  width: 12px;
  height: 12px;
  display: inline-block;
  transform: translateY(1px);
}

/* '' */
.slimstat-font-upload:before {
  content: "\e805";
}

/* '' */
.slimstat-font-download-cloud:before {
  content: "\e806";
}

/* '' */
.slimstat-font-upload-cloud:before {
  content: "\e807";
}

/* '' */
.slimstat-font-location-1:before {
  content: "\e808";
}

/* '' */
.slimstat-font-arrows-cw-1:before {
  content: "\e809";
}

/* '' */
.slimstat-font-login:before {
  content: "\e80a";
}

/* '' */
.slimstat-font-logout:before {
  content: "\e80b";
}

/* '' */
.slimstat-font-angle-left:before {
  content: "\e80c";
}

/* '' */
.slimstat-font-angle-right:before {
  content: "\e80d";
}

/* '' */
.slimstat-font-angle-double-left:before {
  content: "\e80e";
}

/* '' */
.slimstat-font-angle-double-right:before {
  content: "\e80f";
}

/* '' */
.slimstat-font-arrows-cw:before {
  content: "\e810";
}

/* '' */
.slimstat-font-doc:before {
  content: "\e811";
}

/* '' */
.slimstat-font-spin4:before {
  content: "\e812";
  font-size: 26px;
  overflow: hidden;
  margin: 0;
}

/* '' */
.slimstat-font-edit:before {
  content: "\e813";
}

/* '' */
.slimstat-font-gauge:before {
  content: "\e814";
}

/* '' */
.slimstat-font-stopwatch:before {
  content: "\e815";
}

/* '' */
.slimstat-font-docs:before {
  content: "\e816";
}

/* '' */
.slimstat-font-user-plus:before {
  content: "\e817";
}

/* '' */
.slimstat-font-user-times:before {
  content: "\e818";
}

/* '' */
.slimstat-font-minus-circled:before {
  content: "\e819";
}

/* '' */

.animate-spin {
  -moz-animation: spin 3s infinite linear;
  -o-animation: spin 3s infinite linear;
  -webkit-animation: spin 3s infinite linear;
  animation: spin 3s infinite linear;
  display: inline-block;
  line-height: 1em;
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-o-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-ms-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* qTip2 v3.0.3 basic | https://qtip2.com */
.qtip {
  position: absolute;
  left: -28000px;
  top: -28000px;
  display: none;
  max-width: 280px;
  min-width: 50px;
  font-size: 1em;
  line-height: 1.5em;
  direction: ltr;
  box-shadow: none;
  border-radius: 5px;
  padding: 0;
}

.qtip-content,
.qtip-titlebar {
  position: relative;
  overflow: hidden;
}

.qtip-content {
  padding: 5px 9px;
  text-align: left;
  word-wrap: break-word;
}

.qtip-titlebar {
  padding: 5px 35px 5px 10px;
  border-radius: 0 0 1px;
  font-weight: 700;
}

.qtip-titlebar + .qtip-content {
  border-top-width: 0 !important;
}

.qtip-close {
  position: absolute;
  right: -9px;
  top: -9px;
  z-index: 11;
  cursor: pointer;
  outline: 0;
  border: 1px solid transparent;
}

.qtip-titlebar .qtip-close {
  right: 4px;
  top: 50%;
  margin-top: -9px;
}

* html .qtip-titlebar .qtip-close {
  top: 16px;
}

.qtip-icon .ui-icon,
.qtip-titlebar .ui-icon {
  display: block;
  text-indent: -1000em;
  direction: ltr;
}

.qtip-icon,
.qtip-icon .ui-icon {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none;
}

.qtip-icon .ui-icon {
  width: 18px;
  height: 14px;
  line-height: 1.5em;
  text-align: center;
  text-indent: 0;
  font: normal 700 1em Tahoma, sans-serif;
  color: inherit;
  background: -100em -100em no-repeat;
}

.qtip-default {
  border: 1px solid #555;
  background-color: rgba(0, 0, 0, 0.9);
  color: #ddd;
}

.qtip-default .qtip-titlebar {
  background-color: #ffef93;
}

.qtip-default .qtip-icon {
  border-color: #ccc;
  background: #f1f1f1;
  color: #777;
}

.qtip-default .qtip-titlebar .qtip-close {
  border-color: #aaa;
  color: #111;
}

.qtip .qtip-tip {
  margin: 0 auto;
  overflow: hidden;
  z-index: 10;
}

.qtip .qtip-tip,
x:-o-prefocus {
  visibility: hidden;
}

.qtip .qtip-tip,
.qtip .qtip-tip .qtip-vml,
.qtip .qtip-tip canvas {
  position: absolute;
  color: #123456;
  background: 0 0;
  border: 0 dashed transparent;
}

.qtip .qtip-tip canvas {
  top: 0;
  left: 0;
}

.qtip .qtip-tip .qtip-vml {
  behavior: url(#default#VML);
  display: inline-block;
  visibility: visible;
}

/*! jQuery UI - v1.10.3 | https://jqueryui.com */
#ui-datepicker-div {
  display: none;
}

.ui-datepicker {
  background-color: #fff;
  width: 17em;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 5px 0px 40px rgba(0, 0, 0, 0.2);
  border: none !important;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 4px;
  width: 26px;
  height: 26px;
  cursor: pointer;

  &:hover {
    background-color: white;
  }

  span {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    font-weight: 600;
    color: $grayTwo;
    transition: .3s all ease-out;

    &:hover {
      color: $brand;
    }
  }
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month-year {
  width: 100%;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 49%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: 700;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

/*! bootstrap-switch - v3.3.4 | https://www.bootstrap-switch.org */
.bootstrap-switch {
  display: inline-block;
  direction: ltr;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #ccc;
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;
  z-index: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.bootstrap-switch .bootstrap-switch-container {
  display: inline-block;
  top: 0;
  border-radius: 4px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-label {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block !important;
  height: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
}

.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-on {
  text-align: center;
  z-index: 1;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
  color: #fff;
  background: #337ab7;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
  color: #fff;
  background: #5bc0de;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  color: #fff;
  background: $brand;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
  background: #f0ad4e;
  color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
  color: #fff;
  background: #d9534f;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
  color: #000;
  background: #eee;
}

.bootstrap-switch .bootstrap-switch-label {
  text-align: center;
  margin-top: -1px;
  margin-bottom: -1px;
  z-index: 100;
  color: #333;
  background: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.bootstrap-switch .bootstrap-switch-handle-off {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.bootstrap-switch input[type="radio"],
.bootstrap-switch input[type="checkbox"] {
  position: absolute !important;
  top: 0;
  left: 0;
  margin: 0;
  z-index: -1;
  opacity: 0 !important;
  filter: alpha(opacity=0);
}

.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
}

.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
  padding: 6px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}

.bootstrap-switch.bootstrap-switch-disabled,
.bootstrap-switch.bootstrap-switch-indeterminate,
.bootstrap-switch.bootstrap-switch-readonly {
  cursor: default !important;
}

.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: default !important;
}

.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
  -webkit-transition: margin-left 0.5s;
  -o-transition: margin-left 0.5s;
  transition: margin-left 0.5s;
}

.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
  border-radius: 0 3px 3px 0;
}

.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
  border-radius: 3px 0 0 3px;
}

.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

/* jQuery tagEditor v1.0.21 | https://github.com/Pixabay/jQuery-tagEditor */
.tag-editor {
  list-style-type: none;
  padding: 0 5px 0 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #eee;
  cursor: text;
  font: normal 14px sans-serif;
  color: #555;
  background: #fff;
  line-height: 20px;
}

.tag-editor li {
  display: block;
  float: left;
  overflow: hidden;
  margin: 3px 0;
}

.tag-editor div {
  float: left;
  padding: 0 4px;
}

.tag-editor .placeholder {
  padding: 0 8px;
  color: #bbb;
}

.tag-editor .tag-editor-spacer {
  padding: 0;
  width: 8px;
  overflow: hidden;
  color: transparent;
  background: none;
}

.tag-editor input {
  vertical-align: inherit;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: text;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  font-style: inherit;
  box-shadow: none;
  background: none;
  color: $grayOne;
}

.tag-editor-hidden-src {
  position: absolute !important;
  left: -99999px;
}

.tag-editor ::-ms-clear {
  display: none;
}

.tag-editor .tag-editor-tag {
  padding-left: 5px;
  color: #46799b;
  background: #e0eaf1;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px 0 0 2px;
}

.tag-editor .tag-editor-delete {
  background: #e0eaf1;
  cursor: pointer;
  border-radius: 0 2px 2px 0;
  padding-left: 3px;
  padding-right: 4px;
}

.tag-editor .tag-editor-delete i {
  line-height: 18px;
  display: inline-block;
}

.tag-editor .tag-editor-delete i:before {
  font-size: 16px;
  color: #8ba7ba;
  content: "×";
  font-style: normal;
}

.tag-editor .tag-editor-delete:hover i:before {
  color: #d65454;
}

.tag-editor .tag-editor-tag.active + .tag-editor-delete,
.tag-editor .tag-editor-tag.active + .tag-editor-delete i {
  visibility: hidden;
  cursor: text;
}

.tag-editor .tag-editor-tag.active {
  background: none !important;
}

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
  font-size: 14px;
}

.ui-front {
  z-index: 9999;
}

.ui-menu {
  list-style: none;
  padding: 1px;
  margin: 0;
  display: block;
  outline: none;
}

.ui-menu .ui-menu-item a {
  text-decoration: none;
  display: block;
  padding: 2px 0.4em;
  line-height: 1.4;
  min-height: 0;
}

.ui-widget-content {
  border: 1px solid #bbb;
  background: #fff;
  color: #555;
}

.ui-widget-content a {
  color: #46799b;
}

.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: #e0eaf1;
}

.ui-helper-hidden-accessible {
  display: none;
}

.backdrop-container {
  position: relative;

  @media(min-width: 780px) {
    margin-left: -20px;
    margin-top: -20px;
    padding-left: 20px;
    padding-top: 20px;
  }
}

// New Styles
.wrap.slimstat-config,
.wrap.slimstat {
  box-sizing: border-box;
  overflow: hidden;

  * {
    box-sizing: border-box;
    text-decoration: none;
  }

  .upgrade-pro-background {
    width: 100%;
  }

  select, input, textarea {
    &:focus {
      outline: none;
      box-shadow: none;
      border-color: $brand !important;
    }
  }

  .button-secondary {
    background-color: white;
    border-radius: 50px;
    border: 1px solid $brand;
    color: $brand;
    padding: 0px 12px;
    height: auto;
  }

  .button-primary {
    background-color: $brand;
    border-radius: 50px;
    border: none;
    color: white;
    padding: 0px 12px;
    height: auto;
  }

  #datepicker-backdrop {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 2;
    display: none;
  }

  #slimstat-date-filters {
    a.slimstat-filter-link {
      background-color: $grayFive;
      display: block;
      float: left;
      margin: 0 5px 5px 0;
      padding: 7px 5px;
      width: 123px;
      border-radius: 50px;
      text-align: center;
      color: $grayOne;
      transition: .3s all ease-out;

      &:hover {
        background-color: $grayFour;
      }
    }

    input, select {
      border: 2px solid $grayFour;
      border-radius: 50px;
    }

    input[type='submit'] {
      background-color: $brand;
      border: none;
      border-radius: 50px;
      transition: .3s all ease-out;

      &:hover {
        background-color: black;
      }
    }
  }

  .button-primary {
    &.slimstat-settings-button {
      background-color: $brand;
      color: white;
      border-radius: 50px;
      border: none;
      transition: .3s all ease-out;
      padding-left: 12px;
      padding-right: 12px;

      &:hover {
        background-color: black;
      }
    }
  }

  h2 {
    color: black;
    font-weight: 600;
    font-size: 24px;
  }

  .nav-tabs {
    display: flex;
    background-color: white;
    border-radius: 5px;
    overflow-y: hidden;

    .nav-tab {
      transition: 0.3s all ease-out;
      border: none;
      background-color: transparent;
      padding: 0;

      a {
        color: $grayOne;
        font-size: 14px;
        padding: 15px 15px;

        &:focus {
          outline: none;
          box-shadow: none;
        }

        &:hover {
          color: $brand;
        }
      }

      &.nav-tab-active {
        border-bottom: 5px solid $brand;

        a {
          color: $brand;

        }
      }
    }

    @media (max-width: 900px) {
      overflow-x: scroll;
    }
  }

  .form-table {
    border: none;
    margin-top: 25px;
    border-radius: 10px;

    tr {
      &:first-of-type {
        .slimstat-options-section-header {
          border-radius: 10px 10px 0 0;
        }
      }

      border-bottom: 1px solid $graySix;

      &.alternate {
        background-color: white;
      }

      th {
        padding: 25px 20px;
        color: $grayOne;
      }

      td {
        padding: 25px 20px;
        color: $grayOne;

        input {
          border: 2px solid $grayFour;
          border-radius: 50px;
        }

        textarea {
          border: 2px solid $grayFour;
          border-radius: 10px;
        }

        select {
          border: 2px solid $grayFour;
          border-radius: 50px;
        }

        .button-primary {
          border: 1px solid $brand;
          color: $brand;
          background-color: white;
          border-radius: 50px;
        }

        .tag-editor {
          border-radius: 6px;
          padding: 6px 4px;

          .tag-editor-tag {
            color: $brand;
            background-color: $veryLightBrand;
          }

          .tag-editor-delete {
            color: $brand;
            background-color: $veryLightBrand;

            i::before {
              color: $brand;
            }
          }
        }

        .bootstrap-switch-wrapper {
          border: 2px solid $grayFour;
          border-radius: 50px;

          .bootstrap-switch-container {
            span.bootstrap-switch-handle-on {
              border-radius: 50px;
              padding: 5px 0px;
            }

            span.bootstrap-switch-handle-off {
              border-radius: 50px;
              padding: 5px 0px;
              background-color: $grayFive;
              color: $grayOne;
            }
          }
        }
      }

      .description {
        color: $grayTwo;
        margin-top: 7px;
        display: block;
      }
    }
  }

  .slimstat-options-section-header {
    background-color: $grayFive;
    padding: 20px 20px;
    font-weight: 500;
    color: $grayOne;
    font-size: 16px;
  }

  #slimstat-filters {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    .form-field {
      position: relative;
    }

    select {
      border: 1px solid $graySix;
      border-radius: 5px;
      display: block;
      width: 100%;
      margin: 0;
    }

    input {
      border: 1px solid $graySix;
      border-radius: 5px;
      display: block;
      width: 100%;
      margin: 0;
      max-width: 95%;

      &[type="submit"] {
        border: 1px solid $brand;
        background-color: white;
        color: $brand;
        width: auto;

        .rtl & {
          margin-left: 0;
        }
      }
    }

    @media (max-width: 400px) {
      margin-bottom: 12px;

      .form-field {
        flex: 0 0 50%;
        margin-bottom: 10px;
      }
    }
  }

  .meta-box-sortables.ui-sortable {
    form {
      display: none;
    }

    .postbox {
      border: none;
      border-radius: 10px;
      -webkit-box-shadow: 3px 0px 15px 0px rgba(0, 0, 0, 0.02);
      -moz-box-shadow: 3px 0px 15px 0px rgba(0, 0, 0, 0.02);
      box-shadow: 3px 0px 15px 0px rgba(0, 0, 0, 0.02);
      margin-right: 0.5%;

      .rtl & {
        margin-right: 0;
        margin-left: 0.5%;
      }

      .slimScrollDiv {
        .slimstat-tooltip-trigger.corner {
          display: inline-block;
          float: none;
          margin-right: 3px;
          cursor: help;

          &::before {
            color: #aaaaaa;
            transform: scaleX(-1);
            display: block;
          }
        }
      }

      .slimstat-header-buttons {
        padding: 15px 10px 0 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        float: right;

        .dashicons {
          width: auto;
          height: auto;
        }

        a {
          &:focus {
            box-shadow: none;
          }

          &.refresh {
            padding: 5px 5px;

            &::before {
              transform: translateY(-1px);
              display: block;
              color: $grayTwo;
              transition: .3s all ease-out;
            }
          }

          &.slimstat-font-download {
            padding: 5px 5px;
            border-radius: 5px;
            color: $grayTwo;
            font-weight: 500;
            transition: .3s all ease-out;
            cursor: pointer;

            span.dashicons {
              &::before {
                color: $grayTwo;
                font-size: 18px;
                margin-right: 3px;
                display: block;
                transform: translateY(-2px);
                transition: .3s all ease-out;
              }
            }
          }
        }

        .rtl & {
          float: left;

          a.slimstat-font-download span.dashicons::before {
            margin-right: 0px;
            margin-left: 3px;
          }
        }
      }

      h3 {
        background-color: $grayFive;
        padding: 18px 15px;
        border: none;
        font-size: 14px;

        .header-tooltip {
          &::before {
            color: #aaaaaa;
            padding: 0px 3px;
            transform: translateY(-1px);
            display: block;

            .rtl & {
              transform: translateY(-3px);
            }
          }
        }
      }

      .slimstat-tooltip-trigger {
        a {
          max-width: 80%;
          display: inline-block;
        }
      }
    }
  }

  .slimScrollDiv {
    p {
      padding: 10px 20px;

      &.header {
        //background-color: $grayFive;
        border: none;
      }
    }

    code {
      border-radius: 3px;
      background-color: white;
      padding: 3px 7px;
    }
  }
}

.wrap.slimstat {
  table.widefat {
    border: none;

    tbody {
      tr {
        &:nth-child(even) {
          background-color: $grayFive;
        }

        td {
          vertical-align: middle;
        }

      }
    }

    thead {
      background-color: $veryLightBrand;

      th {
        white-space: nowrap;
        border: none;
        border-top: 1px solid $brand;
        border-bottom: 1px solid $brand;
        color: black;
        padding: 8px 10px;
        vertical-align: middle;

        a {
          color: $brand;
        }
      }
    }
  }
}

.slimstat-header {
  padding: 30px 25px;
  margin-bottom: 20px;
  background-color: #2b2b2b;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-left: -20px;
  box-sizing: border-box;

  .logo {
    width: 180px;
    height: auto;
  }

  .vr-line {
    background-color: #9a9a9a;
    margin: 0 40px;
    display: block;
    width: 1px;
    height: 40px;
  }

  .go-pro {
    text-align: left;

    a {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 3px;
      color: white;
      text-decoration: none;
      font-size: 15px;
      font-weight: 400;
      cursor: pointer;

      .icon {
        background: url("../images/white-right-chevron.png") no-repeat center center/contain;
        width: 10px;
        height: 10px;
        margin-left: 5px;
        display: block;
      }
    }

    p {
      text-align: left;
      font-weight: 300;
      color: white;
      margin: 0;
    }
  }

  .pro-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: white;

    p {
      margin: 0;
    }

    .icon {
      background: url("../images/pro-badge.png") no-repeat center center/contain;
      width: 16px;
      height: 16px;
      margin-right: 7px;
      display: block;
    }
  }

  .rtl & {
    margin-right: -20px;
    margin-left: 0;

    .pro-badge {
      right: auto;
      left: 20px;

      .icon {
        margin-left: 7px;
        margin-right: 0;
      }
    }

    .go-pro {

      a .icon {
        background: url(../images/white-right-chevron.png) no-repeat center center/contain;
        margin-left: 0px;
        margin-right: 5px;
        transform: scaleX(-1);
      }

      p {
        text-align: right;
      }
    }
  }


  @media (max-width: 500px) {
    display: block;

    .vr-line {
      margin: 20px 0;
      width: 100%;
      height: 1px;
    }

    .go-pro {
      margin-top: 20px;
    }

    .pro-badge {
      right: 10px;

      .rtl & {
        left: 10px;
        right: auto;
      }
    }
  }
}

.slimstat.upgrade-pro {

}

.slimstat-layout {
  position: relative;

  .postbox {
    border-radius: 8px !important;
    box-shadow: none !important;

    h3 {
      font-weight: 500;
      padding: 12px 15px !important;
      background-color: white !important;
    }
  }
}

#dashboard-widgets-wrap {
  .postbox {
    .slimstat-tooltip-trigger.corner {
      display: inline-block;
      float: none;
      margin-right: 3px;
      cursor: help;

      &::before {
        color: #aaaaaa;
        display: block;
        transform: scaleX(-1);
      }
    }
  }
}

.slimstat-pro-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 20;
  display: none;
}

.slimstat-pro-modal {
  position: fixed;
  z-index: 30;
  transform: translateX(-50%);
  background-color: white;
  border-radius: 25px;
  box-shadow: 0px 4px 80px rgba(0, 0, 0, 0.15);
  padding: 40px 4%;
  text-align: center;
  box-sizing: border-box;
  max-width: 720px;
  margin-top: 100px;
  left: 50%;
  transform: translate(-50%, 0);
  top: 45%;
  transform: translateX(-50%) translateY(-50%);

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  #slimstat-pro-modal-close {
    position: absolute;
    cursor: pointer;
    top: 30px;
    right: 10%;
    width: 30px;
    height: 30px;
    opacity: .3;
    transition: .3s all ease-out;
    background: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6172 31.1641C24.9015 31.1641 31.6172 24.4483 31.6172 16.1641C31.6172 7.87979 24.9015 1.16406 16.6172 1.16406C8.33292 1.16406 1.61719 7.87979 1.61719 16.1641C1.61719 24.4483 8.33292 31.1641 16.6172 31.1641Z' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21.1172 11.6641L12.1172 20.6641' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.1172 11.6641L21.1172 20.6641' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center / contain;

    &:hover {
      opacity: 1;
    }
  }

  h2 {

    .subtitle {
      font-size: 18px;
      margin-bottom: 12px;
      color: $grayOne;
      display: block;
    }

    .title {
      color: $brand;
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 25px;
      display: block;
    }
  }

  .description {
    color: $grayTwo;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 25px;
  }

  .scroller {
    max-height: 45vh;
    overflow-y: auto;
    /* Customize scrollbar styles for Webkit browsers (Chrome, Safari, newer versions of Opera) */
    scrollbar-width: thin;
    scrollbar-color: #333333 #f5f5f5;

    /* Customize scrollbar styles for older versions of Webkit browsers */
    scrollbar-face-color: #f5f5f5; /* Scrollbar background color */
    scrollbar-arrow-color: #333333; /* Up and down arrow color */
    scrollbar-track-color: #f5f5f5; /* Track color */
    scrollbar-shadow-color: #333333; /* Shadow color */
    scrollbar-highlight-color: #333333; /* Highlight color */
    scrollbar-3dlight-color: #333333; /* 3D light shadow color */
    scrollbar-darkshadow-color: #333333; /* Dark shadow color */

    &::-webkit-scrollbar {
      width: 5px;
    }

    /* Customize scrollbar thumb */
    &::-webkit-scrollbar-thumb {
      background-color: #333333; /* Thumb color */
      border-radius: 10px; /* Rounded corners for the thumb */
    }

    /* Customize scrollbar track */
    &::-webkit-scrollbar-track {
      background-color: #f5f5f5; /* Track color */
    }
  }

  .features-flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .feature-item {
      flex: 0 0 45%;
      border-bottom: 1px solid $grayFour;
      padding: 15px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      h6 {
        color: $grayOne;
        font-weight: 500;
        font-size: 16px;

        .icon {
          transform: translateY(6px);
          width: 20px;
          height: 20px;
          margin-right: 7px;
          display: inline-block;
          background: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4463 7.90039V8.57696C16.4454 10.1628 15.9319 11.7058 14.9823 12.976C14.0328 14.2461 12.6982 15.1753 11.1774 15.625C9.65665 16.0746 8.03129 16.0206 6.54373 15.471C5.05617 14.9215 3.78612 13.9057 2.92298 12.5754C2.05985 11.245 1.64988 9.67128 1.75422 8.08889C1.85857 6.50649 2.47163 5.00021 3.50198 3.79471C4.53233 2.5892 5.92476 1.74905 7.4716 1.39956C9.01844 1.05007 10.6368 1.20997 12.0854 1.8554' stroke='%23E8294C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.445 2.69531L9.09097 10.0567L6.88477 7.85047' stroke='%23E8294C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center / contain;
        }
      }

      .more-info-icon {
        display: block;
        width: 20px;
        height: 20px;
        margin-left: 3px;
        background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.20996 15.4014C12.1434 15.4014 15.332 12.2127 15.332 8.2793C15.332 4.34589 12.1434 1.15723 8.20996 1.15723C4.27655 1.15723 1.08789 4.34589 1.08789 8.2793C1.08789 12.2127 4.27655 15.4014 8.20996 15.4014Z' stroke='%23C3C4C7' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.13672 6.14245C6.30416 5.66645 6.63466 5.26508 7.06968 5.00942C7.5047 4.75376 8.01616 4.6603 8.51348 4.7456C9.0108 4.83091 9.46188 5.08946 9.78683 5.47548C10.1118 5.8615 10.2896 6.35007 10.2889 6.85465C10.2889 8.27907 8.15226 8.99127 8.15226 8.99127' stroke='%23C3C4C7' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.21094 11.8398H8.21769' stroke='%23C3C4C7' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center / contain;
      }
    }
  }

  .go-pro-button {
    display: inline-block;
    padding: 15px 10px;
    width: 250px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: white;
    text-align: center;
    background-color: $brand;
    text-decoration: none;
    margin-top: 35px;
    transition: .3s all ease-out;

    &:hover {
      background-color: black;
    }
  }

  .rtl & {
    .features-flex-box {
      .feature-item {
        h6 .icon {
          margin-left: 7px;
          margin-right: 0;
        }
      }
    }

    #slimstat-pro-modal-close {
      left: 10%;
      right: auto;
    }
  }

  @media(max-width: 780px) {
    border-radius: 15px;
    padding: 20px 20px;
    width: 95%;

    #slimstat-pro-modal-close {
      top: 20px;
      right: 20px;
    }

    h2 {
      .subtitle {
        font-size: 15px;
      }

      .title {
        font-size: 18px;
      }
    }

    .features-flex-box {
      .feature-item {
        flex: 0 0 100%;

        h6 {
          .icon {
            transform: translateY(4px);
          }
        }
      }
    }
  }
}