html[data-theme='ubicamelo'] {
  color-scheme: light;
  --color-base-100: #ffffff;
  --color-base-200: #f4f7fb;
  --color-base-300: #d9e2ee;
  --color-base-content: #122033;
  --color-primary: #0b4ea2;
  --color-primary-content: #ffffff;
  --color-secondary: #ff6b16;
  --color-secondary-content: #ffffff;
  --color-accent: #35a8f2;
  --color-accent-content: #061421;
  --color-neutral: #14263d;
  --color-neutral-content: #ffffff;
  --color-info: #1b8fd8;
  --color-info-content: #ffffff;
  --color-success: #168253;
  --color-success-content: #ffffff;
  --color-warning: #f6a609;
  --color-warning-content: #1d1300;
  --color-error: #d43f3a;
  --color-error-content: #ffffff;
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --border: 1px;
}

html {
  scroll-behavior: smooth;
}

.template-loader {
  min-height: 8rem;
}

.template-loader::after {
  content: "";
  display: block;
  height: 0.25rem;
  margin-top: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary), transparent);
  background-size: 200% 100%;
  animation: templateLoading 1.4s linear infinite;
}

@keyframes templateLoading {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .template-loader::after {
    animation: none;
  }
}

.brand-logo {
  height: 3rem;
  width: 11rem;
  object-fit: cover;
  object-position: center;
}

.brand-logo-lg {
  height: 5rem;
  width: 18rem;
  object-fit: cover;
  object-position: center;
}

.file-input::file-selector-button {
  cursor: pointer;
}