
.summary{padding-bottom: 20px!important}
.Bstop{background-color: pink;}
.Bpass{background-color: #50C878;}
    .actionbutton{
            text-decoration: none;
            border: none;
            
            color: #fff;
            border-radius: 5px;
            box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
            cursor: pointer;
            outline: none;
            transition: 0.2s all;
        }
        /* Adding transformation when the button is active */
          
        .actionbutton:active {
            transform: scale(0.98);
            /* Scaling button to 0.98 to its original size */
            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
            /* Lowering the shadow */
        }


.actionbutton{
font-size:12px;
border-radius: 5px;
width:140px;
}



#actionbuttonsC{
display: inline-block; 
margin-left: 1%;

}

#sliders_content{
  height: 100px;
  position: relative;
}

.sliderlabel{
  text-align:center;
  font-size:12px;
  margin-top: 0.6em;
  
}

#thebutton{  margin: 0;
  margin-left:2%;
  position: absolute;
  top: 35%;
  -ms-transform: translateY(-35%);
  transform: translateY(-35%);
border-radius: 5px;
}

}
.sliderlabel .MathJax_SVG {
  
    margin-top: -30px;
}
.MathJax_SVG line{opacity:0.5}
.MathJax_SVG polygon{opacity:0.5}
.tocify{
    inline-size: 15%!important;
    overflow-wrap: break-word!important;
}
   #fixedend .traces:nth-child(1) {

visibility: hidden;
}
.legend .bg{background:rgb(245,244,241)!important}
img {
  clip-path: inset( 5px); /* Also can take single values to make all sides the same, or 2 values (vert/horz), or 3 values (top/horz/bottom). */
}
.caption span.plus{cursor:pointer;color:orange}
.caption span.expanded-caption{display:none}

#scatter .modebar-group {  background: lightgray;}
#scatter.modebar-container{top:80px!important}
      
   /* tooltip settings */
#tooltipster-1881{   min-height:200px; max-height: 250px;width:500px!important;;  vertical-align: middle;}
.tooltipster-sidetip .tooltipster-content{ color:#fff;line-height:18px;padding-left:5px;padding-right:5px;padding-top:15px;} 

.tooltipster-content{overflow-y:auto!important; color:white;padding-bottom:10px}

.tooltipster-content{box-sizing:border-box;max-height:100%;max-width:100%;}

.tooltipster-base { pointer-events: auto!important;}

      #fixedend .modebar-group {  background: lightgray;}
      #fixedend.modebar-container{top:80px!important}
      
 /* mjtooltip container */
.toplined{
  position: relative;
  display: inline-block;
  border-top: 2px solid transparent; /* If you want dots under the hoverable text */
  border-image: linear-gradient(to right, rgba(255, 165, 0, 0) 0%, rgba(255, 165, 0, 1) 30%, rgba(255, 165, 0, 1) 70%, rgba(255, 165, 0, 0) 100%);
  border-image-slice: 1;
}
.toplined:hover { border-image-slice:0!important; } 
 #tooltipster-1881{min-height: 60px;  vertical-align: middle;}
 
.tooltipster-content .mjx-chtml{margin-top:-6px}
.tooltipster-content{overflow:hidden!important}

.zhovertext .name{display: none!important;} 
.zhoverlayer .axistext{display: none!important;} 

.article-header-caption {
    color: black!important;
    font-size: .9em;

    background-color: rgb(245,244,241)!important;
        width: 100%;
        position: relative!important;
}
