.tx-aquila-eltifassetmap {
    margin-bottom: 50px;
    
    .container {
        position: relative;
    }
    
    .cls-2, .cls-1 {
        fill: #ebebeb;
        
        &.active {
            fill: #d2d2d2;
        }
    }
    
    .tx-aquila-eltifassetmap-map-wrapper {
        position: relative;
        /*border: 1px solid red;*/
        width: 80%;
        margin-left: 20%;
    }
    
    .tx-aquila-eltifassetmap-dot {
        position: absolute;
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #000;
        transform: translateX(-50%) translateY(-50%);
        
        @media (width >= 768px) {
            width: 10px;
            height: 10px;
        }
        
        &.tx-aquila-eltifassetmap-dot-wind {
            background: #4a96d2;
        }
        
        &.tx-aquila-eltifassetmap-dot-hydro {
            background: #1b2d70;
        }
        
        &.tx-aquila-eltifassetmap-dot-battery_energy_storage {
            background: #6b6a65;
        }
        
        &.tx-aquila-eltifassetmap-dot-solar {
            background: #f6ca21;
        }
        
        &.tx-aquila-eltifassetmap-dot-energy_efficiency {
            background: #73b28d;
        }
    }
    
    .tx-aquila-eltifassetmap-asset-icon {
        position: absolute;
        display: block;
        width: 30px;
        height: 30px;
        transform: translateX(-50%) translateY(-50%);
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        border: none;
        background-color: transparent;
        padding: 0;
                
        @media (width >= 768px) {
            width: 40px;
            height: 40px;
        }
        
        @media (width >= 992px) {
            width: 50px;
            height: 50px;
        }
        
        &.tx-aquila-eltifassetmap-asset-icon-wind {
            background-image: url(../Img/eltif-asset-map/icon-wind.svg)
        }
        
        &.tx-aquila-eltifassetmap-asset-icon-hydro {
            background-image: url(../Img/eltif-asset-map/icon-hydro.svg)
        }
        
        &.tx-aquila-eltifassetmap-asset-icon-battery_energy_storage {
            background-image: url(../Img/eltif-asset-map/icon-battery.svg)
        }
        
        &.tx-aquila-eltifassetmap-asset-icon-solar {
            background-image: url(../Img/eltif-asset-map/icon-solar.svg)
        }
        
        &.tx-aquila-eltifassetmap-asset-icon-energy_efficiency {
            background-image: url(../Img/eltif-asset-map/icon-energy-efficiency.svg)
        }
        
        &:hover {
            cursor: pointer;
        }
    }
    
    .tx-aquila-eltifassetmap-info {
        position: absolute;
        display: block;
        width: 150px;
        padding: 12px 10px 0;
        font-size: 12px;
        line-height: 1.2em;
        top: -20px;
        background: #FFF;
        display: none;
        z-index: 10;
        text-align: left;
        border: 1px solid black;
        
        ::after {
            content: '';
            position: absolute;
            top: 27px;
            right: -8.8px;
            width: 15px;
            height: 15px;
            transform: rotate(45deg);
            border-top: 1px solid black;
            border-right: 1px solid black;
            background: white;
        }
        
        @media (width >= 768px) {
            ::after {
                top: 31px;
            }
        }
        
        @media (width >= 991px) {
            padding: 20px 15px 0 15px;
            width: 250px;
            font-size: 14px;
            
            ::after {
                top: 35px;
            }
        }
        
        &.tx-aquila-eltifassetmap-info-right {
            left: 40px;
            
            ::after {
                right: inherit;
                left: -8.8px;
                transform: rotate(-135deg);
            }
            
            @media (width >= 768px) {
                left: 50px;
            }
            
            @media (width >= 991px) {
                left: 60px;
            }
        }
        
        &.tx-aquila-eltifassetmap-info-left {
            right: 40px;
            
            @media (width >= 768px) {
                right: 50px;
            }
            
            @media (width >= 991px) {
                right: 60px;
            }
        }
    }
    
    .tx-aquila-eltifassetmap-asset-icon:hover,
    .tx-aquila-eltifassetmap-asset-icon:focus {
        z-index: 20;
        .tx-aquila-eltifassetmap-info {
            display: block;
        }
    }
    
    ul.tx-aquila-eltifassetmap-legend {
        position: absolute;
        top: 0;
        left: 10px;
            
        @media (width >= 768px) {
            top: 48%;
            transform: translateY(-50%);
        }
        
        li {
            padding-left: 35px;
            position: relative;
            display: block;
            height: 25px;
            line-height: 25px;
            margin-bottom: 4px;
            font-size: 14px;
                
            @media (width >= 768px) {
                padding-left: 55px;
                height: 40px;
                line-height: 40px;
                margin-bottom: 6px;
                font-size: 16px;
            }

            @media (width >= 992px) {
                padding-left: 65px;
                height: 50px;
                line-height: 50px;
                margin-bottom: 10px;
                font-size: 18px;
            }
            
            &:before {
                display: none;
            }
            
            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 25px;
                height: auto;
                
                @media (width >= 768px) {
                    width: 40px;
                }

                @media (width >= 992px) {
                    width: 50px;
                }
            }
        }
    }
}