@media screen and (max-width: 1024px){
    .logo {
        width: 100%;
        text-align: center;
    }
    .menu-responsivo {
        display: block;
    }
    .menu .principal,
    .menu .direita {
        display: none !important;
    }
    
    .conteudo-agendamento {
        padding: 1rem;
        justify-content: center;
    }
    .horarios {
        justify-content: space-between !important;
        gap: 3rem !important;
    }
    .selected {
        background-color: var(--blue-grey-300) !important;
    }
    .table-action {
        display: inline-flex;
        gap: 1rem;
    }
    .public-form {
        width: 95%;
        padding: 1rem;
    }
    .col-12.espaco.foto-perfil {
        text-align: center;
    }
    .conteudo.publico {
        width: 95%;
    }
    .conteudo.publico.sala iframe {
        height: 300px !important;
    }
    .agendamento-calendario {
        width: 95%;
    }
    .espaco {
        margin-bottom: 2rem;
    }
    .perfil-img {
        margin: 0 auto;
    }
    .perfil-title {
        width: 100%;
    }
    .closeBtn {
        left: 90.5% !important;
    }
    .bg-bi {
        height: auto !important;
    }
    .bi {
        flex-direction: column !important;
    }
    .itemBox {
        width: 100% !important;
    }
    .itemBiMenor {
        width: 48% !important;
    }
    .graphMedio {
        width: 48% !important;
    }
    .itemMedio {
        width: 48% !important;
    }
    .menubi .title {
        display: none !important;
    }

    .textGreen,
    .textOrange {
        font-size: 1.8rem !important;
    }
    
}

@media screen and ( max-width: 768px ) {

    .cards {
        width: 100% !important;
        gap: 0 !important;
        row-gap: 1.5rem !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    .cards .card {
        width: 45% !important;
        height: 200px !important;
    }
    .cards .card i {
        font-size: 1.5rem !important;
    }
    .cards .card h5 {
        font-size: 1rem !important;
    }
    .cards .card span {
        font-size: 0.8rem !important;
    }
    .closeBtn {
        left: 87% !important;
    }
    .bg-bi {
        height: auto !important;
    }
    .bi {
        flex-direction: column !important;
    }
    .itemBox {
        width: 100% !important;
    }
    .itemBiMenor {
        width: 48% !important;
    }
    .graphMedio {
        width: 48% !important;
    }
    .itemMedio {
        width: 48% !important;
    }
    .menubi .title {
        display: none !important;
    }

    .textGreen,
    .textOrange {
        font-size: 1.8rem !important;
    }
    
}

@media screen and (max-width: 480px){
    .logo {
        width: 100%;
        text-align: center;
    }
    .menu-responsivo {
        display: block;
    }
    .conteudo.publico.sala iframe {
        height: 180px !important;
    }
    .closeBtn {
        left: 73% !important;
    }
    .bg-bi {
        height: auto !important;
    }
    .bi {
        flex-direction: column !important;
    }
    .itemBox {
        width: 100% !important;
    }
    .itemBiMenor {
        width: 48% !important;
    }
    .graphMedio {
        width: 48% !important;
    }
    .itemMedio {
        width: 48% !important;
    }
    .menubi .title {
        display: none !important;
    }

    .textGreen,
    .textOrange {
        font-size: 1.8rem !important;
    }
    
}

@media screen and ( max-width: 320px ) {
    .closeBtn {
        left: 62% !important;
    }
    .bg-bi {
        height: auto !important;
    }
    .bi {
        flex-direction: column !important;
    }
    .itemBox {
        width: 100% !important;
    }
    .itemBiMenor {
        width: 48% !important;
    }
    .graphMedio {
        width: 48% !important;
    }
    .itemMedio {
        width: 48% !important;
    }
    .menubi .title {
        display: none !important;
    }

    .textGreen,
    .textOrange {
        font-size: 1.8rem !important;
    }
}