header {
    position: fixed;
        top: 0;
        width: 100%;
        background-color: #f0f0f0;
        z-index: 100;
        /* outros estilos desejados para o cabeçalho */

    /* outros estilos desejados para o cabeçalho */
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
/* .boxlogin{
    position: absolute;
    top: 50%;
    left: 42%;
    transform: translate(-50%,50%);
    border-radius: 15px;
    color: black;
    background-color: #beb1b8;
    padding: 15px;
    width: 40%;
    height: 10%;
} */
.buttonlogin{
    padding: 10px;
    padding-top: 10px;
    height: 30%;
    width: 15%;
    margin-left: 42%;
    font-size: 24px;
}

.boxloginVol{
    position: absolute;
    top: 50%;
    left: 57%;
    transform: translate(-50%,50%);
    border-radius: 15px;
    color: black;
    background-color: #beb1b8;
    padding: 15px;
    width: 13,5%;
}
.boxloginIgr{
    position: absolute;
    top: 50%;
    left: 68%;
    transform: translate(-50%,50%);
    border-radius: 15px;
    color: black;
    background-color: #beb1b8;
    padding: 15px;
    width: 13,5%;
}
.tela-login{
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-25%);
    padding: 65px;
    border-radius: 15px;
    color: white;
    
    }
 
    .login{

        padding: 15px;
        border: none;
        outline: none;
        font-size: 15px;
        
        }
        .inputSubmit{
            background-color: #beb1b8;
            background-origin: none;
            padding: 15px;
            width: 100%;
            border-radius: 10px;
            color: #000000;
            font: 15px;
        
        }
        .inputSubmit:hover{
            background-color:  white;
            cursor: pointer;
            
        }
  
.boxformularioAdm{
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    border: 3px solid  rgb(172, 16, 130);
    width: 47%; 
    
    margin-top: 8%;
    margin-left: 1%;
    
    background-color: #beb1b8;
}
.boxformulariodoSite{
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    border: 3px solid  rgb(172, 16, 130);
    width: auto; 
    
    margin-top: 8%;
    margin-left: 1%;
    margin-right: 1%;
    background-color: #beb1b8;
}

.boxexportarMembros{
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    border: 3px solid  rgb(172, 16, 130);
    width: 47%; 
    
    margin-top: 2%;
    margin-left: 1%; 
    background-color: #beb1b8;
}
 
.boxformularioMembrosAdm{
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    border: 3px solid  rgb(172, 16, 130);
    width: 90%; 
    
    margin-top: 2%;
    margin-left: 1%; 
    background-color: #beb1b8;
}
.boxformularioEditMembrosAdm{
    margin-top: 2%;
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    border: 3px solid  rgb(172, 16, 130);
    width: 90%; 
    margin-left: 4%; 
    background-color: #beb1b8;
}
.boxformularioVol{
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    border: 3px solid  rgb(172, 16, 130);
    width: 47%; 
    height: 120%;
    margin-left: 50%;
    margin-top: -19%; 
    background-color: #beb1b8;
}
.boxformularioRelatorio{
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    border: 3px solid  rgb(172, 16, 130);
    width: 40%; 
    height: auto
    margin-left: 1%; 
    background-color: #beb1b8;
    font-size: 18px;
}

.boxpaginaRelatorio{
    border: 3px solid  rgb(172, 16, 130);
    background-color: #beb1b8;
    
}
.boxformularioeditVendas{
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    border: 3px solid  rgb(172, 16, 130);
    width: 47%; 
    height: 120%;
    margin-top: 8%;
    margin-left: 1%; 
    background-color: #beb1b8;
}
.form-label{
    font-weight: bold;
}
.navbar navbar-expand-lg bg-body-tertiary{
    
}
.modal-header{
    background-color: #000000;

}
.modal-title{
    color: white;
    margin-left: 25%;
    font-size: 30px;
}
.modal-footer-cropper{
    background-color: #ccc;
	width: 100%;
	height: 10vh;
    font-size: 20px;
      
}
.formaPagamento{
    padding-right: 15%;
}
.tipodePagamento{
    
    margin-left: -15%;
}

#codBarras{
    font-weight: bold;
    margin-left: 1%;
    font-size: 18px;
}
   
.nav-link{
    font-size: 24px;
}

#relatorio{
    width: 40%; 
    height: 220%; 
    margin-left: 333%; 
    color: #000000;
    background-color:#f8bdc6
}
#confirmar{
    margin-left: 1%;
}
        
#lirio{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-top: -3%;
    height: top;
    line-height: 80px;
    text-align: center;
    color: #000000;
    font-size: 80px;
}
#botaoadm{
    font-size: 30px;
    text-decoration: none;
}
#botaovol{
    font-size: 30px;
    text-decoration: none;
}
#botaoigr{
    font-size: 30px;
    text-decoration: none;
}
#lirioLogin{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-top: -10%;
    height: top;
    line-height: 80px;
    text-align: center;
    color: #000000;
    font-size: 70px;
}
#logo{
    margin-top:-2%;
    width: 20%;
    height: 30%;
}
#voltarLogin{
    margin-top: -22%;
    margin-left: -20%;
    width: 5vw;
    height: 5vh;
    fill: #beb1b8;
  }
  #submitAdm{
    
    background-image: linear-gradient(to right, rgb(172, 16, 130), rgb(90,20,220));
    
    width: 100%;
    height: 60%;
    border: none;
    padding: 8px;
    color: white;
    font-size: 15px;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 30px;
}
#submitAdm:hover{
    background-image: linear-gradient(to right, rgb(0, 80, 172), rgb(80,19,195));
}
#submitPro{
    
    background-image: linear-gradient(to right, rgb(172, 16, 130), rgb(90,20,220));
    
    width: 60%;
    height: 60%;
    border: none;
    padding: 8px;
    color: white;
    font-size: 15px;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 30px;
}
#submitPro:hover{
    background-image: linear-gradient(to right, rgb(0, 80, 172), rgb(80,19,195));
}
  #update{
    margin-top: 18%;
    font-size: 18px;

  }
  #updateMembros{
    margin-top: 10%;
    font-size: 18px;

  }
  #cancelar{
    margin-top: -40%;
    margin-left: 50%;
    background-color: #000000;
    font-size: 18px;

  }
  #cancelarMembros{
    margin-top: -1%;
    margin-left: 10%;
    background-color: #000000;
    font-size: 18px;

  }
  #cabecalho{
    width: 100%;
  }
  
  #sair{
    margin-left: -18%;
  }
  #sairmenu{
display: none;
  }
  #logoLiriocabecalhoSite{
    width: 10%;
    height: 10%;
  }
    #logoLiriocabecalhoMobile{
    width: 10%;
    height: 10%;
  }
  #logoLiriocabecalho{
    width: 10%;
    height: 10%;
  }
  #BemVindo
{
    height: 10%;
    line-height: 80px;
    text-align: center;
    margin-top: 5%;
    color: rgb(172, 16, 130);

}

#BemVindoVendas
{
    height: top;
    line-height: 80px;
    text-align: center;
    margin-top: 8%;
    color: rgb(172, 16, 130);

}
#bemRelatorio
{
    text-align: center;
    margin-top: 5%;
    color: rgb(172, 16, 130);
    font-size: 40px;

}

.butnavegacao{
    margin-left: 15px;
    background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0));
    width: auto;
    border: none;
    padding: 10px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    border-radius: 10px;  
    align-items: flex-start;
    text-decoration: none;
}
.butnavegacaoum{
    margin-left: 15px;
    background-image: linear-gradient(to right, rgb(57, 58, 113), rgb(57, 58, 113));
    width: auto;
    border: none;
    padding: 10px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    border-radius: 10px;  
    align-items: flex-start;
    text-decoration: none;
}
.butnavegacaodois{
    margin-left: 15px;
    background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0));
    width: auto;
    border: none;
    padding: 10px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    border-radius: 10px;  
    align-items: flex-start;
    text-decoration: none;
}

#menuHeader{
    margin-left: 15px;
    background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0));
    width: auto;
    border: none;
    padding: 10px;
    color: white;
    font-size: 15px;
    cursor: pointer;
    border-radius: 10px;  
    align-items: flex-start;
    text-decoration: none;
}
.opcoesloja{
    margin-left: 15px;
    background-image: linear-gradient(to right, rgb(172, 16, 130), rgb(90,20,220));
    width: 10%;
    border: none;
    padding-top: 3%;
    padding: 10px;
    color: white;
    font-size: 15px;
    cursor: pointer;
    border-radius: 10px;
    
    
}

.table-container {
  overflow-x: auto;
  max-width: 100%;
}

#tabelaLista{
margin-top: 1.5%;
margin-left: 1%;
padding-right: 2%;
}
#tabelaTotal{
    margin-top: 1.5%;
    margin-left: 1%;
    padding-right: 2%;
    width: 20%;
    border: #000000;
    background-color: #beb1b8;
    }
#cancelarLink{
    margin-top: 10%;
}
#tabelaAtendimento{
    margin-left: 1%;
}
#tabelaatendimentomobile{
    display: none;
    }
.imagenscarroussel{
    width: 47%;
    height: 5%;
    margin: 5px;
    padding: 2%;
    margin-left: 23%;

}
.imagensevento {
    width: 200px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
  
.carroussel-container {
    display: contents;
    position: fixed;
    flex-wrap: wrap;
    justify-content: flex-start;
    z-index: 50;
}
.carroussel{
    margin-top: 5%;
 
}
#titulohome{
    margin-top: 5%;
    text-align: center;
    font-family:  'Times New Roman', Times, serif;
    color: black;
}
#subtitulohome{
    margin-top: 2%;
    text-align: center;
    font-family:  'Times New Roman', Times, serif;
    color: darkblue;
}
#textos{
    margin-top: 1%;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
    color: ;
}

  .footer a {
    color: #000000;
    text-decoration: none;
    /* display: block; */
    margin: 5px 0;
}

.textofooter{
    font-size: 24px;
    font-family: bold;
    font-style: normal;
    font-weight: bold;
    margin-left: 2%;
    
}
.infoFooter{
    margin-left: 2%;
}
.bandeiras{
    width: 30px;
    height: 30px;
    margin-left: ;
} 
.bandeirass{
    width: 50px;
    height: 30px;
    margin-left: ;
}
.imgPro{
    max-width: 300px; /* Imagens se ajustarão à largura máxima do contêiner */
    height: 300px;
    margin: 10px;
} 
.rodape{
    font-size: 14px;
    margin-top: auto;
    margin-left: 0%;
    display: flexbox;
    background-color: #f8f9fa;
    width: 100%;
    align-items: center;
  }
  .containerhome {
    display: flex;
        justify-content: center; /* Centraliza os elementos na horizontal */
    overflow: auto;
}

.boxhome {
    display: flex;
    flex-wrap: wrap;
    max-width: 1600px; /* Ajuste o valor conforme necessário */
}
#tabelaForm {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    margin-top: 2%;
    margin-left: 0%;
    overflow-x: auto; /* Adiciona rolagem lateral */
    white-space: nowrap;
}
#tabelaSite {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;     /* apenas rolagem horizontal */
  margin-top: 2%;
  margin-left: 1%;
  white-space: nowrap;
}

#tabelaSite table {
    width: 100%;
    min-width: 800px; /* Defina um tamanho mínimo para forçar a rolagem */
    border-collapse: collapse;
}
#tabelaSite::-webkit-scrollbar {
    display: none; /* Oculta a barra no Chrome, Edge e Safari */
}

#tabelaSite tr {
    display: inline-block;
    width:350px;
    box-sizing: border-box;
}
#tabelaMobile {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    margin-top: 2%;
    margin-left: 1%;
    overflow-x: auto; /* Adiciona rolagem lateral */
    white-space: nowrap;
    display: none;
    
}

#tabelaMobile table {
    width: 100%;
    min-width: 800px; /* Defina um tamanho mínimo para forçar a rolagem */
    border-collapse: collapse;
}
#tabelaMobile::-webkit-scrollbar {
    display: none; /* Oculta a barra no Chrome, Edge e Safari */
}

#tabelaMobile tr {
    display: inline-block;
    width:350px;
    box-sizing: border-box;
}

.produtos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    
}
.produtos {
    display: inline-block;
    /* width: auto; */
    vertical-align: top;
    padding-left: 0%;
    height: auto; /* Ajusta a altura automaticamente com base no conteúdo */
    min-height: 5px;
}
.produtos td {
    
    flex-direction: column;
    align-items: center; /* Centraliza o conteúdo */
    justify-content: center; /* Mantém os elementos centralizados */
    padding: 1px;
}


.imagens{
    width: 300px;
    height: 300px;
}
.mergulhar{
    width: 100%;
    
    
}
.imgvoluntariado{
    width: 80%;
    height: 80%;
    margin-left: 7%;
}
.linkredirect {
    width: 90%;
    max-width: 200px;
    padding: 1px;
    font-size: 16px;
    text-align: center;
}
.dadoscontato{
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    border: 3px solid  rgb(172, 16, 130);
    width: 50%; 
    
    margin-top: 2%;
    margin-left: 20%; 
    background-color: #beb1b8;
}

.form-container {
    width: 100%;
    max-width: 800px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    background: white;
    margin-left: 25%;
}
.form-mergulhar {
    width: 100%;
    max-width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    background: white;
    margin-left: 0%;
}
#novocomeco {
    width: 100%;
    height: 600px;
    border: none;
}

#youtube {
    width: 80%;
    height: 600px;
    border: none;
    margin-left: 10%;
}
.video-container {
    width: 100%;
    margin-left: ;
    aspect-ratio: 16 / 9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}
#titulonapagina{
    margin-top: 160px;
    text-align: center;
    font-family:  'Times New Roman', Times, serif;
    
}
.diaHoje {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#titulocategoria{
    margin-top: 1%;
    text-align: center;
    font-family: cursive;
    
}


  .preview {
    width: 120px;
    height: 160px; /* proporção 3x4 */
    overflow: hidden;
    margin-top: 10px;
    border: 1px solid #ccc;
  }

  .modal-content{
    width: 70%;
    margin-left: 10%;
}
.modal-body.text-center{
    width: 200px;
    height: 200px;
    margin-left: 30%;
}
.modal-footer{
    height: 30%;

}
 /* Estilos para o modal do cropper */
 #modal_crop .modal-dialog {
    max-width: 90%;
    max-height: 90vh;
}

#modal_crop .modal-content {
    width: 27%;
    height: 70vh;
    margin-left: 35%;
    display: flex;
    flex-direction: column;
}

#modal_crop .modal-body {
    flex: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#image_crop {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

/* Prévia da imagem cortada */
#preview_cropped {
    width: 40%;
    height: 10%;
    display: none; /* Esconder até ter imagem */
    display: none; 
    border-radius: 4px; 
    border: 1px solid #ddd;
}
#no-image-placeholder{
    text-align: center; 
    padding: 20px; 
    border: 1px dashed #ccc; 
    border-radius: 4px;
}

.btn-group{
    margin-top: 3%;
    padding-left: 3%;
    width: 35%;
    height: 60%;
}
.botaodomodal{
    margin-top: -12%;
    margin-left: 40%;
}
#crop_button_cancelar{
    margin-left: 3%;
  
}
.atalhos{
    margin-top: 2%;
}

.imagensMembros {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  background-color: #f9f9f9;
}



@media (max-width: 1400px) {
    .imagens{
        width: 200px;
        height: 200px;
    }
    #tabelaSite tr {
        display: inline-block;
        width:250px;
        box-sizing: border-box;
    }
      #tabelaMobile tr {
        display: inline-block;
        width:250px;
        box-sizing: border-box;
    }
    .imagensMembros {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  background-color: #f9f9f9;
}

    #modal_crop .modal-content {
        width: 40%;
        height: 70vh;
        margin-left: 35%;
    }
    .btn-group{
        margin-top: 3%;
        padding-left: 3%;
        
    }
    .botaodomodal{
        margin-top: -10%;
    }
#titulonapagina{
    margin-top: 10%;
}
    .boxformularioVol{
        margin-top: -25.2%;
    }   
    .nav-link{
        font-size: 24px;
    }
    .boxlogin{
        position: absolute;
        top: 38%;
        left: 20%;
        
    }
    .buttonlogin{
        padding: 10px;
        padding-top: 10px;
        height: 30%;
        width: 43%;
        margin-left: 2%;
        font-size: 24px;
    }
    .linkTitulo{
        margin-top: 10%;
    }
    .linkPro{
        margin-top: 1%;
    }
    
    .form-container {
        margin-left: 15%;
    }
    #cancelarMembros{
        margin-top: -22%;
        margin-left: 40%;
        background-color: #000000;
        font-size: 18px;
            
      }
    
}
@media (max-width: 999px){
    #cabecalho{
        display: none;
    }
   
    #tabelaMobile {
        display: inline-flex;
    }
    #modal_crop .modal-content {
        width: 50%;
        height: 70vh;
        margin-left: 35%;
    }
    #logoLiriocabecalhoSite{
       margin-left: auto;
    }
     #logoLiriocabecalhoMobile{
        margin-left: 5%;
      }
    
    .navbar-toggler{
        margin-top: -5%;
    }
    .boxlogin{
        position: absolute;
        top: 45%;
        left: 10%;
        
    }
    .buttonlogin{
        padding: 10px;
        padding-top: 10px;
        height: 30%;
        width: 43%;
        margin-left: 2%;
        font-size: 24px;
    }
    #sair{
        display: none;
        
      }
      #sairmenu{
        display: flex;
        
      }
      .linkTitulo{
        margin-top: 18%;
    }
    .linkPro{
        margin-top: 1%;
    }
    #bemRelatorio{
     margin-top: 10%;   
    }
    #tabelacarrousel{
        margin-top: 10%;
    }
    .imagenscarroussel{
        margin-top: -1%;
        width: 60%;
        height: 90%;
        padding: 2%;
        margin-left: 20%;
    
    }
    #titulocategoria{
        margin-top: 4%;
    }
    #logo{
        width: 35%;
        margin-top: -5%;
    }
    .form-container {
    margin-left: 8%;
    }
    .dadoscontato{
        width: 70%;
        margin-left: 15%;
    }
    #cancelarMembros{

        margin-top: -33%;
        margin-left: 50%;
    }
    .btn.btn-outline-primary {
        padding: 0.375rem 0.75rem; /* Tamanho padrão do Bootstrap */
        font-size: 1rem; /* Tamanho padrão de fonte */
        transition: all 0.3s ease; /* Transição suave para mudanças de tamanho */
      }
      #tabelaAtendimento{
        display: none;
    }
#tabelaatendimentomobile{
display: inline-table;
margin-left: 4%;
margin-top: 2%;
width: 50%;
border: none;
padding: 15px;
color: white;
font-size: 15px;
cursor: pointer;
border-radius: 10px;
    
}
#confirmar{
    margin-top: 4%;
    margin-left: 4%;
    background-image: linear-gradient(to right, rgb(172, 16, 130), rgb(90,20,220));
    width: 50%;
}
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-contentcamera {
    background-color: white;
    width: 95%;
    height: 90%;
    max-width: 600px;
    margin-top: 5%;
    margin-left: 2%;
    padding: 20px;
    border-radius: 5px;
}

/* Estilos para o vídeo da câmera */
video {
    margin-top: -3%;
    margin-left: 3%;
    width: 90%;
    height: 75%;
}
#closeModal{
    margin-top: 2%;
}
#tabelaSite {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    margin-top: 2%;
    margin-left: 1%;
    overflow-x: auto; /* Adiciona rolagem lateral */
    white-space: nowrap;
}
}

@media (max-width: 800px){
    #cabecalho{
        display: none;
    }

    #titulonapagina{
        margin-top: 20%;
    }
    #logoLiriocabecalhoSite{
    height: 40px ;
    width: 75px;
    
    }
     .navbar-toggler:hover {
        margin-top: 30%;
        margin-left: 30%;
     }
    .boxlogin{
        position: absolute;
        top: 35%;
        left: 10%;
        
    }
    .buttonlogin{
        padding: 10px;
        padding-top: 10px;
        height: 30%;
        width: 43%;
        margin-left: 2%;
        font-size: 24px;
    }
    .linkTitulo{
        margin-top: 30%;
    }
    .linkPro{
        margin-top: 3%;
    }
    #cancelarMembros{

        margin-top: 8%;
        margin-left: -5%;
    }
    #cancelarMembros{

        margin-top: 8%;
        margin-left: -1%;
    }
    .imagenscarroussel{
        margin-top: -1%;
        width: 73%;
        height: 90%;
        padding: 2%;
        margin-left: 13%;
    
    }
    #titulocategoria{
        margin-top: 4%;
    }
    #logo{
        margin-top:-5%;
        width: 35%;
        height: 20%;
    }
    #lirio{
        font-size: 65px;
    }
    .boxformularioRelatorio{
        width: 90%;
        margin-left: 2%;
    }
    .modal-content{
    width: 70%;
    margin-left: 10%;
}
#modal_crop .modal-content {
    width: 100%;
    height: 80vh;
    margin-left: 5%;
    display: flex;
    flex-direction: column;
}
.boxformularioMembrosAdm{
    margin-left: 5%;
  
}
#preview_cropped {
    width: 30%;
    height: 10%;
   
}
.atalhos{
    margin-top: 4%;
}

.boxformularioAdm{

    width: 96%;
    
}

}

@media (max-width: 541px){
    .opcoesloja{
    width: 20%;
    
}
    .btn-group{
        
        width: 45%;
        height: 75%;
    }
    .inputSubmit{
        width:95%;
    }
    #formlogin{
        margin-top: -10%;
    }
    .tela-login{
        margin-top: 3%;
        width: 45%;
        height: 25%;
    }
    #lirioLogin{

        font-size: 45px;
    }
    #logoLiriocabecalhoSite{
        margin-left: 80%;
        margin-top: 2%;
         }
         
          #logoLiriocabecalhoMobile{
        width: 17%;
        height: 20%;
         }
         .navbar-toggler{
            margin-top: -8%;
         }
         
    .boxlogin{
        position: absolute;
        top: 40%;
        
        
    }
    .buttonlogin{
        padding: 10px;
        padding-top: 10px;
        height: 30%;
        width: 43%;
        margin-left: 2%;
        font-size: 24px;
    }
    .linkTitulo{
        margin-top: 40%;
    }
    .linkPro{
        margin-top: 3%;
    }
    #BemVindoVendas{
        margin-top: 20%;
    }
    #cancelarMembros{

        margin-top: 8%;
        margin-left: -1%;
    }
    .imagenscarroussel{
        margin-top: 30%;
        width: 70%;
        height: 70%;
        margin: 10px;
        padding: 2%;
        margin-left: 15%;
    
    }
    .imagens{
        width: 296px;
        height: 296px;
        margin: 1px;
        /* max-width: 150px; Ajuste o tamanho das imagens conforme necessário*/
        
    }
    #programacaoSite{
        margin-left: 15%;
      }
    #tabelaSite tr {
        width:250px;
    
    }
     #tabelaMobile tr {
        width:250px;
    
    }
    .imagenscarroussel{
        margin-top: 10%;
        width: 100%;
        height: 90%;
        padding: 2%;
        margin-left: -1%;
    
    }
    #titulocategoria{
        margin-top: 4%;
    }

    #lirio{
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        margin-top: -3%;
        height: top;
        line-height: 80px;
        text-align: center;
        color: #000000;
        font-size: 50px;
    
}
.boxformulariodoSite{
    width: 110%;
}
.boxformularioRelatorio{
        width: 90%;
        margin-left: 2%;
    }
    .modal-body.text-center{
        margin-left: 15%;
    }
    .modal-content{
        width: 100%;
        margin-left: 2%;
    }
    .botaodomodal{
        margin-top: -10.5%;
        margin-left: 50%;
    }
    .modal-footer-cropper{
        background-color: #ccc;
        width: 100%;
        height: 10%;
        font-size: 20px;
       
    }
    video {
        margin-top: 10%;
        margin-left: 3%;
        width: 90%;
        height: 75%;
    }

    #closeModal{
        margin-top: 2%;
        margin-left: 12%;
        width: 72%;
    }
    .atalhos{
        margin-top: 12%;
    }
    .login{

        width: 82%;
    }
    .boxexportarMembros{
    
    width: 60%; 
    
}
}

@media (max-width: 414px){
    #cabecalho{
        display: none;
    }
 #logoLiriocabecalhoMobile{
        width: 26%;
        height: 20%;
    }
 .tela-login{
        margin-top: 3%;
        width: 39%;
        height: 25%;
    }
    .loginsenha{
        margin-top: -10%;
        margin-left: -20%;
    }
    .inputSubmit{
        width: 115%;
    }
   
    
    #titulonapagina{
        margin-top: 30%;
    }
    #logoLiriocabecalhoSite{
        height: 40px ;
        width: 75px;
        }
    .boxlogin{
        position: absolute;
        top: 43%;
        left: 8%;
        
    }
    #logo{
        width: 40%;
        height: 25%;
        margin-top: -8%;
    }
    .buttonlogin{
        padding: 10px;
        padding-top: 10px;
        height: 30%;
        width: 43%;
        margin-left: 2%;
        font-size: 24px;
    }
    .linkTitulo{
        margin-top: 50%;
    }
    #BemVindoVendas{
        margin-top: 20%;
    }
    
    #cancelarMembros{

        margin-top: 8%;
        margin-left: -5%;
    }

    .imagenscarroussel{
        margin-top: 10%;
        width: 100%;
        height: 90%;
        padding: 2%;
        margin-left: -1%;
    
    }
    #titulocategoria{
        margin-top: 4%;
    }
   
    #youtube {
        width: auto;
        height: auto;
        border: none;
        margin-left: 10%;
    }
    .dadoscontato{

        width: 80% ;
        margin-left: 10%;
    }
    .produtos-container {
        margin-top: 0%;   
        margin-left: 2%;
    }
    .modal-body.text-center{
        margin-left: 3%;
    }
    .botaodomodal{
        margin-top: -12.5%;
        margin-left: 42%;
        width: 20%;
        height: 50%;
        
    }
    
    .btn.btn-outline-primary{
        padding: 0.35rem 0.50rem;
        font-size: 0.7rem;
      }
      
      /* Opcional: esconder o texto e mostrar apenas o ícone */
      .btn.btn-outline-primary span {
        display: none;
      }
      
      .btn.btn-outline-primary i.bi {
        margin-right: 0;
        font-size: 1rem;
      }
    
    #programacaoSite{
        margin-left: 15%;
      }
      
   
    
    #cncmodal{
        margin-left: -14%;
      }
      video {
        margin-top: -5%;
        margin-left: -3%;
        width: 100%;
        height: 40%;
    }
    .atalhos{
        margin-top: 12%;
    }
    .login{

        width: 97%;
    }
 
}