/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.tr_out {
    background-color: #a3a3a3;
}

/*=====================Area Restrita=======================*/
.div_bord {
    border: 2px solid #cb0606;
    border-radius: 20px;
    /*margin-left: 10px;*/
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3); /* Sombra mais intensa */
    /*padding: 1px;*/ /* Adicionado preenchimento para espaçamento interno */
    transition: box-shadow 0.3s ease; /* Transição suave para o efeito hover */
    min-height: 300px;
}

.div_bord_rx {
    border: 2px solid #f404ad;
    border-radius: 20px;
    padding:5px;
    /*margin-left: 10px;*/
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3); /* Sombra mais intensa */
    /*padding: 1px;*/ /* Adicionado preenchimento para espaçamento interno */
    transition: box-shadow 0.3s ease; /* Transição suave para o efeito hover */
    /*min-height: 300px;*/
}

    /*=========================Edit==========================*/
    .ImgVisivelCRUD {
    max-height: 300px;
    max-width: 300px;
    text-align: center;
}


/*=======================Jquery UI==============================*/
.ui-datepicker {
    background: #939393;
    min-width: 300px;
}

.ui-datepicker-calendar {
    margin: 5px;
    text-align: center;
}

.ui-state-default {
    margin: 3px;
    padding: 10px; /* Adicione um pouco de preenchimento para espaçamento */
    border: none; /* Remova a borda padrão */
    border-radius: 5px; /* Adicione bordas arredondadas */
    font-family: sans-serif; /* Altere a fonte, se desejar */
}

.LogoHomeLayout {
    transition: opacity 0.5s ease-in-out;
}

.img_min {
    width: 50%;
    border-radius: 15px;
    margin: 3px;
}

.img_Inclina {
    transform: skew(-20deg); /* Inclina a imagem 10 graus */
}


.img_min_pq {
    width: 25%;
    border-radius: 15px;
    margin: 5px;
}

.img_min_top {
    width: 50%;
    border-radius: 15px;
    margin-top: -25%;
    border: solid 2px white;
}

.img_min_top_Dir {
    width: 15%;
    border-radius: 15px;
    margin-top: -8%;
    border: solid 2px white;
    float: right;
    margin-right: 5%;
}

@media (max-width: 768px) {
    .img_min_top {
        width: 25%;
        border-radius: 15px;
        margin-top: -10%;
        border: solid 2px white;
    }
}

@media (max-width: 480px) {
    .img_min_top {
        width: 25%;
        border-radius: 15px;
        margin-top: -15%;
        border: solid 2px white;
    }
}

.img_min_Dir_Pq {
    width: 15%;
    border-radius: 15px;
    /*margin-top: -8%;*/
    border: solid 2px white;
    float: right;
    margin-right: 25%;
}

.Aprov-Verd {
    border: 5px solid #007bff;
    margin-top: 50px;
    background-color: #96c6fad7;
    color: white;
}

.img_max {
    margin-top: 10px;
    width: 99%;
    border-radius: 10px;
}

.img_Perfil_gg {
    width: 100%;
    border-radius: 100%;
    border: 2px solid #cb0606;
}

.img_Perfil_g {
    width: 75%;
    border-radius: 100%;
    border: 2px solid #cb0606;
}

.img_Perfil {
    width: 50%;
    border-radius: 100%;
    border: 2px solid #cb0606;
}

.img_Perfil_pq {
    width: 25%;
    border-radius: 100%;
    border: 2px solid #cb0606;
}

.minha-div_Div {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #ffffff, #f0f0f0); /* Degrade mais sutil com menos cinza */
    border-radius: 10px;
}

.minha-div_perg {
    border-radius: 20px;
    border: solid 2px #cb0606;
}

.minha-div {
    background: linear-gradient(to bottom, #ffffff, #f0f0f0); /* Degrade mais sutil com menos cinza */
    border-radius: 10px;
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3); /* Sombra mais intensa */
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 3px; /* Adicionado preenchimento para espaçamento interno */
    transition: box-shadow 0.3s ease; /* Transição suave para o efeito hover */
}

    .minha-div:hover {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4); /* Sombra mais intensa no hover */
    }


.H_spac {
    margin: 15px;
    word-wrap: break-word; /* Adiciona a quebra de palavras */
}


.Edit_Dire {
    margin-right: 0;
    word-wrap: break-word; /* Adiciona a quebra de palavras */
}

/*============= Home =======================*/
.FontAwesome_GH {
    color: #cb0606;
    font-size: 200px;
}

.FontAwesome_pq {
    color: #cb0606;
    font-size: 100px;
}

.FontAwesome_pq_50 {
    color: #cb0606;
    font-size: 50px;
}

.FontAwesome_pq_25 {
    color: #cb0606;
    font-size: 25px;
}

.container-to-center {
    display: flex; /* Makes the container a flex container */
    justify-content: center; /* Horizontally centers flex items */
    align-items: center; /* Vertically centers flex items (if container has height) */
    gap: 10px; /* Adds space between your icons */
}

.text-min{
    min-height:60px;
}


.menuH {
    margin-right: 1px;
}

/*a.botao {
    display: inline-block;*/ /* Transforma o link em um bloco inline */
    /*padding: 10px 20px;*/ /* Adiciona espaçamento interno */
    /*background-color: #cb0606;*/ /* Cor de fundo */
    /*color: white;*/ /* Cor do texto */
    /*text-decoration: none;*/ /* Remove a decoração padrão do link */
    /*border-radius: 5px;*/ /* Adiciona bordas arredondadas */
    /*border: none;*/ /* Remove a borda padrão */
    /*cursor: pointer;*/ /* Muda o cursor para um ponteiro */
    /*min-width: 230px;
    margin: 1px;
    text-align: left;
}

    a.botao:hover {
        background-color: #0d6efd;*/ /* Cor de fundo ao passar o mouse */
        /*color: white;*/ /* Cor do texto */
    /*}*/
.container-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

a.botao {
    display: inline-block;
    padding: 10px 20px;
    background-color: #cb0606;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    min-width: 230px; /* Seu padrão */
    text-align: left;
    margin:1px;
    transition: 0.3s;
}

    a.botao:hover {
        background-color: #0d6efd;
        color: white;
    }

.btn {
    border: 1px solid #16e722;
    margin: 2px;
}
    .btn:hover {
        border: 1px solid #16e722;
        margin: 2px;
    }


.btn-w {
    border: 1px solid #16e722;
    margin: 2px;
    border-radius: 15px;
    background-color: #e4e1e1;
    color: #cb0606;
}

    .btn-w:hover {
        border: 1px solid #16e722;
        margin: 2px;
        border-radius: 15px;
        background-color: #e4e1e1;
        color: #cb0606;
    }


/*.icone-link {
    display: inline-block;
    padding: 20px;
    border-radius: 5px;*/
    /*background-color: #f0f0f0;*/
    /*transition: background-color 0.3s ease;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);*/ /* Sombra suave */
    /*border-radius: 8px;*/ /* Bordas arredondadas */
/*}

    .icone-link:hover {
        background-color: #e0e0e0;
    }*/


.icone-link {
    display: inline-block;
    padding: 20px;
    border-radius: 8px;
    transition: background 0.5s ease;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
/*    background: #f1f1f1;
    border: 4px 4px 8px solid #e6e6e6;*/
}

    /* Explosão de cores ao passar o mouse */
    .icone-link:hover {
        background: linear-gradient( 270deg, #ff6ec4, #7873f5, #4ade80, #facc15, #f87171 );
        background-size: 1000% 1000%;
        animation: explosion 3s ease infinite;
    }

/* Animação para movimentar o gradiente */
@keyframes explosion {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/*=============== menu Home ======================*/
.grid-outros {
    display: flex;
    flex-direction: column; /* Organiza os botões em coluna */
    gap: 10px; /* Espaçamento entre os botões */
}

.link-outros {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Mantém o preenchimento para botões grandes */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #9d0b0e;
    font-size: 1.1em; /* Ajusta o tamanho da fonte */
    transition: background-color 0.3s ease;
}

    .link-outros:hover {
        background-color: #f0f0f0;
    }

    .link-outros i {
        margin-right: 10px;
        font-size: 1.5em; /* Ajusta o tamanho dos ícones */
    }

.spanBotao {
    margin-left: 5px;
}
/*=============================== eventos  =====================================*/
.evento-container {
    padding: 20px;
}

.evento-titulo {
    color: #9d0b0e;
    margin-bottom: 20px;
}

.evento-acoes {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.evento-botao {
    padding: 10px 20px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.evento-imagem {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

.evento-detalhes {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    margin-bottom: 20px;
}

.evento-data {
    text-align: center;
}

.evento-censura {
    width: 50px;
    height: 50px;
}

.evento-informacoes {
    padding: 0 20px;
}

.evento-atracoes, .evento-mesas {
    margin-bottom: 20px;
}

.atracoes-grid, .mesas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}

.atracao-card, .mesa-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

    .atracao-card img, .mesa-card img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
    }

.mesa-link {
    color: #0d6efd;
    text-decoration: none;
}

.Div_back {
    background-image: linear-gradient(141deg, #fff 0%, #fff 40%, #939393 100%);
    color: #9d0b0e;
    box-shadow: 1px 2px 2px 4px #d2d6d3;
    border-radius: 20px;
    margin-top: 20px;
}

.Txt_top {
    padding-top: 20px;
}

.Txt_bottom {
    padding-bottom: 20px;
}

/*================ compartilhador ==============*/
/*.compartilhar-lateral {
    position: fixed;
    left: 20px;*/ /* Ajuste a posição horizontal conforme necessário */
/*top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
   
}*/
.compartilhar-lateral {
    position: fixed;
    left: 20px; /* Posição padrão */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 1000; /* Garante que fique acima de outros elementos */
}

.conteudo-principal {
    /* Outros estilos do seu conteúdo principal */
    /*  margin-left: 0;*/ /* Margem esquerda padrão */
}

/* Para telas menores que 768px (tablets e celulares) */
@media (max-width: 768px) {
    .conteudo-principal {
        margin-left: 20%; /* Adiciona uma margem esquerda para afastar o conteúdo */
    }

    /* Opcional: Ajustar a posição da barra lateral em telas menores */
    .compartilhar-lateral {
        left: 5%;
        width: 5%; /* Ajuste a largura conforme necessário */
    }

    .container-botoes {
        display: flex;
        justify-content: space-between; /* Distribui os 4 botões na linha */
        gap: 5px;
    }

    a.botao {
        min-width: 0; /* Remove a largura mínima de 230px */
        flex: 0 1 calc(25% - 5px); /* Define 4 por linha (25%) */
        padding: 15px 0; /* Ajusta o respiro interno */
        text-align: center; /* Centraliza o ícone */
        border-radius: 8px;
        width: 22%;
        font-size: 50px;
        
    }


        /* Esconde o texto, deixando apenas o ícone */
        a.botao span {
            display: none;
        }

        /* Aumenta um pouco o ícone no mobile para facilitar o clique */
        /*a.botao i {
            font-size: 50px;
        }*/
}

/* Para telas ainda menores que 480px (celulares menores) */
@media (max-width: 480px) {
    .conteudo-principal {
        margin-left: 15px; /* Ajusta a margem para telas menores, se necessário */
    }

    /* Opcional: Ajustar ainda mais a posição da barra lateral */
    .compartilhar-lateral {
        left: 5px;
        width: 5%; /* Ajuste a largura conforme necessário */
    }


   

}

.compartilhar-link {
    margin-bottom: 10px;
    color: #cb0606; /* Cor dos ícones */
    font-size: 24px;
    text-decoration: none;
}

    .compartilhar-link:hover {
        color: #007bff; /* Cor dos ícones ao passar o mouse */
    }
/*============================== Colunas =======================================*/
.divcoluna {
    min-height: 550px;
    max-height: 550px;
}


/*============= Modal ============*/
.transp {
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden; /* Para garantir que qualquer conteúdo interno não vaze */
}

.ZTime {
    z-index: 1075;
}



/*====================  tooltips =========================*/
.toolTemp {
    background-color: #cb0606;
    opacity: 0.8;
    color: white;
    border: 1px solid #ccc;
    padding: 20px;
    max-width: 300px;
    border-radius: 20px;
}

/*================ Roda Pé ================*/
.fieldset-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 2px 2px 4px #d2d6d3;
    border-radius: 20px;
}

    .fieldset-border .legend-border {
        font-size: 1.2em !important;
        text-align: left !important;
        width: auto;
        padding: 0 10px;
        border-bottom: none;
    }

/*============== Arcodion ==================*/

.card-header {
    background-image: linear-gradient(to bottom, #fff, #e7e7e7);
}

    .card-header:hover {
        background-image: linear-gradient(to bottom, #e7e7e7, #939393);
    }


.btn-meu {
    color: #cb0606;
    border: 0;
    background-color: transparent;
}

.card-body {
    background-image: linear-gradient(137deg, #fff, #939393); /* Exemplo com ângulo de 25 graus */
}

/*============== google propaganda ==================*/
.verme{
    color:red;
}

/*============== Arcondion ==================*/

/* Container Principal */
.rpg-accordion-container {
    width: 100%;
    max-width: 800px;
    margin: 20px 0;
}

/* Item Individual */
.rpg-item {
    background: #fff;
    border: 2px solid #f404ad; /* Vermelho do seu sistema */
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

/* Cabeçalho Clicável */
.rpg-header {
    background-color: #f8f9fa;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
}

    .rpg-header:hover {
        background-color: #eee;
    }

/* Estilo do Ícone e Texto no Header */
.header-content {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: bold;
    color: #333;
}

    /* RESOLVE O PROBLEMA DO ÍCONE (Image 1) */
    .header-content i.icone {
        font-size: 40px !important; /* Tamanho grande desejado */
        width: 1em;
        height: 1em;
    }

/* Conteúdo Oculto */
.rpg-content {
    display: none; /* Começa fechado */
    background-color: #fff;
    border-top: 1px solid #eee;
}

.inner-padding {
    padding: 20px;
}

/* RESOLVE O PROBLEMA DO TEXTO ENCAVALADO (Image 3) */
.painel-status-custom {
    border: 3px solid #ff00ea; /* Rosa da imagem */
    border-radius: 15px;
    padding: 20px;
    background-color: #fff;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

/* Rotação da seta ao abrir */
.rpg-item.active .seta {
    transform: rotate(180deg);
}

.seta {
    transition: transform 0.3s;
}


/*=====================  ============================*/

.centralizado{
    text-align:center;
}

.textarea {
min-height:350px;
}

/*=======================  =========================*/
.Revist-viewport {
    width: 100%;
    height: 85vh;
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

#Mythos-book {
    width: 900px; /* Largura total (2 páginas de 450px) */
    height: 600px;
}

/* Estilo das páginas */
.page {
    width: 450px;
    height: 600px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

    .page img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Controles de navegação */
.Revist-controls {
    text-align: center;
    padding: 10px;
    background: #111;
    color: #fff;
}

@media (max-width: 768px) {
    #Revist-viewer {
        width: 100%;
        height: 100%;
    }

    .Revist-toolbar span {
        display: none;
    }
}

/*===*/