/* ####### responsive layout CSS ####### */

@media (max-width: 699px) { /* logo removed */
    #titlebar {
        min-width: 540px;
    }
    /* menubar */
    #gpc-menu .menu-logo {
        display: none;
    }
    #gpc-menu .main-menu-left {
        width: 65px;
    }
    .overflowContainer {
        margin-top: -20px;
    }
    #leftmenu div.menul1.menuclosel1:first-child {
        border-top: none;
        height: 58px;
        padding-top: 20px;
    }
    #search-execute {
        left: 70px;
    }
    .breadcrumb {
        position: relative;
        padding-left: 70px;
    }
    .nowrap {
        white-space: normal;
    }
    table.typeC th {
        white-space: normal;
    }
    table.ticket_info th {
        white-space: normal;
    }
    table.typeC td, table.typeC.workflow_action td, .cfgitem_info_wrapper table.typeC td {
        width: 70%;
    }
    .wide {
        min-width: 0;
        width: 70%;
    }
    * {
        word-wrap: break-word;
    }
    td.detailOpen > table.typeC {
        width: 100%;
    }
    span.valuePairKey {
        white-space: normal;
        width: auto;
    }
    .geojsonDataType, .openLayersMapWrapper {
        height: 10em;
        min-width: 10em;
    }
    .geojsonDataType .ol-attribution ul, .openLayersMapWrapper .ol-attribution ul {
        font-size: 50%;
    }
}

@media (max-width: 539px) {
    #titlebar {
        min-width: 320px;
    }
    /* menubar */
    #gpc-menu .menu-logo {
        display: none;
    }
    #gpc-menu .main-menu-left {
        width: 65px;
    }
    #leftmenu div.menul1.menuclosel1:first-child {
        border-top: none;
    }
    /* center bar */
    #search-execute {
        left: 70px;
        width: calc(100% - 70px - 170px - 65px);
    }
    #globalSearchForm {
        width: 100%;
    }
    #search-execute input.gpcInputB.searchInput {
        min-width: 4em;
        width: 100%;
    }
    #nav > a {
        margin-right: 170px;
    }
    #nav > ul {
        right: 170px;
    }
    .gpcFilter {
        right: 100px;
        min-width: 18em;
    }
    .breadcrumb {
        position: relative;
        padding-left: 70px;
        padding-right: 170px;
    }
    #pageFilter {
        right: 180px;
        min-width: 6em;
    }
    .menu-divider {
        right: 117.5px;
    }
    /* info box */
    .profile-menu {
        width: 170px;
    }
    #infobox {
        width: 170px;
        width: -moz-min-content;
        width: -webkit-min-content;
    }
    #infobox .infoboxUser .infoboxKey {
        display: none;
    }
    #infobox .infoboxRole .infoboxKey {
        display: none;
    }
    #infobox input[type="submit"].infobox_button {
        width: 95%;
    }
    .roleSelect {
        width: 100%;
        min-width: 3em;
    }
    #body h1 {
        word-break: break-all;
    }
}

/* Input elements */
@media (max-width: 539px) {
    select, input[type=text], input[type=password], input[type=tel], input[type=email],
    input[type=url], input[type=week], input[type=search], input[type=number],
    input[type=month], input[type=datetime-local], input[type=date], input[type=time] {
        min-width: 3em;
        width: 100%;
    }

}

@media (max-width: 419px) {
    .breadcrumb {
        top: 20px;
        border-radius: 0px;
    }
    #titlebar {
        height: 70px;
    }
    #pageFilter {
        right: 10px;
        top: 0px;
    }
    .gpcFilter {
        top: 65px;
        right: 1px;
    }
    .overflowContainer {
        margin-top: 0px;
    }
    #leftmenu div.menul1.menuclosel1:first-child {
        height: 35px;
        padding-top: 0px;
    }
    #gpc-menu .main-menu-left {
        border-bottom-left-radius: 0px;
    }
    .profile-menu {
        border-bottom-right-radius: 0px;
    }

    #sidebarFixedSwapper {
        display: block;
    }
    #sidebarFixed {
        display: none;
        padding-top: 0px;
        top: 85px;
    }
    #bodyBack.sidebarFixedSpace, #bodyBackFull.sidebarFixedSpace {
        margin-left: 0px;
    }
}

@media (max-width: 360px) {
    #nav {
        top: 27px;
        right: calc( 50% - 65px / 2 - 170px / 2 - 55px / 2 ); /* center without left menu without right panel and size of button half */
    }
    #nav > ul.toolBarSwapClass {
        top: 38px;
    }
    #search-execute {
        width: calc(100% - 70px - 170px - 5px);
    }
}

/* Special style for marked wide content that use a smaller font */
@media (max-width: 1024px) {
    .responsiveResizeFont {
        font-size: 9px;
        line-height: 1;
        word-wrap: break-word;
        word-break: normal;

    }
    .responsiveResizeFont td {
        min-width: 4em;
    }
    .responsiveResizeFont .nowrap {
        white-space: normal;
    }
    .responsiveResizeFont .wide {
        min-width: 0;
    }
}

/* Menu height reduction */
@media (max-height: 529px) {
    .gpc-menu {
        max-height: calc(100vh - 45px);
    }
}