:root {
  --loading-color: #0090c0;
  --loading-height: 5px;
  --flash-message-width: 500px;
  --flash-message-mobile-padding: 10px;
  --spinner-size: 1em;
  --spinner-border: 0.2em;
}

/* Loading cursor */
body.oc-loading,
body.oc-loading * {
  cursor: wait !important;
}

/* Loading indicator */
.stripe-loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--loading-height);
  background: transparent;
  overflow: hidden;
  z-index: 2000;
}

.stripe-loading-indicator .stripe,
.stripe-loading-indicator .stripe-loaded {
  position: absolute;
  height: var(--loading-height);
  display: block;
  background: var(--loading-color);
  box-shadow: 
    inset 0 1px 1px -1px #fff,
    inset 0 -1px 1px -1px #fff;
}

.stripe-loading-indicator .stripe {
  width: 100%;
  animation: oc-infinite-loader 60s linear;
}

.stripe-loading-indicator .stripe-loaded {
  width: 100%;
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
}

.stripe-loading-indicator.loaded {
  opacity: 0;
  transition: opacity 0.4s linear 0.3s;
}

.stripe-loading-indicator.loaded .stripe {
  animation-play-state: paused;
}

.stripe-loading-indicator.loaded .stripe-loaded {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s linear;
}

.stripe-loading-indicator.hide {
  display: none;
}

/* Flash messages */
body > .flash-message {
  position: fixed;
  width: var(--flash-message-width);
  left: 50%;
  top: 13px;
  margin-left: calc(var(--flash-message-width) / -2);
  color: #fff;
  font-size: 14px;
  padding: 10px 30px 10px 15px;
  z-index: 10300;
  word-wrap: break-word;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
  text-align: center;
  box-shadow: 
    0 1px 6px rgba(0, 0, 0, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.24);
  border-radius: 3px;
}

.flash-message.fade {
  opacity: 0;
  transform: scale(0.9);
  transition: 
    opacity 0.5s,
    transform 0.5s,
    width 0s;
}

.flash-message.fade.in {
  opacity: 1;
  transform: scale(1);
}

.flash-message.success { background: #8da85e; }
.flash-message.error { background: #c30; }
.flash-message.warning { background: #f0ad4e; }
.flash-message.info { background: #5fb6f5; }

.flash-message .close {
  position: absolute;
  right: 10px;
  top: 8px;
  color: white;
  font-size: 21px;
  line-height: 1;
  font-weight: bold;
  opacity: 0.2;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  appearance: none;
}

.flash-message .close:hover,
.flash-message .close:focus {
  color: white;
  opacity: 0.5;
}

/* Loading spinner */
.oc-loading::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4em;
  height: var(--spinner-size);
  width: var(--spinner-size);
  animation: oc-rotate-loader 0.8s infinite linear;
  border: var(--spinner-border) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.5;
}

/* Animations */
@keyframes oc-rotate-loader {
  to { transform: rotate(360deg); }
}

@keyframes oc-infinite-loader {
  0% { transform: translateX(-100%); }
  10% { transform: translateX(-50%); }
  20% { transform: translateX(-25%); }
  30% { transform: translateX(-12.5%); }
  40% { transform: translateX(-6.25%); }
  50% { transform: translateX(-3.125%); }
  60% { transform: translateX(-1.5625%); }
  70% { transform: translateX(-0.78125%); }
  80% { transform: translateX(-0.390625%); }
  90% { transform: translateX(-0.1953125%); }
  100% { transform: translateX(-0.09765625%); }
}

/* Responsive */
@media (max-width: 768px) {
  body > .flash-message {
    left: 10px;
    right: 10px;
    top: 10px;
    margin-left: 0;
    width: auto;
  }
}

/* Validation */
[data-request][data-request-validate] [data-validate-for]:not(.visible),
[data-request][data-request-validate] [data-validate-error]:not(.visible) {
  display: none;
}