* {
text-align: center;
font-family: sans-serif;
}

#galum-avg{
  direction: ltr;
}

#chart {
  height: 400px;
}
.charts-avg-container{
  display: flex;
  flex-direction: row;
}

.hide{
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

#yellow1:hover .hide,
#yellow2:hover .hide,
#yellow3:hover .hide,
#yellow4:hover .hide{
  visibility: visible;
  opacity: 1;
  border: 1px solid #e9c415;
  border-radius: 5px;
  position: absolute;
  transform: translateY(-170%);
  color: #000;
  padding:5px;
  font-size:14px;
}

#red1:hover .hide,
#red2:hover .hide,
#red3:hover .hide,
#red4:hover .hide{
  visibility: visible;
  opacity: 1;
  border: 1px solid #b92d2e;
  border-radius: 5px;
  position: absolute;
  transform: translateY(-170%);
  color: #000;
  padding:5px;
  font-size:14px;
}
#green1:hover .hide,
#green2:hover .hide,
#green3:hover .hide,
#green4:hover .hide{
  visibility: visible;
  opacity: 1;
  border: 1px solid #18cf55;
  border-radius: 5px;
  position: absolute;
  transform: translateY(-170%);
  color: #000;
  padding:5px;
  font-size:14px;
}

  #center:hover .hide,
  #center2:hover .hide{
  visibility: visible;
  opacity: 1;
  border: 1px solid #147704;
  border-radius: 5px;
  position: absolute;
  transform: translateY(-170%);
  color: #000;
  padding:5px;
  font-size:14px;
}


canvas{
  background-image: url('/wp-content/uploads/2023/04/graph-bg.png');
  background-size: 80% 50%;
  background-position: center;
  background-repeat: no-repeat;
}
/* @media only screen and (orientation: portrait) { */
@media only screen and (max-width: 600px) {

    #chart {
      height: 205px;
      width: 360px;
    }
    .charts-avg-container{
      display: flex;
      flex-direction: column;
    }
}

#fullLine {
  display: flex;
}

.fullLine {
  width: 100%;
  display: flex;
  margin-top: 50px;
  direction: ltr;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

#shortLine {
  background-color: tomato;
}

#longLine {
  background-color: seagreen;
}

#shortLine, #longLine {
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 15px;
}

.partline, .partlinesqweez {
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 15px;
    height: 5px;
    transition: width 0.8s;
}

.partlinesqweez {
  width: 20%;
}
.partlinesqweez>span {
  position: relative;
  margin: auto -20px -40px auto;
}

#red1, #red2, #red3, #red4, #partline5 {
  background-color: #ff5050;
}
#partline4 {
  background-color: peru;
}
#yellow1, #yellow2, #yellow3, #yellow4, #partline3 {
  background-color: #ffff66;
}
#green1, #green2, #green3, #green4, #partline2 {
  background-color: #66cc99;
}
#center, #center2, #partline1 {
  background-color: #2d8659;
}

#galum, #galum2, #sqweez-rate {
  width: 5px;
  height: 35px;
  top: -35px;
  background-color: black;
  position: relative;
  transition: left 0.5s;
  left: -100%;
}
#span8, #span9 , #span17 {
  top: -16px;
  position: relative;
  left: 36px;
  background-color: black;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  padding: 5px 10px;
}
#span9 {
 margin-left: -25px;
}
h2 {
  margin: 0px;
}
.etf, .sq {
  margin-bottom: 100px;
}

.sqweez, .pos {
  margin-top: 100px;
}

/* @media only screen and (orientation: portrait) { */
@media only screen and (max-width: 600px) {

  .etf, .sq {
    margin-bottom: 50px;
  }

  .sqweez, .pos {
    margin-top: 50px;
  }
  .partline>span {
    font-size: 0.7em;
  }
}