/* longitudinal tab styling */

.time-tabs .nav-link.active {
  background-color: white !important;
  color: black !important;
  border-bottom-width: 5px !important;
}

.time-tabs .nav-link:hover {
  color: grey !important;
  border-bottom-width: 3px !important;
}

.time-tabs .nav-link:not(.active) {
  color: grey;
  background-color: #F4F3F2 !important;
}

@media(max-width: 576px){
  .time-tabs li h4{
    display: none;
}
}


.psych-tab.active {
  border-bottom-color: #e67baf !important;
}

.psych-tab:not(.active) {
  background-color: #fdf8fb !important;
}

.psych-tab:hover {
  background-color: #fdf8fb !important;
  border-bottom-color: #e67baf !important;
}

.sensory-tab.active {
  border-bottom-color: #A67F37 !important;
}


.sensory-tab:hover {
  background-color: #F6F2EB !important;
  border-bottom-color: #A67F37 !important;
}

.heart-tab.active {
  border-bottom-color: #e56448 !important;
  background-color: #fcefec !important;
}


.heart-tab:hover {
  background-color: #fcefec !important;
  border-bottom-color: #e56448 !important;
}

.muscle-tab.active {
  border-bottom-color: #9160A6 !important;
}

.muscle-tab:not(.active) {
  background-color: #f4eff6 !important;
}

.muscle-tab:hover {
  background-color: #f4eff6 !important;
  border-bottom-color: #9160A6 !important;
}

.balance-tab.active {
  border-bottom-color: #4B72A6 !important;
}

.balance-tab:not(.active) {
  background-color: #eff3f6 !important;
}

.balance-tab:hover {
  background-color: #eff3f6 !important;
  border-bottom-color: #4B72A6 !important;
}

.rounded-top {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-color: white !important;
  border-top-width: 2px !important;
  border-left-width: 2px !important;
  border-right-width: 2px !important;
}

.accordion-collapse {
  background-color: #f5f5f5
}

.tab-row {
  background-color: white;
  border-width: 3px !important;
}
/* HEADER STYLING */
#vizHeader{
    display: flex;
    align-items: center;
    text-decoration: none;
    justify-content: center;
}
#date{
    text-align: center;
    color:#232323
}
.form-select-lg {
    font-size: 1.25rem !important;
 }
h5{
  font-family: 'Gotham Black' !important;
}
/* for general visualizations */
.tab-pane{
    display: block !important;
    width:100% !important
}
/* bandaid fix to plotly fig rendering in an empty div which messes up dimensions */
.fade:not(.show) { 
    position: absolute;
    left: -9999px;
}

/* styling for scores text */
.score-title{
    overflow: hidden;
    text-align: start;
  }
h7{
    display: inline-block;
}

  @media (max-width: 811px) {
    .pointer .cogScores{
          font-size: 4cqw !important;
      }
      .pointer .heartScores{
          font-size: 4cqw !important;
      }
      .pointer .muscScores{
          font-size: 4cqw !important;
      }
      .pointer .balScores{
          font-size: 4cqw !important;
      }
      .pointer{
        max-width:70% !important
      }
      .indicator{
        max-width:50% !important
      }
      .test-box{
        align-items: center;
      }
  }
  @media (max-width: 576px) { 
      .pointer .cogScores{
          font-size: 8cqw !important;
      }
      .pointer .heartScores{
          font-size: 8cqw !important;
      }
      .pointer .muscScores{
          font-size: 8cqw !important;
      }
      .pointer .balScores{
          font-size: 8cqw !important;
      }
      .pointer{
        max-width:100% !important
      }
      .indicator{
        max-width:100% !important
      }
   }

  /* styling for scales and pointers */
  .test-box{
    display:flex; 
    justify-content: space-between; 
    flex-direction: column;
    text-align: center;
    max-height:300px
  }
  .test-box h4{
    overflow:visible
  }
  .indicator{
    justify-content: end;
    width:100%;
    height:10%
  }
  .indicator img{
    height:70%; 
    max-height:30px;
    float:right;
  }
  .scale{
    width:80%;
  }
  .bi-question-circle{
    color:grey
}
.pointer{
  display: inline-block;
  overflow:hidden;
  vertical-align: top;
}
.pointer div{
  position:relative;
  max-height:80px;
  top:-18%
}

.olderadult-page .cover-fit {
  object-fit: cover;
}

.olderadult-page .caption-top-70 {
  top: 70%;
}

.olderadult-page .w-80 {
  width: 80%;
}

.olderadult-page .bg-f4f9ff {
  background-color: #F4F9FF;
}

.olderadult-page .rounded-1 {
  border-radius: 1%;
}

.olderadult-page .moving-forward {
  color: #e06b2d;
}

.olderadult-page .card-highlight {
  box-shadow: inset 0 0 30px rgba(1, 84, 135, 0.1) !important;
}

.pointer img, .pointer div img{
  max-height:180px !important
}


/* this makes accordion tabs colored when triggered */
.psych-row{
  border-color:hsl(331, 68%, 69%, 0.5) !important;
}
.sensory-row{
  border-color:hsl(39, 50%, 43%, 0.5)  !important;
}
.heart-row{
  border-color:hsl(11, 75%, 59%, 0.5)  !important;
}
.muscle-row{
  border-color:hsl(282, 28%, 51%, 0.5)  !important;
}
.balance-row{
  border-color: hsl(214, 38%, 47%, 0.5) !important;
}

#psych:not(.collapsed){
  color:#e67baf;
  background-color: #fdf8fb;
  box-shadow: 0 0 .5rem rgb(230 123 175) !important
}
#psych:not(.collapsed) img {
  filter: brightness(.88) saturate(2);
}
#psych:focus, #psychCollapse:where(.show){
  box-shadow: 0 0 .5rem rgb(230 123 175) !important;
}

#sensory:not(.collapsed){
  color:#A67F37;
  background-color: #F6F2EB ;
  box-shadow: 0 0 .5rem hsl(39, 50%, 43%) !important
}
#sensory:not(.collapsed) img {
  filter: brightness(.88) saturate(2);
}
#sensory:focus, #sensoryCollapse:where(.show){
  box-shadow: 0 0 .5rem #A67F37 !important;
}

#heart:not(.collapsed){
  color:hsl(11, 75%, 59%);
  background-color: #fcefec;
}
#heart:not(.collapsed) img {
  filter: brightness(.88) saturate(2.5);
}
#heart:focus, #heartCollapse:where(.show){
  box-shadow: 0 0 .5rem rgb(229 100 72) !important;
}

#muscle:not(.collapsed){
  color:hsl(282, 28%, 51%);
  background-color: #f4eff6;
}
#muscle:not(.collapsed) img {
  filter: brightness(.88) saturate(2.5);
}
#muscle:focus, #muscleCollapse:where(.show){
  box-shadow: 0 0 .5rem rgb(145 96 166) !important;
}

#balance:not(.collapsed){
  color:hsl(214, 38%, 47%);
  background-color: #eff3f6;
}
#balance:not(.collapsed) img {
  filter: brightness(.88) saturate(2);
}
#balance:focus, #balanceCollapse:where(.show){
  box-shadow: 0 0 .5rem rgb(75 114 166) !important;
}

#walking:not(.collapsed){
  color:#7ba696;
  background-color: #f1f6f4;
}
#walking:not(.collapsed) img {
  filter: brightness(.88) saturate(2);
}
#walking:focus, #walkingCollapse:where(.show){
  box-shadow: 0 0 .5rem #7ba696 !important;
}

/* other */
.accordion-body{
  text-align: end;
}
#bo-sp, #hr-sp, #sysbp-sp, #diabp-sp{
  transform: scale(0.8) !important;
  transform-origin: bottom !important;
  top:-11%
}

/* muscle row is odd */
.muscle-row .test-box .pointer div{
  top: -13% !important;
}