.nsewdrag.drag{fill:rgb(248,248,243)!important}  /* plotly plot inside background */



.python{    margin: 0;}
/*main body settings*/
/*main body settings*/
.caption{text-align:left}
#refs{margin-top:100px}


 /* 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(105, 101, 92, 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; } 


blockquote{
  margin:5px!important;
  padding:5px!important;
}
footer{
  margin:5px!important;
  padding:5px!important;
}
.article-container {
  max-width: 900px;
  margin: 40px auto 10px;
  padding: 0 15px;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}
.article-style{ 
margin-left:-10%;
padding:20px;
margin-right:-30%;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;   
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}


.divInline2{
  display:block;
  display: inline-block;
  width:49%;
}

.divInline3{
  display:block;
  display: inline-block;
  width:32%;
}

.divInline4{
  display:block;
  display: inline-block;
  width:24%;
}



.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.sslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sslider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sslider {
  background-color: #2196F3;
}

input:focus + .sslider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .sslider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded ssliders */
.sslider.round {
  border-radius: 34px;
}

.sslider.round:before {
  border-radius: 50%;
}
#slider-toggle {
	width: 50px;
}
#slider-toggle.off .noUi-handle {
	border-color: red;
}



html {
  scroll-behavior: smooth;
}



/* Twitter Bootstrap Override Style */
.nav-list > li > a, .nav-list .nav-header {
    margin: 0px;
}

/* Twitter Bootstrap Override Style */
.nav-list > li > a {
    padding: 5px;
}

.experience__more {
background: #ffffff;
padding: 5px;
position: relative;
/*line-height: 1.5*/;
/* border-left: 4px solid #FFF;*/
max-height: 33px;
min-height: 5px;
overflow: hidden;
transition: all 200ms ease-in-out;
margin-top: 12px;
width: 98%!important;

}
.experience__more h4, .experience__more p {
transform: scale(0);
transition: all 200ms ease-in-out;
}
.experience__more h4 {
display: inline-block;
max-width: 70%;
}


.experience__more.is--expanded h4, .experience__more.is--expanded p {
transform: scale(1);
transition: all 200ms ease-in-out;
}

.heading--section {
background: #f1f1f1;
border-left: 6px solid #1FC1AD;
padding: 6px;
}

.btn--more.is--visible {
transform: scale(1);
transition: all 250ms ease-in-out;
}

.collapsible_container{overflow: visible;}
.experience__more {display: none;}
.experience__more.is--expanded {
/* border-left: 4px solid #1FC1AD;*/
padding-left:10px;
padding-right:10px;
background: #f1f1f1;
/* border-left: 4px solid #1FC1AD;*/
max-height: 550px!important;
overflow-y:auto!important;
overflow-x: hidden;
transition: all 200ms ease-in-out;
display: inline-block!important;
width:100%!important;
text-align: left;
}
.experience__more.is--expanded h4, .experience__more.is--expanded p {
transform: scale(1);
transition: all 200ms ease-in-out;
}

.btn--more {
transform: scale(0);
width: 100% !important;
display: block!important;
position: absolute;
top: 12px;
outline: none;
border: 1px solid #1FC1AD;
background: #FFF; ;
color: black;
border-radius: 1px;
padding: 6px 12px;
font-size: 12px;
transition: all 100ms ease-in-out;
margin-bottom: 12px;
height: 30px;
}
.btn--more:hover {
background: #1FC1AD;
color: black;
transition: all 200ms ease-in-out;
}
.btn--close {
position: fixed;
top: 24px;
background: none;
border: none;
right: 24px;
font-size: 32px;
}

.location::before {
color: #1FC1AD;
}

.cn {
width: 88px;
position: absolute;
bottom: -100%;
left: 84px;
transition: all 250ms ease-in-out;
}

.cn.is--visible {
bottom: 0%;
transition: all 250ms ease-in-out;
}


.color-change {
background: #444;
transition: all 250ms ease-in-out;
}

.show{
      -o-transition: opacity 3s;
      -moz-transition: opacity 3s;
      -webkit-transition: opacity 3s;
      transition: opacity 3s;
      opacity:1;
  }
.hide {
      opacity:0;
  }
  
.imagepicker{       
    display: flex;
    width:15%;
    flex-direction: column;
    align-items: flex-start
    
  } 
.imgcont{padding-bottom:20px;padding-left:20px;margin-bottom:10px;margin-left:30px;}  
#currentImg{height:715px;}  

.figure{
    display:block;
  margin-left:auto;
  margin-right:auto;
}
figcaption{
  text-align:center;
  font-size:16px;
}

#firstp::first-letter {
    float:left;color: hsl(350, 50%, 50%);
    font-size:115px;line-height:40px;padding-top:15px; padding-right:6px;padding-bottom:6px;font-family: Times, serif, Georgia;
}


.flexbox {
  display: flex;
  align-items: stretch;
}	

.compartment{
  border-style: solid;border-width: 3px;border-color:gray;  border-radius: 10px;
  box-shadow: 10px 5px 5px gray;
  text-align:center;
  margin-top:15px;

}



caption{width:600px!important;text-align:center}
.flex-container{
      width: 80%;
      min-height: 300px;
      height:350px;
      margin: 0 auto;
      display: -webkit-flex; /* Safari */     
      display: flex; /* Standard syntax */
}



@keyframes fadein{
    0% { opacity:0; }
    70% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    70% { opacity:0; }
    100% { opacity:1; }
}

.mathifytt .hovertext tspan:nth-child(2) {visibility: hidden;}
.hovertext { font-size: 0.8em!important;}