*,
*::after,
*::before {
  -moz-box-sizing: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
body {
  color: #3a2c49;
  font-family: sans-serif;
  margin: 0;
}
.content{
  background: #fffffa url("data:image/svg+xml;charset=utf8,%3Csvg width='1200' height='256' viewBox='0 0 1200 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4'%3E%3C/feTurbulence%3E%3C/filter%3E%3C/defs%3E%3Crect height='256' width='1200' filter='url(%23noise)' opacity='.3'/%3E%3C/svg%3E");
}
.visually-hidden { /*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* DSPY - Display layers controls */

.DSPY {
  background-color: #DAE5F6;
  text-align: center;
  border-bottom: thin solid rgb(164, 203, 228);
}
.DSPY_cnt {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(100%);
  transition: opacity .3s ease-out;
}
.DSPY-ON .DSPY_cnt {
  opacity: 1;
  filter: none;
  pointer-events: inherit;
}

.DSPY_ttl {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 400;
}
[class^="DSPY_btn"] {
  /*background-color: #999;*/
}
[class^="DSPY_btn-"][class*="-ON"] {
  background-color: #009700;
}


/* DZ - Image drop zone */

.DZ_container {
  border: 2px dashed #f90;
  margin: 1rem;
  padding: 1rem;
}
.DZ {
  height: calc(100vh - 11.25rem);
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.DZ_gradient {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}
.DZ_gradient_rotator {
  border-radius: 100%;
  overflow: hidden;
  position: absolute;
}
.DZ_blur {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(6px);
}
.DZ_image {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-out;
}
.DZ_image:hover {
  opacity:1;
  transition: opacity 2s ease-in;
}
.DZ_overlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[class^="DZ_"][class*="-ON"] {
  display: block;
}
.DZ_text {
  display: none;
  pointer-events: none;
  position: relative;
  margin:0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  /*mix-blend-mode: darken;*/
  font-weight: 700;
  text-shadow: .5px 0 1px #f7f7f7, -.5px 0 1px #f7f7f7, 0 .5px 1px #f7f7f7, 0 -.5px 1px #f7f7f7;
  font-size: 2rem;
  letter-spacing: .1em;
  font-size: calc(2rem + ((1vw - .4025rem) * 1.887));
  letter-spacing: calc(.125em + (1vw - .43rem));
  text-transform: uppercase;
}
.DZ_message {
  display: block;
  font-size: 1rem;
  text-transform: none;
  margin-top: .5rem;
  letter-spacing: 0;
  transition: opacity 1s ease-out;
}
.DZ_image:hover + .DZ_text > .DZ_message {
  opacity:0;
  transition: opacity 1s ease-out;
}

/* MODS - Modifier controls */

.MODS {
  background-color: #DAE5F6;
  text-align: center;
  border-top: 1px solid #3a2c49;
  border: thin solid rgb(164, 203, 228);
  border-width: 1px 0;
}
.MODS_cnt {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(100%);
  transition: opacity .3s ease-out;
}
.MODS-ON .MODS_cnt {
  opacity: 1;
  filter: none;
  pointer-events: inherit;
}
.MODS_ttl {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 400;
}

[role="tab"][aria-selected="true"] {
/*[class^="MODS_btn-"][class*="-ON"] {*/
  background-color: #009700;
}


/* MD - Modifiers */

[class^="MD-"] {
/*  width: 80vw;*/
  margin: 0 auto;
/*
  max-width: 31.25rem;
  min-width: 20rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50% ,0);
*/
  /*transform: translate3d(-50%, 0 ,0);*/
  /*margin: 2rem auto;*/
  padding: 1rem;
  transition: opacity .4s ease-out .1s, visibility 0s ease-out 1s, max-height .5s ease-out;
  backface-visibility: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: #DAE5F6;
/*  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='1200' height='256' viewBox='0 0 1200 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4'%3E%3C/feTurbulence%3E%3C/filter%3E%3C/defs%3E%3Crect height='256' width='1200' filter='url(%23noise)' opacity='.1'/%3E%3C/svg%3E");*/
  /*box-shadow: 0 4px 4px rgba(0,0,0,.3);*/
  /*border: 1px solid #333;*/
  border: thin solid rgb(164, 203, 228);
  border-top-width : 0;
}
.MD-gradient,
.MD-code {
  max-width: 80vw;
}
    .noUi-handle {
      background-color: #3B2D4A;
    }
    .noUi-connect {
      background-color: #999;
    }
[class^="MD-"][class*="-ON"] {
  transition-delay: 0s, 0s, 0s;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
  top: -1px !important;
}
.MD_ttl {
  margin: 0 0 1rem;
  font-size: 1.382rem;
  font-weight: 400;
}
.MD_btn-close:not(.-disabled) {
  margin: 0;
  padding: .382rem .618rem;
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  border: 2px solid transparent;
  outline: 0 solid;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: inline-block;
  transition: all .3s ease-out;
  box-shadow: 0 .25em .25em rgba(0,0,0,.3);
  background-color: #FAFAFD;
  fill: #3B2D4A;
  cursor: pointer;
  box-shadow: 0 .25em .25em rgba(0,0,0,.3);
}
.MD_btn-close:not(.-disabled)::before {
  display:none;
}
.MD_btn-close:not(.-disabled):hover,
.MD_btn-close:not(.-disabled):focus {
  background-color: #fff;
  fill: #236ECE;
  border-color: #236ECE;
  transform: scale(1.12);
  box-shadow: 0 .5em .5em rgba(0,0,0,.4);
}
.MD_svg-close {
  width: 3rem;
  height: 3rem;
}
.MD_lbl {
  display: block;
  margin: .5rem 0 0;
}
.MD_spn-smaller {
  font-size: smaller;
}
[class^="MD_inp"] {
  padding: 0.382rem 0.618rem;
  margin-top:.618rem;
  display: inline-block;
  width: 100%;
  box-shadow: none;
  border: thin solid rgba(216,216,216,0.99);
  border: thin solid rgb(164, 203, 228);
  background-color: #DAE5F6;
}
.MD_fld-radio {
  display: flex;
  justify-content: space-around;
  margin: 0 auto 1rem;
  white-space: nowrap;
  max-width: 26rem;
  line-height: 2rem;
}
.MD_lbl-radio {
  white-space: nowrap;
}
.MD_inp-resolution {
  width: 2rem;
}
.MD_inp-blur {
  width: 2rem;
}
.MD_inp-url {
  width: 30rem;
}
.MD_inp-fadeIn,
.MD_inp-fadeOut {
  width: 3rem;
}
.MD_btn-preserve {
  display:block;
  margin: 1rem 0 0;
}
.MD_inp-averageColor {
  width: 11rem;
}
.MD_inp-overlay {
  width: 30rem;
}
.MD_btn-copy {
  background-color: #e50;
}
[class^="MD_fgr"] {
  margin: 1.618rem 0 0;
}
[class^="MD_fgr"]:first-child {
  margin: 0;
}

.MD_pre {
  margin:.618rem 0 0;
}




/* CANVAS */

.canvas {
  display: none;
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 100%;
  max-width: 300px;
  image-rendering: pixelated;
  image-rendering: optimizespeed;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px #000;
}
.canvas-ON {
  display: block;
}

/* Code output */

[class^="convert_output"] {
  display: none;
}
.convert_output-done {
  display: block;
}

.convert_rslt {
  border: 1px solid #ccc;
  float: left;
  margin: 1rem auto;
  width: calc(100% - 2px);
}
.convert_cnvs {
  display: block;
  margin: 100px;
  width: calc(100% - 200px);
  image-rendering: pixelated;
  image-rendering: optimizespeed;
}





button[class^="convert_btn"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}
[class^="convert_btn"] {

  font: 400 1.25em/2.25em sans-serif;

  text-rendering: optimizeLegibility;

  display: block;
  margin: 1rem auto;
  text-align: center;
  padding: 0 2.5em 0 1.5em;

  /* reserve minimum space for hover/focus "glow" */
  /*margin: .25em;*/

  border: .125em solid transparent;
  border-radius: 2em;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: box-shadow .3s ease-out;
}
[class^="convert_btn"][class*="-noicon"] {
  padding: 0 1.5em;
}
[class^="btn_lbl"] {
  display: inline-block;
  line-height: 1;
  border-bottom: calc(1em / 16) solid transparent;
  transform: translateY(5%);
  transition: border-bottom-color .3s ease-out;
}
[class^="convert_btn"]:hover [class^="btn_lbl"],
[class^="convert_btn"]:focus [class^="btn_lbl"] {
  border-bottom-color: currentcolor;
}

[class^="convert_btn"][class*="-outline"]  {
  color: #000;
  background-color: rgba(255, 255, 255, 1);
  border-color: #000;
}
[class^="convert_btn"][class*="-outline"]:hover,
[class^="convert_btn"][class*="-outline"]:focus {
  box-shadow: 0 0 0 .25em rgba(0, 0, 0, 0.4);
}
[class^="convert_btn"][class*="convert_btn-copied"]  {
  color: #090;
  background-color: rgba(255, 255, 255, 1);
  border-color: #090;
}
[class^="convert_btn"][class*="convert_btn-copied"]:hover,
[class^="convert_btn"][class*="convert_btn-copied"]:focus {
  box-shadow: 0 0 0 .25em rgba(0, 128, 0, 0.4);
}
[class^="convert_btn"][class*="convert_btn-copied"]:active {
  box-shadow: 0 0 0 .25em rgba(0, 128, 0, 0.0);
}



/* OUT */
.OUT_btn-test {
  font: 100 1rem/1rem sans-serif;
  text-rendering: optimizeLegibility;
  background-color: #f60 !important;
  display: block;
  text-align: center;
  padding: 1rem;

  /* reserve minimum space for hover/focus "glow" */
  margin: 0 auto 1rem;

  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: box-shadow .3s ease-out;
}

.OUT_lbl.flexed {
  display: block;
  max-width: 38rem;
  margin: 0 auto 1rem;
  overflow: hidden;
}
.OUT_inp-url {
  width: calc(100% - 9rem);
  padding: 0.382rem 0.618rem;
  margin-top:.618rem;
  display: inline-block;
  max-width: 34rem;
  box-shadow: none;
  border: thin solid rgb(164, 203, 228);
  background-color: #DAE5F6;
}

.OUT_overflow {
/*  border-top: thin solid rgb(164, 203, 228);*/
  padding-top: 1rem;
  max-height: 54vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}




/* Gradient Hex / RGBa selector */
  .gradients {
    clear: both;
    text-align: center;
    vertical-align: baseline;
  }
  label {
    position: relative;
    display: inline-block;
  }
  label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0.3rem .1rem #5cd053;
    transition: transform .25s;
    transform: scale(0);
  }
  input {
    font-size: inherit;
    padding: 0.382rem 0.618rem;
    display: inline-block;
    width: 100%;
    box-shadow: none;
    border: thin solid rgba(216,216,216,0.99);
  }
  input[type="radio"] + span,
  input[type="checkbox"] + span {
    position: relative;
    display: inline-block;
    height: 1rem;
    padding-right: 1.618rem;
    margin-left: 0.382rem;
  }
  input[type="radio"]:checked + span::before,
  input[type="checkbox"]:checked + span::before {
    background-color: #C8FFC8;
    border-color: #9c9;
    transform: scale(.8) translate3d(0,0,1000px);
  }
  input[type="radio"] + span::before,
input[type="checkbox"] + span::before {
  width:1rem;
  height:1rem;
}
  input[type="radio"] + span::before,
  input[type="radio"] + span::after,
  input[type="checkbox"] + span::before,
  input[type="checkbox"] + span::after {
    content: "";
    position: absolute;
    transition: transform 0.35s;
  }
  input[type="radio"] + span::before,
  input[type="radio"] + span::after {
    top: 0.1rem;
    left: 0;
    width: 1.1rem;
    height: 1.1rem;
  }
  input[type="radio"] + span::before,
  input[type="checkbox"] + span::before {
    border: 2px solid #9A9A9A;
    background-color: #fff;
  }
  input[type="radio"] + span::before {
    border-radius: 3rem;
  }

input[type="radio"]:checked + span::after,
input[type="radio"]:checked + span::after,
input[type="checkbox"]:checked + span::after,
input[type="checkbox"]:checked + span::after {
  transform: scale(1) translate3d(0,0,0);
}
input[type="radio"] + span::after,
input[type="checkbox"] + span::after {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPHRpdGxlPnZhbGlkPC90aXRsZT4KCiA8bWV0YWRhdGEgaWQ9Im1ldGFkYXRhOCI+aW1hZ2Uvc3ZnK3htbDwvbWV0YWRhdGE+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC4wNzE5NDM0LCAwLCAwLCAtMC4wNzE5NDM0LCAzLjExNDMzLCAxOC45MTcxKSIgaWQ9ImcxMCI+CiAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuNDQ1NDQsIC04LjM5NTk1KSBzY2FsZSgwLjEpIiBpZD0iZzEyIj4KICAgIDxwYXRoIGQ9Im0xMDIzLjY0MzAwNSwzMC40MTM5MjljMjE1Ljk5NTkxMSwtMTM4LjAwMDAwNCAzNzEuOTk1OTExLC00NDkuOTk5OTg5IDM3MS45OTU5MTEsLTQ0OS45OTk5ODljNjcyLjAwNDE1LDEzOTIuMDAwMzA1IDE5MzIuMDA0MTUsMjE2MC4wMDA0ODggMTkzMi4wMDQxNSwyMTYwLjAwMDQ4OGMtMTM0NC4wMDAyNDQsLTEyNDIuMDAwNDg4IC0xOTUwLjAwMDM2NiwtMzAwMCAtMTk1MC4wMDAzNjYsLTMwMDBjLTQ0OS45OTk4NzgsOTA1Ljk5OTUxMiAtNjUzLjk5OTg3OCw4MzkuOTk5NTEyIC02NTMuOTk5ODc4LDgzOS45OTk1MTJsMjk5Ljk5OTkzOSw0NDkuOTk5OTg5IiBpZD0icGF0aDE0IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwMzk4NjIiLz4KICAgPC9nPgogIDwvZz4KIDwvZz4KPC9zdmc+);
}
input[type="radio"] + span::after,
input[type="checkbox"] + span::after {
  width: 3rem;
  height: 3rem;
  top: -.7em;
  left: -.85em;
  background-position: center;
  background-size: cover;
  transform: scale(0) translate3d(0,0,0);
}









/* MODAL OUT */

/* The modal section is added via JS */

.modal {
  max-width: 80vw;
  max-height: 90vh;
  background-color: #F7F0E8;
  margin: 0 auto;
  position: absolute;
  left: 10%;
  right: 10%;
  top: 5%;
  bottom: 5%;
  z-index: 10;
  border: 1px solid #000;
  box-shadow: 0 .25em .5em #000;
  transition: opacity .5s ease-out, visibility 0s ease-out 1s, transform .5s ease-out .5s;
  backface-visibility: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(.8) translate3d(0,0,0);
  pointer-events: none;
}

.modal[aria-hidden="false"] {
  position: fixed;
  transition-delay: 0s,0s, 0s;
  opacity: 1;
  visibility: visible;
  transform: scale(1) translate3d(0,0,0);
  pointer-events: auto;
}




/* Light box properties */

.modal_lightbox {
  text-indent: -200em;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* places the modal overlay between the main page (0) and the modal dialog (10) */
  z-index: 5;
  cursor: pointer;
  transition: opacity .5s ease-out, visibility 0s ease-out .5s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal_lightbox-on {
  transition-delay: 0s, 0s;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal_lightbox-on:hover {
  /* Stolen from trickle.js. Under consideration. SVGs will not work here */
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAANpJREFUOBGNkz0KAjEQhYPYWXgCKws7LcXWyt7WG4i9jegBvIJ4AvEyXsRCsBDiN0sGkiE/O/A2O9n3viS7rPPeb9ETrVzPwrtHDzR1XF5I6oPWLQaeq5hDXQRw0I6xCuF5HH7Tz7oFuTkhrSyEhza8THaLoQhphpWUg/QOFyA/AFpy5nTbGrIjxvg4AiiGBzYc+rGZH9KPzFy+ZbX4bX9l+VDZr5NQMMbhbtvMxccpQ3JhpTchtXATQviItIpvW0CY7HHm8c9UDRd2chbABt3RQk2tEe8O3dDkD4JQ4iOR7BMpAAAAAElFTkSuQmCC"), pointer;
}


/* Modal title and description */

.modal_title,
.modal_desc {
  position: absolute;
  top: 5px;
  left: -200em;
  background-color: #fff;
  color: #000;
  text-shadow: 0 0 0 #fff;
  font-size: 20px;
  padding: 0.125em .25em;
  /* Tesco requirement
  font-family: Tesco_W_Rg, sans-serif; */
  margin: 0;
}

.modal_title:focus,
.modal_desc:focus {
  left: 5px;
}

[aria-hidden="false"] .modal_title {
  transition: opacity .5s ease-out 3s;
  opacity: 0;
}

.modal_title,
.modal_title:focus {
  opacity: 1;
  transition: opacity .5s ease-out;
}


/* dragover */

.drop-zone .spot {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.-dragover .spot {
  animation: spot-open .6s ease-in;
}
.spotInvalid {
  background-color: #c00;
  animation: spot-invalid .6s ease-out;
}
@keyframes spot-invalid {
  0%{opacity:1;transform:scale(0)}
  100%{opacity:0;transform:scale(2.4)}
}