@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Bitter:400,700,900&display=swap");

/*
    TODO: Fazer uma borda da cor primaria nos inputs quando recebe foco, na pagina volunteer do template tem exemplo
*/

/*
    verde suave natural #8FBC8F;
    laranja principal #f89d35

    cor degrade azul gov br
    --cor-gradiente-primaria: #0b4778;
    --cor-gradiente-secundaria: #0076d6;

    cor degrade verde marinho
     --cor-gradiente-primaria: #8FBC8F;
    --cor-gradiente-secundaria: #2e8b57;

    cor degrade laranjado
     --cor-gradiente-primaria: #f9c246;
    --cor-gradiente-secundaria: #f7a213;
*/
/*verde*/
:root {
    --cor-primaria: #8FBC8F;
    --cor-gradiente-primaria: #8FBC8F;
    --cor-gradiente-secundaria: #2e8b57;
}

/*laranja*/
/*:root {
    --cor-primaria: #f89d35; 
    --cor-gradiente-primaria: #0b4778;
    --cor-gradiente-secundaria: #0076d6;
}*/


html {
    overflow-x: hidden;
}

body {
    line-height: 1.7;
    font-family: "Montserrat", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    color: #464646;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Bitter", serif;
    font-weight: 900;
    color: #232323;
}

h1, .h1 {
    font-size: 2.5rem;
}

h2, .h2 {
    line-height: 1.6;
    font-size: 26px;
}

h3, .h3 {
    font-size: 22px;
    line-height: 1.6;
}

h4, .h4 {
    font-size: 20px;
    line-height: 30px;
}

h5, .h5 {
    font-size: 18px;
}

h6, .h6 {
    font-size: 14px;
}

p {
    color: #6c757d;
}

.navbar-toggle .icon-bar {
    background: var(--cor-primaria, #f89d35);
}


/*=================================================================
  FIX e outros
==================================================================*/
.hidden {
    display: none;
}

.confirmation-content i,
.error-content i {
    width: 120px;
    height: 120px;
    background: var(--cor-primaria, #f89d35);
    color: #fff;
    display: inline-block;
    border-radius: 100%;
    line-height: 123px;
}
.text-lg {
    font-size: 3.25rem;
    line-height: 1.2;
}

/*bug da navbar ficar por cima do menu ajuda*/
.z-index-auto {
    z-index: auto;
}

.logo-marca-portal {
    padding: 13px 17px;
    margin: 12px 0;
}

    .logo-marca-portal svg {
        width: 28px;
        height: 28px;
    }

        .logo-marca-portal svg path {
            fill: var(--cor-primaria, #f89d35);
        }

    .logo-marca-portal:hover, .logo-marca-portal:focus {
        background-color: var(--cor-primaria, #f89d35) !important;
        color: #fff;
    }

        .logo-marca-portal:hover svg path, .logo-marca-portal:focus svg path {
            fill: #fff;
            transition: all 1.0s ease;
        }


.btn-buscar:hover {
    background-color: var(--cor-primaria);
    color: #fff;
    transition: background-color 0.3s ease;
}

.acessibilidade a {
    border-radius: 50%;
    color: var(--cor-primaria, #f89d35);
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    display: inline-grid;
    padding: 3px;
}

    .acessibilidade a:hover, .acessibilidade a:focus {
        background-color: var(--cor-primaria, #f89d35);
        color: #FFF;
    }

.breadcrumb ul li a {
    color: var(--cor-primaria, #f89d35);
    
    font-weight: 600;
}

    .breadcrumb ul li a:hover {
        color: var(--cor-gradiente-secundaria,#6c757d); 
    }

.link-primario {
    color: var(--cor-primaria, #f89d35);
}
    .link-primario:hover, .link-primario::selection {
        color: var(--cor-gradiente-secundaria,#6c757d);
    }

/*=================================================================
  Titulo Pagina com descrição
==================================================================*/
@media (min-width: 820px) {
    .borda-direita-branca-desktop {
        border-right: solid #fff 5px;
    }
}

/*=================================================================
  botões
==================================================================*/

.btn {
    display: inline-block;
    /*    font-size: 14px;*/
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

    .btn.btn-icon i {
        /*        font-size: 25px;*/
        vertical-align: middle;
        /*        margin-right: 30px;*/
    }

    .btn:focus {
        outline: 0px;
        box-shadow: none;
        background: #f8f9fa !important;
        color: var(--cor-primaria, #f89d35);
        border-color: #ccc;
    }

    .btn.active:focus, .btn:active:focus, .btn:focus {
        outline: 0;
    }

.btn-main {
    background: var(--cor-primaria, #f89d35) !important;
    border-color: var(--cor-primaria, #f89d35);
    color: #fff;
    transition: all 0.2s ease;
}

    .btn-main:hover {
        background: #f8f9fa !important;
        color: var(--cor-primaria, #f89d35);
        border-color: #ccc;
    }

.is-rounded {
    border-radius: 0.25rem !important;
}

/*=================================================================
  Algumas coisas pro tema dark
==================================================================*/

/* Estilos para inputs no tema escuro */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    color: #fff; /* Cor do texto clara */
    border-color: #ccc; /* Cor da borda mais clara */
}
    /* Cor do placeholder no tema escuro */
    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder,
    [data-theme="dark"] select::placeholder {
        color: #ccc; /* Cor do placeholder mais clara */
    }

/* Estilos para botões no tema escuro */
[data-theme="dark"] .button {
    background-color: #fff; /* Cor de fundo escura */
    color: #000; /* Cor do texto clara */
    border-color: #ccc; /* Cor da borda mais clara */
}

/* Estilos para breadcrumb no tema escuro */
[data-theme="dark"] .breadcrumb ul li a,
[data-theme="dark"] .breadcrumb ul li {
    color: #fff; /* Cor do texto clara */
    font-weight: 600;
}

    [data-theme="dark"] .breadcrumb ul li a:hover {
        color: var(--cor-primaria, #f89d35);
    }

    [data-theme="dark"] .breadcrumb ul li.is-active {
        color: #ccc;
    }

[data-theme="dark"] td a:hover {
    color: var(--cor-primaria, #f89d35);
}

[data-theme="dark"] td a {
    color: #fff;
}

[data-theme="dark"] .acessibilidade a:hover, .acessibilidade a:focus {
    background-color: #000;
    color: #FFF;
}

[data-theme="dark"] .acessibilidade a {
    color: #000;
}

/*=================================================================
  Backgrounds colors
==================================================================*/
.bg-dark {
    background: #232323;
}

.bg-gradient {
    background-image: linear-gradient(145deg, rgba(19, 177, 205, 0.95) 0%, rgba(152, 119, 234, 0.95) 100%);
    background-repeat: repeat-x;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.bg-branco {
    background-color: #fff !important;
}

.bg-laranja {
    background-color: var(--cor-primaria, #f89d35);
}

.bg-azul {
    background-color: #1351b4;
}

.bg-azul-claro {
    background-color: #2e8bcc;
}

.bg-azul-gov {
    background-color: #071d41 !important;
}

.bg-gradiente-titulo-pagina {
    background-image: linear-gradient(90deg, var(--cor-gradiente-primaria), var(--cor-gradiente-secundaria));
    background-repeat: repeat-x;
}

.bg-gradiente-esic {
    background-image: linear-gradient(90deg, #f9c246, #f7a213);
    background-repeat: repeat-x;
}

.bg-cinza-gov {
    background-color: #f6f6f6 !important;
}

/*=================================================================
  Cor do texto
==================================================================*/
.text-color-primaria {
    color: var(--cor-primaria, #f89d35)
}

.text-color-azul-escuro {
    color: #071d41;
}

.text-color-preto {
    color: #232323;
}

[data-theme="dark"] .text-color-preto {
    color: #fff;
}

.text-color-laranja {
    color: #f89d35;
}

.text-color-verde {
    color: #168821;
}

.text-color-cinza {
    color: #6c757d;
}


/*=================================================================
  Links
==================================================================*/
a {
    color: #232323;
    text-decoration: none;
}

    a:focus, a:hover {
        color: var(--cor-primaria, #f89d35);
        text-decoration: none;
    }

    a:focus {
        outline: none;
    }

.content-title {
    font-size: 40px;
    line-height: 50px;
}

.page-title {
    padding: 120px 0;
}

    .page-title .block h1 {
        color: #fff;
    }

    .page-title .block p {
        color: #fff;
    }

.page-wrapper {
    padding: 70px 0;
}

a {
    transition: all 0.4s ease 0s;
}


/*=================================================================
  Modal de redirecionamento do site
==================================================================*/
/* Estilos para o modal ocupar quase toda a tela */
#modalRedirecionamento.is-fullheight {
    padding: 10px; /* Adiciona um pequeno espaçamento ao redor do modal */
}

#modalRedirecionamento .modal-content {
    max-width: 95vw; /* Largura máxima de 95% da largura da viewport */
    max-height: 95vh; /* Altura máxima de 95% da altura da viewport */
    width: 95vw; /* Largura forçada */
    height: 95vh; /* Altura forçada */
}

    #modalRedirecionamento .modal-content .box {
        height: 100%; /* Faz a box ocupar toda a altura do modal-content */
        display: flex;
        flex-direction: column; /* Organiza o título, iframe e botões em coluna */
    }

        #modalRedirecionamento .modal-content .box .title {
            margin-bottom: 10px; /* Espaço abaixo do título */
        }

        #modalRedirecionamento .modal-content .box #iframeContainer {
            flex-grow: 1; /* Faz o iframe ocupar o espaço restante */
            border: none; /* Remove a borda padrão do iframeContainer */
        }

        #modalRedirecionamento .modal-content .box .buttons {
            margin-top: 10px; /* Espaço acima dos botões */
        }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #555;
    display: none;
    z-index: 10; /* Garante que o overlay fique acima do iframe */
}
/* - - - - - - */
.section-divider {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
}

@media (max-width: 400px) {
    .p-5 {
        padding: 2rem !important;
    }

    h2, .h2 {
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 36px;
    }

    .text-lg {
        font-size: 2rem;
        line-height: 1.6;
    }

    .text-md {
        font-size: 2rem;
    }
}

@media (max-width: 575px) {
    .p-5 {
        padding: 2rem !important;
    }

    h2, .h2 {
        font-size: 1.3rem;
        font-weight: 600;
        line-height: 36px;
    }
}

@media (max-width: 1023px) {
    h2 {
        line-height: 1.6;
        font-size: 23px;
    }
}

@media (max-width: 1023px) {
    .container {
        max-width: 765px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
}

.container,
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

.column {
    padding: 15px;
}

.columns {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px;
}

    .columns:last-child {
        margin-bottom: -15px;
    }

.list-inline {
    padding-left: 0;
    list-style: none;
}

    .list-inline .list-inline-item {
        display: inline-block;
    }

        .list-inline .list-inline-item:not(:last-child) {
            margin-right: 0.5rem;
        }

.w-100 {
    width: 100%;
    max-width: unset;
}

.ml-auto {
    margin-left: auto !important;
}

.text-white {
    color: #fff;
}

.text-muted {
    color: #6c757d !important;
}

.border-0 {
    border: 0px !important;
}

.border {
    border: 1px solid #dee2e6 !important;
}

.border-top {
    border-top: 1px solid #dee2e6 !important;
}

.border-right {
    border-right: 1px solid #dee2e6 !important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}

.border-left {
    border-left: 1px solid #dee2e6 !important;
}

.is-rounded {
    border-radius: 0.25rem !important;
}




ul.list-styled {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 25px;
}

@media (max-width: 1023px) {
    #navbar {
        padding: 8px 0;
    }

        #navbar .navbar-menu {
            padding: 1rem 0;
        }
}

#navbar .navbar-burger {
    border: 0;
    margin-top: 11px;
    color: #fff;
    background-color: var(--cor-primaria, #f89d35);
    outline: 0;
    height: 2.8rem;
    width: 2.8rem;
}

    #navbar .navbar-burger span {
        left: calc(49% - 7px);
    }

        #navbar .navbar-burger span:nth-child(1) {
            top: calc(50% - 5px);
        }

        #navbar .navbar-burger span:nth-child(2) {
            top: 50%;
        }

        #navbar .navbar-burger span:nth-child(3) {
            top: calc(50% + 5px);
        }

    #navbar .navbar-burger.is-active {
        background-color: #282b40;
    }

#navbar li.navbar-item {
    padding: 0;
}

    #navbar li.navbar-item:last-child .navbar-link {
        padding-right: 0;
    }

@media (max-width: 1023px) {
    #navbar li.navbar-item:last-child .navbar-link {
        margin-right: 17px !important;
    }
}

#navbar .navbar-link {
    font-family: "Montserrat", sans-serif;
    color: #232323;
    background-color: transparent !important;
    font-weight: 600;
    padding: 17px 17px;
    margin: 13px 0;
    transition: all 0.25s ease;
}
/*Tema escuro*/
[data-theme="dark"] #navbar .navbar-link {
    color: #fff;
}

@media (max-width: 1215px) {
    #navbar .navbar-link {
        padding: 30px 14px;
        font-size: 15px;
    }
}

@media (max-width: 1023px) {
    #navbar .navbar-link {
        padding: 10px 14px;
        text-align: center;
    }
}

#navbar .navbar-link:hover, #navbar .navbar-link:focus {
    color: #fff;
    background-color: var(--cor-primaria, #f89d35) !important;
}


.header-top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 14px;
}

@media (max-width: 1023px) {
    .header-top {
        padding: 6px 0;
    }
}

.header-top .top-btn {
    padding: 14px 17px;
    line-height: 40px;
    color: #fff;
}

@media (max-width: 400px) {
    .header-top .top-btn {
        padding: 8px 13px;
        font-size: 11px;
        display: block;
        line-height: unset;
        margin-left: 0 !important;
        margin-top: 10px !important;
    }
}

.header-top .top-btn:hover {
    background: #dee2e6;
}

.header-top .header-top-right a {
    margin: 0 10px;
}

    .header-top .header-top-right a:first-child {
        margin-left: 0;
    }

@media (max-width: 400px) {
    .header-top .header-top-right a:first-child {
        margin-left: 10px;
    }
}

.header-top .header-top-right a:last-child {
    margin-right: 0;
}

.header-top .header-top-info a {
    margin-right: 20px;
    color: #000;
}

@media (max-width: 400px) {
    .header-top .header-top-info a {
        display: block;
        margin-right: 0 !important;
    }
}

.header-top .header-top-info a i {
    color: var(--cor-primaria, #f89d35);
}


@media (max-width: 1023px) {
    .navbar-brand .navbar-item {
        padding-left: 0;
    }
}

.navbar-dropdown {
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in, visibility 0s linear 0.2s, transform 0.2s linear;
    width: 220px;
    padding: 0px;
    border-radius: 0px;
    display: block;
    border: 0;
    z-index: -1;
}

    .navbar-dropdown.align-right {
        left: auto;
        right: -34px;
    }

@media (max-width: 1023px) {
    .navbar-dropdown {
        display: none;
        visibility: visible;
        opacity: 1;
        margin: auto;
        text-align: center;
        background: #f5f5f5;
        width: 250px;
        border: 1px solid rgba(0, 0, 0, 0.03);
        border-bottom: 0;
    }
}

.navbar-link::after {
    display: none !important;
}

.has-dropdown:hover .navbar-dropdown {
    visibility: visible;
    transition: all 0.45s ease 0s;
    opacity: 1;
    z-index: 3;
}

[data-theme="dark"] .navbar-dropdown .navbar-item {
    color: #fff !important;
}

.navbar-dropdown .navbar-item {
    padding: 0.8rem 1.5rem;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

    .navbar-dropdown .navbar-item:hover {
        background: var(--cor-primaria, #f89d35) !important;
        color: #fff !important;
    }

@media (max-width: 1023px) {
    .navbar-dropdown .navbar-item {
        padding: 0.6rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .header-top .header-top-info a:last-child {
        margin-right: 0px;
    }

    .header-top .header-top-info {
        padding: 10px 0px;
    }

    .header-top-right {
        margin-bottom: 12px;
    }

    .dropdown-menu {
        display: none;
        width: 100%;
        text-align: center;
    }

    #navbar .nav-link {
        padding: 15px 10px;
    }
}



/*=================================================================
  Footer - RODAPE
==================================================================*/

.footer {
    padding-bottom: 10px;
    background: #071d41;
}

    .footer .copyright {
        color: rgba(255, 255, 255, 0.7);
    }

        .footer .copyright a {
            font-weight: 600;
        }

.lh-35 {
    line-height: 35px;
}

.footer-widget h4 {
    letter-spacing: 0.5px;
}



.footer-socials {
    margin-top: 20px;
    margin-bottom: 20px;
}

    .footer-socials li a {
        font-size: 18px;
        width: 46px;
        height: 45px;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.06);
        display: inline-block;
        padding-top: 8px;
        color: rgba(255, 255, 255, 0.6);
    }

        .footer-socials li a:hover {
            background: var(--cor-primaria, #f89d35);
            color: #fff;
        }

.footer-menu li {
    margin-bottom: 15px;
}

    .footer-menu li a {
        color: rgba(255, 255, 255, 0.7);
    }

        .footer-menu li a:hover {
            color: var(--cor-primaria, #f89d35);
        }

        .footer-menu li a i {
            color: var(--cor-primaria, #f89d35);
            margin-right: 9px;
        }


@media (max-width: 400px) {
    .footer-socials {
        margin-top: 20px;
    }

        .footer-socials li a {
            margin-left: 0px;
        }
}

@media (max-width: 575px) {
    .footer-socials {
        margin-top: 20px;
    }

        .footer-socials li a {
            margin-left: 0px;
        }
}

@media (max-width: 768px) {
    .footer-socials {
        margin-top: 20px;
    }

        .footer-socials li a {
            margin-left: 0px;
        }
}

/*=================================================================
  CARD Inicio Transparencia
==================================================================*/
.cause-item {
    transition: all 0.4s ease 0s;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

    .cause-item .card-body {
        padding: 5px 40px;
        max-height: 230px;
        min-height: 230px;
        overflow-y: auto;
    }

    .cause-item h3 {
        min-height: 100px;
    }

@media (max-width: 575px) {
    .cause-item .card-body {
        padding: 35px 20px;
    }
}

.cause-item li span {
    font-weight: 700;
}

.cause-item:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border: 1px solid transparent;
}

/*=================================================================
  E-SIC BANNER TOP
==================================================================*/
.blocos-sobrepostos {
    position: absolute; /* Posiciona os blocos sobre o hero */
    bottom: 0; /* Posiciona os blocos na parte inferior do hero */
    left: 0; /* Posiciona os blocos na parte esquerda do hero */
    width: 100%; /* Garante que os blocos ocupem toda a largura do hero */
    transform: translateY(50%); /* Ajusta a posição vertical dos blocos */
}
.relativo {
    position: relative;
}

.feature {
    position: relative;
    padding-top: 50px;
}

    .feature:before {
        position: absolute;
        content: "";
        left: 0px;
        right: 0px;
        top: 0px;
        width: 100%;
        height: 70%;
/*        background: url("../../images/esic.jpg") no-repeat center top;
        background-size: cover;*/
    }

.feature-inner {
    background: #fff;
    padding: 30px;
    border-bottom: 4px solid rgba(0, 0, 0, 0);
}

    .feature-inner i {
        font-size: 50px;
        color: var(--cor-primaria, #f89d35);
    }

    .feature-inner h4 {
        margin-bottom: 0px;
        margin-top: 10px;
    }

    .feature-inner p {
        color: #8c8c8c;
    }

    .feature-inner:hover {
        background-color: #f0f0f0;
        transition: background-color 0.3s ease;
        border-bottom: 4px solid var(--cor-primaria, #f89d35);
    }

        .feature-inner a:hover h4
        {
            color: var(--cor-primaria, #f89d35);
            transition: color 0.3s ease;
        }


/*=================================================================
  CARD ATRICON
==================================================================*/
.team-item img {
    border-radius: 100%;
}

.team-item-content {
    text-align: center;
}

.team-img-hover .team-social li a.facebook {
    background: #6666cc;
}

.team-img-hover .team-social li a.twitter {
    background: #3399cc;
}

.team-img-hover .team-social li a.instagram {
    background: #cc66cc;
}

.team-img-hover .team-social li a.linkedin {
    background: #3399cc;
}

.team-img-hover {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    transform: scale(0.8);
}

    .team-img-hover li a {
        display: inline-block;
        color: #fff;
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        border-radius: 100%;
        text-align: center;
        transform: translateY(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    }

    .team-img-hover:hover li a:hover {
        transform: translateY(4px);
    }

.team-item:hover .team-img-hover {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

/*=================================================================
  PAPEL DA LEI
==================================================================*/
.conteudo-lei-wrapper {
    position: relative;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Organiza os filhos em coluna */
}

.conteudo-principal-com-resumo {
    display: flex;
    flex-direction: column; /* Organiza o contexto e o resumo em coluna */
    width: 100%;
}

.contexto-lei {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px; /* Adiciona um pouco de espaço abaixo do conteúdo */
}

.resumo-lei {
    width: 30%; /* Define a largura máxima do resumo em telas maiores */
    box-sizing: border-box;
    font-style: italic;
    color: #777;
    text-align: right; /* Alinha o texto do resumo à direita dentro de sua largura */
    font-size: 0.9em; /* Opcional: texto menor para o resumo */
    align-self: flex-end; /* Alinha o resumo à direita dentro do container pai */
    padding: 40px 40px 40px 0; /* Adiciona padding à direita para evitar sobreposição com a dobra */
}

/* Efeito de dobra */
.conteudo-lei-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 40px solid #eee;
    border-left: 40px solid transparent;
    width: 0;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
    transform-origin: top right;
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}

.conteudo-lei-wrapper:hover::before {
    transform: rotate(5deg);
}

/* Media query para telas menores (até 768px de largura) */
@media (max-width: 768px) {
    .resumo-lei {
        width: 70%; /* Ocupa 70% da largura em telas menores */
        text-align: left; /* Alinha o texto à esquerda em telas menores para melhor leitura */
        align-self: flex-start; /* Alinha o resumo à esquerda em telas menores */
        padding-right: 0; /* Remove o padding direito em telas menores */
    }
}


/*=================================================================
  Indicador de rolagem para as tabelas
==================================================================*/

.table-container {
    position: relative; /* FUNDAMENTAL para o posicionamento absoluto do indicador */
}

.scroll-indicator {
    width: 50px; /* Largura do indicador */
    height: 100%; /* Ocupa toda a altura do contêiner */
    position: absolute;
    top: 0;
    right: 0; /* Posiciona à direita */
    background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Efeito de fade */
    pointer-events: none; /* Permite interagir com a tabela através do indicador */
    z-index: 10; /* Garante que fique acima da tabela */
    display: none; /* Inicialmente oculto por padrão */
}

    /* Estilo para a imagem dentro do indicador */
    .scroll-indicator::after {
        content: ''; /* Deixe o content vazio */
        display: block;
        position: absolute;
        top: 50%;
        left: 50%; /* Centraliza horizontalmente */
        width: 32px; /* Largura da imagem */
        height: 32px; /* Altura da imagem */
        transform: translate(-50%, -50%); /* Centraliza corretamente */
        background-image: url(../../images/horizontal-scroll.png); /* Caminho para a sua imagem */
        background-size: contain; /* Garante que a imagem caiba dentro do espaço */
        background-repeat: no-repeat; /* Evita repetição da imagem */
        opacity: 0.7;
        animation: bounceRight 1s infinite alternate; /* Animação sutil */
    }

/* Animação para a imagem (movimento horizontal) */
@keyframes bounceRight {
    0% {
        transform: translate(-50%, -50%) translateX(0);
    }

    100% {
        transform: translate(-50%, -50%) translateX(5px);
    }
}

/*
    Media Query: O indicador SÓ aparecerá em telas pequenas (mobile),
    e APENAS se houver rolagem horizontal.
    Ajuste '768px' para o breakpoint mobile que você usa com o Bulma.
*/
@media screen and (max-width: 768px) {
    .table-container.has-scroll-right .scroll-indicator {
        display: block; /* A classe JS 'has-scroll-right' ativa a exibição do indicador */
    }
}



/*# sourceMappingURL=style.css.map */