/* color */
.blue1{
  color: #0097B2!important;
  
}
.blue2{
  color: #0CC0DF!important;
}
.backblue1{
  background-color:  #0097B2!important;
}
.backblue2{
  background-color: #0CC0DF!important;
}

.coloryellow {
  color: #FFDE59
}

.jbwarp {
  position: relative;
}
.jbwarp .jbtext {
  font-size: 4vw;
  color: #70C9DF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* scroll event */
.reveal{
  position: fixed;
  transform: translateY(50px);
  opacity: 0;
  transition: 1s all ease;
  top: 20%;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}


/* video */
.integratedwarp .jbimg{
  width: 100%;
  height: 26vw;
  margin-bottom: 3vw;
}

/* side bar */

.sidenav {
  
  margin-left: -10vw;
  width: 15%;
  position: fixed;
  z-index: 1;
  /* top: 40%; */
  /* left: 15%; */
  overflow-x: hidden;
  padding: 8px 0;
}
@media (max-width: 1550px) {
  .sidenav {
  
    margin-left: -6vw;
    width: 15%;
    position: fixed;
    z-index: 1;
    /* top: 40%; */
    /* left: 15%; */
    overflow-x: hidden;
    padding: 8px 0;
  }
}

.sidenav ul{
  display: inline;
  padding: 0;
}
.sidenav ul li {
  display: inline;
  font-size: 1vw;
  color: white;
}

/* introduction */

.introduction{
  
}
.integratedwarp {
  font-family: 'Roboto', sans-serif;
    color: white;
}
.integratedwarp h2{
  border-bottom: solid 4px #0CC0DF;
  font-size: 2vw;
  color: white;
  padding: 0.5vw;
  margin-bottom: 1vw;
}
.integratedwarp p{
  font-size: 1vw;
  color: white;
}

.integratedwarp table{
  margin: 1.5vw 0vw;
  text-align: center;
  color: white;
  border: 1px solid  #0097B2;
  vertical-align: middle;
}

/* acknowledgement */

.table-center{
  text-align: center;
}
.acknowledgement{
  margin-top: 3vw;
}
.acknowledgement table{
  text-align: left;
}

/* current */


.current{
  margin-bottom: 10vw;
}

.current h3{
  margin-top: 3vw;
  color: white;
}

.current h4{
  font-size: 1.5vw;
  color: white
}

.current ul{
  padding: 0px;
}
.current ul li{
  width: 40vw;
  padding: 0.5vw;
  margin: 1vw 0;
  border-radius: 1.5vw;
  font-size: 1.1vw;
  list-style: none;
  color: black;
  text-align: center;
  background-color: #0CC0DF;
}
.current ul li:hover{
  background-color: #0097B2!important;
  text-decoration: underline;
  cursor: pointer;
}
.current table{
  border: 1px solid white;
}
.reference {
  margin-bottom: 6vw;
  display: block;
  color: white;
  font-size: 0.7vw;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* animation */
@keyframes fade-out {
  from {
    opacity: 1;

  }
  to {
    opacity: 0;
  }
}

/* collapse */
.collapsebtn{

}
.currnet ul li +div {

}
.collapse-sibling{
  display: none;
  opacity: 0;
}
.collapse-active{
  animation: fade-in 1s;
  animation-fill-mode: forwards;
  display: block;
}
.collapse-deactive{
  animation: fade-out 1s;
  animation-fill-mode: forwards;
}

/* chart resize  */

.collapse-sibling table,td,tr{
  border: 1px solid white;
}

/* reference */

.references{
  text-align: left;
  margin-top: 20vw;
}
.references ul{
  border-top: 3px solid #90E0EF;
  list-style: none;
}
.references ul li{
  margin-top: 0.5vw;
}
.references ul li span{
  color: #C62D21;
}