/* HORIZONTAL VIEWING */
@media (max-height: 700px) {
    h1 > .infoText {
        display: none;
    }
    #logoFrame {
        max-width: 300px; 
        max-height: 175px;
    }

}

@media (max-width: 767px) {
    .configuration-map-header {
        flex-direction: column;
    }
    #searchBoxMapEditStationText {
        max-width: 70%;
        min-width: 50%;
    }
    .labelIdStation {
        display: none;
    }
    #logoFrame {
        max-width: 350px; 
        max-height: 175px;
    }
    .logoUpl {
        max-width: 350px;
    }
    .box-footer .button-container {
        flex-direction: column;
    }
    h1 > .infoText {
        display: none;
    }
    .small-box-text p {
        min-height: 3.4em;   /* circa due righe */
        margin: 0;
    }
    .row-equal .small-box,
    .row-equal .report-box {
        flex: 1;
    }
    .row-flex-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    #rowCharts {
        flex-direction: column;
    }
    .custom-footer {
        display: flex;
        flex-direction: column !important;
        align-items: stretch;
        gap: 10px;
    }
    .buttons-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .single-tariff-card-historic {
        overflow-x: scroll;
    }
    .single-tariff-card-toActivate {
        overflow-x: scroll;
    }
    .single-tariff-card-active {
        overflow-x: scroll;
    }
    .single-tariff-card-planned {
        overflow-x: scroll;
    }
    .tariff-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .tariff-header .header-left {
        width: 100%;
        min-width: 0;
        margin-right: 0;
    }

    .tariff-header .header-right {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .stations-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .stations-header .header-left {
        width: 100%;
        min-width: 0;
        margin-right: 0;
    }

    .stations-header .header-right {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .box-header.custom-header {
        padding: 10px;
    }
    .custom-page-header {
        gap: 16px;
    }
    .custom-page-header .breadcrumb {
        gap: 0px;
    }

    .station-map-footer {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    .mapSearchForm {
        text-align: center;
        margin: auto;
        width: auto;
    }
    #rowMap:has(.box:not(.collapsed-box)), #rowCharts:not(:has(.box.collapsed-box)) {
        display: block;
    }
    .custom-page-header .bigTitle {
        gap: 6px;
        flex-direction: column;
    }
    .station-page-info-padding {
        left: -36px;
    }
    .nav-tabs-custom > .nav-tabs {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        padding: 0;
        overflow: hidden;
        align-items: flex-start;
    }

    .nav-tabs-custom > .nav-tabs > li {
        float: none;
        flex: 0 0 auto;
        margin-right: -1px;
    }

    .nav-tabs-custom > .nav-tabs > li.header {
        order: -1;
        flex: 0 0 100%;
        margin: 0;
        padding: 10px 15px;
    }
    

    .nav-tabs-custom > .nav-tabs > li > a {
        display: block;
        white-space: nowrap;
        padding: 8px 10px;
    }

    .nav-tabs-custom > .nav-tabs > li.header .bigTitle {
        margin: 0;
        font-size: 18px;
    }
    .nav-tabs > li:first-child.active > a {
        border-top-right-radius: 0px;
    }
    .containerConnectors {
        flex-direction: column;
    }
    .icon-connector-lg {
        font-size: 60px !important;
    }
    .btn {
        padding: 8px;
    }
    .btn-icon {
        gap: 6px;
    }
    .right-data {
        gap: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .box-body.table-responsive .dataTables_wrapper > .row:first-child {
        justify-content: flex-start;
    }
    .revenues-cards {
        flex-direction: column;
        margin-left: 30px;
    }
    .vertical {
        width: 100%;
        height: 1px;
        background-color: var(--border-color);
        border: none;
        margin: 0;
    }
}
@media (max-width: 540px) {
    .box-header.custom-header .header-right {
        gap: 8px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    #status-stations {
        flex-wrap: wrap;
        padding-left: 16px;
        justify-content: center;
    }
    .logoUpl {
        max-width: 285px;
    }
}