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

/*@import url('https://fonts.googleapis.com/css2?family=Mandali&family=Yeseva+One'); /*&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Mandali&family=Yeseva+One');
@layer base {
  
  @font-face {
    font-display: swap;
    font-family: "Nantes";
    font-style: normal;
    font-weight: 300;
    src:  url(/assets/Nantes-Light-a77a3e4160b777eb74d4449e070f6a1ad4e5f73aa8fd1ff9f9d48d30379d99f9.woff) format("woff"),
           url(/assets/Nantes-Light-2da00625abc311af38cc8eb991e71479370d008569ed5f004da091c0d0db80ac.otf) format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "Nantes";
    font-style: normal;
    font-weight: 400;
    src:  url(/assets/Nantes-Regular-88213b9c4aa3175511ab8c023d45af53c15c40e6caeac29a4d88738f4ee19e76.woff) format("woff"),
           url(/assets/Nantes-Regular-4b6611e7f842cac184fc843e1c30bc0da5fb53ba0ee05b45fdd1b36c31e3a82d.otf) format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "Whitney";
    font-style: normal;
    font-weight: 400;
    src:  url(/assets/WhitneySSm-Book-Pro-534ca68bcd2c14f24e66bebe9b0943f1e0a5f2b5bffaabe01b7e3bb445d51305.woff) format("woff"),
           url(/assets/WhitneySSm-Book-Pro-00ce48aac18ac04ed45e9ab8285428f8ecee92be1f7835407168424ab95224f9.otf) format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "Whitney";
    font-style: normal;
    font-weight: 500;
    src:  url(/assets/WhitneySSm-Medium-Pro-5920f52f37aa3dc13d3d641ddb06f9637030689188308f69ae7024891b22529a.woff) format("woff"),
           url(/assets/WhitneySSm-Medium-Pro-13cd263ec25cba1ab86c5a3e5154d8ea449ea50771864f35cde3f8077d9125b8.otf) format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "Whitney";
    font-style: normal;
    font-weight: 700;
    src:  url(/assets/WhitneySSm-Bold-Pro-90dd7f986f5a9afd5ae64c4b72321465e38e92d96b75a0ddb58f69104e2157bf.woff) format("woff"),
           url(/assets/WhitneySSm-Bold-Pro-963c6619f3b4b86440faa1a7f2c9e543b4cada9d52b9e25fa2051d509f436509.otf) format("truetype");
  }
}

/* THEME DEFINITIONS */


@layer components {
  body {
    @apply antialiased;
  }
  body:dark {
    /* @apply bg-gray-900 text-gray-400; */
  }
  main {
    @apply container mx-auto mt-10 px-5 grid;
  }
  .content-container {
    @apply min-h-full flex items-center justify-center py-12 px-4;
  }
  .content-container:small {
    @apply px-6;
  }
  .content-container:lg {
    @apply px-8;
  }
  .page-content {
    @apply max-w-md w-full space-y-8;
  }
  /* Alerts */
  .alert-green {
    @apply py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium;
  }
  /* Elements */
  h2 {
    @apply mt-6 text-center text-3xl;
  }
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=search] {
    /* appearance-none relative block w-full border border-gray-300 placeholder-gray-500 text-gray-900 */
    @apply appearance-none relative block; /* w-full h-12;*/
    width: 100%;
    height: var(--form-field-height);
  }
  .text-field {
    @apply border-gray-300 placeholder-gray-500 text-gray-900 rounded-full;
  }
  .text-field:focus {
    @apply outline-none ring-[var(--color-action)] border-[var(--color-action)] z-10;
  }
  @screen sm {
    
  }
  input[type=checkbox]{
    @apply h-4 w-4 [color:var(--color-action)] border-gray-300;
  }
  input[type=checkbox]:focus {
    @apply ring-[color:var(--color-action)];
  }
  .right-label {
    @apply ml-2 block text-sm;
  }
  .btn {
    /*@apply relative justify-center border border-transparent font-medium;*/
    font-weight: var(--btn-label-weight);
    height: var(--form-field-height);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    max-width: 200px;
    min-width: 3.6rem;
    position: relative;
  }
  .btn:focus {
    @apply outline-none ring-2 ring-offset-2 ring-indigo-500;
  }
  .btn.delete {
    @apply bg-red-600 text-white cursor-pointer;
  }
  .btn.delete:hover {
    @apply bg-red-400;
  }
  .btn.blue {
    @apply bg-blue-700 text-white;
   }
  .btn.blue:hover {
    @apply bg-blue-800;
  }
  .btn.blue:focus {
    @apply ring-4 outline-none ring-blue-300;
  }
  .btn:dark {
    /* @apply bg-blue-600; */
  }
  .btn:dark:hover {
    /* @apply bg-blue-700; */
  }
  .btn:dark:focus {
    /* @apply focus:ring-blue-800; */
  }


  .table-header {
    @apply flex justify-between items-center pb-4;
  }

  .table-header a {
    @apply px-8 py-4;
    background-color: var(--btn-action-base);
    border-radius: var(--corner-radius-full);
    color: var(--btn-label-color);
    font-weight: var(--btn-label-weight);
    text-decoration: none;
  }

  .table-header a:hover {
    background-color: var(--btn-action-hover);
    color: var(--btn-label-color);
  }

  .table-container {
    @apply relative overflow-x-auto shadow-md;
    border-radius: var(--corner-radius-2xl);
    margin-bottom: 1rem;
    background-color: white;
  }

  .admin-table, .user-table {
    @apply w-full text-sm text-left text-gray-500;
  }
  .admin-table:rtl, .user-table:rtl {
    @apply text-right;
  }
  .admin-table:dark, .user-table:dark {
    @apply text-gray-400
  }

  .admin-table thead, .user-table thead {
    @apply text-xs text-gray-700 uppercase;
    background-color: var(--color-accent-dk);
  }
  .admin-table thead:dark, .user-table thead:dark {
    /* @apply bg-gray-700 text-gray-400; */
  }
  .admin-table th, .user-table th {
    @apply px-6 py-3;
  }

  .admin-table tbody tr, .user-table tbody tr {
    @apply border-b;
  }
  .admin-table tbody tr:last-child, .user-table tbody tr:last-child {
    border: none;
  }
  .admin-table tbody tr:dark, .user-table tbody tr {
    /* @apply border-gray-700; */
  }
  .admin-table tbody tr:nth-child(even), .user-table tbody tr:nth-child(even) {
    background-color: var(--color-accent-lt);
  }
  .admin-table tbody tr:nth-child(even):dark, .user-table tbody tr:nth-child(even):dark {
    /* @apply bg-gray-800; */
  }
  .admin-table tbody tr:nth-child(odd), .user-table tbody tr:nth-child(odd) {
    @apply bg-white; 
  }
  .admin-table tbody tr:nth-child(odd):dark, .user-table tbody tr:nth-child(odd):dark {
    /* @apply bg-nellGray-400;  */
  }
  .user-table tbody tr td {
    padding: 0.4rem;
    font-size: 1rem;
  }

  .graphic-loader {
    @apply w-4 h-4 me-2 text-gray-200 animate-spin;
  }
  .graphic-loader:dark {
    /* @apply text-gray-600; */
  }

  .label-top {
    display: block;
    margin-bottom: 0.5rem;
  }

  .tmp {
    display: grid;
    grid-template-columns: 1fr max-content max-content;
    gap: 1rem;
    grid-template-areas: 'brand personal functional';
  }
  /* .nav-header {
    @apply border-gray-200;
  }
  .nav-header:dark {
    @apply bg-gray-900;
  }*/

}

[data-theme="default"],
[data-theme="app"],
[data-theme="recomatic"],
[data-theme="www"] {
  --font-sans: 'Mandali', sans-serif;
  --font-serif: 'Yeseva One', serif;
  --font-color: black;
  --color-base: #FFDE59;
  --color-primary: blue;
  --color-accent-dk: #ffeea8;
  --color-accent-lt: #fff7d6;
  --color-action: #84C61C;
  --color-action-hover: #B1D873;
  --color-action-secondary: white;
  --color-action-secondary-hover: #c0d89a;
  --color-action-dk: #669716;
  --color-action-dk-hover: #B1D873;
  --color-user: #888888;
  --corner-radius-xl: 0.75rem;
  --corner-radius-2xl: 1rem;
  --corner-radius-3xl: 1.5rem;
  --corner-radius-full: 9999px;
  --form-text-field-color: #FFDE59;
  --btn-action-base: #84C61C;
  --btn-action-hover: #B1D873;
  --btn-label-color: #000000;
  --btn-label-color-hover: #000000;
  --btn-label-weight: 500;
  --form-field-height: 3.5rem;
  --logo-main-height: 30rem;
  --nav-header-color: #FFFFFF;
  --nav-link-color: #84C61C;
  --nav-font-weight: 600;
  --color-admin-bg: #FFDE59;
}

[data-theme="nell"] {
  --font-sans: 'Whitney', sans-serif;
  --font-serif: 'Nantes', serif;
  --font-color: gray;
  --color-base: white;
  --color-primary: blue;
  --color-accent-dk: #E7E2DD;
  --color-accent-lt: #EFEBE7;
  --color-action: #0b0b23;
  --color-action-hover: #131364;
  --color-action-secondary: #E7E2DD;
  --color-action-secondary-hover: #EFEBE7;
  --color-action-dk: #000000;
  --color-action-dk-hover: #333333;
  --color-user: #CCCCCC;
  --corner-radius-xl: 0rem;
  --corner-radius-2xl: 0rem;
  --corner-radius-3xl: 0rem;
  --corner-radius-full: 0px;
  --btn-action-base: #0b0b23;
  --btn-action-hover: #131364;
  --btn-label-color: #FFFFFF;
  --btn-label-color-hover: #FFFFFF;
  --btn-label-weight: 500;
  --form-field-height: 3rem;
  --logo-main-height: 18rem;
  --nav-header-color: #0b0b23;
  --nav-link-color: #FFFFFF;
  --nav-font-weight: 500;
  --color-admin-bg: #0b0b23;
}

html, body {
  font-family: var(--font-sans);
  background-color: var(--color-base);
  color: var(--font-color);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
}

h5, h6 {
  font-weight: 500;
  font-size: 8rem;
}
p {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

a {
  color: var(--color-action);
  text-decoration: underline;
}

a:hover {
  color: var(--color-action-hover);
  border-bottom-color: var(--color-action-hover);
}

.logo {
  height: var(--logo-main-height);
}

nav .logo {
  height: 60px;
}

.nav-header a {
  color: var(--nav-link-color);
  font-weight: var(--nav-font-weight);
  text-decoration: none;
}

.nav-header {
  background-color: var(--nav-header-color);
}

.nav-header p {
  margin-bottom: 0;
}

input[type=text],
input[type=email],
input[type=password],
input[type=search] {
  /* appearance-none relative block w-full border border-gray-300 placeholder-gray-500 text-gray-900 */
  @apply appearance-none relative block w-full; /* w-full h-12;*/
  /*width: 100%;*/
  height: var(--form-field-height);
}

.btn {
  font-weight: var(--btn-label-weight);
  height: var(--form-field-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  max-width: 100%;
  min-width: 3.6rem;
  position: relative;
  z-index: 1;
  background-color: var(--btn-action-base);
  border-radius: var(--corner-radius-full);
  color: var(--btn-label-color);
  font-weight: var(--btn-label-weight);
  border-bottom: none;
  text-decoration: none;
}
.btn.full {
  width: 100%;
}
.btn:hover {
  background-color: var(--btn-action-hover);
  color: var(--btn-label-color-hover);
}
.btn.fixed-width {
  width: 180px;
}
.btn.secondary {
  background-color: var(--color-action-secondary);
}
.btn.secondary:hover {
  background-color: var(--color-action-secondary-hover);
}

.btn.func {
  background-color: var(--btn-action-base);
  color: white;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  height: 2rem;
}

.btn span.icon {
  display: block;
  padding: 0;
}

.icon {
  position: relative;
  padding-left: 1rem;
  margin-left: 1rem;
}

.icon::before {
  content: '';
  position: absolute;
  display: block;
  width: 14px;
  height: 16px;
  margin-left: 0.3rem;
  left: -1rem;
  top: 8px;
}

.btn.icon span::before {
  content: '';
  position: absolute;
  display: block;
  width: 14px;
  height: 16px;
  margin-left: 0.3rem;
  left: -1rem;
  top: 8px;
}

.btn.icon span {
  padding-left: 2rem;
  /* margin-left: -2rem; */
}

span.icon::before {
  top: 2px;
  width: 1rem;
  margin: 0;
  margin-left: -0.4rem;
}

.icon.share::before {
  content: url(/assets/share-from-square-solid.svg);
}

.icon.save::before {
  content: url(/assets/download-solid.svg);
}



.icon.map::before {
  content: url(/assets/location-dot-solid.svg);
}

.btn span.icon::before {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.icon.map::before {
  filter: invert(20%) sepia(243%) saturate(1576%) hue-rotate(-21deg) brightness(137%) contrast(73%);
}

[data-theme="nell"] .btn {
  transition: all 0.2s ease-in-out;
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  font-weight: 700;
}
[data-theme="nell"] .btn.secondary {
  color: var(--color-action);
}
[data-theme="nell"] .btn.secondary:hover {
  color: var(--color-action-hover);
}
[data-theme="nell"] .btn::after {
  content: "";
  border: 1px solid;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-in-out;
  z-index: -1;
  box-sizing: border-box;
}

[data-theme="nell"] .btn:hover::after {
  transform: translate(5px, 5px);
  border-color: var(--color-action-hover);
}
[data-theme="nell"] .btn.secondary::after {
  color: transparent;
}
[data-theme="nell"] .btn.secondary:hover::after {
  border-color: var(--color-action-secondary-hover);
}
.btn.delete {
  font-family: var(--font-sans);
  font-weight: 700;
  color: white;
}
.btn.delete:hover, .btn.blue:hover {
  color: white;
}
.btn.delete::after {
  content: none;
}
[data-theme="nell"] .btn.blue:hover::after {
  border-color: rgb(30 64 175);
}

.user-table {
  font-size: 1rem;
  line-height: 1.5rem;
}

.user-table th {
  padding: 1rem;
}

th a, td a {
  font-weight: 700;
}

[data-theme="nell"] th a, [data-theme="nell"] td a {
  text-decoration: underline;
}



.user-info-container {
  background-color: white;
  border-radius: var(--corner-radius-2xl);
  padding: 1rem;
  margin-bottom: 1rem;
  display: grid;
}

.admin-table thead tr, .user-table thead tr {
  background-color: var(--color-accent-dk);
}

a.legible {
  background-color: rgba(255,255,255,0.7);
  padding: 0.3rem 0.9rem;
  border-radius: 9999rem;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between; /* This will add space around items if there is extra space */
  width: 100%;
}
.flex-group {
  display: flex;
  align-items: center;
}

.flex-container.align-left {
  justify-content: flex-start; /* Align items to the left */
  align-items: center;
}

.flex-container.align-right {
  justify-content: flex-end; /* Align items to the right */
  align-items: center;
}

.flex-container.align-center {
  justify-content: center; /* Align items to the center */
  align-items: center;
}

.user {
  color: var(--color-user);
  display: inline-flex;
  position: relative;
  padding-right: 42px;
  margin: 0;
}

.user::before, .user::after {
  
  display: block;
  position: absolute;
  top: -4px;
  right: 0;
  width: 32px;
  height: 32px;
  
}
.user::before {
  content: "";
  border-radius: 16px;
  background-color: #FFFFFF;
}
.user::after {
  content: url(/assets/user_icon-fbc7f7c1bc78aae6f3d0be7c922e4fb192e6ebacf840aca575e7672ca7809aac.svg);
  filter: invert(1) sepia(0) saturate(10) hue-rotate(0deg) brightness(0.6);
}

[data-theme="nell"] .user::after {
  filter: invert(1) sepia(0) saturate(10) hue-rotate(0deg) brightness(0.6);
}

.text-left {
  text-align: left;
  margin-top: 0;
  margin-bottom: 1rem;
}

.branding .logo {
  max-height: 150px;
}

.branding.center {
  margin: 0 auto 1rem;
}

.graphic-loader {fill: var(--color-action);}
.rounded-xl	{ border-radius: var(--corner-radius-xl); }
.rounded-2xl	{ border-radius: var(--corner-radius-2xl); }
.rounded-3xl { border-radius: var(--corner-radius-3xl); }
.rounded-full	{ border-radius: var(--corner-radius-full); }
@media print {
    html, body {
        background-color: #FFFFFF;
        color: #000000;
        /*font-size: 12px;*/
    }

    .ui-buttons {
        display: none;
    }

    #traveler_email {
        display: none;
    }

    .btn.func {
        background-color: #FFFFFF;
        color: #000000;
        border: 1px solid;
    }
    .btn span.icon::before {
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
    }

    .nav-header {
        display: grid;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    nav .logo {
        height: 100px;
    }

    tr {
        border-bottom: 1px solid #999;
    }
    .user-table tbody tr:nth-child(2n), .user-table thead {
        background-color: transparent!important;
    }

    .user-table thead tr {
        background-color: black;
        color: white;
    }

    .table-container {
        border-radius: 0;
        box-shadow: none;
    }

    a {
        color: black;
    }

    .icon.map::before {
        filter: invert(20%) sepia(243%) saturate(1576%) hue-rotate(-21deg) brightness(0%) contrast(73%);
    }
}
/*
 * 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.
 *


 
 */