@media (min-width: 1300px) {
     .anuncio_vertical_esq, .anuncio_vertical_dir {
         display: block;
    }
}
 @media (max-width: 1299px) {
     .anuncio_vertical_esq, .anuncio_vertical_dir {
         display: none;
    }
}
 body {
     font-family: 'Arial', sans-serif;
     background-color: #f4f4f9;
     margin: 20px;
}
 a {
     text-decoration: none;
     color: lightblue;
}
 .container {
     max-width: 600px;
     margin: 0 auto;
     padding: 20px;
     background-color: #ffffff;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     flex: 1;
}
 .anuncio_vertical_esq{
     width: 200px;
     height: 95vh;
     padding-top: 15vh;
     float: left;
}
 .anuncio_vertical_dir{
     width: 250px;
     height: 96vh;
     padding-top: 15vh;
     float: right;
}
 .anuncio{
     width: 80%;
     height: 10vh;
     margin: 20px auto;
}
 .apresentacao{
     text-align: justify;
}
 .obrigatorio{
     font-size: 12px;
     color: tomato;
}
 label {
     display: block;
     margin-top: 15px;
     font-weight: bold;
     color: #555;
}
 #wifiEncryption, #qrType {
     width: 100%;
     padding: 10px;
     margin-top: 5px;
     font-size: 14px;
     border: 1px solid #ccc;
     border-radius: 5px;
}
 .tamanhos{
     width: 100%;
     height: 45px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
}
 #sizeInput, #tamanhoPersonalizado {
     width: 150px;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     height: 40px;
}
 #tamanhoPersonalizado{
     margin-top: 20px;
}
 #imageInput{
     margin-top: 3px;
}
 #botao_salvar:hover {
     background-color: #45a049;
}
 #controls {
     margin-top: 20px;
     width: 95%;
     display: none;
}
 .wifi-fields, .vcard-fields, .calendarFields, .whats {
     display: none;
     margin-top: 20px;
}
 h1 {
     text-align: center;
     color: #333;
     margin-bottom: 10px;
}
 canvas {
    display: block;
    margin: 5px auto;
    border: 1px solid #ddd;
    height: 23vh;
    width: 23vh;
    border-radius: 5px;
}

 #botao_salvar {
     background-color: #4CAF50;
     color: white;
     cursor: pointer;
     border: none;
     width: 80px;
     padding: 5px;
     font-size: 16px;
     border: 1px solid #ccc;
     border-radius: 5px;
}
 .topo {
     height: 30vh;
     position: sticky;
     border-top: 1px solid white;
     top: 0;
     z-index: 2;
     text-align: center;
     width: 100%;
     background-color: white;
     box-shadow: 0 20px 10px -10px white;
}
 .corpo {
     position: relative;
     z-index: 1;
     padding-top: 30px;
}
 .form-group {
     margin-bottom: 20px;
}
 .form-group input[type="text"], .form-group input[type="number"], .form-group input[type="file"], .form-group input[type="email"], .form-group input[type="url"], .form-group input[type="range"], .form-group input[type="datetime-local"] {
     width: 100%;
     font-size: 14px;
     border-radius: 5px;
     border: 1px solid #ccc;
     box-sizing: border-box;
     padding: 10px;
}
 .form-group input[type="color"] {
     border-radius: 10%;
     border: 1px solid #ccc;
     box-sizing: border-box;
     height: 30px;
     width: 30px;
}
 .float{
     width: 50%;
     float: left;
     text-align: center;
}
 .form-group label {
     font-weight: bold;
     color: #555;
}
 textarea {
     width: 100%;
     min-height: 70px;
     resize: vertical;
     padding: 10px;
     font-size: 16px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
     margin-top: 2px;
}
 textarea:focus {
     border-color: #5e9ed6;
     outline: none;
}
 #botao_salvar:disabled {
     cursor: not-allowed;
    /* Cursor de "proibido" */
}
 body.dark-mode {
     background-color: #121212;
}
 body.dark-mode footer {
     background-color: #121212;
}
 body.dark-mode .container {
     background-color: #1e1e1e;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
 body.dark-mode .topo {
     background-color: #1e1e1e;
     box-shadow: 0 20px 10px -10px #1e1e1e;
     border-top: 1px solid #1e1e1e;
}
 body.dark-mode canvas {
     background-color: whitesmoke;
}
 body.dark-mode label, body.dark-mode h1, body.dark-mode p, body.dark-mode li{
     color: lightgray;
}
 body.dark-mode #botao_salvar {
     background-color: darkgreen;
     border: 1px solid #555;
}
 body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
     background-color: #333 !important;
     color: #fff !important;
     border-color: #555 !important;
}
 body.dark-mode #darkModeToggle {
     background: linear-gradient(45deg, #87CEFA, #4682B4);
}
 body.dark-mode #darkModeToggle .indicator {
     transform: translateX(0);
    /* Indicador à esquerda */
     background-color: #ffcc00;
    /* Sol no modo escuro */
}
 body.dark-mode #darkModeToggle .indicator::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: transparent;
     transform: translateX(0);
    /* Sem deslocamento adicional */
}
 #darkModeToggle {
     width: 60px;
     height: 30px;
     background: linear-gradient(to bottom right, #001f2d, #2a2a2a);
     border: none;
     border-radius: 15px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
     position: fixed;
     top: 20px;
     right: 20px;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 5px;
     z-index: 10;
}
 #darkModeToggle .indicator {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background-color: #e0e0e0;
    /* Lua no modo claro */
     position: relative;
     transition: transform 0.3s ease, background-color 0.3s ease;
     transform: translateX(30px);
    /* Indicador à direita */
}
 #darkModeToggle .indicator::before {
     content: '';
     position: absolute;
     top: 1px;
     left: 6px;
    /* Posiciona a parte "cortante" da lua */
     width: 15px;
     height: 15px;
     border-radius: 50%;
     background-color: #1e1e1e;
    /* Fundo do botão para criar o efeito de lua crescente */
}
 footer {
     background: #f4f4f9;
     color: #fff;
     padding: 20px;
     border-radius: 3px;
     margin-top: 20vh;
     margin-bottom: 5vh;
}
 .politicas {
     width: 100%;
     margin: 0 auto;
}
 .politicas-item {
     margin-bottom: 10px;
}
 .politicas-item iframe{
     width: 100%;
     height: 800px;
}
 .politicas-titulo {
     background: #444;
     padding: 10px;
     cursor: pointer;
     border: 1px solid #555;
}
 .politicas-texto {
     display: none;
     padding: 10px;
     background: #555;
     border: 1px solid #666;
     margin-top: -20px;
}
 .politicas-titulo:hover {
     background: #555;
}
 .politicas-titulo.active + .politicas-texto {
     display: block;
}
 #cookie-banner {
     background-color: rgba(255, 206, 128, 0.9);
     color: black;
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 15px;
     text-align: center;
     font-family: Arial, sans-serif;
     font-size: 16px;
     z-index: 1000;
}
 #cookie_conteudo{
     width: 95%;
}
 #cookie-banner button {
     background-color: #333;
     color: #fff;
     border: none;
     padding: 10px 20px;
     cursor: pointer;
     font-size: 16px;
     border-radius: 5px;
     margin-top: 15px;
}
 #cookie-banner button:hover {
     background-color: #555;
}
 #denso{
     font-style: italic;
     font-weight: bold;
     text-align: center;
     width: 100%;
     padding: 5px;
     bottom: 0;
     margin-top: 10px;
     color: gray;
}