/* Progress bar colour */
[class*="ProgressBar__Bar"]{
    background-color: #000000 !important;
  }
 [class*="ProgressBar__Line"]{
    background-color: Gray!important;
  }
 [class*="ProgressBar__Text"]{
    background-color: #000000!important;
  }

  /* tile button customisation */
a.tile {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #F0F3F6;
  border-radius: 4px;
  border-color: #F0F3F6;
  font-size: 16px;
  font-weight: bold;
  min-height: 72px;
}
a.tile:hover {
    border: 2px solid #000000; /* Increases thickness to 2px and changes color to black when hovering on the tile */

}
a.tile {
    transition: box-shadow 0.2s ease-in-out; /* Smooth transition */
}

a.tile:hover {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Shadow on hover */
}

a.tile svg path {
    fill: black !important; /* Force the arrow to be solid black */
    stroke: black !important; /* Ensure the outline is black */
    stroke-width: 0.3px !important;
}

/* code to change the look of the Automation loading spinner*/
@keyframes custom-automation-loader-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.automation-loader svg {
  display: none;
}


.automation-loader {
  width: 96px;
  height: 96px;
  position: relative;
}

.automation-loader::before {
  width: 96px;
  height: 96px;
  content: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M78.3477 81.3131C87.4428 73.0706 93.1703 61.2632 93.1703 48.0934C93.1703 34.9236 87.5345 23.3206 78.5997 15.0781' stroke='%23FECC00' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M3.73047 59.5391C8.86225 78.885 26.5486 93.1447 47.6714 93.1447C52.3221 93.1447 56.8124 92.4408 61.0278 91.1693' stroke='%23FECC00' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M61.3243 5.06629C57.0173 3.72661 52.4353 3 47.6701 3C25.4247 3 6.95948 18.8264 2.99609 39.7392' stroke='%23FECC00' stroke-width='4' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
  display: block;
  transform-origin: center;
  animation: custom-automation-loader-animation 10s linear infinite;
  animation-delay: 0.5s;
}

.automation-loader::after {
  width: 96px;
  height: 96px;
  content: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1847_149)'%3E%3Cpath d='M74.2356 40.9287C72.7119 33.779 68.3842 27.4121 61.6803 23.7013C54.9764 19.9904 47.4142 19.7122 40.5936 22.1319' stroke='black' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M41.2188 74.0312C53.0749 77.0435 65.8898 71.9005 72.082 60.7139C73.4453 58.2509 74.385 55.6644 74.9404 53.0553' stroke='black' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M29.8713 28.1097C27.9343 29.9647 26.237 32.1393 24.8648 34.6183C18.4588 46.1912 21.3717 60.3533 31.1058 68.4351' stroke='black' stroke-width='4' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1847_149'%3E%3Crect width='60' height='60' fill='white' transform='translate(18 18)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  animation: custom-automation-loader-animation 10s linear infinite;
}

.guide-8blPeEIHaX.guide-canvas {
  background-color: #ffd000;
}