body {
    background-color: rgb(240,240,240);
}

.safe-area {
    width: 100vw;
    height: calc(100vh - 40px);
    margin: 20px 0px;
    display: flex;
    flex-direction: column;
    background-color: rgb(240,240,240);
}

.mobile-header-menu {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    margin-bottom: 8px;
}

.offcanvas-btn {
    border-radius: 50%;
    margin-right: 24px;
    padding: 8px;
    background-color: rgb(230,230,230);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.offcanvas-btn-icon {
    width: 18px;
    height: auto;
}

.title-section {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    margin-left: 24px;
}

.cards-row {
    width: 100%;
    margin: 12px 24px 32px 24px;
    padding-right: 12px;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}

.card-info-mobile {
    min-width: 100px;
    margin-right: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgb(214,214,214);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-info-number {
    font-size: 18px;
    font-weight: 700;
}

.card-info-type {
    text-align: center;
    font-size: 13px;
}

.title-lista-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px 24px 12px 24px;
}

.title-lista {
    font-size: 20px;
    margin-bottom: 4px;
}

.title-lista-descricao {
    font-size: 12px;
    font-weight: 400;
}

.filtros-chamados-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    margin: 0px 24px 16px 24px;
}

.filtro-btn {
    width: fit-content;
    min-width: 70px;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid rgb(214,214,214);
    margin-right: 6px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background-color: transparent;
}

.select-filtro {
    max-width: 150px;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid rgb(214,214,214);
    margin-right: 6px;
    font-size: 14px;
    background-color: transparent;
    
    &:focus {
        box-shadow: none;
        border: 1px solid rgb(214,214,214);
    }
}

.filtro-btn-ativo {
    background-color: rgb(224,224,224);
}

.filtro-option {
    display: none;
}

.lista-chamados-box {
    width: 100%;
    max-height: 50vh;
    overflow-x: auto;
    overflow-y: auto;
    display: block;
    margin-left: 24px;
    padding-right: 36px;
    border-collapse: collapse;
}

.lista-chamados-box thead th {
    position: sticky;
    top: 0px;
    margin: 0px;
}

.lista-cabecalho-item {
    border: 1px solid rgb(214,214,214);
    border-left: 0px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.cabecalho-item {
    background-color: rgb(224,224,224);
}

.lista-item {
    height: 48px;
}

.tag-tipo-chamado {
    border-radius: 6px;
    border: 1px solid;
    padding: 2px 4px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
}

.tag-aberto {
    color: #0D6EFD;
    background-color: #c7daf7;
    border-color: #0D6EFD;
}

.tag-resolvido {
    color: #198754;
    background-color: #abe0c8;
    border-color: #198754;
}

.tag-pendente {
    color: #d8a200;
    background-color: #f1e8ca;
    border-color: #d8a200;
}

.tag-nao-resolvido {
    color: #DC143C;
    background-color: #f3ccd4;
    border-color: #DC143C;
}

.tag-categoria {
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    background-color: rgb(230, 230, 230);
    color: gray;
}