@media (min-width: 1051px) {
    /*.modal-lg {
    width: 1030px;
    margin-right: auto;
    margin-left: auto;
}*/

    br.headerBR {
        display: block;
    }

    a.navbar-brand {
        padding-right: 0;
    }

    #navFormGroups {
        padding-left: 0;
    }
}

@media (max-width: 1050px) {
    #navFormGroups {
        width: 100%;
        text-align: center;
    }

    span.commFoto {
        font-size: 1.0em;
    }
    /*---------------------*/
    div.ol-zoom.ol-unselectable.ol-control {
        top: 30px;
    }

    br.headerBR {
        display: none;
    }

    .navbar-header {
        width: 100%;
        text-align: center;
    }

    a.navbar-brand {
        width: 100%;
        height: auto;
        padding-bottom: 0;
    }

    #saveGeometryDIV, #TOCDIV {
        top: 20em;
    }

    #TOCString {
        top: 8em;
    }

    .container-fluid {
        padding-right: 0px;
        padding-left: 0px;
    }
    /*---------------------*/
}

@media (min-width: 996px) {
    .modal-lg {
        width: 90vw;
        margin-right: auto;
        margin-left: auto;
    }

    .testiko a.fancybox img {
        /* width: 100%; */
        max-height: 400px;
        height: 400px;
    }
    /*#showFeatureInfoForm3AboutBlock, #showFeatureInfoForm3PhotoComment, #showFeatureInfoForm3VoteBlock {
    float:right;
}
#showFeatureInfoForm3PhotoBlock {
    float:left;
}*/
    #showFeatureInfoForm3AboutBlock, #showFeatureInfoForm3PhotoComment, #showFeatureInfoForm3VoteBlock {
        width: calc(30% + 18px);
    }

    #showFeatureInfoForm3PhotoBlock {
        max-width: 65%;
    }

    #showFeatureInfoForm3AboutBlock {
        right: -15px;
    }

    .modal-body-showFeatureInfoForm3 {
        max-height: 95vh;
    }
}

@media (max-width: 995px) {
    .modal-lg {
        width: 97vw;
    }

    .modal-body-showFeatureInfoForm3 {
        overflow-y: auto;
        max-height: none;
    }

    #showFeatureInfoForm3AboutBlock, #showFeatureInfoForm3PhotoComment, #showFeatureInfoForm3VoteBlock {
        width: 100%;
        float: left;
    }

    #showFeatureInfoForm3PhotoBlock {
        width: 100%;
    }

    #showFeatureInfoForm3AboutBlock {
        left: 0;
    }

    #showFeatureInfoForm3VoteBlock {
        position: relative;
    }
    /*    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }*/
    /*.navbar-header {
        width:100%;
    }
    .headerBR {
        display:none;
    }

    a.navbar-brand {
        text-align: center;
        width: 100%;
        padding-bottom: 0;
    }

    #navFormGroups {
        float: none !important;
        text-align: center;
    }*/



    span.commFoto, .testiko a.fancybox {
        max-width: 100%;
        width: 100%;
    }

    span.commFoto {
        position: relative;
        font-size: 0.9em;
    }
    /**/
    .testiko {
        max-height: 40vh;
    }
}

@media (max-width: 815px) {
    .modal-lg {
        width: 97vw;
    }

    div.ol-zoom.ol-unselectable.ol-control {
        top: 35px;
    }

    .navbar {
        min-height: 35px;
    }

    .navbar-toggle {
        margin-top: 6px;
        margin-bottom: 2px;
    }

    .layerEdit-group-buttons, .navigation-group-buttons, .toHome-group-buttons, #toHomeBtn {
        width: 100%;
    }

    /*button.layerEdit-group-button.layerEdit-group-button-enter {
         width: calc(17% - 2.5px);
    }*/

    .layerEdit-group-button {
        width: 40px;
        height: 34px;
    }

    /*.navigation-group-button, #infoPoint  {
        width:16.93%;
    }*/

    .navbar-brand {
        padding: 3px 15px;
        font-size: 15px;
    }

    .index-content {
        top: 63px;
        height: calc(100vh - 63px);
        max-height: calc(100vh - 63px);
    }

    /*.layerEdit-group-buttons, .navigation-group-buttons, .toHome-group-buttons, #toHomeBtn {
        width:100%;
    }
    .layerEdit-group-button  {
        width:20%;
    }
    .navigation-group-button, #infoPoint  {
        width:25%;
    }*/

    button.navbar-toggle {
        clear: both;
    }

    .topPanel-button {
        padding: 0 15px 0 0;
    }

    .modal-body, .modal-footer, .modal-header, .private-content {
        padding: 10px;
    }

    .form-group.ui-widget {
        margin-right: 0px;
    }

    .private-content {
        max-height: 85vh;
    }
    /**/
    .testiko {
        max-height: 60vh;
    }

    #privateTable {
        top: 30px;
    }

    div.navbar-collapse.collapse {
        padding-left: 0;
    }

    #navFormGroups {
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) {
    .modal-lg {
        width: 90vw;
    }

    br.headerBR {
        display: none;
    }

    #showFeatureInfoForm2 > .modal-dialog {
        margin: 0 auto;
    }

    .modal-footer > .btn {
        margin-left: 5px !important;
    }

    .modal-dialog-addFeatureInfoForm {
        width: 750px;
    }
}

@media (max-width: 767px) {

    button.layerEdit-group-button {
        width: 25%;
    }


        button.layerEdit-group-button.layerEdit-group-button-user {
            width: 100%;
        }

    .showFeatureInfoForm2Fieldset legend, div b.carB {
        font-size: 1.6rem;
        border: none;
    }

    #showFeatureInfoForm2StatusAvailDIV {
        padding-top: 20px;
    }


    .navigation-group-button, #infoPoint {
        width: calc(17% - 2.5px);
        /*width: 19.93%;*/
        /*width: calc(16.93% - 2.5px);*/
    }

    button.layerEdit-group-button.layerEdit-group-button-enter {
        width: calc(17% - 3.3px);
    }

    #SCityBtn, #GICDataBtn {
        display: none;
    }

    .form-control-label {
        font-size: 1.25rem !important;
    }

    /*button.layerEdit-group-button.layerEdit-group-button-enter {
         width: calc(17% - 2.5px);
    }*/
    /*#showFeatureInfoForm2TextDIV, #showFeatureInfoForm2StatusDIV, #showFeatureInfoForm2PhotoComment {
    font-size: 11.9px;
}
.carB {
    font-size:1.4em;
    margin-bottom:5px;
}*/

    .modal-lg {
        width: 97vw;
        margin: 10px 1vw 0 1vw;
    }

    .showFeatureInfoForm2Fieldset, #showFeatureInfoForm2PhotoComment, #showFeatureInfoForm2VoteBlock {
        width: 98%;
        clear: right;
        margin: 5px;
        border: none;
        /*padding: 0 1.4em 0.5em 1.4em;*/
        font-size: 1.4rem;
    }

        .showFeatureInfoForm2Fieldset legend, #showFeatureInfoForm2TextBlock, #showFeatureInfoForm2StatusBlock {
            margin-bottom: 0;
        }

    #carousel-example-generic {
        width: 100%;
        min-height: auto;
    }

    /*#showFeatureInfoForm2VoteBlock {
        position:relative;
    }*/

    #showFeatureInfoForm2PhotoComment, #showFeatureInfoForm2VoteBlock {
        position: relative;
        top: 10px;
    }

    #showFeatureInfoForm2 div.modal-content, #showFeatureInfoForm2 div.modal-body {
        max-height: inherit;
        overflow: hidden;
    }

    /**/

    .showFeatureInfoFormFieldset {
        width: 100%;
        clear: right;
    }

    #showFeatureInfoFormPhotoBlock {
        max-width: 100%;
        height: auto;
        margin-left: 0;
    }

    #showFeatureInfoFormTextBlock, #showFeatureInfoFormStatusBlock {
        width: 100%;
    }

    .carousel-caption {
        padding-left: 10px;
    }

    span.glyphicon.glyphicon-chevron-right {
        right: 25px;
    }

    span.glyphicon.glyphicon-chevron-left {
        left: 25px;
    }

    ul.nav li {
        display: inline;
    }

    .col3 {
        text-align: center;
        margin-right: 0;
        width: 100%;
        top: 0;
        float: none;
        margin-left: -15%;
        left: 50%;
    }

    .nav-stacked > li {
        float: left;
    }

        .nav-stacked > li + li {
            margin-top: 0;
        }
    /**/ .testiko {
        max-height: 46vh;
    }

        .testiko a.fancybox img {
            width: 100%;
        }

    fieldset.showFeatureInfoFormFieldset, #showFeatureInfoFormStatusDIV, #showFeatureInfoFormTextDIV, #showFeatureInfoFormStatusBlock label, #showFeatureInfoFormTextBlock label {
        font-size: 11.9px;
    }


    table.footable > thead > tr.footable-filtering > th, table.footable.footable-filtering-right > thead > tr.footable-filtering > th {
        padding-top: 5px;
    }
    /*-------------------------*/
    #geoLocationForm, #fromUsersForm {
        max-width: calc(100% - 20px);
        left: 0px;
        margin-left: 0;
        margin-top: 0;
        top: 10px;
        width: calc(100vw - 20px);
        min-height: 200px;
        max-height: calc(100vh - 20px);
        left: 10px;
    }

    .panel-body {
        padding: 7px;
    }



    table.geoLocationFormTable .footable-header > th, table.geoLocationFormTable > tbody > tr > td,
    table.fromUsersFormTable .footable-header > th, table.fromUsersFormTable > tbody > tr > td {
        padding: 4px;
    }

        table.fromUsersFormTable > tbody > tr > td.footable-last-visible > button.fromUsersForm-btn {
            width: 80px;
        }


        table.geoLocationFormTable > thead > tr > td.footable-sortable, table.geoLocationFormTable > thead > tr > th.footable-sortable, table.geoLocationFormTable > tbody > tr > td.footable-sortable, table.geoLocationFormTable > tbody > tr > th.footable-sortable, table.geoLocationFormTable > tfoot > tr > td.footable-sortable, table.geoLocationFormTable > tfoot > tr > th.footable-sortable,
        table.fromUsersFormTable > thead > tr > td.footable-sortable, table.fromUsersFormTable > thead > tr > th.footable-sortable, table.fromUsersFormTable > tbody > tr > td.footable-sortable, table.fromUsersFormTable > tbody > tr > th.footable-sortable, table.fromUsersFormTable > tfoot > tr > td.footable-sortable, table.fromUsersFormTable > tfoot > tr > th.footable-sortable {
            padding-right: 20px;
        }

            table.geoLocationFormTable > thead > tr > td.footable-sortable.footable-first-visible.footable-asc,
            table.geoLocationFormTable > thead > tr > td.footable-sortable.footable-first-visible.footable-desc,
            table.fromUsersFormTable > thead > tr > td.footable-sortable.footable-first-visible.footable-asc,
            table.fromUsersFormTable > thead > tr > td.footable-sortable.footable-first-visible.footable-desc {
                width: 50px;
                max-width: 50px
            }

            table.geoLocationFormTable > thead > tr > td.footable-sortable.footable-last-visible.footable-asc,
            table.geoLocationFormTable > thead > tr > td.footable-sortable.footable-last-visible.footable-desc,
            table.fromUsersFormTable > thead > tr > td.footable-sortable.footable-last-visible.footable-asc,
            table.fromUsersFormTable > thead > tr > td.footable-sortable.footable-last-visible.footable-desc {
                width: 110px;
                max-width: 110px
            }


    div.panel-body.panel-body-geoLocationForm,
    div.panel-body.panel-body-fromUsersForm {
        max-height: 88vh;
        overflow-y: auto;
    }

    /*---------------------*/
    div.ol-zoom.ol-unselectable.ol-control {
        top: 10px;
    }

    br.headerBR {
        display: block;
    }

    .navbar-header {
        width: auto;
        text-align: left;
    }

    a.navbar-brand {
        width: auto;
        height: auto;
        padding: 3px 15px;
    }

    #navFormGroups {
        width: auto;
        text-align: center;
    }

    #saveGeometryDIV, #TOCDIV {
        top: 17.0em;
    }

    #TOCString {
        top: 6em;
    }

    .container-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }
    /*---------------------*/

    div.navbar-collapse.collapse {
        padding-left: 15px;
    }

    #navFormGroups {
        padding-left: 15px;
        padding-right: 15px;
    }
    /*---------------------*/
}



@media (max-width: 720px) {
    .navigation-group-button, #infoPoint, .layerEdit-group-button-enter {
        width: calc(17% - 2.3px);
    }

    button.layerEdit-group-button.layerEdit-group-button-enter {
        width: calc(17% - 3px);
    }
    /**/
    .testiko {
        max-height: 50vh;
    }
}

@media (max-width: 690px) {
    .navigation-group-button, #infoPoint, .layerEdit-group-button-enter {
        width: calc(17% - 2.2px);
    }
    /**/
    .testiko {
        max-height: 50vh;
    }
}

@media (max-width: 660px) {
    .navigation-group-button, #infoPoint {
        width: calc(17% - 2.1px);
    }

    button.layerEdit-group-button.layerEdit-group-button-enter {
        width: calc(17% - 3px);
    }
    /**/
    .testiko {
        max-height: 50vh;
    }

    /*.testiko a.fancybox {
        text-align: center;
    }
    .testiko a.fancybox img {
        height: 250px;
        width: auto;
    }*/
}

@media (max-width: 600px) {
    .navigation-group-button, #infoPoint {
        width: calc(17% - 1.9px);
    }

    button.layerEdit-group-button.layerEdit-group-button-enter {
        width: calc(17% - 2.8px);
    }
    /**/
    .testiko {
        max-height: 50vh;
    }
}

@media (max-width: 540px) {
    .navigation-group-button, #infoPoint {
        width: calc(17% - 1.7px);
    }

    button.layerEdit-group-button.layerEdit-group-button-enter {
        width: calc(17% - 2.6px);
    }
    /**/
    .testiko {
        max-height: 39vh;
    }

        .testiko a.fancybox span.commFoto {
            text-align: left;
        }

    table.geoLocationFormTable {
        font-size: 11.9px;
    }
    /**/
    #helpForAddFeatureForm ol {
        padding-left: 15px;
    }

    #helpForAddFeatureForm img {
        width: 100%;
        max-width: 100%;
    }

        #helpForAddFeatureForm img#less3Files {
            max-width: 70%;
        }

        #helpForAddFeatureForm img#saveBtnImg {
            max-width: 30%;
        }

    div.datePhoto {
        font-size: 11.9px;
    }
}

@media (max-width: 480px) {
    /**/
    .testiko {
        max-height: 41vh;
    }

    #showFeatureInfoFormVoteBlock {
        width: 73%;
        bottom: 10px;
        left: 10px;
    }

    h2.forbiddenPage {
        font-size: 2em;
    }

    h4.forbiddenPage, h2.invalidBr {
        font-size: 1.5em;
    }

    button.layerEdit-group-button.layerEdit-group-button-enter {
        width: calc(17% - 2.3px);
    }

    #TOCString {
        font-size: 11.9px;
    }

    a.navbar-brand {
        padding: 3px 5px;
    }

    .navbar-toggle {
        margin-right: 5px;
    }
}

@media (max-height: 850px) {
    div.TOCContent3 {
        max-height: 84vh;
    }

    #TOCContent3FilterDIV {
        max-height: 70vh;
    }
}

@media (max-width: 320px) {

    .navigation-group-button, #infoPoint {
        width: calc(17% - 1px);
    }

    button.layerEdit-group-button.layerEdit-group-button-enter {
        width: calc(17% - 1.8px);
    }

    div.TOCContent2, div.TOCContent3 {
        top: 10px;
        left: 50%;
        margin-left: -150px;
        overflow: hidden;
        max-height: 96vh;
    }

        div.TOCContent2 > ul, div.TOCContent3 > ul {
            max-height: 96vh;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }

    #TOCContent3FilterDIV {
        max-height: 80vh;
    }

    .fileLinline {
        max-width: 80%;
    }

    .modal-body {
        max-height: 73vh;
    }
    /**/
    .testiko {
        max-height: 43vh;
    }

    div#showFeatureInfoForm .modal-body {
        max-height: 34vh;
    }

    #TOCString {
        top: 75px;
    }


    .showFeatureInfoFormVote-btn span:first-child {
        font-size: 15px;
    }

    #showFeatureInfoFormVoteBlock label {
        margin-bottom: 0;
        margin-top: 5px;
    }

    fieldset.showFeatureInfoFormFieldset, #showFeatureInfoFormStatusDIV, #showFeatureInfoFormTextDIV, #showFeatureInfoFormStatusBlock label, #showFeatureInfoFormTextBlock label, fieldset.showFeatureInfoFormFieldset legend, #showFeatureInfoFormVoteBlock label {
        font-size: 10px;
    }

        fieldset.showFeatureInfoFormFieldset legend {
            padding: 1px 2px;
        }

    #showFeatureInfoFormVoteBlock {
        width: 70%;
        bottom: 16px;
        left: 10px;
    }
}

@media (max-height: 479px) {
    /*.navigation-group-button, #infoPoint,*/ .layerEdit-group-button-enter {
        width: calc(17% - 1.5px);
    }

    hr.swal2-spacer {
        margin: 0;
    }

    .swal2-icon {
        margin: 0px auto;
    }

    .modal-content {
        max-height: 95vh;
    }

    .modal-body {
        max-height: 63vh;
    }

    .fancybox img {
        max-height: 45vh;
    }

    #showFeatureInfoForm .modal-body {
        max-height: 30vh;
        overflow-y: scroll;
    }
}