@import 'https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=collapse_all,collapse_content,delete,edit,expand_all,expand_content,group,groups,keyboard_arrow_down,keyboard_arrow_up,keyboard_double_arrow_down,keyboard_double_arrow_up,lock,more_down,north,outgoing_mail,person,rss_feed,send,south,sync_alt,unsubscribe&display=block'
  layer(theme);

@layer base {
  /* Use Google Fonts variable Source Sans 3 and Merriweather */
  :root {
    --content-height: calc(100vh - 125px);
    --significance-routine: var(--p-green-500);
    --significance-severe: var(--p-red-500);
    --significance-minimal: var(--p-yellow-500);
    --significance-moderate: var(--p-orange-500);
    --significance-other: var(--p-gray-600);
    --significance-dnd: var(--p-purple-800);
  }

  html,
  body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  .login {
    background: url('../images/loginpageimage.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 100%;
  }

  .login-panel {
    min-width: 800px;
    max-width: 950px;
  }

  @media only screen and (min-width: 600px) {
    html,
    body {
      font-size: 12px;
    }
  }

  @media only screen and (min-width: 1440px) {
    html,
    body {
      font-size: 14px;
    }
  }

  @media only screen and (min-height: 600px) {
    .dataViewTallPanel {
      max-height: calc(var(--content-height) * 0.84);
    }

    .dataTableFullHeight {
      height: calc(var(--content-height) * 0.83);
      max-height: calc(var(--content-height) * 0.86);
    }
  }

  @media only screen and (min-height: 800px) {
    .dataViewTallPanel {
      max-height: calc(var(--content-height) * 0.88);
    }

    .dataTableFullHeight {
      height: calc(var(--content-height) * 0.85);
      max-height: calc(var(--content-height) * 0.9);
    }
  }

  /* to handle the smaller screen size like GFE displaying datatable results */
  @media only screen and (min-height: 100px) {
    .dataViewTallPanel {
      max-height: calc(var(--content-height) * 0.78);
    }

    .dataTableFullHeight {
      height: calc(var(--content-height) * 0.78);
      max-height: calc(var(--content-height) * 0.8);
    }
  }

  .application {
    width: 100vw;
    min-height: 100vh;
    padding: 0px;
    overflow: hidden;
  }

  body {
    min-height: 100vh;
    overflow-y: hidden;
    font-family: 'Source Sans 3', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1 {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--p-blue-600);
  }

  h2 {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    color: var(--p-blue-400);
  }

  p {
    font-family: 'Source Sans 3', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1rem;
    color: var(--p-blue-900);
  }

  a {
    &:active {
      text-decoration: underline !important;
      color: var(--p-blue-500);
    }

    &:visited {
      text-decoration: underline !important;
      color: var(--p-blue-700);
    }

    &:link {
      color: var(--p-blue-700);
      text-decoration: none;
    }

    &:not([class|='p']):hover {
      color: var(--p-blue-400);
      text-decoration: underline;
    }

    &.blueheader {
      &:link,
      &:visited {
        color: var(--p-white);
      }

      &:hover {
        color: var(--p-blue-200);
        text-decoration: underline;
      }
    }
  }

  .blueheader,
  .dataViewCompactHeader {
    .p-button.p-button-text,
    &.p-button.p-button-text {
      background-color: transparent;
      color: var(--p-blue-200);
      border-color: transparent;
    }

    .p-button.p-button-text:enabled:hover,
    &.p-button.p-button-text:enabled:hover {
      background: rgba(17, 116, 192, 0.04);
      color: var(--p-sky-400);
      border-color: transparent;
    }

    .p-button.p-button.p-button-text:enabled:active,
    &.p-button.p-button.p-button-text:enabled:active {
      background: transparent;
      color: var(--p-sky-200);
      border-color: transparent;
    }
  }

  .columnSelectorHeader {
    background-color: var(--p-blue-500);
    color: var(--p-white);
    margin: -0.5rem -0.5rem 0rem -0.5rem;
  }

  /* to hide the header row in the column selection "table" */
  .columnSelector .p-datatable-thead > tr > th {
    display: none;
  }

  /* to handle the selected row style in the column selection "table" */
  .columnSelector .p-datatable-tbody > tr.p-highlight {
    background: var(--p-white);
    color: var(--p-zinc-500);
  }

  .subtext {
    color: var(--p-gray-600);
    font-size: 0.75rem;
  }

  .asterisk-for-mandatory::after {
    content: ' *';
    color: var(--p-red-500);
    font-weight: 1.2em;
  }

  .tooltip-wider {
    max-width: 30rem;
  }

  .event-banner {
    color: white !important;
    &.worsening {
      background-color: var(--p-red-500);
    }
    &.nochange {
      background-color: var(--p-yellow-800);
    }
    &.improving {
      background-color: var(--p-green-600);
    }
    &.undetermined {
      background-color: var(--p-sky-500);
    }
    &.noupdates {
      background-color: var(--p-purple-800);
    }
  }

  /*// SIGNIFICANCE CRITERIA STYLES // */
  .auto-green {
    color: var(--significance-green);
  }
  .auto-red {
    color: var(--significance-red);
  }
  .routine {
    color: var(--significance-green);
  }
  .minimal {
    color: var(--significance-yellow);
  }
  .moderate {
    color: var(--significance-orange);
  }
  .severe {
    color: var(--significance-red);
  }
  .no-value {
    color: var(--significance-gray);
  }

  /*//SIDEBAR MENU STYLES// */
  .header {
    text-align: center;
    color: var(--p-white);
    background-color: var(--p-blue-500);
    font-size: 0.85rem;
    border: 1px solid var(--p-blue-500);
  }
  .menu-content {
    margin-left: 0.5rem;
    border: 1px solid var(--p-gray-500);
    width: 10.5rem;
  }

  .new-marker + .marker-cluster-badge-small,
  .followup-marker + .marker-cluster-badge-small,
  .new-marker + .marker-cluster-badge-medium,
  .followup-marker + .marker-cluster-badge-medium,
  .new-marker + .marker-cluster-badge-large,
  .followup-marker + .marker-cluster-badge-large {
    background-color: transparent;
  }

  .highlightRed {
    color: var(--p-red-500);
  }

  mark {
    background-color: var(--p-green-200);
    font-weight: 800;
    color: inherit;
  }

  .p-togglebutton-checked * mark {
    color: var(--p-togglebutton-color);
  }

  /* styles needed for the material icons and to override the font-size so that they are more appropriate for the size of the table */
  .material-symbols-outlined {
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
    font-size: 1.5rem;
    display: block;
  }

  .severeLabel {
    color: var(--p-red-500);
    font-weight: 700;
  }

  .moderateLabel {
    color: var(--p-orange-600);
    font-weight: 700;
  }

  .minimalLabel {
    color: var(--p-yellow-600);
    font-weight: 700;
  }

  .routineLabel {
    color: var(--p-green-500);
    font-weight: 700;
  }

  /*///WILL UPDATE WHEN NEW LAYOUT(S) IS CREATED
.tab-button {
  border-radius: 0 4px 4px 0 !important;
  background-color: var(--p-white) !important;
  border: 1px solid var(--p-blue-500) !important;
  color: var(--p-blue-500) !important;
  width: 0.625rem !important;
  height: 2.875rem !important;
  padding-right: 18px !important;
  padding-left: 15px !important;
  margin-top: 1px !important;
}
 ///*/
}