/*
Theme Name: WPSorter
Theme URI: https://wpsorter.com/
Author: WPSorter
Author URI: https://wpsorter.com/about/
Description: WPSorter: Find, Filter, Sort and Compare WordPress Themes
Tags: WPSorter, Find, Filter, Sort, Compare, WordPress, Themes
Version: 1.0
License: 
License URI:
Text Domain: wpsorter
*/ 

/* CSS Minify
 * Used Minifier = https://www.toptal.com/developers/cssminifier
 */

/* Guttenberg Related
 * https://wordpress.org/gutenberg/
 * https://wordpress.org/gutenberg/handbook/designers-developers/faq/
 * https://make.wordpress.org/core/2018/11/07/classic-editor-plugin-support-window/ = 31-12-2021 - 3 years
 * https://developer.wordpress.org/reference/hooks/replace_editor/
 * https://core.trac.wordpress.org/ticket/45275                                     = Check Ticket - Better Disable
 * https://github.com/WordPress/gutenberg/issues/2457                               = Block Editor - Error with Query Monitor
 */

/* https://offroadcode.com/rem-calculator/
   https://www.calculatorsoup.com/calculators/math/ratios.php
  16px = 1rem - base
  15px = .9375rem
  14px = .875rem
  13px = .8125rem
  12px = .75rem
  11px = .6875rem
  10px = .625rem
   9px = .5625rem
   8px = .5rem
   7px = .4375rem
   6px = .375rem
   5px = .3125rem
   4px = .25rem
   3px = .1875rem
   2px = .125rem
   1px = .0625rem
*/

/* Fonts
- Logo + Slogan: Cambria, Georgia, serif
- Default Text : Verdana, Geneva, Arial, sans-serif
*/

/*
INDEX
- CSS Reset
- Chartist.js Default Styles
- Chartist WPSorter Styles
- Date Picker
- Text for Screen Readers
- WPSorter Defaults
- SVG Icon Base Styles
- Progress Bar
- Site Layout
- Header
- Footer
- Feedback Form
- Homepage
- Flexslider
- Themes
  + Filter Themes = sidebar
  + Nav Themes    = topbar
  + Grid Items    = content
- WPSorter Components
- Single Theme
- Compare Themes
- Defaults Marketplace + Author
- Single Marketplace
- Single Author
- Archive Marketplaces + Archive Authors
- Search Results Page
- Contact Page
- 404 Page
+ Desktop Variants (in same order)
*/


/* Add Local Fonts
* https://developer.chrome.com/docs/lighthouse/performance/font-display/
*/
@font-face {
  font-family: 'flexslider-icon';
  src: url('assets/fonts/flexslider-icon.eot');
  src: url('assets/fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('assets/fonts/flexslider-icon.woff') format('woff'), url('assets/fonts/flexslider-icon.ttf') format('truetype'), url('assets/fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* update reset = versie 8.0.1
 * check = https://github.com/sindresorhus/modern-normalize = wel geupdate
 */
/* CSS Reset
 * normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css 
 */
html {
  line-height: 1.15;                  /* Correct the line height in all browsers */
  -webkit-text-size-adjust: 100%;     /* Prevent adjustments of font size after orientation changes in iOS */
  text-size-adjust: 100%;
}
body {
  margin: 0;                          /* Remove the margin in all browsers */
}
h1 {
  font-size: 2em;                     /* Correct the font size and margin */
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;            /* Add the correct box sizing in Firefox */
  height: 0;
  overflow: visible;                  /* Show the overflow in Edge and IE */
}
pre {
  font-family: monospace, monospace;  /* Correct the inheritance and scaling of font size in all browsers */
  font-size: 1em;                     /* Correct the odd `em` font sizing in all browsers */
}
a {
  background-color: transparent;      /* Remove the gray background on active links in IE10 */
}
abbr[title] {
  border-bottom: none;                /* Remove the bottom border in Chrome 57- */
  text-decoration: underline;         /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline dotted;  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
}
b,
strong {
  font-weight: bolder;                /* Add the correct font weight in Chrome, Edge, and Safari */
}
code,
kbd,
samp {
  font-family: monospace, monospace;  /* Correct the inheritance and scaling of font size in all browsers */
  font-size: 1em;                     /* Correct the odd `em` font sizing in all browsers */
}
small {
  font-size: 80%;                     /* Add the correct font size in all browsers */
}
sub,
sup {                                 /* Prevent `sub` and `sup` elements from affecting the line height */
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;                 /* Remove the border on images inside links in IE10 */
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;               /* Change the font styles in all browsers */
  font-size: 100%;                    /* Change the font styles in all browsers */
  line-height: 1.15;                  /* Change the font styles in all browsers */
  margin: 0;                          /* Remove the margin in Firefox and Safari */
}
button,
input {                               /* Show the overflow */
  overflow: visible;
}
button,
select {                              /* Remove the inheritance of text transform */
  text-transform: none;
}
/* Correct the inability to style clickable types in iOS and Safari */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}
/* Remove the inner border and padding in Firefox */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/* Restore the focus styles unset by the previous rule */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/* Correct the padding in Firefox */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;             /* Correct the text wrapping in Edge and IE */
  color: inherit;                     /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  max-width: 100%;
  padding: 0;                         /* Remove the padding */
  white-space: normal;
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;                     /* Remove the default vertical scrollbar in IE 10+ */
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;             /* Add the correct box sizing in IE 10 */
  padding: 0;                         /* Remove the padding in IE 10 */
}
/* Correct the cursor style of increment and decrement buttons in Chrome */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;      /* Correct the odd appearance in Chrome and Safari */
  appearance: textfield;
  outline-offset: -2px;               /* Correct the outline style in Safari */
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;           /* Remove the inner padding in Chrome and Safari on macOS */
}
::-webkit-file-upload-button {
  -webkit-appearance: button;         /* Correct the inability to style clickable types in iOS and Safari */
  font: inherit;                      /* Change font properties to `inherit` in Safari */
}
details {
  display: block;                     /* Add the correct display in Edge, IE 10+, and Firefox */
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
[hidden] {
  display: none;                      /* Add the correct display in IE 10 */
}


/* Chartist.js Default Styles
 * https://github.com/gionkunz/chartist-js
 * http://gionkunz.github.io/chartist-js/index.html
 */
.ct-label {
  fill: rgba(0,0,0,.4);
  color: rgba(0,0,0,.4);
  font-size: .75rem;
  line-height: 1;
}
.ct-chart-line .ct-label,
.ct-chart-bar .ct-label {
  display: block;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.ct-label.ct-horizontal.ct-start {
  -webkit-box-align: flex-end;
  -webkit-align-items: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  -webkit-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  text-align: left;
  text-anchor: start;
}
.ct-label.ct-horizontal.ct-end {
  -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  text-align: left;
  text-anchor: start;
}
.ct-label.ct-vertical.ct-start {
  -webkit-box-align: flex-end;
  -webkit-align-items: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  -webkit-box-pack: flex-end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: flex-end;
  justify-content: flex-end;
  text-align: right;
  text-anchor: end;
}
.ct-label.ct-vertical.ct-end {
  -webkit-box-align: flex-end;
  -webkit-align-items: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  -webkit-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  text-align: left;
  text-anchor: start;
}
.ct-grid {
  stroke: rgba(0,0,0,.2);
  stroke-width: .0625rem;
  stroke-dasharray: .125rem;
}
.ct-grid-background {
  fill: none;
}
.ct-point {
  stroke-width: .4375rem;
  stroke-linecap: round;
}
/* Point Hover */
.ct-point:hover {
  cursor: pointer;
  stroke-width: .625rem;
}
.ct-line {
  fill: none;
  stroke-width: .1875rem;
}
.ct-area {
  stroke: none;
  fill-opacity: .1;
}
.ct-series-a .ct-point, .ct-series-a .ct-line {
  stroke: #00567f;
}
.ct-series-a .ct-area {
  fill: #00567f;
}
.ct-golden-section {
  display: block;
  position: relative;
  width: 100%;
}
  .ct-golden-section:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 61.804697157%;
  }
  .ct-golden-section:after {
    content: "";
    display: table;
    clear: both;
  }
  .ct-golden-section > svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
.ct-area, .ct-line {
 pointer-events: none;
}
/* Tooltip Styles */
.chartist-tooltip {
  position: absolute;
  display: none;
  white-space: nowrap;
  opacity: 0;
  border: 0;
  min-width: 5rem;
  padding: .5rem;
  background: #e1f5ff;
  color: #333;
  font-size: .75rem;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
  z-index: 20;
  -webkit-transition: opacity .2s linear;
  -moz-transition: opacity .2s linear;
  -o-transition: opacity .2s linear;
  transition: opacity .2s linear;
}
.chartist-tooltip:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -.9375rem;
  border: .9375rem solid transparent;
  border-top-color: #e1f5ff;
}
.chartist-tooltip.tooltip-show {
  opacity: 1;
  display: inline-block;
}
svg.ct-chart-line .ct-area, 
svg.ct-chart-line .ct-line {
  pointer-events: none;
}
/* Legend Styles */
.ct-legend {
  list-style: none;
  text-align: center;
} 
.ct-legend li {
  position: relative;
  padding-left: 1.4375rem;
  margin-right: .625rem;
  margin-bottom: .1875rem;
  cursor: pointer;
  display: inline-block;
}
.ct-legend li:before {
  width: .75rem;
  height: .75rem;
  position: absolute;
  left: 0;
  content: '';
  border: .1875rem solid transparent;
  border-radius: .125rem;
}
.ct-legend li.inactive:before {
  background: transparent;
}
.ct-legend.ct-legend-inside {
  position: absolute;
  top: 0;
  right: 0;
}
.ct-legend.ct-legend-inside li{
  display: block;
  margin: 0;
}
.ct-legend .ct-series-0 {
  margin-right: 2rem;
}
/* Chartist Legend Hover */
.ct-legend:hover li {
  cursor: default;
}


/* Chartist WPSorter Styles */
.chart-container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Compare Table Charts Tooltip */
table#content .chartist-tooltip {
  background: #f2f2f2;
}
table#content .chartist-tooltip::before {
  border-top-color: #f2f2f2;
}


/* 
 * Date Picker 
 */
.ui-datepicker {
  color: #666;
  cursor: default;
  font-weight: bold;
}
.ui-datepicker a {
  text-decoration: none;
}
.ui-datepicker table {
  width: 100%;
  border-spacing: 0;
  background: #fff;
}
/* Header */
.ui-datepicker-header {
  background: #e4e4e4;
} 
.ui-datepicker-header .ui-icon {
  display: none;
}
/* Month */
.ui-datepicker-title {
  text-align: center;
  padding: .25rem
}
/* Next Prev */
.ui-datepicker-prev, 
.ui-datepicker-next {
  display: block;
  width: 1rem;
  height: 1rem;
  text-align: center;
  cursor: pointer;
  float: right;
 /* Chevron Right */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23454342' d='M82.4,50L67.6,35.1L32.4,0L17.6,14.9L52.7,50L17.6,85.1L32.4,100l35.1-35.1L82.4,50L82.4,50L82.4,50z'/%3E%3C/svg%3E");
  margin: .3125rem .375rem -.5rem .375rem;
}
/* Chevron Left */
.ui-datepicker-prev {
  float: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23454342' d='M82.4,50L67.6,35.1L32.4,0L17.6,14.9L52.7,50L17.6,85.1L32.4,100l35.1-35.1L82.4,50L82.4,50L82.4,50z'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}
/* Day Letters */
.ui-datepicker thead {
  background: #fafafa;
}
.ui-datepicker th {
  font-size: .625rem;
  padding: .25rem 0;
  color: #666;
  text-align: center;
  border-bottom: .0625rem solid #e4e4e4;
}
/* First */
.ui-datepicker th:first-of-type,
.ui-datepicker td:first-of-type {
  border-left: .0625rem solid #e4e4e4;
} 
/* Last */
.ui-datepicker th:last-of-type,
.ui-datepicker td:last-of-type {
  border-right: .0625rem solid #e4e4e4;
}
/* Dates */
.ui-datepicker tbody td {
  width: 14.5%;
  text-align: center;
  padding: 0;
  border-right: .0625rem solid #e4e4e4;
  border-bottom: .0625rem solid #e4e4e4;
  overflow: hidden; /* for background color */
}
/* Date Numbers */
.ui-datepicker td span, 
.ui-datepicker td a {
  color: #666;
  padding: .25rem;
}
.ui-datepicker-calendar .ui-state-default {
  display: block;
  background: #e4e4e4;
}
.ui-datepicker-unselectable .ui-state-default {
  color: #c5c5c5;
  background: #fafafa;
}
/* Hover */
.ui-datepicker-calendar .ui-state-hover {
  color: #00567f;
  background: #fafafa;
  text-decoration: none;
}
/* Active */
.ui-datepicker-calendar .ui-state-active {
  color: #fff;
  background: #0071a6;
}
.ui-datepicker-calendar .ui-state-disabled {
  cursor: default;
}
.ui-datepicker-calendar .ui-datepicker-other-month {
  border-right-color: transparent;
} 
/* Date Picker Range */
.highlight .ui-state-default {
  background: #00a6f5;
  color: #fff;
}


/* 
 * Text for Screen Readers
 * https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
 */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  display: block;
  clip: auto !important;
  clip-path: none;
  color: #00567f;
  background-color: #f2f2f2;
  font-size: 1em;
  padding: 15px 23px 14px;
  width: auto;
  height: auto;
  top: 5px;
  left: 5px;
  line-height: normal;
  text-decoration: none;
  z-index: 100000; /* Above WP toolbar. */
}


/* 
 * WPSorter Defaults 
 */
*, 
*::before, 
*::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Wait Cursor for AJAX Calls */
html.wait, 
html.wait * { 
  cursor: wait !important;
}
a {
  color: #00567f;
  text-decoration: none;
  outline: none;
}
a:hover,
a:focus,
a:active {
  text-decoration: underline;
}
h2, 
h3, 
h4 {
  margin: 0;
}
/* Lists */
ul,
ol {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
ul li {
  list-style-type: none;
}
.show {
  display: block;
}
.hide {
  display: none;
}
.error {
  color: #b30000;
  font-weight: bold;
}
.warning {
  color: #d64309;
  font-weight: bold;
}
img {
  height: auto;     /* Make sure images are scaled correctly */
  max-width: 100%;  /* Adhere to container width */
}
fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
legend {
  display: none;
}
/* Hide Radios */
input[type="radio"] {
  display: none;
}
/* Input Number Remove Toggle */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0;
}
/* Input Focus */
input[type="number"]:focus {
  border-color: #00567f;
}
/* Input Disabled */
input:disabled {
  background: #fff;
}
/* Remove Close/Reset Icon */
input[type="search"]::-webkit-search-cancel-button{
    display: none;
}
/* Remove Placeholder Text on Focus */
input:focus::placeholder,
textarea:focus::placeholder { 
  color: transparent;
}
input:focus,
textarea:focus {
  border: .0625rem solid #00567f;
}
/* Label Hover */
label:hover {
  cursor: pointer;
}
/* Chrome - Remove Yellow Background from Feedback email input https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-box-shadow: 0 0 0 100rem #fff inset;
}
/* FireFox = Remove Fade Effect from Placeholder Text */
::-moz-placeholder {
  opacity: 1;
}

/* Buttons */
button {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* Select Dropdown = Filter Themes > Dates (Created/Updated) + Columns + Sort by + Posts per Page */
.select {
  display: flex;
  position: relative;
  width: 9rem;
  color: #666;
  font-size: .6875rem;
  cursor: pointer;
}
.dropdown {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: auto;
  font-weight: bold;
  background: #fff;
  padding: 0 1rem 0 .375rem;
  border: .0625rem solid #e4e4e4;
  border-radius: .125rem;
}
/* Arrow Down */
.dropdown::after { 
  content: '';
  width: 0;
  height: 0;
  border: .375rem solid transparent;
  border-color: #666 transparent transparent transparent;
  position: absolute;
  top: .375rem;
  right: .3125rem;
  z-index: 2;
}
/* Arrow Up */
.dropdown:active::after, 
.dropdown.active::after {
  top: -.0625rem;
  border-color: transparent transparent #666 transparent;
}
.dropdown:not(.active):hover::after {
  border-top-color: #333;
}
/* Selected = Hide after Triangle */
ul.selected .dropdown:not(.active):hover::after {
  border-top-color: transparent;
}
/* Hide Arrow Top on Click */
.dropdown:active:hover::after {
  border-top-color: transparent;
}
/* Selected */
ul.selected .dropdown {
  background: #fff;
  color: #00567f;
}
/* Dropdown Open = Hide/Mask Selected Text*/
.dropdown.active,
ul.selected .dropdown.active {
  color: transparent;
}
/* Selected = Hide Arrow - Dates */
ul.selected .dropdown::after {
  border-color: transparent;
}
/* Selected = Hide Arrow - Sort by */
.select.set .dropdown::after {
   border-color: transparent;
}

/* Select Options */
.options {
  display: none;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2; /* Above Dropdown */
  margin: 0;
  padding: 0;
  background: #fff;
  border: .0625rem solid #e4e4e4;
  box-shadow: 0 .125rem .375rem -.125rem rgba(0,0,0,.4);
}
.options li {
  padding: .25rem 1.5rem .25rem .5rem; /* Same as Dropdown */
  background: #fff;
}
.options li:hover {
  background: #f2f2f2;
  color: #00567f;
  font-weight: bold;
}
/* First Item */
.options li:first-child {
  padding: .0625rem 1.5rem 0 .5rem;
  background: transparent;
  font-weight: bold;
  color: #666;
  cursor: default;
}
.set .options li:first-child {
  background: #fff;
}
/* Selected Item */
.options li.selected {
  color: #00567f;
  font-weight: bold;
}


/* 
 * SVG Icon Base Styles 
 * Never Use padding on .icon
 */
.icon {
  display: inline-block;
  fill: currentColor;
  height: 1rem;
  width: 1rem;
  position: relative; /* Align more nicely with capital letters */
  top: -0.0625rem;
  vertical-align: middle;
}

/* Check Green */
.icon-check {
  color: #008000;
}

/* Home and Marketplace = Default Dark Grey */
.icon-home,
.icon-market {
  color: #454342;
}

/* Edge Fix - Makes Buttons with SVG Icons better Clickable = Theme Compare Check
 * https://github.com/facebook/react/issues/4963 - See Last Comment
 */
svg:not(.ct-chart-line),
use {
  pointer-events: none;
}


/* 
 * Progress Bar
 */
#nprogress {
  pointer-events: none;
}
#nprogress .bar {
  background: #0071a6;
  position: fixed;
  z-index: 8; /* Above Header */
  top: 0;
  left: 0;
  width: 100%;
  height: .125rem;
}
/* Fancy Blur Effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0;
  width: 6.25rem;
  height: 100%;
  box-shadow: 0 0 .625rem #0071a6, 0 0 .3125rem #0071a6;
  opacity: 1;
  transform: rotate(3deg) translate(0, -.25rem);
}


/* 
 * Site Layout 
 */
body {
  color: #333;
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 15px;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.66;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto !important;
  height: 100%;
  padding: 0;
}
/* Layouts */
/* Themes Page = Has Left Side-Bar */
div.page {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  margin-top: 2.6875rem; /* Because Header Position Fixed */
}
/* Hide Heading */
div.page h2 {
  display: none;
}
/* Main = Every Page */
main {
  flex: 1 1 auto; /* Forces Footer to Bottom */
  display: flex;
  flex-flow: column nowrap;
  cursor: default;
  width: 100%; /* IE11 Fix */
}

/* Default Page Settings - Except Homepage */
article.page,
main.blog,
main.market,  /* Single Marketplace */
main.markets, /* Archive Marketplaces */
main.author,  /* Single Author */
main.authors, /* Archive Authors */
main.search,
main.contact,
main.faq {
  align-self: center;
  margin: 2.75rem 1rem 1rem 1rem;
  padding: 0 .5rem;
  cursor: default;
}
/* Bold Links = About Page */
article.page a {
  font-weight: bold;
}
/* About Page + Disclaimer */
article.page p {
  margin-top: 0;
}


/* 
 * Header
 */
header {
  display: flex;
  background: #f2f2f2;
  border-top: .0625rem solid #f2f2f2;  /* Otherwise Transparent in Mobile */
  border-bottom: .0625rem solid #e4e4e4;
  position: fixed;
  width: 100%;
  max-width: 119.875rem;  /* Same as Extra Large screen size -1px for right border */
  z-index: 8; /* Below Feedback Form and Above nav.themes */
}
/* WPSorter Logo */
header a.logo {
 padding: .5rem;
}
header .icon-wpsorter {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -.1875rem;
}
/* Header Branding = Site Title */
header h1 {
  font-size: 1.5rem;
  font-family: Cambria, Georgia, serif;
  white-space: nowrap;
  margin: -.0625rem 1rem 0 .3125rem;
}
header h1:hover a,
header a:focus {
  color: #333;
  text-decoration: none;
}
/* Header Mobile Menu Buttons */
header button {
  margin: .25rem .125rem .25rem auto;
}
/* Mobile Menu Icon */
header button .icon {
  color: #454342;
  margin: .3125rem;
}
header button.active {
  background: #e1f5ff;
}
header button.active .icon { 
  color: #00567f;
}
/* Header Top Nav = Left and Right */
header nav {
  display: none; /* Mobile = Default Off */
  flex-flow: column nowrap;
  background: #f2f2f2;
  border: .0625rem solid #e4e4e4;
  border-top: none;
  padding: 0 .5rem;
  position: absolute;
  top: 2.375rem;
  left: -.0625rem;
  width: 16.3125rem; /* Same as: Filter Themes + Sort by + Search Theme Name = 260px */
}
/* Show Mobile Main Menu */
header nav.toggled-on {
  display: flex;
  box-shadow: .1875rem .1875rem .25rem rgba(0,0,0,.4);
}

/* Header Menu */
header nav ul {
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
}
header nav ul li {
  border: .0625rem solid #e4e4e4;
  background: #fff;
  border-radius: .125rem;
  padding: .5rem;
  margin: .25rem .25rem 0 0;
}
header nav ul li a {
  font-weight: bold;
  display: block;
}
/* Last Menu Item More Space */
header ul#menu-right li:last-child {
  margin-bottom: .5rem;
}
/* Current Menu Item */
header nav li.current-menu-item {
  background: #00567f;
}
header nav li.current-menu-item a {
  color: #fff;
  cursor: default;
}
/* Menu Hover */
header nav ul li:hover {
  background: #00567f;
}
header nav ul li:hover a {
  color: #fff;
  text-decoration: none;
} 

/* Header Menu Toggle Buttons */
button .icon-bars,
button .icon-filter,
button .icon-sort,
button .icon-compare,
button .icon-grid-large,
button .icon-grid-small,
button .icon-search {
  display: flex;
}
button .icon-close {
  display: none; /* Default = Hidden */
}
button.toggled-on .icon-bars,
button.toggled-on .icon-filter,
button.toggled-on .icon-sort,
button.toggled-on .icon-compare,
button.toggled-on .icon-grid-large,
button.toggled-on .icon-grid-small,
button.toggled-on .icon-search {
  display: none;
}
button.toggled-on .icon-close {
  display: flex;
}
/* Search Button */
button .icon-search {
  transform: rotate(90deg);
}
/* Header Search Field and Button */
header form {
  display: flex;  /* Input and Button on One Line */
  order: -1;      /* Search on Top of Menu */
}
header form input,
.theme-search input {
  width: 12.25rem;
  padding: .25rem .5rem;
  color: #666;
  font-size: .875rem; /* Same as: Sort by Select = Desktop Version has Smaller Font Size .75rem */
  font-weight: bold;
  border: .0625rem solid #e4e4e4;
  border-radius: .125rem
}
/* Header Search Button */
header form button .icon {
  margin: .25rem;
}
/* Input Focus Change Icon Color */
header form input:focus ~ button .icon {
  color: #00567f;
}
/* Search Submit Button */
header button.search-submit {
  padding: .25rem;
  margin: 0 .25rem 0 .5rem;
  border: .0625rem solid #e4e4e4
}
/* Hide Fake Desktop Search Button */
header button.search-button {
  display: none;
}

/* Header Social Share */
header ul.share {
  order: 2;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: -.25rem 0 .5rem 0;
}
/* Share Icons */
header ul.share li {
  margin: 0 .25rem .25rem 0;
}
/* First Item = 2 Buttons + Text */
header ul.share li:first-child {
  width: 100%;
  background: #fff;
}
/* Hide All Except First */
header ul.share li:not(:first-child) {
  display: none;
}
/* Hide Buttons */
header ul.share li:first-child button {
  display: none;
}
/* Style Text */
header ul.share span {
  font-weight: bold;
  color: #00567f;
}
/* Toggle On > Show All */
header ul.share.toggled-on li {
  display: flex;
}
/* Show Close Button */
header ul.share.toggled-on li:first-child button.close {
  display: inline;
  margin: 0;
}
header ul.share.toggled-on li:first-child button .icon-close {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}
/* Hide Text */
header ul.share.toggled-on span {
  display: none;
}
/* Change First Item */
header ul.share.toggled-on li:first-child {
  width: auto;
  padding: 0 .25rem;
}
/* Icon Size */
header ul.share .icon {
  width: 1.125rem;
  height: 1.125rem;
}
/* Mail Icon */
ul.share .icon-mail {
  color: #454342;
}
ul.share li:hover .icon-mail {
  color: #00567f;
}
/* Hover Share Items */
ul.share li:not(:first-child):hover {
  background: #fff;
}


/*
 * Footer
 */
footer { 
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  background: #f2f2f2;
  border-top: .125em solid #e4e4e4;
  padding: .5rem;
  margin-top: auto; /* Align to Bottom */
  cursor: default;
  z-index: 7; /* Above Loading Overlay */
}
footer nav.social {
  order: -1;
  margin-bottom: .5rem;
}
footer nav ul {
  display: flex;
  font-size: .625rem;
  color: #333;
}

footer nav.footer li:first-child {
  margin-right: .5rem;
}
footer nav.footer a {
  color: #333;
  margin: 0 .25rem;
}
footer nav.footer a:hover {
  color: #00567f;
}
/* Social Icons */
footer nav.social ul li {
  margin-left: .5rem;
}

/* 
 * Homepage
 */
main.home {
  flex-flow: row wrap;
  margin: 3rem .4375rem 1rem .4375rem; /* Different Margin on main for iPhone4 Slider Image Full View */
  width: auto; /* Override IE11 Fix */
}
/* Bold Links */
main.home a {
  font-weight: bold;
}
/* Slogan */
main.home p:nth-child(1) {
  width: 100%;
  margin: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  font-family: Cambria, Georgia, serif;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.5;
  order: 1;
}

/* from X Marketplaces */
main.home p:nth-child(1) span:nth-child(3) {
  font-size: 1rem;
  font-weight: normal;
  margin-left: 3rem;
}
/* Made by X Authors */
main.home p:nth-child(1) span:nth-child(4) {
  font-size: 1rem;
  font-weight: normal;
  margin-left: 6rem
}

/* Slider Title */
main.home h2 {
  margin: .25rem 0 0 .25rem;
  font-size: 1.0625rem;
  order: 2;
}

/* Most Viewed Themes */
main.home h2:nth-of-type(2) {
  order: 4;
}
main.home .flexslider:nth-of-type(2) {
  order: 5;
}
/* Most Compared Themes */
main.home h2:nth-of-type(3) {
  order: 6;
  width: 100%;
}
main.home .flexslider:nth-of-type(3) {
  order: 7;
}



/* Flexslider 
 * https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties
 */
.flexslider {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  margin: 0;
  border: none;
  order: 3;
}
.flex-viewport {
  order: 2;
}
/* Slider Paging = Hide in Mobile */
.flex-control-paging {
  display: none;
  order: -1;      /* Above Slider */
  width: auto;
  align-self: flex-end;
  bottom: auto;
  margin-top: -1.4375rem;
}
/* Slider Navigation Arrows */
.flex-direction-nav {
  display: none;
  z-index: 6; /* Below Site Header */
}
/* Flexslider Defaults Overwrite */
.flex-direction-nav a {
  width: 2.5rem;          /* 40px */
  height: 3.75rem;        /* 60px */
  margin: -1.875rem 0 0;  /* -30px */
}
/* Remove Horizontal Scrollbar */
.flex-direction-nav .flex-next {
  right: 0;
}
.flex-direction-nav .flex-prev {
  left: auto;
  transition: none;
}
/* Fix https://github.com/woocommerce/FlexSlider/issues/1670 */
.flex-direction-nav a:before { 
  font-size: 3.75rem;         /* 60px */
  line-height: 3.75rem;
  color: rgba(0,86,127,.85);  /* #00567f */
}
/* Control Nav */
.flex-control-paging li {
  margin: 0 0 0 .5rem;
}
.flex-control-paging li a {
  width: 1rem;
  height: .5rem;
  border-radius: 0;
  background: #e4e4e4;
  color: #000; /* WAVE - Contrast */
  box-shadow: none;
}
.flex-control-paging li a:hover {
  background: #00567f;
}
.flex-control-paging li a.flex-active {
  background: #666;
  color: #fff; /* WAVE - Contrast */
}
/* Disable Link Underline */
.slides li:hover a,
.slides li:active a {
  text-decoration: none;
}
/* Slides - Media/Image = First div */
.slides div:nth-of-type(1) {
  position: relative;
  z-index: -1;
  padding: .5rem;
  border: .0625rem solid #e4e4e4;
  width: 19.125rem; /* 306px */
}
/* Small Slides */
.small .slides div:nth-of-type(1) {
  width: 6.125rem; /* 98px */ 
}
/* Slides Overlay Text - Large (Default) = Second div */
.slides div:nth-of-type(2) {
  display: flex;
  text-align: center;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: -2.125rem;
  padding: 0 .5rem;
  width: 19.125rem; /* 306px - Same as Media */
  background: rgba(255,255,255,.85);
  border: .0625rem solid #00567f;
}
/* Slide Overlay Text - Small */
.small .slides div:nth-of-type(2) {
  height: 2.125rem;
  width: 6.125rem; /* 98px */
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
/* Switch Theme Name and Price Visible */
/* Hide Price */
.small .slides div:nth-of-type(2) span {
  display: none;
}
/* Change Border Color on Hover */
.small .slides li:hover div:nth-of-type(2),
.small .slides li:active div:nth-of-type(2) {
  border-color: #333;
}
/* Show Price on Hover */
.small .slides li:hover div:nth-of-type(2) span,
.small .slides li:active div:nth-of-type(2) span {
  display: flex;
  font-size: .75rem;
}
/* Hide Theme Name on Hover */
.small .slides li:hover div:nth-of-type(2) h3,
.small .slides li:active div:nth-of-type(2) h3 {
  display: none;
}
/* Theme Name - Small */
.small div:nth-of-type(2) h3 {
  margin: 0;
  font-size: .75rem;
  line-height: 1.16;
}
/* Theme Name - Large */
.slides div:nth-of-type(2) h3 {
  margin: .1875rem 0;
}
/* Theme Price/Views/Compared */
.slides div:nth-of-type(2) span { 
  font-size: .75rem;
  font-weight: bold;
  color: #333;
  align-self: center;
}


/* Statistics */
main.home h2:nth-of-type(4) {
  order: 9;
}
main.home .stats {
  order: 9;
}
.stats {
  display: flex;
  flex-flow: column nowrap; /* Below each other */
  width: 100%;
}

/* Totals Counters */
.stats h3 span {
  margin-left: 1rem;
}
/* Sections */  
.stats .themes div,
.stats .markets div,
.stats .authors div {
  display: flex;
}
/* Statusses */
.stats dl {
  width: 80%;
  margin-right: 1rem;
  align-content: flex-start;
  font-size: .875rem;
  max-width: 17rem;;
}
/* Statusses */
.stats dt {
  min-width: 6.25rem;
}
/* Counters and Percentage */
.stats dd {
  justify-content: space-between;
}
/* Legend Colors */
/* Draft */
.stats dd span::after {
  content: '';
  display: inline-block;
  border: .5rem solid #f2f2f2;
  margin-left: .5rem;
}
/* Publish */
.stats dd:nth-of-type(2) span::after {
  border-color: #00567f;
}
/* Outdated */
.stats dd:nth-of-type(3) span::after {
  border-color: #ffb900;
}
/* Discontinued */
.stats dd:nth-of-type(4) span::after {
  border-color: #b30000;
}
/* Unavailable */
.stats dd:nth-of-type(5) span::after {
  border-color: #ffb3b3;
}
/* Pending */
.stats dd:nth-of-type(6) span::after,
.stats .markets dd:nth-of-type(5) span::after,
.stats .authors dd:nth-of-type(5) span::after {
  border-color: #00a6f5;
}


/* Statistics Pie Charts */
#chart-themes,
#chart-markets,
#chart-authors {
  width: 10rem;
  height: 10rem;
  margin-top: -1.5rem;
}
/* Pie Chart Colors */

/* Draft */
.ct-series-a {
  fill: #f2f2f2;
}
/* Published */
.ct-series-b {
  fill: #00567f;
}
/* Outdated */
.ct-series-c {
  fill: #ffb900;
}
/* Discontinued */
.ct-series-d {
  fill: #b30000;
}
/* Unavailable */
.ct-series-e {
  fill: #ffb3b3;
}
/* Pending */
.ct-series-f,
.markets .ct-series-e,
.authors .ct-series-e {
  fill: #00a6f5;
}


/* Themes
 * - Filter Themes (sidebar)
 * - Nav Themes (topbar)
 * - Grid Items (content))
 */

/* Filters Themes = Sidebar */
aside {
  order: -1;
  display: none;
  flex-flow: column nowrap;
  justify-content: flex-start;
  min-width: 16.25rem;
}
/* Hide Filters */
aside.hide {
  display: none;
}
/* Tooltip Adjustments */
aside abbr {
  margin: 0 auto 0 .25rem;
  font-size: .6875rem;
}
/* Hide Heading and Input Labels */
aside h3,
aside span label {
  display: none;
}
/* Display Filter Menu - Mobile */
aside.toggled-on {
  display: flex;
  padding-right: .125rem;
  position: fixed;
  z-index: 8; /* Above Header */
  top: 2.4375rem;
  background: #f2f2f2;
  overflow-y: scroll;
  height: 85vh;
  border: .0625rem solid #e4e4e4;
  border-top-color: #f2f2f2;
  border-left: none;
  box-shadow: .1875rem .1875rem .25rem rgba(0,0,0,.4); /* Same as: Main Menu + Sort + Search + Compare Toggles */
}

/* Filter Results */
.results {
  position: sticky;
  top: 0;
  z-index: 7;        /* Below Header and Above Checkbox Switch, Slider Handles and Select Dropdowns */
  padding: .125rem 0;
  background: #f2f2f2;
  cursor: default;
}
/* Results Message */
.results span {
  text-align: center;
  display: block;
}
/* Show/Hide Filters Button/Icon */ 
.results button {
  display: none; /* Hide Icon for Mobile */
  float: right;
  margin: -1.4375rem .5rem 0 0;
}
/* Filter SVG Icon */
.results .icon,
nav.themes button.filters .icon { /* nav themes Counterpart Filter Icon */
  width: .875rem; /* Same Size as Sort By + Search Theme Name + Grid Size */
  height: .875rem;
  margin: .3125rem .25rem .1875rem .25rem;
}
/* SVG Loading/Spin Icon */
.results .icon-spin {
  margin: .125rem .5rem 0 0;
}

/* Filter Defaults */
aside ul {
  margin: .5rem;
  border: .0625rem solid #e4e4e4;
  border-radius: .125rem;
  background: #fff;
}
/* Hide Filter - Show/Hide More Filters */
aside ul.hide {
  display: none;
}
/* Filter Hover */
aside ul:hover {
  box-shadow: 0 .125rem .375rem -.125rem rgba(0,0,0,.4); /* Same as: article Hover */
}
/* Prevent Dribble Down */
aside ul:hover ul {
  box-shadow: none;
}
/* Filter Title */
aside li h4 {
  background: #e4e4e4;
  font-size: .75rem;
  padding: .25rem .6875rem;
  cursor: pointer;
}
/* Filter Title Star */
aside li h4 span {
  margin-left: .125rem;
  color: #333;
}
/* Filter Title Star Selected */
aside ul.active li h4 span {
  color: #fff;
}
/* Filter Title - Active Main Filter */
aside ul.active h4 {
  background: #0071a6;
  color: #fff;
}
/* Filters Close = Hide Child UL */
aside ul[aria-expanded="false"] ul {
  display: none;
}

/* SVG Icons Open/Close Filters = Inline SVG for IE/Edge */
aside ul:not(.current) h4::after { 
  position: relative;
  display: block; /* was inline-block = errror with float */
  content: '';
  /* Chevron Up Grey */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23454342' d='M82.4,50L67.6,35.1L32.4,0L17.6,14.9L52.7,50L17.6,85.1L32.4,100l35.1-35.1L82.4,50L82.4,50L82.4,50z'/%3E%3C/svg%3E");
  transform: rotate(-90deg);
  width: 1rem;
  height: 1rem;
  float: right;
  margin-top: .125rem;
}
/* Chevron Down Grey */
aside ul[aria-expanded="false"] h4::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23454342' d='M82.4,50L67.6,35.1L32.4,0L17.6,14.9L52.7,50L17.6,85.1L32.4,100l35.1-35.1L82.4,50L82.4,50L82.4,50z'/%3E%3C/svg%3E");
  transform: rotate(90deg);
}
/* Chevron Up White */
aside ul.active h4::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M82.4,50L67.6,35.1L32.4,0L17.6,14.9L52.7,50L17.6,85.1L32.4,100l35.1-35.1L82.4,50L82.4,50L82.4,50z'/%3E%3C/svg%3E");
  transform: rotate(-90deg);
}
/* Chevron Down White */
aside ul.active[aria-expanded="false"] h4::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M82.4,50L67.6,35.1L32.4,0L17.6,14.9L52.7,50L17.6,85.1L32.4,100l35.1-35.1L82.4,50L82.4,50L82.4,50z'/%3E%3C/svg%3E");
  transform: rotate(90deg);
}

/* Selected Sub Filter */
aside ul.selected {
  background: #e1f5ff;
}
/* Sub Filter - Second Level */
aside ul ul {
  font-size: .75rem;
  border: none;
  padding: .5rem;
}
/* Sub Filter Item */
aside li li {
  display: flex;
  flex-flow: column wrap;
}
/* Taxo, Marketplace and Checkbox Filter Adjustment */
aside ul[data-type="taxo"] li,
aside ul[data-type="market"] li,
aside ul[data-type="check"] li:not([id]) { /* Without ID for Tabs */
  flex-flow: row wrap;
}
/* Border Bottom */
aside ul ul.border {
  border-bottom: .125rem solid #e4e4e4;
}
/* Hide Border if Selected */
aside ul.active ul.selected { 
  border-color: transparent;
}

/* Filter Tabs = W3C + Inline */
aside fieldset { 
  margin: .5rem 0 1rem 0;
  border-bottom: .125rem solid #e4e4e4;
}
/* W3C HTML/CSS Valid Switches Hidden = Adjust Fieldset */
aside li.hide + li fieldset {
  margin-top: 0;
}
aside .selected fieldset {
  border-color: #fff;
}
aside fieldset label {
  color: #666;
  padding: 0 .6875rem;
  margin: 0 .125rem;
  font-weight: bold;
}
/* Tab Open */
aside fieldset input[aria-selected="true"] + label {
  border-bottom: .125rem solid #0071a6;
  padding-bottom: .125rem;
  color: #0071a6;
}
/* Tab Active Filter */
aside fieldset input + label.set {
  color: #0071a6;
  padding-bottom: .0625rem;
  border-bottom: .25rem solid #0071a6;
}


/* Current Filters */
ul.current {
  border-color: #e1f5ff;
}
/* Override Default */
ul.current ul {
  margin: 0;
}
/* Disable Hover */
ul.current:hover {
  box-shadow: none;
}
/* Current Filters Title */
ul.current h4 { 
  display: flex;
  background: #e1f5ff;
}
ul.current h4:hover {
  cursor: default;
}
/* Clear All Filters */
ul.current h4 span {
  font-size: .625rem;
  padding-top: .125rem;
  margin-left: auto;
  color: #00567f;
}
ul.current h4 span:hover {
  cursor: pointer;
  color: #b30000;
}
/* Single Current Filter */
ul.current ul li {
  padding: .0625rem .125rem;
  font-weight: normal;
  cursor: pointer;
  color: #00567f;
  flex-flow: row wrap;
}
/* Filter Label */
ul.current ul span {
  font-weight: bold;
}
ul.current ul span::after {
  content: ':';
  margin: 0 .125rem;
  font-weight: normal;
  float: right;
}
/* Hover Single Current Filter */
ul.current ul li:hover {
  color: #b30000;
  background: #f2f2f2;
}
/* SVG Close Icon */
ul.current ul li:hover::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath fill='%23b30000' d='M96.8,82.6L64.1,49.7l32.8-32.5c1.3-1.3,1.3-3.5,0-4.9L87.6,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1	L50,35.3L17.3,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1L3,12.3c-1.3,1.3-1.3,3.5,0,4.9l32.8,32.5L3.2,82.6 c-0.7,0.7-1.1,1.5-1.1,2.5c0,1,0.4,1.8,1.1,2.5l9.3,9.4C13.2,97.6,14,98,15,98c0.9,0,1.7-0.3,2.5-1.1l32.6-32.8l32.6,32.7 c0.7,0.7,1.5,1.1,2.5,1.1c0.9,0,1.7-0.3,2.5-1.1l9.3-9.4c0.7-0.7,1.1-1.5,1.1-2.5C97.8,84.1,97.4,83.1,96.8,82.6z'/%3E%3C/svg%3E");
  margin: .3125rem 0 -.3125rem auto;
  width: 1rem;
  height: 1rem;
}

/* Filter Controls
 * - Filter Inputs
 * - Slider Title
 * - Slider Reset Button
 * - Slider Inputs
 * - JQuery Slider
 * - Switch Checkbox
 * - Taxo Checkbox
 * - Buttons More/Less Taxo Items
 * - Theme Counters = Checkbox + Taxo List Items
 * - Taxo Reset Button = With More/Less Link
 * - Filters Select = Dates (created/Updated) + Columns
 * Single Filter Adjustments
 * - Price Filter
 * - Dates Filters
 * - Columns Filter
 * - Dates and Columns Adjustments
 * - Theme Sales/Installs + Views + Compared = Wider Inputs
 * - Inspector Filters
 * Show More/Less Filters Buttons
 */

/* Filter Inputs */
aside input[type="number"] {
  width: 4rem;
  border: .125rem solid #e4e4e4;
  border-radius: .25rem;
  padding: .125rem .5rem .25rem .5rem;
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: .875rem;
  font-weight: bold;
  color: #666;
}
/* Input Focus */
aside input[type="text"]:focus,
aside input[type="number"]:focus {
  border-color: #00567f;
  color: #00567f;
}
/* Input Error */
aside input[type="number"].error {
  color: #b30000;
  border-color: #b30000;
}

/* Slider Title */
li.slider h5 {
  cursor: default;
  margin: -.25rem 0 .25rem 0;
  display: flex;
  justify-content: space-between;
  font-size: .6875rem;
  color: #666;
}
/* Hide Slider */
li.slider[aria-hidden="true"] {
  display: none;
}

/* Slider Reset Button */
li.slider h5 span {
  color: #00567f;
  cursor: pointer;
  font-size: .625rem;
}
li.slider h5 span.hide {
  display: none;
}
/* Reset Hover */
li.slider h5 span:hover { 
  color: #b30000;
}

/* Slider Inputs */
li.slider span {
  display: flex;
  justify-content: space-between;
}
/* Hide Multiplier */
li.slider span.multi {
  display: none;
}
/* Slider Inputs Prefix and Suffix - https://jsfiddle.net/q6Lmqh8h/5/ */
span.prefix,
span.suffix {
  position: relative;
}
span.prefix > i,
span.suffix > i {
  position: absolute;
  pointer-events: none;
  font-style: normal;
  font-weight: bold;
  color: #666;
  padding: .1875rem 0 0 .375rem;
}
span.suffix > i {
  right: 0;
  padding: .1875rem .4375rem 0 0;
}
/* Override Default */
aside .prefix > input[type="number"] { 
 padding-left: 1.75rem;
}

/* JQuery Slider */
.ui-slider {
  z-index: 1;
  position: relative;
  height: .3125rem;
  margin: 1rem .5rem .5rem .5rem;
  border-radius: .25rem;
  background: #e4e4e4;
}
/* Slider Handle */
.ui-slider-handle {
  z-index: 5;
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  top: -.4375rem;         /* Quater Height */
  margin-left: -.625rem;  /* Half Width */
  border: .125rem solid #c5c5c5;
  border-radius: 50%;
  background: #fafafa;
  outline: none;
  touch-action: none;
}
/* Slider Handle Hover */
li.slider .ui-state-hover {
  border-color: #0071a6;
  cursor: pointer;
  background: #fff;
}
/* Slider Handle Active */
li.slider .ui-state-active {
  background: #00567f;
  box-shadow: 0 0 0 .25rem rgba(0,86,127,.5);
}
/* Slider Handle Focus */
li.slider .ui-state-focus {
  background: #0071a6;
  border-color: #0071a6;
  box-shadow: 0 0 0 .5rem rgba(0,86,127,.5);
}

/* Slider Handle Selected */
ul.selected .ui-slider-handle:not([style="left: 0%;"]):not([style="left: 100%;"]) {
  border-color: #0071a6;
}

/* Slider Range */
.ui-slider-range { 
  z-index: 1;
  position: absolute;
  top: 0;
  height: 100%;
  background: #0071a6;
}

/* Switch Checkbox 
 * https://codepen.io/guuslieben/pen/YyPRVP
 * https://codquest.com/guuslieben/material-design-switch-YyPRVP
 */
aside input[type="checkbox"].switch {
  display: none;
}
aside input[type="checkbox"].switch + label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  color: #666;
  padding-left: 2.75rem;
}
aside input[type="checkbox"].switch + label::before, 
aside input[type="checkbox"].switch + label::after {
  content: '';
  position: absolute;
  margin: 0;
  outline: 0;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 0.3s ease;
}
aside input[type="checkbox"].switch + label::before {
  left: .0625rem;
  width: 2.125rem;
  height: .875rem;
  background: #c5c5c5;
  border-radius: .5rem;
  border: none;
}
aside input[type="checkbox"].switch + label::after { 
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: #fafafa;
  border-radius: 50%;
  box-shadow: 0 .1875rem .0625rem -.125rem rgba(0,0,0,.2), 0 .125rem .125rem 0 rgba(0,0,0,.1), 0 .0625rem .3125rem 0 rgba(0,0,0,.1);
}
aside input[type="checkbox"].switch:checked + label::before {
 background: #00a6f5;
}
aside input[type="checkbox"].switch:checked + label::after {
  background: #0071a6;
  transform: translate(80%, -50%);
  /* Override Default Checkbox */
  left: 0;
  margin: 0;
  content: '';
}
/* Adjust Tooltip */
aside input[type="checkbox"].switch + label + abbr {
  margin-top: .0625rem;
}

/* Taxo Checkbox */
aside input[type="checkbox"] {
  display: none; /* Hide Actual Checkbox */
}
aside input[type="checkbox"] + label::before { 
  content: '';
  display: inline-block;
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: .125rem solid #c5c5c5;
  border-radius: .125rem;
  background: #fff;
  margin: .125rem 0 0 -1.5rem;
}
/* Checked Checkbox */
aside input[type="checkbox"]:checked + label {
  color: #00567f;
  font-weight: bold;
}
aside input[type="checkbox"]:checked + label::before {
  border-color: #0071a6;
} 
/* Checkmark */
aside input[type="checkbox"]:checked + label::after {
  content: '\2714';
  display: inline-block;
  position: absolute;
  z-index: 3;
  left: 1.75rem;
  color: #0071a6;
}
/* Taxo Checkbox Label */
ul[data-type="taxo"] label,
ul[data-type="market"] label {
  margin-left: 1.5rem;
  font-weight: bold;
  color: #666;
}
/* Taxo Hover */
ul[data-type="taxo"] li:not(.reset):hover,
ul[data-type="market"] li:not(.reset):hover {
  background: #f2f2f2;
}
ul[data-type="taxo"] li:hover label,
ul[data-type="market"] li:hover label {
  color: #00567f;
}
ul[data-type="taxo"] li:hover label::before,
ul[data-type="market"] li:hover label::before {
  border-color: #00567f;
}
ul[data-type="taxo"] li:hover label::after,
ul[data-type="market"] li:hover label::after {
  color: #00567f;
}
/* Taxo Selected Hover */
ul[data-type="taxo"].selected li:not(.reset):hover,
ul[data-type="market"].selected li:not(.reset):hover {
  background: #fff;
}

/* Buttons More/Less Taxo Items */
aside li.more,
aside li.less {
  color: #666;
  background: #f2f2f2;
  border: .0625rem solid #e4e4e4;
  font-size: .625rem;
  font-weight: bold;
  padding: .125rem .375rem;
  cursor: pointer;
}
/* Selected Background Color */
aside ul.selected li.more,
aside ul.selected li.less {
  background: #fff;
}
/* Symbol */
aside li.more::before,
aside li.less::before {
  display: inline-block;
  transform: rotate(90deg);
  font-size: 1rem;
  font-weight: normal;
  position: relative;
  top: .1875rem;
  left: -.125rem;
}
/* Angle Quotation Mark, Right = » */
aside li.more::before {
  content: '\00BB';
}
/* Angle Quotation Mark, Left = « */
aside li.less::before {
  content: '\00AB';
}
/* Show/Hide More/Less Taxo Items */
aside li li.hide {
  display: none;
}
aside li li.show {
  display: flex;
}
/* Adjustment for More/Less Buttons */
aside li li.more.show,
aside li li.less.show {
  display: inline;
}
/* More/Less Buttons Hover */
aside li.more:hover,
aside li.less:hover {
  color: #00567f;
  border-color: #00567f;
}

/* Theme Counters = Checkbox + Taxo List Items */
ul[data-type="check"] li:first-child span, /* Only First List Item */
ul[data-type="taxo"] li span,
ul[data-type="market"] li span {
  margin-left: auto; /* Float Right */
  font-weight: normal;
  color: #666;
  cursor: default; /* Arrow */
}

/* Taxo Reset Button = With More/Less Link */
ul[data-type="taxo"] li.reset span,
ul[data-type="taxo"] li.more span,
ul[data-type="taxo"] li.less span,
ul[data-type="market"] li.reset span,
ul[data-type="market"] li.more span,
ul[data-type="market"] li.less span { 
  color: #00567f;
  cursor: pointer;
  font-size: .625rem;
  font-weight: bold;
  float: right;
  margin-top: .375rem;
}
/* Without More/Less Link */
ul[data-type="taxo"] li.reset,
ul[data-type="market"] li.reset {
  margin: -.125rem 0 -.125rem 0;
}
/* Reset Button Hover */
ul[data-type="taxo"] li.reset span:hover,
ul[data-type="taxo"] li.more span:hover,
ul[data-type="taxo"] li.less span:hover,
ul[data-type="market"] li.reset span:hover,
ul[data-type="market"] li.more span:hover,
ul[data-type="market"] li.less span:hover {
  color: #b30000;
}

/* Filters Select = Dates (Created/Updated) + Columns */
aside .select {
  width: 7.625rem;
}
aside ul.options {
  background: transparent;
  margin: .0625rem 0;
  padding: 0;
  font-size: .6875rem;
  border-top: 0;
}
aside ul.options li:first-child {
  margin: -.125rem 0;
  padding: .125rem 0 .125rem .375rem;
}
aside ul.options li {
  padding: .125rem 0 .125rem .375rem;
}
/* Hover */
aside ul.options li:not(:first-child):hover {
  background: #f2f2f2;
}

/* Single Filter Adjustments */
/* Price Range Slider */
aside ul[data-filter="theme-last-price"] + ul {
  margin-top: -.5rem; /* Connect Slider with Switches */
}
/* Price Range Switches */
aside ul ul[data-filter="theme-last-price"] li {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
/* Price Range Switches - Active Background */
ul.active ul[data-filter="theme-last-price"] {
  background: #e1f5ff;
}

/* Dates Filters */
li.date {
  min-height: 1.25rem;
}
/* Select Adjustments */
li.date .select {
  margin: -1.25rem 0 0 auto;
}
/* Reset Button */
li.date button {
  margin: .375rem .375rem -1rem auto;
  z-index: 3;
}
/* Date Picker Inputs */
li.date .inputs {
  margin: 2rem 0 .5rem 0;
  color: #666;
}
li.date .inputs.hide {
  display: none;
}
li.date input[type="text"] {
  width: 6rem;
  padding: .2rem;
  font-size: .6875rem;
  text-align: center;
  color: #666;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none; /* Safari 3+ */
  user-select: none;
  outline: none; /* border hightlight */
}

/* Different z-indexes for Dates Selects = Dropdown Overlap */
.order-2 .dropdown::after,
.order-3 .dropdown::after {
  z-index: 6;
}
.order-2 .options,
.order-3 .options{
  z-index: 5;
}


/* Columns Filter */
li.columns {
  flex-flow: row nowrap;
}
li.columns .select {
  margin: 0 0 0 auto;
}
/* Selected = Adjust Margin for Reset Button */
ul.selected li.columns .select { 
  margin-right: 1rem;
}
/* Reset Button */
li.columns button {
  margin: .25rem .5rem 0 -2rem;
  z-index: 3;
}

/* Dates and Columns Adjustments */
li.date h5,
li.columns h5 {
  margin: 0;
  color: #666;
  font-size: .6875rem;
}
li.date abbr,
li.columns abbr {
  margin-bottom: -.25rem;
}
/* Reset Icon */
li.date button .icon-close,
li.columns button .icon-close {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  top: -.25rem;
  color: #454342;
}
/* Columns Adjustment */
li.columns button .icon-close {
  top: -.125rem;
} 

/* Theme Sales/Installs + Views + Compared = Wider Inputs */
input[type="number"][id="theme-last-sales-0"],
input[type="number"][id="theme-last-sales-1"],
input[type="number"][id="theme-views-0"],
input[type="number"][id="theme-views-1"],
input[type="number"][id="theme-compared-0"],
input[type="number"][id="theme-compared-1"] {
  width: 5rem;
}

/* Inspector Filters */
ul.inspector {
  max-width: 15.0625rem; /* For Inspector Icons Wrap */
}
/* Hide Icons if Filter is Closed */
ul.inspector[aria-expanded="false"] ul[data-filter] {
  display: none;
}
/* Inspector Icons */
ul.inspector[aria-expanded="true"] ul[data-filter] {
  display: inline-block;
  margin: .5rem 0 0 .5rem;
  border: .0625rem solid transparent;
  border-radius: .0625rem;
}
/* Hide Icon if Counter = 0 */
ul.inspector[aria-expanded="true"] ul[data-filter].hide {
  display: none;
}
ul.inspector[aria-expanded="true"] ul[data-filter]:hover {
  border-color: #00567f;
}
ul.inspector ul[data-filter] li {
  flex-flow: column wrap;
}
/* Hide Checkbox */
ul.inspector ul[data-filter] input {
  display: none;
}
/* Adjust Count */
ul.inspector ul[data-filter] span {
  display: block;
  font-size: .6875rem;
  margin: 0 0 .125rem 0;
  text-align: center;
}
/* Align Icon Center */
ul.inspector ul[data-filter] label {
  text-align: center;
}
/* Hide Count */
ul.inspector ul[data-filter] span.hide {
  display: none;
}
/* Inspector Icons */
ul.inspector li .icon {
  width: 1.75rem;
  height: 1.75rem;
}
/* Inspector FSE Icon = Text */
ul.inspector ul[data-filter="theme-block"] label {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}

/* Inspector Tabs = Inline Scripts, Styles and Comments */
aside .inspector fieldset label {
  margin: 0;
  padding: 0 .4375rem .0625rem .4375rem
}
/* Horizontal Bar Above Dividitis Slider + Tabs Inline */
ul.inspector ul:not([class]),
ul.inspector ul[class=""]{
  border-top: .125rem solid #e4e4e4;
}
ul.inspector ul:last-of-type {
  padding-top: 1rem;
}
/* Hide Horizontal Bar */
ul.inspector ul:not(.selected).noborder {
  margin-top: 0;
}

/* Show More/Less Filters Buttons */
ul.more,
ul.less {
  width: 60%;
  align-self: center;
  padding: .25rem 0;
  margin-bottom: 1rem;
  z-index: 5;           /* Below Loading Overlay and Below Results Message */
  order: 30;            /* Always at Bottom = check if work */
  font-size: .625rem;
  font-weight: bold;
  color: #666;
  background: #fff;
}
ul.more li,
ul.less li {
  text-align: center;
}
ul.more button,
ul.less button {
  font-weight: bold;
  color: #333;
}
/* Hover */
ul.more:hover,
ul.less:hover {
  cursor: pointer;
  border-color: #00567f;
}
ul.more:hover button,
ul.less:hover button {
  color: #00567f;
}


/* Themes - Nav Themes (topbar) 
 * - Sort by 
 * - Search Theme Name
 * - Theme Compare List 
 * - Grid Icons Small/Large
*/

/* Themes - Nav Bar */
nav.themes {
  display: none; /* Hide on Mobile */
  order: 1;
  flex-flow: row wrap;
  justify-content: space-between;
  background: #f2f2f2;
  top: 2.875rem;
  position: sticky;
  z-index: 8; /* Above Header */
}
/* Mobile = Show nav.themes */
nav.themes.toggled-on { 
  display: flex;
}
/* Hide Labels */
nav.themes label {
  display: none;
}
/* Buttons = Filter, Sort by, Search, Compare and Grid */
.results button,
nav.themes button {
  border: .0625rem solid transparent;
}
.results button:hover,
nav.themes button:hover,
nav.themes .grid button {
  border-color: #e4e4e4;
  background: #fff;
}
/* Active Button Adjustment */
nav.themes ul:not(.theme-compare) button.active:hover {
  border-right-color: transparent;
}
/* Icons */
nav.themes .icon {
  width: .875rem;
  height: .875rem;
  color: #454342;
}
/* Spin Icon */
nav.themes .icon-spin {
  top: .375rem;
  display: inline-block;
  z-index: 5; /* Above Input */
  width: 1rem;
  height: 1rem;
}
/* Hide Spin Icon */
nav.themes .icon-spin[aria-hidden="true"] { 
  display: none;
}
.results button.active .icon,
nav.themes button.active .icon {
  color: #00567f;
}
.results button.active:hover .icon,
nav.themes button:not(.small):not(.large).active:hover .icon {
  color: #454342;
}
/* Show Filters Button in Nav Themes */
nav.themes button.filters .icon {
  margin-top: .25rem;
}

/* Nav Themes = Mobile Default Hide */
.theme-sort,
.theme-search,
.theme-compare,
.grid {
  display: none;
}
/* Show Mobile Sub-Menu */
.theme-sort.toggled-on,
.theme-search.toggled-on,
.theme-compare.toggled-on,
.grid.toggled-on {
  display: flex;
  padding: 1rem;
  position: fixed;
  top: 2.4375rem;
  left: -.0625rem;
  background: #f2f2f2;
  width: 17rem;
  min-height: 3.75rem;
  border: .0625rem solid #e4e4e4;
  border-top: 0;
  box-shadow: .1875rem .1875rem .25rem rgba(0,0,0,.4); /* Same as: Main Menu + Themes Filter Menu */
}

/* Sort by Icon/Button Hide = Desktop Only */
.theme-sort li:first-of-type {
  display: none;
}
/* Fix Hide for First List Item */
.options li:first-of-type {
  display: list-item;
}
/* Input/Checkbox Sort Direction */
.theme-sort input[id="order"] {
   display: none;
}
/* Sort by Icon */
.theme-sort button.sort .icon {
   margin: .3125rem .3125rem .25rem .3125rem;
  }
/* Sort by Select Hidden */
.theme-sort li.sort.hide {
  margin-right: 0;
}
/* Right Margin if Visible and Not Set */
.theme-sort:not(.selected) li.sort {
  margin-right: 1rem;
}
/* Sort by Select */
.theme-sort .select {
  width: 14rem; /* 2 Sizes - show/hide direction order button */
  height: 100%;
  font-size: .875rem;
}
/* Smaller Input when Order Button Visible */
.theme-sort.selected .select {
  width: 13rem; /* 12.125rem;*/
}
/* Sort by Dropdown - Same Size as Search Theme Name */
.theme-sort .dropdown {
  height: 1.6875rem;
  padding: .0625rem 1rem 0 .5rem;
}
/* Dropdown Arrow Down */
.theme-sort .dropdown::after {
  top: .5625rem;
  right: .5rem;
}
/* Dropdown Hover */
.theme-sort .select:hover .dropdown {
  color: #333;
}
.theme-sort .select:hover .dropdown::after {
  border-color: #333 transparent transparent transparent;
}
/* Dropdown Click = Arrow Up */
.theme-sort .select:hover .dropdown:active::after {
  border-color: transparent transparent #333 transparent;
  top: .0625rem;
}
/* Dropdown Click = Arrow Up = Hide if Selected */
.theme-sort.selected .select:hover .dropdown:active::after {
  border-color: transparent;
}
/* Dropdown Open = Arrow Up */
.theme-sort .select .dropdown.active::after,
.theme-sort .select:hover .dropdown.active::after {
  border-color: transparent transparent #333 transparent;
  top: .0625rem;
}
.theme-sort .dropdown.active {
  color: #333;
}
/* Dropdown Options */
.theme-sort .options {
  overflow-y: scroll;
  overflow-x: hidden;
}
/* Dropdown = Hide First List Item */
.theme-sort.selected .options li:first-of-type {
  color: #333;
} 
/* Reset Button Sort by + Search Theme Name */
nav.themes button.reset .icon {
  width: .75rem;
  height: .75rem;
}
/* Sort by Reset Button */
li.sort button.reset {
  display: flex;
  margin: -1.6875rem 0 0 auto;
  z-index: 5;
  position: relative;
}
li.sort button.reset.hide {
  display: none;
}
li.sort button.reset:not(.hide) .icon-close {
  display: inline-block;
  margin: .5rem .375rem .3125rem .375rem;
}
/* Selected */
.theme-sort.selected li.order {
  margin: 0 .5rem -.5rem .5rem;
}
/* Mobile Menu Dropdown */
.theme-sort.selected.toggled-on {
  background: #e1f5ff;
}
.theme-sort.selected:not(.toggled-on) li {
  background: #e1f5ff;
}
/* Fix Dribble Down */
.theme-sort.selected:not(.toggled-on) li li {
  background: #fff;
}
/* Fix Hover */
.theme-sort.selected:not(.toggled-on) li li:not(:first-child):hover {
  background: #f2f2f2;
}
/* Sort by Direction Arrow Icon */
.theme-sort li.order .icon {
  margin: .375rem .3125rem .25rem .25rem;
}
.theme-sort button.asc {
  transform: rotate(-90deg);
}
.theme-sort button.desc {
  transform: rotate(90deg);
}
.theme-sort li.order button.active {
  display: flex;
  background: #fff;
  border-color: #e4e4e4;
}
/* Hover Fix */
nav.themes li.order button.active:hover {
  background: #fff;
  border-color: #e4e4e4;
}

/* Search Theme Name */
/* Search Button Hide = Desktop Only */
.theme-search button.search {
  display: none;
}
.theme-search button.search.active:hover {
  border-right-color: transparent;
}
.theme-search input {
  width: 14rem; /* Same as Sort by */
  margin-right: 1rem;
  height: 100%;
  z-index: 3;
}
.theme-search input.error {
  border-color: #b30000;
}
.theme-search input:hover,
.theme-search input:focus {
  background: #fff;
}
.theme-search input::placeholder {
  color: #666;
}
.theme-search input:hover::placeholder {
  color: #333;
}
.theme-search input.active {
  background: #fff;
}
.theme-search .icon-search {
  margin: .25rem .3125rem;
}
/* Reset Button */
.theme-search button.reset {
  margin: .0625rem 0 0 -.125rem;
  z-index: 5;
}
/* Hide button on hover and active */
.theme-search button.reset .icon-close {
  display: flex;
}
/* Hide Checkbox Enter */
.theme-search input[type="checkbox"] {
  display: none;
}
/* Search Set/Selected */
.theme-search.selected button.search {
  background: #e1f5ff;
}
.theme-search.selected button.search:hover {
  background: #fff;
}
.theme-search.selected input {
  background: #fff;
}
/* Mobile Menu Dropdown */
.theme-search.toggled-on.selected {
  background: #e1f5ff;
}
.theme-search.toggled-on input {
  margin-right: -1.25rem;
}

/* AutoSuggest = Theme Names List */
.autocomplete-suggestions {
  text-align: left;
  cursor: default;
  border: .0625rem solid #e4e4e4;
  border-top: 0;
  margin-top: -.0625rem;
  background: #fff;
  box-shadow: 0 .125rem .375rem -.125rem rgba(0,0,0,.4); /* Same as Select */
  /* Core Styles Should Not be Changed */
  position: fixed;
  display: none;
  z-index: 9; /* Above nav.themes = 260 */
  max-height: 15.875rem;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
/* Suggestion */
.autocomplete-suggestion { 
  position: relative;
  padding: 0 .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .875rem;
  color: #333;
}
.autocomplete-suggestion b { 
  font-weight: normal;
}
.autocomplete-suggestion b:first-of-type { 
  font-weight: bold;
  color: #00a6f5;
} 
.autocomplete-suggestion.selected { 
  background: #f2f2f2;
} 
.autocomplete-suggestion:hover {
  cursor: pointer;
}

/* Theme Compare List */
.theme-compare {
  flex-flow: row wrap;
}
.theme-compare.selected {
  background: #e1f5ff;
  padding: .5rem;
}
.theme-compare li {
 align-self: center; /* Verticale Align */
}
/* Hide Compare Icon = Desktop Only */
.theme-compare li:first-child {
  display: none;
}
/* Compare Icon = Show/Hide Theme Names and Buttons */
.theme-compare .icon-compare {
  width: 1rem;
  height: 1rem;
  margin: .375rem .3125rem .1875rem .3125rem;
}
/* Compare Themes Pill */
.theme-compare .pill {
  margin: .25rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0 .625rem;
}
.theme-compare .pill:hover {
  color: #b30000;
  border-color: #b30000;
}
/* Compare Button */
.theme-compare li.button {
  color: #fff;
  background: #0071a6;
  font-size: .6875rem;
  font-weight: bold;
  margin: 0 .25rem 0 .5rem;
  padding: .0625rem .625rem .125rem .625rem;
  border: .0625rem solid transparent;
  cursor: pointer;
  order: 10;
}
.theme-compare li.button:hover {
  border: .0625rem solid #00567f;
  background: #fff;
}
/* Compare Button Link */
.theme-compare a {
  color: #fff;
}
.theme-compare li.button:hover a {
  color: #00567f;
  text-decoration: none;
}
/* Compare Button - New Window Icon */
.theme-compare li.button::after {
  content: '';
  display: inline-block;
  position: relative; /* Edge Fix */
  top: .0625rem;      /* Edge Fix */
  /* SVG Icon - Open New Window (White) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
  width: .625rem;
  height: .625rem;
  margin-left: .3125rem;
}
.theme-compare li.button:hover::after {
  /* SVG Icon - Open New Window (Blue) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300567f' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
} 
/* Compare Error Message Max 5 */
.theme-compare li.error {
  order: -1;
  margin: 0 .5rem;
  font-size: .6875rem;
  width: 100%;
  text-align: center;
  cursor: default;
}
/* Compare Reset Button */
.theme-compare li.reset:not(.hide) {
  display: flex;
  order: 11;
}
.theme-compare button .icon-close {
  display: inline-block;
  width: .75rem;
  height: .75rem;
  margin: .4375rem .375rem .25rem .375rem;
}

/* Grid Icons Small/Large */
nav.themes button.large,
nav.themes button.small {
  margin: 0 -.0625rem 0 .75rem;
}
nav.themes button.large .icon,
nav.themes button.small .icon {
  margin: .25rem .3125rem .125rem .3125rem
}
/* Hide Active Grid Icon */
.grid button.active {
  display: none;
}

/* Grid Icons */
.grid {
  justify-content: flex-end;
}
/* Posts per Page Dropdown */
.grid .select {
  order: -1;
  width: 11.875rem;
  font-size: .875rem;
  margin-right: auto;
}
.grid .dropdown {
  height: 100%;
  padding-top: .0625rem;
}
/* Posts per Page - Dropdown Arrow Down */
.grid .dropdown::after {
  top: .5rem;
}
/* Dropdown Hover */
.grid .select:hover .dropdown {
  color: #333;
}
.grid .select:hover .dropdown::after {
  border-color: #333 transparent transparent transparent;
}
/* Dropdown Click = Arrow Up */
.grid .select:hover .dropdown:active::after {
  border-color: transparent transparent #333 transparent;
  top: .0625rem;
}
/* Dropdown Click = Arrow Up = Hide if Selected */
.grid.selected .select:hover .dropdown:active::after {
  border-color: transparent;
}
/* Dropdown Open = Arrow Up */
.grid .select .dropdown.active::after,
.grid .select:hover .dropdown.active::after {
  border-color: transparent transparent #333 transparent;
  top: .0625rem;
}
.grid .dropdown.active {
  color: #333;
}
/* Select Items */
.grid .options li {
  padding-left: .4375rem;
}
.grid .options li:first-child {
  padding: .0625rem 1.5rem 0 .375rem;
}


/* Grid Items
 * Filter Themes + Single Marketplace + Single Author + Archive Marketplaces + Archive Authors
 */
section#themes,
section#authors,
section#markets {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  order: 3;
}
/* Hide Heading */
section#themes h3,
section#authors h3,
section#markets h3 {
  display: none;
}
/* No Themes Found Text */
section#themes p {
  font-weight: bold;
  align-self: center;
}
/* Theme/Author/Market Grid Item */
section#themes article,
section#authors article,
section#markets article {
  display: flex;
  flex-flow: column wrap;
  background: #f2f2f2;
  border: .0625rem solid #e4e4e4;
  border-radius: .0625rem;
  cursor: default; /* Arrow */
  margin: .3125rem;
  padding: .3125rem;
  position: relative;
}
section#themes article:hover,
section#authors article:hover,
section#markets article:hover {
  border-color: #0071a6;
  box-shadow: 0 .125rem .375rem -.125rem rgba(0,0,0,.4);
}
/* Large/Small */
/* Large */
section#themes.large article {
  flex: 1 1 12.25rem;   /* 196px */
  max-width: 18.75rem;  /* Max Image Size: 288px = 18rem + 2x padding .3125rem + 2x border .0625rem = 18.75rem */
}
/* Small */
section#themes.small article {
  flex: 1 1 9rem;
  min-width: 8rem;
  max-width: 12rem;
  font-size: .75rem;
}
section#themes.small article span {
  font-size: .6875rem;
}
section#themes.small ul:not(.nav-links),
section#themes.small .tests {
  display: none;
}
/* Compare Check Icon - Mobile = Always Visible */
section#themes label .icon {
  display: flex;
  color: #fff;
  filter: drop-shadow( 0 0 .1875rem #000 );
  width: 2.5rem;
  height: 2.5rem;
}
/* Restore Icon Title Color */
section#themes label .icon title {
  color: #333;
}
/* Hide Compare Checkbox */
section#themes article label input {
  display: none;
}
/* Compare Check = Always Show in Mobile - Hide in Desktop and Show on Hover */
section#themes article label { 
  position: absolute;
  margin-top: -.15rem;
  align-self: flex-end;
}
/* Theme Compare Active */
section#themes article.compare {
  background: #e1f5ff;
}
/* Show Compared Theme Check */
section#themes article.compare label { 
  display: flex;
}
/* Compare Checked */
section#themes article.compare .icon {
  color: #008000;
  filter: drop-shadow( 0 0 .1875rem #fff );
}
section#themes article.compare .tests {
  filter: none;
}
/* Hide Unchecked Compare Checks if Max Reached */
section#themes.disable article:not(.compare) label {
  display: none;
}

/* Theme Image and Name Link */
section#themes a {
  font-weight: bold;
  text-decoration: none;
}
/* Theme Name and Price */
section#themes h4 {
  margin-top: .25rem;
}
/* Theme Name Hover = Filtered Themes Only */
main#content:not(.market):not(.author) section#themes h4:hover {
  text-decoration: underline;
}
/* Theme Price */
section#themes h4 span {
  color: #333;
  font-weight: normal;
  float: right;
  clear: both;
}
/* Buy One and VAT Symbols */
section#themes .buyone,
section#themes .vat {
  font-style: normal;
  font-weight: bold;
  color: #00567f;
}
/* Theme Details */
section#themes ul {
  display: flex;
  justify-content: space-between;
}
/* Test Results */
section#themes .tests {
  filter: grayscale(100%);
  margin-top: .125rem;
  font-size: .6875rem;
}
section#themes article:hover .tests {
  filter: grayscale(0%);
}
/* Single Test Result = WPT Only */
section#themes ul.tests.wpt {
  justify-content: flex-end;
}
/* Test Result Icons */
section#themes li .icon {
  width: .875rem;
  height: .875rem;
  margin-right: .1875rem;
}
/* Pagespeed Icon Adjustment = Ratio: 100x64 */
section#themes li .icon-pagespeed {
  width: 1.125rem;  /* 20px */
  height: .8125rem; /* 13px */
  margin-right: .25rem;
}
/* WPT Icon Adjustment = Ratio: 100x80 */
section#themes li .icon-wpt {
  width: 1.0625rem;
  margin: -.0625rem .25rem 0 0;
}

/* Unavailable/Outdated/Discontinued Theme/Marketplace */
/* Corner Top Left */
section#themes article.outdated::before,      /* Orange with Clock Icon */
section#themes article.unavailable::before,   /* Red with No Sign Icon */
section#themes article.discontinued::before,  /* Red with Close Sign Icon */
section#authors article.outdated::before,
section#authors article.discontinued::before,
section#markets article.outdated::before,
section#markets article.discontinued::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 2.5rem solid #ffb900;
  border-right: 2.5rem solid transparent;
  top: -.0625rem;
  left: -.0625rem;
  position: absolute;
}
section#themes article.unavailable::before {
  border-top-color: #b30000;
}
section#themes article.discontinued::before,
section#authors article.discontinued::before,
section#markets article.discontinued::before {
  border-top-color: #333;
}

/* Outdated/Unavailable/Discontinued Icons */
section#themes article.outdated::after,
section#themes article.unavailable::after,
section#themes article.discontinued::after,
section#authors article.outdated::after,
section#authors article.discontinued::after,
section#markets article.outdated::after,
section#markets article.discontinued::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: .1875rem;
  left: .125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23333' d='M50,0C22.334,0,0,22.334,0,50c0,27.667,22.334,50,50,50c27.667,0,50-22.333,50-50C100,22.334,77.667,0,50,0z M50,10 c22.333,0,40,17.666,40,40c0,22.333-17.667,40-40,40c-22.334,0-40-17.667-40-40C10,27.666,27.666,10,50,10z M67.715,74.785L55,62.07l-10-10V37.93V19h10v28.93l19.785,19.785L67.715,74.785z'/%3E%3C/svg%3E");
}
/* Unavailable SVG Icon */
section#themes article.unavailable::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M50,0C22.334,0,0,22.334,0,50c0,27.667,22.334,50,50,50c27.667,0,50-22.333,50-50C100,22.334,77.667,0,50,0z M50,10 c22.333,0,40,17.666,40,40c0,22.333-17.667,40-40,40c-22.334,0-40-17.667-40-40C10,27.666,27.666,10,50,10z M17.413,24.483l7.07-7.07l57.802,57.802l-7.07,7.07L17.413,24.483z'/%3E%3C/svg%3E");
}
/* Discontinued SVG Icon */
section#themes article.discontinued::after,
section#authors article.discontinued::after,
section#markets article.discontinued::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M50,0C22.334,0,0,22.334,0,50c0,27.667,22.334,50,50,50c27.667,0,50-22.333,50-50C100,22.334,77.667,0,50,0z M50,10 c22.333,0,40,17.666,40,40c0,22.333-17.667,40-40,40c-22.334,0-40-17.667-40-40C10,27.666,27.666,10,50,10z M67.678,25.251l7.071,7.071L32.322,74.749l-7.071-7.071L67.678,25.251z M25.251,32.322l7.071-7.071l42.427,42.427l-7.071,7.071L25.251,32.322z'/%3E%3C/svg%3E");
}

/* Load More Themes Button */
button.more {
  order: 999999;
  width: 10rem;
  margin: .75rem 0 1rem 0;
  padding: .5rem;
  align-self: center;
  color: #333;
  font-size: .75rem;
  font-weight: bold;
  background: #fff;
  border: .0625rem solid #e4e4e4;
  border-radius: .125rem;
}
button.more:hover {
  color: #00567f;
  background: #f2f2f2;
  border-color: #00567f;
}

/* No More Themes Text */
.finished {
  text-align: center;
  font-weight: bold;
  order: 999998;
  margin: 1rem;
}

/* Error Message Text */
.msg {
  width: 100%;
  margin: 1rem 1rem .125rem 1rem;
  text-align: center;
  font-weight: bold;
  color: #C00;
}

/* Loading Overlays = Filters + Themes Nav */
.loading {
  display: flex;
  z-index: 6;
  justify-content: center;
  cursor: default;
}
.loading.hide {
  display: none;
}
.loading .icon {
  top: .25rem;
  right: .5rem;
}

/* Filters Loading Overlay */
aside .loading {
  position: fixed;
  height: calc( 85vh - 1.4375rem ); /* Full Height minus Top Margin */
  background: rgba(255,255,255,.85) !important;
  min-width: 16.25rem;
  margin-top: 1.4375rem;
}
/* Nav Themes Loading Text */
nav.themes .loading {
  position: absolute;
  width: 16.3125rem;
  height: 3.75rem;
  top: -.375rem;
  background: rgba(255,255,255,.85) !important;
}
/* Loading Text Bottom Theme List */
div.page span.loading {
  order: 999998;
  margin: .75rem 0 1rem 0;
  height: 1.9375rem; /* Same Height as Button Load More */
}


/* WPSorter Components
 * - Breadcrumbs                 = Single Theme + Single Author + Single Marketplace + Archive Authors + Archive Marketplaces + Blog Post
 * - Social Icons/Links          = Single Theme + Single Author + Single Marketplace
 * - Taxo Pills                  = Single Theme + Compare Themes + Single Marketplace
 * - More/Less Taxo Buttons      = Single Theme + Compare Themes + Single Marketplace
 * - Show More/Less Descriptions = Single Theme + Compare Themes + Single Marketplace + Single Author
 * - Tooltip                     = Single Theme + Compare Themes + Filter Themes
 * - Rating Stars                = Single Theme + Compare Themes
 * - Pagination Navigation       = Search Results Page + Archive Authors + Archive Marketplaces + Blog Index + Blog Comments
 */

/* Breadcrumbs = Single Theme + Single Author + Single Marketplace + Archive Authors + Archive Marketplaces + Blog Post */
.bread {
  display: flex;
}
.bread li {
  margin-right: .25rem;
  font-size: .875rem;
  white-space: nowrap;
}
.bread li:last-child {
  white-space: normal;
}

/* Social Icons/Links = Single Theme + Single Author + Single Marketplace */
ul.social {
  display: flex;
  flex-flow: row wrap;
}
ul.social li {
  margin: 0 0 .25rem .5rem;
}
ul.social li:first-child {
  margin-left: 0;
}
/* More/Less Buttons */
ul.social .more,
ul.social .less {
  font-size: .75rem;
}
ul.social .more {
  width: 1rem;
  font-weight: bold;
  padding: .0625rem 0;
}
ul.social .more:hover {
  cursor: pointer;
  color: #00567f;
}
ul.social .less {
  width: auto;
  height: 1.125rem;
  padding: 0 .25rem 0 .1875rem;
  margin: .0625rem -.0625rem -.25rem .5rem;
  border: .0625rem solid #e4e4e4;
  border-radius: .0625rem;
  line-height: 1.33;
}
ul.social .less:hover {
  cursor: pointer;
  color: #00567f;
  border-color: #00567f;
}
ul.social a.disclosure:active,
ul.social a.disclosure:hover {
  text-decoration:none;
}

/* Taxo Pills = Single Theme + Compare Themes + Single Marketplace */
.pill {
  display: inline;
  color: #666;
  background: #fff;
  font-size: .625rem;
  padding: .125rem .375rem;
  border: .0625rem solid #e4e4e4;
  border-radius: .0625rem;
  white-space: nowrap; /* Keep Words Together */
}
.pill.hide {
  display: none;
}
/* Detected Plugins Pills = Warning */
.pill.warning {
  color: #d64309;
  border-color: #d64309;
  font-weight: normal;
}

/* More/Less Taxo Buttons = Single Theme + Compare Themes + Single Marketplace */
dl .more,
td .more,
dl .less,
td .less {
  font-size: .625rem;
  font-weight: bold;
  color: #666;
  background: #f2f2f2;
  border: .0625rem solid #e4e4e4;
  padding: 0 .25rem;
  margin: .25rem 0 0 -1.5rem; /* Negative Left Margin for Overlap */
  float: right;
  clear: both;
  position: relative; /* Above Pills */
}
/* More/Less Hover */
dl .more:hover,
td .more:hover,
dl .less:hover,
td .less:hover {
  cursor: pointer;
  color: #00567f;
  border-color: #00567f;
}

/* Show More/Less Descriptions = Single Theme + Compare Themes + Single Marketplace + Single Author */
.morecontent span {
  display: none;
}
.morecontent .morelink {
  text-decoration:none;
  outline: none;
  float: right;
  display: inline;
  color: #00567f;
}
.morelink:hover {
  cursor: pointer;
  text-decoration: underline;
}

/** 
 * Tooltip = Single Theme + Compare Themes + Filter Themes
 * https://gist.github.com/aprice/cc11f55bfc5f007365ba
 * https://developer.mozilla.org/en-US/docs/Web/CSS/::after
 */
/* Tooltip - Text */
*[data-tip]::before {
  content: attr(data-tip);
  display: block;
  position: absolute;
  z-index: 5;
  opacity: 0;
  top: -9999rem;
  white-space: pre; /* For New Line */
  margin: -1.625rem 0 0 .9375rem;
  padding: .125rem .5rem .125rem .25rem;
  border: .0625rem solid #e4e4e4;
  border-radius: .0625rem;
  background: #f2f2f2;
  color: #333;
  font-size: .75rem;
  font-weight: normal;
  text-align: left;
  transition: opacity 0.4s ease-out;
  box-shadow: .1875rem .1875rem .25rem rgba(0,0,0,.4);	
}
/* Show Tooltip Text - Hover Icon */
*[data-tip]:hover::before {
  opacity: 1;
  top: auto;
}



/* Tooltip = Message(before) and Info Icon(after) */
abbr {
  display: none;      /* Only Show on Hover */
  margin-right: auto; /* Float Left */
  cursor: pointer;
}
/* Tooltip - Info Icon SVG */
abbr::after {
  content: '';
  display: block;
  /* SVG Icon - Info (Grey) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath fill='%23454342' d='m80 15c-35.88 0-65 29.12-65 65s29.12 65 65 65 65-29.12 65-65-29.12-65-65-65zm0 10c30.36 0 55 24.64 55 55s-24.64 55-55 55-55-24.64-55-55 24.64-55 55-55z'/%3E%3Cpath fill='%23454342' d='m57.373 18.231a9.3834 9.1153 0 1 1 -18.767 0 9.3834 9.1153 0 1 1 18.767 0z' transform='matrix(1.1989 0 0 1.2342 21.214 28.75)'/%3E%3Cpath fill='%23454342' d='m90.665 110.96c-0.069 2.73 1.211 3.5 4.327 3.82l5.008 0.1v5.12h-39.073v-5.12l5.503-0.1c3.291-0.1 4.082-1.38 4.327-3.82v-30.813c0.035-4.879-6.296-4.113-10.757-3.968v-5.074l30.665-1.105'/%3E%3C/svg%3E");
  width: 1rem;  /* Same as in svg sprite = 10px */
  height: 1rem;
}
/* Change Icon Color on Hover */
abbr:hover::after {
  /* SVG Icon - Info (Blue) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath fill='%2300567f' d='m80 15c-35.88 0-65 29.12-65 65s29.12 65 65 65 65-29.12 65-65-29.12-65-65-65zm0 10c30.36 0 55 24.64 55 55s-24.64 55-55 55-55-24.64-55-55 24.64-55 55-55z'/%3E%3Cpath fill='%2300567f' d='m57.373 18.231a9.3834 9.1153 0 1 1 -18.767 0 9.3834 9.1153 0 1 1 18.767 0z' transform='matrix(1.1989 0 0 1.2342 21.214 28.75)'/%3E%3Cpath fill='%2300567f' d='m90.665 110.96c-0.069 2.73 1.211 3.5 4.327 3.82l5.008 0.1v5.12h-39.073v-5.12l5.503-0.1c3.291-0.1 4.082-1.38 4.327-3.82v-30.813c0.035-4.879-6.296-4.113-10.757-3.968v-5.074l30.665-1.105'/%3E%3C/svg%3E");
}

/* Show Info Icon on Hover */
ul[data-filter] li:hover abbr,
li.slider:hover abbr,
dl:hover abbr {
  display: inline-block;
}


/* Message Double Line = Children */
li abbr.double[data-tip]::before {
  margin-top: -2.375rem;
}
/* Message Double Line = Duplicate URLs */
abbr.double[data-tip]::before {
  margin-top: -2.75rem;
}
/* Message Tripple Line = Alternative Marketplace + URLs + Inline + blocked style.css */
abbr.tripple[data-tip]::before {
  margin-top: -4rem;
}

/* Rating Stars = Single Theme + Compare Themes */
.rating .icon {
  width: 1rem;
  height: 1rem;
  margin-right: .0625rem;
}
/* Full Star */
.full > .icon-star {
  color: #0071a6;
}
/* Empty Star */
.empty > .icon-star {
  fill: url(#empty);
  color: #0071a6;
}
/* Half Star */
.half > .icon-star {
  fill: url(#half);
  color: #0071a6;
}

/* Pagination Navigation = Search Results Page + Archive Authors + Archive Marketplaces + Blog Index + Blog Comments */
.pagination,
.comments-pagination { /* Blog Post Comments */
  font-weight: bold;
  padding: 1rem 0 2.5rem 0;
  width: 100%;
  order: 100;
}
/* Pagination Navigation */
.nav-links {
  display: flex;
  justify-content: center;
}
/* Previous/Next Buttons */
.prev.page-numbers,
.next.page-numbers {
  background: #f2f2f2;
}
.prev.page-numbers:focus,
.prev.page-numbers:hover,
.next.page-numbers:focus,
.next.page-numbers:hover {
  background: #00567f;
  color: #fff;
}
/* Previous */
.prev.page-numbers {
  position: absolute;
  left: .625rem;
  margin-top: 2.5rem;
}
/* Next */
.next.page-numbers {
  position: absolute;
  right: .5rem;
  margin-top: 2.5rem;
}
/* Previous Arrow Icon */
.prev.page-numbers .icon-arrow {
  transform: rotate(180deg);
}
/* Page Numbers */
.page-numbers {
  border: .0625rem solid transparent;
  border-radius: .125rem;
  padding: .25rem .75rem;
  cursor: pointer;
}
.page-numbers.hide {
  display: none;
}
.page-numbers.current,
.page-numbers[aria-current] {
  color: #333;
  border-color: #e4e4e4;
}
.page-numbers.current:hover,
.page-numbers[aria-current]:hover {
  background: transparent;
  cursor: default;
}
.page-numbers:focus,
.page-numbers:active, 
.page-numbers:hover {
  text-decoration: none;
  background: #f2f2f2;
  cursor: pointer;
}
.dots {
  margin: 0;
  padding: 0;
  align-self: center;
}
.dots:focus,
.dots:active, 
.dots:hover {
  background: transparent;
  cursor: default;
}


/* 
 * Single Theme
 */
main.theme {
  margin-top: 2.875rem;
} 
main.theme ul.bread {
  margin-left: .5rem;
}
article.theme {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 .5rem;
}
article.theme:hover {
  cursor: default;
}
/* Description Lists */
dl {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
dt {
  display: flex;
}
dt::after { 
  content: ':';
  margin: 0 .125rem 0 auto;
}
/* Exclude Related Marketplaces = Single Marketplace = Only First dt has : */
dl[title="Related Marketplace"] dt::after {
  content: none; /* Hide colon by default */
}
dl[title="Related Marketplace"] dt:first-of-type:not(:empty)::after {
  content: ':';
  margin: 0 .125rem 0 auto;
}
dd {
  display: flex;
  flex-grow: 1; /* Full Width */
  margin: 0;
}
/* Tooltip Icon Adjustments */
article.theme abbr {
  margin: .25rem .125rem 0 -.125rem;
}
/* Section Styling Defaults */
article.theme section,
article.theme p#description {
  margin: .5rem;
  padding: .75rem;
  border: .0625rem solid #e4e4e4;
  border-radius: .125rem;
}
/* Hide Headings */
article.theme h2,
article.theme section.specs h4,
article.theme section.achecker h4 {
  display: none;
}
/* New Window Icon */
/* Exclude: Single Theme Author Profile Link + Filter Themes Grid Items */
section:not(#themes):not(.author) a[target="_blank"]::after,
table#content thead a[target="_blank"]::after,
table#content td:not([headers~="country"]) a[target="_blank"]::after {
  content: '';
  display: inline-block;
  position: relative; /* Edge Fix */
  top: .0625rem;      /* Edge Fix */
  /* SVG Icon - Open New Window (Blue) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300567f' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
  width: .625rem;
  height: .625rem;
  margin-left: .3125rem;
}
/* Red Icon = Discontinued Link = W3C + Google Mobile Friendly */
section.w3c:not(#themes):not(.author) a[target="_blank"]::after,
section.friendly:not(#themes):not(.author) a[target="_blank"]::after,
table#content tr.friendly td:not([headers~="country"]) a[target="_blank"]::after,
table#content tr.w3c td:not([headers~="country"]) a[target="_blank"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23b30000' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
}

/* Unavailable/Outdated/Discontinued/Cloned Message = Single Theme + Single Marketplace */
article.theme .unavailable,
article.theme .outdated,
article.theme .discontinued,
article.theme .clone,
main.author .outdated,
main.author .discontinued,
main.market .outdated,
main.market .discontinued {
  width: 100%;
  margin: .5rem;
  padding: .5rem;
  text-align: center;
  border: .125rem solid #ffb900;
  background: #ffefc4;
  border-radius: .125rem;
}
article.theme .unavailable {
  border-color: #b30000;
  background: #ffb3b3;
}
article.theme .discontinued,
main.author .discontinued,
main.market .discontinued {
  border-color: #333;
  background: #c5c5c5;
}
article.theme .clone {
  border-color: #00567f;
  background: #e1f5ff;
}
/* Icons */
article.theme .unavailable .icon,
article.theme .outdated .icon,
article.theme .discontinued .icon,
article.theme .clone .icon,
main.author .outdated .icon,
main.author .discontinued .icon,
main.market .outdated .icon,
main.market .discontinued .icon {
  float: left;
  clear: both;
  width: 1.5rem;
  height: 1.5rem;
}

/* Marketplace Image */
article.theme img.marketplace {
  margin: .5rem 0;
  border-radius: .125rem;
  align-self: flex-start;
  order: 1;
}

/* Section Info */
article.theme section.info {
  border-color: #00567f;
  padding-top: .5rem;
  margin: .5rem 0;
  display: flex;
  flex: 1 0 12rem;
  flex-basis: auto;
  flex-flow: column nowrap;
  order: 2;
}
/* Variable Label Widths */
section.info dt {       /* Default = Marketplace */
  width: 5.75rem;
}
section.info.lb9 dt {   /* Last Update */
  width: 5.875rem;
}
section.info.lb10 dt {  /* Free/Paid Version */
  width: 6rem;
}
section.info.lb15 dt {  /* Active Installs */
  width: 6.6875rem;
}
section.info.lb20 dt {  /* Active Installations */
  width: 8.9375rem;
}
/* Bold Links */
section.info a {
  font-weight: bold;
}
/* Affiliate Link Star */
section.info dl a span {
  margin-left: .125rem;
  display: inline-block;
  text-decoration: none;
}
/* Theme Name and Price */
section.info h2 {
  display: flex;
  justify-content: space-between;
}
/* Theme Price with Buy One and VAT */
section.info h2 span {
  white-space: nowrap;
}
/* VAT Mark + Buy One */
.buyone,
.vat {
  font-style: normal;
  font-weight: bold;
  color: #00567f;
}
/* Theme Title Price VAT and Buy One */
section.info h2 .buyone,
section.info h2 .vat {
  margin: 0 -.0625rem;
}
/* Adjust Underline */
section.info h2 a {
  text-underline-offset: -.375rem;
}
/* Free/Paid Version - Theme Price */
section.info .version {
  font-weight: bold;
}
/* Time Ago */
section.info .ago { 
  display: none;
  font-size: .6875rem;
  margin: .1875rem 0 0 auto;
  white-space: nowrap;
}
/* Switch Data/Time Ago on Active */
section.info dd:active {
  font-size: 0;
}
section.info dd:active span.ago {
  display: flex;
  margin: 0;
  font-size: .875rem;
}
/* Paid Theme Price + Parent Theme Price */
section.info span {
  margin-left: auto;
}

/* Buttons: Download/Buy + Demo = Single Theme + Compare Themes */
section.info .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}
/* Space above Buttons */
section.info dl:last-of-type {
  margin-bottom: .5rem;
}
.buttons a {
  white-space: nowrap;
  border-radius: .125rem;
  padding: .5rem 1rem;
}
/* Marketplace Button */
a.market {
  border: .0625rem solid #0071a6;
  background: #0071a6;
  color: #fff;
}
section:not(#themes):not(.author) a.market[target="_blank"]::after, 
table#content tr.info a.market[target="_blank"]::after {
 /* SVG Icon - Open New Window (white) */
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' %3E%3Cpath fill='%23fff' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
}
a.market:hover {
  text-decoration: none;
  color: #00567f;
  background: #fff;
  border-color: #00567f;
}
section:not(#themes):not(.author) a.market[target="_blank"]:hover::after,
table#content tr.info a.market[target="_blank"]:hover::after {
  /* SVG Icon - Open New Window (blue) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300567f' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
} 
/* Demo Button */
a.demo {
  color: #00567f;
  background: #fff;
  border: .0625rem solid #00567f;
  font-weight: bold;
}
/* Theme Demo with Warning */
a.demo.warning {
  color: #d64309;
  border: .0625rem solid #d64309;
}
/* Open New Window (blue) */
section:not(#themes):not(.author) a.demo[target="_blank"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300567f' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
}
/* Open New Window (red) */
table#content tr.info a.demo.warning[target="_blank"]::after,
section:not(#themes):not(.author) a.demo.warning[target="_blank"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23d64309' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
}
a.demo:hover {
  color: #fff;
  background: #00567f;
  text-decoration: none;
}
a.demo.warning:hover {
  background: #d64309;
}
/* SVG Icon - Open New Window (white) */
section:not(#themes):not(.author) a.demo[target="_blank"]:hover::after,
table#content tr.info a.demo[target="_blank"]:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
}
/* Disclaimer Link */
a.disclaimer {
  font-size: .625rem;
  font-weight: bold;
  margin-top: .3125rem;
}
/* Star */
a.disclaimer span {
  display: inline-block;
  width: .625rem;
}
/* Disable Underline on Star */
a.disclaimer:hover span {
  text-decoration: none;
} 

/* Description */
article.theme p#description {
  flex: 2 1 22.9375rem;
  margin: .5rem 0;
  order: 3;
}

/* Desktop Image */
/* Image Container */
article.theme .desktop {
  max-width: 18rem;     /* Same as SVG */
  max-height: 10.5rem;  /* Same as SVG */
  text-align: center;
  margin: .5rem;
  order: 4;
}
/* Desktop SVG Image Overlay */
article.theme .desktop .icon-desktop {
  width: 18rem;
  height: 10.5rem; /* Almost Same Height as Mobile Image */
}
/* Actual Image */
article.theme .desktop img {
  width: 13.75rem;   /* 220px - Resize Image for Mobile View */
  top: -9.875rem;
  left: -.0625rem;
  position: relative;
  z-index: -1;
}

/* Specifications */
article.theme section.specs {
  padding-right: 0;
  flex: 2 1 18.125rem;
  order: 5;
}
/* Variable Label Widths - td */
section.specs dt { width: 2.5625rem; }      /* Tags = Default */ 
section.specs.lb1 dt { width: 2.625rem; }   /* Child */
section.specs.lb2 dt { width: 3.3125rem; }  /* Rating */
section.specs.lb3 dt { width: 3.5625rem; }  /* Layout */
section.specs.lb4 dt { width: 3.625rem; }   /* Plugins */
section.specs.lb5 dt { width: 3.75rem; }    /* License + Version */
section.specs.lb6 dt { width: 4.0625rem; }  /* Children */
section.specs.lb7 dt { width: 4.3125rem; }  /* WP Versions */
section.specs.lb8 dt { width: 4.375rem; }   /* Columns + Features */
section.specs.lb9 dt { width: 4.5625rem; }  /* Category */
section.specs.lb10 dt { width: 4.6875rem; } /* Browsers */
section.specs.lb11 dt { width: 5.25rem; }   /* Categories */
section.specs.lb12 dt { width: 5.375rem; }  /* Framework */
section.specs.lb13 dt { width: 5.875rem; }  /* Frameworks */

/* Variable Label Widths - li first/empty list item for taxo */
section.specs ul:not(.children) li:first-of-type { display: inline-block; width: 1.1875rem; } /* 1.5rem */
section.specs.lb1 ul:not(.children) li:first-of-type { width: 1.25rem; } /* 1.5625rem; */
section.specs.lb2 ul:not(.children) li:first-of-type { width: 1.9375rem; } /* 2.25rem; */
section.specs.lb3 ul:not(.children) li:first-of-type { width: 2.1875rem; } /* 2.5rem; */
section.specs.lb4 ul:not(.children) li:first-of-type { width: 2.25rem; } /* 2.5625rem; */
section.specs.lb5 ul:not(.children) li:first-of-type { width: 2.375rem; } /* 2.6875rem; */
section.specs.lb6 ul:not(.children) li:first-of-type { width: 2.6875rem; } /* 3rem; */
section.specs.lb7 ul:not(.children) li:first-of-type { width: 2.9375rem; } /* 3.25rem; */
section.specs.lb8 ul:not(.children) li:first-of-type { width: 3rem; } /* 3.3125rem; */
section.specs.lb9 ul:not(.children) li:first-of-type { width: 3.1875rem; } /* 3.5rem; */
section.specs.lb10 ul:not(.children) li:first-of-type { width: 3.3125rem; } /* 3.625rem; */
section.specs.lb11 ul:not(.children) li:first-of-type { width: 3.875rem; } /* 4.1875rem; */
section.specs.lb12 ul:not(.children) li:first-of-type { width: 4rem; } /* 4.3125rem; -5px */
section.specs.lb13 ul:not(.children) li:first-of-type { width: 4.5rem; } /* 4.8125rem; */

/* Adjust Taxo - dd */
section.specs dl.category dd,
section.specs dl.features dd, 
section.specs dl.tags dd,
section.specs dl.plugins dd, 
section.specs dl.versions dd, 
section.specs dl.frameworks dd,
main.market dl.support dd {
  margin: -1.5rem 0 0 .0625rem;
  width: 100%;
}
/* Adjust Taxos - ul */
section.specs ul {
  margin: 0 .5rem 0 1rem;
  width: 100%;
}
/* Rating Text (based on x Votes) */
section.specs .rating span:last-child,
table#content .rating span:last-child {
  font-size: .625rem;
  margin: .25rem;
  white-space: nowrap;
}
/* Browser Icons */
section.specs .browsers .icon {
  margin: .125rem .3125rem .125rem .0625rem;
}

/* Alternative Marketplaces + Children = Show More/Less */
section.info .alternative ul,
section.specs .child ul {
  width: 100%;
  margin: .1875rem .5rem 0 0;
}

/* Alternative Marketplaces + Child Themes */
section.info .alternative li:not(.more):not(.less),
section.specs .child li:not(.more):not(.less) {
  line-height: 1.35714;
}
/* Alternative Marketplaces + Child Themes - Info Icon */
section.info .alternative abbr,
section.specs .child abbr {
  margin: .0625rem .125rem -.1875rem 0;
}
/* Alternative Marketplaces + Child Themes - More/Less Buttons */
section.info .alternative li.more,
section.info .alternative li.less,
section.specs .child li.more,
section.specs .child li.less {
  margin-top: -1rem;
}
/* Child Theme = Discontinued */
section.specs .child a.error,
table#content .child a.error {
  font-weight: normal;
}

/* Section Author */
article.theme section.author {
  display: flex;
  flex: 2 1 14.0625rem;
  flex-flow: column;
  background: #f2f2f2;
  border: none;
  order: 6;
}
section.author dl {
  margin: .25rem 0;
}
/* Variable Label Widths */
/* Default = Single Marketplace */
section.author.lb1 dt {               
  width: 3.5625rem;
}
/* Marketplaces and/or Country */
section.author.lb2 dt {               
  width: 3.9375rem;
}
/* Author Name and Logo */
section.author h3 {
  display: flex;
  justify-content: space-between;
  font-size: .875rem;
  margin: 0 0 .75rem 0;
  line-height: 1;
  height: 5rem; /* 80px = Same Height as Marketplace Logo or Author Image */
  word-break: break-all;
}
section.author h3 img {
  margin-right: 1rem;
}
/* Author Name = Keep Words Together */
section.author h3 a {
  word-break: break-word;
}
/* Author Social Links Adjustments */
section.author ul.social {
  justify-content: flex-end;
  margin: -3.875rem 0 1.5625rem auto;
  width: 8rem;
}
/* Social Links Without Logo */
section.author.no ul.social {
  margin-bottom: 0;
}
/* Social Wider */
section.author ul.social.wide {
  width: 8.75rem;
}
/* Author Description */
section.author .desc {
  margin: .25rem 0;
  background: #f2f2f2;
}
/* Show More Description */
section.author .desc.scroll {
  padding: .25rem;
  margin-right: -1rem;
  height: 7rem;
  border: .0625rem solid #e4e4e4;
  overflow-y: scroll;
}
/* Author Country - Location Icon */
section.author dl:not(.places) a {
  margin-left: .25rem;
}
/* Author Marketplaces */
section.author .places {
  margin: auto 0;
  padding-top: .375rem;
}
section.author ul.markets {
  display: flex;
  flex-wrap: wrap;
  margin: -.125rem 0 0 -.125rem;
}
section.author ul.markets li {
  margin: .25rem;
} 
/* Missing Marketplace Image/Icon > Use SVG Icon */
section.author ul.markets .icon { 
  width: 1.5rem;
  height: 1.5rem;
}
/* Show More Marketplaces */
section.author ul.markets.wide {
  margin: auto 0;
  width: 100%;
} 
/* More/Less Buttons */
section.author ul.markets .more,
section.author ul.markets .less {
  float: none;
  background: none;
  font-size: .75rem;
  padding: .25rem;
  margin: .125rem 0 0 auto;
}
section.author ul.markets .more {
  border: none;
}
section.author ul.markets .less {
  font-size: 1rem;
  line-height: .75;
  width: 1.5rem;
  height: 1.5rem;
}
/* Author Portfolio */
ul.portfolio {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .25rem;
}
/* Scale Image */
section.author ul.portfolio li {
  width: 23%;     /* Scale Image = 4 on 1 Row */
  position: relative;
  border-radius: .125rem;
  line-height: 0;
}
/* Portfolio Overlay = Show Half */
ul.portfolio li span {
  display: flex;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 50%;
  flex-flow: column nowrap;
  word-wrap: break-word;
  font-weight: bold;
  font-size: .6875rem;
  text-align: center;
  overflow: hidden;
  line-height: 1.35;
  padding: .0625rem;
  justify-content: center;
  border: .0625rem solid #0071a6;
  background: rgba(255,255,255,.85);
}
/* Show Full Theme Title */
section.author:active ul.portfolio span {
  display: flex;
  top: 0;
  height: 100%;
}
/* Show More - Author Profile Link */
section.author ul.portfolio li:nth-of-type(4) {
  margin: 0;
  width: 2.5rem;
  text-align: center;
  align-self: center;
  font-size: .6875rem;
  line-height: 1.35;
}

/* Mobile Image */
article.theme .mobile {
  width: 11rem;
  height: 18rem;
  margin: .5rem -.5rem .5rem 0;
  align-self: flex-start;
  order: 7;
}
/* Mobile SVG Image Overlay */
article.theme .mobile .icon-mobile {
  width: 11rem;
  height: 18rem;
  margin-bottom: 1rem;
}
article.theme .mobile img {
  top: -17.0625rem;
  left: 1.625rem;
  position: relative;
  z-index: -1; /* Below SVG */
}

/* Defaults for Inspector + Pagespeed + W3C + WPT */
/* SVG Icon + Title */
article.theme section h4 {
/*  margin: 0;*/
  display: flex;
}
/* SVG Icon */
section h4 .icon {
  height: 1.75rem;  /* All Same Height = 28px + Variable Widths */
  margin: 0 .5rem 0 0;
}
/* Source Link */
section .source {
  font-size: .75rem;
  display: flex;
  align-self: flex-end;
  margin: .5rem 0 0 0;
}

/* Inspector */
article.theme section.inspect {
  flex: 2 1 12.0625rem;
  max-width: 22rem;
  order: 8;
}
/* Inspector Icon */
section.inspect .icon-search {
  transform: rotate(90deg);
  width: 1.75rem;
  height: 1.75rem;
  margin-right: .375rem;
  color: #0071a6;
}
/* Variable Label Widths */
section.inspect dl:not(.fonts) dt { width: 2.875rem; }      /* Default = URLs/Inline */ 
section.inspect.lb6 dl:not(.fonts) dt { width: 3.1875rem; } /* Divitis */
section.inspect.lb7 dl:not(.fonts) dt { width: 3.5625rem; } /* Plugins */
section.inspect.lb8 dl:not(.fonts) dt { width: 4.375rem; }  /* style.css */
section.inspect.lb9 dl:not(.fonts) dt { width: 4.5625rem; } /* Duplicate URLs */
/* Adjust Label Width for Hover */
section.inspect dl:hover:not(.fonts) dt { width: 3.875rem; }
section.inspect.lb6 dl:hover:not(.fonts) dt { width: 4.1875rem; }
section.inspect.lb7 dl:hover:not(.fonts) dt { width: 4.5625rem; }
section.inspect.lb8 dl:hover:not(.fonts) dt { width: 5.375rem; }
section.inspect.lb9 dl:hover:not(.fonts) dt { width: 5.5625rem; }

/* Inspector Icons */
section.inspect .icons {
  text-align: right;
  margin: -.25rem -.375rem .25rem 0;
}
section.inspect .icons .icon {
  margin: 0 .125rem;
}
/* Google Fonts */
section.inspect .fonts {
  margin-bottom: .375rem;
}
/* Remove Colon Mark : */
.fonts dt::after {
  display: none;
  margin: 0;
}
.fonts dt,
.fonts ul {
  width: 100%;
}
/* URLs + Inline = Space Around Minus - Symbols */
section.inspect :not(.icons) span {
  margin: 0 .25rem;
}
section.inspect span:first-child {
  margin-left: 0;
}
/* Google Font Link Counters */
section.inspect .fonts span {
  margin: 0 -.0625rem 0 auto;
}
/* Google Fonts Scroll */
section.inspect .fonts.scroll dd {
  margin-right: -.8125rem;
}
section.inspect .fonts.scroll ul,
table#content ul.scroll {
  max-height: 6rem;
  border: .0625rem solid #e4e4e4;
  overflow: hidden scroll;
}
section.inspect .fonts.scroll li {
  margin: 0;
  padding-left: .5rem;
}
/* Google Fonts Link */
section.inspect .fonts li {
  margin: 0 -.5rem 0 .5rem;
}
section.inspect .fonts li:hover {
  background: #f2f2f2;
}
section.inspect .fonts a {
  color: #333;
  display: flex;
  justify-content: space-between;
}
section.inspect .fonts a:hover {
  color: #0071a6;
  text-decoration: none;
}
/* Google Font Links - Open New Window Icon */
section.inspect a[target="_blank"]::after {
  margin: .375rem .375rem 0 0;
  /* SVG Icon - Open New Window (Gray) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23454342' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
}
section.inspect a[target="_blank"]:hover::after {
  /* SVG Icon - Open New Window (Blue) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300567f' d='M61.1,0v11.1h19.9L26.4,65.7l7.8,7.8l54.6-54.6v19.9H100V0 M88.9,88.9H11.1V11.1H50V0H11.1 C4.9,0,0,4.9,0,11.1v77.8C0,95,5,100,11.1,100h77.8c6.1,0,11.1-5,11.1-11.1V50H88.9V88.9L88.9,88.9z'/%3E%3C/svg%3E");
}
/* Theme Demo Error */
section.inspect .demo .error dd {
  color: #C00;
  font-weight: bold;
}
/* Theme Demo Days */
section.inspect .demo span {
  color: #333;
  font-weight: normal;
  margin: 0 -0.0625rem 0 auto;
}

/* style.css Label = Blocked style.css */
section.inspect .style dt.error {
  font-weight: normal;
}
/* style.css File/Header */
section.inspect .style span,
table#content .style span {
  margin: 0;
  font-weight: bold;
  color: #008000;
}
/* Error = Red */
section.inspect .style span.error,
table#content .style span.error {
  color: #C00;
}
/* Warning = Orange */
section.inspect .style span.warning,
table#content .style span.warning {
  color: #d64309;
}

/* FSE Check Icon */
section.inspect dd .icon {
  margin: .1875rem .125rem 0 .125rem;
}


/* Detected Plugins */
section.inspect .detected dt::after {
  content: '';
}
section.inspect .detected span::before {
  content: ':';
  margin-right: .125rem;
}
section.inspect .detected span {
  display: flex;
  margin-right: 0.125rem;
}
/* Variable Label Widths */
section.inspect.lb7 dl.detected span {
  margin-left: 0;
}
section.inspect.lb8 dl.detected span {
  margin-left: .8125rem;
}
section.inspect.lb9 dl.detected span {
  margin-left: 1rem;
}
section.inspect .detected ul {
  margin: 0 .5rem 0 .75rem;
  width: 100%;
}



/* Merged = Pagespeed Insights + Mobile Friendly */
article.theme .google {
  flex: 2 1 13rem;
  max-width: 23rem;
  order: 9;
} 

/* Google PageSpeed Insights */
article.theme section.pagespeed {
  display: flex;
  flex-flow: column nowrap;
  order: 8;
  margin-bottom: 1rem;
}

/* H4 Adjustment - Text on 2 Lines */
article.theme section.pagespeed h4 {
  line-height: 1.1875;
  margin: -.1875rem 0 .1875rem 0;
  max-width: 13rem;
}
/* Google Pagespeed Icon = 512 x 520 - 28px height = 1.75rem */
section.pagespeed h4 .icon {
  width: 1.8125rem;
  height: 1.75rem;
  margin: .25rem .5rem 0 0;
}
section.pagespeed table {
  border-spacing: 0;
  font-size: .875rem;
}
/* Smartphone + Computer Icon */
section.pagespeed table .icon {
  width: 1.75rem;
  height: 1.75rem;
}
/* Same Line Height as Definition Lists */
section.pagespeed table tr {
  line-height: 1.517;
}
/* First Column */
section.pagespeed th {
  font-weight: normal;
  text-align: center;
}
section.pagespeed th[scope="row"] {
  width: 6.6875rem;
  text-align: left;
}
/* Colon Symbol */
section.pagespeed th::after { 
  content: ':';
  float: right;
}
/* Remove Colon from First Table Row */
section.pagespeed tr:first-child th::after { 
  content: '';
}
/* Align Center */
section.pagespeed td:nth-child(2),
section.pagespeed td:nth-child(3){
  text-align: center;
  line-height: initial;
}

/* Values */
section.pagespeed td span {
  font-size: .6875rem;
  font-weight: bold;
  position: absolute;
  margin: .5rem 0  0 -1.4375rem;
}
section.pagespeed td span.single {
  margin-left: -1.1875rem;  
}
section.pagespeed td span.tripple {
  margin-left: -1.6875rem;  
}
section.pagespeed td.green span {
  color: #080; 
}
section.pagespeed td.orange span {
  color: #C33300;  /* 195, 51, 0 = #C33300 */
}
section.pagespeed td.red span {
  color: #C00;  /* 204, 0, 0 = #C00 */
} 
/* Exclamation Mark ! */
section.pagespeed td:nth-child(2):not([class]),
section.pagespeed td:nth-child(3):not([class]) {
  font-size: 1rem;
  font-weight: bold;
}

/* Powered by Lighthouse */
section.pagespeed .powered {
  font-size: .75rem;
  margin: .5rem -.125rem -.5rem -.125rem;
}


/* Mobile Friendly Icon = 296 x 264 - 28px height */
section.friendly h4 .icon {
  width: 2rem;
  margin: -.125rem .5rem 0 0;
}


/* Mobile Friendly */
article.theme section.friendly {
  display: flex;
  flex-flow: column nowrap;
  align-self: flex-start;
  order: 9;
}
/* Mobile Friendly Check/Failed Icon */
section.friendly dd .icon {
  margin-left: .125rem;
}
/* Checked Icon */
section.friendly dd span[title="Passed"] .icon {
  margin-top: .125rem;
}
/* Variable Label Widths */
section.friendly dt { /* Default = Mobile Friendly Only */
  width: 7.1875rem;
}
section.friendly.blocked dt { /* Blocked Resources */
  width: 8.75rem;
}



/* W3C Unicorn Validator */
article.theme section.w3c {
  display: flex;
  flex: 2 1 12.0625rem; /* Same as Inspector */
  flex-flow: column nowrap;
  align-self: flex-start;
  max-width: 22rem;
  order: 10;
}
article.theme section.w3c h4 {
  margin-bottom: .1875rem;
}
/* W3C Logo Icon 100 x 50 */ 
section.w3c .icon-w3c { 
  width: 3.5rem;
}
/* HTML + CSS Icon */
section.w3c .icon-w3c-html,
section.w3c .icon-w3c-css {
  margin: .375rem .5rem 0 .25rem;
}
/* W3C - Variabele Label Widths */
section.w3c dt {      /* Default = Info */
  width: 2.3125rem;
}
section.w3c.lb2 dt {  /* Errors */
  width: 3.3125rem;
}
section.w3c.lb3 dt {  /* Warnings */
  width: 4.6875rem;
}
/* Space Between HTML and CSS */
section.w3c div:first-of-type {
  margin-bottom: .25rem;
}
section.w3c div.max:last-of-type {
  margin: .5rem 0 0 0;
}
section.w3c div:not(.max):last-of-type {
  margin-bottom: -.125rem;
}
/* HTML + CSS Icons */
section.w3c .icon:not(.icon-w3c) {
  width: 2.5rem;
  height: 2.5rem;
  float: left;
  clear: right;
}
/* Check Icon */
section.w3c .icon-check {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: .375rem;
}
/* All Items Visible - More Space and Bigger Icons HTML/CSS */
section.w3c .max {
  margin-bottom: .75rem;
}
section.w3c .max .icon {
  width: 4rem;
  height: 4rem;
  margin-top: .25rem
}
/* Source Link = red = Discontinued Service */
section.w3c .source a,
section.friendly .source a {
  color: #b30000;
}

/* WebPageTest */
article.theme section.wpt {
  display: flex;
  flex-flow: column nowrap;
  align-self: flex-start;
  flex: 2 1 12rem;
  max-width: 22rem;
  order: 11;
}
/* WPT Icon 100 x 80 */
section.wpt h4 .icon {
  width: 2.1875rem;
}
/* Variable Label Widths */
section.wpt dt {      /* Default = Visually Complete */
  width: 8.375rem;
  white-space: nowrap;
}
/* WebPageTest - Grades */
ul.grades {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: .5rem 0;
}
ul.grades li { 
  width: 1.75rem;
  height: 1.75rem;
  font-weight: bold;
  text-align: center;
  padding-top: .125rem;
}
.grades .A,
.grades .B {
  color: #fff;
  background: #008000; /* Green */
}
.grades .C {
  background: #ffb900; /* Orange */
}
.grades .D,
.grades .E,
.grades .F {
  color: #fff;
  background: #b30000; /* Red - Dark */
}
/* Missing Grade */
ul.grades li:first-child:not([class]) {
  border: .0625rem dashed #e4e4e4;
}
/* WebPageTest Error Message */
section.wpt span.error {
  text-align: center;
  padding: .125rem 0 .25rem 0;
}

/* Web Color Vitals */
.green {
  color: #008000;
  font-weight: bold;
}
.red {
  color: #c00;
  font-weight: bold;
}
.orange {
  color: #d64309;
  font-weight: bold;
}

/* Theme Charts = Single Theme + Compare Themes */
/* Chart Timing */
.chart-timing {
  order: 12;
  margin: .5rem 0;
}
/* Labels X-axis */
.chart-timing .ct-chart-line .ct-horizontal {
  display: block;
  margin-left: -2.25rem;
  text-align: center;
}
/* Legend */
.chart-timing li.ct-series-0::before {
  background: #00567f;
  border-color: #00567f;
  margin-top: .375rem;
}

/* Chart Versions */
.chart-updates {
  order: 13;
  margin: .5rem 0;
}
/* Labels X-axis */
.chart-updates .ct-chart-line .ct-horizontal {
  display: block;
  margin-left: -2.25rem;
  text-align: center;
}
/* Legend */
.chart-updates li.ct-series-0::before {
  background: #00567f;
  border-color: #00567f;
  margin-top: .375rem;
}


/* Chart Statistics = Sales + Price */
.chart-stats {
  order: 14;
  margin: .5rem 0;
}
/* Chart Price */
.chart-price .ct-chart-line .ct-line,
.chart-price .ct-chart-line .ct-point {
  stroke: #0071a6;
} 
/* Legend - Sales and Price */
.chart-sales li.ct-series-0::before {
  background: #0071a6;
  border-color: #0071a6;
  margin-top: .4375rem;
}
.chart-sales li.ct-series-1::before {
  background: #00567f;
  border-color: #00567f;
  margin-top: .4375rem;
} 
/* Legend - Price Only */
.chart-price li.ct-series-0::before {
  background: #0071a6;
  border-color: #0071a6;
  margin-top: .4375rem;
}
/* Legend - Sales Only */
.chart-sales.only li.ct-series-0::before {
  background: #00567f;
  border-color: #00567f;
  margin-top: .4375rem;
}
/* Labels X-axis */
.chart-sales .ct-chart-line .ct-label.ct-horizontal {
  display: block;
  text-align: center;
}


/* Chart Rating = Stars + Votes */
.chart-rating {
  order: 15;
  margin: .5rem 0;
}
 /* Chart Stars */
.chart-stars .ct-chart-line .ct-line,
.chart-stars .ct-chart-line .ct-point {
  stroke: #0071a6;
}
/* Rating Legend */
.chart-rating .rating {
  text-align: center;
  margin-top: -.5rem;
}
/* Labels X-axis */
.chart-stars .ct-chart-line .ct-label.ct-horizontal {
  display: block;
  text-align: center;
}



/*
 * Compare Themes
 * https://css-tricks.com/simple-css-row-column-highlighting/ - See Comment from Mottie = Use JQuery Solution
 * https://codepen.io/Mottie/pen/xbPeJK
 */
table#content {
  margin: 3.5rem 1.25rem .75rem .5rem;
  border-spacing: 0;
  border: .125rem solid #f2f2f2;
  align-self: flex-start; /* Default Alignment */
  font-size: .875rem;
}
/* Default Arrow Icon */
table#content:hover {
  cursor: default;
}
/* Hover Cols and Rows */
.highlight, 
table#content tr:hover td,
table#content tr[aria-expanded]:hover td.outdated,
table#content tr[aria-expanded]:hover td.discontinued,
table#content tr:hover th {
  background: #e1f5ff;
}
/* Compare 3 or Less Themes */
table#content.center {
  align-self: center;
}
/* Table Header = First Column + First Row */
table#content th {
  background: #f2f2f2;
}
table#content th:not(:first-child) {
  border-left: .125rem solid #fff;
}
/* Default Table Cell */
table#content td,
table#content th {
  text-align: center;
  padding: .25rem .5rem;
  position: relative;
  outline: 0;
}
table#content tbody td {
  vertical-align: top;
}
/* First Column */
table#content tbody th {
  text-align: right;
  font-weight: normal;
  vertical-align: top;
  width: 11rem;
  min-width: 11rem;
}
/* First Item in First Column - Section Heading */
table#content tr[aria-expanded] th {
  text-align: left;
  font-weight: bold;
  font-size: .75rem;
  padding-left: 2.125rem;
}
/* Theme Name Rows = Except Buttons */
table#content tr[aria-expanded]:not(.info) td {
  font-size: .75rem;
}
/* SVG Icons Open/Close Filters */
table#content tr[aria-expanded] th::after { 
  position: relative;
  display: block; /* was inline-block = error with float */
  content: '';
  /* Chevron Up Grey */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23454342' d='M82.4,50L67.6,35.1L32.4,0L17.6,14.9L52.7,50L17.6,85.1L32.4,100l35.1-35.1L82.4,50L82.4,50L82.4,50z'/%3E%3C/svg%3E");
  transform: rotate(-90deg);
  width: 1rem;
  height: 1rem;
  float: right;
  margin-top: .125rem;
}
/* Chevron Down Grey */
table#content tr[aria-expanded="false"] th::after { 
  transform: rotate(90deg);
}
table tr[aria-expanded] th:hover {
  cursor: pointer;
}
/* Section Heading with Icon */
table#content tr[aria-expanded].inspect th,
table#content tr[aria-expanded].google th,
table#content tr[aria-expanded].w3c th,
table#content tr[aria-expanded].wpt th {
  padding-left: .5rem;
}
/* Remove Row Icon */
table#content tbody tr:not([aria-expanded]) th span {
  display: none; /* Only Show on Hover */
  float: left;
  margin: .375rem 0 0 .125rem;
  width: .75rem;
  height: .75rem;
}
/* SVG Close Icon */
table#content tbody tr:not([aria-expanded]) th:hover > span:not(.hide) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23454342' d='M96.8,82.6L64.1,49.7l32.8-32.5c1.3-1.3,1.3-3.5,0-4.9L87.6,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1	L50,35.3L17.3,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1L3,12.3c-1.3,1.3-1.3,3.5,0,4.9l32.8,32.5L3.2,82.6 c-0.7,0.7-1.1,1.5-1.1,2.5c0,1,0.4,1.8,1.1,2.5l9.3,9.4C13.2,97.6,14,98,15,98c0.9,0,1.7-0.3,2.5-1.1l32.6-32.8l32.6,32.7 c0.7,0.7,1.5,1.1,2.5,1.1c0.9,0,1.7-0.3,2.5-1.1l9.3-9.4c0.7-0.7,1.1-1.5,1.1-2.5C97.8,84.1,97.4,83.1,96.8,82.6z'/%3E%3C/svg%3E");
  display: inline;
}
/* SVG Close Icon */
table#content tbody tr:not([aria-expanded]) th span:not(.hide):hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e33535' d='M96.8,82.6L64.1,49.7l32.8-32.5c1.3-1.3,1.3-3.5,0-4.9L87.6,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1	L50,35.3L17.3,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1L3,12.3c-1.3,1.3-1.3,3.5,0,4.9l32.8,32.5L3.2,82.6 c-0.7,0.7-1.1,1.5-1.1,2.5c0,1,0.4,1.8,1.1,2.5l9.3,9.4C13.2,97.6,14,98,15,98c0.9,0,1.7-0.3,2.5-1.1l32.6-32.8l32.6,32.7 c0.7,0.7,1.5,1.1,2.5,1.1c0.9,0,1.7-0.3,2.5-1.1l9.3-9.4c0.7-0.7,1.1-1.5,1.1-2.5C97.8,84.1,97.4,83.1,96.8,82.6z'/%3E%3C/svg%3E");
  cursor: pointer;
}
/* Remove Column Icon */
table#content thead th:not(:first-child) span {
  float: right;
  opacity: 0; /* Default Hidden */
  margin: .25rem;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23454342' d='M96.8,82.6L64.1,49.7l32.8-32.5c1.3-1.3,1.3-3.5,0-4.9L87.6,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1	L50,35.3L17.3,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1L3,12.3c-1.3,1.3-1.3,3.5,0,4.9l32.8,32.5L3.2,82.6 c-0.7,0.7-1.1,1.5-1.1,2.5c0,1,0.4,1.8,1.1,2.5l9.3,9.4C13.2,97.6,14,98,15,98c0.9,0,1.7-0.3,2.5-1.1l32.6-32.8l32.6,32.7 c0.7,0.7,1.5,1.1,2.5,1.1c0.9,0,1.7-0.3,2.5-1.1l9.3-9.4c0.7-0.7,1.1-1.5,1.1-2.5C97.8,84.1,97.4,83.1,96.8,82.6z'/%3E%3C/svg%3E");
}
/* Remove Column Icon */
table#content thead th:not(:first-child) span:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e33535' d='M96.8,82.6L64.1,49.7l32.8-32.5c1.3-1.3,1.3-3.5,0-4.9L87.6,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1	L50,35.3L17.3,3c-0.7-0.7-1.5-1-2.5-1c-1,0-1.8,0.4-2.5,1L3,12.3c-1.3,1.3-1.3,3.5,0,4.9l32.8,32.5L3.2,82.6 c-0.7,0.7-1.1,1.5-1.1,2.5c0,1,0.4,1.8,1.1,2.5l9.3,9.4C13.2,97.6,14,98,15,98c0.9,0,1.7-0.3,2.5-1.1l32.6-32.8l32.6,32.7 c0.7,0.7,1.5,1.1,2.5,1.1c0.9,0,1.7-0.3,2.5-1.1l9.3-9.4c0.7-0.7,1.1-1.5,1.1-2.5C97.8,84.1,97.4,83.1,96.8,82.6z'/%3E%3C/svg%3E");
  cursor: pointer;
}
/* SVG Close Icon */
/* Show Remove Icon on Hover Header */
table#content thead th:not(:first-child):hover span {
  opacity: 100;
}
/* Restore View */
table#content thead th:first-child span {
  font-size: .75rem;
  color: #00567f;
}
table#content thead th:first-child span:hover {
  color: #333;
  cursor: pointer;
  text-decoration: underline;
}
/* Closed Section Border */
table#content tr[aria-expanded="true"]:not(.charts) th,
table#content tr[aria-expanded="true"]:not(.charts) td {
  border-bottom: .125rem solid transparent;
}
table#content tr[aria-expanded="false"]:not(.charts) th,
table#content tr[aria-expanded="false"]:not(.charts) td {
  border-bottom: .125rem solid #fff;
}
/* Outdated/Discontinued Icons */
table thead .icon-outdated,
table thead .icon-discontinued {
  margin-right: .25rem;
}
/* Outdated/Unavailable/Discontinued Text */
table#content tr.status td.outdated,
table#content tr.status td.unavailable,
table#content tr.status td.discontinued {
  font-weight: bold;
}
/* Outdated Borders */
table#content th.outdated {
  background: #ffefc4;
  border-left-color: #ffefc4;
  border-right: .125rem solid #ffefc4;
}
table#content td.outdated {
  border-left: .125rem solid #ffefc4;
  border-right: .125rem solid #ffefc4;
}
table#content tr:last-child td.outdated,
table#content tr.charts[aria-expanded="false"] td.outdated {
  border-bottom: .125rem solid #ffefc4;
}
table#content tr[aria-expanded="true"] td.outdated {
  background: #ffefc4;
}
/* Unavailable Borders */
table#content th.unavailable {
  background: #ffb3b3;
  border-left-color: #ffb3b3;
}
table#content td.unavailable {
  border-left: .125rem solid #ffb3b3;
  border-right: .125rem solid #ffb3b3;
}
table#content tr:last-child td.unavailable,
table#content tr.charts[aria-expanded="false"] td.unavailable {
  border-bottom: .125rem solid #ffb3b3;
}
table#content tr[aria-expanded="true"] td.unavailable {
  background: #ffb3b3;
} 
/* Discontinued Borders */
table#content th.discontinued {
  background: #c5c5c5;
  border-left-color: #c5c5c5;
}
table#content td.discontinued {
  border-left: .125rem solid #c5c5c5;
  border-right: .125rem solid #c5c5c5;
}
table#content tr:last-child td.discontinued,
table#content tr.charts[aria-expanded="false"] td.discontinued {
  border-bottom: .125rem solid #c5c5c5;
}
table#content tr[aria-expanded="true"] td.discontinued {
  background: #c5c5c5;
}
/* Section Header Rows = Have aria-expanded Attribute */
table#content tr[aria-expanded] { 
  background: #f2f2f2;
  font-weight: bold;
}
/* Marketplace Image = Fixed Widths to Prevent Resize on Show/Hide Sections */
tr.img td {
  padding-top: .5rem;
  width: 19rem;     /* Image Size: 288px = 18rem + 2x padding .5rem = 19rem */
  min-width: 19rem; /* Keep Charts same Size */
  max-width: 19rem;
}
tr.img td.outdated, 
tr.img td.unavailable,
tr.img td.discontinued {
  width: 19.25rem;  /* With Borders */
  min-width: 19.25rem;
  max-width: 19.25rem;
}
/* Info - Buttons Buy/Download + Demo */
table#content tr.info.buttons,
table#content tr.info.demo {
  height: 2.5rem;
}
table#content tr.info.buttons td,
table#content tr.info.buttons th,
table#content tr.info.demo td,
table#content tr.info.demo th {
  vertical-align: middle;
}
/* Message = Clone, Elementor Template or HTML Template */
tr.info th#warning {
  font-weight: bold;
}
/* Theme Price = Paid Version, Parent Theme and Alternative Marketplaces */
tr.info td[headers="disclaimer"]:not span:not(.ago) {
  float: right;
  clear: both;
  margin: 0 .5rem;
}
/* Affilaite Star * */
tr.market span {
  margin-left: .125rem;
  display: inline-block;
  text-decoration: none
}
/* Time Ago */
table span.ago {
  font-size: .6875rem;
  font-weight: normal;
}
/* Bold Links */
tr.parent a,
tr.market a,
tr.alter a {
  font-weight: bold;
}
/* Source Link = Google PageSpeed */
tr.google .powered {
  font-size: .75rem;
  float: right;
  clear: both;
  margin-right: 1rem;
}
/* Source Links = Mobile Friendly + W3C + WPT */
tr.friendly a,
tr.w3c a,
tr.wpt a {
  font-size: .8125rem;
  float: right;
  clear: both;
  margin-right: 1rem;
}
/* Source Links = Mobile Friendly + W3C = Discontinued */
tr.friendly a,
tr.w3c a {
  color: #b30000;
}

/* Lists = Alternative Marketplaces + Child Themes */
table#content ul li {
  text-align: left;
  margin-left: 1rem;
}
/* Google Font */
table#content tr.fonts ul li {
  text-align: center;
}
/* Alternative Marketplace + Child Themes - Tooltip */
table#content abbr {
  margin: 0 .125rem -.1875rem 0;
}
/* Show Tooltip on Hover */
table#content tr:hover abbr {
  display: inline-block;
}
/* Description */
tr.description p {
  margin: 0;
  text-align: left;
  padding: 0 1rem;
  width: 18rem;
}
/* Description Show More */
tr.description .morelink {
  font-size: .625rem;
  margin-top: .375rem;
}
/* Browser Icons */
th#browsers ~ td span {
  margin: 0 .125rem;
}
/* Alternative Theme Price + Parent Theme Price + Child Theme Price */
td.alternative span:not(a span),
tr.parent span,
td.child span {
  float: right;
  clear: both;
  margin-right: 1rem;
}

/* Inspector Icon */
tr.inspect .icon-search {
  transform: rotate(90deg);
  width: 1rem;
  height: 1rem;
  margin-right: .625rem;
  color: #0071a6;
}
/* Inspector Detected Icons */
th#icons ~ td span {
  margin: 0 .125rem;
}
/* Google Fonts - Remove Border */
table#content ul.scroll {
  border: none;
}
/* Demo Status Days */
table#content tr.demo span {
  color: #333;
  font-weight: normal;
  float: right;
  margin: 0 2rem 0 -2rem;
}
/* URLs + Inline */
tr.urls span,
tr.inline span {
  margin: 0 .25rem;
}
/* Mobile Image Wrapper */
tr.mobile div {
  display: inline-block;
  width: 11rem;
}
/* Mobile SVG Image */
tr.mobile .icon-mobile {
  width: 11rem;
  height: 18rem;
  z-index: 2;
  margin: 1rem 0 -.75rem 0;
}
/* Mobile Screenshot */
tr.mobile img {
  position: relative;
  top: -15.3125rem;
  z-index: 1;
  margin-bottom: -12.75rem;
}
/* Mobile Missing Image */
tr.mobile .icon-question {
  margin-top: -18.5rem;
  width: 3rem;
  height: 3.5rem;
}
/* Desktop SVG Image */
tr.desktop .icon-desktop {
  width: 18rem;
  height: 11rem;
  z-index: 2;
  margin-bottom: -1rem;
}
/* Desktop Screenshot */
tr.desktop img {
  position: relative;
  top: -9.5rem;
  width: 13.75rem; /* 220px */
  z-index: 3;
  margin-bottom: -8rem;
}
/* Desktop Missing Image */
tr.desktop .icon-question {
  margin-top: -11rem;
  width: 3rem;
  height: 3.5rem;
}
/* Fixed Widths for Static Table */
tr.mobile td,
tr.desktop td {
  width: 19rem;
}
tr.mobile td.outdated,
tr.mobile td.unavailable,
tr.mobile td.discontinued,
tr.desktop td.outdated,
tr.desktop td.unavailable,
tr.desktop td.discontinued {
  width: 19.25rem;
}
/* Pagespeed Icon */
tr.google .icon-pagespeed {
  margin-right: .625rem;
}
/* PageSpeed Section = Mobile + Desktop */
tr.google td span {
  display: inline-block;
  min-width: 4rem;
}
/* Mobile Friendly */
tr.friendly .icon-console {
  width: 1.5rem;
  margin: 0 .625rem 0 -1.75rem;
}

/* W3C Icon */
tr.w3c .icon-w3c {
  width: 1.5rem;
  margin-right: .125rem;
}
/* Unvalid HTML/CSS Icon */
tr.w3c .icon-close {
  width: .75rem;
  height: .75rem;
}
/* WPT Icon */
tr.wpt .icon-wpt {
  margin-right: .6875rem;
}
/* WPT Grades */
td.grades span {
  font-weight: bold;
  margin: 0 .125rem;
  padding: .125rem .375rem;
}
/* Missing Grade = Security Score */
td.grades:not(.unavailable) span:first-child:not([class]) {
  border: .0625rem dashed #e4e4e4;
}
/* WPT Grades CDN */
td.grades .icon-close {
  width: .75rem;
  height: .75rem;
}
/* Charts */
table#content tr.charts td {
  vertical-align: middle;
}
/* Align Chart Legends with Table First Column Row Text */
tr.charts .chart-timing,
tr.charts .chart-rating,
tr.charts .chart-stats {
  margin: 0;
  background: #fff;
}


/* Defaults Marketplace + Author
 * Single Marketplace + Archive Marketplace
 * Single Author + Archive Authors
 */
main.market,
main.markets,
main.author,
main.authors {
  flex-flow: row wrap;
  flex-grow: 0;
}
main.market ul.bread,
main.author ul.bread {
  width: 100%;
  margin-bottom: .25rem;
}
/* Marketplace/Author Name */
main.market h2,
main.markets h2,
main.author h2,
main.authors h2 {
  display: flex;
  margin: .25rem 0;
}


/* 
 * Single Marketplace
 */
/* Social Links */
main.market ul.social,
main.author ul.social {
  margin-left: auto;
}
/* Description */
main.market p,
main.author p {
  margin: 0 0 .5rem 0;
  width: 100%;
}
/* Country - Location Icon */
main.market dl:first-of-type a {
  margin-left: .25rem;
}
/* Support */
main.market .support ul {
  margin-left: 1rem;
}
/* Support Show More/Less */
main.market dl .more,
main.market dl .less {
  margin-left: .25rem;
}
/* Buy One and VAT Symbols */
main.market em.vat {
  margin-left: .25rem;
}
/* Labels */
main.market dl {
  width: 100%;
}
/* Payment Period */
main.market dd span {
  margin-left: 2rem;
}

/* Single Marketplace Variable Label Widths */
/* Country/Support */
main.market.lb1 dt {
  min-width: 4.125rem;
}
/* Buy One Get All */
main.market.lb2 dt {
  min-width: 7.625rem;
}
/* Longer Labels */
/* Lifetime Membership = 19 */
main.market.lb19 dt {
  min-width: 9.625rem;
}

/* Support Taxo - First/Empty list item for Taxo */
main.market dl.support li:first-of-type {
  display: inline-block;
}
main.market.lb1 dl.support li:first-of-type {
  width: 3.0625rem;
}
main.market.lb2 dl.support li:first-of-type {
  width: 6.5625rem;
}


/* 
 * Single Author
 */
/* Single Author Variable Label Widths */
main.author dl {
  width: 100%;
}
/* Country - Location Icon */
main.author dl:not(.alias):not(.aliasses) a {
  margin-left: .25rem;
}
main.author dl.alias,
main.author dl.aliasses {
  flex-flow: column;
}
main.author dl.alias dt,
main.author dl.aliasses dt {
  margin-bottom: -1.4375rem;
}
main.author dl.alias dd,
main.author dl.aliasses dd {
  margin-left: 2.5625rem;
}
/* Alias */
main.author dl.alias dt::after,
main.author dl.aliasses dt::after {
  margin-left: .0625rem;
}
/* Aliasses */
main.author.lb dl.alias dt::after {
  margin-left: 1.5rem;
}
main.author.lb dl.alias dd,
main.author.lb dl.aliasses dd {
  margin-left: 4.0625rem;
}

/* 
 * Single Marketplace + Single Author
 */

/* Name */
main.market h2 img,
main.author h2 img {
  margin-right: .5rem;
}

/* Tabs */
main.market label,
main.author label {
  display: inline-block;
  margin-bottom: -.0625rem;
  padding: .375rem .75rem;
  text-align: center;
  font-size: .875rem;
  font-weight: bold;
  color: #666;
  border: .0625rem solid transparent;
}
/* Hover Tab */
main.market input:not(:checked) + label:hover,
main.author input:not(:checked) + label:hover {
  color: #0071a6;
}
/* Counter */
main.market label span,
main.author label span{
  font-size: .6875rem;
  font-weight: normal;
}
/* Hover Fix */
main.market input:not(:checked) + label:hover span,
main.author input:not(:checked) + label:hover span {
  color: #666;
}

/* Tabs */
main.market fieldset,
main.author fieldset {
  margin-top: 1rem;
  border-bottom: .0625rem solid #e4e4e4;
  width: 100%;
}
main.market input:checked + label,
main.author input:checked + label {
  border: .0625rem solid #e4e4e4;
  border-bottom-color: #fff;
  cursor: default;
}

/* Tab Content Theme/Author Items */
section#themes[aria-hidden="true"], 
section#authors[aria-hidden="true"],
section#markets[aria-hidden="true"] {
  display: none;
}

/* Theme/Author/Marketplace Sections = Single and Archive */
main.market section#themes,       /* Marketplace Single */
main.market section#authors,
main.market section#markets,
main.markets section#markets,     /* Marketplace Archive */
main.author section#themes,       /* Author Single */
main.author section#markets,
main.authors section#authors {    /* Author Archive */
  justify-content: flex-start;
  border-left: .0625rem solid #e4e4e4;
  padding: .25rem;
  width: 44rem;       /* IE11 Fix */
  position: relative; /* Loading Overlay */
}

/* Theme/Author/Marketplace Items = Single and Archive */ 
main.market section#themes article, 
main.market section#authors article, 
main.market section#markets article, 
main.markets section article,
main.author section#themes article,
main.author section#markets article,
main.authors article {
  padding: .25rem;
  margin: .25rem;
  position: relative;       /* Overlay */
  min-width: 5.625rem;      /* 90px */ 
  justify-content: center;  /* Vertical Align */
  width: auto;
}
/* Adjust Width for Archive Pages = No Border */
main.markets section article,
main.authors article {
  min-width: 5.75rem; /* 92px */
}

/* Container */
main.market article a,
main.markets article a,
main.author article a,
main.authors article a {
  display: flex;
  justify-content: center; /* Horizontal Align */
}
/* Overlay - Theme Name and Price */
section#themes article div,
section#authors article div,
section#markets article div {
  display: flex;
  position: absolute;
  top: 3.375rem;
  left: 0;
  width: 100%;
  height: 2.125rem;
  text-align: center;
  font-size: .75rem;
  flex-flow: column nowrap;
  justify-content: center;
  padding: .25rem;
  background: rgba(255,255,255,.85);
}
section#markets article div {
  height: 2.25rem;
}
section#themes article:hover div,
section#authors article:hover div,
section#markets article:hover div { 
  display: flex;
}
/* Theme/Author/Marketplace Name */
section#themes article div h4,
section#authors article div h4,
section#markets article div h4 {
  word-wrap: break-word;
  font-size: .675rem;
  line-height: 1.33;
}
/* Theme Price/Count */
section#themes article div span,
section#authors article div span,
section#markets article div span {
  display: none;
  color: #333;
}

/* Theme/Author Post Navigation */
main.market section#themes ul,    /* Single Marketplace */
main.market section#authors ul,   /* Single Marketplace */
main.author section#themes ul,    /* Single Author */
main.authors section#authors ul,  /* Archive Authors */
section#markets ul {              /* Archive Marketplaces */
  font-size: .875rem;
  color: #00567f;
}
section#themes .pagination,
section#authors .pagination {
  padding: 1rem .25rem 2.25rem .25rem;
}

/* Loading Overlay */
section#themes .loading,
section#authors .loading,
section#markets .loading {
  top: auto;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.85);
}
/* Spin Icon */
section#themes .icon-spin,
section#authors .icon-spin,
section#markets .icon-spin {
  align-self: center;
  width: 4rem;
  height: 4rem;
}


/* 
 * Archive Marketplaces + Archive Authors
 */
main.markets section#markets,
main.authors section#authors {
  border-left: none;
  margin-left: -.625rem;
}
main.markets h2,
main.authors h2 {
  width: 100%;
}
/* Marketplace/Author Count */
main.markets h2 span,
main.authors h2 span {
  font-size: 1rem;
  margin: .25rem .5rem 0 auto;
}


/*
 * Search Results Page
 * Search Form also on 404.php Page
 */
main.search {
  margin-top: 3.5rem;
}
/* Search Form Input and Buttons */
main.search .search-form,
article.error-404 .search-form {
  display: flex;
  justify-content: space-between;
  margin: 0;
  order: 1;
}
main.search .search-form label,
article.error-404 .search-form label {
  display: none;
}
main.search .search-field,
article.error-404 .search-field {
  width: 100%;
  color: #666;
  font-size: 1rem;
  padding: .5rem 1rem .5rem .5rem;
  margin-right: .5rem;
  border: .0625rem solid #e4e4e4;
}
main.search .search-field:focus,
article.error-404 .search-field:focus {
  color: #333;
  border-color: #00567f;
}
/* Search Button */
main.search .search-button,
article.error-404 .search-button {
  display: none;
}
/* Search Submit Button */
main.search .search-submit,
article.error-404 .search-submit {
  border: .0625rem solid #e4e4e4;
  padding: .125rem 1rem;
  background: #f2f2f2;
}
main.search .search-submit:hover,
article.error-404 .search-submit:hover {
  background: #00567f;
  border-color: #00567f;
}
main.search .search-submit:hover .icon,
article.error-404 .search-submit:hover .icon {
  color: #fff;
}
/* Search Results Count and Type Filters */
main.search .results {
  flex-flow: column nowrap;
  margin: 1rem 0;
  padding: .125rem .5rem;
  background: #f2f2f2;
  order: 2;
  border: none;
  height: auto;
  min-height: 1.6875rem;
  position: initial; /* Override sticky from Filter Results */
}
/* X Results */
main.search .results span {
  margin: 0 auto -1.4375rem 0;
}
/* Result by Type */
main.search .results a {
  align-self: flex-end;
  white-space: nowrap;
}
/* Hover */
main.search .results a:hover {
  color: #333;
}

/* Search Results Items */
main.search article {
  display: flex;
  flex-flow: row wrap;
  border: .0625rem solid #f2f2f2;
  border-bottom: none;
  border-right: none;
  border-radius: .125rem;
  margin-bottom: 1rem;
  padding: .75rem;
  order: 5;
}
main.search article:hover {
  box-shadow: 0 .125rem .375rem -.125rem rgba(0,0,0,.4); /* Same as Filter Hover */
  background: #fff;
  cursor: default;
}
main.search article h2 {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  font-size: 1.125rem;
  line-height: 1.33;
  margin: 0 0 .5rem 0;
}
main.search article h2 a {
  order: 2;
  margin-right: 3.75rem;
}
main.search article h2 span {
  color: #666;
  font-size: .75rem;
  font-weight: normal;
  align-self: flex-end;
  white-space: nowrap;
  margin-bottom: -1.25rem;
  order: 1;
}
main.search div:not(.nav-links) {
  display: flex;
  width: 100%;
}
/* Outdated/Unavailable Icon */
main.search article .icon {
  margin-right: .3125rem;
}
/* Image */
main.search div:not(.results):not(.nav-links) a {
  height: 5rem;
  min-width: 5rem;
  margin-right: 1rem;
}
/* Description */
main.search div p {
  display: flex;
  flex-flow: column;
  font-size: .75rem;
  width: 100%;
  margin: 0;
}
/* Themes Count / Theme Price / Post Date */
main.search div:not(.results):not(.nav-links) span {
  color: #666;
  font-size: .75rem;
  margin: auto 0 0 auto;
  padding-top: .25rem;
  white-space: nowrap;
}
/* Buy One and VAT Symbols */
main.search em {
  margin-left: -.125rem;
}


/*
 * Contact Page
 */
main.contact p#content {
  margin-top: 0;
}
/* Contact */
form.contact ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
/* Hide Subject = Honeypot */
form.contact .subject {
  display: none;
  width: 100%;
}
form.contact label {
  display: block;
}
/* Input  */
form.contact input,
form.contact textarea {
  width: 100%;
  color: #666;
  padding: .5rem;
  border: .0625em solid #e4e4e4;
}
form.contact input.error,
form.contact textarea.error {
  border-color: #b30000;
}
form.contact input:focus,
form.contact textarea:focus {
  border-color: #00567f;
  color: #333;
}
/* Name and Email */
form.contact .name,
form.contact .email {
  width: 100%;
  margin-bottom: 1rem;
}
/* Message */
form.contact .message {
  width: 100%;
}
/* Human Verification */
form.contact .sum {
  width: 65%;
  margin-top: 1rem;
}
form.contact .sum input {
  width: 5.1875rem;
  margin: 0 .25rem;
}
/* Required */
form.contact .required {
  color: #00567f;
}
/* Error Messages */
form.contact .error {
  font-size: .875rem;
  float: right;
}
form.contact input.error {
  float: none;
}
form.contact .sum span.error {
  width: 100%;
}
/* Send Button */
form.contact .button {
  width: 35%;
  text-align: right;
  align-self: flex-end;
}
form.contact button {
  width: 80%;
  border: 0;
  padding: .5rem;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  background: #0071a6;
  border-radius: .125rem;
}
form.contact button:hover {
  color: #fff;
  background: #00567f;
}

/*
 * 404 Page
 */
article.error-404 {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  justify-content: center;
}
article.error-404 h1 {
  font-size: 8.5rem;
  line-height: .75;
  margin: 0;
  text-align: center;
}
article.error-404 p {
  text-align: center;
}



/* Desktop */
@media ( min-width: 768px ) {

  /* Defaults */
  /* Button Hover */
  button:hover {
    cursor: pointer;
  }
  button:hover .icon { 
    color: #00567f;
  }
  /* Reset Button Hover */
  button:hover .icon.icon-close {
    color: #b30000;
  }
  /* Select Options */
  .options {
    background: transparent;
  }

  /* Layouts */
  /* Themes Page */
  div.page { 
    flex-direction: row;
  }

  /* Default Page Settings */
  article.page,
  main.blog,
  main.market,  /* Single Marketplace */
  main.markets, /* Archive Marketplaces */
  main.author,  /* Single Author */
  main.authors, /* Archive Authors */
  main.search,
  main.contact,
  main.faq {
    max-width: 45rem;
    margin-top: 3.25rem;
  }

  /* 
   * Header 
   */
  /* WPSorter Logo */
  header .icon-wpsorter {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -.125rem;
  }
  /* Header Branding = Site Title */
  header h1 {
    font-size: 1.75rem;
    margin-left: 1rem;
  }
  /* Header Menu = Hide Mobile Menu Icons */
  header:not(nav) button {
    display: none;
  }
  /* Header Top Nav = Left and Right */
  header nav {
    display: flex;
    flex-flow: row nowrap;
    padding: 0;
    margin: -.25rem 0 0 6rem;
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    overflow: visible; /* Social Share Dropdown */
    border: none;
    box-shadow: none;
  }
  header nav ul li {
    align-self: center;
  }
  /* Header Top Nav */
  header nav ul.menu {
    display: flex;
    flex-flow: row nowrap;
  }
  /* Left Menu */
  header #menu-left li {
    margin-right: 1rem;
    padding: .25rem 1rem;
  }
  header #menu-left li:hover a {
    text-decoration: none;
  }
  /* Right Menu */
  header #menu-right {
    margin-left: auto; /* Float Right  */
  }
  /* Right Menu Item */
  header #menu-right li {
    border: none;
    background: inherit;
  }
  header ul#menu-right li:last-child {
    margin-bottom: 0;
  }
  header #menu-right li a {
    font-weight: normal;
  }
  header #menu-right li:hover a {
    color: #333;
    text-decoration: underline;
  }
  header #menu-right li.current-menu-item a,
  footer #menu-bottom li.current-menu-item a {
    color: #333;
    font-weight: bold;
  }

  /* Header Search Field and Button */
  header form {
    order: 2; /* Align Right */
  }
  /* Search Input Field = Default Invisible */
  header form input {
    height: 2rem;
    width: 1.25rem;
    color: transparent;
    background: transparent;
    border: none;
    margin-top: .625rem;
    z-index: 2;
    position: relative;
    transition: all .5s;
  }
  /* Show Fake Desktop Search Button */
  header button.search-button {
    display: flex;
    top: .75rem;
    z-index: 1;        /* Behind Input */
    position: absolute;
  }
  /* Search Icon Hover */
  header form:hover .icon {
    color: #00567f;
  }
  /* Search Input Hover */
  header form input:hover {
    cursor: pointer;
  } 
  /* Search Input Focus */
  header form input:focus {
    width: 12em;
    color: #333;
    border: .0625rem solid #e4e4e4;
    margin-right: .5rem;
    background: #fff;
  } 

  /* Header Social Share = Box Shadow Not very beautiful in FireFox - impossible to put shadow on ul */
  header ul.share {
    height: 1rem; /* Dropdown Overflow Header */
    width: 1.875rem;
    flex-flow: column nowrap;
    margin: .5rem .25rem 0 .25rem;
  }
  /* Share Icons */
  header ul.share li {
    border: none;
    background: #f2f2f2;
    margin: 0;
    padding: .25rem .5rem;
  }
  /* First Item */
  header ul.share li:first-child {
    padding: 0 0 .125rem 0;
    background: transparent;
  }
  /* Hide Text */
  header ul.share span {
    display: none;
  }
  /* Show Share Button */
  header ul.share li:first-child button {
    display: inline;
  }
  /* Hide Close Button */
  header ul.share li:first-child button.close {
    display: none;
  }
  /* Adjust Share Icon */
  header ul.share .icon-share {
    margin: .4375rem .5rem .375rem .375rem;
  }
  /* Menu Border */
  header ul.share li:not(:first-child) {
    border: .0625rem solid #e4e4e4;
    border-radius: .0625rem;
    border-top-color: transparent;
    border-bottom-color: transparent;
    box-shadow: 0 .125rem .375rem -.125rem rgba(0,0,0,.4); /* Same as Filter Hover */
  }
  /* Last Item Border Bottom */
  header ul.share li:last-child {
    border-bottom: .0625rem solid #e4e4e4;
  }
  /* Show All */
  header ul.share:hover > li {
    display: inline-block;
  }
  /* Change Default Hover */
  header ul.share li:hover {
    background: #f2f2f2;
    border-color: #e4e4e4;
  }
  /* Hide Mobile Only Icons */
  header ul.share li.mob {
    display: none;
  }

  /* 
   * Footer
   */
  footer {
    flex-flow: row;
  }
  footer nav.footer {
    order: -1;
  }
  footer nav.footer a {
    margin: 0 .5rem;
  }
  /* Social Icons */
  footer nav.social {
    order: -1;
    margin-bottom: 0;
  }
  footer nav ul {
    font-size: .75rem;
  }


  /*
   * Homepage
   */
  main.home {
    font-size: 1rem;
    margin: 3rem 1rem 1rem 1rem; /* Different as Default main */
  }
  main.home p:nth-child(1) {
    margin: .5rem 0 -2.5rem 0;
    font-size: 2rem;
    font-weight: normal;
  }
  /* X WordPress Themes */
  main.home p:nth-child(1) a {
    margin: -1.25rem 0 -1.25rem 13rem;
    font-size: 3rem;
  }
  /* from X Marketplaces */
  main.home p:nth-child(1) span:nth-child(3) {
    font-size: inherit;
    margin-left: 14rem;
  }
  /* Made by X Authors */
  main.home p:nth-child(1) span:nth-child(4) {
    font-size: inherit;
    margin: -.75rem 0 1.5rem 40rem;
  }
  /* First and Second Text Block
  main.home p:nth-of-type(2),
  main.home p:nth-of-type(3) {
    width: 49%;
  } */
  /* First Text Block
  main.home p:nth-of-type(2) {
    padding-right: .5rem;
  } */
  /* Second Text Block
  main.home p:nth-of-type(3) {
    padding-left: .5rem;
    order: 5;
  } */
  /* Most Viewed Themes
  main.home h2:nth-of-type(2) {
    order: 3;
  } */
  /* Slider Title */
  main.home h2 {
    margin-top: .5rem;
    font-size: 1.5rem;
  }

  /* 
   * Flexslider
   */
  /* Slider Paging = Show in Desktop Only */
  .flex-control-paging {
    display: flex;
  }
  /* Slider Navigation Arrows */
  .flex-direction-nav {
    display: flex;
  } 
  /* Slide Overlay - Large(Default) */
  .slides div:nth-of-type(2) {
    display: none;
    font-size: .875rem;
    width: 19.125rem; /* 306px */
    height: 2.25rem;
    margin-top: -2.25rem;
    padding: 0 1.5rem 0 .75rem;
  }
  /* Slide Overlay - Small */
  .small .slides div:nth-of-type(2) {
    height: 6.125rem;
    margin-top: -6.125rem;
    flex-flow: column nowrap;
    padding: 0;
  }
  /* Show on Hover */
  .slides li:hover div:nth-of-type(2) {
    display: flex;
  }
  .small .slides li:hover div:nth-of-type(2),
  .small .slides li:active div:nth-of-type(2) {  
    border-color: #00567f;
  }
  /* Show Theme Name Always - Disable Hover Mobile */
  .small .slides li:hover div:nth-of-type(2) h3,
  .small .slides li:active div:nth-of-type(2) h3 {
    display: flex;
    font-size: .875rem;
  }
  
  /* Statistics */
  .stats {
    flex-flow: row nowrap; /* Next to each other */
    margin: 0 0 .5rem .5rem;
  }
  /* Statistics Pie Charts */
  #chart-themes,
  #chart-markets,
  #chart-authors {
    margin-top: -.875rem;
  }
  
  /* Statusses */
  .stats dl {
    width: 60%;
    min-width: 14rem;
  }
  .stats .themes,
  .stats .markets,
  .stats .authors {
    width: 33%;
    margin-right: 1rem;
  }
  

   /* 
   * Themes 
   */
  /* Filters */
  aside { 
    display: flex; /* Override Mobile */
  }
  /* Filter Results */
  .results {
    top: 2.875rem;
    border: .5rem solid #fff;
    border-top-width: 1rem;
    height: 3.0625rem;
    padding: 0;
    box-shadow: 0 .25rem .25rem 0 #fff; /* Same as: Themes Nav Bar */
    margin-left: .0625rem; /* border extra large screen */
  }
  /* Side-Bar Filter Icon = Show */
  .results button {
    display: inline; /* Desktop Only */
  }

  /* Slider Handle Focus */
  li.slider .ui-state-focus {
    box-shadow: none;
  }

  /* Inspector Filters */
  ul.inspector {
    max-width: 15.25rem; /* For Inspector Icons Wrap */
  }

  /*  Show More/Less Filters Buttons */
  ul.more,
  ul.less {
    background: #f2f2f2;
  }

  /* Themes - Nav Bar */
  nav.themes {
    display: flex;
    border: .5rem solid #fff;
    border-top-width: 1rem;
    border-left-width: .25rem;
    box-shadow: 0 .25rem .25rem 0 #fff; /* Same as: Filter Results */
    z-index: 6; /* Below Header */
    margin-right: 0.0625rem;
  }

  /* Nav Themes = Theme Sort by Select + Search Theme Name + Grid Icon with Select */
  .theme-sort,
  .theme-search,
  .grid {
    display: flex;
  }
  /* Sort Icon/Button Show */
  .theme-sort li:first-of-type {
    display: flex;
  }
  /* Keep Same Size */
  .theme-sort .select,
  .theme-sort.selected .select {
    width: 11.25rem;
    font-size: .75rem;
  }
  .select:hover .dropdown {
    background: #fff;
  }
  .theme-sort .dropdown {
    height: 100%;
    background: transparent;
    padding-top: .125rem;
  }
  .theme-sort .dropdown.active {
    background: #fff;
  }
  .theme-sort .options {
    overflow: hidden;
    padding-top: .0625rem;
  }
  /* Sort by Reset Button */
  li.sort button.reset {
    margin: -1.5625rem 0 0 auto;
  }
  li.sort button.reset:not(.hide) .icon-close {
    margin: .4375rem .375rem .25rem .375rem;
  }
  /* Selected */
  .theme-sort.selected li.order {
    margin: 0 1rem 0 0;
  }
  /* Sort by Direction Arrow Icon */
  .theme-sort li.order button .icon {
    margin: .3125rem .3125rem .25rem .25rem;
  }
  /* Sort Direction Button */
  .theme-sort li.order button.active {
    margin: 0 0 0 -.0625rem;
    background: transparent;
    border-color: transparent;
  }
  /* Hover Fix */
  .theme-sort button.active,
  .theme-search button.active {
    margin-right: -.0625rem;
  }

  /* Search Theme Name */
  .theme-search button.search {
    display: flex;
  }
  .theme-search input {
    font-size: .75rem;
    width: 9rem;
    background: transparent;
  }
  /* Reset Button */
  .theme-search button.reset {
    margin: 0 1rem 0 -2.625rem;
  }
  .theme-search button.reset .icon {
     margin: .25rem .375rem .125rem .375rem;
  }
  /* AutoSuggest = Theme Names List */
  .autocomplete-suggestions {
    max-width: 14.25rem;
  }
  /* Spin Icon */
  nav.themes .icon-spin {
    top: .3125rem;
    left: -2.25rem;
    margin-right: -1rem;
  }

  /* Theme Compare List */
  .theme-compare.toggled-on {
    position: relative;
    width: auto;
    min-height: 0;
    top: 0;
    left: 0;
    padding: 0;
    box-shadow: none;
    border: none;
  }
  /* Show Compare Icon/Button */
  .theme-compare li:first-child {
    display: flex;
  }
  /* Compare Themes Pill */
  .theme-compare .pill {
    margin: 0 .25rem;
  }
  /* Compare Error Message Max 5 */
  .theme-compare li.error {
    order: 12;
    width: auto;
  }

  /* Grid Icons */
  nav.themes .grid button {
    border-color: transparent;
    background: transparent;
  }
  nav.themes .grid button:hover {
    border-color: #e4e4e4;
    background: #fff;
  }
 
  /* Grid Icons */
  .grid {
    margin-left: auto;
  }
  /* Posts per Page Dropdown */
  .grid .select {
    order: 0;
    width: 3rem;
    font-size: .75rem;
  }
  .grid .dropdown {
    background: transparent;
    padding-top: .125rem;
  }
  .grid .dropdown.active {
    background: #fff;
  }
  .grid .options li:first-child {
    padding-top: .125rem;
  }


  /* 
   * Grid Items
   */
  /* Theme/Author/Market Grid Item */
  section#themes article,
  section#authors article,
  section#markets article {
    margin: .5rem;
    padding: .5rem;
  }
  /* Hide Compare Check */
  section#themes article label { /* Desktop = Default Hidden + Show on Hover */
    display: none;
  }
  /* Show Compare Check on Article Hover - Except is Max 5 */
  html:not(.wait) section#themes:not(.disable) article:hover label {
    display: flex;
  }
  /* Compare Check Hover = Desktop Only */
  section#themes label:hover .icon {
    color: #0071a6;
    filter: drop-shadow( 0 0 .1875rem #fff );
  }
  section#themes article.compare label:hover .icon {
    color: #b30000;
  }

  /* Filters Loading Overlay */
  aside .loading {
    height: 100%;
    margin-top: 3rem;
  }
  /* Nav Themes Loading Overlay */
  nav.themes .loading {
    width: 100%;
    height: 100%;
    top: 0;
  }

  /* Pagination Navigation */
  .pagination,
  .comments-pagination {
    padding: 1rem 0 0 0;
  }
  .prev.page-numbers {
    position: initial;
    margin: 0 auto 0 .25rem;
  }
  .next.page-numbers { 
    position: initial;
    margin: 0 0 0 auto;
  }
  .page-numbers {
    margin: 0 .25rem;
  }

  /* 
   * Theme Single
   */
  main.theme {
    margin-top: 3.25rem;
  }
  main.theme ul.bread {
    margin-left: 1rem;
  }
  article.theme {
    justify-content: space-between;
  }
  /* Section Styling Defaults */
  article.theme section,
  article.theme p#description {
    margin: .5rem;
    padding: 1rem;
  }
  /* Marketplace Image and Section Info */
  article.theme img.marketplace, 
  article.theme section.info {
    margin: .5rem;
  }
  /* Show Time Ago */
  section.info .ago {
    display: flex;
  }  
  /* Disable Switch Data/Time Ago */
  section.info dd:active {
    font-size: .875rem;
  }
  section.info dd:active span.ago {
    font-size: .6875rem;
    margin: .1875rem 0 0 auto;
  }
  /* Section Author */
  article.theme section.author {
    font-size: .8125rem;
    max-width: 16rem; /* Needs max-width for Page Layout! */
    order: 3;
  }
  /* Variable Label Widths = Because of Different Font Size Desktop/Mobile */
  section.author.lb1 dt {  /* Marketplace */
    width: 3.3125rem;
  }
  section.author.lb2 dt {  /* Marketplaces */
    width: 3.6875rem;
  }
  /* Author Description */
  section.author .desc {
    font-size: .75rem;
  }
  /* Author Marketplaces */
  section.author ul.markets {
/*    width: 9.125rem;*/
    margin: -.25rem -.5rem 0 0;
  }
  /* Portfolio Overlay = Hide */
  ul.portfolio li span {
    display: none;
    top: 0;
    height: 100%;
  }
  /* Show Full Theme Title */
  ul.portfolio li:hover span {
    display: flex;
  }
  /* Disable Mobile Active Full Theme Title */
  section.author:active ul.portfolio span {
    display: none;
  }
  /* Mobile Image */
  article.theme .mobile {
    margin: .5rem -.5rem;
    order: 4;
  }
  /* Description */
  article.theme #description {
    order: 5;
  }
  /* Description Show More Scroll */
  article.theme p#description.scroll {
    overflow-y: scroll;
    max-height: 18rem;
  }
  /* Specifications */
  article.theme section.specs {
    order: 6;
    max-width: 22rem;
  }
  /* Inspector */
  article.theme section.inspect {
    order: 7;
    max-width: 16rem; /* Same as Section Author */
  }
  /* Google Fonts Scroll */
  section.inspect .fonts.scroll dd {
    margin-right: -1.0625rem;
  }
  /* Desktop Image */
  article.theme .desktop { 
    order: 8;
    max-width: 29.75rem;
    max-height: 17.5rem;
  }
  /* Desktop SVG Image Overlay */
  article.theme .desktop .icon-desktop {
    width: 29.75rem;
    height: 17.5rem; /* Almost Same Height as Mobile Image */
  }
  /* Actual Image */
  article.theme .desktop img {
    top: -16.375rem;
    width: auto; /* Original Image size = 363px */
  }
  /* Merged = Pagespeed Insights + Mobile Friendly  */
  article.theme .google {
    flex: 2 1 14.5rem;
    max-width: 16rem; /* Same as Inspect and WPT - 16rem */
  }
  /* Google PageSpeed Insights*/
  article.theme section.pagespeed {
    min-height: 11.125rem; /* Same Height as W3C */
  }
  /* W3C Unicorn Validator */
 article.theme section.w3c {
   flex: 2 1 14.5rem;     /* Same as merged = PageSpeed + AChecker */
   min-height: 11.125rem; /* Same Height as Pagespeed */
  }
  /* WebPageTest */
  article.theme section.wpt {
    flex: 2 1 16rem;
    max-width: 16rem;
  }
  /* Charts Margins */
  .chart-timing,
  .chart-rating,
  .chart-stats {
    margin: .5rem;
  }
  /* Chart Sizes Third / Half / Full */
  .ct-golden-section.third {
    width: 31%;
  }
  .ct-golden-section.half {
    width: 48%;
  }
  .ct-golden-section.full {
    width: 100%;
  }
  /* Rating Legend */
  .chart-rating .rating {
    margin: 0;
  }

  /*
   * Single Marketplace + Single Author
   */
  /* Social Links */
  main.market ul.social,
  main.author ul.social {
    margin: 1rem 0 0 auto;
  }
  /* Theme/Author/Marketplace Sections = Single Only */
  main.market section#themes,
  main.market section#authors,
  main.market section#markets,
  main.author section#themes,
  main.author section#markets {
    padding: .5rem;
  }
  /* Theme/Author/Marketplace Items = Single + Archive */ 
  main.market section#themes article,
  main.market section#authors article, 
  main.market section#markets article, 
  main.markets section article,
  main.author section#themes article,
  main.author section#markets article,
  main.authors article {
    padding: .5rem;
    margin: .5rem;
    min-width: 6.125rem; /* 98px */
  }

  /* Overlay - Theme Name and Price */
  section#themes article div,
  section#authors article div,
  section#markets article div {
    display: none;
    top: 0;
    height: 100%;
  }
  /* Theme/Author/Marketplace Name */
  section#themes article div h4,
  section#authors article div h4,
  section#markets article div h4 {
    word-wrap: break-word;
    font-size: inherit;
    line-height: inherit;
  }
  /* Theme Price/Count */
  section#themes article div span,
  section#authors article div span,
  section#markets article div span {
    display: inline;
    color: #333;
  }
  /* Theme/Author Post Navigation */
  section#themes .pagination,
  section#authors .pagination {
    padding: 1rem .675rem 0 .25rem;
  }

  /* 
  * Archive Marketplaces + Archive Authors
  */
  /* Marketplace/Author Count */
  main.markets h2 span,
  main.authors h2 span {
    margin-right: 2rem;
  }
  /* Pagination */
  main.markets section#markets .pagination, 
  main.authors section#authors .pagination {
    padding: 1rem 1.25rem 0 .25rem;
  }

  /*
   * Search Results Page
   */
  main.search {
    margin-top: 4rem;
  }
  /* Search Results Count and Type Filters */
  main.search .results {
    flex-flow: row nowrap;
  }
  /* X Results */
  main.search .results span {
    margin-bottom: 0;
  }
  /* Result Type Separator Slash */
  main.search .results a:not(:last-of-type)::after {
    content: '/';
    display: inline-block;
    margin: 0 .125rem 0 .25rem;
    color: #333;
  }
  main.search article {
    padding: .5rem 1rem .75rem 1rem;
  }
  main.search article h2 {
    flex-flow: row nowrap;
    font-size: 1.3125rem;
  }
  main.search article h2 a {
    order: 1;
  }
  main.search article h2 span {
    order: 2;
    align-self: auto;
  }  
  main.search div p {
    padding-top: .5rem;
    font-size: inherit;
    margin-right: 4rem;
    min-height: 3rem;
  }
  main.search div:not(.results):not(.nav-links) span {
   margin-right: -4rem;
  }

  /*
  * Contact Page
  */
  /* Name and Email */
  form.contact .name,
  form.contact .email {
    width: 48%;
  }  
  /* Send Button */
  form.contact .button {
    width: 20%;
  }

  /*
   * 404 Page
   */
  article.error-404 {
    justify-content: flex-start;
  }
  article.error-404 h1 {
    font-size: 20rem;
    line-height: 1;
  }

}


/* Extra large screens (120rem = 1920px) */
@media (min-width: 120rem) {
  body {
    max-width: 119.875rem; /* 1440px -1px 2x border == 119.875rem; */
    margin: 0 auto;
    border-left: .0625rem solid #e4e4e4;
    border-right: .0625rem solid #e4e4e4;
  }
  header {
    border-right: .0625rem solid #e4e4e4;
  }
}