/*Remove default browser styles*/
button,
p {
  all: unset;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

body {
  /*overflow-y: scroll;*/
}

body * {
}

.app {
  font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #303030;
  background-color: #E5E5E5;
  min-height: 100dvh;
  overflow: hidden;
  line-height: 1.3;
  overscroll-behavior-y: none;
}

.app * {
  box-sizing: border-box;
}

@media(prefers-color-scheme: light) {
  .app {
    background-color: #E5E5E5;
    color: #303030;
  }
}

/*.header {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  height: 53px;*/
/*  padding: 15px 24px;*/
/*  width: calc(100% - 48px);*/
/*  background-color: white;*/
/*  border-bottom: 1px solid #D4D4D4;*/
/*}*/

.flex {
  display: flex;
}

.text-button-container:hover {
  color: #000000 !important;
}

.text-link-container:hover {
  text-decoration: underline !important;
}

.round-button:hover {
  background-color: #F2F2F2 !important;
}

.primary-button-container:hover {
  background-color: #555555 !important;
}

.outline-button-container:hover {
  background-color: #F2F2F2 !important;
}

.outline-button-container-disabled:hover {
  background-color: #DDDDDD !important;
}

.search-input::placeholder {
  font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
  color: #333333;
}

.search-input {
  /*border-radius: 6px;*/
  /*padding: 0 20px;*/
  font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
  border: none;
  width: calc(100% - 96px);
  max-width: calc(100% - 96px);
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border-radius: 112px;
  padding: 17px 48px;
}

/*TODO move this somewhere more appropriate, such as in the textfield component*/
.text-input {
  font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  /*width: calc(100% - 24px);*/
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  font-size: 14px;
  padding: 8px 12px;
}

.text-input::placeholder {
  font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
  /*color: #9a9a9a;*/
  color: #8d8d8d;
}

.visible-on-hover:hover {
  opacity: 1 !important;
}

.menu-button:hover {
  background-color: #F2F2F2 !important;
}

.dropdown-item:hover {
  background-color: #F2F2F2 !important;
}

.dropdown-button-container:hover {
  color: #555555 !important;
}

.heart-button-container:hover {
  color: #555555 !important;
}

.hidden {
  display: none;
}

input[type="file"] {
  display: none;
}

/* Color picker */
input[type="color"] {
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #D4D4D4;
  /*border-style: inset;*/
  width: 40px;
  height: 40px;
  cursor: pointer;
}

input[type="color"]::-moz-color-swatch {
  border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}


/** Mobile nav **/
/*.hide {*/
/*  -moz-animation: hideAnimation 0s ease-in 5s forwards;*/
/*  !* Firefox *!*/
/*  -webkit-animation: hideAnimation 0s ease-in 5s forwards;*/
/*  !* Safari and Chrome *!*/
/*  -o-animation: hideAnimation 0s ease-in 5s forwards;*/
/*  !* Opera *!*/
/*  animation: hideAnimation 0s ease-in 5s forwards;*/
/*  -webkit-animation-fill-mode: forwards;*/
/*  animation-fill-mode: forwards;*/
/*}*/

@keyframes hideAnimation {
  to {
    width:0;
    height:0;
    overflow:hidden;
    z-Index: -10;
  }
}
@-webkit-keyframes hideAnimation {
  to {
    width:0;
    height:0;
    visibility:hidden;
    z-Index: -10;
  }
}:root {
  --black-a1: rgba(0, 0, 0, 0.05);
  --black-a2: rgba(0, 0, 0, 0.1);
  --black-a3: rgba(0, 0, 0, 0.15);
  --black-a4: rgba(0, 0, 0, 0.2);
  --black-a5: rgba(0, 0, 0, 0.3);
  --black-a6: rgba(0, 0, 0, 0.4);
  --black-a7: rgba(0, 0, 0, 0.5);
  --black-a8: rgba(0, 0, 0, 0.6);
  --black-a9: rgba(0, 0, 0, 0.7);
  --black-a10: rgba(0, 0, 0, 0.8);
  --black-a11: rgba(0, 0, 0, 0.9);
  --black-a12: rgba(0, 0, 0, 0.95);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --black-a1: color(display-p3 0 0 0 / 0.05);
      --black-a2: color(display-p3 0 0 0 / 0.1);
      --black-a3: color(display-p3 0 0 0 / 0.15);
      --black-a4: color(display-p3 0 0 0 / 0.2);
      --black-a5: color(display-p3 0 0 0 / 0.3);
      --black-a6: color(display-p3 0 0 0 / 0.4);
      --black-a7: color(display-p3 0 0 0 / 0.5);
      --black-a8: color(display-p3 0 0 0 / 0.6);
      --black-a9: color(display-p3 0 0 0 / 0.7);
      --black-a10: color(display-p3 0 0 0 / 0.8);
      --black-a11: color(display-p3 0 0 0 / 0.9);
      --black-a12: color(display-p3 0 0 0 / 0.95);
    }
  }
}

:root, .light, .light-theme {
  --indigo-1: #fdfdfe;
  --indigo-2: #f7f9ff;
  --indigo-3: #edf2fe;
  --indigo-4: #e1e9ff;
  --indigo-5: #d2deff;
  --indigo-6: #c1d0ff;
  --indigo-7: #abbdf9;
  --indigo-8: #8da4ef;
  --indigo-9: #3e63dd;
  --indigo-10: #3358d4;
  --indigo-11: #3a5bc7;
  --indigo-12: #1f2d5c;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --indigo-1: color(display-p3 0.992 0.992 0.996);
      --indigo-2: color(display-p3 0.971 0.977 0.998);
      --indigo-3: color(display-p3 0.933 0.948 0.992);
      --indigo-4: color(display-p3 0.885 0.914 1);
      --indigo-5: color(display-p3 0.831 0.87 1);
      --indigo-6: color(display-p3 0.767 0.814 0.995);
      --indigo-7: color(display-p3 0.685 0.74 0.957);
      --indigo-8: color(display-p3 0.569 0.639 0.916);
      --indigo-9: color(display-p3 0.276 0.384 0.837);
      --indigo-10: color(display-p3 0.234 0.343 0.801);
      --indigo-11: color(display-p3 0.256 0.354 0.755);
      --indigo-12: color(display-p3 0.133 0.175 0.348);
    }
  }
}

:root, .light, .light-theme {
  --mauve-1: #fdfcfd;
  --mauve-2: #faf9fb;
  --mauve-3: #f2eff3;
  --mauve-4: #eae7ec;
  --mauve-5: #e3dfe6;
  --mauve-6: #dbd8e0;
  --mauve-7: #d0cdd7;
  --mauve-8: #bcbac7;
  --mauve-9: #8e8c99;
  --mauve-10: #84828e;
  --mauve-11: #65636d;
  --mauve-12: #211f26;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --mauve-1: color(display-p3 0.991 0.988 0.992);
      --mauve-2: color(display-p3 0.98 0.976 0.984);
      --mauve-3: color(display-p3 0.946 0.938 0.952);
      --mauve-4: color(display-p3 0.915 0.906 0.925);
      --mauve-5: color(display-p3 0.886 0.876 0.901);
      --mauve-6: color(display-p3 0.856 0.846 0.875);
      --mauve-7: color(display-p3 0.814 0.804 0.84);
      --mauve-8: color(display-p3 0.735 0.728 0.777);
      --mauve-9: color(display-p3 0.555 0.549 0.596);
      --mauve-10: color(display-p3 0.514 0.508 0.552);
      --mauve-11: color(display-p3 0.395 0.388 0.424);
      --mauve-12: color(display-p3 0.128 0.122 0.147);
    }
  }
}

:root, .light, .light-theme {
  --purple-1: #fefcfe;
  --purple-2: #fbf7fe;
  --purple-3: #f7edfe;
  --purple-4: #f2e2fc;
  --purple-5: #ead5f9;
  --purple-6: #e0c4f4;
  --purple-7: #d1afec;
  --purple-8: #be93e4;
  --purple-9: #8e4ec6;
  --purple-10: #8347b9;
  --purple-11: #8145b5;
  --purple-12: #402060;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --purple-1: color(display-p3 0.995 0.988 0.996);
      --purple-2: color(display-p3 0.983 0.971 0.993);
      --purple-3: color(display-p3 0.963 0.931 0.989);
      --purple-4: color(display-p3 0.937 0.888 0.981);
      --purple-5: color(display-p3 0.904 0.837 0.966);
      --purple-6: color(display-p3 0.86 0.774 0.942);
      --purple-7: color(display-p3 0.799 0.69 0.91);
      --purple-8: color(display-p3 0.719 0.583 0.874);
      --purple-9: color(display-p3 0.523 0.318 0.751);
      --purple-10: color(display-p3 0.483 0.289 0.7);
      --purple-11: color(display-p3 0.473 0.281 0.687);
      --purple-12: color(display-p3 0.234 0.132 0.363);
    }
  }
}

:root, .light, .light-theme {
  --violet-1: #fdfcfe;
  --violet-2: #faf8ff;
  --violet-3: #f4f0fe;
  --violet-4: #ebe4ff;
  --violet-5: #e1d9ff;
  --violet-6: #d4cafe;
  --violet-7: #c2b5f5;
  --violet-8: #aa99ec;
  --violet-9: #6e56cf;
  --violet-10: #654dc4;
  --violet-11: #6550b9;
  --violet-12: #2f265f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --violet-1: color(display-p3 0.991 0.988 0.995);
      --violet-2: color(display-p3 0.978 0.974 0.998);
      --violet-3: color(display-p3 0.953 0.943 0.993);
      --violet-4: color(display-p3 0.916 0.897 1);
      --violet-5: color(display-p3 0.876 0.851 1);
      --violet-6: color(display-p3 0.825 0.793 0.981);
      --violet-7: color(display-p3 0.752 0.712 0.943);
      --violet-8: color(display-p3 0.654 0.602 0.902);
      --violet-9: color(display-p3 0.417 0.341 0.784);
      --violet-10: color(display-p3 0.381 0.306 0.741);
      --violet-11: color(display-p3 0.383 0.317 0.702);
      --violet-12: color(display-p3 0.179 0.15 0.359);
    }
  }
}

/* reset */

button,
p {
    all: unset;
}

.NavigationMenuRoot {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100vw;
    z-index: 1;
    background-color: pink;
}

.NavigationMenuList {
    display: flex;
    justify-content: center;
    background-color: white;
    padding: 4px;
    border-radius: 6px;
    list-style: none;
    box-shadow: 0 2px 10px var(--black-a7);
    margin: 0;
}

.NavigationMenuTrigger,
.NavigationMenuLink {
    padding: 8px 12px;
    outline: none;
    user-select: none;
    font-weight: 500;
    line-height: 1;
    border-radius: 4px;
    font-size: 15px;
    color: var(--violet-11);
}

.NavigationMenuTrigger:focus,
.NavigationMenuLink:focus {
    box-shadow: 0 0 0 2px var(--violet-7);
}

.NavigationMenuTrigger:hover,
.NavigationMenuLink:hover {
    background-color: var(--violet-3);
}

.NavigationMenuTrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
}

.NavigationMenuLink {
    display: block;
    text-decoration: none;
    font-size: 15px;
    line-height: 1;
}

.NavigationMenuContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation-duration: 250ms;
    animation-timing-function: ease;
}

.NavigationMenuContent[data-motion='from-start'] {
    animation-name: enterFromLeft;
}

.NavigationMenuContent[data-motion='from-end'] {
    animation-name: enterFromRight;
}

.NavigationMenuContent[data-motion='to-start'] {
    animation-name: exitToLeft;
}

.NavigationMenuContent[data-motion='to-end'] {
    animation-name: exitToRight;
}

@media only screen and (min-width: 600px) {
    .NavigationMenuContent {
        width: auto;
    }
}

.NavigationMenuIndicator {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 10px;
    top: 100%;
    overflow: hidden;
    z-index: 1;
    transition: width, transform 250ms ease;
}

.NavigationMenuIndicator[data-state='visible'] {
    animation: fadeIn 200ms ease;
}

.NavigationMenuIndicator[data-state='hidden'] {
    animation: fadeOut 200ms ease;
}

.NavigationMenuViewport {
    position: relative;
    transform-origin: top center;
    margin-top: 10px;
    width: 100%;
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
    /*height: var(--radix-navigation-menu-viewport-height);*/
    transition: width, height, 300ms ease;
}

.NavigationMenuViewport[data-state='open'] {
    animation: scaleIn 200ms ease;
}

.NavigationMenuViewport[data-state='closed'] {
    animation: scaleOut 200ms ease;
}

@media only screen and (min-width: 600px) {
    /*.NavigationMenuViewport {*/
    /*    width: var(--radix-navigation-menu-viewport-width);*/
    /*}*/
}

.List {
    display: grid;
    padding: 22px;
    margin: 0;
    column-gap: 10px;
    list-style: none;
}

@media only screen and (min-width: 600px) {
    .List.one {
        width: 500px;
        grid-template-columns: 0.75fr 1fr;
    }
    .List.two {
        width: 600px;
        grid-auto-flow: column;
        grid-template-rows: repeat(3, 1fr);
    }
}

.ListItemLink {
    display: block;
    outline: none;
    text-decoration: none;
    user-select: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
}

.ListItemLink:focus {
    box-shadow: 0 0 0 2px var(--violet-7);
}

.ListItemLink:hover {
    background-color: var(--mauve-3);
}

.ListItemHeading {
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 5px;
    color: var(--violet-12);
}

.ListItemText {
    color: var(--mauve-11);
    line-height: 1.4;
    font-weight: initial;
}

.Callout {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--purple-9) 0%, var(--indigo-9) 100%);
    border-radius: 6px;
    padding: 25px;
    text-decoration: none;
    outline: none;
    user-select: none;
}

.Callout:focus {
    box-shadow: 0 0 0 2px var(--violet-7);
}

.CalloutHeading {
    color: white;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 16px;
    margin-bottom: 7px;
}

.CalloutText {
    color: var(--mauve-4);
    font-size: 14px;
    line-height: 1.3;
}

.ViewportPosition {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    top: 100%;
    left: 0;
    perspective: 2000px;
}

.CaretDown {
    position: relative;
    color: var(--violet-10);
    top: 1px;
    transition: transform 250ms ease;
}

[data-state='open'] > .CaretDown {
    transform: rotate(-180deg);
}

.Arrow {
    position: relative;
    top: 70%;
    background-color: white;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border-top-left-radius: 2px;
}

@keyframes enterFromRight {
    from {
        opacity: 0;
        transform: translateX(200px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes enterFromLeft {
    from {
        opacity: 0;
        transform: translateX(-200px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes exitToRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(200px);
    }
}

@keyframes exitToLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-200px);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: rotateX(-30deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotateX(0deg) scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: rotateX(0deg) scale(1);
    }
    to {
        opacity: 0;
        transform: rotateX(-10deg) scale(0.95);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}