body { 
    margin: 0; 
    padding: 0; 
  }
  #map { 
    position: fixed; 
    top:48px;
    width: 100%;
    height: 94%; 
    }
  #butone {
    position: absolute;
    color: black;
    top: 100px;
    right: 70px;
    z-index: 999;
  }
  div.mapboxgl-popup-content{
    text-align:left;
  }
  .mapboxgl-popup {
    max-width: 500px;
    color: black;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  }
  #info {
    display: block;
    position: absolute;
    margin: 0px auto;
    bottom: 26px;
    right: 5px;
    width: 250px;
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #333;
  }
  .marker {
    background-image: url('mapbox-icon.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    cursor: pointer;
  }
  .mapboxgl-popup {
    max-width: 200px;
  }
  .mapboxgl-popup-content {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
  }
  .rounded-rect {
    background: white;
    border-radius: 5px;
    /*box-shadow: 0 0 50px -25px black;*/
  }
  .flex-center {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flex-center.left {
    left: 0px;
  }
  .flex-center.right {
    right: 0px;
  }
  .sidebar-content {
    position: absolute;
    left: 5px;
    width: 95%;
    height: 98%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 38px;
    color: gray;
    /*background-color:#1E1E1E;*/
    background: rgba(30,30,30,0.95); 
  }
  .rightsidebar-content {
    position: absolute;
    right: 5px;
    width: 95%;
    height: 98%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 38px;
    color: gray;
    /*background-color:#1E1E1E;*/
    background: rgba(30,30,30,0.95); 
  }
  .sidbear-toggle {
    position: absolute;
    width: 70px;
    height: 2.3em;
    overflow: visible;
    display: flex;
    /*display: none;*/
    background-color:#1E1E1E;
    justify-content: center;
    align-items: center;
  }
  .sidbear-toggle.left {
    /*right: -2.5em;*/
    right: -60px;
    /*width:100px;*/
    font-size:16px;
    transform: rotateZ(90deg);
  }
  .sidbear-toggle:hover {
    color: #0aa1cf;
    cursor: pointer;
  }
  .sidebar {
    transition: transform 1s;
    z-index: 999;
    width: 310px;
    height: 100%;
  }
  .rightsidebar {
    transition: transform 1s;
    z-index: 999;
    /*width:90vw;*/
    width: calc(100vw - 310px);
    height: 100%;
  }

  #dright {
    position:absolute;
    right:10px;
    top:10px;
    z-index: 999;
    /*width:90vw;*/
    width: calc(100vw - 335px);
    background: rgba(30,30,30,0.95);
    height: 88vh;
  }

   #dleft {
    position:absolute;
    left:10px;
    top:10px;
    z-index: 999;
    /*width:90vw;*/
    width: 300px;
    background: rgba(30,30,30,0.95);
    height: 88vh;
  }

  /* dthree stuff */
  .line {
    fill: none;
    stroke: #ffab00;
    stroke-width: 3;
  }
  .line2 {
    fill: none;
    stroke: #55aaff;
    stroke-width: 3;
  }
  .yaxis line{
    stroke: #fff;
  }
  .yaxis path{
    stroke: #fff;
  }
  .yaxis text{
    fill: #fff;
  } 
  .xaxis line{
    stroke: #fff;
  }
  .xaxis path{
    stroke: #fff;
  }
  .xaxis text{
    fill: #fff;
  } 
  .textRed{
    font-family: Arial, Helvetica, sans-serif;
    fill: #fff;
  }
  .textfoo{
    font-family: Arial, Helvetica, sans-serif;
    fill: #fff;
  }
  .overlay {
    fill: none;
    pointer-events: all;
  }
  /* Style the dots by assigning a fill and stroke */
 

   .textRed{
    font-family: Arial, Helvetica, sans-serif;
    fill: #fff;
  }
  .textBold{
    font-family: Arial, Helvetica, sans-serif;
    fill: #fff;
    font-weight: bold;
  }
  .textfoo{
    font-family: Arial, Helvetica, sans-serif;
    fill: #fff;
  }
  .overlay {
    fill: none;
    pointer-events: all;
  }
  /* Style the dots by assigning a fill and stroke */
   .dot {
      fill: #ffab00;
      stroke: #1E1E1E;
  }
  .dot2 {
      fill: #55aaff;
      stroke: #1E1E1E;

  }
  .dot1 {
      fill: #ffab00;
      stroke: #1E1E1E;
  }
  .txtblue{
    fill: #55aaff;
  }
  .txtorange{
    fill: #ffab00;
  }
  .focus circle {
  fill: none;
  stroke: steelblue;
  }
  .tick line {
      stroke-dasharray: 2 2 ;
      stroke: #FFF;
  }

    .axisblue line{
    stroke: #55aaff;
  }
  .axisblue path{
    stroke: #55aaff;
  }
  .axisblue text{
    fill: #55aaff;
  }
  .axisorange line{
    stroke: #ffab00;
  }
  .axisorange path{
    stroke: #ffab00;
  }
  .axisorange text{
    fill: #ffab00;
  }
/*
The sidebar styling has them "expanded" by default, we use CSS transforms to push them offscreen
The toggleSidebar() function removes this class from the element in order to expand it.
*/
  .left.collapsed {
    transform: translateX(-445px);
  }
  #container { 
    /*margin:100px auto;*/
    width: 95%;
    height: 95%;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color:#1E1E1E;
    overflow: auto;
  }
  #container1 {
    height: 85%;
    width: 100%;
    top:60px;
    /*border: 1px solid green;*/
    /*overflow: hidden;*/
    overflow-y: overlay;
    position: relative;
    background: rgba(30,30,30,0); 
  }
  #container2 {
    position: absolute;
    color:#fff;
    width: 83%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color:#1E1E1E;
    padding-left: 15px;
    padding-right: 25px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: -15px;
    /*border: 1px solid blue;*/
    overflow-x: hidden;
    background: rgba(30,30,30,0); 
  }

  #container3 {
    height: 85%;
    width: 100%;
    top:60px;
    /*border: 1px solid green;*/
    /*overflow: hidden;*/
   /* overflow-y: scroll;*/
    overflow-y: overlay;
    overflow-x: hidden;
    position: relative;
    background: rgba(30,30,30,0); 
  }
  #container4 {
    position: absolute;
    color:#fff;
    width: 95%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color:#1E1E1E;
    padding-left: 15px;
    padding-right: 25px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: -15px;
    /*border: 1px solid blue;*/
    /*overflow: auto;  */
    overflow-x: hidden;
    

    background: rgba(30,30,30,0); 
  }

  #sdetails{
    width:320px;
    padding-left:10px;
    padding-right:10px;
  }

  #plot{ 
    position:absolute;
    border-radius: 10px;
    /*padding:10px;*/
    bottom:35px;
    right:20px;
    width: 700px;
    height: 400px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color:#1E1E1E;
    /*opacity: 0.9;*/
    z-index: 999;
  }

  #closeplot{ 
    position:relative;
    cursor: pointer;
    top:6px;
    left:680px;
    width:5px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    background-color:#1E1E1E;
  }

   #closeright{ 
    position:absolute;
    cursor: pointer;
    top:6px;
    right:20px;
    width:5px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    background-color:#1E1E1E;
  }

  #plotattrib{ 
    position:relative;
    top:-10px;
    left:100px;
    width:460px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color:#1E1E1E;
  }
  #dotres{ 
    position:relative;
    top:-10px;
    left:100px;
    width:460px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color:#1E1E1E;
  }

  #plotB{ 
    position:absolute;
    border-radius: 10px;
    /*padding:10px;*/
    bottom:35px;
    right:20px;
    width: 700px;
    height: 400px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color:#1E1E1E;
    /*opacity: 0.9;*/
    z-index: 999;
  }
  #closeplotB{ 
    position:relative;
    cursor: pointer;
    top:6px;
    left:680px;
    width:5px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    background-color:#1E1E1E;
  }

  #plotattribB{ 
    position:relative;
    top:-10px;
    left:100px;
    width:460px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color:#1E1E1E;
  }
  #dotresB{ 
    position:relative;
    top:-10px;
    left:100px;
    width:460px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color:#1E1E1E;
  }
  .button {
    background-color: #009cd1; /* Blue */
    border: none;
    border-radius: 8px;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    opacity: 1;
  }
  #butt{
    position:absolute;
    top:80px;
    right:100px;
    z-index: 999;
  }
  #butt2{
    position:absolute;
    top:110px;
    right:100px;
    z-index: 999;
  }
  #butt3{
    position:absolute;
    top:140px;
    right:100px;
    z-index: 999;
  }
   #butt4{
    position:absolute;
    top:170px;
    right:100px;
    z-index: 999;
  }
    #butt5{
    position:absolute;
    top:100px;
    right:100px;
    z-index: 999;
  }
  .sk-cube-grid {
    position:absolute;
    top:35%;
    left:45%;
    width: 40px;
    height: 40px;
    margin: 100px auto;
    z-index: 999;
  }

  .sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #fff;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
            animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
  }
  .sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s; }
  .sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
            animation-delay: 0s; }
  .sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }

  @-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
      -webkit-transform: scale3D(1, 1, 1);
              transform: scale3D(1, 1, 1);
    } 35% {
      -webkit-transform: scale3D(0, 0, 1);
              transform: scale3D(0, 0, 1); 
    }
  }

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  padding-left: 8px;
  padding-right: 8px;
}

.wrapper2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  padding-left: 8px;
  padding-right: 28px;
}

.rankwrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  grid-column-gap: 10px;
  padding-left: 8px;
}

.gpie {
  /*width: 200px;*/
  height:280px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom:20px;
 /* border-style: solid;
  border-color: #ffabff;*/
}
.gpie1 {
  
  height:280px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom:20px;
/*  border-style: solid;
  border-color: #ffab00;*/
}
.frank {
  padding:10px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
/*  border-style: solid;
  border-color: #ffab00;*/
}

.rlow {
  /*background-color: green;*/
  background: rgba(0,255,0,0.3); 
}
.rmed {
  /*background-color: orange;*/
  background: rgba(255,165,0,0.3); 
}
.rhigh {
  /*background-color: red;*/
  background: rgba(255,0,0,0.3); 
}
.rhead {
  border-style: solid;
  border-width: thin;
  border-color: #fff;
  background: rgba(30,30,30,0.3); 
}
.brmedium { 
  display: block; 
  margin-bottom: 0.5em; 
} 
.brnorm { 
  display: block; 
  margin-bottom: 1em; 
} 
.smalltext {
  font-size: 14px;
}
/*::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}
*/