/* @media (max-width:900px){
    .app-content{
        grid-template-columns:1fr;
    }
} */



@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
    }

    .app {
        min-height: 100vh;
    }

    .app-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        width: 100%;
        max-width: 100%;
    }

    .panel {
        width: 100%;
        max-width: 100%;
        padding: 12px;
    }

    .left-panel,
    .center-panel,
    .right-panel {
        width: 100%;
        max-width: 100%;
        padding: 12px;
    }

    /* .country-list {
        max-height: 220px;
        overflow-y: auto;
    } */

   /*  .country-list {
        max-height: 140px;
        overflow-y: auto;
    } */

    .left-panel .country-list {
        max-height: 140px;
        overflow-y: auto;
    }

    .region-list {
        width: 100%;
    }

    .country-flag img {
        width: min(180px, 70vw);
        max-width: 100%;
    }

    .app-footer {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .app-footer .btn {
        flex: 1 1 140px;
        min-width: 0;
    }

    #footer-info {
        padding: 10px;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}