#mainApp
{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}


#mainDisplay,
.venDisplay,
.coherencyDisplay,
.adspexDisplay
{
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 300px;
    right: 0;
}

#mainDisplay.expanded,
.venDisplay.expanded,
.adspexDisplay.expanded
{
    left: 25px;
}

.mapContainer
{
    margin: 30px auto 10px;
    position: relative;
}

.comaredTwoDataLayer .heatmap
{
    position: absolute;
}


.timeLapse
{
    position: absolute;
    bottom: 10px;
    right: 10px;

    cursor: pointer;
    z-index: 5000;

    color: #f4abcc;
}

.timeLapse:hover
{
    color: #f06eaa;
}

.heatmapNameHolder
{
    position: absolute;

    bottom: 10px;
    left: 10px;

    cursor: pointer;
    z-index: 5000;
}

.heatmapNameHolder:hover
{
    color: #6dcff6;
}

    .heatmapNameHolder > div
    {
        /*float: left;*/
    }


    .heatmapNameHolder .heatmapName
    {
       float: left;
    }

    .heatmapNameHolder .closeHeatmap
    {
        margin-left: 5px;
        float: left;
    }


    .heatmapNameHolder .stimulusThumb
    {
        clear:both;
        margin-bottom: 5px;
    }

    .heatmapNameHolder .stimulusThumb img
    {
        width: 100px;
    }


/* venn demo  */

    #venn-demo
    {
/*        width: 860px;
        height: 500px;
        margin: 20px 10px 10px;

        background-color: #fff;*/

        width: 100%;
        padding: 50px 0;
        text-align: center;
    }

    #venn-demo a
    {
        color: #fff;
        display: block;
        line-height: 24px;
    }

    #venn-demo .copySurveyBtn
    {
        width: 200px;
        border-radius: 4px;
        line-height: 26px;
        height: 26px;
        margin: 20px auto;
        color: #222;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+50,d1d1d1+51,fefefe+100;Grey+Gloss+%231 */
        background: #e2e2e2; /* Old browsers */
        background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

        cursor: pointer;
    }


    #region-list
    {
        color: #fff;
        text-align: center;
        /*width: 860px;*/
        margin: 20px 10px 10px;
    }

    #rightSpaceResult
    {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 0;
        left: 900px;
        z-index:-1;
        overflow: auto;
    }

    .venDisplay .rightSpaceResultSection
    {
        margin-top: 10px;
        float: left;
        margin-right: 10px;
    }

    .venDisplay .rightSpaceResultSection:nth-of-type(1)
    {
        margin-top: 0;
    }

    .venDisplay .rightSpaceResultSection p
    {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        margin-top: 0;
    }

        .venDisplay .rightSpaceResultSection > div
        {
            font-size: 14px;
            font-weight: normal;
            margin: 5px 0 5px 10px;
        }


        .venDisplay .rightSpaceDetail
        {
            /*margin-top: 15px;*/
            border: 1px dashed #6dd0f7;
            background-color: rgba(109,208,247,0.3);
            padding: 5px;
        }


        .venDisplay .rightSpaceIntro
        {
            color: #6dd0f7;
            padding-bottom: 10px;
            border-bottom: 1px dashed #6dd0f7;
        }


        .venDisplay .rightSpaceHover
        {
            cursor: pointer;
            text-decoration: underline;
        }

.coherencyDisplay #mapList,
.coherencyDisplay #coherencyList,
.coherencyDisplay #mapHeader,
.coherencyDisplay #coherencyHeader
{
    width: 46%;
    float: left;
    margin:10px 2%;
    box-sizing: border-box;
}

.coherencyDisplay #mapHeader label,
.coherencyDisplay #coherencyHeader label
{
    margin-bottom: 0;
    float: right;
    margin-top: 25px;
    font-weight: normal;
}

.coherencyDisplay #mapHeader,
.coherencyDisplay #coherencyHeader
{
    font-size: 20px;
    font-weight: bold;
    margin-top: 25px;
}

.coherencyDisplay #mapList,
.coherencyDisplay #coherencyList
{
    padding: 10px;
    border: 1px solid #ccc;
    height: 60vh;
    overflow: auto;
    margin-bottom: 30px;
}

.coherencyDisplay label
{
    display: block;
    margin: 10px 0;
    cursor: pointer;
    font-size: 14px;

    vertical-align: middle;
}

.coherencyDisplay input[type=checkbox]
{
    margin-right: 6px;
}


.coherencyDisplay #findCoherency
{
    clear: both;
    color: #555;
    width: 200px;
    display: block;
    margin: auto;
}

/* ------------------------------------------------------------------------ */


.compareMapHolder
{
    position: absolute;
    top: 30px;
/*    left: 0;
    right: 0;
    bottom: 0;*/
}

    .multiMap
    {
        margin: 0 10px;
        float: left;

        position: relative;
    }

    .multiMap.largeView
    {
        margin: 0 auto;
    }

        .multiMap .mapTitle
        {
            color: #ffffff;
            font-size: 14px;
            text-align: center;
        }

        .multiMap .heatmap,
        .multiMap .diffmap
        {
            position: absolute;
            z-index: 3000;
            top: 0;
            left: 0;
        }


    .comparedMapName
    {
        position: absolute;
        left: 10px;
        bottom: 5px;
        font-size: 12px;
    }

    .comparedMapName .strong
    {
        color: #fff799;
    }

/*===================================================================*/
/* ZONE NAME LAYER SECTION */
/* HOTSPEX MAP LAYER */
/* CLIENT MAP LAYER */
/* SVG MAP TEMPLATE LAYER */
/* ATTRIBUTE TAG STYLE */
/* CONTEXT WINDOW STYLE */
/* D3HOLDER STYLE */
/*===================================================================*/



/*===================================================================*/
/* ZONE NAME LAYER SECTION */
.zoneNameLayer
{
    position: absolute;
}

    .zoneNames
    {
        list-style: none;
    }

        .zoneNames li
        {
            position: absolute;
        }



/*===================================================================*/
/* HOTSPEX MAP LAYER */

.hotspexLayer
{
    position: absolute;
}





/*===================================================================*/
/* CLIENT MAP LAYER */
.clientLayer
{
    position: absolute;
    z-index: 1001;
}





/*===================================================================*/
/* CLIENT MAP LAYER */
.heatmapLayer
{
    position: absolute;
    z-index: 1010;
}


    .heatmapLayer .heatImgLayer
    {
        position: absolute;
        z-index: 2000;
    }

    .heatmapLayer .heatDataLayer
    {
        position: absolute;
        z-index: 2001;
    }

    .heatmapLayer .clientLayer
    {
        position: absolute;
        z-index: 2002;
    }





/*===================================================================*/
/* SVG MAP TEMPLATE LAYER */
.mapTemplate
{
    display: block;
    position: absolute;

    z-index: 1000;
}



/*===================================================================*/
/* ATTRIBUTE TAG STYLE */

/* thumb for image and video tag */
.mediaTag
{
    position: absolute;
}

.mediaTag img
{
    width: 60px;
    border: 2px solid #fff;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.4);

    cursor: pointer;
}


.tag
{
    position: absolute;
    background-color: #fff;
    border: 1px solid #888;
    white-space:nowrap;
    padding: 2px 4px 3px;
    color: #111;
    font-size: 10px;
    font-family: "Verdana";
    line-height: 10px;
    display: inherit;
    font-weight: normal;

    box-shadow: -2px 2px 2px 0 rgba(0,0,0, 0.6);
    text-transform: capitalize;
    cursor: pointer;
}

    .tag.noBG
    {
        background:none;
        box-shadow:none;
        border: none;
    }


    .tag.isDriver
    {
        font-weight: bold;
        border: 2px solid #000;
        padding-bottom: 4px;
        font-size: 11px;
        box-shadow: -2px 2px 2px 0 rgba(0,0,0, 0.6);
    }


    .tag.isDriver.noBorder
    {
        border:none;
        box-shadow: none;
    }


    .tag.largerTag
    {
        font-size: 30px;
        line-height: 36px;
        font-weight: bold;
    }


    .tag .score
    {
        display: inline-block;
    }


/* CONTEXT WINDOW STYLE */
.contextMenuHolder
{
    cursor: default;

    position: absolute;
    background-color: #d2edf8;
    color: #222;
    border-radius: 4px;
    z-index: 1020;
    /*padding: 6px 12px;*/

    overflow: auto;

    min-width: 200px;

    box-shadow: 0 0 6px 6px rgba(60,60,60,0.6);
}

    .contextMenuHolder .titleBar
    {
        border-bottom: none;
        margin-bottom: 5px;

        color: #ffffff;

        overflow: auto;

        background-color: #0072bc;
        position: relative;

        height: 30px;
    }

    .contextMenuHolder .title
    {
        font-size: 14px;
        padding-left: 10px;
        display: block;
        margin-top: 6px;
    }


    .contextMenuHolder .closeContext
    {
        position: absolute;
        right: 0px;
        top: 4px;
        cursor: pointer;
    }

    .contextMenuHolder .closeContext:hover
    {
        color: #6dcff6;
    }


    .contextMenuHolder .contextTitle
    {
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
        border-bottom: 1px dotted #222;
        margin-left: 10px;
        margin-right: 10px;
    }


    .contextMenuHolder .contextTitle:last-child
    {
        border-bottom: none;
    }


    .contextMenuHolder .optionHolder
    {
        margin: 10px 10px 0;
        padding-left: 20px;
        padding-bottom: 10px;
        border-bottom: 1px dotted #222;
    }

    .contextMenuHolder .option
    {
        line-height: 30px;
    }


    .contextMenuHolder .action
    {
        cursor: pointer;
        color: #222;
    }

    .contextMenuHolder .action:hover
    {
        color: #1a6bba;
    }


    .contextMenuHolder .action.option:hover
    {
        text-decoration: underline;
        font-weight: bold;
    }


    .contextMenuHolder input[type='color']
    {
        width: 25px;
        height: 20px;
    }


    .contextMenuHolder input[type='text']
    {
        width: 40px;
        border: 1px solid #888;
        border-radius: 4px;
        padding: 2px 4px;
    }

    .contextMenuHolder input[type='radio']
    {
        vertical-align: middle;
        margin-right: 3px;
    }

    .contextMenuHolder input[type='radio']:last-child
    {
        margin-left: 10px;
    }


.searchMapHolder
{
    position: absolute;
    z-index: 8080;

    top: 0;
    left: 0;
}



/* D3HOLDER STYLE */
.d3Holder
{
    position: absolute;
    z-index: 9999;

    top: 0;
    left: 0;
}

.d3Holder svg
{
    position: absolute;
    pointer-events: none;
    width: 800px;
    height: 600px;
}


.d3Holder line {
    fill: none;
    /*stroke: #000;*/
    stroke-width: 2px;
}

/*.d3Holder rect
{
    fill: #f00;
}*/


.d3Holder text {
    fill: #fff;
    font: 12px Arial;
    pointer-events: auto;
    cursor: pointer;
    padding-top: 2px;
}

.verbatimTooltip
{
    position: absolute;

    max-width: 300px;

    background-color: #333;
    padding: 4px;
    border-radius: 4px;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.7);

    z-index: 1050;

}

    .verbatimTooltip:before
    {
        content: "";
        position: absolute;

        top: 8px;
        left: -8px;
        width: 0;
        height: 0;
        border: 4px solid #333;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }