:root { --main-color: #388AE2; --width-100: 100vw; --nav-color: #0E47CB; --sub-nav-color: #F3F3F3; --tool-1: #0A328E; --tool-2: #3E6CD5; --tool-3: #8AA7E8; --btn-color: #0E47CB; --hover-color: #3E6CD5 ; --eublue: rgba(2,156,253,0.07); --tool-1: #0e43cb; } body { /* height: 100%; */ margin: 0; padding: 0; /* width: 100%; */ font-family: Arial, sans-serif; overflow-y: hidden; overflow-x: hidden; position: relative; } html, body { width: 100%; height: 100%; } header { display: flex; flex-direction: column-reverse; } #allContainer { width: 100%; } .year-diagram, .svg-container-dynamic { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: top; overflow: hidden; } .svg-content { display: inline-block; position: absolute; top: 0; left: 0; } #loader, #bc--loader { background: #fcfdfd url(../img/loading-bg.png) repeat-x scroll 50% bottom; /* display: block; */ height: 82vh; position: fixed; width: 100%; z-index: 9999; display: flex; flex-direction: column-reverse; align-content: center; justify-content: center; align-items: center; padding-bottom: 8rem; } #loader p, #bc--loader p { text-align: center; } #loader #loading-icon, #bc--loader #bc--loading-icon { display: block; margin-left: auto; margin-right: auto; } #tooltip { position: absolute; padding: 3px; background-color: white; color: #000; } #tooltip > table { font-size: 11px; } #tooltip td { padding: 0; } .value { white-space: pre-line; margin: 0; } .sankey-category{ font-size: 1.125rem; } g.node:hover { cursor: pointer; fill: #666666; } g .flow :hover { cursor: pointer; stroke-opacity: 0.4; } .bold { font-weight: bold; } #legend-box-modal .button-legend .icon-legend-color { border-radius: 50%; float: left; height: 30px; width: 30px; } #legend-box-modal .button-legend .icon-legend-color__total { /* gradient color */ background: -ms-linear-gradient(135deg, var(--color-total) 50%, black 10%, var(--color-recovery) 51%); background: -moz-linear-gradient(135deg, var(--color-total) 50%, black 10%, var(--color-recovery) 51%); background: -o-linear-gradient(135deg, var(--color-total) 50%, black 10%, var(--color-recovery) 51%); background: -webkit-linear-gradient(135deg, var(--color-total) 50%, black 10%, var(--color-recovery) 51%); background: linear-gradient(135deg, var(--color-total) 50%, black 10%, var(--color-recovery) 51%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024", endColorstr="#00d4ff", GradientType=1); } #legend-box-modal img.icon-legend { vertical-align: baseline; } #legend-box-modal .button-legend .icon-legend { height: 20px; margin-top: 5px; margin-left: 5px; } #legend-box-modal .button-legend .title { display: inline-block; padding: 0 0 5px 5px; } #legend-box-modal .button-legend:hover { color: #fff; background-color: #5fa2db; cursor: pointer; } #legend-box-modal .jBox-content { padding: 2px; overflow: hidden; } #legend-box-modal .jBox-title { background-color: white; color: #464650; text-align: center; border-bottom: 1px solid #464650; padding-bottom: 0; } #legend-box-modal > div > div.jBox-title.jBox-draggable > div { font-size: .875rem; font-weight: 600; text-align: left; } #legend-box-modal .jBox-container { box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0 2px rgba(0, 0, 0, 0.4); min-width: 110px; } #legend-box-modal .button-legend .icon-legend-color { height: 20px; width: 20px; } #legend-box-modal .button-legend .icon-legend { height: 15px; margin-left: 3px; margin-top: -3px; height: 1; } #legend-box-modal .button-legend .title { font-size: .875rem } #browser-warning-modal .jBox-content { padding: 20px; } #ruler { visibility: hidden; white-space: nowrap; } .drag-zoom-content { cursor: move; } #autoplay-box-modal.position-autoplay-box-modal { margin-left: 70px; margin-top: -30px; z-index: 500 !important; } #autoplay-box-modal .button-autoplay { margin-top: 2px; width: 100%; text-align: left; height: 30px; } #autoplay-box-modal .button-autoplay .icon-autoplay-color { border-radius: 50%; float: left; height: 30px; width: 30px; } #autoplay-box-modal .button-autoplay .icon-autoplay { height: 20px; margin-top: 5px; margin-left: 5px; } #autoplay-box-modal .button-autoplay .title { display: inline-block; padding: 5px; } #autoplay-box-modal .button-autoplay:hover { color: #fff; background-color: #5fa2db; cursor: pointer; } #autoplay-box-modal .jBox-content { padding: 2px; } #autoplay-box-modal .jBox-title { background-color: white; color: #464650; text-align: center; border-bottom: 1px solid #464650; } #autoplay-box-modal .jBox-container { box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0 2px rgba(0, 0, 0, 0.4); } #diagramYearInfo { color: #d3d3d3; position: absolute; right: 20px; /* top: 0px; */ top: 116px; /* font-size: 150px; */ font-size: 6rem; z-index: -99; opacity: 0.6; } /* eurostat logo */ /* legend converted to image */ #imgLogo { position: fixed; top: 200vh; } /* lang section */ #lang-section { overflow: hidden; } #lang-selection { cursor: pointer; height: 2.2rem; width: 130px; border-radius: 3px; border: 1px solid var(--nav-color); color:var(--nav-color); } #lang-selection option { cursor: pointer; /* make options (dropdown list) match the select's width */ width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* .labelNode { font-size: calc(3px + 0.390625vw); } .valueNode { font-size: calc(3px + 0.390625vw); } */ .d3-tip { display: none !important; } .d3-tip { pointer-events: none !important; } #autoplay-box-modal .jBox-container { box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0 2px rgba(0, 0, 0, 0.4); } #diagramYearInfo { color: #d3d3d3; position: absolute; right: 20px; /* top: 0px; */ top: 116px; /* font-size: 150px; */ font-size: 6rem; z-index: -99; opacity: 0.6; } /* eurostat logo */ /* legend converted to image */ #imgLogo { position: fixed; top: 200vh; } /* lang section */ #lang-section { overflow: hidden; } #lang-selection { cursor: pointer; height: 2.2rem; width: 130px; border-radius: 3px; border: 1px solid var(--nav-color); color:var(--nav-color); } #lang-selection option { cursor: pointer; /* make options (dropdown list) match the select's width */ width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* .labelNode { font-size: calc(3px + 0.390625vw); } .valueNode { font-size: calc(3px + 0.390625vw); } */