@import url('//fonts.googleapis.com/css2?family=Mukta:wght@300;400;600;700&display=block');

@layer reset {

  html,
  body {
    margin: 0;
    padding: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
  }

  p {
    margin: 0;
    padding: 0;
  }

  button {
    padding: 0;
    border: none;
    font-size: 1.125rem;
    font-family: inherit;
    background: none;
  }

  input {
    font-family: inherit;
    font-size: 1.125rem;
  }
}

@layer nc-px-design-system {
  :root {
    --default-font: 'Mukta', sans-serif;

    /* NC Patient Experience Design System */

    /* Color Palette */
    --nc-px-color-black: #242627;
    --nc-px-color-grey: #afafaf;
    --nc-px-color-light-grey: #d7d7d7;
    --nc-px-color-dark-grey: #5e5e5e;
    --nc-px-color-white: #ffffff;
    --nc-px-color-dark-green: #3b7c50;
    --nc-px-color-primary-green: #49915d;
    --nc-px-color-medium-green: #56be75;
    --nc-px-color-avocado-green: #2d9b12;
    --nc-px-color-light-green: #b9e6af;
    --nc-px-color-pale-green: #e5f2dc;
    --nc-px-color-winter-green: #ebefeb;
    --nc-px-color-coral: #ff846b;
    --nc-px-color-sun: #e4d455;
    --nc-px-color-light-yellow: #f7f2cc;
    --nc-px-color-cherry: #d50035;
    --nc-px-color-plum: #743b72;
    --nc-px-color-peach: #f6f2cc;
    --nc-px-color-pink: #ffdad2;
    --nc-px-color-light-jam: #f8eef8;
    --nc-px-color-primary-blue: #0b6db2;
    --nc-px-color-primary-blue-dark: #1150a2;
    --nc-px-color-primary-blue-light: #dbf3ff;
    --nc-px-color-background-light: #f0f2f5;
    --nc-px-color-notification: #7524b5;
    --nc-px-color-location: #7c317b;
    --nc-px-color-jam: #5b155a;
    --nc-px-color-iris: #dbf3ff;
    --nc-px-color-iris-800: #0e446b;
    --nc-px-color-status-caution-light: #fff1cc;
    --nc-px-color-status-error-light: #fbe6eb;
    --nc-px-color-status-error: #D50035;
    --nc-px-color-status-error-dark: #8A0022;
    --nc-px-color-shades-neutral-300: #c3c7cc;
    --nc-px-color-text-placeholder: #83838d;
    --nc-px-color-text-secondary: #555860;

    /* Typography */
    --nc-px-type-root-height: 16px;
    --nc-px-type-body-1-font: 1.125rem/1.375 var(--default-font);
    --nc-px-type-body-1-strong-weight: 700;
    --nc-px-type-body-2-font: 1rem/1.25 var(--default-font);
    --nc-px-type-t1-font: 2.25rem/2.625 var(--default-font);
    --nc-px-type-t1-weight: 300;
    --nc-px-type-t2-font: 2rem/2.375 var(--default-font);
    --nc-px-type-t2-weight: normal;
    --nc-px-type-t3-font: 1.5rem/1.75 var(--default-font);
    --nc-px-type-t3-weight: normal;
    --nc-px-type-t4-font: 1.25rem/1.5 var(--default-font);
    --nc-px-type-t4-weight: 700;
    --nc-px-type-t5-font: 1.125rem/1.375 var(--default-font);
    --nc-px-type-t5-weight: 700;
    --nc-px-type-button-font: var(--nc-px-type-body-1-font);
    --nc-px-type-button-weight: 600;

    /* Spacing */
    --nc-px-spacing-lg: 1.5rem;
    --nc-px-spacing-base: 1rem;
    --nc-px-spacing-sm: .75rem;
    --nc-px-spacing-xs: .5rem;
    --nc-px-spacing-xxs: .25rem;

    /* Configure application colors */
    --bg-light: var(--nc-px-color-background-light);
    --text-primary: var(--nc-px-color-black);

    /* Application Base Styles */
    font: 16px/1.25 var(--default-font);
    background-color: var(--bg-light);
    color: var(--text-primary);
  }

  html,
  body {
    height: 100%;
  }

  body {
    * {
      box-sizing: border-box;
    }
  }
}

@layer nc-px-design-system.components {
  .nc-button {
    --nc-button-bg: var(--nc-px-color-primary-blue-dark);
    --nc-button-fg: var(--nc-px-color-white);
    --nc-button-bg-hover: var(--nc-px-color-primary-blue);
    font: var(--nc-px-type-button-font);
    font-weight: var(--nc-px-type-button-weight);
    background-color: var(--nc-button-bg);
    color: var(--nc-button-fg);
    border-radius: 2em;
    cursor: pointer;

    padding-inline: 1em;
    padding-block: 0.5em;
    text-decoration: none;

    &:hover {
      --nc-button-bg: var(--nc-button-bg-hover);
    }

    &.nc-button__secondary {
      --nc-button-bg: var(--nc-px-color-white);
      --nc-button-fg: var(--nc-px-color-primary-blue);
      --nc-button-bg-hover: var(--nc-px-color-white);
      border: var(--nc-px-color-primary-blue) 1px solid;
    }

    &.nc-button__tertiary {
      --nc-button-bg: none;
      --nc-button-fg: var(--nc-px-color-primary-blue);
      --nc-button-bg-hover: var(--nc-px-color-primary-blue-dark);
      font: var(--nc-px-type-body-2-font);
      padding-inline: 0;
      height: 1.875rem;


      &:hover {
        --nc-button-fg: var(--nc-px-color-primary-blue-dark)
      }
    }
  }

  .nc-link {
    --nc-link-bg: transparent;
    --nc-link-fg: var(--nc-px-color-primary-blue);
    --nc-link-fg-hover: var(--nc-px-color-primary-blue-dark);
    --nc-link-fg-visited: var(--nc-px-color-location);
    background-color: var(--nc-link-bg);
    text-decoration: underline;
    cursor: pointer;

    &:link{
      color: var(--nc-link-fg);
    }

    &:visited {
      color: var(--nc-link-fg-visited);
    }

    &:hover {
      color: var(--nc-link-fg-hover);
    }

    &:active {
      color: var(--nc-link-fg);
    }
  }

  .nc-dialog[open] {
    width: 21.75rem;
    padding: 0;
    border-radius: 0.5rem;
    border: none;

    .nc-dialog__top-bar {
      display: flex;
      flex-direction: row-reverse;
      padding: var(--nc-px-spacing-sm) var(--nc-px-spacing-sm)0 var(--nc-px-spacing-sm);

      .nc-dialog__close {
        height: 0.75rem;
        width: 0.75rem;
        line-height: 0.75rem;
        cursor: pointer;

        i {
          height: 0.75rem;
          width: 0.75rem;
          color: var(--nc-px-color-primary-blue);
        }
      }
    }

    .nc-dialog__content {
      display: flex;
      flex-direction: column;
      gap: var(--nc-px-spacing-lg);
      padding: 0 var(--nc-px-spacing-lg) var(--nc-px-spacing-lg) var(--nc-px-spacing-lg);

      .nc-dialog__body {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: var(--nc-px-spacing-xxs);
      }

      .nc-dialog__actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding-inline: var(--nc-px-spacing-lg);
        width: 100%;
        gap: var(--nc-px-spacing-sm);
        box-sizing: border-box;

        .nc-button {
          flex-grow: 1;
        }
      }
    }

    &::backdrop {
      background-color: var(--nc-px-color-black);
      opacity: 50%;
    }
  }

  .nc-input {
    height: 2.75rem;
    padding: .6875rem .75rem;
    border: 1px solid var(--nc-px-color-shades-neutral-300);
    border-radius: 4px;
    background: var(--nc-px-color-white);
  }

  .nc-input:focus {
    border-color: var(--nc-px-color-primary-blue);
    outline-color: var(--nc-px-color-primary-blue);
  }

  .nc-input__helper {
    font: var(--nc-px-type-body-2-font);
    font-weight: 400;
    color: var(--nc-px-color-text-secondary);
  }

  .nc-input__label {
    font: var(--nc-px-type-body-2-font);
    font-weight: 600;
    color: var(--nc-px-color-text-secondary);
  }
}

/* Design System utilities to easily apply styles */
@layer nc-px-design-system.utilities {
  .nc-type-t1 {
    font: var(--nc-px-type-t1-font);
    font-weight: var(--nc-px-type-t1-weight);
  }

  .nc-type-t2 {
    font: var(--nc-px-type-t2-font);
    font-weight: var(--nc-px-type-t2-weight);
  }

  .nc-type-t3 {
    font: var(--nc-px-type-t3-font);
    font-weight: var(--nc-px-type-t3-weight);
  }

  .nc-type-t4 {
    font: var(--nc-px-type-t4-font);
    font-weight: var(--nc-px-type-t4-weight);
  }

  .nc-type-t5 {
    font: var(--nc-px-type-t5-font);
    font-weight: var(--nc-px-type-t5-weight);
  }

  .nc-type-body-1 {
    font: var(--nc-px-type-body-1-font);
  }

  .nc-type-body-1-strong {
    font: var(--nc-px-type-body-1-font);
    font-weight: var(--nc-px-type-body-1-strong-weight);
  }

  .nc-type-body-2 {
    font: var(--nc-px-type-body-2-font);
  }

  .invisible {
    visibility: hidden;
    display: none !important;
  }
}

@layer component {
  #nc-application {
    height: 100%;
    display: grid;
    grid-template-rows: 3.75rem
      /* 48px */
      1fr;
    grid-template-areas: 'top-nav' 'main' 'global-footer';

    .top-nav {
      grid-area: top-nav;

      .top-nav__content {
        max-width: 1536px;
      }
    }

    .global-footer {
      grid-area: global-footer;
    }

    main {
      grid-area: main;
      display: flex;
      flex-direction: column;

      &.main--global-header {
        display: grid;
        grid-template-rows: max-content 1fr;
        grid-template-areas: 'global-header' 'screen';
      }
    }
  }

  .global-header {
    grid-area: 'global-header';
    background-color: var(--nc-px-color-iris-800);
    height: 99px;
    width: 100%;
    overflow: hidden;
    position: relative;
    min-width: 358px;

    .global-header__title {
      color: var(--nc-px-color-white);
      margin-left: var(--nc-px-spacing-lg);
      margin-top: 1.125rem;
      max-width: 65%;
    }

    .global-header__circle {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      bottom: -35px;
    }

    .global-header__cover {
      height: 23px;
      bottom: -1px;
      left: 0;
      right: 0;
      position: absolute;
    }

    .global-header__icon {
      align-items: center;
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0);

      img {
        height: 40px;
        width: 40px;
      }
    }
  }

  .top-nav {
    background-color: var(--nc-px-color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 var(--nc-px-spacing-base);
    width: 100%;
    min-height: 60px;
    position: relative;

    .top-nav__content {
      width: 100%;
      max-width: 1660px;
      height: 100%;
    }

    .top-nav__brand {
      position: absolute;
      top: 0;
      transform: translate(0, 70%);
      height: 26px;
    }

    .top-nav__button {
      --top-nav-button-bg: transparent;
      --top-nav-button-fg: var(--nc-px-color-primary-blue);
      background-color: var(--top-nav-button-bg);
      color: var(--top-nav-button-fg);
      padding-inline: var(--nc-px-spacing-base);
      text-decoration: none;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      cursor: pointer;

      .top-nav__button-path {
        fill: var(--top-nav-button-fg);
      }

      &:hover {
        --top-nav-button-fg: var(--nc-px-color-primary-blue-dark);
      }

      &:active {
        --top-nav-button-fg: var(--nc-px-color-primary-blue);
      }
    }
  }

  .screen {
    grid-area: screen;

    max-width: 480px;
    margin-inline: auto;
    padding-block: 3.75rem;

    @media (width < 576px) {
      max-width: 100%;
      padding-inline: 16px;
    }
  }

  .global-footer {
    padding: var(--nc-px-spacing-base);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    background-color: var(--nc-px-color-white);

    .global-footer__content {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 1536px;
      gap: var(--nc-px-spacing-xxs);

      .global-footer__links {
        height: 2.125rem;
        display: flex;
        flex-direction: row;
        gap: var(--nc-px-spacing-xxs) var(--nc-px-spacing-base);
        flex-wrap: wrap;

        /* wrap help link below other links  */
        @media (width < 376px) {
          height: unset;

          >a:last-child {
            flex-basis: 100%;
          }
        }
      }
    }
  }
}

@layer font-awesome {
  .fa-check-circle {
    color: var(--nc-px-color-avocado-green);
  }
}