/* 
    Document   : map
    Created on : 13/10/2014, 16:41:37
    Author     : matheusnic
    Description:
        Purpose of the stylesheet follows.
*/

.content.map{
    padding: 0px;
}

#map-section{
    /*min-height: inherit;*/
}

#mapBox{
    /*min-height: inherit;*/
}

#mapBox .box{
    /*min-height: inherit;*/
}





#mapContainer{
    /*display: block;*/
    /*height: 100vh;*/
    /*max-height: 85vh;*/
/*    overflow:auto;
    padding-bottom:150px;*/
}
/* Map Canvas */
#map_canvas{
    height: 100%;
    width: 100%;
}

#map_canvas img{
    max-width: none !important; /* Para controles do Google Maps */
}

/* Map Control Components */
#map_canvas div.controlDiv{
    padding: 5px;
}

.containerTitle{
    background-color: #FFF;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    padding: 4px;
    position: relative;
    float: left;
}

.containerTitleContent{
    font-weight: 500;
}

.itemContainer{
    max-width: 250px;
}

#allItemsContainer{
}

/* Title Bars */
.titleBar{
    clear: both;
    white-space: nowrap;
}

.titleBar .titleItem, .attributeItem .titleItem{
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    display: inline-block;
    padding: 4px;
    margin-bottom: 2px;
    margin-right: 2px;
}

.attributeItem .titleItem{
    float: none;
    margin-right: 0px;
}

.clickable{
    cursor: pointer;
}

.rangeContainer{
    max-width: 460px;
    display: inline-block;
}

.rangeItemContainer{
}

.rangeItem.range{
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    padding: 4px;
    white-space: nowrap;
}

.range .displayContent{
    display: inline-block;
}

.range .rank{
    width: 30px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
}

.range.rank0 .rank{
    background-color:  #FFFFB2;
}

.range.rank1 .rank{
    background-color:  #FED976;
}

.range.rank2 .rank{
    background-color:  #FEB24C;
}

.range.rank3 .rank{
    background-color:  #FD8D3C;
}

.range.rank4 .rank{
    background-color:  #FC4E2A;
}

.range.rank5 .rank{
    background-color:  #E31A1C;
}

.range.rank6 .rank{
    background-color:  #B10026;
}

.range.rank7 .rank{ /* All Values */
    background: rgb(0, 204, 172); /* Old browsers */
    /*background: -moz-linear-gradient(left, rgb(0, 49, 204) 0%, rgb(0, 204, 172) 100%); /* FF3.6 */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0, 49, 204)), color-stop(100%,rgb(0, 204, 172))); /* Chrome,Safari4 */
    /*background: -webkit-linear-gradient(left, rgb(0, 49, 204) 0%,rgb(0, 204, 172) 100%); /* Chrome10,Safari5.1 */
    /*background: -o-linear-gradient(left, rgb(0, 49, 204) 0%,rgb(0, 204, 172) 100%); /* Opera 11.10 */
    /*background: -ms-linear-gradient(left, rgb(0, 49, 204) 0%,rgb(0, 204, 172) 100%); /* IE10 */
    /*background: linear-gradient(left, rgb(0, 49, 204) 0%,rgb(0, 204, 172) 100%); /* W3C */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgb(0, 49, 204)', endColorstr='rgb(0, 204, 172)',GradientType=1 );  IE6-9 */
        
/*    background: -moz-linear-gradient(left, #adedad 14%,#dce8bc 28%,#fce8b5 42%,#fbce81 56%,#eeb49f 70%,#dbb9ee 84%,#b6dbed 100%);  FF3.6 
    background: -webkit-linear-gradient(left, #adedad 0%, #adedad 14%,#dce8bc 28%,#fce8b5 42%,#fbce81 56%,#eeb49f 70%,#dbb9ee 84%,#b6dbed 96%, #b6dbed 100%);  Chrome10,Safari5.1 
    background: -o-linear-gradient(left, #adedad 0%, #adedad 14%,#dce8bc 28%,#fce8b5 42%,#fbce81 56%,#eeb49f 70%,#dbb9ee 84%,#b6dbed 96%, #b6dbed 100%);  Opera 11.10 
    background: -ms-linear-gradient(left, #adedad 0%, #adedad 14%,#dce8bc 28%,#fce8b5 42%,#fbce81 56%,#eeb49f 70%,#dbb9ee 84%,#b6dbed 96%, #b6dbed 100%);  IE10 
    background: linear-gradient(left, #adedad 0%, #adedad 14%,#dce8bc 28%,#fce8b5 42%,#fbce81 56%,#eeb49f 70%,#dbb9ee 84%,#b6dbed 96%, #b6dbed 100%);  W3C */
    
    background: -moz-linear-gradient(left, #FFFFB2 14%,#FED976 28%,#FEB24C 42%,#FD8D3C 56%,#FC4E2A 70%,#E31A1C 84%,#B10026 100%); /* FF3.6 */
    background: -webkit-linear-gradient(left, #FFFFB2 0%, #FFFFB2 14%,#FED976 28%,#FEB24C 42%,#FD8D3C 56%,#FC4E2A 70%,#E31A1C 84%,#B10026 96%, #B10026 100%); /* Chrome10,Safari5.1 */
}

/* SearchBox */
.controlUI{
    padding: 5px;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    text-align: left;
    width: 100%;
    height: 100%;
}

#searchBox{
    width: 250px;
    height: 35px;
}

#statsDiv{
    position: absolute;
}

/* ASN Selector */
#asnSelectorContainer{
    width: 250px;
}

.asnItem{
    float:left;
    color: #000;
    background-color: #FFF;
    border-color: rgba(0, 0, 0, 0.2);
    border-width: 1px;
    border-style: solid;
    padding: 5px;
    /*width: 48px;*/
    /*cursor: pointer;*/
}

#asnItemContainer{
    position: relative;
    float: left;
}

#map_canvas .selectedDivContainer{
    position: relative;
    float: left;
}

/* Specific for selection components */
#networkTypeItemContainer {
    left: 45px;
    position: absolute;
}

#attributeItemContainer {
    left: 87px;
    position: absolute;
}

#rangeItemContainer {
    left: 144px;
    position: absolute;
}

#pmtSelectItemContainer{
    position: absolute;
}

#stateSelectItemContainer{
    position: absolute;
    max-height: 200px;
    overflow: scroll;
}

.networkTypeItem, .attributeItem, .rangeItem{
}

.withBorder{
    background-color: #FFF;
    border-color: rgba(0, 0, 0, 0.2);
    border-width: 1px;
    border-style: solid;
    padding: 5px;
}

.withBorder:hover{
    border-color: rgba(0, 0, 0, 1);
}

.withBorder.selected, .withBorder.selected.enabled{
    background-color: #FFFFAA;
}

.stateStatisticItem{
    white-space: nowrap;
}

.graphModalSection{
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgb(240, 240, 240);
    margin-bottom: 5px;
}

.buttonContainer{
    width: 100%;
    max-height: 200px;
    overflow-y: scroll;
}

.graphButton{
    display: inline-block;
    margin-bottom: 2px;
}

.graphButton.disabled, .asnSummary.disabled{
    background-color: #AAA;
    cursor: initial;
}

.graphButton.enabled, .asnSummary.enabled{
    background-color: #FFF;
    cursor: pointer;
}

#graphDivContainer{
    height: 60%;
}

#graphDiv{
    height: 100%;
}

#attributeSelector {
}

.asnSummary{
    margin-bottom: 2px;
}

.short-summary{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}

.menuButton{
    overflow: hidden;
}

.hideableMenu2, .hideableMenu {
    display: inline-block;
}

.hideableMenu2 {
    overflow: hidden;
}

.helpDiv {
    display: none;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    
    border-color: #77ddff;
    border-style: solid;
    border-width: 1px;
    background-color: #aaddff;
}

.helpDiv div p{
    display: inline-block
}

div.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    padding: 10px;
}

div.centered img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

p.centered {
    text-align: center;
    white-space: nowrap;
}

img.icon20 {
    max-height: 20px;
    max-width: 20px;
    height: auto;
    width: auto;
    margin-right: 10px;
}

img.icon24 {
    max-height: 24px;
    max-width: 24px;
    height: auto;
    width: auto;
    margin-right: 10px;
}

img.icon20 {
    max-height: 20px;
    max-width: 20px;
    height: auto;
    width: auto;
    margin-right: 10px;
}

#mapModal{
    overflow-y: scroll;
}