/*Border*/
#color-bar{
    width: 4vw;
    position: absolute;
    bottom:10vh;
    right:5vw;
    overflow: visible;

}
.color-wrapper{
    display: inline-block;
    width:1.4vw;
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19);
}

/*Color item*/
.color-one{
    width:1.4vw;
    height:0.1vh;
    float:left;
    /*line-height: 0.1rem;*/
    font-size: 0rem;
    cursor: pointer;

}
#color-bar_title{
    width: 11vw;
    /*height: 10vw;*/
    position: relative;
    float: right;
    top:42vh ;
    font-family: "Arial Rounded MT Bold";
    font-weight: bold;
    /*right:20vw;*/
    transform:rotate(270deg);
    text-align: center;
    font-size: 1vw;
    /*overflow: visible;*/
    display: inline-block;
}
.text-wrapper {
    font-family: "Tahoma";
    position: relative;
    display: inline-block;
    width: 1.4vw;
    bottom: 0.9vh;
}
.text-legend{
    width:1.4vw;
    height:0.1vh;
    font-size: 0.75vw;
    float:right;
    text-align: left;
    /*cursor: pointer;*/
}
/*White text*/
.text_white{
    color:white;
}
/*Black text*/
.text_black{
    color:black;
}