@import url('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');

/* 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);
  }
}

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);
}
.application {
  width: 100vw;
  min-height: 100vh;
  padding: 0px;
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

.blueheader .p-button.p-button.p-button-text:enabled:active,
.blueheader.p-button.p-button.p-button-text:enabled:active,
.dataViewCompactHeader .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);
}

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

.worsening-event-banner {
  background-color: var(--p-red-500);
}
.nochange-event-banner {
  background-color: var(--p-warning);
}

.noupdates-event-banner h3,
.nochange-event-banner h3 {
  color: var(--p-zinc-800);
}

.improving-event-banner {
  background-color: var(--p-green-600);
}
.undetermined-event-banner {
  background-color: var(--p-sky-500);
}

/*// 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-gray-200);
  font-weight: bold;
}

/*///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;
}
 ///*/