/**
 * Neve fse override
 *
 */
/*
figure.wp-block-image {
    padding-top: 34px !important;
}
*/

/* has-ti-fg-alt-color has-ti-accent-background-color has-text-color has-background */

/* Fix variation label from causing colours to jump around */
table.variations th {
  width: 200px !important;
}

/* Logo */
h1.has-link-color.wp-block-site-title > a {
  font-family: "Satisfy" !important;

  /*text-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;*/

  /*text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;*/

  text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3),
    0px -4px 10px rgba(255, 255, 255, 0.3);
}

.woocommerce-variation-price bdi {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Prevent the link being clickable on thumbnail in cart */
.wc-block-cart-item__image {
  pointer-events: none;
}

label[for="font"] {
  display: none;
}

/**
 * Remove extra gap created by hidden font element
 * on product page
 */
table.variations > tbody > :first-child {
  display: none !important;
}

div.wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow {
  padding-top: 0px !important;
  margin-top: -10px !important;
}

div.wp-block-column.is-layout-flow.wp-block-column-is-layout-flow
  figure.wp-block-image.size-full {
  padding-bottom: 24px !important;
}

/*div.wp-site-blocks div.wp-block-group.woocommerce.product.is-layout-flow.wp-block-group-is-layout-flow {*/
/**
 * NEEDS Post ID to isolate css
 *
 */

.postid-12
  div.wp-site-blocks
  div.wp-block-group.woocommerce.product.is-layout-flow.wp-block-group-is-layout-flow {
  /*padding-top: 0 !important;*/

  margin-block-start: 0 !important;
}

.wp-block-template-part {
  margin-block-start: 0 !important;
}

.woocommerce-tabs.wc-tabs-wrapper {
  color: var(--wp--preset--color--ti-fg-alt) !important;

  /* background-color: var(--wp--preset--color--ti-bg-inv) !important; */
  /* background-color: var(--wp--preset--color--ti-bg-alt) !important; */
  background-color: var(--wp--preset--color--ti-bg-inv) !important;

  padding: 24px;
}

/* has-ti-fg-alt-color has-ti-bg-inv-background-color has-text-color has-background has-link-color */

div .taxonomy-product_cat.wp-block-post-terms {
  display: none;
}

#downloadProductLikeness {
  width: 100%;
}

/*
.variations {
    margin-left:50px !important;
}
*/

.variations,
.variations th,
.variations td {
  border: none;
}
.variationButtons {
  display: flex;
}

.neonradioButton {
  padding: 10px 15px;
  background-color: aliceblue;
  margin-right: 5px;
}
.reset_variations {
  display: none !important;
}

/* ############################################### */

/** 
 * Hide the breadcrumbs
 *
*/
.wc-block-breadcrumbs {
  display: none;
}

/* other testing stuff
.variations_form {
    background: none !important;
}

.woocommerce-variation.single_variation {
    height: 0px;
}
.woocommerce-variation-add-to-cart { margin-top: 85px; }

.single_variation_wrap {
    display: block !important;
}
*/

/** ############################################## */

#font-picker {
  position: relative;
  z-index: 100;
  color: #333;
}

#font-picker .dropdown-button {
  background-color: #fff;
}

.dropdown-font-family {
  color: #6c757d;
}

.box-content {
  width: calc(100% - 40px);
  font-size: 11pt;
  color: rgba(0, 0, 0, 0.54);
  /* border: 1px solid #000000; */
  /* display: none; */
}

.box-content-size {
  width: calc(100% - 40px);
  font-size: 11pt;
  color: rgba(0, 0, 0, 0.54);
  /* border: 1px solid #000000; */
  /* display: none; */
}

.neon-size label {
  display: inline-block;
  width: 106px;
  height: 50px;
  border: 2px solid #444;
  border-radius: 4px;
  margin-right: 5px;
  margin-bottom: 0px;
}

.t-size {
  font-size: small;
  font-weight: lighter;
  background-color: #ffffff;
  line-height: 25px;
  text-align: center !important;
}

.t-size::first-line {
  font-size: 16px;
}

.neon-size input[type="radio"]:checked + label {
  border: 2px dashed #444;
}

.neon-size label:hover {
  transform: scale(1.16);
  transition: all 0.25s ease-in;
}

.neon-size input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.neon-colours input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
/*
.neon-colours label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 1px solid #444;
    border-radius: 4px;
}
*/
.neon-colours label {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid #444;
  border-radius: 4px;
  margin-right: 5px;
  margin-bottom: 0px;
}

.neon-colours input[type="radio"]:checked + label {
  border: 2px dashed #444;
}

.neon-colours label:hover {
  transform: scale(1.5);
  transition: all 0.25s ease-in;
}

.t-align {
  background-color: #ffffff;
  line-height: 30px;
  text-align: center !important;
}

/* Colours */

.nt-cool-white {
  background-color: #ffffff !important;
}

.nt-warm-white {
  background-color: #ffed97 !important;
}

.nt-light-green {
  background-color: #80fdd1 !important;
}

.nt-green {
  background-color: #05ef58 !important;
}

.nt-light-pink {
  background-color: #f6adfd !important;
}

.nt-hot-pink {
  background-color: #ea04b8 !important;
}

.nt-yellow {
  background-color: #ffe305 !important;
}

.nt-golden-yellow {
  background-color: #f8bf23 !important;
}

.nt-light-blue {
  background-color: #04edf1 !important;
}

.nt-blue {
  background-color: #0349f8 !important;
}

.nt-orange {
  background-color: #ff6825 !important;
}

.nt-red {
  background-color: #fa0122 !important;
}

.nt-purple {
  background-color: #b902f6 !important;
}

.nt-multi-colour {
  /* background-color: #000000 !important; */
  background-color: #fff;
  animation: color-change 10s linear infinite;
}

/* Neon Text Shadows */
.neonCool_White {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #fff,
    0 0 60px #fff, 0 0 80px #fff, 0 0 120px #fff;
}
.neonWarm_White {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ffed97,
    0 0 60px #ffed97, 0 0 80px #ffed97, 0 0 120px #ffed97;
}

.neonLight_Green {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #80fdd1,
    0 0 60px #80fdd1, 0 0 80px #80fdd1, 0 0 120px #80fdd1;
}

.neonGreen {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #05ef58,
    0 0 60px #05ef58, 0 0 80px #05ef58, 0 0 120px #05ef58;
}

.neonLight_Pink {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #f6adfd,
    0 0 60px #f6adfd, 0 0 80px #f6adfd, 0 0 120px #f6adfd;
}

.neonHot_Pink {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ea04b8,
    0 0 60px #ea04b8, 0 0 80px #ea04b8, 0 0 120px #ea04b8;
}

.neonYellow {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ffe305,
    0 0 60px #ffe305, 0 0 80px #ffe305, 0 0 120px #ffe305;
}

.neonGolden_Yellow {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #f8bf23,
    0 0 60px #f8bf23, 0 0 80px #f8bf23, 0 0 120px #f8bf23;
}

.neonLight_Blue {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #04edf1,
    0 0 60px #04edf1, 0 0 80px #04edf1, 0 0 120px #04edf1;
}

.neonBlue {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #0349f8,
    0 0 60px #0349f8, 0 0 80px #0349f8, 0 0 120px #0349f8;
}

.neonOrange {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ff6825,
    0 0 60px #ff6825, 0 0 80px #ff6825, 0 0 120px #ff6825;
}

.neonRed {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #fa0122,
    0 0 60px #fa0122, 0 0 80px #fa0122, 0 0 120px #fa0122;
}

.neonPurple {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #b902f6,
    0 0 60px #b902f6, 0 0 80px #b902f6, 0 0 120px #b902f6;
}

.neonMulti_Colour {
  text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #fff,
    0 0 60px #fff, 0 0 80px #fff, 0 0 120px #fff;

  animation: shadow-change 10s linear infinite;
}

@keyframes color-change {
  0% {
    background-color: #ffffff;
  }
  5% {
    background-color: #fdf4dc;
  }
  10% {
    background-color: #fff97c;
  }
  15% {
    background-color: #fff97c;
  }
  20% {
    background-color: #ffd62e;
  }
  25% {
    background-color: #ff8d02;
  }
  30% {
    background-color: #ff7575;
  }
  35% {
    background-color: #ff2a4d;
  }
  40% {
    background-color: #ff90ff;
  }
  45% {
    background-color: #eaa4ff;
  }
  50% {
    background-color: #ff5ce8;
  }
  55% {
    background-color: #8c59ff;
  }
  60% {
    background-color: #0274fc;
  }
  65% {
    background-color: #63aaff;
  }
  70% {
    background-color: #90dcff;
  }
  75% {
    background-color: #24b7de;
  }
  80% {
    background-color: #24b7de;
  }
  85% {
    background-color: #80ffd9;
  }
  90% {
    background-color: #85ffaa;
  }
  95% {
    background-color: #0bd748;
  }
}

@keyframes shadow-change {
  0% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #fff,
      0 0 60px #fff, 0 0 80px #fff, 0 0 120px #fff;
  }
  5.55% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #fdf4dc,
      0 0 60px #fdf4dc, 0 0 80px #fdf4dc, 0 0 120px #fdf4dc;
  }
  11.1% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #fff97c,
      0 0 60px #fff97c, 0 0 80px #fff97c, 0 0 120px #fff97c;
  }
  16.65% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ffd62e,
      0 0 60px #ffd62e, 0 0 80px #ffd62e, 0 0 120px #ffd62e;
  }
  22.2% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ff8d02,
      0 0 60px #ff8d02, 0 0 80px #ff8d02, 0 0 120px #ff8d02;
  }
  27.75% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ff7575,
      0 0 60px #ff7575, 0 0 80px #ff7575, 0 0 120px #ff7575;
  }
  33.3% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ff2a4d,
      0 0 60px #ff2a4d, 0 0 80px #ff2a4d, 0 0 120px #ff2a4d;
  }
  38.85% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ff90ff,
      0 0 60px #ff90ff, 0 0 80px #ff90ff, 0 0 120px #ff90ff;
  }
  44.4% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #eaa4ff,
      0 0 60px #eaa4ff, 0 0 80px #eaa4ff, 0 0 120px #eaa4ff;
  }
  49.95% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #ff5ce8,
      0 0 60px #ff5ce8, 0 0 80px #ff5ce8, 0 0 120px #ff5ce8;
  }
  55.5% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #8c59ff,
      0 0 60px #8c59ff, 0 0 80px #8c59ff, 0 0 120px #8c59ff;
  }
  61.05% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #0274fc,
      0 0 60px #0274fc, 0 0 80px #0274fc, 0 0 120px #0274fc;
  }
  66.6% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #63aaff,
      0 0 60px #63aaff, 0 0 80px #63aaff, 0 0 120px #63aaff;
  }
  72.15% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #90dcff,
      0 0 60px #90dcff, 0 0 80px #90dcff, 0 0 120px #90dcff;
  }
  77.7% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #24b7de,
      0 0 60px #24b7de, 0 0 80px #24b7de, 0 0 120px #24b7de;
  }
  83.25% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #80ffd9,
      0 0 60px #80ffd9, 0 0 80px #80ffd9, 0 0 120px #80ffd9;
  }
  88.8% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #85ffaa,
      0 0 60px #85ffaa, 0 0 80px #85ffaa, 0 0 120px #85ffaa;
  }
  94.35% {
    text-shadow: 0 0 5px #333, 0 0 10px #fff, 0 0 20px #fff, 0 0 35px #0bd748,
      0 0 60px #0bd748, 0 0 80px #0bd748, 0 0 120px #0bd748;
  }
}

/**
 * Clean up the product page
 * by hiding unwanted items
 *
 */
/*
.wp-block-post-title {
    display: none;
}
*/
.wp-block-woocommerce-product-price {
  display: none;
}

.wp-block-post-excerpt {
  display: none;
}
/* remove top padding */
.wp-block-add-to-cart-form {
  margin-block-start: 0;
}

.box-content.neon-colours {
  max-width: 340px !important;
}

.neonTextInputWrapper {
  width: 100%;
  text-align: center;
  margin: 0 auto;

  /* border: 1px solid white; */
}

#neonTextInput {
  width: 100%;
  text-align: center;

  /* We can style the input font too if needed */
  /* font-family: 'Borel'; */
}

.nCol {
  max-width: 340px !important;
  min-width: 200px !important;
}

.nCol {
  /* width: 45%; */
  /* float: left; */
  text-align: left;

  /* margin-left: 5px; */
  /* border: #FDF4DC 1px solid; */
}

.text-align-left {
  text-align: left !important;
}

.text-align-center {
  text-align: center !important;
}

.text-align-right {
  text-align: right !important;
}

/*
    Neon Text Output
*/

/* Initialise the font - may help with fontpicker problem */
.apply-font {
  font-family: "Yellowtail";
  font-weight: normal;
  /*font-size: 32px;*/
  font-size: 2rem;
  line-height: 1.5;
}

.neonicityWrapper {
  width: 100%;

  position: relative;
  overflow: hidden;
  border: 1px solid #666;

  /* border-radius: 5px; */
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.neonTextOutputWrapper {
  width: 100%;
  min-height: 50vh;
  margin: 0 auto;
  display: table;
  text-align: center;
  /* background-image: url("https://cdn.pixabay.com/photo/2017/02/12/12/42/wall-2059909_640.png"); */
  /*background-color: black;*/

  background-position: top center;

  /* border-radius: 5px; */

  /*
    background-image: url("../backgroud-pale-wood.jpg");
    background-position: right;
    */

  /* border: 1px solid black; */
}

/*
table.variations > tbody > tr > th > label {
    min-width: 140px;
}
*/

.neonTextOutput {
  height: 100%;
  /*height: 50vh;*/
  display: table-cell;
  vertical-align: middle;

  overflow: visible !important;

  /* background-color: #333333; */
  /* border: 1px solid white; */
}

.neonTextOutput pre {
  /* width: calc(100% - 150px); */
  max-width: 380px;
  padding: 0;

  background: none;
  border: none;
  /*overflow: hidden;*/
  overflow: visible !important;

  /*white-space: pre-wrap;       /* css-3 */
  /*white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  /*white-space: -pre-wrap;      /* Opera 4-6 */
  /*white-space: -o-pre-wrap;    /* Opera 7 */
  /*word-wrap: break-word;*/

  /*white-space: pre-wrap;*/

  /*border: 1px solid white;*/
}

/* prevent some styling added by certain themes */
.neonTextOutput pre::before {
  content: none;
}

h2.with-empty-cart-icon::before {
  content: none !important;
}

/*
  table.variations{
    background: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
}
table.variations select{
    margin-top: 10px;
}
table.variations th{
    color: var(--tertiary-color);
    width: 25%;
    padding-left: 30px;
}
    */

#neonText2 {
  /* white-space: pre; /* Formats the same as Textarea (not needed within 'pre' element */
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  margin: 0;
  color: #fff;

  /* opacity: 0.1; */ /* causes problems with image generation */

  pointer-events: none; /* Allows clickthrough to layers below */
}

#neonText {
  /*white-space: pre; /* Formats the same as Textarea (not needed within 'pre' element */
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;

  /*animation: pulsate 0.11s ease-in-out infinite alternate;*/
  /* background-color: #010a01; */
  /* background-image: url("https://cdn.pixabay.com/photo/2017/02/12/12/42/wall-2059909_640.png"); */
  /* background-image: url("Untitled-1.jpg"); */
  /* background-repeat:no-repeat; */
  /* background-position: center -130px; */

  /*
    border: 0.2rem solid #fff;
    border-radius: 2rem;
    padding: 0.4em;
    box-shadow: 0 0 .2rem #fff,
      0 0 .2rem #fff,
      0 0 2rem #bc13fe,
      0 0 0.8rem #bc13fe,
      0 0 2.8rem #bc13fe,
      inset 0 0 1.3rem #bc13fe;
    */
}

/* BEGIN: widget CSS */

#font-size-toggle {
  position: fixed;
  right: 0;
  top: 30%;
  display: flex;
  background: #34ebb1;
  color: #333;
  transform: translate(calc(20px + 2.7em));
  transition: 0.3s;
}

#font-size-toggle.expanded {
  transform: none;
}

.font-size-toggle__label-wrap {
  width: 2.5em;
  height: 10em;
}

.font-size-toggle__label.font-size-toggle__label {
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-decoration: none;
  color: #333;
  transition: 0.2s;
  height: 100%;
  width: 100%;
  opacity: 0.6;
  font-weight: bold;
}

.font-size-toggle__label.font-size-toggle__label:hover,
.font-size-toggle__label.font-size-toggle__label:focus {
  opacity: 1;
}

.font-size-toggle__control-panel {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.font-size-toggle__increase.font-size-toggle__increase,
.font-size-toggle__decrease.font-size-toggle__decrease {
  background: none;
  border: solid 2px #333;
  color: #333;
  height: 1.6em;
  width: 1.6em;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.2s;
}

.font-size-toggle__increase.font-size-toggle__increase:hover,
.font-size-toggle__decrease.font-size-toggle__decrease:hover,
.font-size-toggle__increase.font-size-toggle__increase:focus,
.font-size-toggle__decrease.font-size-toggle__decrease:focus {
  background: #333;
  color: #333;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.font-size-toggle__scale {
  padding: 10px 0;
}

/* FONTS END ################################### */

@media (max-width: 767px) {
  #font-size-toggle {
    top: auto;
    bottom: 0;
    flex-flow: column;
    transform: translateY(calc(10px + 2.5em));
    padding: 0 10px 10px 0;
  }
  .font-size-toggle__label.font-size-toggle__label {
    writing-mode: initial;
    transform: none;
  }
  .font-size-toggle__control-panel {
    flex-flow: row;
  }
  .font-size-toggle__scale {
    padding: 0 10px;
  }
  .font-size-toggle__label-wrap {
    height: 2.5em;
    width: 10em;
  }
}

/* END: widget CSS */

.postid-12 .single_variation_wrap {
  display: none !important;
}
