html,
body {
    overflow-x: hidden;
}

#vacinometro .box-graficos {
    width: 25%;
}

.grafico-1,
.grafico-2,
.grafico-3 {
    margin-right: 10px;
}

.swiper-container {
    padding-right: 44px;
    height: 343px;
}

.swiper-wrapper {
    height: 279px !important;
}

.menus-footer {
    width: calc(20% - 10px);
    margin: 0 5px;
    text-align: center;
}

#social-footer ul li a {
    padding: 0 .25rem !important;
}

#social-footer .svg-inline--fa.fa-w-14 {
    width: .6em;
}

.copyright .hov-cl10 > img {
    height: 45px !important;
    margin: 15px 0 10px 0 !important;
}

.bg-color-1.botao-privacidade-color {
    background-color: #73dc00 !important;
}

#accessibility.bg-dark {
    background-color: #024177 !important;
}

#menu-acessibilidade > .px-4 {
    display: none !important;
}

#menu {
    background: url(https://www.esperanca.pb.gov.br/storage/content/midias/68adfc9ab6461dgemq.png) repeat-x center bottom !important;
    background-size: 100% !important;
    background-position: bottom !important;
    padding-bottom: 13px !important;
}

#menu > .navbar.py-2 {
    padding: 2rem 0 !important;
}

#menu > .navbar > button.navbar-toggler .text-light {
    color: #024177 !important;
}

#navbarNav > ul.navbar-nav > .nav-item > a.nav-link {
    color: #024177 !important;
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
}

#navbarNav .navbar-nav > li:first-of-type > a.nav-link {
  position: relative;
  padding-left: 25px;
}

#navbarNav .navbar-nav > li:first-of-type > a.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* centraliza no link */
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUxMiA1MTIiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICMwMjQxNzc7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI3Ny44LDguNmMtMTIuMy0xMS40LTMxLjMtMTEuNC00My41LDAgTDEwLjMsMjE2LjZjLTkuNiw5LTEyLjgsMjIuOS04LDM1LjFzMTYuNSwyMC4zLDI5LjcsMjAuM2gxNnYxNzZjMCwzNS4zLDI4LjcsNjQsNjQsNjRoMjg4YzM1LjMsMCw2NC0yOC43LDY0LTY0di0xNzZoMTZjMTMuMiwwLDI1LTguMSwyOS44LTIwLjNzMS42LTI2LjItOC0zNS4xYzAsMC0yMjQtMjA4LTIyNC0yMDhaTTI0MCwzMjBoMzJjMjYuNSwwLDQ4LDIxLjUsNDgsNDh2OTZoLTEyOHYtOTZjMC0yNi41LDIxLjUtNDgsNDgtNDhaIi8+PC9nPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#destaques.mt-5 {
    margin-top: 0 !important;
    padding: 6rem 0 4rem 0 !important;
}

#destaques {
    background-image: url(https://www.esperanca.pb.gov.br/storage/content/midias/68ae041a354d3sjhtt.png);
    background-size: cover !important;
    background-position: center center;
}

#destaques > #conteudo {
    background-color: transparent !important;
}

#destaques > #conteudo.d-flex {

}

#destaques > #conteudo > #search {
    position: relative !important;
}

#destaques > #conteudo > #search > div {
    position: relative;
    display: block;
    text-align: center; /* centraliza os textos acima do input */
    margin-bottom: 1rem;
}

#destaques > #conteudo > #search > div::after {
    content: "Esperança, todo tempo tem trabalho";
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 0.25rem;
    width: 100% !important;
    position: absolute;
    left: 50% !important;
    top: -15px;
    transform: translateX(-50%);
}

#destaques > #conteudo > #search > div::before {
    content: "O que você está procurando?";
    width: 100%;
    font-size: 1.75rem;
    font-weight: 900;
    color: #fff;
}

#destaques > #conteudo > #search > div #custom-search-input {
    width: 540px !important;
    margin-top: 15px !important;
}

#destaques > #conteudo > #search .input-group.input-group-sm > .form-control {
    height: 48px !important;
}

#destaques > #conteudo > #search .input-group.input-group-sm > .form-control::placeholder {
    color: transparent;
}

#destaques > #conteudo > #search .input-group.input-group-sm {
    position: relative;
    visibility: ;
}

#destaques > #conteudo > #search .input-group.input-group-sm::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIwIDIwIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMjMxZjIwOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjguNy41LCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMS4yLjAgQnVpbGQgMTc2KSAgLS0+CiAgPGc+CiAgICA8ZyBpZD0iTGF5ZXJfMSI+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE4LjUsMjBjLS40LDAtLjgtLjItMS4xLS41bC00LjEtNC4xYy0xLjQsMS0zLjEsMS41LTQuOCwxLjVDMy44LDE2LjksMCwxMy4xLDAsOC41UzMuOCwwLDguNSwwczguNSwzLjgsOC41LDguNS0uNSwzLjQtMS41LDQuOGw0LjEsNC4xYy4zLjMuNC43LjQsMS4xLDAsLjgtLjcsMS41LTEuNSwxLjVaTTguNSwzLjFjLTMsMC01LjQsMi40LTUuNCw1LjRzMi40LDUuNCw1LjQsNS40LDUuNC0yLjQsNS40LTUuNC0yLjQtNS40LTUuNC01LjRaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=") no-repeat center center;
    background-size: contain;
    pointer-events: none;
}

#destaques > #conteudo > #search .input-group.input-group-sm::before {
    content: "O que você deseja buscar no portal?";
    position: absolute;
    z-index: 2;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #212529 !important;
    font-size: 0.8rem;
}

#destaques > #conteudo > #search .input-group.input-group-sm > .form-control {
    padding-left: 35px;
}

#destaques > #conteudo > #search > div #custom-search-input #button-busca {
    background-color: #0095df; /* azul padrão bootstrap */
    color: #fff;
    border: none;
    border-radius: .25rem;
    padding: .375rem .75rem;
    font-size: .9rem;
    font-weight: 400;
    position: relative;
    z-index: 3;
    top: 5px;
    right: 5px;
    height: 38px !important;
    cursor: pointer;
}

/* esconde o ícone dentro do botão */
#destaques > #conteudo > #search > div #custom-search-input #button-busca i,
#destaques > #conteudo > #search > div #custom-search-input #button-busca svg {
  display: none !important;
}

/* injeta o texto "Buscar" */
#destaques > #conteudo > #search > div #custom-search-input #button-busca::after {
  content: "Buscar";
}

#transparencia,
#transparencia a { 
    background-color: transparent !important;
}

#transparencia .container-xl { 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#category-news.mt-5,
#transparencia.mt-5 { margin-top: 0 !important; }

#banners {
    width: auto !important;
}

#banners figure a img.img-fluid {
    width: 230px !important;
}

#btn-banners {
    position: relative;
    font-size: 0;
}

#btn-banners::after {
    content: "Ver todas as Opções";
    font-size: 1rem; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

#news .dropdown-divider {
    display: none !important;
}

#news > h4 {
    font-size: 0 !important; /* truque: zera a fonte do texto original */
}

#news > h4::after {
    content: "Últimas Notícias";
    font-size: 1.5rem;
    color: inherit;
}

#news > ul.list-unstyled > li {
    margin-bottom: 20px !important;
}

#news > ul.list-unstyled > li > a {
    /* width: 30%;    */
}

#news > ul.list-unstyled > li > a > div{
    border-radius: .25rem !important;
}

#news a.text-secondary {
    font-size: 0 !important; /* esconde o texto original */
    position: relative;
}

#news a.text-secondary::after {
    content: "Ver mais Notícias";
    font-size: 12px; 
    font-weight: 500;
    text-transform: uppercase;
    padding: 2px 10px 2px 10px !important;
    color: #024177 !important;
    border: 1px solid #024177 !important;
    border-radius: .25rem !important;
}

#news a.text-secondary.ms-auto {
    margin-left: 0 !important;
    margin-bottom: 30px !important;
}

#category-news > .container-xl.d-flex.flex-wrap .row.w-100.py-3 > .text-uppercase.col-12.mb-4 {
    font-size: 0 !important; /* esconde o texto original */
    position: relative;
}

#category-news > .container-xl.d-flex.flex-wrap .row.w-100.py-3 > .text-uppercase.col-12.mb-4::after {
    content: "Serviços para o cidadão";
    font-family: 'OR' !important;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: inherit;
    display: block;
    color: #024177 !important;
}

#category-news > .container-xl.d-flex.flex-wrap .row.w-100.py-3 > .col-xl-2.col-md-3.col-sm-4.col-xs-2.py-3 > .text-dark {
    background-color: #024177 !important;
    border-radius: .25rem !important;
    color: #fff !important;
}

#category-news #super-banner-1.col-md-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
} 

#rodape.bg-color-1 {
    background-image: url(https://www.esperanca.pb.gov.br/storage/content/midias/68ae03d5a5035e9uth.png) !important;
    color: #fff !important;
    background-size: 555px 73px !important;
    background-position: right bottom !important;
    background-color: #024177 !important;
    background-repeat: no-repeat !important;
}

#menu-footer .menus-footer .txt-color-dinamic-1 {
    color: #fff !important;
}

#menu-footer .menus-footer h4.txt-color-dinamic-1 {
    color: #0095df !important
}

#rodape.bg-color-1 .copyright {
    background-color: transparent !important
}

#logo-footer {
    padding: 20px 0 !important;
}

#endereco-footer { 
    border: 1px solid #0095df !important;
    border-radius: 0 !important;
}

#endereco-footer .d-flex.justify-content-center.align-items-center.w-100 {
    padding: 0 1rem;
}

#endereco-footer .footer-icon,
#endereco-footer .ion,
#endereco-footer .svg-inline--fa.fa-w-16 {
    fill: #0095df !important;
    color: #0095df !important;
}

.copyright a[href="#cabecalho"] {
    position: relative;
    font-size: 0;
    text-decoration: none;
}

.copyright a[href="#cabecalho"]::after {
    content: "Topo";
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    display: inline;
}

#breadcrumbs {
    /* background-color: #0095df !important; */
    /* background-color: #024177 !important; */
    background: #fff url(https://www.esperanca.pb.gov.br/storage/content/midias/68adfc9ab6461dgemq.png) repeat-x center bottom !important;
    background-size: 100% 1px !important;
    background-position: bottom !important;
    margin-bottom: 35px !important;
    color: #0095df !important;
    overflow: hidden;
}

#breadcrumbs .bg-secondary {
    background-color: transparent !important;
}

#breadcrumbs > .bg-secondary li.breadcrumb-item::before {
    opacity: 0.5 !important;
    color: #024177 !important;
}

#breadcrumbs > .bg-secondary li.breadcrumb-item {
    color: #024177 !important;
}

#breadcrumbs > .bg-secondary a {
    color: #0095df !important;
}

#breadcrumbs .bg-secondary .breadcrumb {
    margin-bottom: 0 !important;
}

@media (max-width: 1399px) {
    #logo img {
        max-height: 110px !important;
    }
    /* #search{
        width: 190px;
    } */
}

@media (max-width: 780px) {
    #ano {
        padding-left: 1.5% !important;
    }
    #filters {
        text-align: right;
    }
}

@media (max-width: 1199px) {
    header .navbar-nav,
    header .navbar-nav .dropdown-menu {
        text-align: center;
    }
    #search,
    #custom-search-input {
        width: 100%;
    }
    #vacinometro {
        flex-wrap: wrap;
    }
    #vacinometro img,
    #vacinometro #box-data {
        width: 100%;
    }
    #home-news #banners {
        top: calc(100% + 40px);
        left: 0;
        padding: 0 0.75rem;
        width: 100% !important;
        flex-wrap: wrap;
    }
    #home-news #carousel-news,
    #home-news #more-popular {
        width: 50% !important;
    }
    #banners .multi-collapse {
        width: 100%;
    }
    #banners .multi-collapse .card {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    #banners .figure {
        min-width: 50%;
        text-align: center;
    }
    .menus-footer {
        width: calc(33.33% - 10px);
    }
}

@media (max-width: 991px) {
    #accessibility #ancoras,
    #accessibility #menu-acessibilidade {
        width: 100%;
        justify-content: center;
        margin: 5px 0;
    }
    #menu .navbar-collapse {
        margin-bottom: 15px;
    }
    #carouselExampleCaptions {
        width: 100% !important;
    }
    .noticias-destaques {
        width: 100% !important;
        margin-top: 8px;
    }
    #transparencia .container-xl.d-flex {
        justify-content: center;
    }
    #transparencia .container-xl .position-relative {
        width: 100% !important;
    }
    #super-banners .container-xl div {
        width: 100% !important;
    }
    #endereco-footer {
        flex-direction: column;
    }
    #endereco-footer div {
        margin: 5px 0;
    }
}

@media (max-width: 767px) {
    #vacinometro .titulos {
        flex-direction: column;
    }
    #vacinometro #graficos-covid {
        flex-wrap: wrap;
    }
    #vacinometro .box-graficos {
        width: calc(50% - 10px);
    }
    .grafico-1,
    .grafico-2 {
        margin-bottom: 10px;
    }
    .grafico-1,
    .grafico-3 {
        margin-right: 10px;
    }
    #home-news #carousel-news,
    #home-news #more-popular {
        width: 100% !important;
    }
    #banners .figure {
        min-width: 100%;
    }
    #transparencia .container-xl .position-relative {
        width: 100% !important;
        font-size: 10px;
    }
    #transparencia .container-xl .swiper-container {
        height: 270px !important;
        padding-right: 0;
    }
    #transparencia .swiper-wrapper {
        height: 210px !important;
    }
    #category-news #news li {
        width: 49% !important;
        margin-bottom: 25px;
    }
    #category-news #news li:last-child {
        margin-bottom: 0px;
    }
    .menus-footer {
        width: calc(50% - 10px);
    }
}

@media (max-width: 575px) {
    #accessibility #ancoras,
    #accessibility #menu-acessibilidade {
        font-size: 8px !important;
    }
    #logo img {
        max-height: 80px !important;
    }
    #carouselExampleCaptions,
    #carouselExampleCaptions .carousel-item,
    .noticias-destaques {
        height: 340px !important;
    }
    #vacinometro #graficos-covid {
        flex-wrap: wrap;
    }
    #vacinometro .box-graficos {
        width: 100%;
    }
    .box-graficos {
        margin: 0;
    }
    .grafico-1,
    .grafico-2,
    .grafico-3 {
        margin-bottom: 10px;
    }
    #home-news #more-popular {
        max-height: none !important;
    }
    #category-news #news li {
        width: 100% !important;
    }
    .menus-footer {
        width: 100%;
        margin-top: 10px;
    }

    #destaques > #conteudo > #search > div #custom-search-input {
        width: 350px !important;
        display: table;
        margin: 0 auto;
    }

    .super-banner { height: auto !important; }
    
}