main {
  height: 100vh;
  padding-top: 5px;
}

.desktop-lang-select {
  display: block;
}

.mobile-lang-select {
  display: block;
}

.toasts {
  top: 80px;
}

.p-no-margin-bottom {
  margin-bottom: 1rem !important;
}

.column-no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.form-control::placeholder {
  color: #474747;
}

.badge:hover,
.badge:focus {
  text-decoration: none;
}

.nav-tabs .nav-link {
  height: 100%;
}

.dropdown-menu {
  z-index: 2030;
}

.dropdown-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.yonder-chip input::placeholder {
  /*.yonder-select input::placeholder {*/
  color: #ced4da;
}

/*.yonder-chip .darken-placeholder::placeholder,
.yonder-select .darken-placeholder::placeholder {
  color: #3c4245;
}*/

.btn-group-justified .btn {
  width: 100% !important;
}

.title--grey {
  color: #696363;
  margin-top: 0.5rem;
}

.title--orange {
  color: #d86422;
  margin-top: 0.5rem;
}

.text-orange {
  color: #d86422 !important;
}

.title--lightgrey {
  color: #696363;
  font-size: 1rem;
}

.dataname-title{
    color: #d86422 !important;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 1rem;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-weight: 500;
}

}

.h-viewport {
  height: 100vh !important;
}

.h-viewport.carousel .carousel-inner,
.h-viewport.carousel .carousel-item {
  height: 100% !important;
}

/*
  .yonder-chip input[data-toggle="dropdown"][disabled] ~ .chips {
    cursor: not-allowed;
    pointer-events: none;
  }
*/

.yonder-chip .badge {
  font-weight: 400;
  line-height: 1.25;
}

input + .fa {
  display: block;
  margin-bottom: 5px;
}

.navbar .nav-link {
  color: white !important;
}

.disabled {
  cursor: no-drop;
}

.nav-link.disabled{
  pointer-events: auto;
}

button {
  cursor: pointer;
}

.btn-link {
  line-height: inherit;
  font-size: inherit;
}

.text-vertical {
  transform: rotate(270deg);
  white-space: nowrap;
}

.dataTables_filter input {
  display: inline;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.controls-margtop{
  margin-top: 6px;
}

.fa {
  font-size: 16px !important;
}

.w-1\/6 {
  width: 16.66667% !important;
}

.open-on-hover .dropdown:hover > .dropdown-menu {
  display: block;
}

.open-on-hover .dropdown-menu {
  margin-top: -0.125rem;
}

.open-on-hover .dropdown > .dropdown-toggle:active {
  pointer-events: none;
}

.custom-select ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.custom-select ::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.plot-output__spinner {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 5em;
  height: 5em;
  z-index: 9001;
}

/* chart styles */
.heat-chart-area {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica,
    sans-serif;
}

.highchart,
.highcharts-container {
  overflow: visible !important;
}

.highcharts-container {
  width: 100% !important;
}

.heat-chart-table {
  max-width: 100%;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
}

.heat-chart-cell {
  padding: 0;
}

.heat-chart-cell .highchart {
  width: 100% !important;
  display: flex !important;
}

.heat-title-cell {
  width: auto !important;
}

.max-char-25px {
  max-width: 25ch;
}

.pseudo-row {
  display: -ms-flexbox;
  display: flex;
  margin-right: -15px;
  margin-left: -15px;
  height: auto;
  width: 100%;
}

.pseudo-row > .pseduo-row {
  margin-right: 0;
  margin-left: 0;
}

.pseudo-row .col + .col {
  padding-left: 0;
}

.no-padding {
  padding: 0;
}

.heat-legend-container .html-widget{
  height: 31px !important;
}

.heat-legend-container svg {
  overflow: visible !important;
}

.heat-legend-container .highchart,
.heat-legend-container .highcharts-container,
.heat-legend-container .highcharts-root {
  width: 100%;
  display: flex;
}

.heat-legend-container .highcharts-background,
.heat-legend-container .highcharts-plot-background,
.heat-legend-container .highcharts-plot-border {
  transform: scaleY(0);
}

.heat-main-title {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #696363;
  text-align: center;
}

.heat-pane-chart .highchart,
.heat-pane-chart .highcharts-container {
  height: auto !important;
  width: 100% !important;
}

.heat-pane-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica,
    sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #696363;
  white-space: normal;
  letter-spacing: 0.5px;
  text-align: center;
  transition: height 0.25s linear;
}

.add-margin-bottom {
  margin-bottom: 1rem;
}

.heat-pane-title.pl-2 {
  /* wat */
  padding-left: 12.5% !important;
}

.heat-pane-title.pl-3 {
  padding-left: 19.5% !important;
}

.dataset-title{
  text-align: center;
    margin: 5px 0;
    color: grey;
    font-size: 0.8em;
    font-style: italic;
}

.heat-axis-title {
  color: rgb(102, 102, 102) !important;
  font-size: 16px !important;
  font-weight: 400;
  text-align: center;
}

.grey-pane-title{
  color: grey;
  margin-bottom: 4px;
}

.heat-variable-title {
  display: table-caption;
  color: #696363 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  letter-spacing: 0.5px !important;
  flex: 1 0 15em;
  padding: 0 15px;
}

.heat-vertical-title__outer {
  position: relative;
  width: 1em;
  height: 100%;
}

.heat-vertical-title__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: auto;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: translateY(-50%) translateX(-50%) rotate(-90deg);
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica,
    sans-serif;
  width: 500px;
  /*white-space: nowrap;*/
}

.heat-chart-disclaimer {
  visibility: hidden;
  height: 0;
}

.heat-chart-disclaimer p {
  letter-spacing: 0.5px;
}

.highcharts-tooltip-container {
  z-index: 10;
}

/* Sara's additions */
/* p, */
label,
.font-size-xl {
  /* <- please don't hijack a different type of style like this */
  /*    let this syle control font size only, as it should */
  color: #3c4245;
}

/* Change bootstrap blue to WHO blue */
.bg-blue,
.btn-group-toggle.active-blue .btn:not(:disabled):not(.disabled).active,
.btn-blue,
.dropdown-item:active,
.dropdown-item.active {
  background-color: #008dc9 !important;
  color: #fff !important;
}

.text-blue {
  color: #008dc9 !important;
}

.bg-blue {
  background-color: #008dc9 !important;
}

.btn-group-toggle.active-blue .btn:not(:disabled):not(.disabled).active,
.btn-blue {
  border: #008dc9;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #008dc9;
  border-color: #008dc9;
}

.btn-blue:hover {
  background-color: #047db0 !important;
  border-color: #047db0 !important;
}

/* Change bootstrap orange to WHO orange */
.active-orange .active {
  background-color: #d86422 !important;
  color: white !important;
}

.border-orange {
  border-color: #d86422 !important;
}

/* Add border to gray buttons */
.btn-grey:not(.dropdown-item) {
  border: 1px solid #dae0e5;
}

/* Remove extra button on button groups */
.border {
  border: none !important;
}

/* Remove border radius on tabs*/
.card-header .nav-item .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card-header .nav-item .btn:hover {
  background-color: #e2e6ea;
  border-color: #dae0e5;
  color: #008dc9;
}

/* If we need more spacing on form groups please update the bottom
   margin, this is already set by bootstrap. In the application there
   are instances when I need to remove the bottom margin. */
/*.form-group {
  padding-bottom: 10px;
}*/

/* More subtle chips, remove excess text shadow */
.chip {
  background-color: #dae0e5;
  border: 1px solid #dae0e5;
  color: #3c4245;
  padding: 0 10px;
  border-radius: 15px;
  line-height: 25px;
}

.chip:hover {
  background-color: #dae0e5;
  color: #3c4245;
}

.chip:hover > .chip-close {
  color: #d86422;
}

.chip-close {
  text-shadow: none;
}

label:not(.custom-control-label):not(.btn):not(.custom-file-label) {
  font-weight: 600;
  color: #3c4245;
  margin-bottom: 1px !important;
}

.custom-control-label {
  font-size: 14px;
}

.background-gray {
  background-color: rgba(0, 0, 0, 0.03);
  padding: 15px;
}

.max-width-300px {
  max-width: 300px;
}

/* Make homepage nice */
#app-pane_home {
  max-width: 960px;
  margin: 0 auto;
}

#app-pane_home h1 {
  text-align: center;
}

#app-pane_home h1:first-child {
  color: #008dc9;
  text-shadow: 1px 1px #d86422;
}

#app-pane_home h1:nth-child(2) {
  color: #d86422;
  text-shadow: 1px 1px #008dc9;
}

#app-main-display-pane_data_disclaimer {
  text-align: center;
  font-style: italic;
}

hr {
  opacity: 0.5;
}

#heat-header-title-desktop {
  justify-content: flex-start !important;
  text-align: left !important;
  display: flex;
  margin-left: 15px;
}

#heat-header-title-mobile {
  display: none !important;
}

.navbar-light .navbar-toggler {
  border: none !important;
  color: #fff !important;
}

.margin-left-subtract {
  margin-left: 40px;
}

label.btn.btn-grey.hidestuff{
  display: none !important;
}

.sk-circle {
  margin-top: 2rem !important;
}
.heat-view-controls label.btn {
  display: flex !important;
  flex-flow: row-reverse nowrap;
  align-items: center;
  justify-content: center;
}

.heat-view-controls .fa,.far,.fas {
  margin-right: 10px;
  font-size: 1rem !important;
}

table.dataTable thead th {
  white-space: nowrap;
}

.table-text-center {
  text-align: center;
}

/*Remove the left padding from table headers*/
th.table-text-nocenter {
  padding-left: 8px !important;
}

/* Data select modal */

.selected-dataset {
  margin-bottom: 20px;
  text-align: center;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #008dc9;
  color: white;
  cursor: pointer;
  padding: 7px 15px;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid white;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active,
.accordion:hover {
  /* background-color: #d86422; */
}

/* Style the accordion panel. Note: hidden by default */
.accpanel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

.accordion:after {
  content: "+"; /* Unicode character for "plus" sign (+) */
  font-size: 15px;
  color: #fff;
  float: right;
  margin-left: 5px;
}

#heat-dc-choosedatamodal .modal-title {
  color: grey;
}

#heat-dc-choosedatamodal .btn-default {
  background-color: #ced4da;
  margin-right: 5px;
}

#dc-choosedatamodal .modal-title {
  color: grey;
}

#dc-choosedatamodal .btn-default {
  background-color: #ced4da;
  margin-right: 5px;
}


button.accordion.active:after {
  content: "-"; /* Unicode character for "minus" sign (-) */
  color: #fff;
}

button.accordion:focus {
  outline: none;
  box-shadow: none;
}

.table-header-vertalign th {
  vertical-align: middle !important;
}

/* Loading screen


header,
main {
  visibility: hidden;
}

body:not(.pg-loaded) {
  background-color: #008dc9;
}

.pg-loaded header,
.pg-loaded main {
  visibility: visible;
}
 */
.pg-loading-logo {
  width: 35%;
}

/* View controls
 */
.heat-view-controls {
  width: 100%;
}

/* Adjusting columns and flex properties
 */
.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  float: none;
}

/* summaries tables styles */
.heat-summaries-indicator {
  color: #3c4245;
}

.heat-summaries-subtitle {
  color: #495057;
  font-weight: bold;
  white-space: nowrap;
}

.data-select {
  max-width: 300px !important;
}

.bench-label {
  font-size: 0.8em;
  font-style: italic;
}

.alldates-btn {
  flex-direction: row-reverse;
  display: flex;
  margin-bottom: 10px;
  margin-top: -40px;
}

.alldates-btn .fa {
  font-size: 15px !important;
}

.alldates-btn .btn {
  z-index: 2;
  font-size: 0.8em;
  padding: 3px 10px;
  background-color: #fff;
}

.nav-tabs li {
  margin: 10px;
  padding: 5px;
}

[data-id="Id084"] {
  border: thin solid;
  width: 500px !important;
}

#heat-datachoose {
  background-color: #d86422 !important;
  outline: 2px solid #b6b6b6;
  margin-left: 10px;
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
}

.accpanel .custom-radio {
  margin: 10px 0;
}

/*git709*/
.sticky-top.container-fluid {
  margin-right: 0 !important;
  padding-right: 20px !important;
}

.invalid-val {
  color: #c1c1c1 !important;
}

.invalid-val:hover {
  color: lightgrey;
}

.invalid-chip-val {
  color: #9c9c9c !important;
}

.invalid-chip-val:hover {
  color: lightgrey;
}

.radio-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.tooltip-radio {
  /*position: relative;*/
  display: inline-block;
}

.tooltip-radio .tooltip-radiotext {
  visibility: hidden;
  /*width: 120px;*/
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  z-index: 1000;
  font-size: 0.8em;
  left: 3%;
  right: 3%;
  background-color: #e9e2e2;
  padding: 10px 20px;
}

.tooltip-radio:hover .tooltip-radiotext {
  visibility: visible;
}

.radio-line .custom-control-label {
  vertical-align: text-top !important;
  margin-right: 10px;
}

.radio-line i.fas.fa-circle-info {
  color: #b3b2b2;
}

.selected-dataset {
  min-height: 56px;
}

.terms-span{
      margin-right: 20px;
    font-size: 1em;
    font-style: italic;
}
.terms-warn{
     text-align: center;
     margin-bottom: 10px;

}

.terms-button{
  display:flex;
     align-items: baseline;
     justify-content: center;
}

.heat-management-modal .modal-footer{
  display: block;
}

.modal-header-subdiv{
  display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.modal-header .close {
  display: none !important;
}

/* ------------  MEDIA QUERIES ------------ */

/* With jQuery force different collapse point on Yonder */
/*https://www.codeply.com/go/J70zkpygvk*/
@media (min-width: 1300px) {
  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-custom .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-custom .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-custom .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-custom .navbar-toggler {
    display: none;
  }

  .navbar-nav .dropdown-menu {
    position: absolute;
  }
}

/* When browser window is at least 705px */
@media (min-width: 705px) {
  .navbar-nav {
    justify-content: flex-end;
    margin-left: auto !important;
    margin-right: 5px !important;
  }
}

/* This is the navbar and waiter */
@media (max-width: 1300px) {
  /* Prevent menu from covering content */
  .h-screen {
    padding-top: 50px;
  }

  .max-char-25px {
    max-width: 40ch;
    width: 30ch;
  }

  /* overall title when browser is wide*/
  #heat-header-title-desktop {
    display: none !important;
  }

  /* title on mobile*/
  #heat-header-title-mobile {
    display: flex !important;
  }

  #heat-datachoose {
    padding: 3px 10px;
    font-size: 0.8em;
    margin-right: 10px !important;
  }

  .mobile-lang-select .custom-select {
    height: 30px;
    font-size: 0.8em;
    line-height: 1;
    margin-right: 10px !important;
  }
  /* these are the links within the navbar mobile menu
  Like "Home" and "Explore inequality"
  */
  .navbar .nav-link {
    width: 100%;
    margin: 0 -4px;
    border-radius: inherit;
  }

  /* these are the divs that hold the links within the navbar mobile menu */
  .navbar .nav-item {
    /*background-color: #3b94cb;*/
  }




  /* when .nav-link is open, these are the sub items
  like "Disaggregated data"*/
  .navbar .dropdown-item {
    text-align: center;
    color: white;
  }



  /* This is the submenu with  user manual etc */
  .navbar-nav .dropdown-menu {
    background-color: #3b94cb;
  }

  .dropdown-item:focus,
  .dropdown-item:hover {
    /* color: #16181b; */
    /* text-decoration: none; */
    background-color: #028bc5;
  }

  /* puts the WHO logo in the middle */
  .navbar-brand {
    width: 55%;
  }

  .desktop-lang-select {
    display: none;
  }

  .mobile-lang-select {
    display: block;
  }

  .hidden-xs {
    display: none;
  }

  /* not sure what this is for*/
  rect {
    height: 200;
  }

  /* Change tabs to look like buttons for widths when tabs stack on top of each other. Below 951px */

  .waiter-overlay-content {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .waiter-overlay-content h1 {
    font-size: 1.5em;
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
    margin: 0 auto;
  }

  .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link.active {
    border-color: #dee2e6;
  }

  .nav-tabs .nav-item {
    margin: 5px;
  }
}

/* This is the main app not including the navbar */
@media (max-width: 1100px) {
  /* margin around selection/options/downloads*/
  .nav-tabs .nav-item {
    margin: 5px;
  }

  /* this reduces padding on the buttons like "Horizontal line */
  .subtract-15-padding {
    padding-left: 15px !important;
    padding-right: 0 !important;
  }

  /* the sidebar is a card and this card header is
  the div that holds the Selection/Options/Downloads*/
  .card-header {
    padding: 3px;
  }

  /* card header tabs are the
  Selection/Options/Downloads in the sidebar */
  .card-header-tabs {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
  }

  /* these are the actual buttons for Selection/Options/Downloads */
  .card-header .nav-item .btn {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-color: #dee2e6;
  }

  /* Column layout on small screens */
  .row {
    /* ANOTHER GENERIC OVERWRITE */
    display: flex;
    flex-direction: column;
  }

  .col {
    max-width: 100%;
  }

  .col-1,
  .col-4,
  .col-8,
  .col-11,
  .col-12 {
    max-width: 100% !important;
  }
}

@media (max-width: 705px) {
  /* Prevent menu from covering content*/
  .h-screen {
    padding-top: 50px;
  }

  .heat-view-controls .fa {
    display: none !important;
  }

  .heat-view-controls label.btn {
    display: flex !important;
    flex-direction: column-reverse;
    justify-content: center;
    font-size: 0.9em !important;
  }

  .heat-view-controls label.btn:nth-child(2) {
    font-size: 15px;
  }
}

@media (max-width: 1300px) {
}

/* Change tabs to look like buttons for widths when tabs stack on top of each other. Between 1328px and 951px */

/*
@media (max-width: 1300px) {
  .card-header {
    padding: 3px;
  }

  .card-header-tabs {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
  }

  .card-header .nav-item .btn {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-color: #dee2e6;
  }

  .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link.active {
    border-color: #dee2e6;
  }

  .nav-tabs .nav-item {
    margin: 5px;
  }
}
*/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here
     Override column class applied highcharts
   */
  .col,
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    flex-basis: auto;
  }
}


.yonder-select button.dropdown-item{
    text-wrap: pretty !important;
    white-space: normal !important;
}


/* don't remember what this was for but we don't use navbar-expand-xl
$('button.dropdown-item').css('text-wrap', 'pretty')

@media (min-width: 1300px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1300px;
  }
}


@media (min-width: 1300px) {
  navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
}
*/