/* Wrapper and background layer behind resultsContent for design effect */
.results-content-wrapper {
  position: relative;
  /* increase horizontal padding to reveal more gradient around the card */
  padding: 1.75rem;
}

/* Remove any default card shadow/background/border from the results shell */
.card.results-summary {
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  flex-direction: column;
}

.card.results-summary > .results-content-wrapper {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}

/* Aggressively neutralize any remaining shadows in the results area */
.results-content-wrapper *,
.results-content-wrapper .results-card,
.results-content-wrapper .results-means,
.results-content-wrapper #metacard,
.results-content-wrapper #resultsContent,
.results-content-wrapper .results-bg {
  box-shadow: none !important;
}

.results-bg {
  position: absolute;
  inset: 0;
  background: transparent linear-gradient(180deg, #002533 0%, #07C7CB 54%, #0191FC 100%) 0% 0% no-repeat padding-box;
  z-index: 0;
}
#testResultDetailDiv .results-card {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: none;
  border-radius: 6px;
  padding: 0.6rem;
  width: 100%;
  /* slightly narrower card to show more background on the sides */
  max-width: 780px; /* was 900px */
  margin: 0 auto;   /* center within wrapper */
}

#testResultDetailDiv .results-card .results-meta-card {
  margin-bottom: 0;
}

#testResultDetailDiv .results-card .results-means {
  background: transparent;
  padding-top: 0.6rem;
  border-radius: 0;
  box-shadow: none;
}
#metacard.results-meta-card {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  padding: 0.6rem;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.03);
  width: 100%;
}

#resultsContent.results-content-bg {
  position: relative;
  z-index: 1;
}
/* Background for results content per XD spec — matches container size */
#resultsContent.results-content-bg {
  position: relative;
  width: 100%;
  background: transparent linear-gradient(180deg, #002533 0%, #07C7CB 54%, #0191FC 100%) 0% 0% no-repeat padding-box;
  background-size: cover; /* ensure full coverage */
  opacity: 1;
}

/* Medium/Large screens can let it grow full width while keeping the gradient */
@media (min-width: 641px) {
  #resultsContent.results-content-bg {
    width: 100%;
  }
  /* Slightly widen wrapper padding on medium/large screens */
  .results-content-wrapper {
    padding: 2.5rem; /* widen sides to reveal more gradient */
  }
  /* Allow a bit wider card on larger screens */
  #testResultDetailDiv .results-card {
    max-width: 700px; /* ~10% narrower on medium/large screens */
    box-shadow: none;
  }
  .card.results-summary > .results-content-wrapper {
    max-width: 740px; /* keep outer wrapper proportionally narrower */
  }
}

/* Small screens: mirror the medium/large layout while allowing full-width container */
@media (max-width: 640px) {
  .results-content-wrapper {
    padding: 1rem; /* modest padding to maintain spacing */
  }
  #testResultDetailDiv .results-card {
    max-width: 100%;
    padding: 0.75rem;
  }
  .card.results-summary,
  .card.results-summary > .results-content-wrapper {
    max-width: 100%;
  }
  #testResultDetailDiv .results-means-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
  }
  #testResultDetailDiv .results-workload-label {
    grid-template-columns: 2.2fr 1fr 1fr !important;
    align-items: center;
    row-gap: 0;
    padding: 8px 0;
  }
  #testResultDetailDiv .results-workload-label > div {
    padding: 6px 12px;
  }
  #testResultDetailDiv .results-workload-label img {
    width: 28px;
    height: 28px;
  }
  .results-actions-row {
    flex-direction: row;
    width: auto;
    gap: 1em !important;
  }
  .results-actions-row .results-action-button {
    width: auto;
  }
  .cta-row {
    width: auto;
  }
  .cta-btn {
    width: 300px;
    max-width: 100%;
  }
}
.cta-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.75em;
}

.cta-btn {
  box-sizing: border-box;
  width: 392px;
  height: 50px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: none;
  border-radius: 25px;
  opacity: 1;
  color: #0191FC;
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.confidence-info-link {
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9em;
  margin-left: 8px;
}

.confidence-info-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.confidence-info-flyout {
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  max-width: 300px;
  margin-top: 8px;
}

.cta-btn:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Small screens: slightly smaller and centered */
@media (max-width: 640px) {
  .cta-row {
    justify-content: center;
  }
  .cta-btn {
    width: 300px;
    height: 46px;
  }
}
@media print, screen and (min-width: 40em) {
  .reveal,
  .reveal.tiny,
  .reveal.small,
  .reveal.large {
    right: auto;
    left: auto;
    margin: 0 auto;
  }
} /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  height: 100%; /* Fix html height to viewport */
  overflow-y: auto; /* Allow vertical scroll on viewport */
  overflow-x: hidden; /* Prevent horizontal scroll locking */
  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
}

body {
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  min-height: 100%;
  height: auto;
  overflow-y: visible;
  overflow-x: hidden;
  position: relative;
  margin: 0;
  /*background-color: #002533;  Prevents white gap at bottom */
}

body.wx-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wx-body-background {
  background-color: #002533;
  opacity: 1;
  z-index: 0;
  /* Layout behavior */
  min-height: auto; /* Let flexbox handle the height */
  height: auto;
  overflow: visible;
}

.wx-page-content {
  flex: 1 0 auto;
  width: 100%;
}

.wx-header-background {
 background: #002533 0% 0% no-repeat padding-box;
 opacity: 1;
 z-index: 0;
}

.grid-container {
  overflow: visible !important;
  height: auto !important;
}
.wx-content-background-workload {
  margin: 0 auto;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(255, 255, 255, 0.7)),
    to(rgba(255, 255, 255, 0.1))
  );
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.1)
  );
}

.wx-icon-image {
  width: 50px;
}

.wx-workload-header-cell-justifyleft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  -webkit-box-align: left;
  -ms-flex-align: left;
  align-items: left;
  font-size: 11px;
}

.self-align-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.wx-workload-name{
  text-align: left !important;
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-weight: 600; 
}
.wx-workload-description{
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-weight: 400; 
}
.wx-workload-name p {
   text-align: left !important;
    margin: 0;
    padding: 0;
    padding-left: 0.1rem;
    white-space: nowrap;
    display: inline-block;
    text-align: left;
}
.wx-logo-image-small {
  width: 175px;
}
.wx-logo-image-medium {
  width: 225px;
  margin: 1.25rem 0 0 0;
}

.wx-content-background {
  margin: 0 auto;
  overflow: visible;
  /* top: 206px;
  left: 388px; */
  width: 100%;
  height: auto; /* Changed from 350px to auto so content fits */
  min-height: 350px;
  position: relative;
  z-index: 1;
  opacity: 1;
  background: none; /* Remove background from here */
}

/* Create the gradient layer using a pseudo-element */
.wx-content-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 320px); /* Stretch to approx middle of last workload box (subtracting button area + half box) */
  background: transparent linear-gradient(181deg, #002533 0%, #07C7CB 54%, #0191FC 100%) 0% 0% no-repeat padding-box;
  z-index: -1; /* Place behind the content */
}


.wx-workload-box {
  height: 90px;
  background: #FFFFFF no-repeat padding-box;
  border-radius: 0px 3px 3px 0px;
  opacity: 1;
  margin-bottom: 6px;
}
.wx-img {
  position: absolute;
  left: 1rem;
  margin-top: -1.25rem;
  width: 50px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.wx-img-unselected {
  position: absolute;
  left: 1rem;
  margin-top: -1.25rem;
  width: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.chk-rectangle {
  width: 2.5rem;
  height: 5.625rem;
  background-color: #005b7f;
  border-radius: 3px 0px 0px 3px;
  position: relative;
  transition: background-color 0.3s ease;
  margin-left:-0.25rem;
}
.chk-rectangle:hover {
  background-color: #0191fc;
}
.chk-rectangle-gray {
  width: 2.5rem;
  height: 5.625rem;
  background-color: #e6e6e6;
  border-radius: 3px 0px 0px 3px;
  /*transition: opacity 0.3s ease;*/
  position: relative;
  transition: background-color 0.3s ease;
}
/* .chk-rectangle {
  position: relative;
  transition: background-color 0.3s ease;
} */
.checkbox {
  display: flex;
  cursor: pointer;
  position: absolute;
  align-items: center;
  justify-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.checkbox > span {
  color: #125c7d;
  border-radius: 3px;
  height: 100%;
  width: 100%;
}

.checkbox > input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  transform: scale(1.2);
  transform-origin: center;
  border: 1px solid #125c7d;
  border-radius: 3px;
  outline: none;
  padding: 0.35rem;
  font-weight: bolder;
  background-color: #fff;
  cursor: pointer;
  margin: auto;
}
.checkbox > span,
.checkbox > input {
  width: 1em;
  height: 1em;
  position: absolute;
}

.checkbox > input:checked {
  border: 1px solid;
  background-color: #fff;
}
.checkbox > input:hover {
  border: 1px solid;
  padding: 0.4rem;
  transition: all 0.3s ease;

  transform: scale(1.5);
}

.checkbox > input:checked + span::before,
.checkbox > input + span::before {
  content: " ";
  background-image: url("images/indexCheck.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1em 0.9em;
  display: block;
  text-align: center;
  color: #125c7d;
  position: absolute;
  font-weight: bold;
  font-size: 14px;
  width: 100%;
  height: 100%;
}
.checkbox > input + span::before {
  opacity: 0;
}
.checkbox > input:checked + span::before {
  opacity: 1;
}
.checkbox > input:active {
  border: 2px solid #34495e;
}

.verison_text {
  margin-top: -0.35rem;
  color: #404e53;
}

.wx-run-message {
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-weight: 400; /* Regular */
  font-size: 18px;
  line-height: 23px;
  text-align: center;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
}
.wx-run-message--secondary {
  font-size: 0.8rem;
}

.wx-center-buttons {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .wx-center-buttons {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 37, 51, 0.92);
    border-radius: 16px;
  }
  .wx-run-message {
    margin-bottom: 0.75rem;
  }
}
 /* Start button size and mouseover effect to match index.php */
.start-btn-custom {
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  width: 302px;
  height: 50px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border-radius: 25px;
  opacity: 1;
  color: #0191fc;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s;
  cursor: pointer;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  font-size: 1.15rem; /* Increased text size */
  letter-spacing: 0.02em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
.start-btn-custom:hover, .start-btn-custom:focus {
  background: #1976d2;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transform: translateY(-2px) scale(1.03);
}
.wx-run-status {
  font-size: 0.75rem;
  margin: 0;
  color: #2996CC;
  font-weight: 700;
}
.wx-results-logo-img {
  width: 226px;
  height: 68px;
  opacity: 1;
  display: inline-block;
}
.wx-results-test-complete {
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  margin: 0.5rem 0; /* keep existing spacing */
}
.results-action-button {
  box-sizing: border-box;
  width: 140px;           /* XD width */
  height: 24px;           /* XD height */
  line-height: 24px;      /* vertically center text */
  padding: 0;             /* exact height control */
  border-radius: 12px;
  border: none;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  color: #0191FC;
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;      /* reduce to avoid overflow */
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;    /* keep on one line */
  overflow: hidden;       /* hide overflow if needed */
  text-overflow: ellipsis;/* add ellipsis if text is too long */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
}

.results-action-button:hover,
.results-action-button:focus {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.wx-footer {
  width: 100%;
  height: 40px;             /* fixed footer height */
  padding: 0;               /* remove extra padding */
  display: flex;            /* vertically center content */
  align-items: center;
  justify-content: center;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  opacity: 1;
  color: #333;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;           /* prevent footer from shrinking */
  margin-top: auto;         /* push to bottom */
}

.wx-footer-text {
  margin: 0.25rem 0;
  font-weight: 600;
  color: #333;
}

.wx-footer-links a {
  color: #002533;            /* var(--unnamed-color-002533) */
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-weight: 400;          /* 600 */
  font-size: 16px;           /* 16px */
  line-height: 20px;         /* 20px */
  letter-spacing: 0px;
  text-align: center;
  display: inline-block;
  min-width: 50px;           /* show as ~50px wide without truncation */
  height: 20px;              /* align to spec height */
  vertical-align: middle;
  text-decoration: none;
  opacity: 1;
  margin: 0 0.25rem;
}

.wx-footer-links {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wx-footer a:hover,
.wx-footer a:focus {
  text-decoration: underline;
}