@media (max-width: 1350px) {
    .dashboard {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (max-width: 1250px) {
    .dashboard {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
        "players whitelist"
        "backups consle";

        #dashboardPlayerlist { grid-area: players; }
        #dashboardWhitelist { grid-area: whitelist; }
        #dashboardBackups { grid-area: backups; }
        #dashboardConsoleAndMap { grid-area: consle; }

        .col4 { grid-template-rows: 1fr; }
        .mapCol { display: none !important; }
    }
}

@media (max-width: 700px) {
    .app {
        overflow-y: scroll;
        padding-left: 0px;
    }
    .appContainer {
        padding: 0px;
        gap: 0px;
    }
    .dashboard {
        grid-template-areas: unset !important;
        grid-template-columns: unset;
        grid-template-rows: unset;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        
        #dashboardPlayerlist { grid-area: unset; }
        #dashboardWhitelist { grid-area: unset; }
        #dashboardBackups { grid-area: unset; }
        #dashboardConsoleAndMap { grid-area: unset; max-height: 50vh;}
        overflow: scroll;
        height: fit-content;

        .col { min-height: 40vh; }
        .col.serverControls { 
            min-height: 70px;
            max-height: 70px !important; 
        }
    }
    .appHeader {
        span { display: none !important; }
    }
}