/*! @import */

@tailwind base;
@tailwind components;
@tailwind utilities;

.bg-primary-color {
  background-color: #f39ace;
}

.bg-primary-color-50 {
  background-color: #fdd6ed;
}

.bg-primary-color:hover {
  background-color: #d12ed1af;
}

.active-menu {
  border-color: #d12ed1af;
  color: #d12ed1af;
}

.active-menu:hover {
  border-color: #d12ed1af;
  color: #d12ed1af;
}

@responsive {
  @variants hover {
    .border-primary-color {
      border-color: #0CC26B;
    }
  }
}

.text-primary-color {
  color: #f39ace;
}

.text-primary-color:hover {
  color: #d12ed1af;
}

.text-danger-color {
  color: rgb(139, 5, 5);
}

.validation-error {
  @apply text-danger-color font-light;
}

.active-menu {
  @apply border-primary-color bg-primary-color-50 text-primary-color md:bg-transparent md:text-gray-900 md:hover:border-primary-color md:hover:text-current;
}

.card-image {
  width: 321;
  height: 430;
}

.card-image-print {
  position: relative;
}

.card-qr-code {
  position: absolute;
}

.card-kit-code {
  position: absolute;
  font-size: small;
  font-weight: normal;
}

.card-alpha-code {
  position: absolute;
  font-size: small;
  font-weight: normal;
}

.iti__flag { background-image: url("~/img/flags.png"); }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag { background-image: url("~/img/flags@2x.png"); }
}