/**
 * Map Examples Specific
 */
/* normal map */
.maparea {
    width:auto;
    border: 1px solid #ccc;
}
/* grid samllmap */
.smallmap {
    border-radius:5px;
    border:1px solid #8e8e8e;
    width:auto;
    height:400px;
}
#mapholder {
    display:table;
    width:100%;
}
.mapholder-cell {
    vertical-align:top;
    display:table-cell;
    width:100%;
}
#map {
    background : #7391ad;
    color: #555555;
}
#legend {
    position:absolute;
    z-index:1001;
    top:250px;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    padding:5px 5px 5px 0;
    background-color:#ffffff;
}
label > input{ /* HIDE RADIO */
  display:none;
}
label > input + span{ /* IMAGE STYLES */
  cursor:pointer;
  background-position: 0 -25px;
}
label > input:checked + span{ /* (RADIO CHECKED) IMAGE STYLES */
  background-position: 0 0;
}
#drbc {
    position:relative;
    margin-left:20px;
    z-index:1090;
    overflow-y:overlay;
}
#map .ol-custom-overviewmap .ol-overviewmap-map {
    position: relative;
    z-index: 2;
}
#map .ol-custom-overviewmap,
  .map .ol-custom-overviewmap.ol-uncollapsible {
    bottom: auto;
    left: auto;
    right: 0;
    top: 0;
}
#map .ol-custom-overviewmap:not(.ol-collapsed) button{
    bottom: auto;
    left: auto;
    right: 1px;
    top: 1px;
    z-index: 3;
}
#map .layer-switcher .panel {
    font-size:80%;
}
#map .custom-mouse-position {
    display:none;
}
#mouse-position {
    color:gray;
    min-width:10em;
    display:inline-block;
}
.mcbox {
    display:inline-block;
    border:1px solid #eaeaea;
    background-color: #fafafa;
    border-radius:2px;
    padding:3px;
    margin:2px;
    vertical-align:top;
    min-height:37px;
    font-size:0.8rem;
}
.mcbox input {
}
/* map filter box */
.mapfb {
    font-size:0.8rem;
    border-collapse:separate;
    border-spacing:1px;
    background-color:#e7e7e7;
    margin-top:10px;
    float:left;
    box-shadow: 0 3px 8px rgba(0,0,0,.24);
    -webkit-box-shadow: 0 3px 8px rgba(0,0,0,.4);
    z-index:1;
}
.mapfb-pos {
    z-index:3;
}
.mapfb td {
    padding:1px 1px 1px 2px;
}
.mapfb .title {
    padding-bottom:6px;
    padding-top:6px;
    font-weight: bold;
    background-color:#f7f7f7;
    font-size:0.75rem;
}
.mapfb .content {
    background-color:#f7f7f7;
    padding: 3px 0 3px 1px;
}
.mapfb .shadow {
    /*height:12px;*/
    background-color:#e7e7e7;
    width:100%;
    box-shadow: inset 0 4px 10px 0 rgba(204,204,204,1);
    -webkit-box-shadow: inset 0 4px 10px 0 #ccc;
    padding-top:10px;
}
.mapfb .center {
    text-align:center;
    font-size:1.0rem;
    background-color:#9BD5E6;
}
#mapfilters-roller, #mapfilters-show {
    display:none;
}
#mapfilters-show {
    background-color: #acac;
    padding-left:2em;
    padding-right:2em;
}
.result {
    border-top: 1px solid gray;
}
.root-ul {
    margin-top:0px;
    padding-left:7px;
    margin-left:0px;
    list-style:none;
    color: #646464;
    line-height:1.5em;
    font-size:0.8rem;
}
#shortdesc {
        padding    : 1em;
        text-align : left;
        width      : 650px;
}
div.olLayerGoogleCopyright,
div.olLayerGooglePoweredBy
{
  /* display: none !important; */
}
.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}
.olControlOverviewMapElement {
    background-color: #000000 !important;
    border-top-left-radius: 10px;
    padding: 10px 18px 10px 10px;
}

#OpenLayers_Control_MaximizeDiv_innerImage:hover {
    background-color:orange;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* very small screens */
@media only screen and (max-width: 600px) {
    .smallmap {
        border: 0;
        width: auto;
        height : 200px;
    }
    .maparea {
        border: 0;
        width: 100%;
        height: 300px;
    }
    #mouse-position {
        display : none;
    }
    .mapholder-cell {
        display:inline;
    }
    .mapfb {
        margin-top:2px;
        width: 100%;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    #mapfilters {
        left:0;
    }

    #mapfilters-roller {
        /*display:block;*/
    }
    #mapbox {
        display:block;
        /*display:none;*/
    }
    .mcbox, .mcbox input {
        font-size:1.0rem;
    }
    #map-tools-box, #map-navi-box {
        display:none;
    }
    #mapfilters-show {
        display:inline-block;
        position:absolute;
        top:62px;
        width:50%;
        left:25%;
    }
    #navigator {
        display: none;
    }
    #map-zoom-box {
        display:inline-block;
    }
}
@media only screen and (min-width: 600px) {
    .maparea {
        width: 100%;
        height: 400px;
    }
    .smallmap {
        width:auto;
        height : 300px;
    }
    #mouse-position {
        display : none;
    }
    .mapholder-cell {
        display:inline;
    }
    .mapfb {
        width: 50%;
        margin-top:5px;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    #mapfilters-roller {
        display:block;
    }
    #mapbox {
        display:none;
    }
    #map-zoom-box {
        display:inline-block;
    }
}
@media only screen and (min-width: 900px) 
{    
    .maparea {
        width:100%;
        height:500px;
    }
    .smallmap {
        width:auto;
        height : 400px;
    }
    #mouse-position {
        display : inline-block;
    }
    .mapholder-cell {
        display:table-cell;
    }
    .mapfb {
        margin-top:2px;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    #mapfilters-roller {
        display:none;
    }
    #mapbox {
        display:inline-block;
    }
    #mapfilters {
        display:inline-block;
    }

    #map-zoom-box {
        display:inline-block;
    }
}
@media only screen and (min-width: 1200px) 
{    
    #map {
    }
    .maparea {
        width:100%;
        height:600px;
    }
    .smallmap {
        width: auto;
        height: 500px;
    }
    #mouse-position {
        display : inline-block;
    }
    .mapholder-cell {
        display:table-cell;
    }
    .mapfb {
        width: 450px;
        -webkit-box-shadow: 0 3px 8px rgba(0,0,0,.4);
        box-shadow: 0 3px 8px rgba(0,0,0,.24);
        margin-top:10px;
    }
    #mapfilters-roller {
        display:none;
    }
    #mapbox {
        display:table-cell;
    }
    #mapfilters {
        display:table-cell;
    }

    #map-zoom-box {
        display:inline-block;
    }
}
/* mobile specific */
@media only screen and (hover: none) and (pointer: coarse) {
    .smallmap {
        border: 0;
        width: auto;
        height : 400px;
    }
    .maparea {
        border: 0;
        width: 100%;
        height: 300px;
    }
    #mouse-position {
        display : none;
    }
    .mapholder-cell {
        display:inline;
    }
    .mapfb {
        font-size:1.0rem;
        margin-top:2px;
        width: 100%;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    .mapfb .title {
        font-size:1.0rem;
    }
    #mapfilters {
        left:0;
        max-width:1000px;
        display:none;
    }
    #mapfilters select,input {
        font-size:1.0rem;
    }
    #mapfilters-roller {
        /*display:block;*/
    }
    #mapbox {
        display:block;
        /*display:none;*/
    }
    .mcbox, .mcbox input {
        font-size:1.0rem;
    }
    #map-tools-box, #map-navi-box {
        display:none;
    }
    #mapfilters-show {
        display:inline-block;
        position:absolute;
        top:62px;
        width:50%;
        left:25%;
    }
    #navigator {
        bottom: -1000px;

    }
    #map-zoom-box {
        display:none;
    }
}