body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .container {
            margin-top: 50px;
        }
        .image-preview, .compressed-preview {
            min-height: 200px;
            border: 2px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
        }
        .image-preview img, .compressed-preview img {
            max-width: 100%;
            max-height: 100%;
        }
        .btn-clear {
            margin-top: 10px;
        }
        
            
            /* Estilos da miniatura da imagem */
            .zoomable {
            height: 150px;
            border: 3px solid white;
            box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);
            margin: 10px;
            cursor: pointer;
            }
            
            /* Fundo do lightbox */
            .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .7);
            visibility: hidden;
            opacity: 0;
            transition: opacity .3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999;
            }
            
            /* Quando ativado */
            .lightbox.active {
            visibility: visible;
            opacity: 1;
            }
            
            /* Imagem dentro do lightbox */
            .lightbox img {
            max-height: 90%;
            max-width: 90%;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, .5);
            border: 3px solid white;
            cursor: zoom-out;
            }
            
            /* Botão de fechar (X) */
            .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 30px;
            color: white;
            text-decoration: none;
            cursor: pointer;
            }
            
            /* Ícone padrão de imagem */
            .default-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 150px;
            background-color: #f0f0f0;
            border: 3px dashed #ccc;
            box-shadow: 0px 0px 8px rgba(0, 0, 0, .1);
            margin: 10px;
            }
            
            .default-icon svg {
            width: 50px;
            height: 50px;
            fill: #888;
            }
            
            
 .range {
  -webkit-appearance: none;
  vertical-align: middle;
  outline: none;
  border: none;
  padding: 0;
  background: none;
}

.range::-webkit-slider-runnable-track {
  background-color: red;
  height: 6px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.range[disabled]::-webkit-slider-runnable-track {
  border: 1px solid #d7dbdd;
  background-color: transparent;
  opacity: 0.4;
}

.range::-moz-range-track {
  background-color: #d7dbdd;
  height: 6px;
  border-radius: 3px;
  border: none;
}

.range::-ms-track {
  color: transparent;
  border: none;
  background: none;
  height: 6px;
}

.range::-ms-fill-lower { 
  background-color: #d7dbdd;
  border-radius: 3px;
}

.range::-ms-fill-upper { 
  background-color: #d7dbdd;
  border-radius: 3px;
}

.range::-ms-tooltip { display: none; /* display and visibility only */ }

.range::-moz-range-thumb {
  border-radius: 20px;
  height: 18px;
  width: 18px;
  border: none;
  background: none;
  background-color: #606670;
}

.range:active::-moz-range-thumb {
  outline: none;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  border-radius: 100%;
  background-color: blue;
  height: 18px;
  width: 18px;
  margin-top: -7px;
}

.range[disabled]::-webkit-slider-thumb {
  background-color: transparent;
  border: 1px solid #d7dbdd;
}

.range:active::-webkit-slider-thumb {
  outline: none;
}

.range::-ms-thumb { 
  border-radius: 100%;
  background-color: #606670;
  height: 18px;
  width: 18px; 
  border: none;
}

.range:active::-ms-thumb {
  border: none;
}

output {
  border: 1px solid #d7dbdd;
  color: #333;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  padding: .4em .6em;
  border-radius: 3px;
}

.container--dark {
  background-color: #11181d;
  
  h6 {
    color: #ccc;
  }

  .range::-webkit-slider-runnable-track {
    background-color: #606670;
  }
  
  .range[disabled]::-webkit-slider-runnable-track {
    border: 1px solid #606670;
    background-color: transparent;
  }
  
  .range::-moz-range-track {
    background-color: #606670;
    border: none;
  }
  
  .range::-ms-fill-lower { 
    background-color: #606670;
  }

  .range::-ms-fill-upper { 
    background-color: #606670;
  }
  
  output {
    border: 1px solid #2b3039;
    color: #aaa;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    padding: .4em .6em;
    border-radius: 3px;
  }
  
  .range::-webkit-slider-thumb {
    background-color: #aaa;
    box-shadow: 0 0 5px rgba(0,0,0,.5);
  }
  
  .range[disabled]::-webkit-slider-thumb {
    background-color: transparent;
    border: 1px solid #606670;
    box-shadow: none;
  }
  
  .range::-moz-range-thumb {
    background-color: #aaa;
  }
  
  .range::-ms-thumb { 
    background-color: #aaa;
  }
}