/******************************************************************/
  /* "eurostat-charts" - v"1.0.1"    */
  /* http://ec.europa.eu/eurostat https://ec.europa.eu/eurostat     */
  /* Author: Sven Kuncikowski <sven.kuncikowski@sword-group.com>    */
  /* "License: European Union Public Licence (EUPL v.1.2)"          */
  /******************************************************************/.country-select {
  border: 1px solid #000000;
  background-color: #fff;
}

.indicator-select {
  /* border: 1px solid #e1ebf4; */
  /* background-color: #e1ebf4; */
  background-color: #ffffff;
  color: #044AA3;
}

.indicator-title {
  font-size: 1.2rem;
  color: #044AA3;
}

.dropdown-menu {
  /* background-color: #e1ebf4; */
  background-color: #fff;
  opacity: .9;
}

.dropdown-item {
  /* background-color: #e1ebf4; */
  background-color: #fff;    
}

.selected {
  background-color: #044AA3;
  color: #999999 !important;    
}

.disabled {
  cursor: no-drop;
  color: #cecece !important;    
}

.a > dropdown-item-inner > disabled  {
  cursor: no-drop;
  color: #cecece !important;
}

div.dropdown-menu inner > a > span > .dropdown-item-inner {
  cursor: no-drop;
  color: #cecece !important;
}

.divider {
display: inline-block;
height: 1px;
background-color: #e5e5e5;
} 

.btn {
  /* background-color: #e1ebf4; */
  background-color: #fff;
  border: 0;
  /* background-color: #e1ebf4; */
}

.countries-mobile-size {
  height: 200px;
  overflow: auto;
}

.country-selected {
background-color: lightgrey;
}
#countries-container-mobile div div a span .svg-inline--fa  {
  visibility: hidden;
}
#countries-container-desktop div div a span .svg-inline--fa  {
  visibility: hidden;
}
#indicators-container-desktop div div a span .svg-inline--fa  {
  visibility: hidden;
}
#indicators-container div div a span .svg-inline--fa  {
  visibility: hidden;

}
#indicators-container-mobile div div a span .svg-inline--fa  {
  visibility: hidden;
}

/* make button use all available width */
.bs-actionsbox .btn-group button {
  width: 100%;
} 

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  overflow: unset;
}


@media only screen and (max-height: 500px) {
  .bootstrap-select.btn-group>.dropdown-toggle {
    height: 2.1rem;
  }
}

.bb {
  color: #044AA3;
}

.bb svg {
  color: #044AA3;
  font-family: 'Open Sans', sans-serif;
  font-size: .75em;  
}

.bb-legend-background {
  stroke: none;
}

.bb-tooltip th {
  background-color: #000;
}

.bb-tooltip td.value {
  text-align: left;
}

/* .bb-axis-y-label {
  font-size: .9rem;
} */

.bb-xgrid, .bb-ygrid {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  stroke-dasharray: 0 0;
}

/* IE10+ CSS styles go here */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .bb-xgrid, .bb-ygrid {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    stroke-dasharray: 1 0;  
  }    
}

/* IE Edge CSS styles go here */
@supports (-ms-ime-align:auto) {
  .bb-xgrid, .bb-ygrid {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    stroke-dasharray: 1 0;  
  }  
}

.bb .bb-axis-y path, .bb .bb-axis-y line {
  stroke: transparent;
}

.bb .bb-axis-y2 path, .bb .bb-axis-y2 line {
  stroke: transparent;
}

div .bb svg {
  margin-left: 2%;
}

/* .bb-axis-y text 
{
font-size: .7rem;
}

.bb-axis-x text 
{
font-size: .5rem;
} */


.bb-tooltip-container {
  min-width: 300px;
  text-align: left;
}

.bb-line {
  stroke-width: 2px;
}


.bb-line-EU {
  stroke-width: 3.5px;
}
.bb-line-EU27 {
  stroke-width: 3.5px;
}
.bb-line-EU28 {
  stroke-width: 3.5px;
}

.bb-line-EA {
  stroke-width: 3.5px;
}

.bb-ygrid-line .line-0 {
  stroke: red;
}


/* Small. Above 34em (544px) portrait */
@media screen and (min-width: 34em) and (orientation:portrait) {
}

/* Small. Above 34em (544px) landscape */
@media screen and (min-width: 34em) and (orientation: landscape) {
  /*mobile screen, same as inittialy*/
  
}

/* Medium. Above 48em (768px) */
@media screen and (min-width: 48em) {
  
}

/* Large. Above 62em (992px) */
@media screen and (min-width: 62em) {
  /* .bb-axis-y text {
      font-size: .9rem;
  } */

  /* .bb-axis-x text {
      font-size: .9rem;
  } */
}

/* Extra large. Above 75em (1200px) */
@media screen and (min-width: 75em) {
  /* .bb-axis-y text {
      font-size: .7rem;
  }

  .bb-axis-x text {
      font-size: .9rem;
  } */
}    
.clickable {
  cursor: pointer;
}

.legend-desktop {
  color: #000000;
  background-color: #ffffff;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 1px;
  min-width: 70px;
  display: inline-block;
  padding: 5px;
  font-size: .6rem;
  text-align: left;
}

.legend-inner {
  padding-top: 2px;
  color: #000000;
  background-color: #ffffff;
}

.legend-outer-desktop {
  cursor: pointer;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  /* box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px 0px; */
}

.legend-outer-mobile {
  cursor: pointer;
  padding: 5px;
  margin-right: 5px;
  margin-left: 5px;
  min-width: 15%;
}

.legend-mobile {
  color: #000000;
  background-color: #ffffff;
  display: inline-block;
  text-align: center;
  margin: 1px;
  padding: 10px;
  min-width: 70px;
}

.legend-block:hover {
  cursor: pointer;
}

.legend-item-not-focused {
  opacity: .5;
}

/* Default
 * No @media query for XS is necessary
 */
.legendcontainer-desktop {
  position: absolute;
  right: 16px;
  /* top: 20%;   */
  text-align: right;
  z-index: 99;
  height: 95%;
  display: flex;
  align-items: center;
}

.legendcontainer-mobile {
  font-size: 1em;
  color: #fff;
  margin-top: 5px;
}

.unuseable {
  cursor: default;
  color: grey;
}

.useable {
  cursor: pointer;
}

.legend-text {
  font-size: 1em;
}

.fa-custom {
  font-size: 1.5em;
}

/* Small. Above 34em (544px) */
@media screen and (min-width: 34em) {
  .legendcontainer {
    font-size: .9em;
  }

}

/* Medium. Above 48em (768px) */
@media screen and (min-width: 48em) {
  .fa-custom {
    font-size: 1.5em;
  }

  .legendcontainer {
    font-size: 1em;
  }

  .legend-text {
    font-size: 1.2em;
  }

}

/* Large. Above 62em (992px) */
@media screen and (min-width: 62em) {
  .fa-custom {
    font-size: 2em;
  }

  .legendcontainer {
    font-size: 1em;
  }

  .legend-text {
    font-size: 1.5em;
  }

}

/* Extra large. Above 75em (1200px) */
@media screen and (min-width: 75em) {
  .fa-custom {
    font-size: 2em;
  }

  .legend-desktop {
    font-size: 1em;
  }

  .legend-text {
    font-size: 1.5em;
  }

}


.socialmedia a, .socialmedia span {
  /* color: #469FFF;     */
  cursor: pointer;
}

.modal-content a {
  cursor: pointer;
}

.socialmedia a:hover {
  text-decoration: none;
  color: #469FFF;
}
.fa-code:hover:before {
  opacity: 0.5
}
.fa-twitter:hover:before {
  opacity: 0.5
}
.fa-facebook:hover:before {
  opacity: 0.5
}
.fa-table:hover:before {
  opacity: 0.5
}
.fa-info:hover:before {
  opacity: 0.5
}
.fa-caret-down:hover:before {
  opacity: 0.5
}
.fa-check-square-o:hover:before {
  opacity: 0.5
}
.fa-square-o:hover:before {
  opacity: 0.5
}

.fa-times {
  color: #000;
}

.fa-times:hover:before {
  opacity: 0.5
}

.navbar-light .navbar-nav .nav-link {
color: #044AA3;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #044AA3;
}

/* Default
* No @media query for XS is necessary
*/
.socialmedia {
  font-size: .9rem;
}

.modal-body {
  font-size: .875em;
}

.modal-header {
  font-size: .875em;
  font-weight: 700;
}


/* Small. Above 34em (544px) */
@media screen and (min-width: 34em) and (orientation:portrait) {
  .socialmedia {
      /* font-size: .6em; */
      font-size: 1em;
  }
}

/* Small. Above 34em (544px) landscape */
@media screen and (min-width: 34em) and (orientation:landscape) {
  /* landscape-specific styles */
  .socialmedia {
      font-size: .53em;
  }
}

/* Medium. Above 48em (768px) */
@media screen and (min-width: 48em) {
  .socialmedia {
      /* font-size: .7em; */
      font-size: 1em;
  }
}

/* Large. Above 62em (992px) */
@media screen and (min-width: 62em) {
  .socialmedia {
      font-size: 1em;
  }
}

/* Extra large. Above 75em (1200px) */
@media screen and (min-width: 75em) {
  .socialmedia {
      font-size: 1em;
  }

}
.tooltip .tooltip-inner          { background-color:    #044AA3; }
.tooltip.top > .tooltip-arrow    { border-top-color:    #044AA3; }
.tooltip.right > .tooltip-arrow  { border-right-color:  #044AA3; }
.tooltip.bottom > .tooltip-arrow { border-bottom-color: #044AA3; }
.tooltip.left > .tooltip-arrow   { border-left-color:   #044AA3; }
.tooltip .arrow::before          { border-bottom-color: #044AA3; } 

.icon-active {    
    /* width: 55px;
    height: 55px; */
    float: left;
    margin-left: 2px;    
}

.icon-nonactive {
    cursor: pointer;
    /* width: 55px;
    height: 55px; */
    float: left;
    margin-left: 2px;    
}
/* Default
 * No @media query for XS is necessary
 */
.bb svg {
    font-family: 'Open Sans', sans-serif;
    /* font-size: .55em; */
}

.bb-legend-background {
    stroke: none;
}

.bb-tooltip th {
    background-color: #000;
}

.bb-tooltip td.value {
    text-align: left;
}

.bb-xgrid, .bb-ygrid {
  stroke-dasharray: 8 4;
  shape-rendering: inherit;
}

.bb .bb-axis-y path, .bb .bb-axis-y line {
    stroke: transparent;
}

div .bb svg {
  margin-left: 0;
}

/* Small. Above 34em (544px) portrait */
@media screen and (min-width: 34em) and (orientation:portrait) {
    /* .bb svg {
       font-size: .6em;
    } */
}

/* Small. Above 34em (544px) landscape */
@media screen and (min-width: 34em) and (orientation: landscape) {
/*mobile screen, same as inittialy*/

}

/* Medium. Above 48em (768px) */
@media screen and (min-width: 48em) {
    /* .bb svg {        
        font-size: .8em;
    } */
}

/* Large. Above 62em (992px) */
@media screen and (min-width: 62em) {
    /* .bb svg {        
        font-size: .875em;
    } */
}

/* Extra large. Above 75em (1200px) */
@media screen and (min-width: 75em) {

}
/* Sticky footer styles
-------------------------------------------------- */
html {
    font-family: 'Open Sans', sans-serif;    
    position: relative;
    min-height: 100%;
    overflow-x: hidden;    
  }
  body {
    font-family: 'Open Sans', sans-serif;
    /* background-color: #e1ebf4; */
    background-color: #ffffff;
    color: #044AA3;
    /* Margin bottom by footer height */
    /* margin-bottom: 60px; */
  }

  .footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 15%;
    min-width: 100px;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: transparent;
  }

 
  body > .container-fluid {
    /* padding: 10px 15px 0; */
    padding: 0;
  }
  
  .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
  

.ie .img-fluid {
    width: 100%
}

h1 {
    font-size: 1.5rem;
}
h2 {
    font-size: 1rem;
}
h4 {
    font-size: 1rem;
}
h5 {
    font-size: .875rem;
}

h3 {
    /* font-size: .72em; */
    font-size: 1.2em;
    font-weight: 400;
}

.title {
  color: rgba(23,65,149, 1.0);
  font-size: 1.2rem;
  font-weight: bold;
}

.subtitle {
  color: rgba(23,65,149, 1.0);
  font-size: 1em;
  font-weight: normal;
    /* font-size: .7em; */
}

.underline {
    text-decoration: underline;
}

.footnote-container {
    height: 1.25em;
    margin-bottom: 1.3em;
	/* font-size: .6em; */
}

.footnote {
    color: #000000;
    font-size: 0.9rem;
}

.bookmark {
    color: #000000;
    font-size: 0.9rem;
}
.bookmark a {
    /* color: rgba(23,65,149, 1.0); */
    color: #007bff;
}


.logo { 
    width: 8em;
    cursor: default;
} 

article {
    font-size: .8rem;
}

/* Small. Above 34em (544px) portrait */
@media screen and (min-width: 34em) and (orientation:portrait) {
}

/* Small. Above 34em (544px) landscape */
@media screen and (min-width: 34em) and (orientation: landscape) {
    /*mobile screen, same as inittialy*/
    
}

/* Medium. Above 48em (768px) */
@media screen and (min-width: 48em) {
    .logo { 
        width: 8em;
    } 
    
}

/* Large. Above 62em (992px) */
@media screen and (min-width: 62em) {
    .logo { 
        width: 12.5em;
    }

    h3 {
        font-size: 1.75em;
    }
}

/* Extra large. Above 75em (1200px) */
@media screen and (min-width: 75em) {
    .logo { 
        width: 12.5em;
    }
    h3 {
        font-size: 1.75em;
    }
    .footer {
        position: fixed;
        bottom: 0;
        width: 15%;
        /* Set the fixed height of the footer here */
        height: 90px;
        line-height: 90px; /* Vertically center the text there */
        background-color: transparent;
    }
   
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;
    }
    
    h4 {
        font-size: 1.5rem;
    }
    h5 {
        font-size: 1.25rem;
    }
    
    
}