@media all and ( max-width: 920px ) {
    html {
        overflow: visible;
    }

    #main-app {
        flex-direction: column;
    }

    .main-app__main {
        margin-top: -80px;
    }

    .main-app__toggle {
        z-index: 3;
    }

        .main-app__toggle .ui-icon--close {
            display: none;
        }

        .main-app__toggle.is-collapsed .ui-icon--close {
            display: block;
        }

        .main-app__toggle .ui-icon--menu {
            display: block;
        }

        .main-app__toggle.is-collapsed .ui-icon--menu {
            display: none;
        }

    .main-nav {
        flex: 0 0 5rem;
    }

        .main-nav.is-collapsed {
            margin-left: 0;
        }

    .main-nav-menu {
        display: none;
        height: auto;
    }

    .main-nav.is-collapsed .main-nav__logo--collapsed {
        display: none;
    }

    .main-nav.is-collapsed .main-nav-menu {
        display: block;
        height: 100%;
        justify-content: flex-start;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 3;
    }

    .main-nav.is-collapsed .main-nav-menu__label {
        display: block;
    }

    .main-nav.is-collapsed .main-nav-menu__link {
        justify-content: flex-start;
    }

    .main-nav__container-logo {
        display: none;
    }

    .main-nav__logo-link {
        display: block;
        height: 100%;
        margin: 0 auto;
        width: 165px;
    }

    .main-nav-submenu {
        flex-wrap: wrap;
        height: auto;
        justify-content: space-around;
    }

    .main-nav-submenu__item.is-active {
        background-color: #e23e5a;
        border: none;
    }

    .ui-form {
        width: 80%;
    }

    .main-app__content {
        height: auto;
        width:auto;
        overflow: auto;
    }
}

@media all and ( max-width: 768px) {
    .Panel #filtre {
        text-align: center;
    }

    .panel-heading {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .panel-enseigne > .panel-body {
        padding: 10px;
    }

    .infos-site > .elem-info-site {
        text-align: center;
        margin-bottom: 4px;
        border-left: none;
        padding: 6px 0;
    }

    .panel-heading .compteurs-infos-site {
        text-align: center;
    }

    .panel-title {
        margin-bottom: 5px;
    }

    .elem-info-site .ui-icon {
        margin: 0 5px !important;
    }

    .elem-info-site .titre-site {
        padding-left: 0;
        padding-top: 4px;
    }

    .infos-site .mail-infos-site {
        display: block;
    }
}

@media all and ( max-width: 580px ) {

    .main-app__contextual:nth-child( even ) {
        margin: 0;
    }

    .main-app__contextuals {
        margin: 0;
    }

    .main-app__disconnect {
        padding: 0;
    }

    .main-app__photo, .main-app__user {
        display: none;
    }

    .main-app__list-header:nth-child( n + 3 ), .main-app__list-label:nth-child( n + 3 ) {
        display: none;
    }

    .ui-form {
        width: 100%;
    }

    .main-app__content {
        height: auto;
        width:auto;
        overflow: auto;
    }
}

@media screen and (max-width: 500px) {
    .main-app__content {
        height: auto;
        width: auto;
        overflow: auto;
    }
    #map-populate {
        height: 400px;
    }

        #map-populate h3.titre-encart, #map-populate .liste-automates > p {
            font-size: 11px !important;
        }

        #map-populate #content #body-content p, #map-populate #content #body-content .liste-automates {
            font-size: 9px;
        }

    #body-content .petite-icone, #body-content .micro-icone {
        margin: 0 3px;
        width: 15px;
        height: 15px;
    }

    #body-content hr {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    #legende #zone-legende {
        display: none;
    }

    #legende.toggled #zone-legende {
        display: block;
    }

    #refresh-time {
        display: block;
        width: 100%;
        text-align: center;
        padding-top: 15px;
    }

    #filtreEtat select {
        font-size: 10px;
    }
}