@media screen and (max-width: 1200px) {
    .barragem .card {
        width: calc(100% - 1.63rem);
    }
}
@media screen and (max-width: 1185px) {
    .meteorologia .card {
        width: calc(100% - 1.63rem);
    }
    .meteorologia .card .content {
        display: flex;
        justify-content: center;
    }
    .meteorologia .card .telemetry {
        width: 25rem;
    }
    .meteorologia .card .telemetry .wind-rose {
        top: -2.0rem;
        left: -3.2rem;
    }
    .meteorologia .card .telemetry .wind-speed {
        bottom: 2.8rem;
        right: 5.0rem;
    }
    .meteorologia .card .telemetry .barometro {
        right: 3.5rem;
        top: 1.5rem;
    }
    .meteorologia .card .telemetry .temperature {
        bottom: 2.0rem;
        right: 2.0rem;
    }
    .meteorologia .card .telemetry .level-humidity {
        top: 1.4rem;
    }
    .meteorologia .card .telemetry .chart-barometro {
        top: 3.5rem;
        left: 2.5rem;
    }
}
@media screen and (max-width: 1023px) {
    .side-menu {
        display: none;
    }
    .cnt {
        padding-left: 0;
        padding-top: 2rem;
    }
    .res-menu {
        display: block;
    }
    .dashboard .card .telemetry {
        display: none;
    }
    .mares .card {
        width: calc(100% - 1.63rem);
    }
    .dashboard .card .status-subtitles {
        position: fixed;
    }
    .dashboard .card .point-subtitles {
        top: 6.0rem;
        position: fixed;
    }
}
@media screen and (max-width: 600px) {
    .nivel-rios .points li {
        font-size: 0.8rem;
    }
    .dashboard .card .status-subtitles {
        width: calc(100% - 1.0rem);
        left: 0.5rem;
    }
    .dashboard .card .point-subtitles {
        width: calc(100% - 1.0rem);
        left: 0.5rem;
    }
    .mares .card #chart-tides {
        height: 400px;
    }
}
@media screen and (max-width: 580px) {
    .dashboard .card .point-subtitles {
        height: fit-content;
        max-height: calc(100% - 10rem);
        overflow-y: auto;
    }
    .barragem .card .content ul.data li:nth-child(2) {
        width: auto;
    }
    .barragem .card .content .dam-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 500px) {
    .meteorologia .card .content-dci {
        position: relative;
        height: 13.5rem;
    }
    .meteorologia .card .telemetry {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        display: block;
        position: absolute;
    }
    .card header h2 {
        font-size: 0.9rem;
        line-height: 1.2rem;
    }
    .cnt > main > header > h1 {
        font-size: 1.2rem;
    }
}
@media screen and (max-width: 400px) {
    .tabbed-area .tabs li span {
        font-size: 0.8rem;
    }
    .meteorologia .card .content-dci {
        height: 11.5rem;
    }
    .meteorologia .card .telemetry {
        transform: translate(-50%, -50%) scale(0.7);
    }
    .page-maintenance img {
        width: 6rem;
    }
    .page-maintenance h2 {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 360px) {
    .meteorologia .card .content-dci {
        height: 10rem;
    }
    .meteorologia .card .telemetry {
        transform: translate(-50%, -50%) scale(0.6);
    }
}