/*
  * {
    --max-width: 1645px;
  }

  body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 18pt;
  }
  */
  :root {
    --ahead-blue: #1751a2;
    --ahead-gray: #919191;
    --ahead-hover-gray: #eeeeee;
    --ahead-mid-gray: #dfe0df;

  }
  svg:focus {
    /*outline: black solid 0px*/
    outline: none;
  }

  

  #ahead-sample-page {
    --max-width: 1645px;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 18pt;
  }

  #main-container {
    /*margin: 0 auto;*/
    /*max-width: 1625px;*/
    --max-width: 1645px;

    display: flex;
    flex-direction: column;
  }

  /*
  #main-container > div:not(#interactive-tool-tip) {
    padding: 0 40px;
  }
  */

  /*#main-container > div {
    padding: 0 40px;
  }
  */
  #nav-bar {
    /*padding-left: 20px;*/
    padding: 0 40px;
    background-color: black;
    color: white;
  }

  #title-panel {
    padding: 0 40px;
    background-color: #1751a2;
    /*height: 100px;*/

    display: flex;
    justify-content: center;
    align-items: center;

  }

  #title-panel-inner {
    /*width: 70%;*/
    width: var(--max-width);
    margin: 0 auto;
    color: black;
    margin: 50px 0;
  }

  #title-panel-inner h1 {
    color: white;
    margin: 0;
  }

  #title-panel-inner div {
    /*font-family: Arial, Helvetica, sans-serif;*/
  }

  #intro-panel {
    padding: 0 40px;
    background-color: #f9fafa;
    /*font-family: Arial, Helvetica, sans-serif;*/
    /*width: 100%;*/
    display: flex;
    justify-content: center;
    align-items: center;

  }

  #intro-panel-inner {
    max-width:  var(--max-width);
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #intro-panel-inner-inner {
    margin: 0 auto;
    /*width: 70%;*/
    width: 90%;

  }

  #menu-bar {
    padding: 0 40px;
    /*padding-top: 20px;*/
    background-color: white;
    box-shadow: 0px 5px 6px -2px rgba(0,0,0,0.1);
    height: 60px;
    /*min-height: 60px;*/
    /*padding-top: 20px;*/
    /*align-items: stretch; */
    margin-bottom: 20px;
  }
  @media only screen and (max-width: 2560px) {
    #menu-bar {
      height: 80px;
    }
  }

  #menu-bar-inner {
    max-width:  var(--max-width);
    margin: 0 auto;
    display: flex;
    height: 100%;
    /*margin-top: 20px;*/
    /*padding-bottom: 20px;*/
    /*height: 80px;*/
    align-items: stretch;

    /*
    margin-top: 20px;
    margin-bottom: 20px;
    */
  }

  #data-source-selector {
  }

  #view-selector {
    margin-left: auto;
  }

  #indicator-bar {
    padding: 0 40px;
  }
  #indicator-bar-inner {
    /*width: 90%;*/
    /*font-family: Arial, Helvetica, sans-serif;*/
    margin: 0 auto;
    max-width:  var(--max-width);

    display: flex;
    align-items: center;
    padding: 10px 0;

  }

  #indicator-bar-inner .heading {
    font-weight: bold;
    color: #707070;
  }

  #indicator-bar-inner .indicator {
    /*color: #797a7a;*/
  }

  #indicator-dropdown {
    margin-left: 10px;
    width: 300px;

    /*flex-basis: fit-content;*/
  }

  #indicator-dropdown li img, #indicator-dropdown .selected img {
    margin-right: 10px;
  }

  /*#indicator-bar label {
    font-family: Arial, Helvetica, sans-serif;
  }
  */
  #desc-panel {
    padding: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #desc-panel-inner {

    /*font-family: Arial, Helvetica, sans-serif;*/
    margin: 20px 0;
    /*width: 90%;*/
    max-width:  var(--max-width);
  }

  #desc-panel-inner > div {
    display: none;
  }

  #filter-modal .modal-description > div {
    display: none;
  }

  #filter-panel {
    padding: 0 40px;
    /*width: 100%*/
  }
  #filter-panel-inner {
    max-width:  var(--max-width);
    margin: 0 auto;
    position: relative;
  }
  #filter-panel-inner .category label,
  #filter-panel-inner .category-heading label {
    padding: 0px;
    margin-bottom: 0;

  }
  #filter-panel-inner .filter-jurisdiction-main .category label {
    margin-left: 8px;
  }


  #filter-selection-stratifiers {
    margin-bottom: 120px;
  }

  #filter-jurisdiction .category span {
    margin-right: 10px;
  }



  /*#filter-jurisdiction {
    column-count: 3;
  }
  #filter-state, #filter-national {
    column-count: 4;
  }
  */
  #filter-modal {
    transition: 0.3s !important;
  }
  #filter-jurisdiction, #filter-state, #filter-national {
    /*column-count: 4;	*/
    display: none;
  }
  #filter-state, #filter-national {
    /*#filter-state, #filter-national {*/

    column-count: 3;
  }

  #filter-modal .filter-national-stratifiers, #filter-modal .filter-state-stratifiers, #filter-modal .filter-jurisdiction-stratifiers {
    display:  flex;
    justify-content: space-between;
  }
  #filter-jurisdiction {
    column-count: 3;
  }

  #filter-jurisdiction .category {
    display: flex;
    align-items: center;
  }

  #filter-modal .category-block {
    padding-bottom: 20px;

  }
  #filter-jurisdiction .category-block, #filter-national .category-block {
    /*font-size: .85rem;*/
    break-inside: avoid;
  }

  #filter-modal .category-heading {
    font-weight: bold;
    border-bottom: 0.5px solid #dfe0df;
  }

  #filter-modal .category span {
    flex-shrink: 0;

  }

  #filter-modal .category span, #filter-modal .category-heading span {
    margin-left: 5px;
  }

  #download-panel-inner {
    max-width:  var(--max-width);
    margin: 0 auto;
    position: relative;
  }

  #download-panel {
    padding: 0 40px;
    /*width: 100%*/
  }

  #download-button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 30px 0;
  }

  #filter-modal, #download-modal {
    position: absolute;
    /*width: 100%;*/
    background-color: #f8fafddd;
    top: 50%;

    /*font-family: Arial, Helvetica, sans-serif;*/

  }


  #filter-panel-inner .center-button, #download-panel-inner .center-button {
    position: static;
    /*width: 90%;*/
    margin: 0 auto;
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  #filter-panel-inner .center-button .side, #download-panel-inner .center-button .side  {
    flex: 1;
    position: relative;
  }

  #filter-panel-inner .center-button .side:before,  #download-panel-inner .center-button .side:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-top: 0.5px solid #dfe0df;
    background: black;
    width: 100%;
    transform: translateY(-50%);
  }

  #main-container .center-button .center, .button {
    text-align: right;
    /*z-index: 2;*/
    transition: 0.1s;
    cursor: pointer;
    /*font-family: Arial, Helvetica, sans-serif;*/
    text-transform: uppercase;
    user-select: none;
    border: 2px solid var(--ahead-gray);
    border-radius: 20px;
    padding: 5px 20px;
    margin: 0px 20px;
    background-color: white;
  }



  #main-container .inner-center-button {
    position: static;
    /*width: 90%;*/
    margin: 0 auto;
    display: flex;
    flex: 1;
    position: relative;
  }

  #main-container .center-button .right {
    text-align: right;
    /*z-index: 2;*/
    transition: 0.1s;
    cursor: pointer;
    /*font-family: Arial, Helvetica, sans-serif;*/
    text-transform: uppercase;
    user-select: none;
    border: 2px solid var(--ahead-gray);
    border-radius: 20px;
    padding: 5px 20px;
    margin: 0px 0px 0px 20px;
    background-color: white;
  }

  #main-container .center-button img {
    margin-right: 5px;
    display: none;
    fill: white;
  }


  #main-container .center-button .center:hover:not(.active), #main-container .button:hover:not(.active), #main-container .right:hover:not(.active){
    background-color: #eee;
  }

  #main-container .center-button .center.active, #main-container .button.active, #main-container .right.active {
    color: white;
    background-color: #1751a2;
    border: 2px solid #1751a2;
  }

  #main-container .center-button .right:hover:not(.active),  #main-container .button:hover:not(.active){
    background-color: #eee;
  }

  #main-container .center-button .right.active {
    color: white;
    background-color: #1751a2;
    border: 2px solid #1751a2;
  }


  #filter-list .heading-with-line {
    padding: 10 30px;
  }

  #filter-list .heading-with-line-inner {
    /*width: 100%;*/
    /*margin: 0 auto;*/
    max-width:  var(--max-width);
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: bold;
    font-size: 18pt;
  }

  #filter-list .heading-with-line .heading {
    margin-right: 20px;
    /*font-family: Arial, Helvetica, sans-serif;*/
    text-transform: uppercase;
    user-select: none;
  }

  #filter-list .filter-card-heading {
    margin-right: 20px;
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-size: 16px;
    user-select: none;
  }

  #filter-list .heading-with-line .line {
    flex: 1;
    position: relative;
  }
  #filter-list .heading-with-line .line:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-top: 0.5px solid #dfe0df;
    background: black;
    width: 100%;
    transform: translateY(-50%);
  }

  #chart-outer table {
    max-width:  var(--max-width);
    margin: 0 auto;
    table-layout: unset;
  }


  #chart {
    /*z-index: -1;*/
    max-width: 1645px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /*max-width:  var(--max-width);*/
    /*margin: 0 auto;*/
  }

  #projection-chart {
    flex: 3 1 0;
    /*width: 100%;*/
    /*width: 75%;*/
    /*max-width:  var(--max-width);*/
    /*margin: 0 auto;*/

    /*height: 435px;*/
    padding-right: 10px;
    /*box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.31);*/
  }

  #slope-chart {
    flex: 1 1 0;
    /*width: 25%;*/
    /*height: 435px;*/
    /*box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.31);*/
    cursor: pointer;
  }
  #slope-chart .subtitle{
    padding-left: 10px;
  }

  #chart .subtitle {
    font-size: 18px;
    color: #212529;
  }
  /* for treemap function */
  /*#slope-chart .subtitle:hover {
    color: #1a756b;
    text-decoration: underline;
  }*/

  #chart-placeholder {
    font-size: 3rem;
    color: #999;
    /*font-family: Arial, Helvetica, sans-serif;*/
    text-transform: uppercase;
  }

  #chart-outer {
    padding: 0 40px;
  }

  #filter-list {
    padding: 40px;

  }
  #filter-list-inner {
    max-width:  var(--max-width);
    margin: 0 auto;
    padding:  0px 30px;
  }

  #filter-card-container {
    border: 3px solid var(--ahead-mid-gray);
    max-width:  var(--max-width);
    margin: 0 auto;
  }

  #filter-list .filter-container::-webkit-scrollbar {
    width: 10px;
    background-color: var(--ahead-gray)
  }

  #filter-list .filter-container::-webkit-scrollbar-thumb {
    background: #1751a2;
  }
  #footnote-panel {
    /*padding: 20px;*/
    /*font-family: Arial, Helvetica, sans-serif;*/
    padding-top: 20px !important;
    padding-bottom: 20px !important;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footnote-panel-inner {
    display: none;
    background-color: #f9fafa;
    max-width:  var(--max-width);
    margin: 0 auto;

    padding: 20px;
    font-size: 0.75rem;
    font-style: italic;
    /*width: 90%;*/
  }

  #footer1 {
    background-color: #99d3d2;
    border-bottom: 4px solid #1a52a3;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footer2 {
    color: #1a52a3;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footer3 {
    color: white;
    background-color: #1a52a3;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footer1-inner, #footer2-inner, #footer3-inner {
    width: 90%;
  }

  #filter-modal .similar-data-button {
    color: #229a8c;
    display: none;
    cursor: pointer;
  }
  #filter-modal .similar-data-button.active {
    display: inline;
  }

  #filter-modal .similar-data-button:hover {
    color: #1a756b;
  }

  #filter-list .fv-category {
    margin: 10px;
  }

  #chart {
    /*position: relative;*/
  }

  #chart .no-data-warning {
    width: 100%;
    height: 400px;
    /*position: absolute;*/
    /*backdrop-filter: blur(2px);*/
    /*-webkit-backdrop-filter: blur(4px);*/
    /*background-color: #ccc;*/

    background-color: #ffffff;
    /*background-image: url("https://www.transparenttextures.com/patterns/az-subtle.png");*/
    background-image: url('/themes/custom/hhsehe_theme/images/az-subtle.png');

    display: none;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    align-items: center;
  }

  .svg-icon {
    display: inline-flex;

  }
  #desc-panel .arrow-icon {
    vertical-align: middle;
  }


  /* Explorable explanations */
  #main-container .explanation-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }



  #main-container .explanation {
    max-width:  var(--max-width);
    width: 100%;
    margin: 0 auto;

    display: none;
    cursor: default;
  }

  #main-container .explanation h2 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 8px;
  }

  #main-container .helper-text {
    position: absolute;
    font-size: 0.8rem;
    color: #333;
    opacity: 0;
  }

  #main-container .explanation-text {
    border-radius: 10px;
    display: none;
    width: 75%;
    flex-shrink: 0;
    background-color: hsl(var(--hue), var(--sat), 97%);
    margin-top: 20px;
    padding: 20px;
    position: relative;
  }

  #main-container .explanation-text p {
    margin: 0 0 16px 45px;
  }

  #main-container .explanation-text i {
    /*vertical-align: super;*/
    font-size: smaller;
    /*font-size: 0.8rem;*/
    color: #afabab;
  }

  #main-container .explanation-circle {
    color: #aaa;
    border: 3px solid #aaa;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    line-height: 25px;
  }

  #main-container .explanation-instr {
    color: #aaa;
    margin-bottom: 20px;
    font-style: italic;
    font-size: 1rem
  }

  #main-container .explore.continuous {
    user-select: none;
    cursor: col-resize;
    /*color: #58f;*/
    border-bottom: 1px dashed;
    /*border-bottom: 1px dashed #58f;*/
  }

  #main-container .explore.output {
    /*color: #c47b26;*/
    color: hsl(var(--hue), var(--sat), 20%);
    font-weight: bold;
  }

  #main-container .explore.error {
    color: red !important;
    border-bottom: 1px dashed red !important;
    font-weight: bold;
  }

  .aux-text {
    font-size: 0.8rem;
    color: red;
    opacity: 0;
    padding: 10px;
  }

  .ui-effects-wrapper {
    display: inline;
  }

  #main-container .treemap-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  }

  #main-container .treemap-modal-backdrop.active {
    display: block;
    background: none;
    /*background-color: red;*/
  }

  #filter-list .strat-card-sort-item {
    background: white;
    color: black;
    border: 2px solid var(--ahead-gray);
    border-radius: 20px;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
    transition: 0.1s;
    margin: 0 5px;
    font-size: 16px;
  }

  #filter-list .strat-card-sort-item:hover {
    background: var(--ahead-hover-gray);
    color: black;
    border: 2px solid;
    border-radius: 20px;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
    transition: 0.1s;
    margin: 0 5px;
    font-size: 16px;

  }



  #filter-list .strat-card-sort-text {
    margin-right: 5px;
    font-size: 16px;

  }

  #filter-list .strat-card-sort-item.active {
    cursor: pointer;
    background: var(--ahead-blue);
    color: white;

  }

  .purple { --hue: 297; --sat: 46%; --light: 40%; } 	/* Incidence */
  .darkblue {--hue: 220; --sat: 74%; --light: 51%; } 	/* Diagnoses */
  .lightblue {--hue: 206; --sat: 60%; --light: 56%; } /* Knowledge of status */
  .yellow {--hue: 40; --sat: 90%; --light: 57%; } 	/* Linkage to care */
  .red {--hue: 4; --sat: 73%; --light: 53%; } 		/* Viral suppression */
  .teal {--hue: 174; --sat: 70%; --light: 36%; } 		/* PrEP coverage */

  /*.html2canvas-container { width: 3000px !important; height: 3000px !important; }*/

  .treemap-modal{
    display: none;/* Hidden by default */
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 996;
  }

  .treemap-close {
    position: sticky;
    top: 0px;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition:all 0.5s;
  }

  .treemap-close:hover {
    color: #c51111;
    text-decoration: none;
    cursor: pointer;
  }

  .treemap-bg-modal{
    position: absolute;
    z-index: 998; /* Sit on top */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    top: 0;
    right: 0;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  .treemap-modal-content{
    z-index:999;
    padding: 20px;
    background-color: #fff;
    box-shadow: 2px 2px 4px 0px #a7a7a79e;
    position: relative;
    margin: 30px auto;
    border-radius: 5px;
  }

  .treemap-modal-head {
    margin-left: -20px;
    padding-left: 20px;
    margin-right: -20px;
    padding-right: 20px;
    border-bottom: 2px solid #919191;
    padding-bottom: 10px;
  }

  .treemap-modal-title {
    display:flex;
    justify-content: space-between;
  }

  .treemap-modal-subtitle {
    font-size: 14px;
  }