.hhcmap .map-tip {
    position: absolute;
    position: absolute;
    background: rgba(255,255,255,0.8);
    padding: 0px 3px;
    border: 1px solid grey;
    z-index: 2000;
}


.consequence_map {
    margin: 0px;
    padding: 0px;
    position: relative;
}

    .consequence_map .esriSimpleSlider {
        top: auto;
        bottom: 10px;
        left: 10px;
    }

        .consequence_map .esriSimpleSlider div {
            width: 20px;
            height: 20px;
            font-size: 20px;
            line-height: 20px;
        }

    .consequence_map .maptoolbar {
        z-index: 1000;
        position: absolute;
        top: 15px;
        right: 15px;
    }

        .consequence_map .maptoolbar .toolbutton .btn {
            background: white;
            padding: 2px;
            height: 22px;
            width: 22px;
            border: 1px solid #808080;
        }

    .consequence_map .greyout {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.50);
        z-index: 1020;
    }

    .consequence_map .maploading {
        background-image: url("/img/loading-snake.gif");
        background-size: cover;
        /*background-image: url("data:image/svg+xml;utf8,<svg width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='uil-ring-alt'><rect x='0' y='0' width='100' height='100' fill='none' class='bk'></rect><circle cx='50' cy='50' r='40' stroke='#afafb7' fill='none' stroke-width='10' stroke-linecap='round'></circle><circle cx='50' cy='50' r='40' stroke='#ff5c5c' fill='none' stroke-width='6' stroke-linecap='round'><animate attributeName='stroke-dashoffset' dur='2s' repeatCount='indefinite' from='0' to='502'></animate><animate attributeName='stroke-dasharray' dur='2s' repeatCount='indefinite' values='150.6 100.4;1 250;150.6 100.4'></animate></circle></svg>");*/
        width: 40px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -20px;
        margin-top: -20px;
        z-index: 1019;
    }

    .consequence_map .map-tip {
        position: absolute;
        position: absolute;
        background: rgba(255,255,255,0.8);
        padding: 0px 3px;
        border: 1px solid grey;
        z-index: 2000;
    }

    .consequence_map .legend {
        box-shadow: 2px 2px 2px #404040;
        background: rgba(255,255,255,0.70);
        border: 1px solid #808080;
        border-radius: 2px;
        padding: 3px;
        padding-top: 0px;

        position: absolute;
        z-index: 999;
        bottom: 23px;
        right: 18px;
    }

    .consequence_map .large-legend .legend {
        width: 125px;
    }

    .consequence_map .legend .legendTitle {
        color: black;
        font-size: 11px;
        font-weight: bold;
    }

    .consequence_map .legend .legendline {
        line-height: 14px;
    }

    .consequence_map .legend .dotpatch {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        display: inline-block;
    }

        .consequence_map .legend .dotpatch_sm {
            height: 10px;
            width: 10px;
            /*border-radius: 50%;*/
            display: inline-block;
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='16'%20width='16'%3E%3Cpath%20d='M8.5%201.2a7.3%207.3%200%201%200%207.3%207.3%207.3%207.3%200%200%200-7.3-7.3zm0%2013.6a6.3%206.3%200%201%201%206.3-6.3%206.307%206.307%200%200%201-6.3%206.3z'%3E%3C/path%3E%3Cpath%20d='M8.5%202.2a6.3%206.3%200%201%200%200%2012.6%206.3%206.3%200%201%200%200-12.6z'%20opacity='.25'%3E%3C/path%3E%3C/svg%3E");
            background-size: cover;
        }

        .consequence_map .legend .dotpatch_lg {
            height: 24px;
            width: 24px;
            /*border-radius: 50%;*/
            display: inline-block;
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='16'%20width='16'%3E%3Cpath%20d='M8.5%201.2a7.3%207.3%200%201%200%207.3%207.3%207.3%207.3%200%200%200-7.3-7.3zm0%2013.6a6.3%206.3%200%201%201%206.3-6.3%206.307%206.307%200%200%201-6.3%206.3z'%3E%3C/path%3E%3Cpath%20d='M8.5%202.2a6.3%206.3%200%201%200%200%2012.6%206.3%206.3%200%201%200%200-12.6z'%20opacity='.25'%3E%3C/path%3E%3C/svg%3E");
            background-size: cover;
        }

    .consequence_map .legend .legendItemText {
        margin-left: 5px;
        font-size: 11px;
        font-weight: bold;
    }

    .consequence_map .legend .legendColorRamp {
        height: 16px;
        width: 95px;
    }

        .consequence_map .legend .legendColorRamp.longLegend {
            width: 145px;
        }

        .consequence_map .legend .legendColorRamp span {
            line-height: 13px;
            font-size: 11px;
            font-weight: bold;
            color: black;
        }

    .consequence_map .legend .legendCustomKey {
        height: 16px;
        line-height: 13px;
        font-size: 11px;
        margin-top: 2px;
    }

        .consequence_map .legend .legendCustomKey .circlesymbol {
            border-style: solid;
            border-width: 1px;
            height: 12px;
            width: 12px;
            border-radius: 6px;
            display: inline-block;
            margin-right: 3px;
        }

        .consequence_map .legend .legendCustomKey .circlesymbol2 {
            border-style: solid;
            border-width: 1px;
            height: 8px;
            width: 8px;
            border-radius: 6px;
            display: inline-block;
            margin-right: 3px;
        }

    .consequence_map .lapsetime {
        background: rgba(0,0,0,0.7);
        color: white;
        font-weight: bold;
        font-size: 10px;
        position: absolute;
        top: 5px;
        left: 25px;
        z-index: 200;
        padding-left: 3px;
        padding-right: 3px;
    }

    .consequence_map .AnimationControl {
        position: absolute;
        bottom: 22px;
        left: 55px;
        width: 140px;
        padding: 3px;
        background: rgba(255,255,255,0.75);
        border: 1px solid #606060;
        border-radius: 2px;
    }

        .consequence_map .AnimationControl.Top {
            bottom: inherit;
            top: 25px;
        }

        .consequence_map .AnimationControl .btn {
            border: 1px solid #606060;
        }

        .consequence_map .AnimationControl .btn:hover {
            background: #e0e0e0;
        }

        .consequence_map .AnimationControl span {
            font-size: 9px;
            font-weight: bold;
        }

        .consequence_map .AnimationControl input[type=range] {
            -webkit-appearance: none;
            border: 1px solid #000000;
            height: 12px;
            padding: 0px; /*need this for IE */
            border-radius: 6px;
            background: #808080;
            cursor: pointer;
            margin-top: 5px;
            margin-bottom: 5px;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
            outline: none;
        }

    .consequence_map .AnimationControl2 {
        position: absolute;
        top: -1px;
        left: 145px;
        width: 200px;
        padding: 3px;
        /*
        background: rgba(255,255,255,0.75);
        border: 1px solid #606060;
        border-radius: 2px;
        */
    }

        .consequence_map .AnimationControl2 input[type=range] {
            -webkit-appearance: none;
            border: 1px solid #000000;
            height: 12px;
            padding: 0px; /*need this for IE */
            border-radius: 6px;
            background: #808080;
            cursor: pointer;
            margin-top: 5px;
            margin-bottom: 5px;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
            outline: none;
        }

    .consequence_map .lapseTOC {
        position: absolute;
        top: 5px;
        right: 10px;
        padding: 2px 5px;
        background: rgba(255,255,255,0.75);
        border: 1px solid #606060;
        font-size: 12px
        /* 
    border-radius: 2px;
    */
    }

    .consequence_map .OpacityControl {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 125px;
        padding: 3px;
        background: rgba(255,255,255,0.75);
        border: 1px solid #606060;
        border-radius: 2px;
    }

        .consequence_map .OpacityControl input[type=range] {
            -webkit-appearance: none;
            border: 1px solid #000000;
            height: 12px;
            padding: 0px; /*need this for IE */
            border-radius: 6px;
            background: #808080;
            cursor: pointer;
            margin-top: 5px;
            margin-bottom: 5px;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
            outline: none;
        }

.circlesymbol.green {
    background: rgba(51,204,51,0.75);
    border-color: rgb(51,204,51);
}

.circlesymbol.blue {
    background: rgba(0,174,239,0.75);
    border-color: rgb(0,174,239);
}

.circlesymbol.yellow {
    background: rgba(255,255,51,0.75);
    border-color: rgb(255,204,0);
}

.circlesymbol.orange {
    background: rgba(200,48,29,0.75);
    border-color: rgb(200,48,29);
}

.circlesymbol.red {
    background: rgba(255,0,0,0.75);
    border-color: rgb(255,0,0);
}

.circlesymbol.black {
    background: rgba(60,60,60,0.75);
    border-color: rgb(60,60,60);
}

.data-area.cChart:has(.chartContainer) {
    /* if data-area has .chartContainer we need to move padding to chartContainer instead */
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden
}

.data-area.cChart .chartContainer {
    max-height: 100%;
    padding: 1em;
}