.clickable,
.clickable_hover {
  cursor: pointer;
}

.clickable_hover:hover {
  cursor: pointer;
  color: #3e79f7 !important;
}

.clickable_hover_always {
  cursor: pointer;
  color: #3e79f7 !important;
}

:root {
  --service-running: #971a1a;
  --angle: 45deg;
  --opacity2: 0.95;
  --opacity: 0.5;
}

.service-card-active-animation-2 {
  background-color: #f3ffef !important;
}

.service-card-active-animation {
  border: 2px dotted transparent !important;

  background-image: -moz-linear-gradient(to right, rgb(255 255 255 / var(--opacity2)), rgb(255 255 255 / var(--opacity2))),
    conic-gradient(from var(--angle), #d53e33 0deg 90deg, #fbb300 90deg 180deg, #377af5 180deg 270deg, #399953 270deg 360deg) !important;

  background-image: -webkit-linear-gradient(to right, rgb(255 255 255 / var(--opacity2)), rgb(255 255 255 / var(--opacity2))),
    conic-gradient(from var(--angle), #d53e33 0deg 90deg, #fbb300 90deg 180deg, #377af5 180deg 270deg, #399953 270deg 360deg) !important;

  background-image: -o-linear-gradient(to right, rgb(255 255 255 / var(--opacity2)), rgb(255 255 255 / var(--opacity2))),
    conic-gradient(from var(--angle), #d53e33 0deg 90deg, #fbb300 90deg 180deg, #377af5 180deg 270deg, #399953 270deg 360deg) !important;

  background-image: linear-gradient(to right, rgb(255 255 255 / var(--opacity2)), rgb(255 255 255 / var(--opacity2))),
    conic-gradient(from var(--angle), #d53e33 0deg 90deg, #fbb300 90deg 180deg, #377af5 180deg 270deg, #399953 270deg 360deg) !important;

  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

/** show a warning in browers that don't support it **/
.warning {
  margin: 2em;
  padding: 1em;
  border: 3px solid #49da0f !important;
}

/* Animate when Houdini is available */
@supports (background: paint(houdini)) {
  @property --opacity {
    syntax: "<number>";
    initial-value: 0.5;
    inherits: false;
  }

  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  @-moz-keyframes opacityChange {
    to {
      --opacity: 1;
    }
  }
  @-webkit-keyframes opacityChange {
    to {
      --opacity: 1;
    }
  }

  @-o-keyframes opacityChange {
    to {
      --opacity: 1;
    }
  }
  @keyframes opacityChange {
    to {
      --opacity: 1;
    }
  }

  @-moz-keyframes rotate {
    to {
      --angle: 360deg;
    }
  }
  @-webkit-keyframes rotate {
    to {
      --angle: 360deg;
    }
  }
  @-o-keyframes rotate {
    to {
      --angle: 360deg;
    }
  }

  @keyframes rotate {
    to {
      --angle: 360deg;
    }
  }

  .service-card-active-animation {
    -moz-animation: rotate 4s linear infinite, opacityChange 3s infinite alternate !important;
    -webkit-animation: rotate 4s linear infinite, opacityChange 3s infinite alternate !important;
    -o-animation: rotate 4s linear infinite, opacityChange 3s infinite alternate !important;
    animation: rotate 4s linear infinite, opacityChange 3s infinite alternate !important;
  }

  /* Hide the warning */
  .warning {
    display: none;
  }
}