html {
    scrollbar-color: var(--web-primary-100) var(--web-neutral-200);
}

body {
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

header, footer {
    z-index: 1;
}

header {
    background: var(--web-primary-100);
    color: var(--web-neutral-0);
    padding: 24px 80px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

#titulo-layout {
    color: var(--web-neutral-0);
    font-size: 24px;
    line-height: 18px;
    font-weight: normal;
    margin: 0;
}

#logo-cassi {
    display: flex;
    gap: 8px;
    align-items: end;
}

#btn-menu-lateral {
    display: none;
    cursor: pointer;
    margin-bottom: -8px;
}

#btn-menu-lateral .bi {
    font-size: 24px;
    line-height: 24px;
}

#btn-menu-lateral input {
    display: none;
}

#tela-index {
    flex-grow: 1;
    padding: 24px 80px;
    background: var(--web-neutral-100);
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr;
    gap: 32px;
    position: relative;
    overflow-x: hidden;
}

#tela-index:has(.erro) {
    display: flex;
    align-items: center;
    justify-content: center;
}

body:has(.erro) #btn-menu-lateral {
    display: none;
}

footer {
    background: var(--web-primary-100);
    color: var(--web-neutral-0);
    padding: 40px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#texto-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#texto-footer h4 {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
}

#texto-footer p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
}

#links-footer {
    display: flex;
    align-items: center;
    gap: 24px;
}

#links-footer > a {
    text-decoration: none;
}

search {
    grid-column: span 2;
}

#ul-dominio-pesquisa {
    list-style: none;
    padding: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--intranet-neutral-400);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 3px 4px 0 rgb(from var(--web-neutral-1000) r g b / 10%), 0 1px 2px 0 rgb(from var(--web-neutral-1000) r g b / 10%);
    transition: .1s;
}

#ul-dominio-pesquisa li a {
    border-top: 1px solid var(--web-neutral-400);
    background: var(--web-neutral-0);
    color: var(--web-neutral-700);
    font-size: 14px;
    line-height: 22px;
    font-weight: normal;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 8px 16px;
    outline: transparent;

}

#ul-dominio-pesquisa li a:where(:hover, :focus) {
    background: var(--web-neutral-200);
    color: var(--web-primary-100);
}

#ul-dominio-pesquisa li .artigos-topicos-vinculados {
    color: var(--web-neutral-700);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

#ul-dominio-pesquisa li a:where(:hover, :focus) .artigos-topicos-vinculados {
    color: var(--web-primary-100);
}

.web-container-input > #ul-dominio-pesquisa {
    position: absolute;
    top: 0;
}

#ul-dominio-pesquisa:empty {
    display: none;
}

.web-container-input:has(>#ul-dominio-pesquisa:not(:empty)) .web-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.web-container-input > #ul-dominio-pesquisa:not(:empty) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

body:has(#ul-dominio-pesquisa:not(:empty)) #web-backdrop {
    display: block;
}

body:has(#ul-dominio-pesquisa:not(:empty)) #form-busca :where(input, ul, button) {
    z-index: 11;
}

body:has(#ul-dominio-pesquisa:not(:empty)) #form-busca .bi {
    z-index: 12;
}

body:has(#ul-dominio-pesquisa:not(:empty)) input {
    border-color: var(--web-primary-100);
    box-shadow: 0 0 0 1px var(--web-primary-100);
}

#nav-menu {
    background: var(--web-neutral-100);
}

#nav-menu ul {
    list-style: none;
    padding: 0;
}

#nav-menu a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    background: var(--web-neutral-100);
    outline: transparent;
}

#nav-menu a:where(:hover,:focus) {
    background: var(--web-neutral-200);
}

#nav-menu a[aria-current=page] {
    background: var(--web-neutral-200);
    font-weight: bold;
}

.a-menu-categoria {
    padding: 16px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--web-neutral-300);
    color: var(--web-primary-100);
}

.a-menu-categoria[aria-expanded=true] {
    border-bottom-color: transparent;
}

.a-menu-categoria > .bi {
    font-size: 16px;
    line-height: 16px;
}

.a-menu-categoria[aria-expanded=false] > .bi {
    transform: rotate(-90deg);
}

.li-menu-categoria:has([aria-expanded=false]) .ul-menu-topico {
    display: none;
}

.li-menu-categoria:last-child:has([aria-expanded=true]) .ul-menu-topico {
    border-bottom: 1px solid var(--web-neutral-300);
}

.ul-menu-topico {
    overflow-y: auto;
    max-height: 400px;
    height: 100%;
}

.a-menu-topico {
    padding: 16px;
    color: var(--web-primary-0);
    font-size: 14px;
}

#nav-breadcrumb {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

#nav-breadcrumb a {
    font-weight: bold;
    text-decoration: none;
    color: var(--web-neutral-700);
}

#nav-breadcrumb a:hover {
    text-decoration: underline;
}

#nav-breadcrumb a:last-child {
    color: var(--web-primary-100);
}

#nav-breadcrumb .bi {
    font-size: 16px;
    line-height: 16px;
    color: var(--web-neutral-800);
}

.h-conteudo {
    color: var(--web-neutral-900);
    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
}

.p-conteudo {
    margin-top: 16px;
    color: var(--web-neutral-900);
    font-size: 16px;
    line-height: 24px;
}

.p-nenhum-conteudo {
    margin-top: 16px;
    color: var(--web-neutral-700);
    font-size: 16px;
    line-height: 24px;
}

.titulo-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
}

.descricao-conteudo {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--web-neutral-300);
    color: var(--web-neutral-900);
    font-size: 16px;
    line-height: 24px;
    margin-top: 16px;
}

.ul-lista-conteudo {
    list-style: none;
    padding: 0;
}

.ul-lista-conteudo li {
    margin-top: 16px;
}

.ul-lista-conteudo-2-colunas:has(>:nth-child(n+10)) {
    columns: 2;
}

.titulo-lista-conteudo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.titulo-lista-conteudo a {
    font-size: 12px;
    line-height: 24px;
}

#feedback {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 0 auto;
    width: fit-content;
}

#feedback:not(form) {
    padding: 16px;
    border-radius: 4px;
    border: 1px solid var(--web-neutral-300);
}

#feedback :where(label,p) {
    color: var(--web-primary-100);
    font-size: 16px;
    line-height: 24px;
}

#container-btn-feedback-artigo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-topico {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--web-neutral-200);
    border: 1px solid var(--web-neutral-300);
    border-radius: 4px;
    padding: 16px;
    margin-top: 16px;
}

.card-topico > h3 {
    color: var(--web-primary-100);
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
}

.card-topico > div {
    color: var(--web-neutral-1000);
    font-size: 14px;
    line-height: 22px;
}

.card-topico > a {
    align-self: end;
}

.card-topico > a:not(:hover) {
    text-decoration: none;
}

#titulo-pesquisa {
    color: var(--web-neutral-900, #2D2D2D);
    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
    margin-top: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--web-neutral-300);
}

.ul-lista-pesquisa {
}

.ul-lista-pesquisa li {
    margin-top: 24px;
}

.ul-lista-pesquisa a:first-child {
    display: inline-block;
    width: 100%;
}

.ul-lista-pesquisa :where(a:not(:first-child),.bi) {
    color: var(--web-neutral-800);
}

.ul-lista-pesquisa a:not(:first-child):hover {
    color: var(--web-neutral-700);
}

.artigos-topicos-vinculados {
    color: var(--intranet-neutral-800);
    font-size: 14px;
    line-height: 22px;
}

#web-toast {
    z-index: 2;
    top: 0;
    right: 80px;
    transform: translateX(calc(100% + 80px));
}

.conteudo-mais-vistos {
    height: 60px;
    position: relative;
    overflow: hidden;
}

.conteudo-mais-vistos::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: linear-gradient(to top, var(--web-neutral-200), transparent);
}

@media (max-width: 991px) {
    header {
        padding: 24px;
    }

    #titulo-layout {
        font-size: 16px;
        line-height: 11px;
    }

    #logo-cassi img {
        width: 80px;
    }

    footer {
        padding: 40px 24px;
        flex-direction: column;
        align-items: start;
        gap: 40px;
    }

    #tela-index {
        padding: 32px 24px;
        grid-template-columns: 1fr;
    }

    search {
        grid-column: auto;
    }

    #btn-menu-lateral {
        display: block;
    }

    #nav-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        transform: translateY(-100%);
        filter: blur(4px);
        opacity: 0;
        transition: .3s;
    }

    body:has(#btn-menu-lateral input:checked) #nav-menu {
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }

    .ul-lista-conteudo-2-colunas {
        columns: 1 !important;
    }

    #feedback:not(form) {
        width: 100%;
    }

    #web-toast {
        top: 0;
        right: 24px;
        width: calc(100% - 48px);
    }
}