/*@import url(http://weloveiconfonts.com/api/?family=fontawesome);*/

gm-style-iw div div {
    overflow: hidden !important;
}


.dsm_data {
    padding: 3px !important
}

.dsm_reliability {
    text-align: right !important
}


.hsavbtn {
    margin: auto;
    display: block;
    margin-top: 10px;
}

/* The slider itself */
.opacityslider {
    display: inline !important;
    width: 130px !important;
    float: right;
    right: 80px;
    position: absolute;
    margin-top: 7px;
    -webkit-appearance: none;
    border-radius: 5px;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    height: 3px;
    background: #d3d3d3;
}

.opacitysliderheading {
    margin-top: 10px !important;
}

.opacityreading {
    float: right;
    right: 43px;
    /*margin-top: 1px;*/
    position: absolute;
}


.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none !important;
}

.slider-handle {
    background-color: #0093B5 !important;
    background-image: none !important;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.opacityslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #0093B5;
    cursor: pointer;
}

.opacityslider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #0093B5;
    cursor: pointer;
}



.lockspan {
    float: right;
    right: 15px;
    position: absolute;
    top: -0px;
    cursor: pointer;
}

.infospan {
    /*float: right;
		right: 15px;*/
    position: absolute;
    top: -0px;
    cursor: pointer;
}

.infoButton {
    color: #0093B5;
    font-size: large;
    padding-top: 2px;
    /*padding-left: 1px;*/
}

.infobtn {
    border: none;
    background: transparent;
}

.helpButton {
    padding-top: 2px;
    /*padding-left: 1px;*/
}

.helpbtn {
    border: none;
    background: transparent;
    color: #0093B5;
    font-size: x-large;
    position: relative;
    top: -3px;
}

input.lockCheckbox {
    visibility: hidden;
}

    input.lockCheckbox ~ label {
        font-family: FontAwesome;
        font-size: 1.5em;
        width: 1em;
        height: 1em;
        display: inline-block;
        text-align: center;
        border-radius: 10px;
        padding-top: 6px;
        font-weight: 500 !important;
    }

        input.lockCheckbox ~ label:before {
            color: grey;
            content: "\f09c";
        }

    input.lockCheckbox:checked ~ label:before {
        color: #0093B5;
        content: "\f023";
    }

    input.lockCheckbox:focus ~ label:before {
        border: 3px solid #00f;
    }

input.eyeCheckbox {
    visibility: hidden;
}

    input.eyeCheckbox ~ label {
        font-family: FontAwesome;
        font-size: 1.5em;
        width: 1em;
        height: 1em;
        display: inline-block;
        text-align: center;
        border-radius: 10px;
        padding-top: 6px;
        font-weight: 500 !important;
    }

        input.eyeCheckbox ~ label:before {
            color: grey;
            content: "\f070";
        }

    input.eyeCheckbox:checked ~ label:before {
        color: #0093B5;
        content: "\f06e";
    }


input.filterCheckbox {
    visibility: hidden;
}

    input.filterCheckbox ~ label {
        font-family: FontAwesome;
        font-size: 1.5em;
        width: 1em;
        height: 1em;
        display: inline-block;
        text-align: center;
        border-radius: 10px;
        padding-top: 6px;
        font-weight: 500 !important;
    }

        input.filterCheckbox ~ label:before {
            color: grey;
            content: "\f00c";
        }

    input.filterCheckbox:checked ~ label:before {
        color: #0093B5;
        content: "\f00c";
    }


input.reliabilityCheckbox {
    display: none;
    visibility: hidden;
}

    input.reliabilityCheckbox ~ label {
        font-family: FontAwesome;
        font-size: 1.5em;
        width: 1em;
        height: 1em;
        display: inline-block;
        text-align: center;
        border-radius: 10px;
        padding-top: 6px;
        font-weight: 500 !important;
        float: right;
        margin-right: 13px;
        cursor: pointer;
    }

        input.reliabilityCheckbox ~ label:before {
            color: grey;
            content: "\f164";
        }

    input.reliabilityCheckbox:checked ~ label:before {
        color: #0093B5;
        content: "\f164";
    }

#catchmentinfo tr td {
    padding: 3px
}



.my-legend .legend-title {
    text-align: left;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 90%;
}

.my-legend .legend-scale ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
}

    .my-legend .legend-scale ul li {
        display: block;
        float: left;
        width: 30px;
        margin-bottom: 6px;
        text-align: center;
        font-size: 80%;
        list-style: none;
    }

.my-legend ul.legend-labels li .square {
    display: block;
    float: left;
    height: 15px;
    width: 30px;
}

.my-legend .legend-source {
    font-size: 70%;
    color: #999;
    clear: both;
}

.my-legend a {
    color: #777;
}


.landingpagebg {
    /*background-image: url(/images/BU4249L.jpg);*/
    background-image: url('/images/NAWRA Dusty Plains2.JPG');
    background-repeat: no-repeat;
    background-size: cover;
    /*opacity: 0.95;*/
}

#geolocationIcon {
    width: 28px !important;
    height: 28px !important;
    background-size: cover !important;
}

.landingpage {
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2147483637;
    top: 0px;
}

#wallheight_slider .slider-selection {
    background: #BABABA;
}

#dta_slider .slider-selection {
    background: #BABABA;
}

#swl_slider .slider-selection {
    background: #BABABA;
}

.btn-select {
    font-size: small;
}

.remove-button {
    top: -3px;
    position: relative;
}

.dropdown {
    padding: 5px;
}

.ls_multi_list {
    background-color: #e8e9e9 !important;
    border: 1px solid white !important;
}

#wallheight_div .slider.slider-horizontal {
    width: 400px; /* sample value - set it as you like*/
}

#dta_div .slider.slider-horizontal {
    width: 380px; /* sample value - set it as you like*/
}

#swl_div .slider.slider-horizontal {
    width: 380px; /* sample value - set it as you like*/
}

/* basic positioning */
.square {
    border: 1px solid #ccc;
    float: left;
    width: 15px;
    height: 15px;
    margin: 2px;
    margin-right: 6px !important;
}

.tablelegend {
    list-style: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    /*padding-right: 10px;*/
    background-color: #e8e9e9;
    margin-left: 13px;
    margin-right: 13px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 22px
}


.legend {
    list-style: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    /*padding-right: 10px;*/
    background-color: #e8e9e9;
    margin-left: 13px;
    margin-right: 13px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 22px
}

    .legend li {
        margin-right: 10px;
    }

    .legend .square {
        border: 1px solid #ccc;
        float: left;
        width: 15px;
        height: 15px;
        margin: 2px;
        margin-right: 6px !important;
    }

    .legend .square2 {
        border: none;
        float: left;
        width: 22px;
        height: 20px;
        margin-right: 6px !important;
    }

    .legend .square3 {
        border: 1.5px solid #A80000;
        float: left;
        width: 15px;
        height: 15px;
        margin: 2px;
        margin-right: 6px !important;
    }

    .legend .locker {
        float: right;
        width: 12px;
        height: 12px;
        margin: 2px;
        position: absolute;
        right: 21px
    }

    .legend .eye {
        float: right;
        width: 12px;
        height: 12px;
        margin: 2px;
        position: absolute;
        right: 220px
    }
    /* your colors */
    .legend .highly {
        background-color: blue;
    }

    .legend .suitable {
        background-color: #44ed63;
    }

    .legend .moderate {
        background-color: yellow;
    }

    .legend .severeunsuitable {
        background-color: orange;
    }

    .legend .extremeunsuitable {
        background-color: red;
    }

    .legend .catchment {
        background-color: magenta;
    }

    .legend .lakearea {
        background-color: cyan;
    }

    .legend .reservoirwall {
        background-color: black;
    }

.landingpageoverlay {
    opacity: 0.6;
}

.legend .waterpersistence {
    background-color: Blue;
}





/* your colors */
.legend .one {
    background-color: #4286f4;
}

.legend .markerone {
    background-image: url(https://maps.google.com/mapfiles/ms/icons/blue-dot.png);
    background-size: cover;
}

.legend .markertwo {
    background-image: url(https://maps.google.com/mapfiles/ms/icons/ltblue-dot.png);
    background-size: cover;
}

.legend .markerthree {
    background-image: url(https://maps.google.com/mapfiles/ms/icons/green-dot.png);
    background-size: cover;
}

.legend .markerfour {
    background-image: url(https://maps.google.com/mapfiles/ms/icons/yellow-dot.png);
    background-size: cover;
}

.legend .markerfive {
    background-image: url(https://maps.google.com/mapfiles/ms/icons/orange-dot.png);
    background-size: cover;
}

.legend .markersix {
    background-image: url(https://maps.google.com/mapfiles/ms/icons/red-dot.png);
    background-size: cover;
}

.legend .two {
    background-color: cyan;
}

.legend .three {
    background-color: #44ed63;
}

.legend .four {
    background-color: yellow;
}

.legend .five {
    background-color: orange;
}

.legend .six {
    background-color: red;
}

body {
    font-family: "Open sans", sans-serif;
    line-height: 1.2rem !important;
}
/*#wallheight_slider .slider-rangeHighlight {
		background: #f70616;
	}*/

#wallheight_slider .slider-rangeHighlight.one {
    background: #4286f4;
}

#wallheight_slider .slider-rangeHighlight.two {
    background: cyan;
}

#wallheight_slider .slider-rangeHighlight.three {
    background: #44ed63;
}

#wallheight_slider .slider-rangeHighlight.four {
    background: yellow;
}

#wallheight_slider .slider-rangeHighlight.five {
    background: orange;
}

#wallheight_slider .slider-rangeHighlight.six {
    background: red;
}


.legend .dryland {
    background-color: SaddleBrown;
}

.legend .cloud {
    background-color: Yellow;
}

.legend .flood_80 {
    background-color: blue;
}

.legend .flood_50 {
    background-color: cyan;
}

.legend .flood_20 {
    background-color: green;
}

.legend .flood_10 {
    background-color: gray;
}

.legend .water_holes_75 {
    background-color: Green;
}

.legend .water_holes_50 {
    background-color: #44ed63;
}

.legend .water_holes_25 {
    background-color: Yellow;
}

.legend .water_holes_0 {
    background-color: gray;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}



.landingpagetext {
    position: relative;
    margin: auto;
    width: 740px;
    /*top: 4%;*/
    /*font-weight: bolder;*/
    z-index: 9999999999;
    background-color: white;
    padding: 13px 30px;
}

.landingpagebutton {
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    text-align: center;
}

.landingpageheading {
    text-align: center;
    font-size: 38px;
    font-weight: 700;
}

.pac-card {
    margin: 0px 0 0 0;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    margin-left: 15px;
    margin-right: 15px;
}

#pac-container {
    /*padding-bottom: 12px;
	    margin-right: 12px;*/
    padding: 3px;
    color: #0093B5;
    font-size: larger;
}

.pac-controls {
    display: inline-block;
    padding: 5px 11px;
}

    .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
    }

#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 245px;
    margin: 2px
}

    #pac-input:focus {
        /*border-color: #4d90fe;*/
    }

.loader {
    border: 2px solid #f3f3f3; /* Light grey */
    border-top: 2px solid rgb(0, 0, 0);
    border-bottom: 2px solid rgb(0, 0, 0);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin 2s linear infinite;
    position: absolute;
    /*right: 17px;*/
}

.help {
    border: 2px solid #f3f3f3; /* Light grey */
    border-top: 2px solid rgb(0, 0, 0);
    border-bottom: 2px solid rgb(0, 0, 0);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: absolute;
    /*right: 17px;*/
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#enter {
    width: 100%;
}

.maincolour {
    color: #007b97;
}

ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    display: inline-flex
}

    ul.nav li {
        float: left;
    }

        /*.selected {
		background: lightgreen;
	}*/

        ul.nav li a {
            display: inline-block;
            color: black;
            text-align: center;
            margin-left: 1px;
            margin-right: 1px;
            /*text-decoration: none;*/
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 10px;
        }

            ul.nav li a:hover {
                background-color: #e6e6e6;
                text-decoration: none;
                color: black;
            }

div.image {
    background-image: url(/images/logo.png);
    background-size: cover;
}



.gradient {
    margin: 13px;
    padding: 10px;
    width: 400px;
    background-color: #e8e9e9;
}

.gradient_landreliab {
    margin: 13px;
    padding: 10px;
    width: 440px;
    background-color: #e8e9e9;
}

.swatches {
    /*background: linear-gradient(to right, #f00, #ffa500, Yellow,#44ed63, #00f);*/
    background: linear-gradient(to right,#e41a1c,#999999,#f781bf,#a65628,#ffff33,#ff7f00,#984ea3,#4daf4a, #377eb8);
    height: 16px;
    margin: 0 10px;
}

.swatches2 {
    /*background: linear-gradient(to right, #f00, #ffa500, Yellow,#44ed63, #00f);*/
    background: linear-gradient(to right,#ffffcc,#c7e9b4,#7fcdbb,#41b6c4,#2c7fb8,#253494);
    height: 16px;
    margin: 0 10px;
}

.swatches3 {
    /*background: linear-gradient(to right, #f00, #ffa500, Yellow,#44ed63, #00f);*/
    background: linear-gradient(to right,#a6611a,#dfc27d,#f5f5f5,#80cdc1,#018571);
    height: 16px;
    margin: 0 10px;
}

.labels {
    position: relative;
}

.label {
    max-width: 32%;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    padding: 0px !important;
    color: black !important;
    display: block !important;
}

    .label.min,
    .label.max {
        position: absolute;
        top: 0;
        min-width: 20px;
    }

    .label.min {
        left: 0;
    }

    .label.median {
        margin: 0 auto;
    }

    .label.max {
        right: 0;
    }

    .label::after {
        display: block;
        text-align: left;
        content: '|';
    }

    .label.min::after {
        margin-left: 10px;
    }

    .label.median::after {
        text-align: center;
    }

    .label.max::after {
        text-align: right;
        margin-right: 10px;
    }

/*.dropdown--reservoir {
        margin-bottom: 10px;
    }
    .dropdown--reservoir label {
        vertical-align: middle;
    }
    #dam_type_select + .btn-group {
        margin-left: 20px;
    }
    #dam_type_select + .btn-group > .multiselect.btn{
        padding:4px 16px;
    }*/

.checkbox label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

    .checkbox .cr .cr-icon {
        position: absolute;
        font-size: .8em;
        line-height: 0;
        top: 50%;
        left: 15%;
    }

    .checkbox .cr .inter-icon {
        position: absolute;
        font-size: .8em;
        line-height: 0;
        top: 50%;
        left: 15%;
    }

.checkbox label input[type="checkbox"] {
    display: none;
}

    .checkbox label input[type="checkbox"] + .cr > .cr-icon {
        display: none;
    }

    .checkbox label input[type="checkbox"] + .cr > .inter-icon {
        display: none;
    }

    .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
        display: inline-block;
        opacity: 1;
    }

    .checkbox label input[type="checkbox"]:checked + .cr > .inter-icon {
        display: none;
    }

    .checkbox label input[type="checkbox"]:indeterminate + .cr > .inter-icon {
        display: inline-block;
        opacity: 1;
    }

    .checkbox label input[type="checkbox"]:indeterminate + .cr > .cr-icon {
        display: none;
    }

    .checkbox label input[type="checkbox"]:disabled + .cr {
        opacity: .5;
    }


.tablecheckbox label:after {
    content: '';
    display: table;
    clear: both;
}

.tablecheckbox .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
}

    .tablecheckbox .cr .cr-icon {
        position: absolute;
        font-size: .8em;
        line-height: 0;
        top: 50%;
        left: 15%;
    }

    .tablecheckbox .cr .inter-icon {
        position: absolute;
        font-size: .8em;
        line-height: 0;
        top: 50%;
        left: 15%;
    }

.tablecheckbox label input[type="checkbox"] {
    display: none;
}

    .tablecheckbox label input[type="checkbox"] + .cr > .cr-icon {
        display: none;
    }

    .tablecheckbox label input[type="checkbox"] + .cr > .inter-icon {
        display: none;
    }

    .tablecheckbox label input[type="checkbox"]:checked + .cr > .cr-icon {
        display: inline-block;
        opacity: 1;
    }

    .tablecheckbox label input[type="checkbox"]:checked + .cr > .inter-icon {
        display: none;
    }

    .tablecheckbox label input[type="checkbox"]:indeterminate + .cr > .inter-icon {
        display: inline-block;
        opacity: 1;
    }

    .tablecheckbox label input[type="checkbox"]:indeterminate + .cr > .cr-icon {
        display: none;
    }

    .tablecheckbox label input[type="checkbox"]:disabled + .cr {
        opacity: .5;
    }