.fade-in-out {
  transition: 1.5s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}

.no-round {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

.part-hover-odd {
   background-color: #EEE; 
   cursor: pointer;
}

.part-hover-odd:hover {
    background-color: #37474F; 
    color: white;
}

.part-hover-even {
    background-color: white; 
    cursor: pointer;
}

.part-hover-even:hover {
    background-color: #37474F;
    color: white;
}

.pagination {
    margin: 0px;   
}

.pointer {
    cursor: pointer;
}

.form-invalid {
    color: red;
    font-weight: bold;
}

.active-btn {
    background-color: #eee;
    border-bottom: 3px solid red;
}

.btn-nav-blue {
    background-color: #37474F;
}

.seqbuffer {
    background-color: #CE93D8;
}

.benchbuffer {
    background-color: #C8E6C9;
}

.recipe-on {
    background-color: #C8E6C9;
}

.prebuffer {
    background-color: #FFD54F;
}

.eventracking {
    background-color: #EEE;
}

.seqbuffer-td {
    padding: 1px 5px 1px 5px;
    vertical-align: middle;
}

.topbox {
    border-top: 2px solid #444;
}

.badtorque {
    background-color: #E57373;
}

.stat-bad {
    background-color: #E57373;   
}

.stat-good {
    background-color: white;
}

.stat-green {
    background-color: #4CAF50;
}

.stat-yellow {
    background-color: #FFEB3B;
}

.stat-red {
    background-color: #E57373;   
}

.stat-lbl {
    width: 70%;
    border-right: 2px solid #444; 
    background-color: #616161; 
    padding: 5px; 
    color: white;
}

.stat-val {
    width: 30%;
    text-align: center; 
    font-weight: bold;   
}

.badtest {
    background-color: #E57373;
}

.btn-nav {
    background-color: #37474F;
    margin: 0px;
    color: #eee;
}

.btn-nav:hover, .btn-nav:focus {
    background-color: #3F525B;
    color: #eee;
}

.btn-line {
    background-color: #fff;
}



.btn-noround {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.btn:focus,.btn:active {
   outline: none !important;
}

/*****  LOADER  *****/
.spinner {
  width: 18px;
  height: 18px;
  position: relative;
}

.cube1, .cube2 {
  background-color: #444;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}