/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Global Institute for Water Security | Global Water Futures
 * Copyright (c) 2020 All Rights Reserved
 * Author: Stephen O'Hearn
 *
 * Style sheet for the GWFNet main map. It complements leaflet.css and must be loaded after leaflet.css
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.tooltip-gwfnet-anchor {
    font-size: 6pt;
    font-weight: 100;
    color:lightblue !important;
    border:1px solid lightblue;
    border-radius:50%;
    padding:8px;
    overflow:hidden;
    float:right;
    transform: translateX(10px) translateY(-10px);
}
    .tooltip-gwfnet-anchor:hover {
        color: cadetblue !important;
        border: 1px solid cadetblue;
    }

.gwf-map-textonly {
    position: absolute;
    font-size: 11px;
    padding: 0px;
    margin: 0px;
    min-width: 20px;
    text-align: center;
}

.gwf-map-label {
    position: absolute;
    font-size: 12px;
    /*line-height: 12px;*/
    /*padding: 3px;*/
    color: black;
    background-color: white;
    padding: 0px;
    margin: 0px;
    /*border-radius: 25px;*/
    
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);*/
    /*border: 3px solid gray;*/
    min-width: 20px;
    text-align: center;

}

.gwf-map-label-multiple {
    position: absolute;
    font-size: 12px;
    line-height: 20px;
    color: black;
    background-color:lightblue;
    padding: 3px;
    margin: 0px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    /*border: 3px solid gray;*/
    text-align:left;
}

.text-labels {
    font-size: 9pt;
    font-family:Arial Black;
    color: rgba(0,0,0,0.4);
    min-width: 1000px;
}

.f1 {
    font-size:18pt;
}


.global-map-container {
    /*border: 2px solid black; /*important statement for layout */
    /*width: 100vw;*/
    width:calc(100vw - 20px); /*experimental*/
    position: relative;
    margin: auto 0;
    text-align: center;
}

.gwf-map-numbers-div {
    /*
        <p>'s are created in gwf_leaflet.js->_addNumberedMapItem
        add "overflow:scroll|hidden|etc" to enclosing splitpane (pane 1)
    */
    background-color: transparent;
    font-size: 13pt;
    z-index: 1;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}
    .gwf-map-numbers-div p {
        /*
            paragraph coloring controlled by gwf_leaflet.cs 
            This is for interaction between list and map
            search for globalmapSiteNumberingParagraphItemColor
        */
        padding: 0px;
        margin: 0px;
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
        user-select: none; /* Standard */
        cursor: default;
        border: 1px solid transparent;
        margin: 10px;
    }
        .gwf-map-numbers-div p:hover {
            border: 1px solid green;
        }

@media (max-width: 480px) {
    .gwf-map-numbers-div {
        font-size: 11pt;
    }
}



.gwf-map-div {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 700px;
    max-height: 700px;
    border: 0px solid blue;
}

    .gwf-map-div .gwf-map {
        border-radius: 50%;
        height: 100%;
        width: 100%;
        background-color: #aad3df;
        padding: 1px;
        border: 1px solid lightblue;
        cursor: default; /* misnomer for arrow (i.e., not hand-finger thing misnamed "pointer") */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        z-index: 0; /*safari bug problem*/
    }

.gwf-map-control-box-div {
    padding: 10px;
    width: 330px;
    text-align: center;
    margin: 0 auto;
    margin-top: 40px;
    border: 1px solid gray;
    border-radius: 20px;
    /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);*/
}

.gwf-map-loading-panel {
    top: 120px;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right, #fafafa,#ffffff, #f4f4f4);
    position: fixed;
    z-index: 1;
    padding-top: 70px;
    text-align: center;
    opacity: 1.0;
}
    .gwf-map-loading-panel p {
        font-size: 14pt;
        /*color:darkblue;*/
    }




.gwf-map-button-minus {
    /*left: calc(50% - 70px);*/
}

.gwf-map-button-plus {
    /*left: calc(50% + 5px);*/
}

/* Region Smallmap--------------------------------------------------------------  */

.gwf-smallmap-location-info {
    display: none;
    background-color: red; 
    width: 100%;
}

.gwf-smallmap-location-div {
    /*The Container of the Map and all controls*/
    border: 1px dashed cadetblue;
    border-radius:10px;
    padding: 2%;
    width:96%;
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
    display: inline-block;
    /*background-color: yellow; /* debug HOWTO.WHICH */
}

.mapshapeta {
    width: 299px;
}

.gwf-smallmapviewonly {
    height: 450px;
}

.gwf-smallmap-location-div .gwf-smallmap-div {
    position:relative;
    min-width: 330px;
    min-height: 330px;
    width:100%;
    height:95vw;
    max-width:900px; /*100% too large here-beyond; map becomes cumbersome!*/
    max-height:600px;
    margin: 0 auto;
}

    .gwf-smallmap-location-div .gwf-smallmap-div .gwf-map {
        border-radius: 5px; /*okay to change*/
        /* 
            Map Internals 
            Change not recommended below 
        */
        height: 100%; /* do not change WRONG PLACE */
        width: 100%; /* do not change WRONG PLACE */
        background-color: #aad3df; /* do not change */
        border: 1px solid lightblue; /* do not change */
        cursor: default; /* do not change */
        z-index: 0; /* do not change */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);/* New 2021-11-01 */
        border-radius: 20px;
    }
.gwf-smallmap-location-div .gwf-smallmap-controls-div {
    /*The Map Controls*/
    display: table;
    border: 1px solid gray;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    background-color: #f7fff7; /*gwfnet-palegreen background*/
}

.gwf-smallmap-location-div .gwf-smallmap-location-fields-div {
    margin-top: 3px;
    min-height: 100px;
}

    .gwf-smallmap-location-div .gwf-smallmap-location-fields-div label {
        display: block;
        margin-top: 5px;
    }





.leaflet-top .leaflet-control {
    margin-top: 100%;
}

.leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
}

.leaflet-left .leaflet-control {
    margin-left: 9999px;  /*push to oblivian if we cannot get rid of +- control*/
}

.leaflet-right .leaflet-control {
    margin-right: 10px;
}