/*div {
  border: 3px solid green;
}*/



html {
  scroll-behavior: smooth;
}

table {

  color: #000000;
}

.header {
  height: auto;
  justify-content: inherit;
  align-items: inherit;
  position: relative;
  text-align: center;
  color: white;
}

h2 { color: steelblue /*, 8e2921, 5b0000, 7B3A30*/; font-family: 'HelveticaNeueBd', sans-serif; font-size: 30px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: left; }
h4 { color: steelblue /*, 8e2921, 5b0000, 7B3A30*/; font-family: 'HelveticaNeue', sans-serif; font-size: 30px; font-weight: 50; letter-spacing: -1px; line-height: 1; text-align: left; }

.para2 { color: #000000; font-family: 'HelveticaNeue', sans-serif; font-size: 18px; font-weight: 100; line-height: 32px; margin: 0 0 72px; text-align: left; }

.para2 strong {
  font-family: 'HelveticaNeueBd', sans-serif;
  font-weight: bold;
}

.makeBold {
  font-weight: bold;
  display: inline;
}

.question{ color: #362e28; font-family: 'HelveticaNeue', sans-serif; font-size: 18px; font-weight: bold; line-height: 32px; margin: 0 0 72px; text-align: left; }

.para{
 /* {"color":"#c7821c",
"name":"brown",
"textColor":"black"},*/

 color: #000000 /*#c7821c#7c795d*/; font-family: 'HelveticaNeue', serif; font-size: 25px; font-weight: normal; line-height: 48px; margin: 0; 
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.photo img {
  width: 100%;
/*  display: block;*/
}



.empty {
  height: 250px;
  width: 400px;
  /*border: 3px solid green;*/
}

.small.empty {
  height: 1px;
  width: 400px;
  /*border: 3px solid green;*/
}

.special.empty {
  height: 120px;
  width: 400px;
  /*border: 3px solid green;*/
}


.scrollytelling-text {
  max-width: 480px;
  /*border: 3px solid #000000;*/
  word-wrap: break-word;
  margin: 10px;
  padding: 40px 10px 40px 0px; /* top, right, bottom, left */
}

svg.box-plot {
    position: sticky;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  }

div #freq-plot-sticky {
  /*border: 3px solid green;*/
  padding: 0px 0px 0px 0px;

}

table.toggleSwitchTable {
  margin: 0px 0px 0px 190px;
}

button#countryLabelsToggle {

background:    #ffffff;
background:    linear-gradient(#ffffff, #f3f3f3);
 background-color: white;
border-radius: 5px;
padding:       8px 20px;
color:         #741b47;
display:       inline-block;
/*font:          normal bold 24px/1 'Helvetica Neue', sans-serif;*/
text-align:    center;

    position: sticky;
    top: 10%;
    left: 0%;
}

button#reset {
  background-color: #ffecc3;
  border: none;
  color: #8e2921;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  position: sticky;
  top: 90%;
  left: 200%;
}

button#switchMode {
  background:    #ffffff;
background:    linear-gradient(#ffffff, #f3f3f3);
 background-color: white;
border-radius: 5px;
padding:       8px 20px;
color:         #741b47;
display:       inline-block;
/*font:          normal bold 24px/1 'Helvetica Neue', sans-serif;*/
text-align:    center;

    position: sticky;
    top: 10%;
    left: 20%;
}

.button4 {
  background-color: #ffecc3;
  color: black;
  border: 2px solid #e7e7e7;

}




/**********************
Toggle switches

Credit: https://www.w3schools.com/howto/howto_css_switch.asp
**********************/

/* put disabled image of toggle switch and toggle switch on top of each other*/
.countryLabelsToggleContainer{
  display: grid;
}

.countryLabelsToggleContainer .layer1, .layer2 {
  grid-column: 1;
  grid-row: 1;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 32px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider (oval part)*/
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffecc3;
  -webkit-transition: .4s;
  transition: 1s;
  border: 2px solid #E7E7E7;
}

/* circle inside slider */
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: #bc8644;
  -webkit-transition: .4s;

  /*border: 2px solid #E7E7E7*/
}


/*.switchModeComplexVis .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 16px;
}

.switchModeComplexVis .slider:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 20px;
  left: 4px;
  bottom: 1px;
  background-color: #bc8644;
  -webkit-transition: .4s;

}*/


/* default slider color (oval part), after turned on*/
input:checked + .slider {
  background-color: #ffecc3;
  transition: .4s;
  /*border: 2px solid #E7E7E7*/
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
  /*border: 2px solid #E7E7E7*/
}

/* circle inside slider after turned on */
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: #bc8644;
  /*border: 2px solid #E7E7E7*/
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/**********************
Freq plot fixed sidebar

Credit:
https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp
**********************/

/* The sidebar menu */
.sidenav {
  height: 40%; /* Full-height: remove this if you want "auto" height */
  width: 190px; /* Set the width of the sidebar */
  position: sticky; /* Fixed Sidebar (stay in place on scroll) */
/*  top: 25%;  Stay at the top */
  left: 40%;/*90%;*/
  background-color: white; /*f5e6ce;*/
  /*overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: hidden;
  padding-top: 10px;
}

/* The navigation menu links */
.sidenav a {
  font-family: sans-serif;
  padding: 0px 8px 3px 16px;
  text-decoration: none;
  font-size: 17px;
  color: #8e2921/*000000*/;
  display: block;

}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  font-weight: bold;
}

/* Keep current selection bold */
.sidenav a.active {
  font-weight: bold;
}


/**********************
Dot formating

Credit:
Lab 6
**********************/
.dot circle {
    fill: #000000;
}

.dot text {
    text-anchor: middle;
    font-size: 10px;
    pointer-events: none;
    fill: #555;
    opacity: 0.5;
}

.dot:hover text {
    opacity: 1;
}

/**********************
Box-and-whisker formating
**********************/

svg .bnw {
  fill: #000000;
  stroke: #000000;
}

/**********************
Freq plot tooltip

Credit: Lab 7
**********************/

.d3-tip {
  line-height: 1;
  padding: 6px;
  background: #b8a77b;
  color: #333;
  border-radius: 4px;
  font-size: 12px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: #b8a77b;
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips specifically */
.d3-tip.n:after {
  margin: -2px 0 0 0;
  top: 100%;
  left: 0;
}

.d3-tip h5{
  font-size: 13px;
  font-weight: 600;
  margin: 2px 10px 4px 2px;
}

.d3-tip thead td {
  border-bottom: 1px solid #ccc;
  font-size: 10px;
  font-weight: 600;
}

.d3-tip td {
  padding: 2px 10px 2px 2px;
}

.d3-tip thead tr {
  padding-top: 10px;
}

/**********************
Freq plot x & y labels
**********************/
svg .x.axis text {
    font-size: 15px;
    fill: #000000;
}

svg .x.axisLabel {
    /*font-family: sans-serif;*/
    font-size: 20px;
    fill: #000000;
    text-anchor: middle;
}

svg .countries {
    /*font-family: sans-serif;*/
    font-size: 10px;
    fill: #000000;
    text-anchor: left;
}

svg .y.axisLabel {
    font-size: 20px;
    fill: #000000;
}

svg .x.label {
  /*font-family: sans-serif;*/
  font-size: 14px;
  fill: #000000;
  text-anchor: middle;
}

svg .countries.y.label {
  /*font-family: sans-serif;*/
  font-size: 10px;
  fill: #000000;
  text-anchor: left;
}


/******************* ***
Body formating
**********************/

body {
    font-family: sans-serif;
    margin: 0;
    background-color: white; /*f5e6ce;*/
}

#main {
    margin: 20px;
    clear: left;
    
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}


.embeddings .dot:hover text {
  opacity: 1;
}

:root {
  --color: rebeccapurple;
  --disabled: #959495;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.checkbox {
  display: grid;
  grid-template-columns: -webkit-min-content auto;
  grid-template-columns: min-content auto;
  grid-gap: 0.5em;
  font-size: 1rem;
  color: var(--color);
}
.checkbox--disabled {
  color: var(--disabled);
}

.checkbox__control {
  display: inline-grid;
  width: 1em;
  height: 1em;
  border-radius: 0.25em;
  border: 0.1em solid currentColor;
}
.checkbox__control svg {
  -webkit-transition: -webkit-transform 0.1s ease-in 25ms;
  transition: -webkit-transform 0.1s ease-in 25ms;
  transition: transform 0.1s ease-in 25ms;
  transition: transform 0.1s ease-in 25ms, -webkit-transform 0.1s ease-in 25ms;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}

.checkbox__input {
  display: grid;
  grid-template-areas: "checkbox";
}
.checkbox__input > * {
  grid-area: checkbox;
}
.checkbox__input input {
  opacity: 0;
  width: 1em;
  height: 1em;
}
.checkbox__input input:focus + .checkbox__control {
  box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
}
.checkbox__input input:checked + .checkbox__control svg {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.checkbox__input input:disabled + .checkbox__control {
  color: var(--disabled);
}