.ruotabg {
            background-color: #30383B;
        }

        /* css sdgs icons */
        .cls-1{fill:#f99e27;}.cls-2{fill:#00add8;}.cls-3{fill:#01568a;}.cls-4{fill:#e9202f;}.cls-5{fill:#fff;}.cls-6{fill:#f36f26;}.cls-7{fill:#ef4229;}.cls-8{fill:#fdb716;}.cls-9{fill:#2e9a47;}.cls-10{fill:#901939;}.cls-11{fill:#c22034;}.cls-12{fill:#cd8c2a;}.cls-13{fill:#d1a02a;}.cls-14{fill:#e01d83;}.cls-15{fill:#1e3768;}.cls-16{fill:#42ae49;}.cls-17{fill:#0a7dbc;}.cls-18{fill:#49783d;}

        .circle, .cls{
            stroke-miterlimit: 10;
        }
        
        .circle, .cls{
            fill: #30383B;
            stroke:#fff;
            stroke-width:1.5px;
            transition: fill 0.2s;
        }
        
        .circle, .cls {
            stroke-linecap:round;
        }
        
        .cls{
            stroke-linejoin:round;
        }

        #item-governance:hover circle,
        #item-people:hover circle,
        #item-products:hover circle,
        #item-valuechain:hover circle,
        #item-environment:hover circle
        {
            fill: #4EA157;
            stroke: #ffffff;
            transition: fill 0.4s;
        }

        .active
        {
            fill: #4EA157;
            stroke: #ffffff;
            transition: fill 0.4s;
        }

        #item-governance:hover path,
        #item-people:hover path,
        #item-products:hover path,
        #item-valuechain:hover path,
        #item-environment:hover path
        {
            fill: #4EA157;
            stroke: #ffffff;
            transition: fill 0.4s;
        }

        #item-governance .text-small,
        #item-people .text-small,
        #item-products .text-small,
        #item-valuechain .text-small,
        #item-environment .text-small
        {
            opacity: 0;
            transition: opacity 0.4s;
        }
        
        #item-governance:hover .text-small,
        #item-people:hover .text-small,
        #item-products:hover .text-small,
        #item-valuechain:hover .text-small,
        #item-environment:hover .text-small
        {
            opacity: 1;
            transition: opacity 0.4s;
        }

        #item-governance:hover #text-layer-01,
        #item-people:hover #text-layer-02,
        #item-products:hover #text-layer-03,
        #item-valuechain:hover #text-layer-04,
        #item-environment:hover #text-layer-05
        {
            opacity: 1;
            transition: opacity 0.4s;
        }

        .text-main {
            fill: #ffffff;
            font-size: 30px;
            font-family: "Helvetica Now Text Bold", sans-serif;
            font-weight: bold;
        }

        .plus {
            font-family: "Helvetica Now Text", sans-serif;
            font-size: 30px;
            font-weight: 100;
        }

        .text-small {
            fill: #ffffff;
            font-size: 12px;
            font-family: "Helvetica Now Text Bold", sans-serif;
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .arrow {
            font-family: "Helvetica Now Text", sans-serif;
            font-size: 12px;
            font-weight: 100;
        }

        .rect-layer {
            fill: #30383B;
            /* stroke: #4EA157; */
        }

        .text-layer {
            fill: #ffffff;
            font-family: "Helvetica Now Text", sans-serif;
            font-size: 15px;
            font-weight: 100;   
        }

        .text-layer-title {
            fill: #ffffff;
            font-family: "Helvetica Now Text", sans-serif;
            font-size: 18px;
            font-weight: bold;  
        }

        #text-layer-1,
        #text-layer-2,
        #text-layer-3,
        #text-layer-4,
        #text-layer-5 {
            opacity: 0;
            transition: opacity 0.2s;
        }

    </style>

    <script>
        function switchContent(item, i){
            //alert(i);
            
            /* reset all active elements */
            const tlg = document.querySelectorAll('.text-layer-group');
            tlg.forEach((element) => {
                element.style.opacity = 0;
            });

            var tm = document.getElementById('text-layer-main');
            tm.style.opacity = 0;


            const clss = document.querySelectorAll('.cls');
            clss.forEach((element) => {
                element.classList.remove('active');
            });

            const circles = document.querySelectorAll(' .circle');
            circles.forEach((element) => {
                element.classList.remove('active');
            });
        

            /* set active element */
            var id = document.getElementById('text-layer-'+i);
            id.style.opacity = 1;

            const cls = document.querySelectorAll('#'+item+' .cls');
            cls.forEach((element) => {
                element.classList.add('active');
            });

            const circle = document.querySelectorAll('#'+item+' .circle');
            circle.forEach((element) => {
                element.classList.add('active');
            });
            
        }