.mainBody{
    display:grid;
    grid-template-columns: 300px auto;
    grid-template-rows:auto 50px;
}

.legendlines {
    display: none;
}

.mapView {
    padding: 0;
    margin: 0;
    margin-right: auto;
    height: 600px;
    width: 100%
}

.floatLeft {
    float: left;
}

.loader {
}

.esri-popup__footer--has-actions {
    display: none !important;
}

.esri-popup{
    width:180px;
}

.plotlyjsicon {
    display: none !important;
}

.graphLoader {
    top:150px;
    right:150px;
}

.GraphContainer {
    display: grid;
    grid-template-rows: 0fr;
    grid-template-columns: 16px 16px auto;
    position:relative;
}

.GraphContainer:nth-child(n+2){
    margin-top:-80px;
}

.precip_graphs:nth-child(n+2) {
    margin-top:-50px;
}

.rotateText {
    writing-mode: vertical-rl;
    text-align: center;
    transform: rotate(180deg);
    padding-right: 8px;
}

.graphLabel {
    margin:auto;
}

.graphs {

}

.labels{
    margin-top:0px !important;
    position:relative;
    z-index:10;
}

.labelDiv{
    margin:auto;
}

.axisSpan{
    display:inline-block;
    transform:rotate(45deg);
}

.moreInfo {
    display: inline-block;
    position: relative;
    z-index: 100;
    bottom: 173px;
    float:right;
    margin-right:75px;
    cursor: pointer;
    border: 1px solid;
    border-radius: 30px;
    width: 36px;
    text-align: center;
    background-color: #1d5aab;
    color: white;
}

#xAxisLabel .draglayer, #xAxisLabel .gridlayer, #xAxisLabel .plot, #xAxisLabel .zerolinelayer { display: none; }

.main-svg { background:none !important; }

.modalWindow {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    bottom: 144px;
    float:right;
    background-color:white;
    position: relative;
}

.modalWindow2 {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    left: 30px;
    position: relative;
    float:right;
}

.modalContent {
    transform: translate(-50%, -50%);
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
.close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}

.close-button:hover{
    background-color:darkgray;
}

.showModal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.75s 0s, transform 0.25s;
}

.whiteBackground{
    background-color:white;
    width:315px;
}

.nsewdrag {
    stroke: black;
    stroke-width: 1.4px !important;
    stroke-opacity: 1;
}

.xgrid.crisp {
    stroke: black !important;
    opacity: 0.4 !important;
}

.ygrid.crisp {
    stroke: black !important;
    opacity: 0.5 !important;
}

.tinyMargins {
    margin-top: 0px;
    margin-bottom: 4px;
}

.withdrawClass {
    background-color: #ff7f0e;
    min-width: 8px;
    min-height: 8px;
    border: 0.5px solid;
    display: inline-block;
}

.averageWithdraw {
    background-color: red;
    min-width: 8px;
    min-height: 2px;
    display: inline-block;
}

.supplyClass {
    background-color: #1f77b4;
    min-width: 8px;
    min-height: 8px;
    border: 0.5px solid;
    display: inline-block;
}

.averageSupply {
    background-color: green;
    min-width: 8px;
    min-height: 2px;
    display: inline-block;
}

.smallFont {
    font-size: 10px;
    bottom: 155px !important;
}

.bigFont {
    font-size:18px;
}

.svg-container > .main-svg:nth-child(n+2) {
    height: 222px !important;
}

.svg-container > .main-svg:first-child {
    top: -20px !important;
}

.modebar-container {
    display: none !important;
}

.GraphContainer:last-child {
    position: relative;
    z-index: -200;
    height: 60px;
    bottom: 110px;
}

.GraphContainer:nth-child(n+2) {
    margin-top: -60px;
    margin-bottom: 13px;
}

.mainBody {
    min-height: 700px;
}

.svg-container {
    height: 225px !important;
}

g.fills {
    display: none;
}

.gtitle {
    font-size: 20px !important;
}

.historyElement {
    height: 2.5em;
}

.topMargin{
    margin-top:8px;
}

.greenDot{
    border-radius:50%;
    background-color:#35b439;
    width:14px;
    height:13px;
    display:inline-block;
}

.chartText {
    width:810px;
    margin:auto;
    position: relative;
    top: -75px;
}