#main {
    float: left;
    /*width: 750px;*/
    
    min-height: 200px;
}
#cont {    
    width: 80%;
}
#overlaydiv {
    width: 100%;
    height: 140px;
    position: absolute;
    bottom: 0;
    background: #FFF;
}
#overlaydiv {
    z-index: 10;
}
/*end of gender demographic css*/
/*Emotion chart css*/
.radar-chart .area {
    fill-opacity: 0.7;
}
.radar-chart.focus .area {
    fill-opacity: 0.3;
}
.radar-chart.focus .area.focused {
    fill-opacity: 0.9;
}
.area.male, .male .circle {
    fill: #C0EEFF;
    stroke: none;
}
.area.female, .female .circle {
    fill: #FDAD9F;
    stroke: none;
}
.area.child, .child .circle {
    fill: #69D2E7;
    stroke: none;
}
.area.teen, .teen .circle {
    fill: #EEAA88;
    stroke: none;
}
.area.adult, .adult .circle {
    fill: #B3CC57;
    stroke: none;
}
.area.senior, .senior .circle {
    fill: #FA6900;
    stroke: none;
}
/*end of emotion chart css*/
#chartwrap {
    width: 100%;
    height: 230px;
}
#chart {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index:1000;
}
#emotionwrap, #agewrap {
    width: 90%;
    height: 300px;
}
#explanation {
    position: absolute;
    top: -10%;
    left: 0%;
    text-align: center;
    color: #000;
    /*z-index:-1;*/
}
#explanation {
    font-size: 8px;
}
#stackedagechartWrap, #stackeddatachartWrap, #impressionchartWrap {
    width:100%;
    height: 300px;
    padding-right: 30px;
}
#maledemographic {
    height: 300px;
    width: 50%;
}
#femaledemographic {
    height: 300px;
    width: 50%;
}
#cont {
    width: 100%;
}
#sidebar {
    float: right;
    width: 100px;
}
#sequence {
    width: 400px;
    height: 70px;
}
#legend {
    padding: 10px 0 0 3px;
}
#sequence text, #legend text {
    font-weight: 600;
    
    color: #FFF;
}
#happyEmotion,#happyAge {
    position: absolute;
    left: 43%;
}
#sadEmotion, #sadAge {
    position: absolute;
    left: 44%;
    bottom: 4%;
}
#surprisedEmotion, #surprisedAge {
    position: absolute;
    top: 48%;
}
#angryEmotion, #angryAge {
    position: absolute;
    top: 48%;
    right: 15%;
}
#chart path {
    stroke: #fff;
}
#percentage {
    font-size: 2.5em;
}
.largerWidget{
    padding-bottom: 50px;
} 
.radarageWidget, .radargenderWidget{
    height: 100%;
}
.stackedWidget{
    padding-bottom: 70px;
}
#dwellLeg{
    padding-left:10px;
}
.dwellHeaderButtons, .impressionHeaderButtons{
    padding-top:2px;
}
#stackedLegend{
    position:absolute;
    right:7%;
    top:13%;
}
#demographicInfo, #sunburstInfo, #genderChartInfo, #ageChartInfo,#stackedAgeInfo, #stackedGenderInfo, #dwellInfo, #impressionInfo{
    height:100%;
    border-left: 2px solid rgba(0,0,0,0.15);
}
#stackedTooltip {
    position: absolute;
    top: 5%;
    right: 5%;
}
#stackeddatachartage, #stackeddatachartpercent, #stackedagechartage,
#stackedagechartpercent,#radarageemotion,#radarage,#radarageval,
#radargenderemotion,#radargender,#radargenderval {
    display: inline;
}
#radarTooltip {
    position: absolute;
    top: 5%;
    right: 5%;
}
#childColour {
    background-color: #6E95E3;
    color: #6E95E3;
}
#teenColour{
    background-color: #FF5A5C;
    color: #FF5A5C;
}
#adultColour{
    background-color: #3E9F2D;
    color: #3E9F2D;
}
#seniorColour{
    background-color: #d0743c;
    color: #d0743c;
}
#maleColour{
    background-color: #6E95E3;
    color: #6E95E3;
}
#femaleColour{
    background-color: #FF5A5C;
    color: #FF5A5C;
}
#maleLegend, #emotionAgeLegend{
    position: absolute;
    top:15%;
    z-index: 10;
}
#maleChildLeg{
    background-color: #BBDEFB;
    color: #BBDEFB;
    display:inline;
}
#maleTeenLeg{
    background-color: #42A5F5;
    color: #42A5F5;
    display:inline;
}
#maleAdultLeg{
    background-color: #1976D2;
    color: #1976D2;
    display:inline;
}
#maleSeniorLeg{
    background-color: #0D47A1;
    color: #0D47A1;
    display:inline;
}
#femaleLegend{
    position: absolute;
    right: 2%;
    top:15%;
    z-index: 10;

}
#femaleChildLeg{
    background-color: #F8BBD0;
    color: #F8BBD0;
    display:inline;
    float: right;
}
#femaleTeenLeg{
    background-color: #F06292;
    color: #F06292;
    display:inline;
    float: right;
}
#femaleAdultLeg{
    background-color: #E91E63;
    color: #E91E63;
    display:inline;
    float: right;
}
#femaleSeniorLeg{
    background-color: #AD1457;
    color: #AD1457;
    display:inline;
    float: right;
}
#emotionAgeChildLeg{
    background-color: #C8E6C9;
    color: #C8E6C9;;
    display:inline;
}
#emotionAgeTeenLeg{
    background-color: #9CCC65;
    color: #9CCC65;
    display:inline;
}
#emotionAgeAdultLeg{
    background-color: #CDDC39;
    color: #CDDC39;
    display:inline;
}
#emotionAgeSeniorLeg{
    background-color: #9E9D24;
    color: #9E9D24;
    display:inline;
}
#dwellChildLeg{
    background-color: #C8E6C9;
    color: #C8E6C9;
    display:inline;
}
#dwellTeenLeg{
    background-color: #9CCC65;
    color: #9CCC65;
    display:inline;
}
#dwellAdultLeg{
    background-color: #CDDC39;
    color: #CDDC39;
    display:inline;
}
#dwellSeniorLeg{
    background-color: #9E9D24;
    color: #9E9D24;
    display:inline;
}
#dwellGlanceLeg{
    background-color: #2299F8;
    color: #2299F8;
    display:inline;
}
#dwellViewLeg{
    background-color: #7A54C3;
    color: #7A54C3;
    display:inline;
}
#dwellStareLeg{
    background-color: #E40283;
    color: #E40283;
    display:inline;
}
#legendText{
    display: inline;
}
#genderFooter{
    height: 20%;
    background-color: rgba(0,0,0,0.3);
}
.descriptionDiv{
    text-align: left;
}
#legend{
    position: absolute;
    top:0%;
}
#dwellchartWrap, #dwell1chartWrap{
    width:100%;
    height:290px;
    margin-bottom: 50px;
}
#dwellHeader{
    display:inline;
}
.impressionHeaderButtons{
    float:right;
}
#impressionHeaderButtons, #dwellHeaderButtons{
    margin-left:10px;
}
.dwellHeaderButtons{
    display: inline;
    float:right;
}

#dwelltooltip{
    float:right;
}
#SAHeaderButtons{
    float:right;
}
.inline{
    display:inline;
}
#logoutbut{
    float:right;
    margin-left: 20px;
}
#maleImpressionFilter.btn-default.active, #maleDwellFilter.btn-default.active {
    background-color: #BBDEFB ;
    color:black;
}
#femaleImpressionFilter.btn-default.active, #femaleDwellFilter.btn-default.active{
    background-color: #F48FB1 ;
    color:black;
}
#childImpressionFilter.btn-default.active, #childDwellFilter.btn-default.active{
    background-color: #C8E6C9 ;
    color:black;
}
#teenImpressionFilter.btn-default.active, #teenDwellFilter.btn-default.active{
    background-color: #9CCC65 ;
    color:black;
}
#adultImpressionFilter.btn-default.active, #adultDwellFilter.btn-default.active{
    background-color: #CDDC39 ;
    color:black;
}
#seniorImpressionFilter.btn-default.active, #seniorDwellFilter.btn-default.active{
    background-color: #9E9D24 ;
    color:black;
}
.child-colour{
    color: #C8E6C9;
}
.teen-colour{
    color: #9CCC65;
}
.adult-colour{
    color: #CDDC39;
}
.senior-colour{
    color: #9E9D24;
}
.male-colour{
    color: #BBDEFB;
}
.female-colour{
    color: #F48FB1;
}
.allWidgets{
    background-color: white;
    border-radius: 2px;
        margin-top:10px;
    margin-bottom:10px;
    padding-bottom: 50px;
}
.filterButtons{
    border-radius: 0px;
    width: 65px;
}
#sunburstMain{
    height:450px;
}
#chartwrap {
        width: 100%;
        height: 340px;
    }
    .highcharts-container{
        z-index:1;
    }
@media screen and (min-width: 1px) and (max-width: 1400px) { 
    
    #stackedagechartWrap {    
        margin-top: 20px;
    }
    #stackeddatachartWrap {
        margin-top: 20px;
    }
}
@media screen and (min-width: 1px) and (max-width: 992px) {
    .highcharts-container{
        z-index:1 !important;
    }
    #sunburstMain{
       height:400px; 
    }
    .allWidgets{
        padding-bottom: 0px;
    }
    #happyEmotion, #happyAge {
        left: 43%;
    }
    #sadEmotion, #sadAge {
        left: 44%;
    }   
    #demographicInfo, #sunburstInfo, #genderChartInfo, #ageChartInfo,#stackedGenderInfo, #stackedAgeInfo, #dwellInfo, #impressionInfo{
        border-left: none;
    }
    #maleLegend, #femaleLegend{
        margin-top: 30px;
    }
    #stackedAgeInfo, #stackedGenderInfo{
        padding-top: 30px;
    }
    #dwellInfo, #impressionInfo{
        padding-top:30px;
    }
}
@media screen and (min-width: 1px) and (max-width: 991px) {
    .descriptionDiv{
        padding-top:70px;
    }
}
@media screen and (min-width: 1px) and (max-width: 810px) {
    
    #sequence {
        width: 300px;
        height: 70px;
    }
    #stackedagechartWrap { 
        margin-top: 40px;
    }
    #stackeddatachartWrap {
        margin-top: 40px;
    }    
}
@media screen and (min-width: 1px) and (max-width: 767px) { 
    #happyEmotion, #happyAge {
        left: 42%;
    }
    .demoWidget{
        padding-bottom: 360px;
    }
    #stackedagechartWrap, #stackeddatachartWrap {
        padding-right: 15px;
    }
    #dwellHeader, .dwellHeaderButtons, #impressionHeader,.impressionHeaderButtons{
        display: block;   
    }
    #impressiontooltip, #dwelltooltip{
        margin-top:20px;
    }
}
@media screen and (min-width: 1px) and (max-width: 570px) {
    #sunburstMain{
       height:370px; 
    }
    #impressiontooltip{
        float:right;
    }
    #impressiontooltip, #dwelltooltip{
        margin-top:35px;
    }
    #stackedagechartWrap, #stackeddatachartWrap {
        height: 240px;
        margin-left:0px;
    }
    #cont {
        width: 100%;
    }
    #chartwrap {
    width: 100%;
    height: 300px;
    }
    .descriptionDiv{
        padding-top:90px;
    }
    #stackedLegend{
        top:20%;
    }
    #radarTooltip {
    top: 100%;
    left: 0%;
    }
}
@media screen and (min-width: 1px) and (max-width: 536px) {
    #dwelltooltip, #impressiontooltip{
        margin-top:30px;
    }
}

@media screen and (min-width: 1px) and (max-width: 400px) {
    #sunburstMain{
       height:320px; 
    }
    #explanation {
        font-size: 8px;
    }
    .filterButtons{
        width:60px;
        padding:2px;
    }
    #impressiontooltip, #dwelltooltip{
        margin-top:22px;
    }
    
}

@media screen and (min-width: 1px) and (max-width: 370px) {
    #dwelltooltip, #impressiontooltip{
        margin-top:70px;
    }
    
    #SAtooltip{
        margin-top:30px;
        text-align: right;
    }
    #SGtooltip{
        margin-top:10px;
        text-align: right;
    }
    .dwellHeaderButtons, .impressionHeaderButtons{
        display:block;
        width:80px;
    }
    #stackedLegend{
        top:20%;
    }
    #radargenderval,#radarageval{
        display: block;
    }
    #stackedagechartWrap, #stackeddatachartWrap {
        height: 180px;
        width: 130%;
        margin-left: -30px;
        margin-right: -30px;
        padding:0px;
        top:20%;
        left:-45%;  
    }
    #explanation{
        font-size: 7px;
    }

}