@import url(//fonts.googleapis.com/css?family=Jost:400,600,700,300&display=swap);


@font-face {
  font-family: NotoColorEmojiLimited;
  unicode-range: U+1F1E6-1F1FF;
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
  font-display: swap;
}

* {
    box-sizing: border-box; 
    border-radius: 12px;
    font-family:  'Jost',  'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont, 
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 
    'Segoe UI Emoji', 'Segoe UI Symbol' !important;
}
body {
    background:#e7e7e7;
    padding:0 0.5em 0 0.5em ;
    margin: .6em  auto;
    text-align: center;
    max-width: 1200px;    
    line-height:1.3em;
}
a, .header a  {
  text-decoration: none;
  color: #4b7fb3;
}
header, footer, article{
    padding: 1em;
}
header, footer {
    width: 90%;
    display:inline-block;
    /* display:inline-flex; */
    /* position:relative; */
}
article {
  background-color:#f4f4f4;
  /* -moz-box-shadow: 0 0 25px #bebebe; */
  -webkit-box-shadow: 0 0 25px #bebebe;
  box-shadow: 0 0 25px #bebebe;
  padding-bottom:4rem;
}
footer {
  /* background-color: #e6e6e6; */
  margin-top:1em;
  margin-bottom:3em;
  font-size:small;
  color: #6c6c6c;
}
h1 {
  display: block;
  font-size: 1.8em;
  margin:1em 0 0.2em;
  font-weight: bold;
}
h1 a { color : black !important}


.options h4 {
  margin:1.2em 0 0 0.3em;
  color: #6c6c6c;
  font-weight: 600;
}
/* header */    
.header ul {  
  align-items: center;
  margin-top: 1.8em;
  float:right;
  list-style: none;
  overflow: hidden;
}
/* menu */
ul.menu li{
    
    padding:1em;
    display:inline;
    /* max-width: 60%; */
  /*   align-items:flex-start; */
    vertical-align: middle;
}


.menu {
    
    max-height: 0;
    float:right;
    transition:  .3s ease-out;
    vertical-align: middle;
}
.logo{
    color: #000;
    font-size:medium;
    line-height: 2.2em;
    text-align: left;
    float:left;
    padding-bottom:0;
    
    /* vertical-align: middle; */
}


img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(.8); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(.8); /* Microsoft Edge and Firefox 35+ */
}
/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}
.subtitle  {
    /* color: #000; */
    font-size:90%;
    margin-top:1.4em;
    margin-bottom:1em;
    line-height: 1.5em;
    color: #474747;
    
    text-align: left;
    /* display:inline-block; */
    
    /* vertical-align: middle; */
}
.subtitle h2{
  font-weight: 400;
}
/* menu icon*/
.header .menu-icon {
  cursor: pointer;
  display: inline;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}
.header .menu-icon .navicon {
  margin-top:1.2em;
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  -webkit-transition: background .3s ease-out;
  transition: background .3s ease-out;
  width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  -webkit-transition: all  .3s ease-in-out; 
  transition: all .3s ease-out;
  width: 100%;
}
.header .menu-icon .navicon:before {
  top: 5px;
}
.header .menu-icon .navicon:after {
  top: -5px;
}
/* menu btn */
.header .menu-btn {
  
  display: none;
}
.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

#main {
  min-height: calc(100vh - 70vh);
  text-align: center;
  margin-top:-1.5em;
}
.logos hr {
  border: .6px solid #f4f4f4;
  width:30%;
  margin-top:4em;
  margin-bottom:3em;
  margin:25px;
  
}
.logos a{
  display:inline-flex;
  vertical-align: middle;
  
}
.version{
  opacity:0.7;
}
.selectors{  
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    
    /* justify-content: space-between; */

    color: #888;
    font-size: 85%;
    margin: 0em 4.6em;
    border-radius: 20px;    
}
.selectors > div{
    z-index: 1;
    border-radius: 15px;
    /* margin-top:1em; */
    /* background-color: #fff; */
    /* outline:dashed; */
    padding:0px 17px 0 17px ;    
   /*  -webkit-transition:  .3s ease-in-out; 
    transition:  .3s ease-in-out;  */
}
.selectors  input{
    -webkit-filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
    filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
}
.selectors:hover > div {
 /*    background-color: #ffffffe7; */
    color: #000;
    -webkit-transition:  .3s ease-in-out; 
    transition:  .3s ease-in-out; 
}
.selectors:hover > input{
    
    filter:  drop-shadow(0px 20px 20px rgba(0, 0, 0, 0.4));
    -webkit-transition:  .3s ease-in-out; 
    transition:  .3s ease-in-out; 

}
#yearRange {
    margin-bottom:1.2em;
    color: #000;
    vertical-align: middle;
}

/*------ SLIDER each 5 years -----------------*/
.slider {
    -webkit-appearance: none;
    width: 300px;
    /* height: 0.1em; */
/*     border: 1px solid #598cae90; */
    margin-top:-1px;
    outline: none;
    opacity: 0.5;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 10px;
    padding: 8px;
    filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
}
.slider:hover {
    opacity: 1;
    /* background: #bee0f290; */
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16%;
    height: 1.2em;
    background: #598cae70;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
}
.slider::-moz-range-thumb {
    width: 16%;
    height: 1.2em;
    background: #598cae70;
    border: 0px;/*  solid #598cae; */
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
}
.sliderticks {
    display: flex;
    width: 300px;
    /* padding-top: 1em; */
    justify-content: space-between; 

}

.sliderticks p {
    position: relative;
    /* padding-block-end: -2em; */
    /* display: flex; */
    
    margin: 0 0 5px 0;
    font-weight: 300;
    font-size: 80%;
    /* color:#777; */
    /* transition: resize .2s; */
}

/*------ SLIDER FOR STOCKS (specific to 1 year not ranges) -----------------*/
.slider-stock {
    -webkit-appearance: none;
    width: 300px;
    /* height: 0.1em; */
    /* border: 1px solid #598cae90; */
    margin-top:-1px;
    outline: none;
    opacity: 0.5;
    -webkit-transition: .3s;
    transition:  .3s;
    border-radius: 10px;
    padding: 8px;
    -webkit-filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
    filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
    
}
.slider-stock:hover {
    opacity: 1;
    /* background: #f3fbff90; */
}
.slider-stock::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1.2em;
    background: #598cae70;
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 20px;
}
.slider-stock::-moz-range-thumb {
    /* width: 16%; */
    height: 1.2em;
    background: #598cae70;
    border: 0px;/*  solid #598cae; */
    cursor: pointer;
}

.ticks  {
    display: flex;
    justify-content: space-between;
    line-height: normal;
    font-weight: 300;
    font-size: 80%;
    padding: -2em;
    width: 100%;
    top: 20px;
}

.ticks span {
    display: inline-block;
    text-align: center;
    width: 20%; /* Adjust based on the number of ticks */
}
/* .slider-value {
  font-weight: 300;
  font-size: 90%;
}  */
.range-slider {
  -webkit-appearance: none;
  width: 120px;
  /* height: 0.1em; */
  /* border: 1px solid #598cae90; */
  margin-top:-1px;
  outline: none;
  opacity: 0.5;
  -webkit-transition: .3s;
  transition:  .3s;
  border-radius: 10px;
  padding: 8px;
  -webkit-filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
  filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
  
}
.range-slider:hover {
  opacity: 1;
  /* background: #f3fbff90; */
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1em;
  height: 1em;
  background: #598cae70;
  transition: all 0.3s;
  cursor: pointer;
  border-radius: 20px;
}
.range-slider::-moz-range-thumb {
  /* width: 16%; */
  height: 1.2em;
  background: #598cae70;
  border: 0px;/*  solid #598cae; */
  cursor: pointer;
}


.box {
  margin-right: 3em;
  margin-left: 3em;
  --min: 1ch;
  --gap: 2rem;
  text-align: justify;
  text-justify: inter-word;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.box p  {
  line-height: 1.6em;
  color: #656565;
  font-size: 95%;
}

.box >  .about{
  /* margin: 0 4em 0 4em; */
  min-width: 360px;
  flex: 2 0 var(--min);
  /* flex: 1ch 0 var(--min) ; */
}

.about h4 {
  margin:1.2em 0 0 ;
  color: #6c6c6c;
  font-weight: 600;
}

.options > div {
  line-height: 1em;
  /* justify-content: center; */
  /* margin-left:2em; */
  margin-top: 3em;
  /* padding: 2em; */
  
}
.options h2  {
  line-height: 1em;
  margin-bottom: -.1em;
  font-size: 1.2em;
}



.options-viz a{
  line-height: 1em;
  min-width: 115px;
  padding: 1em;

}

.box  .drop-link {
  border: 1px solid #c9c9c9;
}

/* 48em = 768px */
@media (max-width: 892px) {
  .logo{
    max-width:70%;
  }

  .subtitle {
    margin-top:-2em;
    max-width:100%;
  }
 
  ul.menu{
    justify-content: center;
    margin-top:0.6em;
    margin-right:5.5em;
}  
  #reset{
    /* position:inline-block; */
    margin-top:1em;
    padding-top:1em;
    /* transform: scale(.7); */
  }
  
  
  #chord {
    padding-top:4em;
    transform: scale(1.3);
  }
  
}
@media (min-width: 892px) {

  .header .menu {
    float: right;
    
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  .spin > div{
    display:block;
    margin-top: 0em;
  }
  
 
  
}

/* https://codepen.io/envoy47/pen/eogNVX */
li{
    transition:all 0.3s ease;
    list-style-type:none;
}
li:hover{
    cursor:pointer;
}
.dropdown{
    background-color:#e7e7e7;
    
    /* margin:0 0 1em;  */
    /* padding: 0 0 1em;  */
    border: 1px solid #c9c9c9;
    -webkit-box-shadow: 0 0 25px #bebebe;
    box-shadow: 0 0 25px #bebebe;
    z-index: 1;
    display:block;
    position:absolute;
    visibility: hidden;
    
    width:150px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    cursor: default;
  }
  
  li:hover > .dropdown{
    z-index:2;
    opacity:1;
    visibility: visible;
    transform:translateY(8px);
  }
  .drop-link {
    display:inline-block;
    text-align: center;
    font-size: small;
    text-decoration:none;
    width:fit-content;

    color:#333;
    /* filter:  drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2)); */
    padding: 5px 15px;
    margin:4px;
    /* margin-left: 1.5em ;  */
    background-color:#fff;

    -webkit-transition:0.1s;
    transition:0.1s;
  }
  .drop-viz{
    width: 90px;
    height: 90px;
    padding: 15px 15px;
  }
  
  .dropdown  p{
    padding: 3px ;
    margin-bottom: 0em;
    font-weight: 600;
    line-height: 1em;
    /* color: white; */
    /* background-color: #333;      */
  }
  .drop-link:hover{
    transform:scale(1.1);
    opacity:1; 
  }
  .drop-link .selected{
    background-color: #598cae;
  }

  
  .form {
    flex: 1 0px;
    max-width: 250px;
  }
  .form .collection {
    position: relative;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    padding: 4px 9px;
    filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1));
    background: rgba(255, 255, 255, 0.9);
    z-index: 0;
  }
  .form .collection input[type=radio] {
    position: absolute;
    transform: scale(0);
  }
  .form .collection input[type=radio] + label {
    cursor: pointer;
    flex: 1 0 0px;
    /* padding: 2px /* 8px */
  }
  .form .collection input[type=radio] + label > * {
    padding: 2px 3px;
    opacity: 0.875;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .form .collection input[type=radio] + label:last-child {
    position: relative;
  }
  .form .collection input[type=radio] + label:last-child::before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius: 10px;
    background-color: #598cae38;
    background-clip: padding-box;
    transition: all 0.3s;
  }
  .form .collection input[type=radio]:checked + label > * {
    opacity: 1;
    color:#000
  }
  .form .collection input[type=radio]:checked + label + input + label:last-child::before {
    transform: translate(-100%);
  }
  .form .collection input[type=radio]:checked + label + input + label + input + label:last-child::before {
    transform: translate(-200%);
  }

select {
    /* font-size:90%; */
    float:right;
    /* position: relative; */
    /* display: flex; */
    margin-top:-1px;
    opacity:0.7;
    color:#333;
    border-radius: 10px;
    overflow: hidden;
    padding: 9px;
    filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1));
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    z-index: 0;
    max-width: 230px; /* Set the maximum width */
    text-overflow: ellipsis; /* Add an ellipsis */
    white-space: nowrap; /* Prevent text from wrapping */ 
  
}



#sankey-visualization {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin:0% 10% 0 10%;
}
#sankey-visualization p{
  font-weight:700;
  text-transform: uppercase; 
}

.selectedRanking select{
  padding-left: 1.2em;
  padding-right: 1.2em;
  float:none;
}


.sourceTarget{
  display: flex; 
  margin: 0 6.5em -.8em 6.5em;
  padding:0 1em 0 1em ;
  font-size: 17px;
  color: #656565;
  text-transform: uppercase; 
  justify-content: space-between;
}

#reset {
  
  font-size:80%;
   /* display:inline-block;
   position:absolute; */

   /* margin: auto; */
   /* left:46.7%; */
   filter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1));
   background: rgba(255, 255, 255, 0.8);
 
   padding:0 1em 0 1em ;
   /* top:70%; */
   /* display:inline-block; */
   
   /* margin-top:2.4em; */
   cursor:pointer;
   
 } 
 
/* The graphic interaction */
.group-arc, .node, .region-label-text, #selectYear{
  cursor:pointer;
}

.country-label{
  cursor:pointer;
}

#markdown_text p:nth-last-child(2){
  margin:0
}

@keyframes spinner {
        0% {
          transform: translate3d(-50%, -50%, 0) rotate(0deg);
        }
        100% {
          transform: translate3d(-50%, -50%, 0) rotate(360deg);
        }
      }
      [data-loaded="true"] .spin,
      [data-loaded="false"] #chord {
        opacity: 0;
        transition: opacity 0.2s;
}

      .spin::before {
        animation: 1.5s linear infinite spinner;
        animation-play-state: inherit;
        border: solid 5px #fff;
        border-bottom-color: #D6E0E7;
        border-radius: 50%;
        content: "";
        height: 30px;
        width: 30px;
        position: absolute;
        top:65%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        will-change: transform;
      }
.dropdown-section {
    background-color:#e7e7e7;
    margin:0 0 0em; 
    padding: 1em;
}

.viz-section {
    margin:.5em; 
    padding: 1em;
}

.viz-icon-chord {
    width:30px;
    vertical-align: middle;
}

.viz-icon-sankey {
    width:40px;
    vertical-align: middle;
}

.subtitle-text {
    opacity:65%;
    font-size: 1em;
}
.country-label {
    font-size: 9px;
}

.flag-emoji {
    font-size: 7px !important;
}

.country-label {
  transition: font-size 0.1s ease;
}

.country-label.highlighted {
  font-size: 12px !important;
  font-weight: bold;
  fill: #000;
}

.chord-path.highlighted {
  opacity: 1 !important;
  filter: brightness(1.2);
}