body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px !important;
    background: #ba3b46;
    background: linear-gradient(45deg, #ba3b46a3 0%, #ed9b40a3 100%);
    background-size: cover;
    background-repeat: no-repeat;
    color: #68573f;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0px !important;
}
hr{
    margin: 20px 0;
}

.titulo {
    color: white;
    text-align: center;
}

.contenido {
    width: 100%;
    height: auto;

    /* background-color: #dddddd; */

    display: flex;
    /* justify-content: space-evenly; */
}

.menuSeleccion {
    width: calc(30% - 65px);
    height: auto;

    border-radius: 20px;

    backdrop-filter: blur(300px);
    background-color: #ffeedbbb;
    border: #ed9b40 solid 2px;

    padding: 25px;
    margin: 50px 10px;
}

.view {
    width: calc(70% - 65px);
    height: 80vh;

    border-radius: 20px;

    backdrop-filter: blur(300px);
    background-color: #ffeedbbb;
    border: #ed9b40 solid 2px;

    padding: 25px;
    margin:  50px 10px;

    overflow: hidden;

    position: -webkit-sticky; /* Para compatibilidad con Safari */
    position: sticky;
    top: 20px;
}



.inputLabel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

}

.inputLabel h3 {
    font-size: 18px;
}

.box {
    height: 60px;
    width: 60px;
    border: #68573f solid 2px;
    margin: 25px;
}

.box img {
    height: 60px;
    width: 60px;
}

.box2 {
    height: 100px;
    width: 100px;
    border: #68573f solid 2px;
    margin: 25px;
}

.box2 img {
    height: 100px;
    width: 100px;
}




/* ================================================= */
/* Input Range */
/* ================================================= */


/*********** Baseline, reset styles ***********/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
  }
  
  /* Removes default focus */
  input[type="range"]:focus {
    outline: none;
  }
  
  /******** Chrome, Safari, Opera and Edge Chromium styles ********/
  /* slider track */
  input[type="range"]::-webkit-slider-runnable-track {
    background-color: #61c9a8;
    border-radius: 10px;
    height: 10px;
  }
  
  /* slider thumb */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -7.5px; /* Centers thumb on the track */
    background-color: #ed9b40;
    border-radius: 8px;
    height: 25px;
    width: 25px;
  }
  
  input[type="range"]:focus::-webkit-slider-thumb {
    outline: 3px solid #ed9b40;
    outline-offset: 0.125rem;
  }
  
  /*********** Firefox styles ***********/
  /* slider track */
  input[type="range"]::-moz-range-track {
    background-color: #61c9a8;
    border-radius: 10px;
    height: 10px;
  }
  
  /* slider thumb */
  input[type="range"]::-moz-range-thumb {
    background-color: #ed9b40;
    border: none; /*Removes extra border that FF applies*/
    border-radius: 8px;
    height: 25px;
    width: 25px;
  }
  
  input[type="range"]:focus::-moz-range-thumb{
    outline: 3px solid #ed9b40;
    outline-offset: 0.125rem;
  }

  /* ===================================================== */
  /* Switch */
  /* ===================================================== */

  :root {
    --color-green: #61c9a8;
    --color-red: #ba3b46;
    --color-button: #ffeedb;
    --color-black: #68573f;
}
.switch-button {
    display: inline-block;
}
.switch-button .switch-button__checkbox {
    display: none;
}
.switch-button .switch-button__label {
    background-color: var(--color-red);
    width: 50px;
    height: 30px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}
.switch-button .switch-button__label:before {
    transition: .2s;
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: var(--color-button);
    content: '';
    border-radius: 50%;
    box-shadow: inset 0px 0px 0px 1px var(--color-black);
}
.switch-button .switch-button__checkbox:checked + .switch-button__label {
    background-color: var(--color-green);
}
.switch-button .switch-button__checkbox:checked + .switch-button__label:before {
    transform: translateX(20px);
}

/* ======================================== */
/* Butosn */
/* ======================================== */

.buttons {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.buttons img {
    margin: 5px;
    height: 50px;
    width: auto;
    border: solid 2px #61c9a8;
    border-radius: 10px;
    cursor: pointer;
}

.buttons img:hover {
    background-color: #ffeedb;
}

.buttons img.active {
    background-color: #ffffff;
    border: solid 3px #61c9a8;
}


/* MEDIA */

@media (max-width: 1024px) {

    .contenido {
        display: flex;
        flex-direction: column;
        /* justify-content: flex-start; */
    }

    .menuSeleccion {
        width: calc(100% -  70px);
        height: auto;
        margin: 10px 10px;
    }

    .view {
        width: calc(100% -  70px);
        height: 100vh;
        margin:  10px 10px;
    }

    .box {
        height: 50px;
        width: 50px;
        border: #68573f solid 2px;
        margin: 10px;
    }
    
    .box img {
        height: 50px;
        width: 50px;
    }
}


.custom-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 150px;
    height: 50px;
    background-color: #c3e6cb; /* Verde claro pastel */
    border: 2px solid #155724; /* Verde oscuro */
    color: #155724; /* Verde oscuro */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Arial, sans-serif;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.copyButton {
    cursor: pointer;
}

.copyButton:hover {
    color: #ba3b46;
}