/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Global Institute for Water Security | Global Water Futures
 * Copyright (c) 2020 All Rights Reserved
 * Author: Stephen O'Hearn
 *
 * Main style sheet for the GWFNet website.
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*howto.colors-of-logo:
    blue   #00508f rgb(0, 80, 143)
    green: #1d915c rgb(29, 145, 92)
    yellow #e6b252 rgb(230, 178, 82)
*/

/*
    howto.why-doesnt-calc-work?
    Not herehow: calc(100%-15px)
    Rather herehow: calc(100% - 15px)
    You're welcome!
*/
.debug-div {
    font-size:20pt;
    position:fixed;
    z-index:5000;
}
.clr {
    clear: both;
}
.gwf-header{
    /* height:115px; BUGFIX removed height*/
}

textarea,
pre {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

.page-redisplay-div {
    display: none;
    position: relative;
    top: 30vh;
    background-color:rgba(226, 235, 241, 1);
    text-align:center;
    padding:50px;
    padding-top:90px;
    padding-bottom:80px;
    width:200px;
    margin:0 auto;
    border-radius:20px;
}

.page-loading-div-for-indexes {
    display: none;
    position: relative;
    left: 20vw;
    top: 30vh;
}
.page-loading-div {
    display:none;
    position: relative;
    left: 50px;
    z-index: 500;
}
.page-loading-div-image{
    width:40px;
    height: 40px;
}
.page-loading-text-div {
    padding: 0px;
    display: inline-block;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: black;
    font-size:14px;
    font-weight:600;
    transform: translateX(8px) translateY(-14px);
}

.gwf-exception-message {
    margin-top: 40px;
    padding: 30px;
    font-size: 12pt;
    background-color: rgba(226, 235, 241, 1);
}
.gwf-exception-stacktrace {
    margin-top: 10px;
    padding: 30px;
    font-size: 10pt;
    font-weight:100;
    background-color: lavender;
}

.gwf-exception-message h2,
.gwf-exception-stacktrace h2 {
    transform: translateX(-15px);
    font-family: Arial;
    font-weight:200;
    font-size: 16pt;
    margin-top:0px;
}

.gwf-instructions-buttons-div {
    text-align: center;
    padding: 20px;
}

.gwf-instructions-div {
    position:absolute;
    text-align: left;
    color: dimgray;
    padding: 20px;
    z-index: 5000;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    border: 3px solid gray;
    border-radius: 15px;
    width:400px;
    left:calc(50% - 200px);
    transform: translateY(-30px);
}
.advanced-searchbox-links {
    border: 0px solid red;
    line-height:20px;
}
.gwf-metadata-editor-warning {
    background-color: darkblue;
    color: white;
    padding: 3px 12px;
    border-radius: 7px;
}
.cellophane-wrap {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 101%;
    height: 101%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.05);
}

.gwf-close-filter-button {
    font-family: Arial;
    font-size: 16px;
    background-color: lightgray;
    color: black;
    z-index: 40; /*was 1000 2025-04-16*/
    position: absolute;
    top: 5px;
    right: 5px;
    text-align: center;
    width: 24px;
    height: 24px;
    border: 2px solid darkgray;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
    .gwf-close-filter-button:hover {
        background-color: red;
        color: white;
        cursor: default;
        border: 2px solid gray;
    }
    .gwf-close-filter-button:active {
        background-color: darkred;
        border: 2px solid black;
    }

.gwf-save-filter-button {
    font-family: Arial;
    font-size: 16px;
    background-color: lightgray;
    color: black;
    z-index: 1000;
    position: relative;
    top: 5px;
    right: 5px;
    text-align: center;
    width: 100px;
    height: 24px;
    border: 2px solid darkgray;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
    .gwf-save-filter-button:hover {
        background-color: darkblue;
        color: white;
        cursor: default;
        border: 2px solid gray;
    }
    .gwf-save-filter-button:active {
        background-color: blue;
        border: 2px solid black;
    }



.gwf-advanced-search-global {
    background-image: url(/images/world_background_only.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: cover;
    margin: 0 auto;
    height: 325px;
    width: 325px;
    text-align: center;
    margin-bottom: 50px;
    margin-top:-90px;
}

.gwf-worldly-inputter {
    text-align: center;
    width: 100%;
    margin-left: 0;
    border-radius: 50%;
    border-bottom: 2px dashed black;
    border-top: 1px dashed black;
    background-color: rgba(232, 240, 254, 0.4);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:16px;
    transform: translateY(15px);
}
    .gwf-worldly-inputter:hover {
        color: black;
        background: white;
        border-bottom: 2px dashed black;
        border-top: 1px dashed black;
    }

/*
.gwf-inconspicuous-reference-number-label {
    display: inline-block;
    color: white;
    font-size: 9pt;
    padding: 2px 10px;
}
*/

.gwf-advanced-search-button-container {
    background-color: rgba(255, 255, 255, 0.8);
    border: 3px solid gray;
    border-radius: 15px;
    padding: 10px;
    width:180px;
    margin:0 auto;
    margin-top:40px;
}
    .gwf-advanced-search-button-container div {
        text-align:left;
    }

.gwf-advanced-search-button-magnifier {
    background-image: url(/images/magnifyingglassLEFT.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: cover;
    width: 127px;
    height: 177px;
    background-size: 127px 177px;
    pointer-events: none;
}

.gwf-advanced-search-instruction-div {
    margin-top: 50px;
    margin-bottom: 8px;
}

.gwf-advanced-search-instruction-number {
    background-color:red;
    color:white;
    width:38px;
    height:38px;
    text-align:center;
    vertical-align:top;
    border-radius:50%;
    font-size:25px;
    display: inline-block;
    margin-right:5px;
}

.gwf-advanced-search-instruction-text {
    width:calc(100vw - 90px);
    display: inline-block;
    line-height:20px;
}
.gwf-advanced-search-search-example-span {
    font-family: courier;
    text-decoration: underline;
    color:brown;
    font-weight:700;
}
.gwf-advanced-search-instruction-largetext {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 16pt;
    font-weight: 600;
    margin-top:1px;
}
.gwf-advanced-search-instruction-smalltext {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 10pt;
    font-weight: 200;
}



.gwf-advanced-search-title {
    padding-top: 100px;
    margin: -10px 0px;
}

.gwf-advanced-search-field-group-highlighter {
    margin-left:12px;
    padding:20px;
    width: calc(100vw - 100px);
    background-color:cornsilk;
    border-radius:20px;
}

.gwf-global-search-tsv-field {
    overflow: scroll;
    /*
        A big howto (lots of googling!)
        -------------------------------
        white-space:nowrap;---->to wrap on NEWLINEs only, not herehow, 
        instead use <textarea wrap="off">... in creating the Text Area itself

        howto.wrap only on hard returns!!! Do not use wrap=xx"hard"xx it is wrap="off" (ignore visual studio's redline protest)
    */
    width: 100%;
    height: 50vh;
}
/*
.gwf_tab {
    z-index: 1;
    cursor: pointer;
    background-color: lavender;
    color: black;
    cursor: pointer;
    margin-right: -6px;
    border-top-right-radius: 12px;
    padding: 5px;
    border: 1px solid #888;
    margin-top: -10px;
    display: inline-block;
    height: 30px;
    white-space: nowrap;
    line-height: 30px;
}

@media only screen and (max-width: 401px) {
    .gwf_tab {
        width:100%;
    }
}

*/


.gwf-indented-textarea {
    margin-left: 15px;
    width: calc(100% - 30px);
    margin-bottom: 10px; /*2025-05-28*/
}
    .gwf-indented-textarea textarea {
        vertical-align: top; /* IMPORTANT STATEMENT! */
        resize: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 75px;
        width: 100%;
    }


.gwf-default-ta {
    resize: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 75px;
    width: 100%;
    margin-bottom:10px;/*2025-05-28*/
}

.gwf-footer {
    border: 0px solid red;
    background-color: rgba(226, 235, 241, 0);
    padding: 7px 7px;
    width: calc(100% - 20px);
    transform: translateY(-120px);
}
.gwf-bg-img {
    position: fixed;
    left: 0;
    top: 0px;
    min-height: 100%;
    min-width: 100%;
    background-color: #3567a2;
    z-index: -1;
}

.gwf-account-settings-container{
    min-height:100vh;
}

.gwf_table {
    min-width:740px;
    border-collapse: collapse;
    table-layout: fixed;
    margin-left: 10px;
    margin-bottom: 10px;
}

.gwf_tablerow {
    border: 1px solid #bfc0c4;
}

.gwf_tablecolumn {
    border: 1px solid #bfc0c4;
    background-color: #e5e5ef;
}

.gwf_table_label {
}

.gwf_table_textbox {
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.gwf_table_textarea {
    border: none;
    outline: none;
    width: 95%;
}

.gwf_table_dropdown {
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.gwf_table_selectone fieldset input {
    margin-left: 10px;
}


.gwf_table_selectmany input {
    margin-left: 10px;
    margin-right: 4px;
}

.gwf_table_selectone {
}

.gwf_table_selectmany {
}


.gwf_label.gwf-view-table-label {
    margin: 0;
    margin-top: 40px;
}


.gwf-vtable-container {
    overflow-x: auto;
    margin-top: 10px;
    /*margin-bottom: 0px;*/
    margin-bottom: 10px;
    margin-left: 10px;
    /*max-height: 70vh;*/ /*New 2025-06-10*/
    /*overflow: auto; /*New 2025-06-10*/
    /*border: 1px solid navy; /*New 2025-06-10*/
}
.gwf-vtable-div {
}

.gwf-view-vtable-div {
    overflow-x: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    /*


        this space left blank





        Helpful max height setting: 
        Sorry, gwf-vtable-div (misnomer for the editor version) is in vtable.css
    */
    min-height: 100px; /* 2025-06-26 */
    max-height: calc(100vh - 200px); /* Fix vtable height here so that horiz scrollbar is not hopelessly far away 2025-06-26 */
    /*border: 1px solid red;*/ /* 2025-06-26 */
    width: fit-content !important; /* 2025-06-26 */
    block-size: fit-content !important; /* 2025-06-26 */
}

.gwf-view-vtable {
    border-collapse: collapse;
    text-align: left;
    border: none;
    margin-bottom: 12px;
    background: #e5e5ef;
    border-top: 1px solid cadetblue;
    border-bottom: 1px solid cadetblue;
}

    .gwf-view-vtable tr {
        border: none;
        border-collapse: collapse;
    }

    .gwf-view-vtable th {
        font-weight: normal;
        padding: 2px;
        text-align: left;
    }

    .gwf-view-vtable tr:nth-child(even) {
        background-color: rgba(245, 245, 220, 0.4);
    }

    .gwf-view-vtable tr th {
        border-bottom: 1px solid cadetblue;
    }

    .gwf-view-vtable tr td {
        border: none;
    }

        .gwf-view-vtable tr td.tdcontainer {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 2px;
            min-width: 300px;
            max-width: 500px;
        }

        .gwf-view-vtable tr td.tdcontainer {
            vertical-align:top; /* IMPORTANT STATEMENT! */
            height: 25px;
        }

















.gwf-view-container-for-index {
    background-color: whitesmoke; /*----experimental--rgba(226, 235, 241,0.0);*/
    margin: auto;
    /*width: calc(100% - 20px);*/
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 55px;
    /**/
    /**/
    /**/
    margin-left: 10px;
    margin-right: 10px;
}


.gwf-view-container-for-record {
    background-color: rgba(226, 235, 241, 1); /*#E2EBF1*/
    padding: 20px;
    padding-top: 0;
    border-radius: 55px;
    min-height: 100vh;
    /**/
    /**/
    /**/
    margin-left: 10px;
    margin-right: 10px;
}
    .gwf-view-container-for-record:hover {
        background-color: rgba(226, 235, 241, 1);
    }


@media only screen and (max-width: 401px) {
    .gwf-view-container-for-index {
        border-radius: 5px;
        margin-left: 1px;
        margin-right: 1px;
    }
    .gwf-view-container-for-record {
        border-radius: 5px;
        margin-left: 1px;
        margin-right: 1px;
    }
}

.gwf-edit-container {
    width:95%;
    margin: 0 auto;
    padding: 5px;
    margin-bottom: 140px;
    border-radius: 55px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    background-color:#fcfcfc; 
    /*border:2px solid blue;*/
}
.gwf-advanced-search-container {
    /*width: calc(100vw - 20px);*/
    margin: 0 auto;
    padding: 10px;
    margin-top: 0px;
    margin-bottom: 140px;
    border-radius: 55px;
    /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);*/
    box-shadow: none;
    background-color: #fcfcfc;
    border: 0px solid blue;
    /*background: linear-gradient(to right, #f4f4f4,rgba(226, 235, 241, 1), #f4f4f4);*/
}

.gwf-advanced-search-highlight-container {
    padding-top: 5px;
    /*background-color: #e2ebf1;*/
    /*background: linear-gradient(to right, #f4f4f4,rgb(57, 144, 120, 0.60), #f4f4f4);*/
    padding-bottom: 20px;
    border-radius: 10px;
    margin-bottom: 40px;
    /*margin-top: -30px;*/

    border: 0px solid red;
}

.gwf-view-container-for-record:hover {
    background-color: rgba(226, 235, 241, 1);
}

.gwf-view-textbox {
    display: inline-block;
    min-width: 200px;
    min-height: 20px;
    height: 20px;
    max-height: 20px;
    border: none;
    margin-left: 10px;
    background-color: none;/*Changed 2023-01-16 rgb(227, 241, 250);*/
    border-radius: 10px;
    padding: 6px 8px;
    margin-bottom: 10px;
}
.gwf-view-table-cell {
    min-height: 20px;
    height: 20px;
    max-height: 20px;
}
.gwf-view-selectone {
    color: black;
}

.gwf-view-dropdown {
    min-height:20px;
    background-color:none;
}

.gwf-view-dropdown-standalone {
    margin-left: 20px;
    margin-bottom: 10px;
}


.gwf-view-weblinktextarea {
    vertical-align: top; /* IMPORTANT STATEMENT! */

    min-height: 34px;
    margin-left: 10px;
    background-color: none; /*Changed 2023-01-16  rgb(227, 241, 250); /*view background "here-against-which" is rgb(226, 235, 241);*/
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    /*border: 1px solid rgba(0, 0, 0, 0.08); /*experimented 2023-01-16*/
}







.gwf-related-metadata-div {
    border:0px solid red;
    padding-left: 25px;
    padding-right: 25px;
}

    .gwf-related-metadata-div .gwf-related-metadata-span {
        padding-top: 0px;
        display: block;
    }

/*        .gwf-related-metadata-div .gwf-related-metadata-span .gwf-related-metadata-link {
            padding-right: 20px;
        }
*/

        .gwf-related-metadata-div .gwf-related-metadata-span .gwf-related-metadata-link {
            padding-right: 0px; /*experimental--20px;*/
            display: inline-block; /*experimental--*/
            line-height: calc(0.8em + 8px); /*1.3em; /*experimental-- ----------------------------------------------------------------------------------------------------------------------------*/
            /*font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
            /*font-family:Cambria, Cochin, Georgia, Times, Times New Roman, serif*/
            /*font-family:Verdana, Geneva, Tahoma, sans-serif;*/
            /*font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif*/
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .gwf-related-metadata-div .gwf-related-metadata-span .gwf-related-metadata-link-removed {
            padding-right: 10px;
            text-decoration: line-through;
        }






.del {
    position:absolute;
    cursor: default;
    transform: translateX(-15px) translateY(8px);
    display: none;
    height: 15px;
    width: 15px;
    background-color: red;
    border-radius: 50%;
    color: white;
    font-size: 7pt;
    padding: 0px;
    text-align: center;
}

    .del:hover {
        background-color: yellow;
        color: red;
    }

.deleter {
    display: none;
}

.gwf-back-to-search {
    z-index: 12;
    display: block;
    cursor: pointer;
    position: absolute;
    left: 10%;
    width: 30px;
    height: 30px;
}

.gwf-to-editor-icon {
    z-index:12;
    display: block;
    cursor: pointer;
    position: absolute;
    left: 25%;
    width: 30px;
    height: 30px;
}
.gwf-show-divisions-filter-icon {
    z-index: 12;
    display: block;
    cursor: pointer;
    position: absolute;
    left: 50%;
    width: 30px;
    height: 30px;
}
.gwf-show-divisions-filter-icon-advsearch {
    position: relative;
    left:170px;
}
.gwf-show-divisions-filter-icon-homepage {
    /*cross-reference gwf-homepage-divisions-filter-image*/
    position: relative;
    left: 2px;
    top: 6px;
    display: inline-block;
}

.gwf-divisions-filter-warning-div-1 {
    color:green;
    font-family:Arial;
    font-size:12pt;
    transform:translateY(-20px);
    border:1px solid black;
    padding:4px;
    margin:0 auto;
    width:70%;
}
.gwf-divisions-filter-warning-div-2 {
    background-color:rgba(226, 235, 241, 0.6);
    border-radius:10px;
    color: black;
    font-family: Arial;
    font-size: 12pt;
    border: 1px solid darkgray;
    padding: 4px;
    margin: 0 auto;
    width:50%;
    text-align:left;
    margin-top:20px;
    padding:15px;
}
.gwf-divisions-filter-warning-div-3 {
    background-color: rgba(226, 235, 241, 0.6);
    border-radius: 10px;
    color: black;
    font-family: Arial;
    font-size: 12pt;
    border: 1px solid darkgray;
    padding: 4px;
    margin: 0 auto;
    width: calc(100% - 70px);
    text-align: left;
    margin-top: 20px;
    padding: 15px;
    transform: translateY(-10px);
}

.gwf-to-view-icon {
    z-index: 12;
    display: block;
    cursor: pointer;
    position: absolute;
    left: 25%;
    width: 30px;
    height: 30px;
}

.gwf-copy-icon {
    z-index: 12;
    display: block;
    cursor: pointer;
    position: absolute;
    left: 75%;
    width: 30px;
    height: 30px;
}
.gwf-record-accoutrement-image {
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: -1;
}
    .gwf-record-accoutrement-image:hover {
        opacity: 1.0;
    }
.gwf-homepage-divisions-filter-image {
    /*cross ref gwf-show-divisions-filter-icon-homepage*/
    width: 24px;
    height: 24px;
    opacity: 0.4;
}

.gwf-homepage-divisions-filter-image:hover{
    opacity:1;
}
.gwf-record-top-accoutrements {
    /*border: 1px solid red; /* howto.whereis */
    /* important: at least 1 px of height is mandatory for this to position items hereafter around 
        Use margin-top and margin-bottom to set where the accoutrements (e.g., edit pencil, copy icon, etc.) sit
    */
    margin-top: 1px; /*required!!*/
    margin-bottom: 1px; /*required!!*/
    height: 30px;
}

.gwf-related-metadata-target-backing {
    position: absolute;
    left: calc(50%);
    top: -10px; /*MOVE MAGIC DOT UP AND DOWN */
    width: 17px;
    height: 17px;
    cursor: default;
    background-color: mediumaquamarine;
    color: mediumaquamarine;
    z-index: 99;
    border-radius: 50%;
}

    .gwf-related-metadata-target-backing:hover {
        background-color: cadetblue;
        color: cadetblue;
    }
    .gwf-related-metadata-target-backing .gwf-related-metadata-target {
        position: absolute;
        z-index: 100;
        left: 2px;
        top: 2px;
        width: 13px;
        height: 13px;
        cursor: default;
        background-color: mediumaquamarine;
        color: mediumaquamarine;
        font-size: 100pt;
        outline: none;
        border: none;
        border-radius: 0px;
        padding: 0px;
        margin-right: -8px;
        margin-bottom: 32px;
    }

        .gwf-related-metadata-target-backing .gwf-related-metadata-target:hover {
            background-color: mediumaquamarine;
        }

    .gwf-related-metadata-target-backing .gwf-related-metadata-target-TESTING {
        position: absolute;
        z-index: 100;
        left: 3px;
        top: 3px;
        width: 100%;
        background-color: yellow;
    }

.gwf-title {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: 2;
    width: 100%;
    text-align: center;
}

.gwf-title-map {
    padding-top: 30px;
    margin-bottom: 0px;
}

@media only screen and (max-width: 768px) {
    .gwf-title-map {
        padding-top: 30px;
        margin-bottom: 0px;
        font-size: 18pt;
    }
}


.gwf-dropdown-expansion-menu-stephen {
    background-color: white;
    z-index: 2;
}

.gwf-copy-to-different-template-div {
    display: none;
    border-radius: 10px 10px;
    background-color: honeydew;
    padding: 30px;
}

.gwf-transfer-same-template {
    color: fuchsia;
}

.gwf-a {
    padding-top: 0px;
    padding-top: 0px;
    padding-left: 0px;
    color: lightseagreen;
    cursor: pointer;
    text-decoration: none;
}

    .gwf-a:hover {
        text-decoration: underline;
    }


.gwf-a-landing-page {
    font-size:13pt;
    padding-left: 0px;
    color: #999;
    cursor: pointer;
    text-decoration: none;
}
    .gwf-a-landing-page:hover {
        background-color: white;
        text-decoration: none;
    }



.gwf-status-indicator {
    position: fixed;
    bottom: 0px;
    white-space: nowrap;
    overflow: hidden;
    left: 5px;
    font-family: Arial;
    font-size: 9pt;
    margin-bottom: 0px;
    color: black;
    background-color: white;
    z-index: 1000;
}

.advOptDiv {
    border-left: 1px dotted lightgray;
    margin-left: 15px;
    padding-left: 5px;
}

.no-javascript-message {
    background-color: red;
    color: white;
    font-size: 20pt;
}

.no-cookies-message {
    display: none;
    background-color: cornsilk;
    color: darkgray;
    font-size: 20pt;
}
.gwf-EditModeWarning-container {
    width:100%;
    position:absolute;
    top:105px;
}
.gwf-EditModeWarning {
    margin: 0 auto;
    position: relative;
    width: 130px;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    background-color: red;
    color: white;
    font-weight: 700;
    font-size: 24px;
}

.gwf-landing-page {
    border: 0px solid green; /*dbg*/
    display: block;
    /*min-height: 900px;*/ /* HEIGHT OF LANDING PAGE - now a consequence of homepage upper and lower containers herewithin */
    position: relative; /*new in GWFNet2*/
    opacity:0;/*new in WaterNet*/
}
.gwf-snowmobile-div {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background-size: cover;
    /*height: 580px;*/
    height:530px;
    width: 100%;
    margin-top: 0px;
}
.gwf-snowmobile-image-container {
    overflow: hidden;
    background: url(/images/bg_home_page.png) no-repeat center;
    background-size: cover;
    height: 999px; /*wn*/
}
.gwf-snxwmobile {
    background-image: url(/images/snowmobile.png);
    background-repeat: no-repeat;
    opacity: 0.7;
    display: block;
    right: 11%;
    z-index: 80;
    position: absolute;
    background-color: transparent;
    width: 276px;
    height: 116px;
    background-size: 200px; /*wn*/
    top: 320px;
}
.homepage-upper-container {
    font-family: Lato-Bold;
    box-sizing: border-box;
    position: relative;
    background-color: transparent;
    width: 100%;
    height: 200px;
    padding-top: 40px;
    text-align:center;
    border: 0px solid red;
}

.homepage-lower-container {
    box-sizing: border-box;
    position: relative;
    background-color: transparent;
    width: 100%;
    min-height: 630px;/*do not set the height*/
    margin-top: 150px;
    padding: 40px;
    clear:both; /* important statement */
}

.gwf-snowmobile-text-large {
    color: honeydew;
    font-size: 2.6rem;
    font-weight:900;
    line-height: 2.6rem;
}

.gwf-snowmobile-text-small {
    color: white;    
    font-size: 1rem;
    line-height:1.4rem;
}

.gwf-snowmobile-attribution {
    transform: translateY(-880px);
    color: white;
    font-family: Arial;
    font-size: 14px;
    padding-left: 30px;
    display:none;
}

.homepage-tile {
    background-color: rgba(255,255,255, 0.7);
    color: #333;
    /*flXXXoat: leftBAD--no! messes up heighting of the containing div;*/
    display: inline-block;
    position: relative;
    padding: 20px;
/*    height: 120px;
    height: 220px;
    min-height: 120px;
    max-height: 120px;*/
    overflow: hidden;
    line-height: 1rem;
    width: 170px;
    width: 222px;
    margin-left: -20px;
    margin-top: -20px;
    transform: translateX(20px) translateY(20px);
    margin-left: -40px;
    margin-top: -3px;
    transform: translateX(40px) translateY(40px);
    border-radius: 10px;
    border: 1px solid #aaa;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
    .homepage-tile:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        border: 1px solid #999;
        background-color: white;
        z-index: 2;
    }

    .homepage-tile:focus {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        border: 1px solid #999;
        background-color: white;
        z-index: 3;
    }





.gwfnet-globalsearch-title-div {
    margin: 0 auto;
    width: 360px; /* !! */
    font-family: Arial;
    margin-top: 10px;
    text-align: center;
}


.gwf-global-search-type-container {
    padding-top: 0px;
    padding-bottom: 8px;
    border: 0px solid red; /*dbg*/
    margin: 0 auto;
}

    .gwf-global-search-type-container div {
        width: 210px;
        text-align: left;
        margin: 0 auto;
        line-height: 20px;
        white-space: nowrap;
        border: 0px solid green;
        color:darkgray;
    }


.search-example-div{
    display:none;
    color:black;
    background-color:aliceblue;
    z-index:1000;
    padding:20px;
    border-radius:15px;
    font-size:11pt;
    width:60%;
    min-width:350px;
    max-width:100vw;
    margin:0 auto;
    text-align:left;
    position:relative;
    border:1px solid black;
}
.q-example {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: blue;
    margin-top: 12px;
    font-size:10pt;
    line-height:10pt;
}
.q-example-sublevel {
    color: gray;
    margin-top: 4px;
    font-size: 8pt;
    line-height: 8pt;
    padding-left: 10px;
}

.gwf-quick-links-container {
    padding-top: 50px; /* MOVE QUICKLINKS AWAY FROM GLOBAL SEARCH */
    border: 0px solid red; /*dbg*/
    margin: 0 auto;
}

    .gwf-quick-links-container div {
        width: 120px;
        text-align: left;
        margin: 0 auto;
        line-height: 25px; 
        white-space: nowrap;
        border: 0px solid green; 
    }







.gwf-template-selector-div {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
}

.margin30-div {
    margin-bottom: 30px;
}

.gwf-template-selector-dropdown {
    position: relative;
    width: 320px;
    border: none;
    min-height:32px;
    margin-left:10px;
}



.gwf-template-selector-text {
    position: relative;
    z-index: 2;
    font-size: 16pt;
    padding-bottom: 0px;
}


.gwf-template-selector-appendix {
    position: relative;
    z-index: 2;
    color: gray;
    padding-left: 108px;
    font-size: 8pt;
}


.gwf-search-textbox {
    margin-right: 5px;
    transform: translateY(-2px);
    /*width: 150px;*/
    width: calc(100% - 75px);
    /*max-width: 350px;*/
    max-width:500px;
    font-family:Courier New, Courier, monospace;
}
.gwf-homepage-search-instructions {
    font: arial;
    font-size:9pt;
    color: darkgray;
    margin-bottom:8px;
}

.filter-by-division-wording {
    position:absolute;
    color:#555;
    width:50px;
    font-size:9pt;
    transform:translateX(22px) translateY(-30px);
    line-height:9pt;
}

.gwf-reference-number-container-landing-page {
    padding: 4px 0; /* MOVE GLOBAL SEARCH AWAY FROM GWFNet LETTERING ABOVE IT AND QUICKLINKS BELOW IT*/
    border: 0px solid red; /*dbg*/
    text-align: center;
    margin: 0 auto;
}
.gwf-reference-number-container {
    padding: 0;
    padding-bottom:32px;/* MOVE TEMPLATE SELECTER AWAY*/
    border: 0px solid red; /*dbg*/
    text-align: center;
    margin: 0 auto;
}
.gwf-reference-number-container-adv-search {
    padding: 0;
    padding-bottom: 8px; /* MOVE GLOBAL SEARCH AWAY */
    border: 0px solid red; /*dbg*/
    text-align: center;
    margin: 0 auto;
}


.gwf-post-reference-number-div {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    width: 330px;
    margin-top: 0px;
    margin-bottom: 30px;
}

.gwf-reference-number-field {
    border:20px solid red;
    width: calc(100% - 150px);
}



.gwf_section_header {
    font-size: 20pt;
    padding-bottom: 20px;
}




.gwf-center {
    margin: 0 auto;
    text-align: center;
}

.gwf-button {
    /*z-index: 1000;*/
    z-index:10;
    text-align: center;
    font-family: Arial;
    font-size: 18px;
    cursor: pointer;
    background-color: beige;
    color: black;
    height: 35px;
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    cursor: pointer;
    border-radius: 10px;
    padding: 0px;
    border: 1px solid cadetblue;
    margin: 0 auto;
}

    .gwf-button:hover {
        background-color: lightgreen;
        border: 1px solid cadetblue;
    }

.gwf-button-disabled {
    background-color: lightgray;
    color: darkgray;
}

    .gwf-button-disabled:hover {
        background-color: darkgray;
        color: lightgray;
        border: 1px solid red;
    }

.gwf-button-long {
    height: 35px;
    width: 280px;
    min-width: 180px;
    max-width: 180px;
}

.gwf-button-smallfootprint {
    height: 28px;
    width: 280px;
    font-size: 10px;
    transform: translateY(-2px);
}

.gwf-button-very-long {
    height: 35px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
}


.gwf-map-button-clear {
    transform: translateX(20px) translateY(-36px);
}

.gwf-no-map-available{
    background-color:#ebebe7;
    margin-left:10px;
    text-align:left;
    padding:5px;
    margin-bottom:30px;
}

.gwf_label {
    margin: 0;
    color: #222;
    font-size: 14pt;
}

.gwf_textbox {
    width: 340px;
    margin-left: 10px;
    background-color: #eee;
    border-radius: 10px;
    padding-left: 4px;
    padding-bottom: 7px;
    padding-top: 4px;
    padding-right: 4px;
    border: none;
    margin-bottom: 10px;
}

.gwf_textbox_login {
    width: 100px;
}

.gwf-map-textbox-small {
    width: 100px;
}

.gwf-map-textbox {
    width: 300px;
}

.gwf_textarea {
    width: 100%;
    margin-left: 10px;
    background-color: #eee;
    color: #222;
    border-radius: 10px;
    padding-left: 4px;
    padding-bottom: 7px;
    padding-top: 4px;
    padding-right: 4px;
    border: none;
}

.gwf-view-container-for-search-result-list {
    background-color: rgba(170,200,210,1.0);
    padding: 20px;
    border-radius: 55px;
    min-height: 100vh;
    margin-left: 10px;
    margin-right: 10px;
}

.gwf-divisions-checkbox-div {
    line-height: 14pt;
    box-shadow: 0px 0 12px rgba(0, 0, 0, 0.7);
    background-color: white;
    /*padding: 20px;*/
    width: 350px;
    display: block;
    position: absolute;
    top: 30px;
    left: calc(50vw - 150px - 20px);
    opacity: 1;
}

.division-filter-title-div{
    font-family:Arial;
    font-size:18pt;
    padding:8px;
}

.gwf-divisions-checkboxes {
    background-color: rgba(226, 235, 241, 1);
    height: 350px;
    max-height: calc(100vh - 150px);
    overflow-y: scroll;
    padding: 20px;
}

.cbic {
    float:left;
    display: inline-block;
    position: relative;
}
.cbi {
    line-height: 16pt;
    display: inline-block;
    width: 90%;
    margin-left:4px;
    padding-bottom:18px;
}
.gwf-divisions-div {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: rgba(180, 180, 180, 0.9);
    z-index: 1000;
    left: 0;
    top: 0;
}

.gwf-result {
    margin: 0 auto;
    background-color: white;
    padding: 5px 5px;
    margin-bottom: 10px;
    margin-top: 15px;
}
.gwf-result-nav {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    background-color: transparent;
    border-radius: 10px;
}
.gwf-result-box {
    display: block;
    position: relative;
    background-color: white;
    margin: 0 auto;
    margin-bottom: 20px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 10px;
    word-wrap: break-word;
    width: calc(100vw - 74px);
    color: #777;
}
.gwf-result-title-a{
    padding:20px;
    display:block;
    font-size:14pt;
    line-height:14pt;
}
.gwf-result-header {
    font-size: 10pt;
    /*font-weight: 600;*/
    color: #333;
}
.gwf-result-header-match {
    font-size: 10pt;
    /*font-weight: 600;*/
    color: #333;
}

.gwf-result-display-number {
    position: absolute;
    right: 15px;
    top: 5px;
    color: black;
    font-size: 10pt;
    text-align: right;
}

.gwf-result-display-editpencil {
    position: relative;
    right: 5px;
    top: 5px;
    width: 18px;
    height: 18px;
    opacity: 0.3;
    transform: translateX(5px) translateY(-22px);
}
.gwf-result-display-editpencil:hover{
    opacity:1.0;
}

.gwf-result_template_specifier {
    display: inline-block;
    background-color: azure;
    color: black;
    font-size: 10pt;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
    line-height: 20px;
    transform: translateX(-10px) translateY(0px);
}
.gwf-result-T-Number {
    display: inline-block;
    color:burlywood;
    font-size: 10pt;
    padding: 5px;
    margin-bottom: 5px;
}
.gwf-result-value {
    /*background-color: aliceblue;*/
    font-size: 10pt;
    padding-left: 10px;
    padding-right: 10px;
    padding:10px;
}

.gwf-result-value-match {
    /*background-color: white;*/
    font-size: 10pt;
    padding-left: 10px;
    padding-right: 10px;
    padding: 10px;
}
    .gwf-result-value-match::before {
        /*content: "**>";*/
    }
.gwf-search-result_count_div {
    padding: 0px;
    font-size: 16pt;
    margin: 0 auto;
    margin-bottom: 10px;
    text-align:center;
    /*width: 90vw;*/
    /*transform: translateX(-10px);*/
}

.gwf-tb {
    width: 200px;
    margin-left: 15px;
}

.gwf-advanced-search-column-listing {
    background: lavender;
}

/*.gwf-advanced-search-tb {
    width: calc(100% - 55px);*/ /*do not remove the spaces around minus sign or calc will not work! Account for padding also!!*/
    /*margin-left: 15px;
    height: 50px;
    border-radius: 20px;
    padding-left:20px;
    padding-right:20px;
}*/



.gwf-advanced-search-tb {
    width: calc(100% - 55px); 
    margin-left: 15px;
    height: 30px;
    border-radius: 10px;
    padding-left: 12px;
    padding-right: 12px;
}


.gwf-advanced-search-vtable-tb {
    transform: translateY(-14px);
}

.gwf-dropdown {
    width: 333px;
    padding-left: 4px;
    padding-bottom: 7px;
    padding-top: 4px;
    padding-right: 4px;
    border: none;
    margin-bottom: 10px;
    margin-left: 10px;
}


.indent{
    margin-left:15px;
}

.gwf_selectone {
    margin-bottom: 10px;
}
    .gwf_selectone fieldset input {
        margin-left: 0px;
    }

.gwf_selectmany {
    margin-bottom: 10px;

}
    .gwf_selectmany input {
        margin-right: 4px;
    }



@media screen and (orientation:portrait) {
    .gg-slider-responsive {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .gg-slide {
        line-height: 40px;
        border-radius: 5px;
        font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
        text-align: center;
        flex-shrink: 0;
        margin-left: 4px;
        margin-right: 4px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .gg-slide-span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        padding-left: 10px;
        padding-right: 10px;
    }
}


@media screen and (orientation:landscape) {

    .gg-slider-responsive {
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .gg-slide {
        border-radius: 5px;
        float: left;
        font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
        text-align: center;
        flex-shrink: 0;
        margin-left: 0px;
        margin-right: 25px;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .gg-slide-span {
        padding: 5px;
        border-radius: 5px;
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }
}

.ggmodal {
    position: fixed;
    z-index: 10000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}


.ggmodal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 350px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.gwf-modal-login-table {
    margin-left: 10px;
    /*font-size:14px;*/
}

.gwf-login-field {
    width: 200px;
    margin-bottom: 6px;
}

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.ggmodal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.ggmodal-body {
    padding: 12px 16px;
    color: black;
}

.ggmodal-footer {
    background-color: cadetblue;
    margin-top: 12px;
    color: white;
}


.gwf-weblink-textarea {
    padding-bottom: 20px;
    height: 250px;
    width: calc(100% - 20px);
    margin-left: 15px;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    border-style: none;
}

    .gwf-weblink-textarea .displayer {
        overflow: auto;
        height: 100%;
        width: 100%;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .gwf-weblink-textarea .editor {
        display: none;
        position: absolute;
        left: 0px;
        top: 0px;
        resize: none;
        margin: 0px auto;
        width: 100%;
        height: 100%;
        overflow: auto;
        border: none;
        border-style: none;
        outline: none;/*howto!!!!*/
        border-color: Transparent;
        overflow: auto;
        /*Kills wrapping if uncommented (left in for here-how!) --> white-space: pre; */
    }

.gwf-tiny-btn {
    transform: translateX(4px) translateY(-2px);
    border-radius: 6px;
    cursor: default;
    font-size: 9pt;
    height: 19px;
    width: 4px;
    min-width: 40px;
    max-width: 40px;
}

input[type="file"] {
    display: none;
}

.gwf-file-upload {
    display: inline-block;
    padding-right: 12px;
    cursor: pointer;
}

.pixer{
    display:none;
}
    .pixer.shown {
        display: block;
        height: 100vh;
        width: 100%;
    }