/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.bg-gradient-custom-form {
  background: rgb(103, 52, 250);
  background: linear-gradient(140deg, rgb(103, 52, 250) 0%, rgb(55, 157, 250) 100%) fixed;
}

.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {
  background: rgb(113, 106, 187) !important;
  background: linear-gradient(128deg, rgb(113, 106, 187) 0%, rgb(92, 127, 205) 100%) !important;
}

.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {
  color: #6e6b7b;
}

.custom-traffic-primary {
  background-color: rgba(113, 106, 187, 0.12);
  color: #716abb !important;
}

.bg-traffic-red {
  background-color: #B81D13 !important;
}

.custom-traffic-danger {
  background-color: rgba(184, 29, 19, 0.12);
  color: #B81D13 !important;
}

.bg-traffic-yellow {
  background-color: #EFB700 !important;
}

.custom-traffic-warning {
  background-color: rgba(239, 183, 0, 0.12);
  color: #EFB700 !important;
}

.bg-traffic-green {
  background-color: #008450 !important;
}

.custom-traffic-success {
  background-color: rgba(0, 132, 80, 0.12);
  color: #008450 !important;
}

.bg-traffic-off {
  background-color: #8E9291 !important;
}

.custom-traffic-secondary {
  background-color: rgba(142, 146, 145, 0.12);
  color: #8E9291 !important;
}

[v-cloak] {
  display: none;
}

[h-12] {
  height: 12rem;
}

/**
* Pulse animation
*/
.animate-pulse-white {
  background: white;
  box-shadow: 0 0 0 0 rgb(255, 255, 255);
  animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.animate-pulse-red {
  background: rgb(255, 82, 82);
  box-shadow: 0 0 0 0 rgb(255, 82, 82);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}
.animate-pulse-orange {
  background: rgb(255, 121, 63);
  box-shadow: 0 0 0 0 rgb(255, 121, 63);
  animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 121, 63, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 121, 63, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 121, 63, 0);
  }
}
.animate-pulse-yellow {
  background: rgb(255, 177, 66);
  box-shadow: 0 0 0 0 rgb(255, 177, 66);
  animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
  }
}
.animate-pulse-blue {
  background: rgb(52, 172, 224);
  box-shadow: 0 0 0 0 rgb(52, 172, 224);
  animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
  }
}
.animate-pulse-green {
  background: rgb(51, 217, 178);
  box-shadow: 0 0 0 0 rgb(51, 217, 178);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
  }
}
.animate-pulse-purple {
  background: rgb(142, 68, 173);
  box-shadow: 0 0 0 0 rgb(142, 68, 173);
  animation: pulse-purple 2s infinite;
}

@keyframes pulse-purple {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(142, 68, 173, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(142, 68, 173, 0);
  }
}
/**
* End Pulse animation
*/