.dac-bg-image {
    position: fixed;
    background-image: url("/images/lake.gif");
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
    z-index: -1;
    opacity:0.125;
    /*counteract 40px padding of the gwfo-search-div padding */
    transform: translateX(-40px) translateY(-90px);
}
.dac-top-blue-tinge {
    z-index:-1;
    position: fixed;
    background-color: rgba(0,255,255,0.15);
    height:400px;
    width:200vw;
    transform:translateX(-100px) translateY(-200px);
}


input::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    color: rgb(112,170,233);
}

input:-moz-placeholder { /* Firefox 4-18 */
    color: rgb(112,170,233);
    opacity: 1;
}

input::-moz-placeholder { /* Firefox 19+ */
    color: rgb(112,170,233);
    opacity: 1;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(112,170,233);
}

input::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(112,170,233);
}

.dac-modification-popup {
    display: none;
    top: 180px;
    z-index: 15;
    position: fixed;
    width: calc(80%);
    margin-left: calc(10% - 30px);
    background-color: floralwhite;
    border: 1px solid black;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.dac-modification-popup-title{
    width:100%;
    font-weight:600;
    font-size:1.2em;
    font-family:Arial;
    padding-bottom:10px;
    text-align:center;
}
.dac-modification-popup-tf {
    width: calc(100% - 70px);
    margin-left: 10px;
    margin-top: 10px
}
.dac-tblrowbtn-div {
    background-color: aliceblue;
    cursor: default;
    text-align: center;
    min-width: 55px;
    border-radius: 7px;
}
.dac-tblrowbtn-div:hover{
    background-color:chartreuse;
}

.dac-a-div {
    text-align: right;
    position: absolute;
    bottom: 2px;
    right: 10px;
}
.dac-back-to-main-div {
    position: relative;
    text-align: center;
    font-size: 10pt;
    width: 100%;
    margin-bottom: 5px;
}
/* Keep these next three class names CLX, DSPL, and LIN very short!!! */
.clx {
    /* classification: e.g., meteorology */
    font-size: 12pt;
    font-weight: 400;
    color: black;
}
.dspl {
    /* display_name: e.g., atmospheric pressure */
    font-size: 14pt;
    font-weight: 700;
    color: blueviolet;
}

.lin {
    /* lineage name: e.g., atmosphere, surface, pressure */
    font-size: 9pt;
    font-weight: 200;
    color: dodgerblue;
}
.dac-site-list-item{
    cursor:default;
    /*margin-bottom:17px;*/
    line-height:0.9em;
    margin-bottom:7px;
    padding-top:3px;
    padding-bottom:3px;
}
    .dac-site-list-item:hover {
        /*background-color: beige; hover lost after selection*/
    }
.zonevar {
    cursor: default;
    padding-left: 25px;
}
.zonevar:hover{
    background-color:yellow;
}
.zs {
    font-size:9pt;
}
.z-tgl{
    cursor:default;
    display:inline;
    color:black;
    padding:1px 4px 1px 4px;
    border-radius:50%;
    background-color:white;
}
    .z-tgl:hover {
        font-weight:600;
        background-color:aquamarine;
    }

.d-z-l-d{
    display:none;
}

.zone-spanner{
    margin-top:20px;
}
.znav {
    display: inline;
    cursor: default;
}
.znav:hover{
    background-color:yellow;
}

.dac-show-by-div {
    position: relative;
    background-color: aliceblue;
    margin-bottom: 7px;
    padding: 10px;
    font-family: Arial;
    font-size: 12pt;
    font-weight: 600;
    padding-bottom:24px;
}
.dac-show-by-label {
    vertical-align: top;
    position:relative;
    float: left;
    margin-right:10px;
    display:inline-block;
    margin-top: 5px;
}
.dac-show-by-label2 {
    line-height: 20px;
    margin-left: 0px;
}
.dac-a-div a {
    font-size: 10pt;
    margin-left: 8px;
    font-weight:400;
}
    .dac-a-div a:hover {
        background-color: white;
    }

.dac-selectone-customizations {
    position: relative;
    background-color: thistle;
    margin-bottom: 0px;
    margin-right:30px;
}

.dac-form-contents {
    padding-left: 15px;
    padding-right: 15px;
}

.dac-update-now {
    position: fixed;
    background-color: rgba(32, 34, 55, 0.40);
    z-index: 700;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
}

.dac-update-now-button {
    position: absolute;
    margin-top: 0px;
    right: 0px;
    z-index: 1000;
    transform:translateX(77px) translateY(30px);
}

.dac-chart-loading-indicator-div{
    margin-left: calc(50% - 50px);
    margin-top: 225px;
    position: absolute;
}
.dac-chart-containing-div {
    z-index: 0;
    position: relative;
    width: calc(100vw - 70px); /*need region on edge of small devices to scroll page without scrolling the chart */
    margin-top: 2px;
    border: 1px solid grey;
}

.dac-chart-controls-containing-div {
    width: 100%;
    height: 60px;
    background-color: aliceblue;
    bottom: 0px;
    position:relative; /* bugfix*/
}

.dac-redisplay-div {
    position: fixed;
    background-color:rgba(255, 255, 255, 0.01);
    width: 160px;
    height: 40px;
    margin: 0 auto;
    top: 40vh;
    left: calc(50vw - 160px); /* Updating ... */
    padding: 50px;
    padding-left: 85px;
    font-weight: 900;
    border-radius: 10px;
}

.close-menu-button {
    background-color: rgb(91,155,213);
    color: white;
    font-family: Arial;
    font-size: 12pt;
    font-weight: 600;
    position: relative;
    position: absolute;
    right: 0px;
    top: 8px;
    margin: 8px;
    margin: 0px 8px 10px 8px;
    border-radius: 4px;
    padding-top: 8px;
    padding-bottom: 2px;
    height: 26px;
    cursor: default;
    text-align: center;
    width: 40px;
}

    .close-menu-button:hover {
        background-color: deepskyblue;
    }

.dc-not-available-yet{
    position: fixed;
    background-color: white;
    padding:70px;
    width:300px;
    top:30vh;
    left:calc(50% - 150px - 20px);
    z-index:1000;
    border:5px solid black;
}

.dac-menu-guard {
    /*stops map from peaking its head above the menu on scrolling */
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
    width: 100vw;
    background-color: white;
    z-index: 900;
}
.dac-title {
    font-family: Arial;
    font-size: 22pt;
    font-weight: 600;
    margin: 0 auto;
    text-align: center;
    padding: 8px;
    color:navy;
    /*background-color:rgba(0,255,255,0.15);*/
}
.dac-a-high-visibility {
    background-color: white;
    border-radius:7px;
    /*color:red;*/
    padding-left:10px;
    padding-right:10px;
    font-size:10pt;
}
    .dac-a-high-visibility:hover {
        background-color:lightyellow;
        text-decoration:none;
    }
.dac-shy-scrollbar-buster{
    height:100vh;
}

.dac-category-header {
    width: 100%;
    background-color: gainsboro;
    color: black;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-top: 5px;
    cursor: default;
}
.dac-category-header:hover {
    background-color:honeydew;
}




.dac-catttl {
    font-size: 12pt;
    font-weight: 400;
    width: 100%;
    text-align: center;
}

.dac-clr-all-category {
    float: right;
    margin-top: 3px;
    margin-bottom: 3px;
    display: inline-block;
    cursor: default;
    text-align: right;
    color: lightseagreen;
    font-size: 12px;
    margin-right:10px;
}
    .dac-clr-all-category:hover {
        background-color: white;
        text-decoration: underline;
    }

.dac-clr-all{
    bottom:70px;
}
.dac-sel-all-category {
    float: none;
    margin-top: 3px;
    margin-bottom: 3px;
    display: inline-block;
    cursor: default;
    /*width: 60px;*/
    border-radius: 10px;
    text-align: left;
    color: lightseagreen;
    margin-left: 5px;
    font-size: 12px;
    margin-left: 10px;
}
    .dac-sel-all-category:hover {
        background-color: white;
        text-decoration: underline;
    }



.sel-header {
    height: 52px;
    background-color: lightyellow;
    margin-bottom: 0px;
    display: block;
}

.sel {
    background-color: white;
    margin-bottom: 3px;
    display: block;
}

.sel-input {
    float:left;
    position:relative;
    z-index:702;
}
.division-checkbox{
    float:left;
}
.sel-label {
    margin-left: 28px;
}
.tofrom-contr {
    padding: 0px 5px 0px 5px;
    background-color: beige;
    border-radius: 10px;
    margin-right: 30px;
}
.showhist-contr {
    padding: 0px 5px 0px 5px;
    /*background-color: aqua;*/
    background-color:gainsboro;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 30px;
    padding-top:6px;
}

.tb-label {
    margin-left: 0px;
    display: inline-block;
    min-width: 40px;
}
.tb-tb {
    font-family: Consolas;
    font-size: 10pt;
    width: 100px;
    position: relative;
    z-index: 702;
}

.dac-section-title {
    background-color: black;
    color: white;
    height: 22px;
    margin-bottom: 3px;
    text-align: center;
    min-height:20px;
}

.dac-filter-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    line-height: 30px;
    transform:translateX(0px) translateY(15px);
    margin-right:20px;
}

.dac-programme-selector-div {
    position: absolute;
    height: 250px;
    border: 4px solid grey;
    background-color: aliceblue;
    float: left;
    font-size: 10pt;
    z-index: 702;
    left: calc(50% - 100px);
    transform: translateY(-30px);
    width:250px;
}

.dac-program-selector {
    width: calc(100% - 3px);
    margin-bottom: 0px;
    margin-bottom: 0px;
    overflow-y: scroll;
    overflow-x: hidden; /**/
    border: 0px solid rgb(112,170,233);
    height: 170px;
    margin-bottom: 7px;
}


.dac-main-selection-filters-cluster {
    border: 1px solid grey;
    background-color: aliceblue;
    float: left;
    font-size: 10pt;
    padding-right: 0px;
    min-height: 352px;
}

.dac-main-selection-filters-cluster{
    width: 308px;/* <-----------------------------------------howto.where */
    padding: 5px;
}

/* 
    Divisions and Variables 
*/
.dac-selection-cluster {
    position: relative;
    border: 0px solid black;
    width: 65%; /* <****************************************************/
    float: left;
    margin-left: 0px;
    margin-right: 5px;
    z-index: 701; /*Needed for clicking through pending update greyish indicator*/
    /**/
    display: flex;
    flex-direction: column;
    height: calc(100vh - 225px);
}

.dac-site-selection-cluster {
    position: relative;
    border: 0px solid black;
    width: 40%; /* <****************************************************/
    float: left;
    margin-left: 0px;
    margin-right: 5px;
    z-index: 701; /*Needed for clicking through pending update greyish indicator*/
    /**/
    display: flex;
    flex-direction: column;
    height: calc(100vh - 225px);
}

.dac-selection-cluster100 {
    width:100%;
}
.dac-program-data-type-selector {/*this is also used for site/facil selector - tbd rename*/
    width: calc(100% - 3px);
    overflow-y: scroll;
    overflow-x: hidden; /**/
    border: 0px solid rgb(112,170,233);
    flex: 60;
    min-height:332px;
}
.dac-program-data-type-selector-bySite {
    min-height:154px;
}


/* 
    Sites and Facilities 
*/
.dac-NEW-right-selection-cluster {
    position: relative;
    border: 0px solid black;
    width: calc(35% - 10px);/* <****************************************************/
    float: left;
    margin-left: 0px;
    margin-right: 0px;
    /*z-index: 701;*/
    /**/
    display: flex;
    flex-direction: column;
    height: calc(100vh - 227px);
    min-height:352px;
}
.dac-NEW-right-site-selection-cluster {
    position: relative;
    border: 0px solid black;
    width: calc(60% - 10px); /* <****************************************************/
    float: left;
    margin-left: 0px;
    margin-right: 0px;
    /*z-index: 701;*/
    /**/
    display: flex;
    flex-direction: column;
    height: calc(100vh - 227px);
    min-height: 352px;
}

.dac-NEW-site-selector {
    width: calc(100% - 0px);
    overflow-y: scroll;
    overflow-x: hidden; /**/
    border: 0px solid rgb(112,170,233);
    flex: 50;
    min-height: 121px;
    min-height: 121px;
    margin-bottom: 7px;
}
.dac-zones-and-observations {
    width: calc(100% - 0px);
    overflow-y: scroll;
    overflow-x: hidden; /**/
    border: 0px solid rgb(112,170,233);
    flex: 50;
    min-height: 121px;
    min-height: 121px;
    margin-bottom: 7px;
}
.dac-NEW-facility-selector {
    width: calc(100% - 0px);
    overflow-y: scroll;
    overflow-x: hidden; /**/
    border: 0px solid rgb(112,170,233);
    flex: 50;
    min-height: 121px;
    min-height: 121px;
}


.dac-site-selector {
    float: left;
    width: calc(50% - 5px - 5px); /**/
    height: calc(100vh - 227px);
    overflow-y: scroll;
    border: 0px solid rgb(112,170,233);
    min-height: 350px;
    width: calc(35% - 5px - 5px); /*--------------------------------------------------*/
}
.dac-site-selector-div {
    font-family: Arial;
    font-size: 10pt;
    line-height: 9pt;
    cursor: default;
    margin-bottom: 5px;
    padding:3px;
}
.dac-coresident-separator{
    height:40px;
    /*background-color:red;*/
}
.dac-facility-selector-div {
    font-family: Arial;
    font-size: 10pt;
    line-height: 9pt;
    cursor: default;
    margin-bottom: 5px;
    padding: 3px;
}

/* 
    Map
*/

.dac-map-cluster {
    border: 1px solid gray;
    height: calc(100vh - 219px);
    min-height: 358px;
    padding: 2px;
    float: left;
    margin-left: 2px;
}
.dac-map-div {
    position: relative;
    width: calc(100% - 2px);
    height: calc(100vh - 277px);
}
.dac-map {
    text-align: center;
    border: 0px solid blue;
    height: calc(100vh - 277px);
    border-radius: 0px;
    min-height: 300px;
}
.dac-map-control-div {
    border: 0px solid white;
    background-color: aliceblue;
    width: calc(100% + 1px);
    height: 60px;
    min-height:60px;
    transform: translateX(-0px) translateY(-2px);  
    position:relative;
    margin-top:2px;
}

/*
    Vertical gap
*/
.dac-download-pane-pushdown{
    margin-bottom:100px;
}

.mapdown{
    clear:both;
    display:none;
}

/*
    Information Panel
*/
.dac-info-panel-title {
    font-weight: 600;
    position: relative;
    padding-top: 25px;
    padding-bottom: 6px;
    z-index: 2;
    width: 100%;
    text-align: center;
    font-size:20pt;
    color:black;
}


.dac-data-access-info-pane {
    width: calc(100vw - 79px + 30px);
    margin-left: 0px;
    margin-top:-2px;
    min-height: 300px;
    padding-top: 2px;
    line-height:1.2rem;
    padding:0px;
}

.dac-chart-data-text-area {
    width: 400px;
    height: 300px;
}

.dac-div-chart-anchor {
    display: inline-block;
    text-decoration: underline;
    color: lightseagreen;
    cursor: pointer;
    text-decoration: none;
    background-color: azure;
    padding-left: 4px;
    padding-right: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
}
    .dac-div-chart-anchor:hover {
        text-decoration: underline;
        background-color:white;
    }
    .dac-div-chart-anchor::before {
        content: " 📈 ";
        font-size: 14px;
        transform: translateX(2px);
        text-decoration: none;
        /*color: lightseagreen;*/
        color: rgba(32, 178, 170, 0.7);
    }

.dac-div-download-anchor {
    display: inline-block;
    text-decoration: underline;
    color: lightseagreen;
    cursor: pointer;
    text-decoration: none;
    background-color: azure;
    padding-left: 4px;
    padding-right: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
}

    .dac-div-download-anchor:hover {
        text-decoration: underline;
        background-color: white;
    }

    .dac-div-download-anchor::before {
        content: " ⚫ ";
        font-size: 14px;
        transform: translateX(2px);
        text-decoration: none;
        /*color: lightseagreen;*/
        color: rgba(32, 178, 170, 0.7);
    }



.dac-div-web-anchor {
    display: inline-block;
    text-decoration: underline;
    color: lightseagreen;
    cursor: pointer;
    text-decoration: none;
}
    .dac-div-web-anchor:hover {
        text-decoration: underline;
    }

.dac-zone-title {
    font-size:14pt;
    font-weight:600;
    color:black;
    background-color: yellow;
    padding: 5px;
    border-radius: 10px;
    margin-top:70px;
    margin-bottom:6px;
    text-align:left;
}

/* 
    Region Begin:  DAC Table on the Information Panel
    Add table inside a div with class="dac-table-div"
*/
.dac-historical-only-message-div {
    position: relative;
    border: 1px solid #999;
    font-size: 10pt;
    margin-top: 15px;
    text-align: left;
    padding: 20px;
    background-color: #ccffcc;
    width: calc(100vw - 94px);
}

.dac-table-div {
    position:relative;
    padding: 0px;
    border: 1px solid #999;
    font-size: 10pt;
    margin-bottom:25px;
    text-align:left;
    width: calc(100vw - 50px);
}

div.dac-table-div table {
    border-collapse: collapse;
    font-family: Tahoma, Geneva, sans-serif;
    overflow-x:scroll;
    width:100%;
}

    div.dac-table-div table td {
        padding: 15px;
        vertical-align: top;
    }

    div.dac-table-div table thead td {
        background-color: #54585d;
        color: #ffffff;
        font-weight: bold;
        font-size: 11pt;
        border: 1px solid #54585d;
    }

    div.dac-table-div table tbody td {
        color: #636363;
        border: 1px solid #dddfe1;
    }

    div.dac-table-div table tbody tr {
        background-color: #f9fafb;
    }

        div.dac-table-div table tbody tr:nth-child(odd) {
            background-color: #ffffff;
        }



            div.dac-table-div tr:hover,
            div.dac-table-div table tbody tr:nth-child(odd):hover {
                /*It works!!*/
                background-color: #D6EEEE;
            }

/*div.dac-table-div table, */
/*div.dac-table-div th, */
div.dac-table-div td {
    border: 1px solid;
}

div.dac-table-div th {
    position: sticky;
    top: 0;
    background-color: #fff; /* Prevents content from showing through */
    z-index: 1; /* Ensures the header stays above rows */
    text-align: left;
    font-weight: 200;
    padding: 10px;
    border-right: 1px solid lightgray;
    background: lightblue;
}

.dac-col-1 {
    min-width: 120px;
    width:15%;
}

.dac-col-2 {
    width: 8%;
    min-width:180px;
}
.dac-col-3 {
    width: 8%;
}
.dac-col-4 {
    width: 8%;
}
.dac-col-5 {
    min-width: 180px;
}
.dac-col-6 {
    min-width: 180px;
}

@media screen and (max-width: 908px) {
    .dac-form-contents {
        padding-left: 20px;
        padding-right: 20px;
    }

}
@media screen and (orientation:portrait) {
    .dac-form-contents {
        padding-left:20px;
        padding-right:20px;
    }

    .dac-table-div {
        overflow-x: scroll;
    }
}



.dac-main-selection-filters-cluster {
    width: 45%;
    //border: 15px solid orange;
}

.dac-map-cluster {
    width: calc(55% - 20px);
}

@media screen and (max-width: 850px) {
    .dac-main-selection-filters-cluster {
        width: calc(100% - 200px);
    }
    .dac-map-cluster {
        width: calc(100% - 194px);
        transform: translateX(-2px);
        margin-top: 2px;
    }
}

@media screen and (max-width: 750px) {
    .dac-main-selection-filters-cluster {
        width: calc(100% - 50px);
    }
    .dac-map-cluster {
        width: calc(100% - 44px);
    }
}

@media screen and (max-width: 400px) {
    .dac-main-selection-filters-cluster {
        width: calc(100% - 10px);
    }

    .dac-map-cluster {
        width: calc(100% - 4px);
        height: 300px;
    }

    .dac-map-div {
        height: 200px;
    }

    .dac-map {
        height: 200px;
    }
    .dac-chart-containing-div {
        width: calc(100% - 0px);
        margin-left:0px;
        border:1px solid grey;
    }
}