.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: 1000;
    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: red;
}

.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;
    //padding:5px;
}
    .znav:hover {
        background-color: yellow;
        //background-color:white;
        //box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;
    }
    .znav:active {
        //box-shadow: inset 8px 1px 8px #bdc3c7, -8px -1px 8px #f9f9f9;
    }

.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;
    box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;
}
.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;
}

/* 
    Upon variable checkbox selection, indicates Data Centre will update soon and blocks all but variable settings checkboxes 
    so user can continue to make changes here-whilst (the dac update NOW button is also displayed here-whilst)
*/
.dac-update-now {
    position: fixed;
    /*background-color: rgba(32, 34, 55, 0.40);*/
    /*background-color:white;*/
    background-color:transparent;
    z-index: 700;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
}

.dac-initializing-div {
    position: fixed;
    background-color: rgba(255, 255, 255, 1);
    z-index: 1750;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

.dac-update-now-button {
    /*position: absolute;*/
    position: fixed;
    /*margin-top: 0px;*/
    /*right: 0px;*/
    left: calc(50% - 100px);
    top: 40vh;
    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;
    /*box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;*/
    bottom: 0px;
    position:relative; /* bugfix*/
}

/* spinning wheel while Data Centre is updating */
.dac-redisplay-div {
    position: fixed;
    /*background-color: rgba(255, 255, 255, 0.45);*/
    width: 160px;
    height: 40px;
    margin: 0 auto;
    top: 20vh;
    left: calc(50vw - 160px); /* Updating ... */
    padding: 50px;
    padding-left: 85px;
    border-radius: 150px;
}

/* overlayed panel to stop selections while Data Centre is updating */
.dac-page-loading-div {
    background-color: rgba(225,225,225,0.4);
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 900;
    display: none;
    transform:translateY(-100px);
}


/* For closing the Data Type Editor tool */
.close-menu-button {
    background-color: rgb(91,155,213);
    color: white;
    font-family: Arial;
    font-size: 12pt;
    font-weight: 600;
    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;
   }


.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-size: 1.5rem;
    /*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: 25px;
    margin-bottom:0px;
    cursor: default;
    /*box-shadow:  4px 4px 8px #bdc3c7,  -4px -4px 8px #f9f9f9;*/
    background-color: white;
    box-shadow: 1px 1px 2px #bdc3c7, -1px -1px 2px #f9f9f9;
}
    .dac-category-header:hover {
        box-shadow: inset 1px 1px 2px #bdc3c7,  -1px -1px 2px #f9f9f9;
        /*background-color: honeydew;*/
    }

    .dac-category-header:active {
        box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
    }
.dac-content-div {
    background-color: white;
    box-shadow: inset 1px 1px 1px #bdc3c7, inset -1px -1px 1px #f9f9f9;
    padding:10px;
}

.dac-catttl {
    /*font-size: 14pt;*/
    /*font-weight: 400;*/
    /*width: 100%;*/
    text-align: center;
    /*text-align: left;*/
}

.dac-clr-all-category {
    float: right;
    margin-top: 3px;
    margin-bottom: 3px;
    display: inline-block;
    cursor: default;
    text-align: right;
    color: lightseagreen;
    font-size: 14px;
    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: 14px;
    margin-left: 10px;
}
    .dac-sel-all-category:hover {
        background-color: white;
        text-decoration: underline;
    }



.sel-header {
    height: 52px;
    /*background-color: lightyellow;*/
    box-shadow:   1px 1px 1px #bdc3c7, -1px -1px 1px #f9f9f9;
    background-color:white;
    margin-bottom: 2px;
    display: block;
}

.sel {
    /*
        removing white color from variable selection items 

    */
    /*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 {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left:0px;
    margin-right:10px;
    text-align: center;
    /*background:white;*/
    padding:10px;
    /*border-radius:15px;*/
    /*border:1px solid #ccc;*/
    /*min-height:20px;*/
    /*font-size:1.2rem;*/
}

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

/* I don_t think this is used now 
.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 {
    /*background-color: #F6FAF9; -- offwhite, but overdone */
    background-color:white;
    float: left;
    padding-right: 0px;
    padding:11px;
    min-width: 100%;
    box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;
    box-sizing:border-box;
    margin-top:10px;
    /*border:20px solid red;*/
}

/* 
    Variables 
*/
.dac-selection-cluster {
    position: relative;
    width: calc(50% - 15px); /* <****************************************************/
    float: left;
    margin-left: 0px;
    margin-right: 20px;
    z-index: 701; /*Needed for clicking through pending update greyish indicator*/
    /**/
    display: flex;
    flex-direction: column;
    /*
        Removing heights to see how system performs without multiple scrollbars 

    */
    /*height: 610px;*/
    /*min-height: 610px;*/
    /*border: 10px solid green;*/
}

.dac-site-selection-cluster {
    position: relative;
    /*border: 10px solid blue;*/
    width: calc(50% - 15px); /* <****************************************************/
    float: left;
    margin-left: 0px;
    margin-right: 20px;
    z-index: 701; /*Needed for clicking through pending update greyish indicator*/
    /**/
    display: flex;
    flex-direction: column;
    /*
        Removing heights to see how system performs without multiple scrollbars 

    */
    /*height: 610px;*/
    /*min-height: 610px;*/
}

.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;
    flex: 60;
    /*
        Removing heights to see how system performs without multiple scrollbars 

    */
    /*min-height: 332px;*/
    //border: 5px solid red;
}
.dac-program-data-type-selector-bySite {
    //min-height:154px;
}


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

.dac-NEW-site-selector {
    width: calc(100% - 0px);
    //overflow-y: scroll;
    overflow-x: hidden;
    flex: 50;
    /*min-height: 121px;*/
    /*min-height: 121px;*/
    margin-bottom: 7px;
    padding:5px;
    /*border: 10px solid blue;*/
}
.dac-zones-and-observations {
    width: calc(100% - 0px);
    /*overflow-y: scroll;*/
    overflow-x: hidden;
    flex: 50;
    /*min-height: 121px;*/
    /*min-height: 121px;*/
    margin-bottom: 7px;
    /*border: 10px solid red;*/
}
.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;*/

}


/*
    likely not used any more
.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 {
    cursor: default;
    margin-bottom: 5px;
    padding:3px;
    /*border:1px solid red;*/
}
    .dac-site-selector-div:hover {
        box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;
    }
.dac-coresident-separator{
    height:40px;
}
.dac-facility-selector-div {
    cursor: default;
    margin-bottom: 5px;
    padding: 3px;
}
    .dac-facility-selector-div:hover {
        box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;
    }

/* 
    Map
*/

.dac-map-cluster {
    position: relative;
    height: 760px;
    min-height: 760px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
    /*box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;*/
    min-width: 100%;
    box-sizing: border-box;
    background-color: #F6FAF9;
    /*border: 1px solid grey;*/
    /*border: 15px solid red;*/
}
.dac-map-div {
    position: relative;
    height:600px;
    min-width: 100%; /****/
    margin-left: 0vw;
    /*border: 10px solid green;*/
}
.dac-map {
    text-align: center;
    border-radius: 0px;
    height:600px;
    min-height:500px;
    /*border: 10px solid blue;*/
}
.dac-map-control-div {
    border: 0px solid white;
    /*background-color: aliceblue;*/
    width: calc(100% + 1px);
    height: 150px;
    min-height: 150px;
    position: relative;
    margin-top: 4px;
    box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;
}

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

.mapdown{
    display:block;
    height:10px; /*this is used to create margin above the map */
    width:100%;
    clear:both;
}

/*
    Information Panel
*/
.dac-info-panel-title {
    /*font-weight: 600;*/
    position: relative;
    padding-top: 25px;
    padding-bottom: 25px;
    z-index: 2;
    width: 100%;
    text-align: center;
    font-size: 2rem;
    color: #333;
    /*box-shadow:  4px 4px 4px 4px rgba(0,0,0,0.2);*/
}


.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-opacitor {
    opacity:0.7;
}
    .dac-opacitor:hover {
        opacity:1.0;
    }

.dac-icon {
    transform: translateX(-5px) translateY(5px);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: top;
    float:left;
}
    .dac-icon.chart-icon {
        background-image: url('/images/waternet/data_centre/chart.png');
    }
    .dac-icon.systems-check-icon {
        background-image: url('/images/waternet/data_centre/systems_check.png');
    }
    .dac-icon.download-icon {
        background-image: url('/images/waternet/data_centre/download.png');
    }
    .dac-icon.web-icon {
        background-image: url('/images/waternet/data_centre/web.png');
    }

.dac-div-anchor {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    margin-top: 2px;
    margin-bottom: 12px;
    margin-left: 5px;
    width: calc(100% - 32px);
    overflow: hidden;
    color: #0056B3;
    float: left;
    box-sizing: border-box;
}

    .dac-div-anchor:hover {
        text-decoration: underline;
    }

.dac-div-anchor.a-chart{
    /*color:purple;*/
}
.dac-div-anchor.a-systems-check{
    color:red;
}
.dac-div-anchor.a-download{
    /*color:green;*/
}
.dac-div-anchor.a-web{

}

.dac-zone-title {
    /*font-size: 14pt;*/
    font-size: 1.8rem;
    /*font-weight: 600;*/
    color: #333;
    /*background-color: yellow;*/
    /*box-shadow:  4px 4px 4px 4px rgba(0,0,0,0.2);*/
    padding: 15px;
    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;
    }
}