html, body{
  height: 100%;
}
a{ text-decoration: none; }
.af-root{
  --af-purple: #540CFA;
  --af-purple-opacity: #cbb6fd;
  --af-gray: #c0c0c0;
  --af-bigaro: #BAC3FF;
  --af-red: #FF5353;

  --af-text-sm: 11px;
  --af-text-normal: 15px;
  --af-text-lg: 19px;
}

.af-text-sm{ font-size: var(--af-text-sm); }
.af-text-normal{ font-size: var(--af-text-normal); }
.af-text-lg{ font-size: var(--af-text-lg); }

.af-bg-purple{ background: var(--af-purple) !important; }
.af-bg-purple-opacity{ background: var(--af-purple-opacity) !important; }
.af-bg-img{
  background-size: cover!important;
  background-position: center!important;
}
.af-bg-gray{ background: var(--af-gray) !important; }
.af-text-red{ color: var(--af-red) !important; }
.af-text-purple{
  color: var(--af-purple) !important; fill: var(--af-purple) !important; 
}
.af-text-bigaro{ color: var(--af-bigaro) !important; fill: var(--af-bigaro) !important; }

.af-btn-purple{
  background: var(--af-purple);
  color: white;
}

.af-btn-outline-purple{
  border: solid 2px var(--af-purple);
  color: var(--af-purple);
  border-radius: 2em;
  width: 157px;
}

.af-btn-purple:hover{
  color: white;
}

.af-circle-sm{
  width: 10px;
  height: 10px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border-radius: 50%;
}

.af-circle{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: white;
  text-align: center;
  background: black;
}

.af-dot-flashing {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFlashing 1s infinite linear alternate;
  animation-delay: .5s;
}

.af-dot-flashing::before, .af-dot-flashing::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.af-dot-flashing::before {
  left: -15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 0s;
}

.af-dot-flashing::after {
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 1s;
}

.af-lbl-input-group{
  width: 45px;
  position: relative;
  top: 26px;
  left: 11px;
  z-index: 1;
  font-size: 14px;
}

.af-dot {
  margin: 0 6px;
  height: 8px;
  width: 8px;
  background-color: var(--af-purple);
  border-radius: 50%;
  display: inline-block;
}

[class*="af-icon"]{
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  width: 50px;
  height: 50px;
}

.af-icon-automated-tracking{
  background: transparent linear-gradient(135deg, #9C09DB 0%, #1C0FD7 100%) 0% 0% no-repeat padding-box;
}
.af-icon-machine-learning{
  background: transparent linear-gradient(135deg, #F2C314 0%, #FC3832 100%) 0% 0% no-repeat padding-box;
}
.af-icon-smart-notifications{
  background: transparent linear-gradient(135deg, #32FBFC 0%, #3214F2 100%) 0% 0% no-repeat padding-box;
}

/* Resize bootstrap */
.form-control{
  box-shadow: none!important;
}

/* SM */
@media (max-width:576px){
  html, body{ height: auto; }

  .af-lbl-input-group{
    padding-top: 15px;
    font-size: 12px;
    top: 22px;
  }
}

/* MD */
@media (min-width:768px){

}

/* LG */
@media (min-width:992px){
  .h-lg-100{ height: 100%!important; }
}

/* XL */
@media (min-width: 1200px){

}

/* XXL */
@media (min-width:1400px){

}


/* @KEYFRAMES */
@keyframes dotFlashing {
  0% {
    background-color: #9880ff;
  }
  50%,
  100% {
    background-color: #ebe6ff;
  }
}