/**  Customization for toolbar **/


/**  toolbar background **/

#Tension {
   background: #fff!important;
  width: 100vw;
  opacity: 0;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
  25% {
    opacity: 0.0;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
  25% {
    opacity: 0.0;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  } 
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


}

/**  toolbar icons desktop **/
.Bar {
 
  height: 21px;
  width: 100%;
  margin-right: 3px !important;
  margin-left: 3px !important;
  padding: 11px 10px !important;
  color: gray;
  border-width: 1px;
  border-style: solid;  
  border-bottom-width: 0px;
  width: 25px;
  border-top-width: 0px;
 
}

/*icon color*/
.Bar i {
   color: gray !important; 
}

/*icon active color*/
.bar-active i {
 color: red !important;
}
@media only screen and (min-width: 320px) and (max-width: 1000px) {
  /*toolbar icons mobile, using smaller sizes to fit all icons on toolbar **/

  .Bar {
   width: 100%;
    margin-right: 0px !important;
    margin-left: 0px !important;     
    width: 23px !important;
   
  }
}