.active-highlight {
  background-color: var(--phoenix-body-highlight-bg);
  animation: fade-active 3s;
}
.active-highlight-white {
  background-color: var(--phoenix-body-bg);
  animation: fade-active-white 3s;
}

@keyframes fade-active {
  from {background-color: var(--phoenix-info-bg-subtle);}
  to {background-color: var(--phoenix-body-highlight-bg);}
}
@keyframes fade-active-white {
  from {background-color: var(--phoenix-info-bg-subtle);}
  to {background-color: var(--phoenix-body-bg);}
}

/* Animations for GCP Deployer Component */
.rotating-icon {
  display: inline-block;
  animation: rotateIcon 4s linear infinite; /* Rotate every 6 seconds */
}

@keyframes rotateIcon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.pulsing-icon {
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2); /* Slightly larger to indicate movement */
    opacity: 0.8;
  }
}
/* END Animations for GCP Deployer Component */

/* Overrides for vue-multiselect */
.multiselect__option.multiselect__option--highlight,
.multiselect__option.multiselect__option--highlight::after,
.multiselect__tag {
  background: var(--phoenix-success) !important;
}

.feather-10{
  width: 10px;
  height: 10px;
}
.feather-12 {
  width: 12px;
  height: 12px;
}
.feather-xs {
  width: 12px;
  height: 12px;
}
.feather-14 {
  width: 14px;
  height: 14px;
}
.feather-small {
  width: 16px;
  height: 16px;
}
.feather {
  vertical-align: text-top;
}
.fill-success {
  fill: var(--phoenix-success)
}
/* End */


/* ListJS table sorting helpers */
.dynamic-table .sort {
  /*padding:8px 30px;*/
  /*border-radius: 6px;*/
  /*border:none;*/
  /*display:inline-block;*/
  /*color:#fff;*/
  /*text-decoration: none;*/
  /*background-color: #28a8e0;*/
  /*height:30px;*/
}
.dynamic-table .sort:hover {
  text-decoration: none;
  background-color: var(--phoenix-body-highlight-bg);
}
.dynamic-table .sort:focus {
  outline:none;
}
.dynamic-table .sort:after {
  display:inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.dynamic-table .sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  content:"";
  position: relative;
  top: 4px;
  right: -5px;
}
.dynamic-table .sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #333;
  content:"";
  position: relative;
  top: -4px;
  right: -5px;
}
/* END ListJS table sorting helpers */