/* Generic settings */
/* FIX! */
.admin-list-item--title .h1,
.admin-list-item--title .h2,
.admin-list-item--title .h3,
.admin-list-item--title .h4, body.login #login #loginform input[type=text],
body.login #login #loginform input[type=password] {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.admin-list-item-small .admin-list-item--content .h1,
.admin-list-item-small .admin-list-item--content .h2,
.admin-list-item-small .admin-list-item--content .h3,
.admin-list-item-small .admin-list-item--content .h4, body.login #login label, .admin-list-item--title .h1,
.admin-list-item--title .h2,
.admin-list-item--title .h3,
.admin-list-item--title .h4 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 4; /* For Safari */
  -ms-hyphenate-limit-chars: 10 3 4;
  hyphenate-limit-chars: 10 3 4;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

.admin-list-item--title .h1,
.admin-list-item--title .h2,
.admin-list-item--title .h3,
.admin-list-item--title .h4 {
  font-family: var(--theme-font-heading, Helvetica, arial, sans-serif);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -0.035em;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 28px;
  line-height: 2.8rem;
}

.admin-list-item-small .admin-list-item--content .h1,
.admin-list-item-small .admin-list-item--content .h2,
.admin-list-item-small .admin-list-item--content .h3,
.admin-list-item-small .admin-list-item--content .h4, body.login #login label {
  font-family: var(--theme-font-sub-heading, "Montserrat", Helvetica, arial, sans-serif);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 14px;
  line-height: 1.4rem;
}

/* CSS3 */
/**
* 
* Border radius
*
*/
.admin-list-item--tag, .admin-list-item--content, body.login #login #loginform input[type=submit], body.login #login #loginform input[type=text],
body.login #login #loginform input[type=password], body.login #login #loginform, body.login #login_error,
body.login .message,
body.login .success, body.login form, .admin-column-badge, .php-admin-label, td.column-featured_image img, td.column-php_image img {
  background-clip: border-box;
}

/* Wrapper layouts */
/* Content layouts */
/* Headers */
/* Footers */
/* Navigations */
/* Drawers */
/* Overlays */
/* Btns */
.admin-list-item-small .admin-list-item .btn {
  padding: 4px 15px;
  font-size: 11.2px;
  font-size: 1.12rem;
  line-height: 11.2px;
  line-height: 1.12rem;
}

.admin-list-item--title .h1,
.admin-list-item--title .h2,
.admin-list-item--title .h3,
.admin-list-item--title .h4, body.login #login #loginform input[type=text],
body.login #login #loginform input[type=password] {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.admin-list-item--title .h1,
.admin-list-item--title .h2,
.admin-list-item--title .h3,
.admin-list-item--title .h4, .admin-list-item-small .admin-list-item--content .h1,
.admin-list-item-small .admin-list-item--content .h2,
.admin-list-item-small .admin-list-item--content .h3,
.admin-list-item-small .admin-list-item--content .h4, body.login #login label {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 4; /* For Safari */
  -ms-hyphenate-limit-chars: 10 3 4;
  hyphenate-limit-chars: 10 3 4;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

.admin-list-item--title .h1,
.admin-list-item--title .h2,
.admin-list-item--title .h3,
.admin-list-item--title .h4 {
  font-family: var(--theme-font-heading, Helvetica, arial, sans-serif);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -0.035em;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 28px;
  line-height: 2.8rem;
}

.admin-list-item-small .admin-list-item--content .h1,
.admin-list-item-small .admin-list-item--content .h2,
.admin-list-item-small .admin-list-item--content .h3,
.admin-list-item-small .admin-list-item--content .h4, body.login #login label {
  font-family: var(--theme-font-sub-heading, "Montserrat", Helvetica, arial, sans-serif);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 14px;
  line-height: 1.4rem;
}

.admin-list-item-large .admin-list-item--price {
  font-family: Impact, sans-serif;
  text-transform: none;
  font-weight: 900;
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 32px;
  line-height: 3.2rem;
  font-style: italic;
  padding: 0 6px 0 0;
  letter-spacing: 1px;
}
.admin-list-item-large .price-quantity.admin-list-item--price {
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 24px;
  line-height: 2.4rem;
  color: var(--php-grey-dark, #687482);
  padding: 0 0 0 0;
}
.admin-list-item-large .price-quantity.admin-list-item--price .fa {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 14px;
  line-height: 1.4rem;
  vertical-align: middle;
}
@media screen and (max-width: 800px) {
  .admin-list-item-large .admin-list-item--price {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 28px;
    line-height: 2.8rem;
  }
}

.admin-list-item-large .price-medium.admin-list-item--price {
  font-size: 20px;
  font-size: 2rem;
  line-height: 20px;
  line-height: 2rem;
}
@media screen and (max-width: 800px) {
  .admin-list-item-large .price-medium.admin-list-item--price {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 18px;
    line-height: 1.8rem;
  }
}

.admin-list-item-large .price-small.admin-list-item--price {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 16px;
  line-height: 1.6rem;
}
@media screen and (max-width: 800px) {
  .admin-list-item-large .price-small.admin-list-item--price {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 14px;
    line-height: 1.4rem;
  }
}

.admin-list-item-large .price-sale.admin-list-item--price {
  color: var(--php-red, #e00f0f);
}

.admin-list-item-large .price-origin.admin-list-item--price, .admin-list-item-large .price-ordinary.admin-list-item--price {
  color: var(--php-grey, #a2abb4);
  text-decoration: line-through;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 18px;
  line-height: 1.8rem;
}
.admin-list-item-large .price-small.price-origin.admin-list-item--price, .admin-list-item-large .price-small.price-ordinary.admin-list-item--price {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 14px;
  line-height: 1.4rem;
}

/* Tables */
th.column-featured_image, th.column-php_image {
  width: 60px;
  padding: 8px 5px;
  text-align: center;
}
th.column-featured_image .fa, th.column-php_image .fa {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 14px;
  line-height: 1.4rem;
}
th.column-post_views {
  width: 80px;
  text-align: center;
}
th.column-post_views .fa {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 14px;
  line-height: 1.4rem;
}

td.column-featured_image, td.column-php_image {
  width: 60px;
  padding: 5px;
}
td.column-featured_image img, td.column-php_image img {
  display: inline-block;
  width: 60px;
  height: auto;
  vertical-align: middle;
  background: var(--php-grey-very-light, #cccccc);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
td.column-post_views {
  width: 80px;
  text-align: center;
  vertical-align: middle;
}
td.column-product_status {
  vertical-align: middle;
}

table.widefat td {
  vertical-align: middle;
}

.php-admin-label {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  display: inline-flex;
  line-height: 2.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin: -0.25em 0;
  margin-right: 0px;
  cursor: inherit !important;
  white-space: nowrap;
  max-width: 100%;
}
.php-admin-label .fa { /* @include font-size(14); */
  font-weight: normal;
}
.php-admin-label span {
  margin: 0 1em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.php-admin-label--hash span {
  display: inline-block;
  max-width: 120px;
  text-align: right;
  direction: rtl;
}

.admin-column-badge {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  padding: 2px 8px;
  margin: 5px 2px;
  text-align: center;
  display: inline-block;
  min-width: 40px;
}

.php-admin-label.php-admin-label, .admin-column-badge, mark.order-status.status {
  background: var(--php-color-default-bg, var(--php-blue-very-light));
  color: var(--php-color-default-text, var(--php-blue-very-dark));
}
.php-admin-label.php-admin-label-error, .admin-column-badge-error, mark.order-status.status-error {
  background: var(--php-color-error-bg, var(--php-red-very-light));
  color: var(--php-color-error-text, var(--php-red-very-dark));
}
.php-admin-label.php-admin-label-empty, .php-admin-label.php-admin-label-cancelled, .admin-column-badge-empty, .admin-column-badge-cancelled, mark.order-status.status-empty, mark.order-status.status-cancelled {
  background: var(--php-color-empty-bg, var(--php-grey-very-light));
  color: var(--php-color-empty-text, var(--php-grey));
}
.php-admin-label.php-admin-label-info, .php-admin-label.php-admin-label-completed, .admin-column-badge-info, .admin-column-badge-completed, mark.order-status.status-info, mark.order-status.status-completed {
  background: var(--php-color-info-bg, var(--php-blue-very-light));
  color: var(--php-color-info-text, var(--php-blue-very-dark));
}
.php-admin-label.php-admin-label-warning, .php-admin-label.php-admin-label-notice, .admin-column-badge-warning, .admin-column-badge-notice, mark.order-status.status-warning, mark.order-status.status-notice {
  background: var(--php-color-warning-bg, var(--php-yellow-very-light));
  color: var(--php-color-warning-text, var(--php-yellow-very-dark));
}
.php-admin-label.php-admin-label-success, .php-admin-label.php-admin-label-processing, .admin-column-badge-success, .admin-column-badge-processing, mark.order-status.status-success, mark.order-status.status-processing {
  background: var(--php-color-success-bg, var(--php-green-very-light));
  color: var(--php-color-success-text, var(--php-green-very-dark));
}

td[class*=wpseo-],
td[class*=column-language_] {
  vertical-align: middle;
}

.wpseo-score-icon.na {
  background: var(--php-color-empty-text, var(--php-grey));
}

.wpseo-score-icon.good {
  background: var(--php-color-success-text, var(--php-green-very-dark));
}

.wpseo-score-icon.bad {
  background: var(--php-color-error-text, var(--php-red-very-dark));
}

.wpseo-score-icon.ok {
  background: var(--php-color-warning-text, var(--php-yellow-very-dark));
}

/* Login */
body.login {
  min-height: 100vh;
}
body.login form {
  --theme-color-text: var(--php-black);
  --theme-color-bg: var(--php-white);
  background: var(--theme-color-bg);
  color: var(--theme-color-text);
  border: 0px;
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 14px;
  line-height: 1.4rem;
  -webkit-border-radius: var(--border-radius, 12px);
  -moz-border-radius: var(--border-radius, 12px);
  -ms-border-radius: var(--border-radius, 12px);
  -o-border-radius: var(--border-radius, 12px);
  border-radius: var(--border-radius, 12px);
}
body.login #login_error,
body.login .message,
body.login .success {
  border: 0px;
  background: var(--php-yellow-very-light, #fffbcf);
  color: var(--php-yellow-very-dark, #716300);
  -webkit-box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  -ms-box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  -o-box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}
body.login #login {
  width: 80%;
  max-width: 640px;
}
body.login #login h1 {
  display: none;
}
body.login #login label {
  font-size: 8.8px;
  font-size: 0.88rem;
  line-height: 8.8px;
  line-height: 0.88rem;
  text-transform: uppercase;
}
body.login #login #loginform {
  width: 100%;
  max-width: 640px;
  margin: 0px auto;
  padding: 15px 10px;
  border: 0px;
  -webkit-box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  -ms-box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  -o-box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: var(--php-white-very-light, #ffffff);
  color: var(--php-black, #1f1f1f);
  display: grid;
  grid-template-columns: 50% 50%;
}
body.login #login #loginform > p,
body.login #login #loginform > div {
  position: relative;
  display: block;
  padding: 5px 10px;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 16px;
  line-height: 1.6rem;
  cursor: pointer;
}
body.login #login #loginform > p.login-remember,
body.login #login #loginform > div.login-remember {
  padding: 10px 20px;
}
body.login #login #loginform > p.submit,
body.login #login #loginform > div.submit {
  padding: 10px;
  text-align: right;
}
@media only screen and (max-width: 640px) {
  body.login #login #loginform > p,
  body.login #login #loginform > div {
    width: 100%;
  }
}
body.login #login #loginform input[type=text],
body.login #login #loginform input[type=password] {
  display: block;
  padding: 5px 10px;
  background-color: var(--php-white, #e1e1e1) !important;
  border: 1px solid var(--php-grey-light, #b1b1b1);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  margin: 5px 0px;
  width: 100%;
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 11px;
  line-height: 1.1rem;
}
body.login #login #loginform input[type=password] {
  letter-spacing: 2px;
}
body.login #login #loginform input[type=submit] {
  display: inline-block;
  position: relative;
  padding: 5px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  border: 0px;
  background: var(--php-black, #1f1f1f);
  color: var(--php-white, #e1e1e1);
  text-transform: uppercase;
}
body.login #login #loginform input[type=submit]:hover {
  background: var(--php-black-very-light, #3f3f3f);
}
body.login #login #loginform input[type=submit]:active {
  background: var(--php-black-light, #2f2f2f);
}
@media screen and (max-width: 1040px) {
  body.login #login #loginform {
    grid-template-columns: 100%;
  }
}
body.login #login #backtoblog {
  padding: 0px;
  margin: 10px 0px;
  display: inline-block;
}
body.login #login #nav {
  float: right;
  padding: 0px;
  margin: 10px 0px;
  display: inline-block;
}

#wp-auth-check-wrap #wp-auth-check {
  padding: 0px;
}
#wp-auth-check-wrap .wp-auth-check-close {
  z-index: 10;
  color: var(--php-white, #e1e1e1);
}
#wp-auth-check-wrap #wp-auth-check-form iframe {
  height: 100%;
}
#wp-auth-check-wrap #wp-auth-check-form iframe html {
  background-image: none;
  background: transparent;
}
#wp-auth-check-wrap #wp-auth-check-form iframe #login {
  margin: 0px auto 0px auto;
  padding: 20px;
}

.interim-login #login {
  margin: 0px auto;
  padding: 20px;
}

.colors {
  display: block;
  padding: 5px 0px;
  font-size: 0px;
  line-height: 0px;
}
.colors .color:nth-child(1) {
  padding: 5px 0px;
}
.colors .color:nth-child(1) div {
  display: inline-block;
  max-width: 200px;
  width: 20%;
  height: 100px;
  vertical-align: middle;
}
.colors .color:nth-child(1) div.color-very-dark {
  background: var(--php-white-very-dark, #c1c1c1);
}
.colors .color:nth-child(1) div.color-dark {
  background: var(--php-white-dark, #d1d1d1);
}
.colors .color:nth-child(1) div.color-base {
  background: var(--php-white, #e1e1e1);
}
.colors .color:nth-child(1) div.color-light {
  background: var(--php-white-light, #f1f1f1);
}
.colors .color:nth-child(1) div.color-very-light {
  background: var(--php-white-very-light, #ffffff);
}
.colors .color:nth-child(1):after {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  padding: 0px 5px;
  content: "Color white \aVery Dark: var(--php-white-very-dark, #c1c1c1) \a Dark: var(--php-white-dark, #d1d1d1) \a Base: var(--php-white, #e1e1e1) \aLight: var(--php-white-light, #f1f1f1) \aVery Light: var(--php-white-very-light, #ffffff)";
  font-size: 10px;
  line-height: 15px;
  color: var(--php-grey, #a2abb4);
  white-space: pre-wrap;
  font-style: italic;
}
.colors .color:nth-child(2) {
  padding: 5px 0px;
}
.colors .color:nth-child(2) div {
  display: inline-block;
  max-width: 200px;
  width: 20%;
  height: 100px;
  vertical-align: middle;
}
.colors .color:nth-child(2) div.color-very-dark {
  background: var(--php-black-very-dark, #000);
}
.colors .color:nth-child(2) div.color-dark {
  background: var(--php-black-dark, #0f0f0f);
}
.colors .color:nth-child(2) div.color-base {
  background: var(--php-black, #1f1f1f);
}
.colors .color:nth-child(2) div.color-light {
  background: var(--php-black-light, #2f2f2f);
}
.colors .color:nth-child(2) div.color-very-light {
  background: var(--php-black-very-light, #3f3f3f);
}
.colors .color:nth-child(2):after {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  padding: 0px 5px;
  content: "Color black \aVery Dark: var(--php-black-very-dark, #000) \a Dark: var(--php-black-dark, #0f0f0f) \a Base: var(--php-black, #1f1f1f) \aLight: var(--php-black-light, #2f2f2f) \aVery Light: var(--php-black-very-light, #3f3f3f)";
  font-size: 10px;
  line-height: 15px;
  color: var(--php-grey, #a2abb4);
  white-space: pre-wrap;
  font-style: italic;
}
.colors .color:nth-child(3) {
  padding: 5px 0px;
}
.colors .color:nth-child(3) div {
  display: inline-block;
  max-width: 200px;
  width: 20%;
  height: 100px;
  vertical-align: middle;
}
.colors .color:nth-child(3) div.color-very-dark {
  background: var(--php-grey-very-dark, #333333);
}
.colors .color:nth-child(3) div.color-dark {
  background: var(--php-grey-dark, #687482);
}
.colors .color:nth-child(3) div.color-base {
  background: var(--php-grey, #a2abb4);
}
.colors .color:nth-child(3) div.color-light {
  background: var(--php-grey-light, #b1b1b1);
}
.colors .color:nth-child(3) div.color-very-light {
  background: var(--php-grey-very-light, #cccccc);
}
.colors .color:nth-child(3):after {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  padding: 0px 5px;
  content: "Color grey \aVery Dark: var(--php-grey-very-dark, #333333) \a Dark: var(--php-grey-dark, #687482) \a Base: var(--php-grey, #a2abb4) \aLight: var(--php-grey-light, #b1b1b1) \aVery Light: var(--php-grey-very-light, #cccccc)";
  font-size: 10px;
  line-height: 15px;
  color: var(--php-grey, #a2abb4);
  white-space: pre-wrap;
  font-style: italic;
}
.colors .color:nth-child(4) {
  padding: 5px 0px;
}
.colors .color:nth-child(4) div {
  display: inline-block;
  max-width: 200px;
  width: 20%;
  height: 100px;
  vertical-align: middle;
}
.colors .color:nth-child(4) div.color-very-dark {
  background: var(--php-red-very-dark, #840004);
}
.colors .color:nth-child(4) div.color-dark {
  background: var(--php-red-dark, #b70005);
}
.colors .color:nth-child(4) div.color-base {
  background: var(--php-red, #e00f0f);
}
.colors .color:nth-child(4) div.color-light {
  background: var(--php-red-light, #ffcdcd);
}
.colors .color:nth-child(4) div.color-very-light {
  background: var(--php-red-very-light, #fee);
}
.colors .color:nth-child(4):after {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  padding: 0px 5px;
  content: "Color red \aVery Dark: var(--php-red-very-dark, #840004) \a Dark: var(--php-red-dark, #b70005) \a Base: var(--php-red, #e00f0f) \aLight: var(--php-red-light, #ffcdcd) \aVery Light: var(--php-red-very-light, #fee)";
  font-size: 10px;
  line-height: 15px;
  color: var(--php-grey, #a2abb4);
  white-space: pre-wrap;
  font-style: italic;
}
.colors .color:nth-child(5) {
  padding: 5px 0px;
}
.colors .color:nth-child(5) div {
  display: inline-block;
  max-width: 200px;
  width: 20%;
  height: 100px;
  vertical-align: middle;
}
.colors .color:nth-child(5) div.color-very-dark {
  background: var(--php-blue-very-dark, #062238);
}
.colors .color:nth-child(5) div.color-dark {
  background: var(--php-blue-dark, #0a3c61);
}
.colors .color:nth-child(5) div.color-base {
  background: var(--php-blue, #1899f8);
}
.colors .color:nth-child(5) div.color-light {
  background: var(--php-blue-light, #5dbcff);
}
.colors .color:nth-child(5) div.color-very-light {
  background: var(--php-blue-very-light, #a6daff);
}
.colors .color:nth-child(5):after {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  padding: 0px 5px;
  content: "Color blue \aVery Dark: var(--php-blue-very-dark, #062238) \a Dark: var(--php-blue-dark, #0a3c61) \a Base: var(--php-blue, #1899f8) \aLight: var(--php-blue-light, #5dbcff) \aVery Light: var(--php-blue-very-light, #a6daff)";
  font-size: 10px;
  line-height: 15px;
  color: var(--php-grey, #a2abb4);
  white-space: pre-wrap;
  font-style: italic;
}
.colors .color:nth-child(6) {
  padding: 5px 0px;
}
.colors .color:nth-child(6) div {
  display: inline-block;
  max-width: 200px;
  width: 20%;
  height: 100px;
  vertical-align: middle;
}
.colors .color:nth-child(6) div.color-very-dark {
  background: var(--php-yellow-very-dark, #716300);
}
.colors .color:nth-child(6) div.color-dark {
  background: var(--php-yellow-dark, #b49e00);
}
.colors .color:nth-child(6) div.color-base {
  background: var(--php-yellow, #ffe000);
}
.colors .color:nth-child(6) div.color-light {
  background: var(--php-yellow-light, #191917);
}
.colors .color:nth-child(6) div.color-very-light {
  background: var(--php-yellow-very-light, #fffbcf);
}
.colors .color:nth-child(6):after {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  padding: 0px 5px;
  content: "Color yellow \aVery Dark: var(--php-yellow-very-dark, #716300) \a Dark: var(--php-yellow-dark, #b49e00) \a Base: var(--php-yellow, #ffe000) \aLight: var(--php-yellow-light, #191917) \aVery Light: var(--php-yellow-very-light, #fffbcf)";
  font-size: 10px;
  line-height: 15px;
  color: var(--php-grey, #a2abb4);
  white-space: pre-wrap;
  font-style: italic;
}
.colors .color:nth-child(7) {
  padding: 5px 0px;
}
.colors .color:nth-child(7) div {
  display: inline-block;
  max-width: 200px;
  width: 20%;
  height: 100px;
  vertical-align: middle;
}
.colors .color:nth-child(7) div.color-very-dark {
  background: var(--php-green-very-dark, #13440f);
}
.colors .color:nth-child(7) div.color-dark {
  background: var(--php-green-dark, #1e872f);
}
.colors .color:nth-child(7) div.color-base {
  background: var(--php-green, #2ecd48);
}
.colors .color:nth-child(7) div.color-light {
  background: var(--php-green-light, #75de77);
}
.colors .color:nth-child(7) div.color-very-light {
  background: var(--php-green-very-light, #e3ffe5);
}
.colors .color:nth-child(7):after {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  padding: 0px 5px;
  content: "Color green \aVery Dark: var(--php-green-very-dark, #13440f) \a Dark: var(--php-green-dark, #1e872f) \a Base: var(--php-green, #2ecd48) \aLight: var(--php-green-light, #75de77) \aVery Light: var(--php-green-very-light, #e3ffe5)";
  font-size: 10px;
  line-height: 15px;
  color: var(--php-grey, #a2abb4);
  white-space: pre-wrap;
  font-style: italic;
}
.colors .color:nth-child(8) {
  padding: 5px 0px;
}
.colors .color:nth-child(8) div {
  display: inline-block;
  max-width: 200px;
  width: 20%;
  height: 100px;
  vertical-align: middle;
}
.colors .color:nth-child(8) div.color-very-dark {
  background: var(--php-orange-very-dark, #471f00);
}
.colors .color:nth-child(8) div.color-dark {
  background: var(--php-orange-dark, #a44a05);
}
.colors .color:nth-child(8) div.color-base {
  background: var(--php-orange, #e37c2d);
}
.colors .color:nth-child(8) div.color-light {
  background: var(--php-orange-light, #f8a260);
}
.colors .color:nth-child(8) div.color-very-light {
  background: var(--php-orange-very-light, #ffd1ad);
}
.colors .color:nth-child(8):after {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  padding: 0px 5px;
  content: "Color orange \aVery Dark: var(--php-orange-very-dark, #471f00) \a Dark: var(--php-orange-dark, #a44a05) \a Base: var(--php-orange, #e37c2d) \aLight: var(--php-orange-light, #f8a260) \aVery Light: var(--php-orange-very-light, #ffd1ad)";
  font-size: 10px;
  line-height: 15px;
  color: var(--php-grey, #a2abb4);
  white-space: pre-wrap;
  font-style: italic;
}

.admin-list-items {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.admin-list-item {
  position: relative;
}
.admin-list-item--content {
  align-items: center; /* justify-items: end;  */
  background: var(--theme-color-bg);
  color: var(--theme-color-text);
  padding: 0px 6px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
  min-height: 24px;
}
.admin-list-item--title {
  padding: 3px 0px;
}
.admin-list-item--title .h1,
.admin-list-item--title .h2,
.admin-list-item--title .h3,
.admin-list-item--title .h4 {
  display: inline-block;
  vertical-align: middle;
  font-size: 16.5px;
  font-size: 1.65rem;
  line-height: 16.5px;
  line-height: 1.65rem;
  letter-spacing: 0px;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  text-align: left;
  max-width: 180px;
  padding: 0px;
}
.admin-list-item--icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 24px;
  line-height: 2.4rem;
}
.admin-list-item--value {
  text-align: right;
  justify-self: end;
  padding: 3px 0px;
}
.admin-list-item input[type=text] {
  color: currentColor;
  width: 100%;
  max-width: 100px;
  padding: 2px;
  background: transparent;
  box-shadow: none;
  border-radius: 0px;
  border: 0px solid transparent;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.25);
  display: inline-block;
  vertical-align: middle;
  margin: 0px;
}
.admin-list-item-large .admin-list-item--content {
  min-height: 66px;
}
.admin-list-item-large .admin-list-item--icon {
  width: 42px;
  height: 42px;
  font-size: 42px;
  font-size: 4.2rem;
  line-height: 42px;
  line-height: 4.2rem;
}
.admin-list-item-large .admin-list-item--price {
  display: block;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 18px;
  line-height: 1.8rem;
  font-weight: normal;
  font-style: normal;
  padding: 0px;
  text-transform: none;
  text-align: right;
}
.admin-list-item-medium .admin-list-item--content {
  adding: 5px 10px;
}
.admin-list-item-medium .admin-list-item--content .h1,
.admin-list-item-medium .admin-list-item--content .h2,
.admin-list-item-medium .admin-list-item--content .h3,
.admin-list-item-medium .admin-list-item--content .h4 {
  font-size: 13.75px;
  font-size: 1.375rem;
  line-height: 13.75px;
  line-height: 1.375rem;
  font-weight: normal;
  font-style: normal;
}
.admin-list-item-medium .admin-list-item--icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  font-size: 2rem;
  line-height: 20px;
  line-height: 2rem;
}
.admin-list-item-small .admin-list-item--content {
  padding: 5px 10px;
  min-height: 24px;
  font-size: 8.8px;
  font-size: 0.88rem;
  line-height: 8.8px;
  line-height: 0.88rem;
}
.admin-list-item-small .admin-list-item--content .h1,
.admin-list-item-small .admin-list-item--content .h2,
.admin-list-item-small .admin-list-item--content .h3,
.admin-list-item-small .admin-list-item--content .h4 {
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 11px;
  line-height: 1.1rem;
  font-weight: normal;
  font-style: normal;
}
.admin-list-item-small .admin-list-item--icon {
  width: 11px;
  height: 11px;
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 11px;
  line-height: 1.1rem;
}
.admin-list-item-small .admin-list-item--price {
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 11px;
  line-height: 1.1rem;
}
.admin-list-item--tag {
  display: inline-block;
  vertical-align: middle;
  font-size: 6.6px;
  font-size: 0.66rem;
  line-height: 6.6px;
  line-height: 0.66rem;
  padding: 2px 6px;
  margin: 0px 2px;
  background: rgba(51, 51, 51, 0.25);
  color: var(--php-white, #e1e1e1);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
wa-avatar.admin-list-item--icon {
  width: 34px;
  height: 34px;
  margin-right: 6px;
}

/* Admin Tools */
.admin-tool-troubleshooting-item {
  padding-bottom: 6px;
}

#sidebar-admin.sidebar {
  --sidebar-width: 480px;
  --sidebar-margin-x2: calc(var(--sidebar-margin) * 2);
  --sidebar-maxwidth: calc(100vw - var(--sidebar-margin-x2));
  --sidebar-offset: calc(var(--sidebar-width) + var(--sidebar-margin-x2));
  --sidebar-offset-neg: calc(var(--sidebar-offset) * -1);
  --sidebar-drawer-offset: calc(var(--sidebar-offset) + var(--sidebar-margin));
  --sidebar-drawer-height: calc(100vh - var(--sidebar-margin-x2));
  --sidebar-drawer-width: calc(100vw - var(--sidebar-drawer-offset));
}
#sidebar-admin.sidebar fieldset {
  margin: 10px;
}
#sidebar-admin.sidebar fieldset label {
  padding: 10px 0px 5px 0px;
  margin: 0px 10px 0px 10px;
}

:root {
  --php-admin-header-bg: #1f1f1f;
  --php-admin-header-text: #1f1f1f;
  --theme-color-bg: var(--php-white);
  --theme-color-text: var(--php-black);
  --theme-color-bg: var(--php-white);
  --theme-color-bg-value: var(--php-white-value);
  --theme-color-text: var(--php-black);
  --theme-color-highlight: var(--php-black-value);
  --theme-color-btn-default-bg: var(--php-black);
  --theme-color-btn-default-text: var(--php-white);
  --theme-color-btn-default-hover: var(--php-black-light);
  --theme-color-btn-primary-bg: var(--php-green);
  --theme-color-btn-primary-text: var(--php-black);
  --theme-color-btn-primary-hover: var(--php-green-light);
  --theme-color-btn-secondary-bg: var(--php-white);
  --theme-color-btn-secondary-text: var(--php-black);
  --theme-color-btn-secondary-hover: var(--php-white-light);
  --adminbar-height: 32px;
}
@media screen and (max-width: 640px) {
  :root {
    --adminbar-height: 46px;
  }
}

#wpadminbar {
  z-index: 10009 !important;
}
@media screen and (max-width: 640px) {
  #wpadminbar {
    position: fixed !important;
  }
}

#adminmenuwrap {
  z-index: 9989 !important;
}

.btn.btn-compact {
  padding-left: 5px;
  padding-right: 5px;
}
.btn.btn-compact .fa {
  margin: 0px;
}
.btn.btn-compact + .btn-compact {
  margin-left: 5px;
}

.color-success {
  --theme-color-highlight: var(--php-green);
  --theme-color-text: var(--php-green);
  color: var(--php-green);
}

.color-warning {
  --theme-color-highlight: var(--php-orange);
  --theme-color-text: var(--php-orange);
  color: var(--php-orange);
}

.color-error {
  --theme-color-highlight: var(--php-red);
  --theme-color-text: var(--php-red);
  color: var(--php-red);
}

.wp-admin {
  /*   .btn {
    @extend %btn;
    &-error {
      border-color: var(--php-red-very-light, color("red", "very-light", true));
      background: var(--php-red-very-light, color("red", "very-light", true));
      color: var(--php-red-very-dark, color("red", "very-dark", true));
    }
    &-empty,
    &-cancelled {
      border-color: var(
        --php-grey-very-light,
        color("grey", "very-light", true)
      );
      background: var(--php-grey-very-light, color("grey", "very-light", true));
      color: var(--php-grey, color("grey", "base", true));
    }
    &-info,
    &-completed {
      border-color: var(
        --php-blue-very-light,
        color("blue", "very-light", true)
      );
      background: var(--php-blue-very-light, color("blue", "very-light", true));
      color: var(--php-blue-very-dark, color("blue", "very-dark", true));
    }
    &-warning,
    &-notice {
      border-color: var(--php-yellow-dark, color("yellow", "very-light", true));
      background: var(--php-yellow-dark, color("yellow", "very-light", true));
      color: var(--php-yellow-very-dark, color("yellow", "very-dark", true));
    }
    &-success,
    &-processing {
      border-color: var(--php-green-dark, color("green", "very-light", true));
      background: var(--php-green-dark, color("green", "very-light", true));
      color: var(--php-green-very-dark, color("green", "very-dark", true));
    }
  } */
  /* Temp bugfix for GF */
  /* Login */
  /*
  #adminmenu div.wp-menu-image { position: relative; line-height: 34px;
    img { display: inline-block; vertical-align: middle; width: 24px; height: 24px; padding: 0px; }
  }
  */
  /* Needs to be sorted! */
  /* Hides separators in admin menu */
}
.wp-admin .editor-sidebar {
  width: 370px;
}
.wp-admin #wpcontent #php-admin-header {
  background: var(--php-admin-header-bg);
  color: var(--php-admin-header-text);
  min-height: 200px;
  margin: 0px -20px 20px -20px;
  display: flex;
}
.wp-admin #wpcontent #php-admin-header .header-logo {
  width: 90%;
  max-width: 320px;
  margin: 0px;
  padding: 20px;
  align-self: center;
}
.wp-admin #wpcontent .notice {
  margin: 0px 20px 10px 0px !important;
}
.wp-admin #wpcontent #php-admin-footer {
  background: var(--php-admin-footer-bg);
  color: var(--php-admin-footer-text);
  min-height: 200px;
  margin: 0px -20px 20px -20px;
}
.wp-admin #wpcontent #php-admin-footer .footer-logo {
  width: 50%;
  max-width: 160px;
  margin: 10px auto;
}
.wp-admin ul#adminmenu > #toplevel_page_php-admin > a.current::after {
  border-right-color: var(--php-admin-header-bg);
}
.wp-admin .column-wc_actions p {
  display: inline-block;
}
.wp-admin h4 {
  font-size: 1.3em;
}
.wp-admin div#favorite-actions,
.wp-admin span.turbo-nag {
  display: none !important;
}
.wp-admin div#current-theme {
  background: #f1f1f1;
  height: 225px;
  padding: 10px;
}
.wp-admin div#current-theme img {
  width: 300px;
  height: 225px;
  border: none;
}
.wp-admin a.screenshot {
  border: none !important;
  margin: 0px auto;
}
.wp-admin .available-theme {
  background: #f1f1f1;
}
.wp-admin table#availablethemes td {
  border: 10px solid #fff;
}
.wp-admin table#availablethemes {
  border: 0px;
}
.wp-admin .wp-menu-separator {
  visibility: hidden;
  height: 10px !important;
}
.wp-admin a,
.wp-admin #adminmenu a,
.wp-admin #poststuff #edButtonPreview,
.wp-admin #poststuff #edButtonHTML,
.wp-admin #the-comment-list p.comment-author strong a,
.wp-admin #media-upload a.del-link,
.wp-admin #media-items a.delete,
.wp-admin .plugins a.delete,
.wp-admin .ui-tabs-nav a {
  color: #666;
}
.wp-admin #adminmenu #awaiting-mod,
.wp-admin #adminmenu .update-plugins,
.wp-admin #sidemenu a .update-plugins,
.wp-admin #rightnow .reallynow,
.wp-admin #plugin-information .action-button {
  background-color: #999;
}
.wp-admin a:hover,
.wp-admin #adminmenu a:hover,
.wp-admin #poststuff #edButtonPreview:hover,
.wp-admin #poststuff #edButtonHTML:hover,
.wp-admin #the-comment-list p.comment-author strong a:hover,
.wp-admin #media-upload a.del-link:hover,
.wp-admin #media-items a.delete:hover,
.wp-admin .plugins a.delete:hover {
  color: #09f;
}
.wp-admin .ui-tabs-nav a:hover,
.wp-admin .tablenav .tablenav-pages a:hover {
  color: #09f;
  border-color: #09f;
}
.wp-admin ul#adminmenu li a span {
  /*position: relative !important; float: right; margin-right: 3px;*/
  margin-left: 5px !important;
}
.wp-admin ul#adminmenu li a span span {
  margin: 0px !important;
}
.wp-admin .wpml-title-flag {
  position: relative;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.wp-admin .wpml-col-title-flag .row-actions {
  display: inline-block;
  margin-left: 10px;
}
.wp-admin #TB_window {
  margin-top: 52px !important;
}

/* WA */
wa-callout + wa-callout {
  margin-top: 10px;
}

body.wp-core-ui {
  /*     .button,
  .button-secondary {
    &,
    &.focus,
    &.hover,
    &:focus,
    &:hover {
      background: var(--theme-color-btn-secondary-bg);
      border-color: var(--theme-color-btn-secondary-bg);
      color: var(--theme-color-btn-secondary-text);
    }
  }

  .button-primary {
    background: var(--theme-color-btn-primary-bg);
    border-color: var(--theme-color-btn-primary-bg);
    color: var(--theme-color-btn-primary-text);
  } */
}
/* The SEO Framework + WA */
.tsf-seo-bar-item {
  text-shadow: none !important;
}

.tsf-seo-bar-good {
  background-color: var(--wa-color-green-90);
  color: var(--wa-color-green-40);
  border-color: var(--wa-color-green-80);
}

.tsf-seo-bar-okay {
  background-color: var(--wa-color-yellow-90);
  color: var(--wa-color-yellow-40);
  border-color: var(--wa-color-yellow-80);
}

.tsf-seo-bar-bad {
  background-color: var(--wa-color-red-90);
  color: var(--wa-color-red-40);
  border-color: var(--wa-color-red-80);
}

.tsf-seo-bar-unknown {
  background-color: var(--wa-color-blue-90);
  color: var(--wa-color-blue-40);
  border-color: var(--wa-color-blue-80);
}

.tsf-seo-bar-section-wrap + .tsf-seo-bar-section-wrap .tsf-seo-bar-item {
  border-left: 0px !important;
}