/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * 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!
*/


.clr {
    clear: both;
}
.gwf-header{
    /* height:115px; BUGFIX removed height*/
}

.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-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);
}
    .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%;
}

.gwf-footer {
    border: 0px solid red;
    background-color: rgba(226, 235, 241, 1);
    padding: 7px 7px;
    height: 50px;
}
.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-left: 10px;
}
.gwf-vtable-div {
}


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

.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: 300;
    display: block;
    cursor: pointer;
    position: absolute;
    left: 10%;
    width: 30px;
    height: 30px;
}

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

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

.gwf-copy-icon {
    z-index: 300;
    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-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 {
    /* 
        set at least enough to accommodate absolute-positioned landing page image 
        and GWFNet global search area pushing footer away (footer has its own padding)
    */
    border: 0px solid green; /*dbg*/
    display: block;
    min-height: 900px; /* HEIGHT OF LANDING PAGE*/

    position: relative; /*new in GWFNet2*/
}
.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-snxwmobile {
    background-image: url(/images/snowmobile.png);
    background-repeat: no-repeat;
    opacity: 0.7;
    display: block;
    right: 11%;
    top: 400px;
    z-index: 80;
    position: absolute;
    background-color: transparent;
    width: 276px;
    height: 116px;
}
.gwf-snowmobile-image-container {
    overflow: hidden;
    /*height: 580px;*/
    height: 450px;
    height: 900px;
    /*background: url(/images/lq_bg_soh_light_xCurveExp_675x450.png) no-repeat center;*/
    /*background: url(/images/lq_bg_soh_light_xCurveExp_675x450_gwfnet2.png) no-repeat center;*/
    background: url(/images/bg_home_page.png) no-repeat center;
    background-size: cover;
}


.gwf-snowmobile-text-large {
    transform: translateY(-840px); /*MOVE WRITING UP AND DOWN Welcome to GWFNet */
    color: honeydew;
    font-family: Arial Black;
    font-size: 32px;
    font-size: 28px;
    padding-left: 30px;
}

.gwf-snowmobile-text-small {
    transform: translateY(-840px);
    color: white;
    font-family: Arial Black;
    font-size: 20px;
    font-size: 18px;
    padding-left: 30px;
}

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

.gwfnet-globalsearch-title-div {
    margin: 0 auto;
    width: 180px;
    font-family: Arial;
    margin-top: 10px;
}

.gwf-googly-container {
    margin-top: 580px; /*MOVE GLOBAL SEARCH AREA UP AND DOWN (stays independent of menu expansion)*/
    margin-top: 510px;
    border: 0px solid red; /*dbg*/
    position: absolute;
    top: 0;
    width: 100%;
}

.gwf-googly {
    /*Google-looking letters on landing page*/
    font-size: 40px;
    font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    font-style: normal;
    margin: -3px;
}

.gwf-googly-Net-part {
    font-size: 40px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-style: normal;
    margin: -1px;
}


.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;
    }

.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;
}
.gwf-homepage-search-instructions {
    font: arial;
    font-size:9pt;
    color: darkgray;
    margin-bottom:8px;
}

.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-modal-login-table {
    margin-left:10px;
    font-size:14px;
}


.gwf-login-field {
/*    height:28px;
    font-size: 16px;
    font-family:Consolas;
    padding:2px 6px;
    border-radius:6px;
*/    
    width: 135px;
    margin-bottom: 6px;
}

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




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

.gwf-button {
    z-index: 1000;
    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-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-result {
    margin: 0 auto;
    background-color: beige;
    
    padding: 5px 5px;
    margin-bottom: 10px;
}

.gwf-result-box {
    background-color: rgba(226, 235, 241, 1);
    margin: 0 auto;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 10px;
    word-wrap: break-word;
    width: calc(100vw - 74px);
}

.gwf-result-header {
    font-size: 12pt;
}
.gwf-result-header-match {
    font-size: 12pt;
    font-weight: 600;
}

.gwf-result-display-number {
    display: inline-block;
    background-color:gainsboro;
    color: black;
    font-size: 10pt;
    padding: 5px;
    border-radius: 50%;
    margin-bottom: 5px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    line-height: 20px;
    transform: translateX(-0px) translateY(4px);
}

.gwf-result_template_specifier {
    display: inline-block;
    background-color:azure;
    color: black;
    font-size: 10pt;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
}
.gwf-result-T-Number {
    display: inline-block;
    color: gray;
    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-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: 250px;
    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;
}

@-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%;
    }

.fxxter {
    display: none;
}

    .fxxter.shown {
        display:block;
        margin-top: 0px;
        height: 0px;
        width: 100%;
    }