.button:disabled {
    opacity: 0.5;
 }

 .swiper {
    padding: 10px 56px 50px 56px; /* Padding for the navigation and pagination */
    width: 100%;
 }

 .swiper-pagination-bullet { /* Styling for pagination bullets */
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 24px;
    font-size: 16px;
    color: #B2B5BE;
    opacity: 1;
    background: transparent; /* define colour */
    display: flex;
    border-radius: 50%;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border: 2px solid #F09600; /* define colour */
    margin-right: 6px;
    margin-left: 6px;
  }

 .swiper-pagination-bullet.swiper-pagination-bullet-active{ /* Styling for active bullet */
    background-color: #F09600; /* define colour */
    height: 20px;
    width: 20px;
  }

 .swiper-button-next,
 .swiper-button-prev { /* Styling for navigation buttons */
    background-color: #ffffff;
    height: 5rem;
    width: 5rem;
    border-radius: 5rem;
    padding: 1rem;
 }

 .swiper-button-next { /* Styling for the next button */
   right: 0px;
 }

 .swiper-button-next:after { /* icon inside next button */
    content: url(/assets/arrow-right-1.svg); /*link to asset */
    font-size: 1px;
 }

 .swiper-button-prev { /* Styling for the previous button */
    left: 0px;
 }

 .swiper-button-prev:after { /* icon inside previous button */
    content: url(/assets/arrow-right-3.svg); /* link to asset */
    font-size: 1px;
 }

@media screen and (min-width: 1440px) {
  .form-input::placeholder {
    font-size: 1rem;
    line-height: 1;
  }
}

/* Tablet */
@media only screen and (max-width: 991px) {
 .swiper-button-next,
 .swiper-button-prev { /* Styling for navigation buttons */
    height: 4rem;
    width: 4rem;
 }
}

/* Mobile Landscape */
@media only screen and (max-width: 767px) {
 .swiper-button-next,
 .swiper-button-prev { /* Styling for navigation buttons */
    height: 3rem;
    width: 3rem;
    bottom: 0;
    top: auto;
 }
}

/* Bobile */
@media only screen and (max-width: 478px) {
 .swiper-button-next,
 .swiper-button-prev { /* Styling for navigation buttons */
    padding: 0.5rem;
 }
}

/* Skeleton shimmer animation */
@keyframes shimmer {
  0% { background-position: -500px 0; }
  100% { background-position: 500px 0; }
}

.shimmer-all input,
.shimmer-all label,
.shimmer-all select,
.shimmer  {
  color: transparent !important;
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%);
  background-size: 500px 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 4px;
}

/* Prevent text cursor showing */
.shimmer-all input::placeholder, .shimmer {
  color: transparent !important;
}

/* Prevent user interaction while loading */
.shimmer-all input, .shimmer-all select, .shimmer {
  pointer-events: none;
}

/* Base state: visible */
.form-step,
.support-logs-line,
#screenshot-block,
#support-logs-block {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 300ms ease, visibility 300ms ease;
}

/* Hidden state: fade out */
.form-step.step-is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: opacity 300ms ease, visibility 300ms ease, height 0ms 300ms;
}