/*

STATION PLOT CSS

*/


/* properties for TEC strokes*/
path.tecPlotG { stroke:#4682B4 ; stroke-width: 1.5px;stroke-opacity: 0.6; stroke-linejoin: "round"; stroke-linecap: "round"; fill: none;}
path.tecPlotR { stroke:#FF6347 ; stroke-width: 1.5px;stroke-opacity: 0.6; stroke-linejoin: "round"; stroke-linecap: "round"; fill: none;}
path.tecPlotE { stroke:#00FF00 ; stroke-width: 1.5px;stroke-opacity: 0.6; stroke-linejoin: "round"; stroke-linecap: "round"; fill: none;}
path.tecPlotC { stroke:#DDA0DD ; stroke-width: 1.5px;stroke-opacity: 0.6; stroke-linejoin: "round"; stroke-linecap: "round"; fill: none;}


/* properties for  selection sidebar*/

#selectionContainer {
    width: 15%;
    border: 0.5px solid black;
    height: 460px;
    overflow-y: scroll;
    border-radius: 5px;
}

/* Updates selectionContainer width/height in mobile and tablet view */
@media only screen and (max-width: 1024px) {
  #selectionContainer {
    width: 100%;
    height: 150px;
  }
}

/* Don't show a scrollbar for the selection sidebar
::-webkit-scrollbar {
  display: none;
}*/

/* properties for  showing specific earthquake info*/
#earthquakeInfo {
  font-family: "Metropolis", "Archivo Narrow", "Helvetica Neue", "Arial";
  position: relative;
  text-align: center;
  color: #000;
  width: 80%;
  left: 10%;
}


#timeInfo {
  font-family: "Metropolis", "Archivo Narrow", "Helvetica Neue", "Arial";
  position: relative;
  text-align: center;
  color: #000;
  width: 80%;
  left: 10%;
}



/* Icon for  showing specific earthquake info*/
#selectionContainer> .flex-row > .quakeInfo >.img{
  height:16px;
  width:16px;
}

/* Styling for each row in the selection sidebar*/
#selectionContainer .flex-row {
  border-bottom: 1px solid red;
  cursor: pointer;
}

/* Icon styling for each row in the selection sidebar*/
#selectionContainer .flex-row> .stationInfo >.img{
  height: 16px;
  width: 16px;
}


/* Text styling for each row in the selection sidebar*/
#selectionContainer .flex-row> div > .text{
  margin-left: 8px;
}

/* Text styling for individual station windows*/

/* @media only screen and (max-width: 576px) {
    .stationPlot {
        width: 100%;
        border-style:solid;


    }
}

@media only screen and (min-width: 768px) {
    .stationPlot {
        width: 49%;
        border-style:solid;
        border-radius:5px;

    }

    .closeButton {
      width: 5%;
      height: 5%;
      float:left;
    }

    .stnPlotTitle{
      width: 50%;
      position: relative;
      left:25%;

    }

    .stnPlotTitle text{
      font-weight: 600;

    }

    .loadingText{
      left:30%;
      position: relative;
      top:25%;
    }

    .loadingText text{
      font-weight: 600;
      color: blue;
    }

    .checkBoxGroupDiv{
      width:90%;
      position: relative;
      left:5%;
      top:10%;
    }

    .checkboxAndSatLabelDiv{
      width:30%;
    }

    .checkboxDiv{
      width:5%;
      float:left;
    }

    .checkboxDiv > .checkButton{
      width:100%;
    }

    .checkboxSatLabelDiv{
      width: 75%;
      left:10%;

    }

    .useMessageDiv{
      width: 80%;
      position: relative;
      left:10%;
      text-align: justify;
    }

    .tecPlotDiv{
      width:95%;
    }

    .resetButtonDiv{
      width: 20%;
      height: 6%;
      position: relative;
      left:40%;
    }
    .resetButtonDiv button{
      width:100%;
      height: 100%;

    }
    .resetButtonDiv button text{
      font-size:24px;
    }

    .noDataDiv{
      width:60%;
      position:relative;
      left:30%
    }

    .noDataDiv text{
      color:red;
    }

} */

/* Adds border to station plot */
.stationPlot {
  border-style: solid;
  border-radius:5px;
  margin-top: 10px;
}

/* Changes station Plot desktop/tablet view to 49.5% width */
@media only screen and (min-width: 768px) {
  .stationPlot {
      width: 49.5%;
  }
}

/* Changes station Plot mobile view to 100% width */
@media only screen and (max-width: 576px) {
  .stationPlot {
      width: 100%;
  }
}

/* Stylizes Station Plot Title */
.stationPlot .stnPlotTitle{
  font-family: "Metropolis", "Archivo Narrow", "Helvetica Neue", "Arial";
  font-weight: 600;
  color: black;
  font-size: 2rem;
  text-anchor: middle;
}

#stationDataVisualization>g text {
  font-size: 0.75rem;
}

 /* Desktop font size for svg text  */
@media (min-width: 1200px) {
  #stationDataVisualization>svg text {
      font-size: 2rem;
  }
}
.tecPlotDiv>svg {
  width:100%;
}
/* Fill for cycle slip points*/
.tecPlotDiv>svg .cycleSlipPoints{
  fill:red;
  }

/*Fill for TEC points*/
.tecPlotDiv>svg .tecPointsG{
    fill:#4682B4;
    opacity: 0.6;
}

.tecPlotDiv>svg .tecPointsR{
    fill:#FF6347;
    opacity: 0.6;
}

.tecPlotDiv>svg .tecPointsE{
    fill:#00FF00;
    opacity: 0.6;
}

.tecPlotDiv>svg .tecPointsC{
    fill:#DDA0DD;
    opacity: 0.6;
}

.tecPlotDiv>svg .axis{
  font-family: "Metropolis", "Archivo Narrow", "Helvetica Neue", "Arial";
  font-size:14px;
}

.tecPlotDiv .axis>.tick text{
  font-family: "Metropolis", "Archivo Narrow", "Helvetica Neue", "Arial";

}
#timeAxis>.tick:nth-child(2n) text {
    visibility: hidden;
}
#stecAxis>.tick:nth-child(2n+1) text {
    visibility: hidden;
}
.tecPlotDiv .axisLabel{
  font-family: "Metropolis", "Archivo Narrow", "Helvetica Neue", "Arial";
  text-anchor:middle;
  font-size:14px;
}

.bk-Tooltip{
  font-size:18px;
}

/* styling of tabs */
.bk-Tabs{
  width:100%;

}

.bk-Tabs{
  font-weight: bold;
}

.hodoTitleDiv{
  padding-left: 0;
}

.hodoTitle{
  font-weight: bold;
}

.hodoInputText{
  width: 85%;
  padding-right:0;
}

.hodoErrorDiv{
  background-color: #FFF;
  display: none; /* Initially hidden */
  color: #F00;
}

.hodoErrorText{
  font-size: 16px;
}
/* Active links display */

#activeLinks{
  font-family: "Metropolis", "Archivo Narrow", "Helvetica Neue", "Arial";
  width:80%;
  position: relative;
  color: #000;
  width: 80%;
  left: 10%;


}

#activeLinks > #activeLinksTitleDiv{
  width:80%;
  position: relative;
  text-align: center;
  color: #000;
  left: 10%;
}

#activeLinks > #activeLinksTitleDiv > #activeLinksTitle{
  font-weight: bold;
  font-size: 1.5vw;
}

#activeLinks > #activeLinksTitleDiv{
  width:80%;
  position: relative;
  text-align: center;
  color: #000;
  left: 10%;
}


#activeLinks > #activeLinksDescriptionDiv{
  width:80%;
  position: relative;
  text-align: left;
  color: #000;
  left: 10%;
  margin-bottom: 10px;
}

#activeLinks > #activeStationsListDiv{
  width:100%;
  position: relative;
  color: #000;
  left: 10%;
  margin-bottom: 5%;
}

#activeLinks > #activeStationsListDiv > .activeStationDiv{
  width:78%;
  position: relative;
  color: #000;
  float:left;
  text-align: left;
  left:0%;
  background-color:rgba(0,255,255,0.1);
  border:0.5px solid black;
  border-radius: 5px;
}
.activeStationDiv > .img{
  margin-left: 1%;
}
.activeStationDiv > .activeSatsDiv{
  width:80%;
  position: relative;
  color: #000;
  left: 0%;
  overflow-wrap: break-word;
  text-align: left;
  margin-bottom: 10px;
  margin-left: 1%;

}

.activeLinksHeaderText{
  font-weight: bold;
}

#activeLinks > div#activeLinksError{
  color:red;
  text-align:center;
}

img#activeStationIcon{
  width:12px;
}

.hodoReftimeTextDiv{
  width:50%;
}

.hodoInputText{
  box-sizing: content-box;
  width: 80%;
}


.bk-Tabs{
  font-size: 20px
}

.activeLinksPlotButton{
  font-weight: bold;
  text-decoration: underline;
}


/*--- below this point is old css for non-responsive station popups
Delete after tests are over ---*/

/* Styling for individual station windows*/

#stationDataVisualization>svg rect{
  fill:none;
  stroke:black;
  stroke-width:0.5px;

}

#stationDataVisualization>svg .stnPlotTitle{
  font-family: "Metropolis", "Archivo Narrow", "Helvetica Neue", "Arial";
  color: black;
  font-size: 30px;
  text-anchor: middle;
}

/* Checkbox label styling if link is active */
#stationDataVisualization>.stationPlot>.checkBoxGroupDiv>.checkboxAndSatLabelDiv>.checkboxSatLabelDiv>text[id*="active"]{
  color: green;
  font-weight: bold
}

/* Fill for cycle slip points*/


#stationDataVisualization>svg .cycleSlipPoints{
  fill:red;
  }

/*Fill for TEC points*/
#stationDataVisualization>svg .tecPointsG{
    fill:#4682B4;
    opacity: 0.6;
}

#stationDataVisualization>svg .tecPointsR{
    fill:#FF6347;
    opacity: 0.6;
}

#stationDataVisualization>svg .tecPointsE{
    fill:#00FF00;
    opacity: 0.6;
}

#stationDataVisualization>svg .tecPointsC{
    fill:#DDA0DD;
    opacity: 0.6;
}

#stationDataVisualization>svg>foreignObject .checkButton{
  width:100%;
  height:100%;

}