.containerxpto {
    position: relative;
}

.background {
    position: relative;

    width: 100%;
}

img {
    max-width: 100%;
    /* Garante que a imagem não ultrapasse o tamanho do container */
    height: auto;
    /* Mantém a proporção da imagem */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    width: auto;
    overflow: hidden;
    /*Impede o scroll se houver conteúdo maior que a imagem */
    background-color: #000000;
}

/* Estrutura principal */
.page {

    display: flex;
    flex-direction: column;
    /* Alinha elementos em coluna: Navbar -> Conteúdo -> Footer */
    height: 100%;
    justify-content: center;
    /* Centraliza horizontalmente */
    align-items: center;
    /* Centraliza verticalmente */
}

.indicator {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    /* Espaço entre o ícone e o texto */
    color: #333;
}

.indicator_v2 {
    position: absolute;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #333;
}

.circle {
    display: inline-block;
    padding: 2px 10px;
    /* Ajusta o tamanho do círculo */
    background-color: #93abc7;
    /* Cor de fundo do círculo */
    color: white;
    /* Cor do texto */
    font-weight: bold;
    border-radius: 5%;
    /* Transforma o fundo em círculo */
    text-align: center;
}

.track-container {
    position: absolute;
    width: 100%;
    height: 300px;

    /* Imagem de fundo */
    background-size: cover;
    overflow: hidden;
    /* Impede a imagem da pessoa sair do contêiner */

    font-size: 14px;
    gap: 5px;
    /* Espaço entre o ícone e o texto */
    color: #333;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.track-container-2 {
    position: absolute;
    width: 100%;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;

    /* Imagem de fundo */
    background-size: cover;
    overflow: hidden;
    /* Impede a imagem da pessoa sair do contêiner */

    font-size: 14px;
    gap: 5px;
    /* Espaço entre o ícone e o texto */
    color: #333;
    display: flex;
    align-items: center;
}

.rain {
    display: none;
    /* Esconde a div por padrão */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../BootStrap/img/rain.png");
    position: fixed;
    animation: rainAnimation1 1s linear infinite;
    z-index: 90;
}

@keyframes rainAnimation1 {
    0% {
        background-position: 0% 0%;
    }

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

.cmmaia {
    background: url("../BootStrap/img/cm_maia.png") no-repeat;
    background-size: contain;
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 60;
}

.cloud_1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Centraliza verticalmente */
    animation: busAnimation 30s linear infinite;
    z-index: 60;
}

.cloud_2 {
    background: url("../BootStrap/img/videowall-cloud-1-0.svg") no-repeat;
    background-size: contain;
    width: 250px;
    height: 150px;
    -webkit-animation: backpack_bike 12.5s steps(1) infinite;
}

.air_1 {
    position: absolute;
    /* Centraliza verticalmente */
    animation: videowall-kids-anim 100s linear 0s infinite normal forwards;
    z-index: 60;
}

.air_2 {
    background: url("../BootStrap/img/airplane.png") no-repeat;
    background-size: contain;
    width: 250px;
    height: 150px;
    -webkit-animation: backpack_bike 1.5s steps(1) infinite;
    transform: scaleX(-1);
}

.air_box {
    position: absolute;
    /* Centraliza verticalmente */
    animation: videowall-air-box-anim 100s linear 0s infinite normal forwards;
    z-index: 60;
}

@keyframes videowall-air-box-anim {
    0% {
        transform: translateX(60vw) rotateY(0deg);
    }

    49% {
        transform: translateX(-60vw) rotateY(0deg);
    }

    50% {
        transform: translateX(-60vw) rotateY(0deg);
    }

    99% {
        transform: translateX(60vw) rotateY(0deg)
    }

    100% {
        transform: translateX(60vw) rotateY(0deg)
    }
}

.runner_girl_1 {
    position: absolute;
    display: block;
    width: 100%;
    animation: girl-run-move 34s linear infinite;
    z-index: 10;
}

.runner_girl_2 {
    background: url("../BootStrap/img/girl-run.svg") no-repeat;
    width: 72.9px;
    height: 92px;
    -webkit-animation: walk_girl 1.5s steps(18) infinite;
}

@-webkit-keyframes walk_girl {
    100% {
        background-position: -1334px 0;
    }
}


@keyframes girl-run-move {
    0% {
        transform: translateX(128vw);
    }

    80%,
    100% {
        transform: translateX(-10vw);
    }
}

.runner_senior_1 {
    position: absolute;
    display: block;
    width: 100%;
    animation: senior-run-move 45s linear infinite;
    z-index: 30;
}

.runner_senior_2 {
    background: url("../BootStrap/img/senior-run.svg") no-repeat;
    width: 70px;
    height: 94px;
    -webkit-animation: walk_senior 2s steps(34) infinite;
    transform: scaleX(-1);
}

@keyframes senior-run-move {

    0%,
    10% {
        transform: translateX(-6vw);
    }

    80%,
    100% {
        transform: translateX(112vw);
    }
}

@-webkit-keyframes walk_senior {
    100% {
        background-position: -2474px 0;
    }
}

.man_bike_1 {
    position: absolute;
    display: block;
    width: 100%;
    animation: man-bike-move 20s linear infinite;
    z-index: 30;
}

.man_bike_2 {
    background: url("../BootStrap/img/backpack-bike.svg") no-repeat;
    width: 101.03px;
    height: 87px;
    -webkit-animation: backpack_bike 1.5s steps(20) infinite;
}

@-webkit-keyframes backpack_bike {
    100% {
        background-position: -2045px 0;
    }
}

@keyframes man-bike-move {
    0% {
        transform: translateX(-8vw);
    }

    75%,
    100% {
        transform: translateX(108vw);
    }
}

.bus_1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Centraliza verticalmente */
    animation: busAnimation 26s linear infinite;
    z-index: 40;
}

.bus_2 {
    background: url("../BootStrap/img/bus_12.png") no-repeat;
    background-size: cover;
    width: 450px;
    height: 170px;
    -webkit-animation: backpack_bike 12.5s steps(1) infinite;
}

@keyframes busAnimation {
    0% {
        left: -500px;
        /* Começa fora da tela, à esquerda */
    }

    100% {
        left: 100%;
        /* Vai até fora da tela, à direita */
    }
}

.kids-walk {
    position: absolute;
    left: 55%;
    display: flex;
    animation: videowall-kids-anim 100s linear 0s infinite normal forwards;
    z-index: 50;
}



@keyframes videowall-kids-anim {
    0% {
        transform: translateX(60vw) rotateY(0deg);
    }

    49% {
        transform: translateX(-60vw) rotateY(0deg);
    }

    50% {
        transform: translateX(-60vw) rotateY(180deg);
    }

    99% {
        transform: translateX(60vw) rotateY(180deg)
    }

    100% {
        transform: translateX(60vw) rotateY(0deg)
    }
}

.estudante_loira_1 {
    position: absolute;
    left: 55%;
    display: flex;
    animation: videowall-kids-anim 95s linear 0s infinite normal forwards;
    z-index: 50;
}

.estudante_loira_2 {
    background: url("../BootStrap/img/estudante-loira.svg") no-repeat;
    width: 35.25px;
    height: 70px;
    -webkit-animation: walk_schoolgirl 1.35s steps(8) infinite;
}

@-webkit-keyframes walk_schoolgirl {
    100% {
        background-position: -287px 0;
    }
}

.estudante_ponytail_1 {
    position: absolute;
    left: 50%;
    display: flex;
    animation: videowall-kids-anim 98s linear 0s infinite normal forwards;
    z-index: 50;
}

.estudante_ponytail_2 {
    background: url("../BootStrap/img/estudante-ponytail.svg") no-repeat;
    width: 31px;
    height: 59.92px;
    -webkit-animation: walk_schoolpony 1.3s steps(8) infinite;
}

@-webkit-keyframes walk_schoolpony {
    100% {
        background-position: -253px 0;
    }
}

.estudante_male {
    background: url("../BootStrap/img/estudante-male.svg") no-repeat;
    width: 44.75px;
    height: 80px;
    -webkit-animation: walk_schoolmale 1.3s steps(8) infinite;
}

@-webkit-keyframes walk_schoolmale {
    100% {
        background-position: -371px 0;
    }
}


.swan_1 {
    position: absolute;
    /* Centraliza verticalmente */
    animation: videowall-swan-1-anim 26s linear 0s infinite normal forwards;
    z-index: 50;
}
.swan_2 {
    background: url("../BootStrap/img/swan.svg") no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
}

@keyframes videowall-swan-1-anim {

    0%   { transform: translateX(20vw) rotateY(0deg); }
    49%  { transform: translateX(35vw) rotateY(0deg); }
    50%  { transform: translateX(35vw) rotateY(180deg); }
    99%  { transform: translateX(20vw) rotateY(180deg); }
    100% { transform: translateX(20vw) rotateY(0deg); }
}

.swan_1_1 {
    position: absolute;
    /* Centraliza verticalmente */
    animation: videowall-swan-2-anim 26s linear 0s infinite normal forwards;
    z-index: 60;
}
.swan_2_2 {
    background: url("../BootStrap/img/swan.svg") no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
}

@keyframes videowall-swan-2-anim {

    0%   { transform: translateX(25vw) rotateY(0deg); }
    49%  { transform: translateX(35vw) rotateY(0deg); }
    50%  { transform: translateX(35vw) rotateY(180deg); }
    99%  { transform: translateX(25vw) rotateY(180deg); }
    100% { transform: translateX(25vw) rotateY(0deg); }
}

.tree {
    background: url("../BootStrap/img/treess_12.png") no-repeat;
    background-size: contain;
    width: 350px;
    height: 350px;
    position: absolute;
    z-index: 60;
}

.old_man {
    background: url("../BootStrap/img/old_man_outside.png") no-repeat;
    background-size: contain;
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 60;
}

table {
    font-size: 0.6em;
    /* Tamanho da fonte */
}

th,
td {
    padding: 5px;
    /* Reduzindo o padding */
}

/* Cores das classificações */
.muito-bom {
    background-color: #54e154;
    color: white;
}

/* Verde claro */
.bom {
    background-color: #008000;
    color: white;
}

/* Verde escuro */
.medio {
    background-color: #a8a800;
    color: white;
}

/* Amarelo */
.fraco {
    background-color: #ffa500;
    color: white;
}

/* Laranja */
.mau {
    background-color: #ff6347;
    color: white;
}

/* Vermelho claro */
.muito-mau {
    background-color: #be0000;
    color: white;
}

/* Vermelho escuro */

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #222;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 14px;
}

.mensagem {
    margin: 5px 0;
}

@keyframes deslizar {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

#topo_ocorrencias .mensagem {
    display: inline-block;
    margin-right: 100px; /* espaço entre mensagens */
    font-size: 14px;
    font-family: sans-serif;
}