html {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 400;
overflow-y: unset;
}
@font-face {
font-family: 'Open Sans';
src: url('../fonts/opensans/OpenSans-Regular-webfont.eot');
src: url('../fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/opensans/OpenSans-Regular-webfont.woff') format('woff'),
url('../fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'),
url('../fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
line-height: 1.5;
color:#044AA3;
}
#container {
#height: 366.492px;
#margin: 0 auto;
#width: 1150px!important;
}
a, a:visited, a:active {
color: #fff;
}
a:hover {
text-decoration: none;
}
#vis {
width: 940px;
height: 600px;
clear: both;
margin-bottom: 3px;
}
.icon {
margin:5px;
}
footer {
text-align: center;
}
#view_selection {
margin-top: 10px;
}
.years {
font-size: 21px;
fill: #aaa;
}
.value {
margin-top:10px;
}
#gates_tooltip {
height:100px;
}
.tooltip .name {
font-weight:bold;
font-size: 10px;
color:#D4D4D4;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.y.axis path {
display: none;
}
.y.axis line,.x.axis {
stroke: #777;
stroke-dasharray: 2,2;
}
.tick {
#border-radius: 10px;
#-webkit-transform: scale(8);
#transform: scale(8);
}
#scaleWrapper .label {
position:absolute;
z-index:1;
width:51px;
background-color: transparent;
height:30px;
text-align: center;
color:#000;
font-size:0.75rem;
display:block;
}
.thick {
position:absolute;
border:1px dashed #fff;
z-index:1;
height:100%;
width: 0;
}
.background {
position:absolute;
border:1px dashed #000000;
z-index:-999;
height:550px;
}
.link a,.link a:visited, .link {
font-size:16px;
color:black;
margin:6px;
#font-family:verdana;
}
.link a:hover {
text-decoration:underline;
}
.link a.active {
color:#F79425;
}
.thema img {
float:left;
}
.thema, .indicator {
cursor:pointer;
float:left;
margin-right:10px;
height:20px;
}
.thema p,.indicator p{
font-size: 12px;
font-weight: bold;
display:inline;
}
.indicator p{
#font-family: "Helvetica";
margin-left: 0px;
}
.indicator {
#font-family: "Helvetica";
text-align: center;
}
.thema:first-child,.indicator:first-child {
#margin-left:10px;
}
#indicatorsWrapper {
margin-left: auto;
margin-right: auto;
margin-top: -20px;
width: 95%;
float:left;
}
#indicatorsWrapper li + li::before {
content: " | ";
margin-right: 10px;
}
#indicatorsWrapper li {
list-style-type : none;
}
#indicatorsWrapper li:first {
}
#indicatorsWrapper ul {
display: table;
list-style: outside none none;
margin: 0 auto;
max-width: 1024px;
position: relative;
padding-left:20px;
}
#themasWrapper {
width: 100%;
height: 50px;
background-color:none;
position: relative;
display: inline-flex;
}
#indicatorInfos {
height: 75px;
text-align: left;
padding-left: 10px;
}
h3.title {
margin-top:15px;
display: block;
font-family: inherit;
text-align:center;
color: rgba(23,65,149, 1.0);
font-size: 1.4rem;
font-weight: bold;
}
h5.subtitle {
text-align:center;
color: rgba(23,65,149, 1.0);
font-size: 1.1rem;
font-weight: normal;
}
#container {
#width:1024px;
#height:748px;
position:relative;
}
#selectedThema {
color: #fff;
display: inline-block;
font-family: "Open Sans";
font-size: 16px;
font-weight: 500;
height: 50px;
letter-spacing: 1px;
line-height: 20px;
vertical-align: middle;
width: 200px;
}
#selectedThema > span{
height: 37px;
display:table-cell;
vertical-align:middle;
}
#selectorThema {
margin-top: -24px;
margin-left: 11%;
vertical-align: middle;
width: 40px;
display: inline-block;
color:#fff;
font-size: 60px;
}
#icons {
background-color: white;
height: 51px;
left: 39%;
padding-right: 5px;
}
#icons ul {
margin:0 0 0 0;
padding:0;
}
.themaIcon {
background-color: #25313b;
float: left;
height: 50px;
list-style-type: none;
width: 50px;
cursor:pointer;
margin-left: 5px;
}
.iconPointer {
font-size: 60px;
margin-left: 5px;
margin-top: 4px;
position: relative;
}
.selected .iconPointer {
display:block!important;
}
#euBubble {
background-color: #0b50a0;
border-radius: 25px;
height: 50px;
#margin-left: 905px;
margin-top: -60px;
width: 50px;
position: relative;
right: -910px;
}
#euBubble #labelEU {
font-family: "Open Sans";
color: white;
display: block;
font-size: 28px;
font-weight: 500;
margin-left: 10px;
padding-top: 9px;
}
#euBubble #totalEU {
font-family: "Open Sans";
color: #0b50a0;
display: block;
font-size: 20px;
margin-left: 60px;
margin-top: -42px;
width: 200px;
}
#euBubble #valueEU {
color: #0b50a0;
display: block;
font-family: "Open Sans";
font-size: 20px;
font-weight: bold;
margin-left: 65px;
margin-top: -40px;
width: 200px;
}
.tooltip_left,.tooltip_right {
position: absolute;
top: 100px;
left: 100px;
opacity: .9;
color: white;
padding: 10px 10px 10px 5px;
width: 100px;
font-size: 10px;
z-index: 10;
font-weight: bold;
font-stretch: condensed;
background-repeat:no-repeat;
}
.tooltip_left .title {
font-size: 13px;
}
.tooltip_left {
background-image:url("../icons/tooltip-left.png");
}
.tooltip_right {
background-image:url("../icons/tooltip-right.png");
background-repeat:no-repeat;
}
.tooltip_left .name {
margin-left:20px;
}
#scaleWrapper {
position: absolute;
top: 0px;
width: 1024px;
height: 100%;
z-index: -1;
}
#svg_vis {
z-index:999;
}
#infoConteiner {
background-color: white;
left: 760px;
padding-left: 10px;
padding-right: 10px;
padding-bottom:10px;
position: absolute;
top: 120px;
width: 220px;
border:1px solid #d4d4d4;
font-size:13px;
border-radius: 6px;
max-height:300px;
#overflow:scroll;
z-index:999;
}
#infoDescription {
display: block;
margin-top: 10px;
text-align: left;
font-family: "Open Sans";
width:220px;
height: 250px;
overflow:scroll;
}
#infoTitle {
cursor:move;
display:inline-block;
font-family: "Open Sans";
font-style: italic;
font-weight: bold;
font-size:28px;
}
#infoClosebutton {
margin-left: 185px;
margin-top: -24px;
cursor:pointer;
}
#infoDisplay img{
width:20px;
height:20px;
}
#infoDisplay {
margin-left:10px;
}
#noData {
font-size: 20px;
font-stretch: condensed;
font-weight: bold;
position: relative;
top: -110px;
z-index:-1;
}
#noData span {
display:none;
}
#noData img {
max-height: 30px;
max-width: 100px;
position: fixed;
}
#countriesConteiner {
border-radius: 6px;
background-color: white;
border: 1px solid #d4d4d4;
font-size: 13px;
left: 630px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top:10px;
position: absolute;
top: 120px;
width: 402px;
z-index:999;
}
#countriesClosebutton {
cursor: pointer;
margin-left: 310px;
margin-top: -30px;
}
#countriesClosebutton a img {
width:30px;
height:30px;
margin-left: 55px;
}
.countriesTitle {
display: inline-block;
font-family: "Open Sans";
font-size: 20px;
font-style: italic;
font-weight: bold;
margin-left: 12px;
cursor:move;
}
#countriesConteiner {
display:none;;
}
#countriesConteiner #memberStateContent, #countriesConteiner #estatContent {
padding-top:10px;
}
#countriesConteiner #memberStateContent li,#countriesConteiner #estatContent li {
float: left;
list-style-type: none;
width: 180px;
cursor:pointer;
}
#countriesConteiner #memberStateContent li a,#countriesConteiner #estatContent li a {
color: black;
}
@media only screen and (device-width: 768px) {
#selectorThema {
margin-top:-28px;
}
#icons {
top: -46px;
}
#countriesConteiner {
left: 100px;
}
/* For general iPad layouts */
}
.triangle{
width:0.1px;
height:0.1px;
border:1px solid #069;
border-width:100px;
border-image: none;
border-style: solid;
border-width: 20px;
height: 1px;
width: 1px;
}
#infoConteiner {
height:none!important;
}
#randomImg {
margin-left:10px;
position:absolute;
#transform: rotate(90deg);
#transform-origin: left top 0;
display:none;
}
#randomTxt {
background-color: white;
margin-left: 10px;
margin-top: 5px;
max-width: 220px;
min-height: 20px;
min-width: 30px;
opacity: 0.7;
padding-left: 10px;
position: absolute;
}
#randomTxt span {
margin-left: 10px;
}
#randomTxt img {
cursor:pointer;
}
#welcomeScreen {
position:absolute;
font-size: 20px;
margin-left: 50px;
margin-top: 15px;
width: 900px;
z-index: 999;
}
#welcomeScreen p{
font-size: 26px;
line-height:30px;
text-align: center;
}
#welcomeScreen ul{
font-size: 14px;
margin-left: 50px;
margin-top: 10px;
}
#welcomeScreen ul li{
margin-top: 5px;
}
#welcomeScreen div {
background-color: #29333c;
height: 40px;
margin-left: 370px;
margin-top: -90px;
position: absolute;
text-align: center;
vertical-align: middle;
width: 180px;
}
#welcomeScreen div img{
margin-top: -10px;
}
#welcomeScreen #link{
font-size: 30px;
margin-left: 420px;
margin-top: 40px;
color: #fff;
}
span.bold {
font-weight:bold;
}
#langConteiner {
position:absolute;
top: 45px;
z-index:999;
}
#langConteiner a, a:visited, a:active {
color: black;
}
#langConteiner a {
color: black;
text-decoration: none;
}
#langConteiner .selected {
text-decoration: underline;
}
#langConteiner li {
color: black;
display: inline;
font-size: 24px;
margin-left: 190px;
text-decoration: none;
color: black;
text-decoration: none;
}
img.iconButton {
margin-left:10px;
width:20px;
height:20px
}
#shareConteiner {
margin-left:0px;
}
#shareConteiner li {
list-style-type:none;
display: inline;
}
.webui-popover-content {
padding-left:0px;
margin-left:0px;
}
#indicatorName a {
text-align:center;
width:20px;
}
#shareContent a,#shareContent a:visited,#shareContent a:active {
color:black;
}
#mainBart {
background-color:red;
}
.graph {
/*
display: inline;
float: left;
left: 670px;
margin-top: 10px;
position: absolute;
top: 170px;*/
display:inline-block;
}
.graph svg{
display:block;
margin:140px auto 0 60px;
text-align:center;
display: block;
margin: 30px auto 0 0;
text-align: center;
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
#main {
#float:right;
#float: left;
width: 700px;
width:100%;
height:100%;
}
#subtitle {
/*
color: #29333c;
display: inline-block;
font-family: "Oswald" !important;
font-size: 22px;
height: 40px;
left: 800px;
margin-left: 0;
margin-top: 40px;
padding-left: 0;
position: absolute;
#text-align: center;
top: -10px;
vertical-align: middle;
width: 500px;
*/
color: #29333c;
display: inline-block;
font-family: "Open Sans";
height: 40px;
width:400px;
}
#subtitle img {
border: 2px solid black;
border-radius: 22px;
height: 40px;
margin-left: 10px;
margin-top: -7px;
width: 40px;
display:inline;
}
#logoEstat {
width: 80px;
height: 100%;
position: absolute;
right: 10px;
}
#logoEstat img {
max-width: 100%;
right: 0px;
position: re;
top: 0px;
margin-top: 16px;
margin-bottom: AUTO;
}
#selectorThema ,#selectedThema{
#opacity:0;
}
#icons {
#left:290px!important;
}
#langConteiner {
display:none;
}
#selectorThema {
margin-left: 240px!important;
width: 40px!important;
}
#selectorTitle {
color: white;
font-family: "Open Sans";
font-size: 24px;
margin-left: 10px;
margin-top: 5px;
position: absolute;
}
.dropdown-menu .divider {
background-color: black;
}
#selectorTitle {
display:none;
}
#selectorThema {
margin-left: 40px!important;
/* width: 200px!important; */
text-align: left;
}
/* Applyed from 0 to width : 500 px */
@media screen and (max-width: 600px) {
}
/* Applyed from 0 to width : 600 px */
@media screen and (max-width: 600px) {
#selectorThema ,#selectedThema{
opacity:0;
width:100px
}
#infoDisplay img {
width: 15px;
height: 15px;
}
img.iconButton {
margin-left: 5px;
width: 20px;
height: 20px;
display:none;
}
#selectorTitle {
display:none;
}
#selectorThema {
margin-left: 0px !important;
width: 40px!important;
}
#selectedThema {
width: 60px!important;
font-size:10px!important;
}
#selectorThema ,#selectedThema {
display:none!important;
}
#icons {
margin: 0 auto;
}
}
/* Applyed from 0 to width : 700 px */
@media screen and (min-width: 600px) and (max-width: 700px) {
#selectedThema {
width: 250px!important;
padding-right: 10px;
}
#selectorThema {
margin-left: 0px !important;
width: 40px!important;
}
}
/* Applyed from 0 to width : 800 px */
@media screen and (min-width: 700px) and (max-width: 800px) {
#selectedThema {
margin-top:5px;
width: 220px!important;
}
}
@media screen and (min-width: 800px) and (max-width: 900px) {
#selectedThema {
margin-top:5px;
width: 215px;
}
}
@media screen and (min-width: 900px) {
#selectedThema {
margin-top:5px;
#width: 450px!important;
}
}
#bookmark-link {
margin-top: 7px;
font-size: 1rem;
color: black;
}
#bookmark-link a {
color: #007bff;
}
.socialmedia {
color: #044AA3;
cursor: pointer;
/*width: 400px;*/
/* font-size: 26px; */
padding-left: 15px;
padding-top: 0.5rem;
}
.modal {
color:black;
}
#topBar {
display:none;
}
.themaIcon img {
height:40px;
margin:4px;
}
.loader {
background: #fff none repeat scroll 0 0;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index:1000;
}
.row.justify-content-center.align-items-center {
display: block;
left: 49%;
position: absolute;
top: 35%;
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
}
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
}
.navbar-light .navbar-toggler {
color: rgba(0,0,0,.5);
border-color: rgba(0,0,0,.1);
}
.navbar-nav {
display:flex;
flex-direction:column;
}
.navbar {
padding-right: 20px;
padding-left: 20px;
margin-right: auto;
margin-left: auto;
margin-top:5px;
position: unset;
min-height: unset;
margin-bottom: unset;
border: unset;
}
.navbar-light .navbar-toggler-icon{
background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
#labelNoData {
display: inline;
position: absolute;
right: 7px;
top: 10px;
color: #343435;
font-size: 22px;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
}
#noData img {
display:none!important;
}
@media (min-width: 576px) {
.navbar-expand-sm .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-sm .navbar-toggler {
display: none;
}
.socialmedia {
-ms-flex-direction: row;
flex-direction: row;
}
}
.collapse:not(.in) {
display: none;
}
@media screen and (max-width: 576px) {
.logo {
top: -18px!important;
}
.socialmedia {
display: flex;
flex-direction: column;
}
.navbar-expand-sm .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
/* Overriding Bootstrap */
@media (min-width: 850px) {
.navbar-expand-sm .navbar-toggler {
display: none;
}
.navbar-expand-sm .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-sm .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
}
@media (max-width: 850px) {
.navbar-expand-sm .navbar-toggler {
display: block;
}
#navbarNavDesktop.navbar-expand-sm .navbar-collapse {
display: none;
}
#navbarNavDesktop.navbar-expand-sm .navbar-nav {
display:none;
}
}
@media (max-width: 850px) {
#navbarNavDesktop.in , #navbarNavDesktop.navbar-expand-sm.in .navbar-nav {
display:flex!important;
flex-direction: column;
}
#navbarNavDesktop.collapse:not(.in) {
border:unset;
}
#navbarNavDesktop {
position: absolute;
left: 35px;
top: 41px;
background-color: white;
z-index: 999;
width: 26px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 6px;
padding-bottom: 5px;
}
.social-conteiner {
margin-top:5px;
}
.socialmedia span, .socialmedia a {
margin-top:5px;
}
.logo {
right: 0px;
}
#navbarNavDesktop .socialmedia {
padding-top: unset;
padding-left: unset;
margin-left: unset;
}
#navbarNavDesktop.navbar-nav {
margin: 7.5px -15px!important;
}
#navbarNavDesktop.navbar-collapse.collapse:not(.in) {
display: none !important;
}
#selectorThema {
font-size: 50px;
margin-top: -16px;
}
#indicatorInfos {
height: 90px;
}
}
@media (min-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
}
@media screen and (max-width: 576px) {
#indicatorInfos {
height:88px;
}
#indicatorInfos .title {
font-size: 1.2rem;
}
#indicatorInfos .subtitle {
font-size: 1rem;
}
#bookmark-link {
font-size: 0.8rem;
}
}
@media screen and (max-height: 450px) {
#indicatorInfos {
height:64px;
}
#linkDataset {
margin-top:-3px!important;
display:block!important
}
.keyfigures #indicatorName {
margin-top: 5px!important;
margin-bottom:-10px!important;
}
}