* {
    box-sizing: border-box;
    margin: 0px;
    font-family: Arial, sans-serif;
}

html{
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    margin: 0 auto;
    background: var(--fff);
    font: normal normal normal 16px / 16px Arial, sans-serif;
    letter-spacing: 0px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;  
    justify-content: space-between;  
    .section-name {
        color: var(--bbb);
        font-size: 35px;
        margin: 0px;
        margin-top: 20px;
    }
}

._d-none {
    display: none;
}

.sr-only{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/** header **/
header{
    >.page-title{
        background: linear-gradient(125deg, #082b7a 35%, #AFDFE9 75%, white 100%);
        height: 85px;
        display: flex;
        justify-content: space-between;
        position: relative;
        &&::after{
            content: "";
            background: url("../assets/images/Graphic_Element.svg") no-repeat;
            position: absolute;
            right: 24%;
            top: 0px;
            height: 100%;
            width: 332px;
            background-size: 70% 100%;
        }
        h1{
            display: flex;
            align-items: center;
            margin: 0px;
            font-size: 30px;
            padding-top: 10px;
        }
        .container {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            .title{
                color: var(--fff);
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
        }
        .eurostat-logo{
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: -10px;
            & >a >img{
                width: 167px;
                height: 24px;
            }
        }
    }
    .navMenucontainer{
        background: linear-gradient(90deg, var(--c-p-140), var(--c-p));
        background-repeat: no-repeat;
        background-origin: padding-box;
    }
    /** Social share buttons **/
    .share-block {
        position: relative;
        background: transparent;
        display: flex;
    }
    .share-block-btn {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 7px;
        border-radius: 0px;
        width: 50px;
        height: 50px;

        svg{
            fill: white;
            width: 40px;
            height: 40px;
        }
    }
    .ecl-social-media-share__list[role="menu"]{
        display: none;
        position: absolute;
        margin: 0;
        padding: 7px 0px 0px;
        border-radius: 5px;
        z-index:200;
        background:white;
        width: 140px;
        height: auto;
        box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, .2);
        align-items: center;
        right: -50px;
        top: 60px;
        flex-direction: column;
        flex-wrap: wrap;
        list-style: none;
    } 
    .ecl-social-media-share__list[role="menu"] .title{
        margin-bottom: 10px;
        width: 100%;
        text-align: left;
        font-weight: normal;
        span{
            padding-left: 20px;
        }
        color: #171a22;
        font: normal normal 400 1rem/1.5rem arial, sans-serif;

    }
    .ecl-social-media-share__list[role="menu"]:focus-visible{
        outline: none;
    }
    .ecl-social-media-share__list[role="menu"] li{
        width: 100%;
        margin-top:auto;
        display: flex;
        margin-inline-end: 0;
    }
    .ecl-social-media-share__list[role="menu"] li.focus{
        outline: -webkit-focus-ring-color auto 1px;
        background: var(--blue-light-5);
    }
    .ecl-social-media-share__list[role="menu"] li a{
        padding: 10px 20px;
        cursor: pointer;
        align-items: center;
        display: flex;
        overflow: hidden;
        color: #0e47cb;
        font: normal normal 400 0.875rem/1.125rem arial, sans-serif;
    }        
    /** **/        
}
#config-description{
    font-size: 16px;
    color: white;
    padding-left: 2px;
}
.ecl-menu{
    display: flex;
    margin: 0 auto;
    list-style: none;
    justify-content: flex-start;
    width: 100%;
    box-shadow:none !important;
}

/** ECL SPINNER **/
.eclSpinnerContainer{
    position:fixed; 
    z-index:2000; 
    width:100%; 
    height: 100%;
    /*background-color:rgba(0, 0, 0, 0.5);*/
    display: none;
    .ecl-spinner--centered{
        top: 200px;
    }
}

/**MAIN**/
main {
    height: calc(100vh - 190px);
    > .container{
       height: 95%;
       margin-top: 0px;
       &.sliderContainer{
         height: 25px;
         margin-top: 20px;
        .rangeSlider{
            width: 100%; /*calc(100% - 230px);*/
            cursor: pointer;
        }
        div[data-track-fill]{
            margin-right: -10px;
         }
        div[data-thumb] {
            span{
                position:absolute;
                top: -16px;
                font-size: 12px;
                left: -4px;
            }
            &:active{
                span{
                    scale: 0.75;
                    font-size:12px;
                }
            }
            &:focus{
                outline: 0.2rem solid black;
            }
        }
        output{
            display: none;
        }
       }
    }
    .filters-container{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 25px;
        .ecl-form-group{
            &.filtersGroup{
                display: flex;
                gap:0px;
                flex-direction: column;
                align-items: center;
                label{
                    margin-top: 5px;
                    font-size: 12px;
                    line-height: 15px;
                    color: transparent;
                    font-size: 1px;
                }
                .ecl-select__container{
                    margin-top: 0px;
                    .ecl-select{
                        padding-bottom:3px;
                        &.open{
                            +.ecl-select__icon{
                                .ecl-icon{
                                    transform: rotate(360deg);
                                    transition: transform .3s ease-in-out;
                                }
                            }
                        }
                    }
                }
            }
            &.showAllData{
                align-content: end;
                div.ecl-checkbox{
                    height: 40px;
                }
            }
            .ecl-form-label{
                white-space: unset;
                margin-top: 0.5rem;
                /*display: none;*/
            }
            .ecl-help-block{
                display: none;
            }
            &.colors-filter{
                display: flex;
                gap:20px;
                justify-content: flex-start;
                margin-top: 5px;
                .ecl-radio__label{
                    padding: 5px 0px;
                }
            }
            &.countriesFormGroup{
                align-content: center;
                #select-multiple-label{
                    margin-top: 5px;
                    font-size: 12px;
                    line-height: 15px;
                    color: transparent;
                    font-size: 1px;
                }
                .ecl-select__multiple{
                    margin-top: 0px;
                    .ecl-select__multiple-toggle{
                        padding-bottom: 3px;
                    }
                    /*multiple dropdown*/
                    .ecl-select__multiple-dropdown{
                        fieldset[data-ecl-multiple-group]{
                            padding-top: 3px;
                            /*optgroup*/
                            legend{
                                display:none;
                            }                            
                            >div.ecl-checkbox{
                                padding-left: 30px;
                                /*fake opt group*/
                                label{
                                    padding-top: 3px;
                                    padding-bottom: 3px;
                                    cursor: pointer;
                                    font-size: 14px;
                                }
                                &:nth-child(2){
                                    padding-left: 0px;
                                    label{
                                        font-weight: 700;
                                    }                                
                                }
                         }
                        }
                        .ecl-select-multiple-toolbar{
                            flex-direction: row;
                            justify-content: space-between;
                            padding: 0px 16px 0px;
                            .ecl-button{
                                padding: 4px 10px;
                                width: 120px;
                                height: 44px;
                                &.ecl-button--primary{
                                    align-self: end;
                                    display: none;
                                }
                                &.ecl-button--secondary{
                                     align-self: end;
                                }
                            }
                        }
                        input.ecl-text-input{
                            margin-top: 12px;
                        }
                    }
                    .ecl-select-multiple-selections-counter{
                        /*top: 18%;*/
                        span{
                            border-radius: 12px;
                            width: 30px;
                            height: 30px;
                            padding: 0.25rem;
                        }
                    }
                }
            }
        }
        .downloadChartCls{
            margin-left: auto;
            align-self: end;
            
            button{
                border-radius: 18px;
                cursor: pointer;
                background: var(--blue-light-5);
                border: 1px solid var(--blue-light-5);
                svg{
                    width: 18px;
                    height: 24px;
                    color: var(--blue);
                }
                &:hover, &:focus-visible{
                    background: var(--blue);
                    border: 1px solid var(--blue);
                    svg{
                        color: white;
                    }
             }
            }

            ul[role="menu"] {
                display: none;
                position: absolute;
                margin: 0;
                padding: 7px 0px 0px;
                border-radius: 5px;
                z-index: 1;
                background: white;
                width: 140px;
                height: auto;
                box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, .2);
                align-items: center;
                right: 45px;
                flex-direction: column;
                flex-wrap: wrap;
                list-style: none;
                li{
                    font-size: 12px;
                    width: 100%;
                    padding: 6px 0px;
                    cursor: pointer;
                    text-align: center;
                    &.focus{
                        outline: black auto 1px;
                        background: var(--blue-light-5);
                    }
                }
                &:focus-visible{
                    outline: none;
                }
            }
        }
    }
    .chart-legends{
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        position: relative;
        min-height: calc(100% - 60px);
        gap:2px;
        .chart-container{
            margin-top:5px;
            width: 100%; /*calc(100% - 230px);*/
            min-height: -webkit-fill-available;
            transform: none !important;
            box-shadow: none !important;
            padding: 5px;
            margin-bottom: 0px;
            max-height: fit-content;
            /***/
            background: #fff;
            border: 1px solid var(--blue-light-5);
            border-radius: 5px;
            transition: .3s;
            outline: none;
            position: relative;
        }
        .legend-container{
            display: none;
            border: 1px solid var(--blue-light-5);
            border-radius: 5px;
            background: var(--fff);
            width: 230px;
            max-height: 100%;
            margin-top: 10px;
            .ecl-form-group{
                &.showAllData{
                    .ecl-checkbox{
                        margin-left: 10px;
                        .ecl-checkbox__label{
                            .ecl-checkbox__text{
                                font:normal normal 14px arial, sans-serif;
                                margin-top: 4px;
                            }
                        }
                    }
                }
            }
            .chart-description{
                padding: 5px;
                h2{
                    color: black;
                    line-height: 20px;
                    font-size: 16px;
                    font-weight: bold;
                }
                p{
                    color: black;
                    font-size: 12px;
                    line-height: 16px;
                }
            }
        }
    }

}

/** shared **/

h1 {
    color: var(--ff3);
    font-size: 42px;
    font-weight: bold;
    color: var(--ff3);
    margin-bottom: 20px;
}

h2,h3 {
    color: var(--ff3);
    font-size: 24px;
    font-weight: normal;
}

.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/*** Tooltip ***/
.tooltip-header {
    color: #000;
    font-weight: bold;
    font-family: Arial, sans-serif;
    margin-bottom: 5px;
}
.tooltip-body{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:10px;
    .value{
        font-weight: bold;
        width: auto;
    }
    .circle{
        width: 10px;
        height: 10px;
        margin-top:5px;
        border-radius: 10px;
    }
}

/***** foooter ****/
footer {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

footer li {
    float: left;
    margin-left: 10px;
}

footer ul {
    list-style: none;
}

footer li a {
    color: var(--blue);
    text-decoration: underline;
    cursor: pointer;
    padding-right: 10px;
    border-right: 1px solid var(--blue);
}
footer li:last-child a{
    border-right: none;
}

footer li a:hover {
    color: #082b7a;
}

footer .read-article-btn {
    font-size: 16px;
    color: #171A22;
    width: 162px;
    height: 45px;
    background-color: #FFCC00;
    border-radius: 4px;
    font-weight: 400;
    align-items: center;
    justify-content: center;
    border: none;
    position: relative;
    cursor: pointer;
    display: none;
}

footer .read-article-btn:hover {
    box-shadow: 0px 0px 5px #FFCC00;
}

footer .read-article-btn .icon {
    position: absolute;
    width: 17px;
    height: 17px;
    right: 5px;
    top: calc(50% - 8.5px);
}

footer .feedbackContainer{
    position: relative;
    top: 1px;
}
footer .feedbackContainer .ecl-link--standalone{
    line-height: 5px;
}
footer .feedbackContainer a.ecl-link--icon{
    color: var(--blue);
}
footer .feedbackContainer a.ecl-link--icon:hover{
    text-decoration: none ;
    color: #082b7a;
}
footer .feedbackContainer a.ecl-link--icon svg{
   width: 18px; 
   height: 18px;
}
footer .feedbackContainer a.ecl-link--icon .ecl-link__label{
    font-size: 16px;
    text-decoration: underline;
}

footer .datasourceContainer{
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 100;
    height: 16px;
    left: 8%;
    a[href]{
        cursor: pointer;
    }
}
/** end footer **/


/** slider range **/

.min-max-slider {
	position: relative;
	width: 200px;
	text-align: center;
    margin: 0 auto;
}

.min-max-slider>label {
	display: none;
}

span.value {
	height: 1.7em;
	font-weight: bold;
	display: inline-block;
}

span.value.lower::before {
	content: "€";
	display: inline-block;
}

span.value.upper::before {
	content: "- €";
	display: inline-block;
	margin-left: 0.4em;
}

.min-max-slider>.legend {
	display: flex;
	justify-content: space-between;
}

.min-max-slider>.legend>* {
	font-size: small;
	opacity: 0.25;
}

.min-max-slider>input {
	cursor: pointer;
	position: absolute;
}

/* webkit specific styling */
.min-max-slider>input {
	-webkit-appearance: none;
	outline: none !important;
	background: transparent;
	background-image: linear-gradient(to bottom, transparent 0%, transparent 30%, silver 30%, silver 60%, transparent 60%, transparent 100%);
}

.min-max-slider>input::-webkit-slider-thumb {
	-webkit-appearance: none;
	/* Override default look */
	appearance: none;
	width: 14px;
	/* Set a specific slider handle width */
	height: 14px;
	/* Slider handle height */
	background: #eee;
	/* Green background */
	cursor: pointer;
	/* Cursor on hover */
	border: 1px solid #515560;
	border-radius: 100%;
}

.min-max-slider>input::-webkit-slider-runnable-track {
	cursor: pointer;
}


/*** INFO POPUP ***/
#popup-container{
    ._modal-text{
        max-height: 300px;
        overflow-y: scroll;
        margin-left: 10px;
        margin-right: 15px;
        margin-top: 15px;
        color: rgb(81, 85, 96);
        h4{
            font-size: calc(1.275rem + .3vw);
            color: rgb(81, 85, 96);
            font-weight: 500;
            padding: 0px 5px;
        }
        h2{
            font-size: 17px;
        }
        div{
            font-size: 15px;
            line-height: 18px;
            padding: 5px 20px 5px 6px; /* top | right | bottom | left */
            ul.sourceDatasetCls{
                list-style-type:disc;
                padding-left:15px;
                margin-bottom: 15px;

                .insideCls{
                    list-style: inside;
                    padding-left: 15px;
                }
                &:first-child{
                    margin-top: 10px;
                }
            }
        }
        ul{
            padding-inline-start: 18px;
            margin-top: 5px;
        }
    }
    .popupInfoTbl{
        width: 100%;
        tr{
            td{
                background-color: white;
                text-align: left;
                height: 15px;
                padding: .32rem .3rem;
                font-size: 15px;
                color: rgb(81, 85, 96);
                ul.sourceDatasetCls{
                    list-style-type:disc;
                    padding-left:15px;
                    margin-bottom: 15px;

                    .insideCls{
                        list-style: inside;
                        padding-left: 15px;
                    }
                }
            }
        }
    }
}
/******************/

/** table countries without data **/
#table-countries-without-data{
    width: 95%;
    margin: 0 auto;
    &.hidden{
        display: none;
    }
    .ecl-table__caption{
        caption-side:top;
        font-weight: bold;
        text-align: left;
        margin-left: 15px;
    }
    thead{
        line-height: 2px;
        font-size: 12px;
        tr th{
            border: 1px solid var(--c-p-20);
        }
    }
    tbody{
        line-height: normal;
        font-size: 12px;
        tr td{
          border: 1px solid var(--c-p-20);  
        }
    }
}

/** OVERLAY PANEL **/
.overlayPanel{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0.5;
    visibility: hidden;
}


@media (min-width: 768px) {
    .container {
        width: 100%;
    }
    .navMenucontainer .MenuAndShareIconsContainer {
            width: 100%;
            display: flex;
            margin-left: auto;
            margin-right: auto;
            justify-content: flex-end;
            padding-left: 10px;
            padding-right: 10px;
            .nav-right{
                display: flex;
                justify-content: center;
                .more-info-container{
                    button{
                        width: 52px;
                        height: 52px;
                        border: none;
                        background: none;
                        cursor: pointer;
                        svg{
                            width: 40px;
                            height: 40px;
                            fill: white;
                            margin-top: 3px
                        }
                        &:hover{
                          background: white;
                          svg{
                            fill: var(--blue);
                          }
                        }
                    }
                }
            }      
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }

    .navMenucontainer .MenuAndShareIconsContainer {
        width: 970px;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        justify-content: flex-end;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 90%;
    }
    .navMenucontainer .MenuAndShareIconsContainer{
        width: 90%;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        justify-content: flex-end;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 1199px) {
    header>.page-title{
        .container {
        .title {
                width: 50%;
                line-height: 24px;
                gap: 0px;
                h1{
                    padding-top: 0px;
                    font-size: 24px;
                }
                #config-description{
                    font-size: 12px
                }
            } 
        }
    }
    main{
        height: auto;
        .chart-legends{
            .chart-container{
                width: 100%;
                height: 600px;
                min-height: fit-content;
                max-height: unset;
            }
        }
        .filters-container{
            gap: 10px;
            justify-content: space-between;
            .ecl-form-group{
                &.countriesFormGroup{
                    #select-multiple-label{
                        line-height: 24px;
                    }

                }
                &.filtersGroup{
                .ecl-form-label{
                    font: 12px arial, sans-serif;
                    white-space: pre;
                    margin-top: 5px;
                    line-height: 24px;
                }
              }
              .ecl-select{
                font-size: 14px;
              }
                &.showAllData{
                    .ecl-checkbox__label{
                        font-size: 14px;
                        white-space: pre;
                    }
                    div.ecl-checkbox{
                        margin-top: 25px;
                    }
                }
            }
        }

    }
}

@media(max-width: 991px){
    .navMenucontainer{
      .navMenucontainer{
        .ecl-menu{
        }
      } 
    } 
    header{
        >.page-title{
            .title{
                line-height: 16px;
                h1{
                 font-size: 20px;
                }
            }
        }
    }

    main{
        height: auto;
        & .chart-legends {
            flex-direction: column;
            height: auto;
            .chart-container{
                width: 100%;
                height: 600px;
                min-height: fit-content;
                max-height: unset;
            }
            .legend-container{
                width: 100%;
            }
        }
        & >.container{
            &.sliderContainer{
                margin-top: 20px;
                .rangeSlider{
                    width: 99%;
                }
            }
        }
        .filters-container{
            .ecl-form-group{
                &.filtersGroup{
                 max-width: 350px; 
                }
                &.showAllData{
                    div.ecl-checkbox{
                        margin-top: 25px;
                    }
                 }  
            } 
        }
    }
    footer{
        .feedbackContainer{
            a.ecl-link--icon{
                svg{
                    width: 14px;
                    height: 14px;
                    top: 0px;
                }
                .ecl-link__label{
                    font-size: 12px;
                    margin-inline-start: 0px;
                }
            }
        }
        .datasourceContainer{
            .txtContainerCls{
                font-size: 12px;
            }
        }
        .footer-links{
            li{
                font-size: 12px;
            }
    }
 }
}

@media(max-width: 899px){
        main {
        .filters-container {
            justify-content: start;
            .ecl-form-group {
                &.showAllData {
                    display: none !important;
                }
            }
        }
    }
}


@media (max-width: 768px) {
    header{
        >.page-title::after {
            background: none !important;
        }
        >.page-title{
            .container{
                width: 100%;    
                .title{
                    width: auto;
                    h1{
                        font-size: 20px;
                    }
                    #config-description{
                        font-size: 12px;
                    }
                  } 
            }
        } 
        
        
        .ecl-social-media-share__list[role="menu"]{
            right: -10px;
            width: 110px;
        }
        .ecl-social-media-share__list[role="menu"] .title {
            margin-bottom: 5px;
            font-size: 13px;
            padding-left: 10px;
        }
        .ecl-social-media-share__list[role="menu"] li a {
            padding: 5px 10px;
        }
        .ecl-menu__container{
            padding-inline-start: 0px;
        }
        .share-block-btn{
            padding-right: 0px;
            margin-top: 5px;
            svg{
                width: 30px;
                height: 30px;
            }
        }
        .navMenucontainer{
            .MenuAndShareIconsContainer{
                justify-content: right;
            }
        }
    }
    .nav-items {
        width: 100%;
    }
    .navMenucontainer {
        display: block;
        padding-left: 15px;
        padding-right: 15px;
        .MenuAndShareIconsContainer {
            display: flex;
            justify-content: space-between;
            .nav-right{
                display: flex;
                justify-content: center;
                .more-info-container{
                    button{
                        width: 50px;
                        height: 55px;
                        border: none;
                        background: none;
                        cursor: pointer;
                        svg{
                            width: 36px;
                            height: 36px;
                            fill: white;
                            margin-top: 5px
                        }
                        &:hover{
                          background: white;
                          svg{
                            fill: var(--blue);
                          }
                        }
                    }
                }
            }              
        }
    }
    footer {
        margin-top: 16px;
        width: 100%;
        align-items: flex-start;
        .feedbackContainer{
            a.ecl-link--icon{
              .ecl-link__label{
                font-size: 12px;
                margin-inline-start: 0px;
              }
              svg{
                width: 14px;
                height: 14px;
              }
            } 
        }        
        .footer-links{
            li a{
                font-size: 12px;
                padding-right: 5px;
            }
        }
    }
    main{
        height: 100%;
        .filters-container{
            flex-direction: column;
            gap: 5px;
            justify-content: space-between;
            .ecl-form-group{
                &.countriesFormGroup{
                    .ecl-select__container--m{
                        width:100%;
                    }
                }
                &.filtersGroup{
                    max-width:100%;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 0px;
                    .ecl-select__container{
                        width: 100%;
                    }
                }
                &.showAllData{
                    flex-direction: column;
                    display: flex;
                    justify-content: flex-end;
                    div.ecl-checkbox{
                        margin-top: 0px;
                        .ecl-checkbox__box{
                            width: 20px;
                            height: 20px;
                        }
                        .ecl-checkbox__text{
                            font-size: 14px;
                        }
                    }
                }
            }
       }
       .chart-legends{
            align-items: unset;
            flex-direction: column;
            gap: 10px;
            .chart-container{
                width: 100%;
                height: 520px;
                min-height: fit-content;
                max-height: unset;
            }
            .legend-container{
                width: 100%;
            }
       }
       & >.container{
         &.sliderContainer{
            margin-top: 20px;
            .rangeSlider{
                width: 99%;
            }
         }
         .datasourceContainer{
            .txtContainerCls{
                font-size: 12px;
            }
         }
       }
   }
   #table-countries-without-data{
    & tbody{
        tr td{
            margin-bottom: 5px;
        } 
    }
   }
}
@media (max-width: 528px) {
    header{
        >.page-title{
            .container{
                .title{
                    #config-description{
                        font-size: 10px;
                        padding-left: 0px;
                    }
                }
            }
        }
    }

    header>.page-title .eurostat-logo{
        width: 25%;
    }
    header>.page-title .eurostat-logo > a > img{
        width: 100%;
        height: auto;
    }

    header>.page-title .title{
        width: auto !important;
        line-height: 8px;
    }
    header>.page-title .title h1 {
        font-size: 16px !important;
        line-height: 18px !important;
    }
    .share-block-btn{
        width: 48px;
        height: 48px;
        margin-top: 2px;
        margin-right: -5px;
    }
    .share-block-btn svg{
        width: 30px;
        height: 30px;
    }
    .nav-items li{
        padding: 0px;
        font-size: 14px;
        outline: none;
    }
    .nav-items li button, .nav-item-button:focus{
        outline: none !important;
    }
    .section-name{
        font-size: 26px;
    }
    .section-info p {
        font-size: 14px;
        line-height: 20px;
    }

    main {
        .filters-container{
            flex-direction: column;
             .ecl-form-group{
                &.filtersGroup{
                    max-width: 100%;
                    .ecl-form-label{
                        font-size: 14px;
                    }
                    select{
                        font-size: 14px;
                    }
                }
                &.showAllData{
                    div.ecl-checkbox{
                        height: 30px;
                        margin-top: 0px;
                    }
                }
            }
        }
        >.container {
        &.sliderContainer {
            & div[data-thumb] {
                span {
                    font-size: 10px;
                }
            }
        }
        }
    }

    footer{
        flex-direction: row;
    }
    footer .feedbackContainer a.ecl-link--icon .ecl-link__label{
        font-size: 12px;
    }
    footer .feedbackContainer a.ecl-link--icon svg{
        width: 12px;
        height: 12px;
        top: 0px;
    }
    
    footer ul{
        margin-top: 1px;
    }
    footer ul li a{
        font-size: 12px;
    }
}

@media (-webkit-min-device-pixel-ratio: 1.2), (min-resolution: 120dpi) {
    main{
        height: auto;
        .chart-legends{
            .chart-container{
                width: 100%;
                height: 600px;
                min-height: fit-content;
                max-height: unset;
            }
        }
    }
    
}

@media (prefers-color-scheme: dark) {
    :root {
        .ecl-checkbox__box{
            background: #121212;
            border: 1px solid var(--blue-light-5);
        }
        .ecl-checkbox__input:focus-visible ~ .ecl-checkbox__label .ecl-checkbox__box:not(.ecl-checkbox__box--disabled){
            outline: 2px solid white;
        } 

        .ecl-select--active, .ecl-select:active, .ecl-select:focus-visible, .ecl-text-input:focus-visible {
            outline: 2px solid white;
        }       
        body{
            background-color: #121212;
            color: white;
        }
        header{
            .ecl-social-media-share__list[role="menu"]{
                background: #121212;
                box-shadow: 3px 3px 5px 1px rgba(255, 255, 255, .2);
                .title{
                    color: white;
                }
                li a{
                   color: #aaabff;
                   &[aria-label="Email"], &#twitter-a{
                    svg{
                        -webkit-filter: invert(40%);
                    }
                   }
                }
                
            }   
        }

        #listItemsDownload{
            border: 1px solid white;
            background: #121212;
        }
        #socialsShareMenu{
            border: 1px solid var(--blue-light-5);
        }
        main {
            > .container {
                &.sliderContainer {
                    & div[data-thumb] {
                        &:focus {
                            outline: 0.2rem solid #B1C0F8;
                        }
                    }
                }
                .filters-container{
                    .ecl-form-group{
                        &.countriesFormGroup{
                            .ecl-select__multiple{
                                .ecl-select__container{
                                    background: #121212;
                                    .ecl-select__icon{
                                        background: #121212;
                                        .ecl-icon{
                                            fill: white;
                                        }
                                    }
                                }
                                .ecl-select__multiple-toggle{
                                    color: white;
                                }
                                .ecl-select-multiple-selections-counter *{
                                    background-color: #546FA6;
                                    color: white;
                                }
                                .ecl-select__multiple-dropdown{
                                    border: 1px solid var(--blue-light-5);
                                    fieldset[data-ecl-multiple-group] {
                                        div.ecl-checkbox{
                                            label{
                                                color: white;
                                                &:hover{
                                                    background-color: #9fb5ea7a;
                                                }
                                                .ecl-checkbox__box{
                                                    border: 1px solid var(--blue-light-5);
                                                }
                                            }
                                        }
                                    }
                                    .ecl-select__multiple-options{
                                        color-scheme: dark;
                                    }
                                    input.ecl-text-input{
                                        background: #121212;
                                        color: white;
                                        border: 1px solid var(--blue-light-5);
                                    }
                                    .ecl-select__multiple-no-results{
                                        span{
                                            color: white;
                                        }
                                    }
                                }
                            }
                        }
                        &.filtersGroup{
                            .ecl-select__container{
                                border-radius: 4px;
                                .ecl-select{
                                    background-color: #121212;
                                    color: white;
                                }
                                .ecl-select__icon{
                                    z-index:100;
                                    background-color: transparent;
                                    .ecl-button--icon-only .ecl-icon{
                                        fill: white;
                                    }
                                }
                            }
                        }
                    }
                    .downloadChartCls{
                        button{
                            background: #cfdaf5;
                                &:hover, &:focus-visible {
                                    background: var(--blue);
                                    border: 1px solid var(--blue);
                                }
                        }
                    }
                }
           .chart-legends{
            .chart-container{
                background: #121212;
                color: white;
            }
           }
        }
        }
        footer{
            .feedbackContainer{
                a.ecl-link--icon{
                    color: #aaabff;
                    &:focus-visible{
                        outline: 1px solid white;
                    }
                }
            }
            .datasourceContainer{
                .txtContainerCls{
                    a[href]{
                        color: #aaabff;
                    }
                }
            }
            ul.footer-links{
                li a{
                    color: #aaabff;
                    border-right: 1px solid #aaabff;
                }
            }
        }
 }
}