.program-version-information-div{
    font-family:Arial;
    font-size:9px;
    padding-bottom:20px;
    color:gray;
}

body {
    padding: 0px;
    font-family: "open sans","Helvetica Neue",Arial, Helvetica, sans-serif,Arial,sans-serif;
    line-height: 1.5;
    font-size: 0.9em;
    color: #222;
}

fieldset {
    border: 0;
}

a {
    text-decoration: none;
    color: cornflowerblue;
    margin:0px;
}

h1 {
    color: black;
}

h2 {
    padding-top: 30px !important;   
}

p {
    text-align: justify;
}

hr {
    height: 1px;
    background-color:bisque;
    font-size: 0;
    border: 0;
    width:calc(100% - 40px);
    margin:0 auto;
    margin-top:6px;
    margin-bottom:6px;
}
    hr.rec-divider {
        background-color: rgba(30,60,80,0.1);
        margin-top: 16px;
        margin-bottom: 16px;
    }

.ext-links-div p{
    text-align:left;
    margin:0px;
    margin-top:15px;
    margin-bottom:0px;
    line-height:1.1em;
}

.ext-links-div h2 {
    padding-top: 30px !important;
    padding-bottom: 0px !important;
    /*text-decoration:underline;*/
    text-underline-position: from-font;
    color: #333;
    font-weight: 300;
}

table {
    color:dimgray;
    border: 0px solid;
    border-collapse: collapse;
    margin-left: 0px;
    margin-right: 0px;
}
    table tr {
        border-bottom: 1px solid lightgray;
    }
        table tr th {
            vertical-align:bottom;
            text-align: left;
            color:black;
            font-weight:600;
            min-width: 60px;
            border-bottom: 2px solid gray;
            padding-bottom: 5px;
        }
        table tr td {
            vertical-align: top;
            padding: 5px 15px 30px 0px;
        }
        table tr:nth-child(2) {
            /*padding-top: 10px;this simply does not work*/
        }
        table tr:last-child {
            border-bottom: 0px solid lightgray;
        }

th,
td {
    word-wrap: break-word !important;
    max-width: 70vw !important;
}



.gwfo-table-div {
    margin-top: 30px;
    margin-left: 0px;
    margin-right: 0px;
}

.global-map-container {
    margin-top: -22px !important;
}

.STEPHENS-menu-item-level1 span span img,
.STEPHENS-menu-item-compact-navigation span span img,
.STEPHENS-dropdown-menu-level1 a img {
    display: none;
}
.STEPHENS-logo-text-part1 {
    top: 18px;
    left: 70px;
    color:#222;
    font-family: "open sans","Helvetica Neue",Arial, Helvetica, sans-serif,Arial,sans-serif;
    font-size: 12pt;
    font-weight: 600;
}
.STEPHENS-logo-text-part1 hr {
    display:none;
}
.STEPHENS-logo-text-part2 {
    display:none;
}

.login-required-message {
    text-align:left;
    font-size:16pt;
    width:400px;
    margin:0 auto;
    margin-top:25px;
    padding:25px;
    padding-top:60px;
    padding-bottom:60px;
    margin-bottom:25px;
    background-color:azure;
}

.GWFO-page-not-found {
    position: relative;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    margin-top: calc(50vh - 170px);
    font-size: 1.2em;
    color: dimgray;
    border: 0px solid green;
}

.GWFO-static-web-content {
    margin-top: -22px !important;

    border: 0px solid red;
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
    min-height:calc(100vh - 114px);
}


.info-page-top-image {
    font-size: 3.8em;
    line-height:1.1em;
    position: relative;
    width: 100vw;
    height: 320px;
    overflow: hidden;
}
    .info-page-top-image img {
        width:1500px;
        min-width:100vw;   /* yay it works!  */
        height:1000px;     /* yay it works!! */
        position:center;
        max-width: none;
        /*transform: translateY(-50px);do this per-image until image looks perfect*/
    }
    .info-page-top-image div {
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 700;
        width: calc(100vw - 40px);
        padding:1000px;
        text-align: left;
        text-justify: none;
        position: absolute;
        z-index: 2;
        top: calc(50% - 0px);
        left: 50%;
        transform: translate(-50%, -50%);
        /*NOT HERE-HOW! see below.  xxbackground-color: #000000; xxxopacity: 0.1;*/
        background: rgba(7, 7, 7, .4);
    }

.info-page-contents{
    margin-top:-22px;
    padding:100px 40px 0px 40px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
}
    .info-page-contents h1 {
        font-size: 2.6em;
        border: 0px solid red;
        margin: 0px;
        padding-bottom:10px;
    }
    .info-page-contents h2 {
        font-size: 1.4em;
        border: 0px solid red;
        padding-top:5px;
        margin:0px;
    }
    .info-page-contents p {
        font-size:1.2em;
    }


.gwfnet-edit-link {
    border: 1px solid rgba(7,7,7,.4);
    padding: 10px;
    border-radius: 50%;
    margin-top: 20px;
    float: right;
    clear: both;
}

    .gwfnet-edit-link a {
        text-decoration: none;
        font-size: 12px;
        color: rgba(7, 7, 7, .4);
    }

.footer {
    padding-top: 40px;
    border: 0px solid red;
    text-align: center;
    /*pos rel and bg colr white so footer will over-cover the search background image */
    position:relative;
    background-color:white;
}

/* 
    Begin placeholder styling, the inconsistent mess that is ``placeholder`` 
*/
/*WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge*/
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
    opacity: 1;
    color: blueviolet;
    font-style: italic;
    font-weight: 100;
    text-align: center;
}
/*Mozilla Firefox 4 to 18 is using a pseudo-class (one colon!)*/
textarea:-moz-placeholder,
input:-moz-placeholder {
    opacity: 1;
    color: blueviolet;
    font-style: italic;
    font-weight: 100;
    text-align: center;
}
/*Mozilla Firefox 19+*/
textarea::-moz-placeholder,
input::-moz-placeholder {
    opacity: 1;
    color: blueviolet;
    font-style: italic;
    font-weight: 100;
    text-align: center;
}
/*Internet Explorer 10 and 11*/
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
    opacity: 1;
    color:blueviolet;
    font-style: italic;
    font-weight:100;
    text-align:center;
}
/*All post-2017 modern browsers*/
textarea::placeholder,
input::placeholder {
    opacity: 1;
    color: blueviolet;
    font-style: italic;
    font-weight: 100;
    text-align: center;
}

/*How to position placeholder text: Use ->>  "
 
 input your name here */

textarea, input {
    resize: none;
    box-shadow: none;
    font-weight: 200;
    font-size: 14pt;
}

    textarea:focus, input:focus {
        outline: none;
        background-color: white;
    }

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 2em;
    background-color: transparent;
    border: 0px solid red;
    font-weight: 200;
    font-size:14pt;
}
    select::-ms-expand {
        display: none;
    }
/*
    xxselect::-ms-value {
    xx    nothing but severe >>>latent, unexpected<<< trouble -do not use!!!
    xx    background-color: white;
    xx!}
*/




.access-request-listing {
    padding:15px;
}

.gwfo-rec-num{
    font-size:0.8rem;
    color:coral;
}

.gwfo-search-title-a-div{
    margin-top:-6px;
}
a.gwfo-search-title-a {
    font-size: 12pt !important;
    font-weight: 700;
    font-family: arial !important;
    color: rgb(9,106,71);
    text-decoration: underline !important;
}
div.gwfo-search-url {
    color: rgb(156,163,178);
    font-family: "arial narrow";
    font-size:12pt;
    padding-top:0px;
    margin-top:-10px;
    margin-bottom:15px;
}

.gwfo-search-div {
    position:relative;
    padding: 40px;
    min-height: 100vh;
    background:transparent;
    opacity:0.7;
}
.gwfo-search-div-bg-image{
    position:fixed;
    background-image: url("/images/lake.gif");
    background-size: cover;
    background-position: center;
    height:100vh;
    width:100vw;
    z-index:-1;
    /*counteract 40px padding of the gwfo-search-div padding */
    transform:translateX(-40px) translateY(-40px);
}
.gwfo-search-tile{
    background-color:white;
    padding:40px;
    padding-top:20px;
    overflow-x:hidden;
}

.gwfo-search-field-container {
    position: relative;
    width: 500px;
    max-width: 65%;
    min-width: 100px;
    border: 1px solid lightgray;
    border-radius: 20px;
    padding: 6px;
    background-color: rgb(250,255,255);
    float:left;
    margin-bottom:20px;
    margin-right:20px;
}
input.gwfo-search-field {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size:16pt;
    width:calc(100% - 44px);
    padding: 0px;
    padding-left:10px;
    background: none;
    outline: none;
    border: none;
}
.gwfo-search-button {
    position: absolute;
    top:5px;
    right: 16px;
    height: 32px;
    width: 32px;
    opacity: 0.6;
    padding:0px;
}
    .gwfo-search-button:focus {
        border-width: 0;
        border: none;
        outline: none;
        box-shadow: none;
    }
    .gwfo-search-button:hover {
        border: none;
        outline: none;
        box-shadow: none;
        opacity: 0.9;
    }
    .gwfo-search-button:active {
        opacity:0.5;
    }

.template-selector {
    position:relative;
    border:0px solid red;
    float:left;
}
.cbox-title{
    font-size:16pt;
}
.cboxdiv {
    font-family:Arial;
    font-size:14px;
    width: 200px;
    border:0px solid blue;
    float:none;
}
.gwfo-search-url-debug {
    display: block;
    font-family: Arial;
    font-size: 8pt;
    color: dodgerblue;
    text-align: center;
}

.fp-form-info-missing-css-class {
    background-color: lightyellow;
}
    .fp-form-info-missing-css-class::before {
        content: "➜";
        position: absolute;
        color: red;
        font-size: 14pt;
        transform: translateX(-15px) translateY(-10px) rotate(15deg);
    }

    /*
    .fp-form-info-missing-css-class::before {
        content: "Mandatory field, please fill in";
        position:absolute;
        left:calc(50% - 77px);
        transform: translateX(0px) translateY(-15px);
        font-size:10pt;
        background-color: red;
        color: white;
        padding:0px 4px 0px 4px;
        border-radius:5px;
    }
    */

.fp-uncompleted-field-warning-div {
    color:red;
    border:1px solid red;
    padding:6px;
}

/* 
    Media tags must be at the end of the css file to work properly 
*/
@media only screen and (max-width: 600px) {
    .info-page-top-image {
        font-size: 3.5em;
    }
    .gwfo-table-div {
        margin-top: 30px;
        margin-left: 0px;
        margin-right: 0px;
    }

}
@media only screen and (max-width: 520px) {
    .info-page-top-image {
        font-size: 3.0em;
    }
}
@media only screen and (max-width: 500px) {
    .info-page-top-image {
        font-size: 2.7em;
    }
}
@media only screen and (max-width: 480px) {
    .GWFO-static-web-content {
        min-height: calc(100vh - 40px);
    }
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    p {
        text-align: left;
    }
    .gwfo-search-tile {
        background-color: white;
        padding: 10px;
        padding-top: 20px;
        overflow-x: hidden;
    }

}
@media only screen and (max-width: 300px) {
    .STEPHENS-logo-text-part1 {
        font-size: 9pt;
        top: 21px;
        left: 64px;
    }
}
@media only screen and (max-width: 240px) {
    .STEPHENS-logo-text-part1 {
        display: none;
    }
}