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


/* use sparingly. prefer using partials, loops, etc vs custom classes. */
/* ref: https://tailwindcss.com/docs/reusing-styles */

@layer components {
  /* Form-specific select focus styles */
  /* Only applies to selects within forms (with form-select-button class) */
  button.form-select-button {
    transition: box-shadow 0.15s ease-in-out;
    /* Reset other properties that might interfere */
    outline-offset: 0 !important;
  }
  
  /* Fixed focus and dropdown open styles with consistent ring sizing for form selects */
  button.form-select-focus:focus,
  button.form-select-open {
    outline: none !important;
    border-color: transparent !important;
    /* Fixed specific values instead of CSS variables to prevent shrinking */
    box-shadow: 0 0 0 2px #046965, 0 0 0 4px rgba(5, 152, 147, 0.3) !important;
  }
  
  /* Ensure focus styles apply even when Headless UI data attributes are present */
  button.form-select-focus:focus[data-focus],
  button.form-select-focus:focus[data-headlessui-state],
  button.form-select-open[data-headlessui-state="open"] {
    outline: none !important;
    border-color: transparent !important;
    /* Fixed specific values instead of CSS variables to prevent shrinking */
    box-shadow: 0 0 0 2px #046965, 0 0 0 4px rgba(5, 152, 147, 0.3) !important;
  }

  @keyframes skeleton-glow {
    0% {
      opacity: 0.2;
    }

    100% {
      opacity: 0.5;
    }
  }
  .skeleton {
    border-radius: 0.375rem;

    @apply bg-gray-400 border-gray-400;
    @apply h-4;

    animation: skeleton-glow 0.6s linear infinite alternate;
    background-clip: padding-box !important;
    box-shadow: none !important;
    color: transparent !important;
    cursor: default;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  .skeleton *,
  .skeleton::after,
  .skeleton::before {
    visibility: hidden !important;
  }
}

@layer base {
  :root {
    --brand-yellow: #fdf39d;
    --brand-yellow-secondary: #fffde9;
    --brand-aqua: #b0ebe9;
    --brand-blue: #005D66;
    --brand-orange: #ffc5a6;
    --brand-pink: #f6cbe5;
    --brand-teal: #5bdee9;
    --brand-ocean: #3cbdc8;
  }

  select:focus {
    outline: none;
    box-shadow: none;
  }

  select::-ms-expand {
    display: none;
  }

  select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(/assets/chevron-down-e791dbbfa99dfa79ac0b279503cbf2296b772605ec6b75366419e82e7619e322.svg);
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px 16px;
    /* change the size */
    padding-right: calc(2.5rem + 8px);
    /* add 8px right padding */
  }

  textarea:focus,
  input:focus {
    outline: none;
  }

  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  .animate-marquee {
    animation: marquee 25s linear infinite;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  .min-h-s-screen {
    min-height: 100svh;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  #note-content::placeholder {
    color: var(--color-gray-400);
  }
}
.no-break {
  white-space: nowrap;
}

.display-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: -webkit-linear-gradient(left, #3CBDC8, #91EAB5, #5BDEE9);
  background: linear-gradient(to right, #3CBDC8, #91EAB5, #5BDEE9);
  font-family: Campton, sans-serif;
}

.display-content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  padding: 2rem;
  z-index: 1;
  text-align: center;
  width: 100%;
}

.message-wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 2;
}

.check-in-container {
  opacity: 1;
  position: relative;
  z-index: 3;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Title and text styles */
.display-title,
.welcome-text {
  font-size: 6rem;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  color: white;
  margin-bottom: 2rem;
  position: relative;
  z-index: 4;
  text-align: center;
  width: 100%;
  max-width: 90%;
  opacity: 1;
  -webkit-transition: opacity 300ms ease-in;
  transition: opacity 300ms ease-in;
}

.welcome-subtext {
  font-size: 3.75rem;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  color: white;
  position: relative;
  z-index: 4;
  text-align: center;
  width: 100%;
  max-width: 90%;
  opacity: 1;
  -webkit-transition: opacity 300ms ease-in;
  transition: opacity 300ms ease-in;
}

/* Mascot styles */
.mascot-container {
  position: absolute;
  bottom: -2.5rem;
  left: -2.5rem;
  opacity: 0.3;
  z-index: 0;
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 1024px) {
  .welcome-text {
    font-size: 4rem;
  }
  
  .welcome-subtext {
    font-size: 2.5rem;
  }
  
  .display-title {
    font-size: 4rem;
  }
}

@media screen and (max-width: 768px) {
  .welcome-text {
    font-size: 3rem;
  }
  
  .welcome-subtext {
    font-size: 2rem;
  }
  
  .display-title {
    font-size: 3rem;
  }
  
  .display-content {
    padding: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .welcome-text {
    font-size: 2rem;
  }
  
  .welcome-subtext {
    font-size: 1.5rem;
  }
  
  .display-title {
    font-size: 2rem;
  }
  
  .mascot-container {
    display: none;
  }
}
@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-Thin-71b03c2466ad2ecb2f343822bcf058ef095002633046e67572f570ee4e1ed147.woff) format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-ThinItalic-81f995593c1929fbf0ef881f1ab4c45dfb2130445fab9ce844076d4bff034c76.woff) format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-ExtraLight-894a781262c426cd6ceec44175151eca6ccc8a773b3d80500dd4bd15909a3060.woff) format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-ExtraLightItalic-5bd8ee444a980ec2f9e3ad17d416f61229c14ac248611424cc3cd9446fef0f69.woff) format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-Light-14ac306f9c3b1ed7a405abe4305fef53c994249a55cb954a338e1501363fa923.woff) format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-LightItalic-ecd8bd06d7afa714921c921d9d26afd88ff4cd104d9e3bcb53e326184f114572.woff) format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-Book-36a8ab5d9d30a1c9a1e611bcfcbe11894a226a68522ba87d55f8765ca14a9fb1.woff) format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-BookItalic-972c4f99ed2655dd1a2830e55efe22ab27920973954d21d633c3603b4659336e.woff) format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-Medium-c545fc1984b0c0868c2fa770fee505fab6414c9f8284ee4d3bfdcd1a98fc6b17.woff) format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-MediumItalic-f50d52cad698f2fe83810473094635cd7f4e0788b7a8545d7857f0de33f7cb26.woff) format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-SemiBold-db6c92721e5c0c2607d159f961247cfc3c14121e0d148c26bf37ff95070208b9.woff) format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-SemiBoldItalic-0a8abfcca8a67e221358cdd9f6aa5853219151b617c9246f052fb222237f8bea.woff) format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-Bold-0123400c3213fe36b3eb282c01e25804c4c0ea18c7f4c5537d4333db08ad791e.woff) format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-BoldItalic-b92f39f9ba56250ece5d568799488c081d73b1fba7e568b8e3d6385d981ca272.woff) format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-ExtraBold-84300684117bc896d488c832ebc0144f31152ff9dfb4785cc8984e512f08ddc6.woff) format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-ExtraBoldItalic-4557230909827692fc17caa51e4f3343f4b5d3ed2a256d351b3dcdeac651e612.woff) format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-Black-3e5e8629b7a455c0c9ec6b983e32117bf30da81236464d24b9aabd5a423c1e47.woff) format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url(/assets/Campton-BlackItalic-752f20f37b9dec9259eb814c2e7782ed1d0820b223c5b2dfcad0a7cca76cf65a.woff) format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Aligned campton fonts for Admin */

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-Thin-71b03c2466ad2ecb2f343822bcf058ef095002633046e67572f570ee4e1ed147.woff) format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-ThinItalic-81f995593c1929fbf0ef881f1ab4c45dfb2130445fab9ce844076d4bff034c76.woff) format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-ExtraLight-894a781262c426cd6ceec44175151eca6ccc8a773b3d80500dd4bd15909a3060.woff) format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-ExtraLightItalic-5bd8ee444a980ec2f9e3ad17d416f61229c14ac248611424cc3cd9446fef0f69.woff) format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-Light-14ac306f9c3b1ed7a405abe4305fef53c994249a55cb954a338e1501363fa923.woff) format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-LightItalic-ecd8bd06d7afa714921c921d9d26afd88ff4cd104d9e3bcb53e326184f114572.woff) format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-Book-36a8ab5d9d30a1c9a1e611bcfcbe11894a226a68522ba87d55f8765ca14a9fb1.woff) format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-BookItalic-972c4f99ed2655dd1a2830e55efe22ab27920973954d21d633c3603b4659336e.woff) format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-Medium-c545fc1984b0c0868c2fa770fee505fab6414c9f8284ee4d3bfdcd1a98fc6b17.woff) format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-MediumItalic-f50d52cad698f2fe83810473094635cd7f4e0788b7a8545d7857f0de33f7cb26.woff) format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-SemiBold-db6c92721e5c0c2607d159f961247cfc3c14121e0d148c26bf37ff95070208b9.woff) format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-SemiBoldItalic-0a8abfcca8a67e221358cdd9f6aa5853219151b617c9246f052fb222237f8bea.woff) format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-Bold-0123400c3213fe36b3eb282c01e25804c4c0ea18c7f4c5537d4333db08ad791e.woff) format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-BoldItalic-b92f39f9ba56250ece5d568799488c081d73b1fba7e568b8e3d6385d981ca272.woff) format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-ExtraBold-84300684117bc896d488c832ebc0144f31152ff9dfb4785cc8984e512f08ddc6.woff) format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-ExtraBoldItalic-4557230909827692fc17caa51e4f3343f4b5d3ed2a256d351b3dcdeac651e612.woff) format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-Black-3e5e8629b7a455c0c9ec6b983e32117bf30da81236464d24b9aabd5a423c1e47.woff) format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}

@font-face {
    font-family: 'AlignedCampton';
    src: url(/assets/Campton-BlackItalic-752f20f37b9dec9259eb814c2e7782ed1d0820b223c5b2dfcad0a7cca76cf65a.woff) format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
    descent-override: 0%;
    line-gap-override: 30%;
}
.pac-container {
    border: 1px solid #EFEFEF;
    box-shadow: 2px 4px 6px -2px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 4px;
    z-index: 1050;
}

.pac-icon {
    display: none;
}

.pac-item {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-left: 1.2rem;
    border: none;
}

.pac-item, .pac-matched, .pac-item-query {
    color: rgb(0 0 0);
    font-weight: 400;
    font-size: .875rem;
    font-family: Campton,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

.pac-item:hover {
    background-color: #F7F7F7
}
span.get-started {
    background-image: url(/assets/get_started_underline-7357faac09bef96d1c513e609a1293f7f71aadb477a214f44b1b578680a468ad.svg);
}

span.enter-pn {
    background-image: url(/assets/enter_pn_underline-8bc78c39c0ae3442c971147a42ab5093a48edd2f571dbf7f5f43e58421c763bd.svg);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */