.colors {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  /*width: 90%;*/
}

.cls-1.one {
  fill:#BCBBBB;
  pointer-events: all;
  stroke: black;
}
.cls-1.two {
  fill:#D3D3D3;
  pointer-events: all;
  stroke: black;
}
.cls-1.three {
  fill:#C3C7C7;
  pointer-events: all;
  stroke: black;
}
.cls-1.four {
  fill:#9E9E9E;
  pointer-events: all;
  stroke: black;
}
.cls-1.five {
  fill:#E5E4E2;
  pointer-events: all;
  stroke: black;
}
.cls-1.six {
  fill:#A0A5A3;
  pointer-events: all;
  stroke: black;
}
.cls-1.seven {
  fill:#F2F3F5;
  pointer-events: all;
  stroke: black;
}

.cls-2 {
  fill: black;
  pointer-events: all;
  stroke: black;
  font-family: 'Myriad Pro', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
}

/*************************/

.cls-1.one:hover,
.cls-1.two:hover,
.cls-1.three:hover,
.cls-1.four:hover,
.cls-1.five:hover,
.cls-1.six:hover,
.cls-1.seven:hover {
  cursor: pointer;
}

/*************************/
svg {
  pointer-events: auto;
}

/*************************/
.selected {
  outline: 2px solid #000;
}

/*************************/
input {
  padding: 7px;
  width: 49px;
  background: #f8f8ff;
  box-shadow: -15px -15px 30px 0 #fff, 15px 15px 30px 0 #1d0dca17;
  border: none;
  font-size: 0.75rem;
  border-radius: 5px;
  appearance: none;
  font-family: 'Myriad Pro', sans-serif;
  font-weight: 600;
  margin: 10px;
  border-bottom:2px solid black;
}
.input:focus {
  outline: none;
  background: linear-gradient(135deg, rgb(239, 247, 255) 0%, rgb(214, 229, 247) 100%);
}
/* Para los navegadores basados en WebKit (Chrome, Safari) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;  /* Oculta las flechas */
  margin: 0;  /* Elimina el margen */
}

/* Para los navegadores basados en Gecko (Firefox) */
input[type="number"] {
  -moz-appearance: textfield;  /* Oculta las flechas */
}
/* Asegura que no haya borde en el input */
input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
input::placeholder {
  font-weight: bold;
  color: #2a1f62;
  text-align: center;
}
.box {
display: flex;
flex-direction: row;
margin: 2px;
}
.buttonStyle {
align-items: center;
/*background: #f5f5fa;*/
border: 0;
border-radius: 8px;
box-shadow: rgba(90, 50, 93, 0.25) 0px 50px 100px -20px, rgba(90, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
box-sizing: border-box;
color: #2a1f62;
cursor: pointer;
display: flex;
font-family: 'Myriad Pro', sans-serif;
font-size: 1rem;
justify-content: center;
line-height: 1.5rem;
padding: 15px;
position: relative;
text-align: left;
transition: .2s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: pre;
width: max-content;
word-break: normal;
word-spacing: normal;
}
.buttonStyle:hover {
box-shadow: -15px -15px 30px 0 #fff, 15px 15px 30px 0 #1d0dca17;
opacity: 0.5;
}
.boxPosition {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
}
/*************************/

.instrucciones {
  font-weight: 600;
  margin-bottom: -6px;
}

@media (min-width: 768px) {
.buttonStyle {
padding: 24px;
}
}


/*  Apply colors  */

.colorOne {
  background-color: #833A90;
}

.colorTwo {
  background-color: #F191B5;
}

.colorThree {
  background-color: #009784;
}

.colorFour {
  background-color: #FCD33C;
}

.colorFive {
  background-color: #417EF1;
}

.colorSix {
  background-color: #F23807;
}

.colorSeven {
  background-color: #EF8614;
}

/****************** SWAL ******************/

.swal-custom-title {
  font-family: 'Myriad Pro', sans-serif;
  color: #333333;
  font-size: 20px;
}

.swal-custom-button {
  font-family: 'Myriad Pro', sans-serif;
  background-color: white;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.swal-custom-button:hover {
  background-color: white;
}

div:where(.swal2-container) h2:where(.swal2-title) {
  color: #333333 !important;
}

div:where(.swal2-container) div:where(.swal2-actions) {
  margin: 0px !important;
  height: 90px !important;
}

div:where(.swal2-container) div:where(.swal2-popup) {
  width: auto !important;
  padding: 0px !important;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px !important;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  height: fit-content;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  align-items: center !important;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px !important;
  box-sizing: border-box !important;
  color: #FFFFFF !important;
  display: flex !important;
  justify-content: center !important;
  line-height: 1em !important;
  padding: 10px !important;
  text-decoration: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  font-family: 'Myriad Pro', sans-serif !important;
  font-size: 1rem !important;
}

.div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:active,
.div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover {
  outline: 0 !important;
}

.div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm span {
  background-color: rgb(5, 6, 45) !important;
  padding: 16px 24px !important;
  border-radius: 6px !important;
  width: 100% !important;
  height: 100% !important;
  transition: 300ms !important;
}

.div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover span {
  background: none !important;
}

div:where(.swal2-container).swal2-center>.swal2-popup {
  background-color: #F7F9FC;
}

/***********************/

.btn-siguiente {
  opacity: 0.5;
  cursor: none;
}

/***********************/

.brightness {
  animation-name: brightness;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:brightness;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;

}

@-moz-keyframes brightness{  
  0% { opacity: 1.0; }
  50% { opacity: 0.5; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes brightness {  
  0% { opacity: 1.0; }
  50% { opacity: 0.5; }
   100% { opacity: 1.0; }
}

@keyframes brightness {  
  0% { opacity: 1.0; }
   50% { opacity: 0.5; }
  100% { opacity: 1.0; }
}

.disabled-button {
  opacity: 0.07;
  pointer-events: none;
  cursor: not-allowed;
}

.disabled-svg {
  cursor: not-allowed;
}

@media (max-width: 600px) { 

  .time-inst {
    /*width: 290px;*/
    text-align: center;
  }

  svg {
    width: 185px !important;
    height: 185px !important;
  }

  .buttonStyle {
    width: 7px;
    height: 5px !important;
  }

  input {
    padding: 0px !important; 
    margin: 0px;
  }
}