/* TABLET */
@media screen and (max-width: 769px) {
    .modal-dialog {
        max-width: 90%;
    }

    #react_ldp_viewer__add_wms_info_wrapper {
        flex-direction: column-reverse;
    }

    #react_ldp_viewer__add_wms_example {
        max-width: 100%;
    }
}

/* MOBILE */
@media screen and (max-width: 490px) {

    #react_ldp_viewer__header {
        z-index: 1;
        position: sticky;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .5rem;
        padding: .25rem .5rem;
        border-bottom: 1px solid var(--border);
        background-color: var(--white);
    }

    #react_ldp_viewer__user_info,
    #react_ldp_viewer__titolo_mappa span,
    #react_ldp_viewer__resize_icon_left,
    #react_ldp_viewer__resize_icon_right
    {
        display: none;
    }

    #react_ldp_viewer__header #exit {
        width: 24px;
        height: 24px;
        padding: 0.2rem;
    }

    #react_ldp_viewer__header #exit i { 
        font-size: .85rem;
    }

    #react_ldp_viewer__titolo_mappa .highlight{
        display: block;
        font-size: 1.2rem;
    }

    #react_ldp_viewer__tour {
        display: none;
    }

    #react_ldp_viewer__legend {
        width: 100vw;
        z-index: 2;
    } 

    #react_ldp_viewer__legend .react_ldp_viewer__map_overlay {
        display: none;
    }

    #react_ldp_viewer__legend_collapsed {
        flex-direction: column;
    }

    #react_ldp_viewer_toolbar {
        flex-direction: column;
        margin-left: 0.5rem;
        gap: .3rem;
        padding: .75rem .375rem;
        width: 34px;
    }

    .react_ldp_viewer_toolbar_separator {
        height: .1rem;
        width: 100%;
    }

    .react_ldp_viewer__map_overlay {
        height: 100%;
    }

    #react_ldp_viewer__map_info_box {
        bottom: .5rem;
        left: .5rem;
    }

    .modal {
        --bs-modal-margin: 0.5rem;
        --bs-modal-border-color: var(--bs-border-color-translucent);
        --bs-modal-border-radius: var(--bs-border-radius-lg);
    }
    .modal-dialog {
        max-width: 100%;
    }

    #react_ldp_viewer__rpanel {
        width: 100vw;
        max-width: 100vw;
        z-index:1;
    }
}