.mainmap_legenda{
    position:absolute;
    left: -200px;
    top: 40px;
    width:165px;
    height: 240px;
    font-family: firaSansRegular;
    font-size:9px;
    color:#00325F;
    background-image:url('../images/mainlegenda.jpg');
    background-size:contain;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.5);	
    z-index:25;
    transition: left 500ms ease-out;
}

.map_legenda{
    position:absolute;
    left: -300px;
    top: 40px;
    width:270px;
    height: 220px;
    font-family: firaSansRegular;
    font-size:9px;
    color:#00325F;
    background-image:url('../images/sublegenda.jpg');
    background-size:contain;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
    z-index:25;
    transition: left 500ms ease-out;
}
.legendaActive{
    left:40px;
}

.mainlegenda_titel{
    position: absolute;
    left: 11px;
    top: 11px;
    font-family: firaSansBold;
    font-size:11px;  
}

.legenda_titel{
    position: absolute;
    left: 11px;
    top: 9px;
    font-family: firaSansBold;
    font-size:11px;  
}

.mainlegenda_subtitel{
	position: absolute;
    left: 11px;
    top: 170px;
    font-family: firaSansBold;
    font-size:9px;  
}

.legenda_table {
    position:absolute;
    top:38px;
    left:6px;
    width:159px;
    display: flex;
    flex-wrap: wrap;
}

.mainlegenda{
	width: 152px;
}

.sublegenda{
	width:265px;
}

.knooppuntlegenda{
    left: 8px;
    top: 188px;
    width: 150px;
}

.legenda_table-cell {
    box-sizing: border-box;
    flex-grow: 1;
    height: 22px;
    padding: 6px 3px;
    overflow: hidden; 
}

.legenda_table-icon {
    box-sizing: border-box;
    flex-grow: 1;
    height: 22px;
    padding: 1px 1px;
    overflow: hidden; 
    background-size: contain;  
    background-repeat: no-repeat;
}

#lti_1{
    background-image:url('../images/icon_1.png');
}

#lti_2{
    background-image:url('../images/icon_2.png'); 
}

#lti_3{
    background-image:url('../images/icon_3.png'); 
}

#lti_4{
    background-image:url('../images/icon_4.png');  
}

#lti_5{
    background-image:url('../images/icon_5.png');
}

#lti_6{
    background-image:url('../images/icon_6.png');
}

#lti_7{
    background-image:url('../images/icon_7.png');
}

#lti_8{
    background-image:url('../images/icon_8.png');  
}

#lti_9{
    background-image:url('../images/icon_9.png');
}

#lti_10{
    background-image:url('../images/icon_10.png'); 
}

#lti_11{
    background-image:url('../images/icon_11.png');
}

#lti_12{
    background-image:url('../images/icon_12.png'); 
}

#lti_13{
    background-image:url('../images/icon_13.png');
}

#lti_14{
    background-image:url('../images/icon_14.png');
}

#lti_15{
    background-image:url('../images/icon_15.png');
}



/* Table column sizing
================================== */
.legenda_table--2cols > .legenda_table-cell  { width: 82%; }
.legenda_table--2cols > .legenda_table-icon  { width: 18%; }

.legenda_table--midcols > .legenda_table-cell  { width: 68%; height: 22px;}
.legenda_table--midcols > .legenda_table-button  { width: 32%; height: 22px; }

.legenda_table--4cols > .legenda_table-cell  { width: 40%; }
.legenda_table--4cols > .legenda_table-icon  { width: 10%; }