/* Match Select2 single select with Argon/Bootstrap input */
.select2-container--default .select2-selection--single {
    border-color: rgba(50, 151, 211, 0.25);
    background-color: #fff;
    border: 1px solid #cad1d7;
    border-radius: 0.375rem;
    height: calc(2.5rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: #525f7f;
    line-height: 1.5;
    box-shadow: none;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #525f7f;
    line-height: 1.5;
    padding-left: 0;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 100%;
    right: 0.75rem;
}

.checkpoint-content-container {
    width: 100%;
    overflow: hidden; /* Prevents any overflow */
}
.checkpoint-content-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Optional: Center the image horizontally */
}
.spinner {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border: 0.4rem solid #5e72e4;
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}
.icon-mask {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
  }
  .cream-icon {
    -webkit-mask-image: url("/img/icons/cream.svg");
            mask-image: url("/img/icons/cream.svg");
  }
  
  .sugar-icon {
    -webkit-mask-image: url("/img/icons/sugar.svg");
            mask-image: url("/img/icons/sugar.svg");
  }
  
  .milk-icon {
    -webkit-mask-image: url("/img/icons/milk.svg");
            mask-image: url("/img/icons/milk.svg");
  }
  
  .strawberry-icon {
    -webkit-mask-image: url("/img/icons/strawberry.svg");
            mask-image: url("/img/icons/strawberry.svg");
  }
  
  .salt-icon {
    -webkit-mask-image: url("/img/icons/salt.svg");
            mask-image: url("/img/icons/salt.svg");
  }
  
  .pumpkin-icon {
    -webkit-mask-image: url("/img/icons/pumpkin.svg");
            mask-image: url("/img/icons/pumpkin.svg");
  }
  
  .corn-icon {
    -webkit-mask-image: url("/img/icons/corn.svg");
            mask-image: url("/img/icons/corn.svg");
  }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}