@font-face {
  font-family: 'charms';
  src:  url('/fonts/charms.eot?up2m6v');
  src:  url('/fonts/charms.eot?up2m6v#iefix') format('embedded-opentype'),
  url('/fonts/charms.ttf?up2m6v') format('truetype'),
  url('/fonts/charms.woff?up2m6v') format('woff'),
  url('/fonts/charms.svg?up2m6v#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'gummies';
  src:  url('/fonts/gummies.eot?2u2db7');
  src:  url('/fonts/gummies.eot?2u2db7#iefix') format('embedded-opentype'),
    url('/fonts/gummies.ttf?2u2db7') format('truetype'),
    url('/fonts/gummies.woff?2u2db7') format('woff'),
    url('/fonts/gummies.svg?2u2db7#gummies') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="gummy-"], [class*=" gummy-"], .gummy {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'gummies' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: black;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#output span{
  font-family: 'charms';
  font-size: 3em;
  text-shadow: 2px 2px 2px #0009;
}
.row{
  display: flex;
}
.col{
  width: 50%;
}
#input{
  width: 100%;
  height: 100%;
}
div#output {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ddd;
  height: 100%;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'charms' !important;
  /* speak: never; */
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-Ntilde:before {
  content: "\d1";
}
.icon-A:before {
  content: "\41";
}
.icon-B:before {
  content: "\42";
}
.icon-C:before {
  content: "\43";
}
.icon-heart:before {
  content: "\31";
}
.icon-D:before {
  content: "\44";
}
.icon-E:before {
  content: "\45";
}
.icon-estrella:before {
  content: "\32";
}
.icon-F:before {
  content: "\46";
}
.icon-flor:before {
  content: "\33";
}
.icon-G:before {
  content: "\47";
}
.icon-H:before {
  content: "\48";
}
.icon-I:before {
  content: "\49";
}
.icon-J:before {
  content: "\4a";
}
.icon-K:before {
  content: "\4b";
}
.icon-kiss:before {
  content: "\34";
}
.icon-L:before {
  content: "\4c";
}
.icon-M:before {
  content: "\4d";
}
.icon-N:before {
  content: "\4e";
}
.icon-O:before {
  content: "\4f";
}
.icon-P:before {
  content: "\50";
}
.icon-paz:before {
  content: "\35";
}
.icon-Q:before {
  content: "\51";
}
.icon-R:before {
  content: "\52";
}
.icon-rayo:before {
  content: "\36";
}
.icon-S:before {
  content: "\53";
}
.icon-smile:before {
  content: "\37";
}
.icon-T:before {
  content: "\54";
}
.icon-U:before {
  content: "\55";
}
.icon-V:before {
  content: "\56";
}
.icon-W:before {
  content: "\57";
}
.icon-X:before {
  content: "\58";
}
.icon-Y:before {
  content: "\59";
}
.icon-Z:before {
  content: "\5a";
}

:root{
  --collar1:#FD6D6D;
  --collar2:#000000;
  --collar3:#0347F2;
  --collar4:#F1FF3A;
  --collar5:#FF136F;
  --collar6:#D60C0C;
  --charm1:#702F6E;
  --charm2:#94E1EE;
  --charm3:#E7F852;
  --charm4:#0341AD;
  --charm5:#52B33F;
  --charm6:#FF952B;
  --charm7:#E43C27;
  --charm8:#FF1363;
  --charm9:#FFD7E0;
  --charm10:#18FB93;
  --charm11:#ff015b;
  --charm12:#ff64dc;
  --charm13:#ba0000;
  --charm14:#ff5a00;
  --charm15:#e1ff00;
  --charm16:#00ff51;
  --charm17:#00d6ff;
  --charm18:#1900fa;
  --charm19:#a080ff;
  --gummies-container-height:32px;
}

body{
  background-color: #fc6e6e;
}
.container{
  background-color: #fff;
}
.collar-container {
  background-color: #efefef;
  height: 200px;
  display: flex;
  justify-content: center;
  box-shadow: inset 0 2px 4px #000d;
  overflow: hidden;
  flex-direction: column;
  margin-bottom: 20px;
  position: relative;
}
input[id^='collar'] {
  border: none;
  border-radius: 100px;
  height: 50px;
  width: 50px;
  font-size: 0;
  cursor: pointer;
}

.collar {
  background-image: var(--textura);
  background-repeat: repeat;
  background-color: var(--collar1);
  display: flex;
  height: 38px;
  width: 100%;
  box-shadow: 0 2px 4px #000d;
  margin-bottom: 2px;
}
#charm-container {
  font-family: charms;
  position: absolute;
  font-size: 70px;
  letter-spacing: 0px;
  width: 100%;
  text-shadow: 2px 2px 6px #000d;
  text-align: center;
}
#charm-container>span{
  cursor: pointer;
}
.color-collar, .color-keyboard, .new-color-keyboard {
  display: flex;
  padding: 20px 0;
  justify-content: space-between;
}
.collar1{
  background-image: var(--textura);
  background-repeat: repeat;
  background-color:var(--collar1);
}
.collar2{
  background-image: var(--textura);
  background-repeat: repeat;
  background-color:var(--collar2);
}
.collar3{
  background-image: var(--textura);
  background-repeat: repeat;
  background-color:var(--collar3);
}
.collar4{
  background-image: var(--textura);
  background-repeat: repeat;
  background-color:var(--collar4);
}
.collar5{
  background-image: var(--textura);
  background-repeat: repeat;
  background-color:var(--collar5);
}
.collar6{
  background-image: var(--textura);
  background-repeat: repeat;
  background-color:var(--collar6);
}

.keyboard_key {
  text-align: center;
  justify-content: space-around;
  font-family: 'charms';
  width: calc(10% - 4px);
  font-size: 2em;
  border: solid 1px #ccc;
  border-radius: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  text-shadow: 2px 2px 2px #000a;
}
input[id^='color']{
  border-radius: 50px;
  border:none;
  width: 50px;
  height: 50px;
  font-size: 0;
  cursor: pointer;
}
#color1{
  background-color: var(--charm1);
}
#color2{
  background-color: var(--charm2);
}
#color3{
  background-color: var(--charm3);
}
#color4{
  background-color: var(--charm4);
}
#color5{
  background-color: var(--charm5);
}
#color6{
  background-color: var(--charm6);
}
#color7{
  background-color: var(--charm7);
}
#color8{
  background-color: var(--charm8);
}
#color9{
  background-color: var(--charm9);
}
#color10{
  background-color: var(--charm10);
}
#color11{
  background-color: var(--charm11);
}
#color12{
  background-color: var(--charm12);
}
#color13{
  background-color: var(--charm13);
}
#color14{
  background-color: var(--charm14);
}
#color15{
  background-color: var(--charm15);
}
#color16{
  background-color: var(--charm16);
}
#color17{
  background-color: var(--charm17);
}
#color18{
  background-color: var(--charm18);
}
#color19{
  background-color: var(--charm19);
}
.color1{
 color: var(--charm1);
}
.color2{
 color: var(--charm2);
}
.color3{
 color: var(--charm3);
}
.color4{
 color: var(--charm4);
}
.color5{
 color: var(--charm5);
}
.color6{
 color: var(--charm6);
}
.color7{
 color: var(--charm7);
}
.color8{
 color: var(--charm8);
}
.color9{
 color: var(--charm9);
}
.color10{
 color: var(--charm10);
}
.color11{
 color: var(--charm11);
}
.color12{
 color: var(--charm12);
}
.color13{
 color: var(--charm13);
}
.color14{
 color: var(--charm14);
}
.color15{
 color: var(--charm15);
}
.color16{
 color: var(--charm16);
}
.color17{
 color: var(--charm17);
}
.color18{
 color: var(--charm18);
}
.color19{
 color: var(--charm19);
}
.color20 {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: url(/cdn/shop/t/3/assets/bg-glitter.png);
    background-size: 32px;
    text-shadow: none;
    -webkit-text-stroke: 2px #000;
}
.color21 {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: url(/cdn/shop/t/5/assets/bg-glitter-dorado.png);
    background-size: 32px;
    text-shadow: none;
    -webkit-text-stroke: 2px #000;
}
#vaciar-collar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  filter: drop-shadow(2px 2px 2px #000d);
  cursor: pointer;
}
.phone-charm{
  width: 48px;
  position: relative;
  bottom: 8px;
  left: 12px;
  filter: drop-shadow(2px 2px 2px #000a);
}
#size-container, #size-container-gummys {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-bottom: 20px;
}
.size-button {
  border: solid 2px #666;
  width: 40px;
  height: 40px;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
}
.size-button.active {
  background: #ddd;
}
#phone {
  border: 1px solid #999;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 40px;
}
.keyboard {
  margin-bottom: 20px;
}

.color-picker {
  width: 9%;
  height: 42px;
  border-radius: 8px;
  cursor: pointer;
}
#charmsForm{
  display: none;
}
.keyboard .row {
  justify-content: space-around;
  margin: 0;
}
#precio {
  color: #fc6e6e;
  font-size: 1.5em;
  font-weight: 700;
  position: absolute;
  top: 0;
  right: 20px;
}
h1#nombre-tienda {
  color: #fc6e6e;
}
@media (max-width: 768px){
  #charm-container {
    font-size: 52px;
  }
  .collar {
    height: 28px;
  }
  .phone-charm {
    width: 34px;
  }
  .keyboard_key {
    font-size: 1.3em;
  }
}
.spacer{
  height: 40px;
}
.spacer-2x{
  height: 80px;
}
.tab-pane{
  position: relative;
}
#comenzar {
  position: absolute;
  background: #ffffffd9;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: red;
  font-weight: 600;
}

#comenzar button {
  background: #ee2f53;
  color: #ffffff;
  font-weight: 600;
  border: solid 1px #c9193a;
  padding: 16px 32px;
  border-radius: 8px;
  box-shadow: 4px 4px 8px #ee2f53;
  cursor: pointer;
}
.collar-gummy {
  background: #000;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.chaquiron {
  width: 8px;
  height: 20px;
  border-radius: 4px;
  box-shadow: inset -2px -1px 4px 0px #0009, inset 2px 1px 4px 0px #fffd;
  position: relative;
}
.chaquiron:after {
  content: " ";
  color: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 10px;
  /* background: #fff9; */
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  border: solid 2px #fff9;
  border-width: 2px 0 0 2px;
}
.separador {
  background: #999;
  width: 4px;
  height: 24px;
  border-radius: 10px;
}
.gummy-a{
  content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.28 59.31"><defs></defs><title>Asset 33</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M41.65,59.19a2.38,2.38,0,0,1-1.35-.43,3,3,0,0,1-1-1l-1.88-4.17a3.42,3.42,0,0,0-1.05-1.13A2.54,2.54,0,0,0,35,52H20.28a2.64,2.64,0,0,0-1.5.47,2.79,2.79,0,0,0-1,1.13l-1.94,4.18a2.51,2.51,0,0,1-.9,1,2.31,2.31,0,0,1-1.29.43h-12A2.2,2.2,0,0,1,1,59.06a1.42,1.42,0,0,1-.58-.39A1.26,1.26,0,0,1,.14,58a1.54,1.54,0,0,1,.19-.9L20.53,10a2.41,2.41,0,0,1,.9-1,2.33,2.33,0,0,1,1.35-.43h9.75A2.24,2.24,0,0,1,33.82,9a2.48,2.48,0,0,1,.9,1L55.05,57.34a1.31,1.31,0,0,1-.1,1.22,1.45,1.45,0,0,1-1.39.63ZM27.59,29.52c-.29,0-.54.24-.74.71l-3.49,8.42a1.27,1.27,0,0,0,0,1.2,1.25,1.25,0,0,0,1.15.51h6.2a1.24,1.24,0,0,0,1.11-.51,1.09,1.09,0,0,0,0-1.21c-.46-1.15-1-2.5-1.67-4.06l-1.81-4.35C28.12,29.75,27.88,29.52,27.59,29.52Z"/><path d="M32.53,8.66a2.18,2.18,0,0,1,1.22.41,2.29,2.29,0,0,1,.85,1L54.93,57.39a1.17,1.17,0,0,1-.09,1.11,1.32,1.32,0,0,1-1.28.56H41.65a2.17,2.17,0,0,1-1.28-.41,3,3,0,0,1-.93-1l-1.88-4.2a3.53,3.53,0,0,0-1.09-1.16,2.64,2.64,0,0,0-1.5-.5H20.28a3,3,0,0,0-2.6,1.68l-1.95,4.18a2.36,2.36,0,0,1-.85,1,2.1,2.1,0,0,1-1.22.41h-12A1.9,1.9,0,0,1,1,58.94a1.23,1.23,0,0,1-.53-.35A1.15,1.15,0,0,1,.26,58a1.47,1.47,0,0,1,.19-.84L20.64,10a2.39,2.39,0,0,1,.86-1,2.24,2.24,0,0,1,1.28-.41h9.75m-8,31.82h6.2a1.37,1.37,0,0,0,1.22-.56,1.17,1.17,0,0,0,0-1.31c-.47-1.16-1-2.52-1.67-4.08s-1.26-3-1.82-4.36c-.23-.51-.51-.77-.85-.77s-.63.26-.86.78L23.25,38.6a1.26,1.26,0,0,0,1.27,1.88m8-32.07H22.78a2.47,2.47,0,0,0-1.42.45,2.58,2.58,0,0,0-.94,1.08L.22,57.08a1.74,1.74,0,0,0-.21,1,1.46,1.46,0,0,0,.32.7,1.5,1.5,0,0,0,.62.41,2,2,0,0,0,.73.14h12A2.38,2.38,0,0,0,15,58.86,2.6,2.6,0,0,0,16,57.78l1.95-4.18a2.65,2.65,0,0,1,.94-1.08,2.5,2.5,0,0,1,1.43-.45H35a2.4,2.4,0,0,1,1.36.45,3.44,3.44,0,0,1,1,1.08l1.88,4.18a3.14,3.14,0,0,0,1,1.08,2.47,2.47,0,0,0,1.42.45H53.56a1.57,1.57,0,0,0,1.5-.69,1.44,1.44,0,0,0,.1-1.33L34.83,9.94a2.73,2.73,0,0,0-.94-1.08,2.38,2.38,0,0,0-1.36-.45Zm-8,31.82a1.13,1.13,0,0,1-1-.45,1.09,1.09,0,0,1,0-1.08L27,30.28q.28-.63.63-.63c.23,0,.44.21.62.63L30,34.63c.64,1.55,1.2,2.91,1.67,4.07a1,1,0,0,1,0,1.08,1.14,1.14,0,0,1-1,.45Z"/><circle class="cls-2" cx="27.64" cy="3.67" r="3.55"/></g></g></svg>')
}

.gummy svg {
  height: 32px;
  width: auto;
  overflow: visible;
}
.gummy .cls-1 {
  fill: red;
}
.gummy .cls-2 {
  fill: transparent;
}
.gummy .cls-1, .gummy .cls-2 {
  stroke:#000000;
  stroke-linejoin: miter;
  stroke-width: 4px;
}
.boton-color-naranja{
  background: #e7401b;
}
  .gummy-color-naranja .cls-1{
fill: #e7401b;
}
.gummy-color-naranja{
    color:#e7401b;
  }
.boton-color-rojo{
  background: #fc3a30;
}
.gummy-color-rojo .cls-1{
fill: #fc3a30;
}
.gummy-color-rojo{
  color:#fc3a30;
}
.boton-color-rosa-fuerte{
  background: #ef3581;
}
.gummy-color-rosa-fuerte .cls-1{
fill: #ef3581;
}
.gummy-color-rosa-fuerte{
  color:#ef3581;
}
.boton-color-rosa-pastel{
  background: #FFA1F1;
}
.gummy-color-rosa-pastel .cls-1{
fill: #FFA1F1;
}
.gummy-color-rosa-pastel{
  color:#FFA1F1;
}
.boton-color-lila{
  background: #AA81E6;
}
.gummy-color-lila .cls-1{
fill: #AA81E6;
}
.gummy-color-lila{
  color:#AA81E6;
}
.boton-color-morado{
  background: #4F0571;
}
.gummy-color-morado .cls-1{
fill: #4F0571;
}
.gummy-color-morado{
  color:#4F0571;
}
.boton-color-azul-cielo{
  background: #00BDF8;
}
.gummy-color-azul-cielo .cls-1{
fill: #00BDF8;
}
.gummy-color-azul-cielo{
  color:#00BDF8;
}
.boton-color-azul-fuerte{
  background: #3132FF;
}
.gummy-color-azul-fuerte .cls-1{
fill: #3132FF;
}
.gummy-color-azul-fuerte{
  color:#3132FF;
}
.boton-color-verde{
  background: #00AC0F;
}
.gummy-color-verde .cls-1{
fill: #00AC0F;
}
.gummy-color-verde{
  color:#00AC0F;
}
.boton-color-verde-limon{
  background: #94FF2B;
}
.gummy-color-verde-limon .cls-1{
fill: #94FF2B;
}
.gummy-color-verde-limon{
  color:#94FF2B;
}
.boton-color-amarillo{
  background: #FACF00;
}
.gummy-color-amarillo .cls-1{
fill:#FACF00;
}
.gummy-color-amarillo{
  color: #FACF00;
}
#gummy-0 {
  height: 40px;
  margin-bottom: -5px;
}
.boton-glitter{
  background: url('//cdn.shopify.com/s/files/1/0500/2946/1654/t/3/assets/bg-glitter.png');
}
.gummy-color-glitter{
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: url('//cdn.shopify.com/s/files/1/0500/2946/1654/t/3/assets/bg-glitter.png');
  background-size: 32px;
  text-shadow: none;
}

/*Gummies container*/
#gummies-container {
  width: 100%;
  height: var(--gummies-container-height);
  margin-bottom: calc(var(--gummies-container-height) * -1);
  display: flex;
  justify-content: space-evenly;
  padding: 0 14px;
}
#gummies-container .gummy {
  margin: 8px;
  cursor:pointer;
  font-size: 32px;
  height: fit-content;
}
#gummies-container #gummy-0 {
  height: 48px;
  position: relative;
  bottom: 3px;
}