@charset "utf-8";
@font-face {
font-family: 'Roboto';
src: url('/css/fonts/Roboto-Regular-webfont.woff2') format('woff2'),
 url('/css/fonts/Roboto-Regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('/css/fonts/Roboto-Italic-webfont.woff2') format('woff2'),
url('/css/fonts/Roboto-Italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('/css/fonts/Roboto-Medium-webfont.woff2') format('woff2'),
url('/css/fonts/Roboto-Medium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('/css/fonts/roboto-bold.woff2') format('woff2'),
url('/css/fonts/roboto-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-Italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-Semibold-webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-Bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-BoldItalic-webfont.woff') format('woff');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Comfortaa';
src: url('/css/fonts/Comfortaa-Regular.woff2') format('woff2'),
       url('/css/fonts/Comfortaa-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
/* WOWI Brand Colors */
--wowi-blue:#2e4857;
--wowi-green:#98C683;

/* Text */
--text-muted:#4f6470;

/* Core Backgrounds */
--bg-light-blue:#F2F7FA;
--bg-light-green:#F6FAF6;

/* Borders */
--border-light:#D6E2E8;

/* Neutral / Gray System */
--neutral-dark:#6B7C86;
--neutral-mid:#A8B5BC;
--neutral-light:#DCE4E8;
--neutral-lighter:#F4F7F9;

/* Assessment Category Colors */

/* Career Interest Activities (CIA) */
--cia-blue:#336699;
--cia-blue-mid:#9FC5DB;
--cia-blue-light:#EEF5F8;

/* Career Training Potentials (CTP) */
--ctp-green:#8dc774;
--ctp-green-light:#F1F7EE;

/* Job Satisfaction Indicators (JSI) */
--jsi-purple:#5C5176;
--jsi-purple-light:#F4F1F7;
}

/* =============================================================================
HTML5 display definitions
========================================================================== */
html, body {margin:0;}
html {box-sizing: border-box;}
*, *::before, *::after { box-sizing: inherit;}
img, object, embed, video {max-width:100%;}
img {display:block;}
a img {border:none;}

/* Links
------------------------------------------------------------------------------*/
a:link {color:#263943; text-decoration:none;}
a:visited {color:#263943; text-decoration:none;}
a:hover {color:#263943; text-decoration:none;}
a:active {color:#263943; text-decoration:none;}

a.link-underline {text-decoration:underline;}

/* Accessibility issue */
a:focus-visible {
outline: 2px solid var(--wowi-blue);
outline-offset: 2px;
}
body,
body.layout-v2 {
display: grid;
grid-template-rows:auto 1fr auto;
min-height: 100vh;
}
body {margin: 0; color:#263943;}

sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
button {display:block;}
* {margin: 0;}
p, a, ol, ul, li {font-family: 'Open Sans'; font-weight: 400;}
p {margin-top:1rem; margin-bottom: 1rem;}

ul,
ol {
  margin: 0 0 1.25rem 1.5rem;
  padding: 0;
}
li {
  margin-bottom: .5rem;
  line-height: 1.6;
}
li:last-child {
  margin-bottom: 0;
}
/* Nested lists */
li ul,
li ol {
  margin-top: .5rem;
  margin-bottom: 0;
}
/* Optional: cleaner unordered bullets */
ul li::marker {
  color: var(--wowi-blue);
}

q {font-family: 'Open Sans'; font-weight: 400;}
q::before {font-family: "Times New Roman", Times, serif;}
q::after {font-family: "Times New Roman", Times, serif;}

em {font-style: italic;}
strong {font-weight: 600;}

h1, h3 {font-family: 'Roboto'; font-weight: 400;}
h2 {font-family: 'Roboto'; font-weight: 400; letter-spacing: .01rem;}
h4 {font-family: 'Open Sans'; font-weight: 400;}
h4 {text-align:center;}

h1 {font-size: clamp(2rem, 3vw, 3rem);}
h2 {font-size: clamp(1.9rem, 3.5vw, 2rem);}
h3 {font-size: clamp(1.45rem, 2.3vw, 1.5rem);}
h4 {font-size: clamp(1.2rem, 1.8vw, 1.35rem);}

h1, h2, h3, h4 {line-height: 1.15;}

/* BACKGROUND COLORS(on about/tables)*/
.bg-logo-blue {background:#2e4857;}
.bg-logo-blue-lt {background:#ccd6dc;}
.bg-logo-blue-ltr {background:#eef3f5;}
.bg-logo-blue-ltr2 {background:#eff2f4;}
.btop-blue {border-top:1px solid #ccd6dc;}
.border-blue {background-color: #eff2f4; border-radius: 10px;}
.bg-lt-blue {background:#F2F7FA;}
.bg-md-blue {background:#E6EDF1;}

.bg-lt-green {background:#F6FAF6;}

.bg-logo-green {background:var(--wowi-green);}
.bg-logo-green-ltr {background:#dBedd9;}
.border-logo-green {border:2px solid var(--wowi-green); border-radius: 10px;}

.bg-ctp-green {background:#8dc774;}
.bg-ctp-green-lt {background:#e9f4e4;}

.bg-jsi-purple {background:#5C5176;}
.bg-jsi-purple-lt {background:#ebe9f0;}

.bg-grey-dk {background:#263943;}
.bgGreyDk {background:#808080;}
.bgGreyMd {background:#a6a6a6;}
.bg-grey-med {background:#e2e2e2;}
.bgGreyLt {background:#f1f1f1;}
.bg-grey-lt {background:#e6e6e6;}

.bg-cia-blue {background:#336699;}
.bg-cia-blue-md {background:#86BAD7;}
.bg-cia-blue-lt {background:#e2ebf0;}
.bg-cia-lt {background:#86BAD7;}

.bgBlueMdCIA {background:#86BAD7;}
.bgBlueLtCIA {background:#e2ebf0;}

.bg-white {background:#fff;}

/* FONT COLORS */
.font-white {color:#fff;}
.font-white a {color:#fff;}
.fontWhite{color:#fff;}
.fontWhite a {color:#fff;}
.font-blue {color:#2e4857;}
.font-blue a {color:#2e4857;}
.font-blue-cia {color:#336699;}
.font-green {color:#98c683;}
.font-green a {color:#98c683;}
.font-purple {color:#5C5176;}
/* Error messages on forms Pages:newacct.php (ciaintro.php and jsiintro.php?)*/
.errorColor, .errorForm {color:#d13525;}
.errorColor a {color:#d13525; text-decoration:underline;}
.input-error {border: 1px solid #d13525; background: #fff6f5;}

.center {text-align:center; margin-right:auto; margin-left:auto;}
.left {text-align:left;}

/* IMAGES */
.research-image {background:url("/about/images/research-image.png")}
.indexPic2 {background:url("/Images/index/indexPic2.png")} 
.you-are-unique {background:url("/about/images/you-are-unique-wowi.png")}
.admin-db-image {background:url("/tools/Images/db-image.png")}
.pa-dashboard-image {background:url("/purchase_authority/images/pa-dashboard.png")}
.nav-customers {background:url("/about/images/customers.png")}
.nav-history {background:url("/about/images/history.png")}
.nav-research {background:url("/about/images/research.png")}
.nav-reviews {background:url("/about/images/reviews.png")}
.nav-compare {background:url("/about/images/compare.png")}
.nav-ordering {background:url("/career/Images/ordering.png")}
.nav-administration {background:url("/career/Images/administration.png")}
.nav-custom-error {background:url("/custom_error_pages/images/error.png")}
.nav-measures {background:url("/career/Images/measures.png");}
/* reuse */
.nav-balance {background:url("/tools/Images/balance.png")}
.nav-assess-time {background:url("/career/Images/assess-time.png")}
.results-dashboard-image {background:url("/wowi/Images/results-dashboard.png")}
.nav-interests {background:url("/career/Images/interests.png");}
.nav-aptitudes {background:url("/career/Images/aptitudes.png")}
.nav-work-styles {background:url("/career/Images/work-styles.png")}
.nav-accessibility {background:url("/career/Images/accessibility.png")}
.nav-contact {background:url("/contact/images/contact.png")}
.nav-support-credentials {background:url("/tools/support/Images/support-credentials.png")}
.nav-support-reports {background:url("/tools/support/Images/support-reports.png")}
.nav-support {background:url("/tools/support/Images/support.png")}
.nav-interp {background:url("/tools/Images/interp.png")}
.nav-order {background:url("/tools/Images/order.png")}
/* save but not using */
.nav-admin {background:url("/career/Images/admin.png")} 

.research-image, .indexPic2, .you-are-unique, .admin-db-image, .pa-dashboard-image, .results-dashboard-image, .nav-admin, .nav-customers, .nav-history, .nav-research, .nav-balance, .nav-interp, .nav-support, .nav-support-credentials, .nav-support-reports, .nav-order,.nav-reviews, .nav-compare, .nav-ordering, .nav-contact, .nav-measures, .nav-interests, .nav-aptitudes, .nav-work-styles, .nav-custom-error, .nav-accessibility, .nav-assess-time, .nav-administration {background-repeat:no-repeat; background-position:center bottom;}

/* -------------------------------------------------------------------------------------------
ICONS
----------------------------------------------------------------------------------------------*/
/* CIA, Pages: career/interests& tools/manual/cia - two-tone (white CIA icons in reports/images/cia)
------------------------------------------------------------------------------------*/
.public-service {background:url("/career/Images/cia/public-service.png")} 
.sciences {background:url("/career/Images/cia/sciences.png")} 
.engineering {background:url("/career/Images/cia/engineering.png")}
.business{background:url("/career/Images/cia/business.png")}
.managerial {background:url("/career/Images/cia/managerial.png")}
.arts {background:url("/career/Images/cia/arts.png")}
.media-design {background:url("/career/Images/cia/media-design.png")}
.admin {background:url("/career/Images/cia/admin.png")}
.sales {background:url("/career/Images/cia/sales.png")}
.service {background:url("/career/Images/cia/service.png")}
.outdoor{background:url("/career/Images/cia/outdoor.png")}
.processing {background:url("/career/Images/cia/processing.png")}
.machine {background:url("/career/Images/cia/machine.png")}
.bench-work {background:url("/career/Images/cia/bench-work.png")}
.structural-work {background:url("/career/Images/cia/structural-work.png")}
.mech-elec {background:url("/career/Images/cia/mech-elec.png")}
.extraction {background:url("/career/Images/cia/extraction.png")}

/* CTP, Pages: career/aptitudes & tools/manual/ctp
------------------------------------------------------------------------------------*/
.verbal {background:url("/report/images/ctp/verbal.png")} 
.numerical {background:url("/report/images/ctp/numerical.png")} 
.abstractions {background:url("/report/images/ctp/abstractions.png")}
.spatial {background:url("/report/images/ctp/spatial.png")}
.mechanical-electrical {background:url("/report/images/ctp/mechanical-electrical.png")}
.org-skill {background:url("/report/images/ctp/org-skill.png")}

/* JSI, Pages: career/work_styles & tools/manual/jsi
------------------------------------------------------------------------------------*/
.versatile {background:url("/report/images/jsi/versatile.png")} 
.repetitive{background:url("/report/images/jsi/repetitive.png")} 
.specific{background:url("/report/images/jsi/specific.png")}
.dominant {background:url("/report/images/jsi/dominant.png")}
.gregarious {background:url("/report/images/jsi/gregarious.png")}
.isolative {background:url("/report/images/jsi/isolative.png")}
.influencing {background:url("/report/images/jsi/influencing.png")} 
.controlled {background:url("/report/images/jsi/self-controlled.png")} 
.valuative {background:url("/report/images/jsi/valuative.png")}
.objective {background:url("/report/images/jsi/objective.png")}
.subjective {background:url("/report/images/jsi/subjective.png")}
.rigorous {background:url("/report/images/jsi/rigorous.png")}

.public-service, .sciences, .engineering, .business, .managerial, .arts, .media-design, .admin, .sales, .service, .outdoor, .processing, .machine, .bench-work, .structural-work, .mech-elec, .extraction, .verbal, .numerical, .abstractions, .spatial, .mechanical-electrical,.org-skill, .versatile, .repetitive, .specific, .dominant, .gregarious, .isolative, .influencing, .controlled, .valuative, .objective, .subjective, .rigorous {background-repeat:no-repeat; background-size:contain;}

.verbal, .numerical, .abstractions, .spatial, .mechanical-electrical,.org-skill, .versatile, .repetitive, .specific, .dominant, .gregarious, .isolative, .influencing, .controlled, .valuative, .objective, .subjective, .rigorous {background-position: left center; height:60px;}

.measures-icon {background-position: left center; height:60px;}
.interp-icon {background-position: left top; width: 58px; height: 58px; flex: 0 0 58px;}

.gridContainer {
display:grid;
grid-column:1/-1;
grid-template-columns: 1fr;
min-height: 100vh;
box-sizing: border-box;
}
.c2, .c1of2, .c2of2, .c2Style2, .c2-video, .video-gallery, .setting, .support, .guide, .agenda, .links, .calendar, .bio, .objectives, .keys, .table-container, .sitemap-logo, .sitemap-cols {display:grid;}

header {
grid-column:1/-1;
overflow:visible;
}
/* nav is divided into Logo, Menu, Sign In */
nav {
display:grid;
grid-column:1/-1;
}
nav ul {list-style-type:none;} 
main {
grid-column:1/-1;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
grid-column:1/-1;
width: 100%;
padding-top: 1em;
text-align: center;
background-color: #D3D9DE;
}
footer img {
margin:0 auto;
height:40px;
}

/* HERO AND COMPACT HERO - Pages: All pages on nav bar except functional pages
------------------------------------------------------------------------------*/
.compact-hero {
padding-top: 0;
padding-bottom: .5em;
background: var(--wowi-blue);
}
.hero-eyebrow, .compact-hero-eyebrow {
margin:0 0 14px 0;
font-size: .92rem;
font-weight: 700;
color: #D7E0E5;
letter-spacing: .08em;
text-transform: uppercase;
}
.nav-page-text {
margin-top: 2.5em;
}
.nav-page-text h1, .compact-hero h1 {
color:#fff;
text-align: left;
margin-bottom: 1rem;
max-width: 780px;
line-height: 1.08;
}
.compact-hero h1 {
font-size: clamp(2.3rem, 3.6vw, 3.35rem);
line-height: 1.08;
}
.nav-page-text h1 {
font-size: clamp(2.7rem, 5vw, 3.75rem);
line-height: 1.02;
}
.hero-accent-line {
display: block;
width: 72px;
height: 4px;
background-color: var(--wowi-green);
margin: 0 0 .75rem 0;
transform: scaleX(0);
transform-origin: left;
animation: growLine 0.6s ease forwards;
}
@keyframes growLine {
to {
transform: scaleX(1);
}
}
.hero-subtext {
color:#fff;
font-size: clamp(1.15rem, 2vw, 1.45rem);
line-height: 1.45;
max-width: 520px;
font-weight: 500;
margin-bottom: 0.35rem;
}
.hero-support {
color:#fff; 
font-size: 1.05rem;
line-height: 1.5;
width:90%;
margin-top: 0.2rem;
max-width: 520px;
} 
.c1 {
width: 100%;
box-sizing: border-box;
}

/* INDEX
------------------------------------------------------------------------------*/
.indexText {display:block; color:#fff;} 
.indexText h1, .indexText h2 {text-align:left;}
.indexText p, .indexText h2 {max-width: 600px;} 

/* Testimonial on page, Pages: index.php, training/workshops */
.testimonial-quote{color:#fff; padding-bottom: 2em;}
.c1 .testimonial-quote h2{
color:#fff; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
padding-top: 1rem;
padding-bottom: .5rem;
}
.testimonial-quote p {margin-bottom: 0;}
.testimonial-quote q {
line-height: 1.3;
font-size: 1.25em;
letter-spacing: .1rem;
}
.testimonial-quote q:before {
line-height: 1px; 
position: relative; 
bottom: -5px; 
font-size:3em; 
}
.testimonial-quote q:after {quotes: none;}
.testimonial-name {
margin-top: .5em; 
padding-bottom: 1.5em;
}
.testimonial-quote a {margin-top: 1em;}

/* INDEX - COMMUNITY VIDEOS, Page: index.php
------------------------------------------------------------------------------*/
.video-gallery {
justify-items: center;
padding-bottom: 2em;
padding-top: 2em;
max-width: 1600px;
margin:0 auto;
}
.video-cols {
display: grid; 
width:100%;
align-self: flex-start;
justify-self: center;
}
.youtube-video {
aspect-ratio: 16 / 9;
width: 100%;
}
.c1 p.video-communities {
margin-left:auto; margin-right: auto;
text-align: center;
width:100%;
max-width: 1600px;
padding-bottom: 2em;
}
/* INDEX Checklist, Pages:index.php, training/check-list */
.checked-list{
display: grid;
grid-column: 1/-1;
}
.checked-list p {
display: grid;
grid-template-columns: 30px 1fr;
column-gap: 15px;
align-content: flex-start;
}
.checked-list p:before {
content: "";
background: url("/about/images/check.png") no-repeat;
background-position: top left;
background-size: contain;
}
/* Centered text, Pages: index.php
------------------------------------------------------------------------------*/
.c1 .centered-text {
text-align: center;
max-width: 1200px;
margin:0 auto;
padding-bottom: 2em;
}
.c1 .centered-text h2 {
width:100%;
}
.c1 .centered-text a {
margin-top: 1em;
}
/* LEGAL
------------------------------------------------------------------------------*/
.legal-page {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2rem);
  color: #2e4857;
}
.legal-page h1,
.legal-page h2,
.legal-page h3 {
  color: #2e4857;
}
.legal-page h2:first-child {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
  padding: 0 0 0.35em;
  text-align: left;
}
.legal-page h2 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  margin: 2.2em 0 0.6em;
}
.legal-page h3 {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  margin: 1.5em 0 0.4em;
  font-weight: 700;
}
.legal-page p,
.legal-page li {
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.75;
}
.legal-page p {
  margin: 0 0 1.15em;
}
.legal-page ol,
.legal-page ul {
  margin: 0 0 1.5em 1.25em;
  padding-left: 1.25em;
}
.legal-page li {
  margin-bottom: 0.55em;
}
.legal-page a {
  color: #2e4857;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-updated {
  font-size: 0.95rem;
  color: #5f7683;
  margin: 0 0 1.25rem;
}
.legal-divider {
  border: 0;
  border-top: 1px solid #d6e2e8;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.legal-page strong {
  font-weight: 700;
}


/* HEADER, Pages: assess-time, training/level1, training/level2, training/level3, etc. 
------------------------------------------------------------------------------*/
.headerText {
margin-top:.5em;
margin-bottom:1.4em;
padding:0;
width:100%;
}
.headerText h1 {
padding-top:.75em;
margin:0;
max-width: 1350px;
}
.headerText p {
width:100%;
max-width: 800px;
padding:0;
}

/* STYLES 
------------------------------------------------------------------------------*/
.grid, .grid-npad {display:grid; margin-top:0; width:100%;}
.grid h2, .grid-npad h2 {padding-top:2rem; padding-bottom: 2rem;}
.col1 h2 {padding-top:2rem; padding-bottom: 2rem;}
/* 1 column- different from c1 - margin bottom NOT 0 */
.col1 {margin-top: 0; padding-bottom: 3em;}
.col1-txt {padding-bottom: 2em;}
.col1-txt h3 {
margin-bottom: 0;
padding-bottom: 0;
}
.col1-txt p {
margin-top: 0;
padding-top: 0;
}
/* c1 styles */
.c1 ul li {
line-height:1;
padding-bottom:.5em;
}
/* Pages: about/validity, tools/delete_user, mgt/update, etc. */
.c1Text {overflow:hidden;}
.c1Text h3 {text-align:center;}
/* BVI, Pages:trainer-materials.php*/
.c1-text {
width:100%;
display:block;
}
.c1-text h3 {
text-align:left; 
font-size:1.75em;
color:#fff;
padding:0;
}
.c1-text h3:hover {
text-decoration:underline;
} 
.c1-text a {
color:#fff;
} 
.c1 hr {
color: #f1f1f1;
width:100%;
}
.c1, .c1of2Style2 {overflow: hidden;}
.icon-text {margin:0; overflow:hidden; width:100%; padding-bottom:.25em;}

/* TWO COLUMNS, Pages: index.php, newacct.php, reqname.php, contact.php */
.c2 {margin:0;}
.c2Style2 {width:100%;}
.c2Style2 h2 {margin-top: 1em; }
.c2Txt {margin-left:auto; margin-right:auto; width:80%; overflow:hidden;}
.c2Txt img {margin-left:auto; margin-right:auto; display:block;}
.c2Txt h2 {text-align:center; font-size:2em;}

/* workshop agenda, Page:training/level1.php*/
.c2of2-text {
width:90%;
margin-left:auto;
margin-right:auto;
padding-bottom:2em;
}
.c2of2-text ul {list-style-type:square;}
.c2of2-text p a {text-decoration:underline;}
/* Page:group_help.php*/
.c2Text ol li a {text-decoration:underline;}
.c2Text {
margin:0 auto;
}
.c2Text h3 {margin-bottom:0;}
.c2Text h2 {
font-size:1.75em;
} 
.c2Text p {
margin-top:.25em;
line-height:1.35;
}
.c1of2 h2 {margin:1em 0;}
.c1of2 h1, .c1of2 h2, .c1of2 p {width:90%;}
.c1of2 h4{
width:70%;
line-height:1.5;
}
.c1of2 p:nth-child(1){padding-top:2em;}
#counter_text{
margin-top:0;
padding-top:0;
font-family: 'Open Sans'; 
font-weight: 400;
}


/* INFO PANEL GRID
(Pages: about/research, tools/menu
--------------------------------------------------------------------------------------------------*/
.info-panel-grid {
display:grid;
gap:24px;
}
.info-panel-section {
padding:20px;
background:#F2F7FA;
border:1px solid #D6E2E8;
border-radius:20px;
}
.info-panel-section h2 {
margin:0 0 14px;
color:var(--wowi-blue);
font-size:1.2rem;
line-height:1.2;
}
.info-panel-section p {
margin:0 0 14px;
font-size:1.15rem;
line-height:1.2;
}
.info-panel-card {
display:grid;
grid-template-columns:50px minmax(0, 1fr);
gap:16px;
align-items:start;
padding:16px;
background:#fff;
border:1px solid #D6E2E8;
border-radius:16px;
text-decoration:none;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.info-panel-card-simple {
align-items:center;
}
.info-panel-card + .info-panel-card {
margin-top:12px;
}
.info-panel-card:hover,
.info-panel-card:focus {
transform:translateY(-2px);
border-color:var(--wowi-green);
box-shadow:0 6px 16px rgba(46,72,87,.08);
}
.info-number {
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
background:#E7EEF2;
border-radius:14px;
color:var(--wowi-blue);
font-size:.9rem;
font-weight:800;
}
.info-content h3 {
margin:0 0 5px;
color:var(--wowi-blue);
font-size:1.02rem;
line-height:1.2;
}
.info-content p {
margin:0;
color:#4f6470;
font-size:.95rem;
line-height:1.4;
}
/* Grid Columns - 3 and 4 columns
(Pages: about/research, career/assess, career/accessibility, career/measures, training/workshops, trainer_materials, tools/support/contact). manual/interpretation
--------------------------------------------------------------------------------------------------*/
/* applies to class c3g and c4 */
.columns {
display: grid; 
width:100%;
padding-bottom: 3em;
}
.col {
padding: 2em;
border:1px solid #d8e3e8;
transition:.25s ease;
position: relative;
border-radius: 22px;
}
.col h3 {
margin:0 0 .75rem;
font-size:1.45rem;
line-height:1.3;
}
.col p {
margin:0;
font-size:1rem;
}
.col p:last-of-type {
margin-bottom: 2em;
}
.col:hover {transform:scale(1.05);}
.col a {text-decoration: underline;}

/* Pages: index, about/research */
.col-style2 {
padding: 0 3em;
position: relative;
}
.col-style2 img {
margin-left: auto;
margin-right: auto;
padding-bottom: 1em;
height:90px;
}
.col-style2 h2, .col-style2 h3 {text-align: center;}
.col-style2 h3 {padding-top:1em;}
.col-style2 p {padding-bottom: 1em;}
.col-style2 a {text-decoration: underline;}
.col-style2 ul {list-style-type:square;}

/* setting - Pages:career/assess */
/* support - Pages: all pages in tools/support/ folder */
/* agenda - Pages: training/level1, level2, level3, level4 */
/* communities - Pages: about/customers */
.setting, .support, .guide, .agenda, .links, .bio {
max-width: 1200px;
margin-left: auto; margin-right: auto;
}
.setting, .support, .guide, .bio, .agenda, .links {
border-top: 1px solid #999999;
padding-top: 2em;
padding-bottom: 1em;
}
.setting, .support, .guide, .bio, .agenda, .links {gap: 1%;}
.setting-header p {padding-bottom: 1em;}
.agenda:hover {color:#649e49;}
.links:hover {background-color:#e3e9ec;}
.links a {color:#336699;}

.calendar-col h3, .bio-col h3, .setting-col h3, .guide-col h3 {
width:90%;
margin-top:0;
margin-bottom: .25em;
font-family: 'Roboto'; 
font-weight: 400; 
color:var(--wowi-blue);
}
/* SUPPORT PAGES
----------------------------------------------------------------------------------------------*/
.support-col > *:first-child {
margin-top: 0;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: var(--wowi-blue);
color: #fff;
border-radius: 50%;
font-size: .85rem;
font-weight: 600;
flex-shrink: 0;
}
.support-col h3 {
display: flex;
align-items: center;
gap: .5em;
width:90%;
margin-top:0;
margin-bottom: .25em;
font-family: 'Roboto'; 
font-weight: 500; 
}
.support-col ul {
list-style-type:square;
padding-left:25px;
margin-bottom: 0;
}

.guide-col h3 {
padding-left: 1em;
}
.agenda-col h4, .links-col h4 {
width:90%;
margin-top:0;
margin-bottom: .25em;
font-family: 'Roboto'; 
font-weight: 400; 
text-align: left;
}
.links-col h4 {padding-left: 1.5em;}
.links-col ul {padding-right: 1.5em;}
.calendar-col ul, .setting-col ul, .agenda-col ul, .links-col ul {
list-style-type:square;
padding-left:25px;
margin-top: 0;
margin-bottom: 0;
}
.guide-col ul {
margin-top: 0;
margin-bottom: 0;
padding-right: 1em;
padding-left: 0;
}
.plus-minus {
padding-left: 0;
text-indent: -1.25em;
}
.plus-minus2 {
padding-left: 0;
text-indent: -2.5em;
}
.support-col ul li ul {
list-style-type:circle; 
}
.setting-col ul li, .support-col ul li, .guide-col ul li {line-height: 1.5;}
.agenda-col ul li {line-height: 1.3;}
.links-col ul li {padding-bottom: .75em;}
.calendar-col li {line-height: 1.25;}
.setting-col li, .support-col li, .guide-col li {margin-bottom: .5em;}
.guide-col li {text-decoration: none;}
.calendar-col form {padding-bottom:.5em;}

.support-header, .guide-header, .setting-header, .agenda-header, .links-header, .links-footer, .calendar-header, .workshop-cklist-header { 
max-width: 1200px;
margin: 0 auto;
}
.agenda-header h3, .links-header h3, .calendar-header h2, .support-header h2, .guide-header h2 {
margin-top:0;
margin-bottom:0;
padding: 1em 0 .25em 0;
}
.agenda-header p, .links-header p, .support-header p, .calendar-header p, .guide-header p {
margin-top:0;
padding: 0;
}
.time-zones, .interp-ranges {
display: grid;
width:100%;
gap: 7px;
}
.time-zone, .interp-range {
padding-top: .25em;
padding-bottom:.25em;
border: 1px solid var(--wowi-blue);
border-radius: 5px;
}
.time-zone p, .interp-range p {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 0;
padding-bottom: .5em;
margin-top: 0;
margin-bottom: 0;
}
.time-zone p:nth-child(1), .interp-range p:nth-child(1) {
font-size: 1em;
padding-top: .5em;
font-family: 'Open Sans'; 
font-weight: 600; 
}
.time-zone p:nth-child(1) {
padding-bottom: 0.25em;
}
.time-zone p:nth-child(2) {font-size: .9em;}
.interp-range p:nth-child(2) {padding-left: .5em; padding-right: .5em;}

.cia-hover:hover {background-color: #e5f1f7;}
.ctp-hover:hover {background-color:#ebf5ea;}
.jsi-hover:hover {background-color:#e7e6ec;}

/* YouTube video - 2nd column, Pages: about/history, training/level1
----------------------------------------------------------------------------------------------*/
.c2-video {margin-bottom: 2em;}
.video-text {max-width: 600px;}
.video-text h2 {text-align:left; color: var(--wowi-blue);}
.video-text ul {
list-style-type:square;
padding-left:30px;
}
/* WOWI SCALES - Pages: career/interests, career/aptitudes, career/work_styles
----------------------------------------------------------------------------------------------*/
/*scale - Pages: career/interests, career/aptitudes, career/work_styles */
/*scale-interp - Page: about/testimonials */
/*quotes - Page: about/testimonials */
.scales, .scales-interp, .quotes, .resources {
display: grid;
width:100%;
}
.scale h3, .scale-ctp h3, .scale-interp h3 {margin:0; padding-top:1em;}
.quotes, .resources {padding-top: 0; padding-bottom: 3em;}
.scale, .scale-ctp, .scale-interp, .quote, .resource {
transition: transform .25s ease-in-out;
position: relative;
border-radius: 10px;
}
.scales, .scales-interp {padding: 2em;}
.scale, .scale-interp, .quote, .resource {padding: 2em;}
.scale-ctp {padding: 1em 2em;}
.scale, .scale-interp, .scale-ctp {border:1px solid #336699; background-color: #fff;}
.quote, .resource {border:1px solid #dbe2e6;}
.scale:hover, .scale-interp:hover, .scale-ctp:hover, .quote:hover, .resource:hover {transform:scale(1.05);}
.quote, .resource {background-color: #fff;}
.quote h3, .resource h3 {text-align: center;}
.scale-interp p, .quote p, .resource p {margin-left:auto; margin-right: auto;}
.resource p {text-align: center;}
.scale-ctp {max-width:500px; margin:3em auto 0 auto; }


/* Report */
.columns-report {
display: grid; 
padding-top: 1em;
}
.col-report {
padding-top: .5em;
padding-bottom:.5em;
font-size: 1.15em;
}
.col-report-border {
border:1px solid #E6E6E6;
}
.pa-overview-balance {
text-align:center;
font-size:3em;
} 
.workshop-text p a, .c2-text p a {
text-decoration:underline;
}

.col h3 {margin-top: .5em; margin-bottom: 0;}
.btn-bpad {padding-top: 1em; padding-bottom: 2em;}

/* TESTIMONIAL PAGE, Page: about/testimonials
------------------------------------------------------------------------------*/
#testimonial-filter, #communities-filter, #resource-filter, #guide-filter {
display:grid;
row-gap:5px;
padding-bottom: 1em;
}
#testimonial-filter {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
max-width: 1200px;
column-gap: 1%;
padding-top: 1em;
}
#communities-filter, #resource-filter, #guide-filter {
column-gap: 10px;
max-width: 1600px;
justify-items:center;
margin-left: auto;
margin-right: auto;
}
#communities-filter, #resource-filter {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
#communities-filter {
padding-bottom:2em;
}
#communities-filter .btn-filter, #resource-filter .btn-filter{
width: 220px;
}
/* minmax (270) = btn-filter width (270) */
#guide-filter {
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
#guide-filter .btn-filter{
width: 270px;
}
#guide-filter {
padding-top:1em;
padding-bottom:3em;
}

/* COMMUNITIES, Page: about/customers
------------------------------------------------------------------------------*/
.map-section {
width:100%;
max-width: 1180px;
margin: 0 auto;
}
.map-copy {
max-width: 720px;
margin: 0 auto 2.5rem;
width:100%;
text-align: center;
}
.map-copy h2 {
font-size: clamp(2rem, 3vw, 2.6rem);
line-height: 1.1;
margin: 0 0 1rem;
color: var(--wowi-blue);
}
.map-copy p {
font-size: clamp(1.05rem, 1.35vw, 1.2rem);
line-height: 1.6;
margin: 0;
color: #173447;
}
.map-image {
padding-top: 1em;
margin-bottom: 0;
text-align: center;
}
.map-image img {
width: clamp(420px, 48vw, 550px);
display: block;
margin-inline: auto;
}
.community-directory {
background: var(--wowi-light);
padding-block: clamp(2.5rem, 4vw, 3rem);
padding-inline: clamp(1.25rem, 4vw, 3rem);
margin: 0 auto;
}
.community-directory .filterDiv {
padding: clamp(1.5rem, 3vw, 2rem) 0;
border-bottom: 1px solid #E5EDF1;
}
.community-directory .filterDiv:last-child {
border-bottom: none;
padding-bottom: 0;
}
.community-directory .filterDiv:first-of-type {
padding: 0;
margin: 0;
}
.organization-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .9rem 2rem;
}
.organization-card {
padding: 1rem 1.1rem;
border-radius: 14px;
background: #fff;
border: 1px solid transparent;
transition: background .18s ease, border-color .18s ease;
}
.organization-card:hover {
background: #F7FAFC;
border-color: var(--wowi-border);
}
.organization-card p {
margin: 0;
font-size: 1.05rem;
line-height: 1.45;
}
.community-group {
padding-top: 0;
}
/* Remove top padding from the first group in each filter section */
.filterDiv .community-group:first-of-type {
padding-top: 0;
}
.community-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(3rem, 6vw, 6rem);
}
.community-column {
display: flex;
flex-direction: column;
gap: clamp(3rem, 5vw, 4rem);
}
.organization-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.filterDiv {
padding-bottom: clamp(2rem, 6vw, 3rem);
}

/* ADMINISTRATION, Page: career/assess
--------------------------------------------------------------------------------------------------*/
.video-section {
padding: clamp(4rem, 7vw, 6.5rem) 5vw;
}
.video-band {
background:
radial-gradient(circle at top right,
rgba(46,72,87,.04),
transparent 38%),
#F2F7FA;
}
.video-grid {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.video-eyebrow {
color: var(--green);
font-size: 1rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
margin-bottom: 1rem;
}
.video-band p {
font-size: 1.08rem;
}
.video-thumb {
position: relative;
min-height: 300px;
aspect-ratio: 16 / 9;
border-radius: 28px;
overflow: hidden;
background:
radial-gradient(circle at 70% 35%, rgba(255,255,255,.08), transparent 38%), linear-gradient(135deg, #3b5d6f 0%, #304d5d 100%);
box-shadow: 0 18px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.video-thumb img {
position: absolute;
right: 4%;
bottom: 0;
width: 58%;
height: auto;
max-height: 92%;
object-fit: contain;
}
.play-button {
position: absolute;
left: 33%;
top: 50%;
transform: translate(-50%, -50%);
width: 82px;
height: 82px;
border-radius: 50%;
background: #fff;
color: var(--wowi-blue);
display: grid;
place-items: center;
font-size: 2rem;
font-weight: 900;
box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

/* ADMINISTRATION (Pages: career/assess, career/assess-time, career/accessibility, tools/pick_user)
--------------------------------------------------------------------------------------------------*/
/* Administration Instructions (Page: career/assess.php) */
.instruct {
padding-top:1.5em;
display: grid;
gap: 1%;
}
/* Style tab links */
.tablink {
background-color: #fff;
color: #263943;
border:1px solid #CCD6DC;
outline: none;
cursor: pointer;
padding: 1em 1em;
font-size: 1.35em;
font-family: 'Open Sans'; 
font-weight: 400;
transition: transform .25s ease-in-out;
}
.tablink:hover {transform:scale(1.05);}
button.tablink {height:auto; width:auto;}
button.tablink img {height:90px; margin:auto; padding-bottom: .5em;}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
display: none;
padding: 30px 0;
height: 100%;
}
#video {background-color:#fff;}
#questions {background-color: #fff;}
#questions > h2 {padding: 0;}
#assess {background-color: #fff;}
.instructions{width:90%;}
.assess-instructions {
padding-bottom: 2em;
}
.assess-instructions ul {
list-style-type: square;
}
.assess-instructions ul li {
line-height: 1.5;
}
.example {
display: inline-block;
width: 90%;
max-width: 700px;
height: 450px;
margin: 2em auto;
perspective: 600px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
color: #263943;
font-size: 1em;
padding: 1em 2em;
backface-visibility: hidden;
border-radius:10px;
}
.card__face--front {
background-color: #fff;
}
.card__face--front p {
font-size: 1.25rem;
}
p.example-question {
margin-bottom: 0;
padding-bottom: 0;
}
.card__face--front p.example-fractions {
margin: 0;
padding:0;
}
.card__face--front .fractions {
font-size: 1.5rem;
}
.card__face--front ul {
list-style-type: circle;
list-style-position: inside;
line-height: 1.1;
margin-top: 0;
padding-top: 0;
}
.card__face--front ul li::marker {
font-size: 2rem;
}
.card__face--back {
background-color: #fff;
transform: rotateY(180deg);
}
.card__face--back p {
font-size: 2rem;
font-family: 'Roboto'; 
font-weight: 400; 
text-align: center;
width:80%;
margin-right: auto;
margin-left: auto;
}
.card__face--back p.fractions-answer {
font-size: 4rem;
font-family: 'Roboto'; 
font-weight: 400; 
}
.centervh-blue {
display:grid;
justify-items: center; 
align-items: center;
background-color: #e2ebf0;
}
.centervh-green {
display:grid;
justify-items: center; 
align-items: center;
background-color: #e9f4e4;
}
.centervh-purple {
display:grid;
justify-items: center; 
align-items: center;
background-color: #ebe9f0;
}
.c1of2ex {grid-column:1/2;}
.c2of2ex {grid-column:2/3;}

.instructions ol {counter-reset:list;}
.instructions ol>li {
counter-increment:list;
list-style-type:none;
position:relative;
}
.instructions ol>li::before {
color:var(--wowi-green);
font-size:1.75em;
content:counter(list) "";
left:-48px;
top:-3px;
position:absolute;
text-align:right;
width:26px;
}
.instructions ol>li>ul>li>ol>li::before {
color:#000;
font-size:1em;
}
.instructions ul>li {list-style-type:square;}
.start-list {
width:80%;
max-width: 700px;
margin: 1em auto;
padding-top: 2em;
}
.start-list ol {
counter-reset:list;
}
.start-list ol>li {
counter-increment:list;
list-style-type:none;
position:relative;
}
.start-list ol>li::before {
color:var(--wowi-blue);
font-size:1.75em;
content:counter(list) "";
left:-48px;
top:-3px;
position:absolute;
text-align:right;
width:26px;
}

/* ADMINISTRATION TIME, Pages: career/assess-time
--------------------------------------------------------------------------------------------------*/
.time-page {
padding-top:3em;
padding-bottom:4em;
}
.time-intro {
max-width:900px;
margin-bottom:2.25rem;
}
.time-intro p {
margin:0;
color:var(--wowi-blue);
font-size:clamp(1.2rem, 2vw, 1.55rem);
line-height:1.6;
}
/* timing cards */
.time-cards {
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:22px;
margin-bottom:3rem;
}
.time-card {
padding:2rem;
border:1px solid var(--border-light);
border-radius:24px;
background:#fff;
box-shadow:0 8px 24px rgba(46,72,87,.06);
}
.time-card.interests {
background:var(--cia-blue-light);
}
.time-card.knowledge {
background:var(--ctp-green-light);
}
.time-card.workstyles {
background:var(--jsi-purple-light);
}
.time-card-label {
display:inline-flex;
align-items:center;
padding:.55rem .9rem;
margin-bottom:1rem;
border-radius:999px;
background:#EEF2F3;
color:var(--wowi-blue);
font-size:.85rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
.time-card h2 {
margin:0 0 .6rem;
color:var(--wowi-blue);
font-size:clamp(1.4rem, 2vw, 1.5rem);
line-height:1.15;
font-weight:400;
}
.time-number {
margin:0 0 .4rem;
color:var(--wowi-blue);
font-size:clamp(2rem, 5vw, 2.5rem);
line-height:1;
font-weight:400;
}
.time-unit {
margin:0;
color:var(--text-muted);
font-size:1.15rem;
}
/* info panels */
.time-info-grid {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:24px;
}
.time-panel {
padding:2rem;
background:#fff;
border:1px solid var(--border-light);
border-radius:22px;
}
.time-panel h2 {
margin:0 0 1rem;
color:var(--wowi-blue);
font-size:clamp(1.6rem, 2.4vw, 2.1rem);
line-height:1.15;
font-weight:400;
}
.time-panel p {
margin:0;
color:#263943;
font-size:1.08rem;
line-height:1.65;
}
.time-panel a {
color:var(--wowi-blue);
text-decoration:underline;
text-underline-offset:4px;
}
/* note */
.time-note {
margin-top:2rem;
padding:1.4rem 1.6rem;
background:var(--bg-light-blue);
border-left:5px solid var(--wowi-green);
border-radius:16px;
}
.time-note p {
margin:0;
color:var(--wowi-blue);
font-size:1.05rem;
line-height:1.6;
}
/* Time (Page: career/assess-time.php) */
.approx-time {padding:10px 5%;}
.assess-time {
display: grid;
grid-template-rows: repeat(1, 1fr); 
gap: 15px;
width:80%;
max-width: 900px;
padding:1em;
margin: auto;
}
.cia-time {background-color:#336699;}
.ctp-time {background-color:#A4D290;}
.jsi-time {background-color:#5C5176;}
.cia-time, .ctp-time, .jsi-time {padding: 15% 15%; transition: transform .25s ease-in-out;}
.cia-time:hover, .ctp-time:hover, .jsi-time:hover {transform:scale(1.05);}

.cia-time img, .ctp-time img, .jsi-time img {
object-fit: contain;
margin-left: auto;
margin-right: auto;
}
.assess-time p {
color:#fff;
text-align: center;
}
.assess-time p.minutes {
padding-top:1em;
}

/* ACCESSIBILITY, Pages: career/accessibility
--------------------------------------------------------------------------------------------------*/
.access-container {
width: 100%;
margin: 0 auto;
}
.access-intro-grid {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
align-items: stretch;
margin-top: 2em;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.access-summary-card,
.access-info-card,
.access-resource-card,
.access-link-card {
border: 1px solid var(--border-light);
border-radius: 24px;
background: #fff;
box-shadow: 0 16px 38px rgba(46, 72, 87, .08);
}
.access-summary-card {
padding: clamp(1.5rem, 3vw, 2rem);
border-left: 5px solid var(--wowi-green);
}
.access-summary-card h2,
.access-section-heading h2,
.access-info-card h3,
.access-resource-card h3,
.access-feature-text h2 {
margin: 0 0 .8rem;
color: #102f43;
font-family: "Roboto", Arial, sans-serif;
font-weight: 400;
line-height: 1.15;
}
.access-summary-card h2 {
font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}
.access-summary-card ul {
margin: 1rem 0 1rem;
padding-left: 1.15rem;
}
.access-summary-card li {
margin-bottom: .55rem;
color: #27475a;
list-style: disc;
}
.access-summary-card li::marker,
.access-feature-links li::marker {
color: var(--wowi-green);
}
.access-responsive-note {
padding-top: 1.4rem;
border-top: 1px solid var(--border-light);
}
.access-responsive-note h3 {
margin: 0 0 .5rem;
color: var(--wowi-blue);
font-size: 1.45rem;
line-height: 1.2;
font-weight: 400;
}
.access-responsive-note p {
font-size: 1rem;
margin: 0;
color: var(--text-muted);
}
.access-band {
padding-top: clamp(1rem, 5vw, 2rem);
padding-bottom: clamp(2rem, 5vw, 3rem);
border-top: 1px solid #e2ebf0;
border-bottom: 1px solid #e2ebf0;
}
.access-section-heading {
max-width: 930px;
margin-bottom: 2.5rem;
}

.access-section-heading h2 {
font-size: clamp(2rem, 3.5vw, 3rem);
}
.access-section-heading p {
margin: 0;
color: var(--text-muted);
font-size: clamp(1.05rem, 1.5vw, 1.22rem);
}

.access-reader-grid {
display: grid;
grid-template-columns: minmax(280px, 480px) repeat(2, minmax(230px, 1fr));
gap: 1.25rem;
align-items: stretch;
}

.access-info-card,
.access-resource-card {
padding: clamp(1.4rem, 3vw, 2rem);
}

.access-info-card h3,
.access-resource-card h3 {
font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.access-info-card p,
.access-resource-card p,
.access-feature-text p {
margin: 0;
color: var(--text-muted);
font-size: 1.04rem;
}
.access-resource-logo {
height: 54px;
width: 90px;
margin-bottom: 1rem;
object-fit: contain;
object-position: left center;
}

.access-card-action {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1.5rem;
min-width: 190px;
padding: .55rem 1.25rem;
border: 2px solid var(--wowi-blue);
border-radius: 7px;
color: var(--wowi-blue);
text-decoration: none;
font-weight: 700;
}
.access-feature {
padding: clamp(3rem, 5vw, 5rem) 0;
}
.access-feature-grid {
display: grid;
grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
.access-feature-text h2 {
font-size: clamp(2rem, 3vw, 2.65rem);
}
.access-feature-links {
display: grid;
gap: 1.2rem;
margin: 0;
padding: 0;
list-style-position: outside;
}
.access-link-card {
display: block;
padding: clamp(1.35rem, 3vw, 1.8rem);
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.access-link-card:hover,
.access-link-card:focus {
transform: translateY(-3px);
border-color: var(--wowi-green);
box-shadow: 0 18px 42px rgba(46, 72, 87, .12);
}
.access-link-card h3 {
margin: 0 0 .7rem;
color: var(--wowi-blue);
font-size: clamp(1.25rem, 2vw, 1.55rem);
line-height: 1.25;
font-weight: 400;
}
.access-link-card p {
margin: 0;
color: var(--text-muted);
}
.access-link-card span {
display: inline-block;
margin-top: 1rem;
color: var(--wowi-blue);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 4px;
}

/* POP UP - Pages:career/accessibility.php (hints) */
#popup {
grid-column:1/-1;
}
#popup {
padding:0 2em 0 2em;
}
#popup h1{
padding:0;
font-size:1.5em;
}
#popup p{
line-height:1.25;
color:#263943;
} 
.icon-pdf {
display:inline-block;
padding-left:5px;
} 

/* WORKSHOP PAGES
----------------------------------------------------------------------------------------------*/
/* Workshop Calendar, Page:workshops.php*/
.calendar {
max-width: 1200px;
margin-left: auto; margin-right: auto;
border-top: 1px solid #999999;
}
.calendar:nth-last-child(n) {margin-bottom: 1em; }
/* Workshop Objectives */
.objectives {
margin-left: auto; margin-right: auto;
}
.wksp-objective {list-style:none;}
.wksp-objective:hover {background-color: #fbfbfc; border-radius: 10px;}
.wksp-objective img {
padding-right:20px;
display:inline-block; 
width:50px;
vertical-align:top;
padding-top: 0;
}
.wksp-objective p {
vertical-align:top; 
padding-top: 0;
padding-bottom: 0;
display:inline-block; 
}
/* Ratings, Page: training/ratings */
.highlight-text {
margin: 2em auto 0 auto;
color:#fff;
text-align: center;
border-radius: 10px;
padding: 0 2em 2em 2em;
width:100%;
overflow: hidden;
}
.highlight-text h2, .highlight-text p {
max-width: 600px;
margin-left:auto; margin-right: auto;
}
.highlight-text p {
line-height: 1.5;
}

/* INTRO & TESTIMONIAL, Pages: about/customers, about/comparison-chart, career/accessibility, 
                               training/leaders, training/workshop
----------------------------------------------------------------------------------------------*/
.intro {
padding-block: clamp(2.5rem, 4vw, 3rem);
}
.intro-grid {
margin: 0;
display: grid;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
}
.intro-copy h2 {
font-size: clamp(2rem, 3.2vw, 2.6rem);
line-height: 1.08;
letter-spacing: -.02em;
margin: 0 0 1.5rem;
color: var(--wowi-blue);
}
.intro-copy p {
font-size: clamp(1.05rem, 1.35vw, 1.2rem);
line-height: 1.6;
margin: 0 0 1rem;
max-width: 62ch;
color: #173447;
}
.intro-copy p:last-child {
margin-bottom: 0;
}
.testimonial-card {
position: relative;
background: #90BE7B;
border-radius: 18px;
padding: clamp(2rem, 4vw, 3.25rem);
box-shadow: 0 18px 38px rgba(46, 72, 87, 0.12);
color: #fff;
align-self: start;
}
.testimonial-card::before {
content: "“";
position: absolute;
top: 1rem;
left: 1.5rem;
opacity: .55;
font-size: 4.5rem;
line-height: 1;
color: rgba(255, 255, 255, 0.28);
font-family: Georgia, serif;
}
.testimonial-card blockquote {
position: relative;
z-index: 1;
margin: 0;
}
.testimonial-card p {
margin: 0 0 1.35rem;
font-size: clamp(1.2rem, 1.7vw, 1.55rem);
line-height: 1.4;
font-weight: 600;
max-width: 760px;
max-width: 26ch;
}
.testimonial-card.is-long p {
max-width: 42ch;
}
.testimonial-card cite {
display: block;
margin-bottom: 2rem;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-size: clamp(.95rem, 1.1vw, 1.05rem);
line-height: 1.45;
color: rgba(255, 255, 255, 0.95);
max-width: 58ch;
opacity: .95;	
}
.testimonial-card .testimonial-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .85rem 1.75rem;
min-width: 220px;
border: 2px solid rgba(255,255,255,.92);
border-radius: 10px;
background: transparent;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: .04em;
text-decoration: none;
transition:
background .18s ease,
transform .18s ease,
border-color .18s ease;
}
.testimonial-card .testimonial-btn:hover {
background: rgba(255,255,255,.12);
transform: translateY(-2px);
}
.testimonial-card .testimonial-btn:focus-visible {
outline: 3px solid rgba(255,255,255,.45);
outline-offset: 3px;
}

/* EMBEDDED VIDEOS, Pages: about/history, about/customers
----------------------------------------------------------------------------------------------*/
.embedded-video-section {
padding-top: clamp(1rem, 6vw, 2rem);
padding-bottom: clamp(2rem, 6vw, 2rem);
border-top: 1px solid #E8EEF2;
}
.embedded-video-grid {
margin: 0 auto;
display: grid;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.video-frame {
background: #dce6eb;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.video-frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.embedded-video-copy h2 {
font-size: clamp(1.5rem, 3.5vw, 2rem);
}
.embedded-video-copy p {
font-size: 1.2rem;
max-width: 660px;
}

/* old? index page?
----------------------------------------------------------------------------------------------*/
.customers-quotes {
margin: 2em auto 1em auto;
color:#fff;
border-radius: 10px;
padding-top: 2em;
padding-bottom: 2.5em;
}
.customers-quote {
margin: auto;
width:80%;
}
.customers-quotes a {margin-top: 1.5em; }

.customers-quote q:before, .quote q:before {
line-height: 1px; 
position: relative; 
bottom: -5px; 
font-size:2em; 
color:#fff;
}
.customers-quote q {
font-size: 1.25rem;
line-height: 1.5;
font-style: normal;
}
.quote-list {
margin: 1rem 0;
font-size: 1.25rem;
}
.customers-quote .quote-emphasis {
font-style: italic;
}
.customers-quote p {margin-bottom: 0;}
.customers-quote q::after, .quote q::after{quotes: none;} 
.customers-quote:not(:first-child) {padding-top: 2em;}
.customer-name {margin-top: 1em; font-size: 1rem;}

.quote q {
font-size: 1.15rem;
line-height: 1.5;
}
.quote-name {margin-top: .25em; font-size: 1rem;}

.leaders-image {
background: contain;
background-repeat: no-repeat;
width:85%;
}
.workshop-cklist-header p, .workshop-cklist-header h2 {
margin: 0 auto;
text-align: center;
max-width: 880px;
}
.sponsors-list ul {list-style-type:square; list-style-position:outside; }
.workshop-schedule {padding-bottom:30px;}
.workshop-schedule p {
max-width:500px; 
padding-bottom: 1em;
}
.workshop-schedule p a {text-decoration:underline;}
.workshop-schedule hr {
margin-top:50px;
width:200px;
text-align:center;
color:var(--wowi-blue); 
}
.calendar-col p.type {
text-transform: uppercase;
font-size:1em;
font-family: 'Open Sans'; 
font-weight: 600; 
color:var(--wowi-blue);
letter-spacing: .2rem;
}
.calendar-col p.privacy {
font-size:1em;
font-family: 'Open Sans'; 
font-weight: 400;
color:var(--wowi-blue);
width: 80%;
}
.calendar-col p.workshop_seal {
font-size:1em;
font-family: 'Open Sans'; 
font-weight: 400;
}
.calendar-col p.date {
margin-bottom: 0;
padding-bottom: 1em;
font-family: 'Open Sans'; 
font-weight: 600; 
}
.calendar-col p.time {
margin-top: 0;
padding-top: .25em;
margin-bottom:0;
}
.calendar-col p.delivery {
margin-top: 0;
padding-top: .25em;
font-size: 1.15em;
padding-bottom: 1em;
}
.calendar-col p.orgs {
font-family: 'Open Sans'; 
font-weight: 600; 
}
/* REVIEWS - Page: about/reviews
------------------------------------------------------------------------------*/
.review {
width:100%;
padding-top:10px;
padding-bottom:10px;
}
.review img {
display:inline-block;
float:left;
vertical-align:top; 
padding-top:26px;
width:30%;
max-width:200px;
}
.review p {
display:inline-block;
width:55%;
float:left;
padding-left:5%;
vertical-align:top;
font-size:1.25em;
}
.review-quote {
line-height:1.5;
color:var(--wowi-blue);
}
/* LOGIN - Page: career/login 
------------------------------------------------------------------------------*/
.login-error {
background: #fff4f4;
border-left: 4px solid #d13525;
padding: .75rem 1rem;
margin-bottom: 1rem;
border-radius: 6px;
color: #d13525;
}
.login-note {
font-size: .9rem;
color: #6c7a86;
margin-top: .35em;
margin-bottom: .75em;
}
.login-note-help {
font-size: .9rem;
color: #6c7a86;
margin-top:1rem;
}
.login-help-panel {
margin-top:1.75rem;
padding-top:1.5rem;
border-top:1px solid var(--wowi-border, #D6E2E8);
}

.login-help-title {
margin:0 0 .9rem;
font-size:1rem;
font-weight:700;
color:var(--wowi-blue, #2e4857);
}

.login-help-actions {
display:grid;
grid-template-columns:1fr 1fr;
gap:.75rem;
}

.login-help-btn {
display:flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:.75rem 1rem;
border:1px solid var(--wowi-border, #D6E2E8);
border-radius:6px;
background:#fff;
color:var(--wowi-blue, #2e4857);
font-size:.95rem;
font-weight:700;
text-align:center;
text-decoration:none;
transition:.2s ease;
}

.login-help-btn:hover,
.login-help-btn:focus {
border-color:var(--wowi-green, #98C683);
background:#F7FBF5;
}

/* HISTORY - Page: about/history
------------------------------------------------------------------------------*/
.history-section {
padding-top: clamp(1rem, 6vw, 2rem);
padding-bottom: clamp(2rem, 6vw, 2rem);
}
.history-grid {
display: grid;
margin: 0 auto;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
}
.history-copy h2 {
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.1;
color: var(--wowi-blue);
font-weight: 400;
margin-bottom: 1.5rem;
}
.history-copy p {
font-size: 1.18rem;
margin-bottom: 1.5rem;
max-width: 700px;
}
.history-note {
font-size: 1rem !important;
color: var(--wowi-muted);
}
.history-panel {
background: var(--bg-light-blue);
border: 1px solid var(--border-light);
border-radius: 16px;
padding: clamp(2rem, 4vw, 3rem);
max-width: 580px;
}
.panel-eyebrow {
color: var(--wowi-green);
text-transform: uppercase;
letter-spacing: .12em;
font-size: .85rem;
font-weight: 700;
margin-bottom: 1rem;
}
.panel-title {
font-size: 1.8rem;
line-height: 1.2;
color: var(--wowi-blue);
font-weight: 400;
margin-bottom: 2rem;
}
.timeline-item {
display: grid;
grid-template-columns: 90px 1fr;
gap: 1rem;
align-items: start;
}
.timeline-item:nth-child(n+2):nth-child(-n+3) {
padding-top: 1em;
}
.timeline-year {
color: var(--wowi-green);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: .04em;
}
.timeline-copy h3 {
margin: 0 0 .35rem;
color: var(--wowi-blue);
font-size: 1.1rem;
}
.timeline-copy p {
margin: 0;
color: var(--wowi-muted);
font-size: 1rem;
line-height: 1.5;
}
.multid-intro h2 {
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1.15;
font-weight: 400;
color: var(--wowi-blue);
margin-bottom: 1.25rem;
}
.multid-intro {
max-width: 780px;
margin-bottom: 2rem;
}
.multid-intro p {
font-size: 1.15rem;
color: var(--wowi-muted);
}
.multid-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.35rem;
max-width: 1400px;
margin: 0 auto;
}
.multid-card {
background: var(--bg-light-blue);
border-radius: 14px;
padding: 1.75rem;
border: 1px solid rgba(46,72,87,.08);
}
.multid-card h3 {
color: var(--wowi-blue);
font-size: 1.35rem;
margin-bottom: .6rem;
}
.multid-card p {
color: var(--wowi-muted);
margin-bottom: 0;
}
.quote-band {
max-width: 820px;
margin: 0 auto;
padding-top: clamp(.75rem, 4vw, 1.25rem);
padding-bottom: clamp(2.5rem, 4vw, 3rem);
border-top: 1px solid var(--border-light);
}
.quote-band blockquote {
margin: 0;
font-family: 'Comfortaa';
font-weight: 400;
font-size: clamp(1.2rem, 2vw, 1.55rem);
font-style: italic;
line-height: 1.6;
color: var(--wowi-blue);
}
.quote-credit {
margin-top: 1rem;
font-family: 'Open Sans';
font-weight: 400;
font-style: normal;
font-size: 1rem;
}


/* RESULTS - Page: wowi/results, spanish (signed in)
------------------------------------------------------------------------------*/
.results-db {
padding:3em 20px;
max-width:750px;
}
.results-db h1 {
text-align:left;
font-size:2.5rem;
}
.results-db h2 {
padding-top: 1em;
font-size:2rem;
}
.results-db-item {
padding-top:10px;
padding-bottom:10px;
}
.results-db-icon {
width:15%; 
display:inline-block;
vertical-align:top;
padding-top:40px;
text-align:left;
} 
.results-db-icon img {
display:block;
width:100%;
max-width:70px;
} 
.results-db-text {
width:80%;
padding-left:40px;
display:inline-block;
vertical-align:top; 
} 
.results-db-text h2 {
margin-top:0;
margin-bottom:0;
}
.results-db-text h2 a {
color:var(--wowi-blue);
font-family: 'Open Sans'; 
font-weight: 700; 
}
.results-db-text h2 a:hover {
color:var(--wowi-green);
}
.results-db-text p {
margin-top:0;
margin-bottom:.5em;
}



/* VERSIONS SUPPORT - Page: tools/support/version_help
------------------------------------------------------------------------------*/
.version-source {
margin: 1em 0 0 0;
font-size: .95rem;
color: #5b6b76;
line-height: 1.5;
}
.version-source a {
word-break: break-word;
}


/* SAMPLE QUESTIONS, Page: career/sample-questions
----------------------------------------------------------------------------------------------*/
.sample-q-intro {
max-width: 900px;
padding: 1.5rem 0 1.25rem;
}
.sample-q-intro p {
margin: 0 0 .25em;
font-size: 1.15rem;
line-height: 1.55;
color: #263943;
}
.sample-q-intro p:last-child {
margin-bottom: 0;
}
.c1 .sample-q-intro a {
color: var(--wowi-blue);
text-decoration: underline;
text-underline-offset: 4px;
font-weight: 400;
font-size: 1rem;
}
.sample-q-intro a:hover,
.sample-q-intro a:focus {
color: var(--wowi-blue);
text-decoration-thickness: 2px;
}
.sample-q-block {
display:grid;
gap:22px;
align-items:stretch;
margin-bottom:24px;
padding:22px;
background:#F2F7FA;
border:1px solid var(--border-light);
border-radius:24px;
}
.sample-q-copy,
.sample-q-example {
padding:26px; 
border-radius:18px;
}
.sample-q-example {
background:#fff;
border:1px solid var(--border-light);
}
.sample-q-copy h2 {
margin:0 0 12px;
color:var(--wowi-blue);
font-size:1.75rem;
line-height:1.15;
}
.sample-q-copy p {
margin:0 0 14px;
color:var(--muted);
font-size:1rem;
line-height:1.5;
}
.c1 .sample-q-copy ul,
.example-options {
margin:0;
padding:0;
list-style:none;
}
.c1 .sample-q-copy li {
position:relative;
margin:0 0 9px;
padding-left:22px;
line-height:1.45;
font-size: 1rem;
}
.sample-q-copy li::before {
content:"";
position:absolute;
left:0;
top:.55em;
width:8px;
height:8px;
background:var(--wowi-green);
border-radius:50%;
}
.sample-q-tag {
display:inline-flex;
margin:0 0 14px;
padding:7px 11px;
background: #E8EEF1;
color:var(--wowi-blue);
border-radius:999px;
font-size:.78rem;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
}
.sample-q-example {
display:flex;
flex-direction:column;
justify-content:center;
}
.example-label {
margin:0 0 10px;
color:var(--wowi-blue);
font-size:.82rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.example-question {
margin:0 0 18px;
font-size:1.45rem;
line-height:1.25;
font-weight:700;
}
.example-prompt {
margin:0 0 12px;
color:var(--muted);
font-size:.98rem;
line-height:1.45;
}
.answer-options {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-bottom: 2rem;
}
.answer-options label {
display: flex;
align-items: center;
gap: .75rem;
font-size: 1.2rem;
color: var(--color-text);
cursor: default;
}
.fake-radio {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid #b7bcc1;
background: #fff;
position: relative;
flex-shrink: 0;
}
.fake-radio::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
background: #dfe4e8;
}
.example-answer {
margin:0;
padding:14px 16px;
background:#F2F7FA;
border-left:4px solid var(--wowi-green);
border-radius:12px;
color:var(--text);
line-height:1.45;
}
p.example-answer {
font-size: 1rem;
}
.math-row {
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
align-items:center;
}
.math-problem {
padding:22px;
background:var(--wowi-bg);
border-radius:16px;
text-align:center;
color:var(--wowi-blue);
font-size:2.3rem;
font-weight:700;
}
.spatial-img {
max-width:170px;
width:100%;
height:auto;
padding:18px;
background:var(--wowi-bg);
border-radius:16px;
}
.sample-q-block.cia {
background:#EEF6FA;
}
.sample-q-block.ctp {
background:#F2F8EF;
}
.sample-q-block.jsi {
background:#F7F3FA;
}


/* PURCHASING AUTHORITY DASHBOARD - Page: purchase_authority/pa-demo/pa-dashboard.php
---------------------------------------------------------------------------------------------*/
.pa-dashboard{
padding:2em 0;
width:95%;
}
.pa-dashboard h1 {
text-align:left;
font-size:2.5em;
}
.pa-dashboard-item {
padding-top:15px;
padding-bottom:15px;
}
.pa-dashboard-item:nth-child(2),
.pa-dashboard-item:nth-child(3),
.pa-dashboard-item:nth-child(4),
.pa-dashboard-item:nth-child(5){
border-bottom:1px solid #fff;
}
.pa-dashboard-icon {
width:10%; 
display:inline-block;
vertical-align:top;
padding-top:10px;
text-align:left;
} 
.pa-dashboard-icon img {
display:block;
width:100%;
max-width:60px;
} 
.pa-dashboard-text {
width:85%;
padding-left:40px;
display:inline-block;
vertical-align:top; 
} 
.pa-dashboard-text h2 {
font-size:1.85em;
margin-top:0;
margin-bottom:0;
}
.pa-dashboard-text h2 a {
color:var(--wowi-blue);
font-family: 'Open Sans'; 
font-weight: 700; 
}
.pa-dashboard-text h2 a:hover {
color:var(--wowi-green);
}
.pa-dashboard-text p {
margin-top:0;
margin-bottom:.5em;
}
.pa-dashboard-text p a:hover {
color:#fff;
}

/* RESEARCH RELIABILTIY - Page: about/tables/reliability-split-half
------------------------------------------------------------------------------*/
.research-intro {
margin: 0 auto;
padding-top: clamp(2rem, 4vw, 3rem);
padding-bottom: 1em;
}
.research-intro h1 {
font-size: clamp(2.2rem, 5vw, 3.5rem);
line-height: 1.08;
margin-bottom: 1rem;
color: var(--wowi-blue);
}
.research-intro h2 {
font-size: clamp(1.45rem, 3vw, 2.25rem);
line-height: 1.25;
max-width: 1050px;
margin-bottom: clamp(2rem, 4vw, 3rem);
color: var(--wowi-blue);
font-weight: 600;
}
.research-intro-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
margin-bottom: 1.25rem;
}
.research-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 1.25rem;
}
.research-info-card {
background: #F7FAFB;
border: 1px solid #D9E4EA;
border-radius: 18px;
padding: 1.5rem;
}
.research-info-card h3 {
font-size: 1.2rem;
margin-bottom: .75rem;
color: var(--wowi-blue);
}
.research-info-card p {
font-size: 1rem;
line-height: 1.65;
margin-bottom: .9rem;
}
.research-info-card p:last-child {
margin-bottom: 0;
}
.research-sample-strip {
display: flex;
flex-wrap: wrap;
gap: .65rem;
align-items: center;
background: #fff;
border: 1px solid #D9E4EA;
border-radius: 16px;
padding: .9rem 1rem;
font-family: 'Open Sans';
font-weight: 400;
font-style: normal;
font-size: .95rem;
line-height: 1.4;
margin-bottom: 0;
}
.research-sample-strip span,
.research-sample-strip strong {
background: #F2F7FA;
border-radius: 999px;
padding: .45rem .75rem;
font-size: 1rem;
}
.research-sample-strip strong {
color: var(--wowi-blue);
}

/* VALIDITY - Page: about/validity
------------------------------------------------------------------------------*/
.validity-step-card {
position: relative;
margin-bottom: 1.5rem;
padding: clamp(1.5rem, 3vw, 2rem);
}
.validity-step-header {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}
.validity-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: #E6EEF3;
color: var(--wowi-blue);
font-weight: 800;
font-size: .9rem;
}
.validity-step-header h3 {
margin: 0;
color: var(--wowi-blue);
font-size: clamp(1.2rem, 2vw, 1.45rem);
line-height: 1.25;
}
.validity-table-link {
margin: 1.25rem 0;
font-weight: 700;
break-inside: avoid;
}
.validity-table-link a {
color: var(--wowi-blue);
}
.validity-text-columns {
column-count: 2;
column-gap: clamp(2rem, 5vw, 4rem);
column-rule: 1px solid #D9E3E8;
}
.validity-text-columns p {
font-size:1rem;
break-inside: avoid;
margin-top: 0;
margin-bottom: 1.25rem;
line-height: 1.7;
}

/* SAMPLE REPORTS - Page: sample-reports/list
------------------------------------------------------------------------------*/
.sample {
padding-top:0;
padding-bottom:10px;
width:98%;
overflow: hidden;
}
.sample-person {
vertical-align:top;
margin-top: 1.35rem;
display:inline-block;
float:left;
background-color:#CCD6DC;
} 
.sample-details {
vertical-align:top;
display:inline-block;
float:left;
width:60%;
} 
.sample-details h3 {
vertical-align:top;
margin-top:0;
font-size: 1.75em;
margin-bottom: 0;
}
.sample-details p {
margin-top:0;
margin-bottom:0;
padding-top:.25em;
padding-bottom:.25em;
}
.sample-details h3, .sample-details p {
padding-left:30px;
}
.sample a {text-decoration: underline;}

.sample-rehab1 {background-image:url("/sample-reports/images/rehab1.png");}
.sample-rehab2 {background-image:url("/sample-reports/images/rehab2.png");}
.sample-bvi1 {background-image:url("/sample-reports/images/bvi1.png");}
.sample-bvi2 {background-image:url("/sample-reports/images/bvi2.png");}
.sample-adulted1 {background-image:url("/sample-reports/images/adulted1.png");}
.sample-adulted2 {background-image:url("/sample-reports/images/adulted2.png");}
.sample-tvr1 {background-image:url("/sample-reports/images/tvr1.png");}
.sample-tvr2 {background-image:url("/sample-reports/images/tvr2.png");}
.sample-apprenticeship1 {background-image:url("/sample-reports/images/apprenticeship1.png");}
.sample-apprenticeship2 {background-image:url("/sample-reports/images/apprenticeship2.png");}
.sample-hs1 {background-image:url("/sample-reports/images/hs1.png");}
.sample-hs2 {background-image:url("/sample-reports/images/hs2.png");}
.sample-veterans1 {background-image:url("/sample-reports/images/veterans1.png");}
.sample-veterans2 {background-image:url("/sample-reports/images/veterans2.png");}
.sample-cte1 {background-image:url("/sample-reports/images/cte1.png");}
.sample-cte2 {background-image:url("/sample-reports/images/cte2.png");}
.sample-wioa1 {background-image:url("/sample-reports/images/wioa1.png");}
.sample-wioa2 {background-image:url("/sample-reports/images/wioa2.png");}
.sample-college1 {background-image:url("/sample-reports/images/college1.png");}
.sample-college2 {background-image:url("/sample-reports/images/college2.png");}
.sample-rehab1, .sample-rehab2, .sample-bvi1, .sample-bvi2, .sample-apprenticeship2, .sample-apprenticeship1, .sample-tvr2, .sample-tvr1, .sample-adulted2, .sample-adulted1, .sample-cte2, .sample-cte1, .sample-veterans2, .sample-veterans1, .sample-hs2, .sample-hs1, .sample-wioa2, .sample-wioa1, .sample-college2, .sample-college1 {background-repeat:no-repeat; background-position:left top; background-size:contain; height:320px; width:225px;}

/* LEARNING RESOURCES, Page: report/support/learningResources
--------------------------------------------------------------------------------------------------*/
#resource-filter {
padding-top:1em;
padding-bottom:1em;
}
.filterDiv {display: none;}
.show {display: grid;}
.btn-filter {
border:1px solid #dde5ea;
border-radius: 999px;
padding: 0.65rem 1.25rem;
background: #f5f7f8;
cursor: pointer;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 1.05rem;
color: var(--wowi-blue);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-filter:hover {
background-color: #f4f7f8;
border-color: #b8c8d1;
}
.btn-filter.active {
background-color: var(--wowi-blue);
border-color: var(--wowi-blue);
color: #fff;
}
.c1 .filterDiv h2 {
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 400;
color: var(--wowi-blue);
margin-bottom: .25em;
line-height: 1.1;
position: relative;
}
resource {
position: relative;
padding: 1.75rem 1.5rem 4.5rem;
min-height: 250px;
background-color: #fff;
border: 1px solid #d9e2e7;
border-radius: 14px;
text-align: center;
}
.resource-logo img {
height: 32px;
max-width: 210px;
object-fit: contain;
margin: 0 auto 0.6rem;
display: block;
}
.resource h3,
.resource h4 {
margin: 0 0 1rem;
font-size: 1.45rem;
line-height: 1.25;
color: var(--wowi-blue);
}
.resource p {
margin: 0 auto;
max-width: 34ch;
font-size: 1.05rem;
line-height: 1.45;
color: #3f3f3f;
}
.resource-button {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
width: auto;
min-width: 150px;
border: 1px solid #8aa0ad;
border-radius: 999px;
padding: 0.45rem 1.25rem;
background-color: #fff;
text-align: center;
text-decoration: none;
display: inline-block;
color: var(--wowi-blue);
font-family: 'Roboto', sans-serif;
font-size: 1.05rem;
font-weight: 500;
transition: background-color 0.2s ease, color 0.2s ease;
}
.resource-button:hover,
.resource-button:focus {
background-color: var(--wowi-blue);
color: #fff;
}
.resource-button a {
color: inherit;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: inherit;
font-weight: inherit;
}


/* Ordering */

/* CONTACT - Pages: contact/questions (signed out)
------------------------------------------------------------------------------*/
.icon-text img {padding-right:15px; width:50px;}
.icon-text span {display:inline-block;}
.icon-top {vertical-align:top;}
.icon-middle {vertical-align:middle;}

.hp-field {
display: none !important;
}
.contact-message {
margin: 2em 0 24px 0;
padding: 16px 20px;
border-radius: 8px;
font-size: 1.05rem;
line-height: 1.4;
}
/* Success */
.contact-message.success {
background: #fff;
border: 1px solid var(--wowi-green);
color: var(--wowi-blue);
}
.contact-message.error {
background: #fdf2f2;
border: 1px solid #e0a1a1;
color: #7a2e2e;
}


/* NEW ACCOUNT, Pages: contact/new_account
------------------------------------------------------------------------------*/
.contact-info {
margin-top: 28px;
padding: 18px 20px;
max-width: 420px;
background: #fff;
border: 1px solid #ccd9e2;
border-radius: 10px;
}
.contact-info p {
margin: 0 0 8px;
font-size: 1.05rem;
}
.secondary-callout {
margin-top: 28px;
padding: 20px;
max-width: 560px;
border: 1px solid #d7e6d2;
border-radius: 10px;
}
.secondary-callout h3 {
margin: 0 0 10px;
font-size: 1.25rem;
color: 2e4857;
}
.secondary-callout p {
margin: 0 0 12px;
font-size: 1rem;
}
.secondary-callout a {
color: var(--wowi-blue);
font-weight: 600;
text-decoration: none;
}
.secondary-callout a:hover {
text-decoration: underline;
}
/* ORDER PAGE - Pages:/tools/order_scorings
------------------------------------------------------------------------------*/
.order-price-list {
margin: 2em auto;
padding: 52px 24px 56px;
border-radius: 10px; 
}
.order-price-list p {
max-width: 700px; 
}
/* Payment processing status */
.payment-status {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
min-height: 50px;
margin: 1.75em auto 0 auto;
padding: 0 20px;
background: #eef2f5;
color: #4a5a66;
font-size: 1.05em;
font-weight: 600;
border: 1px solid #d7dfe3;
border-radius: 6px;
}
.payment-spinner {
width: 16px;
height: 16px;
margin-right: 10px;
border: 2px solid #aeb8c0;
border-top-color: transparent;
border-radius: 50%;
animation: payment-spin 0.8s linear infinite;
}
@keyframes payment-spin {
to {
transform: rotate(360deg);
}
}
.payment-subtext {
font-size: 0.85em;
color: #7a8a94;
margin-top: 4px;
}
.payment-status {
transition: opacity 0.3s ease;
}
.payment-status-success {
background: #e8f4e3;
color: #2f5d35;
border-color: #b8d7ad;
}
.order-contact {
border: 1px solid #d7e2e8;
border-radius: 10px;
padding: 30px 34px;
background: #f2f7f2;
max-width: 620px;
width: 100%;
margin: 0 auto 2em auto;
}
.order-contact h2 {
font-weight: 500;
font-size: 1.6rem;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 18px;
}
.contact-item {
padding: 16px;
background: #fff;
border: 1px solid #dce7ed;
border-radius: 8px;
}
.contact-item.contact-label {
font-family: 'Open Sans';
font-weight: 400;
display: block;
color: #66737c;
font-size: 1rem;
margin-bottom: 6px;
}
.contact-item .contact-detail{
font-family: 'Open Sans';
font-weight: 400;
font-size: 1.25rem;
display: block;
color: #66737c;
margin-top: 0;
}
.contact-hours {
margin-top: 10px;
color: #66737c;
font-size: 1.05rem;
}
.payment-info {
padding: 3em 0;
}
.payment-info-inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 28px;
}
.section-heading {
text-align: center;
margin-bottom: 24px;
}
.section-heading h2 {
font-size: 2.15rem;
font-weight: 500;
margin-bottom: 8px;
}
.section-heading p {
max-width: 650px;
margin: 0 auto;
color: #66737c;
}
.info-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
gap: 32px;
align-items: start;
}
.pricing,
.order-security {
padding: 32px 34px;
background: #fff;
border-radius: 10px;
}
.pricing h3,
.order-security h3 {
font-size: 1.7rem;
font-weight: 500;
margin-bottom: 8px;
}
.pricing-intro,
.order-security p {
margin: 0 0 18px;
color: #66737c;
}
.minimum-order {
display: inline-block;
margin-bottom: 18px;
padding: 8px 14px;
border-radius: 999px;
background: #f2f7f2;
border: 1px solid #9dcb8c;
font-size: 0.95rem;
font-weight: 700;
color: var(--wowi-blue);
}
.order-security {
border-top: 6px solid var(--wowi-blue);
}
.security-list {
margin: 20px 0 24px;
padding: 0;
list-style: none;
}
.security-list li {
position: relative;
padding-left: 22px;
margin-bottom: 12px;
color: #34414a;
}
.security-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wowi-green);
}
.seal-row {
display: flex;
justify-content: center;
margin-top: 16px;
}
.authorize-seal {
text-align: center;
}


/* CHECKBOXES - Pages:add_batch.php, status_results.php
------------------------------------------------------------------------------*/
.ckBox input[type=checkbox] {opacity:0}
.ckBox label {
 position:relative;
 display:inline-block;
 /*20px width of fake checkbox + 10px distance between fake checkbox and text*/
 padding-left:30px;
}
.ckBox label::before,
.ckBox label::after {
 position:absolute;
 content:"";
/*Needed for the line-height to take effect*/
 display:inline-block;
 background:#fff;
}
/*Outer box of the fake checkbox*/
.ckBox label::before{
height:20px;
width:20px;
border:1px solid #a9bac4;
border-radius:4px;
left:0;
/*(30px line-height - 20px height of fake checkbox) = 10, 10 / 2 = 5, 5 - 1px for the border =4
*to vertically center it.
*/
 top:4px;
}
/*Checkmark of the fake checkbox*/
.ckBox label::after {
 height:5px;
 width:9px;
 border-left:2px solid;
 border-bottom:2px solid;
 transform:rotate(-45deg);
 left:5px;
 top:9px;
}
/*Hide the checkmark by default*/
.ckBox input[type="checkbox"] + label::after {
 content:none;
}
/*Unhide on the checked state*/
.ckBox input[type="checkbox"]:checked + label::after {
 content:"";
}
/*Adding focus styles on the outer-box of the fake checkbox*/
.ckBox input[type="checkbox"]:focus + label::before {
 outline:rgb(59, 153, 252) auto 5px;
}
/* RADIO BUTTONS - Pages:add_batch.php
------------------------------------------------------------------------------*/
.centerDiv {margin:0 auto; text-align:center; width:100%;}
.customRadio input[type=radio] {
 opacity:0
}
.customRadio{
font-size:1.25em;
display:inline-block;
padding:0 1.5em;
}
.customRadio label {
position:relative;
color:#fff;
}
.customRadio span::before,
.customRadio span::after {
content:'';
position:absolute;
top:0;
bottom:0;
margin:auto;
}
.customRadio span {
padding-left:50px;
display:inline-block;
}
.customRadio span.radio:hover {cursor:pointer;}
.customRadio span.radio::before {
left:0;
width:20px;
height:20px;
background:#fff;
border:1px solid #fff;
border-radius:25px;
}
.customRadio span.radio::after {
left:6px;
width:10px;
height:10px;
border-radius:25px;
background:#c4c4c4;
}
/* color of the 'checked' answer radio button */
.customRadio input[type="radio"]:checked + label span.radio::after {
left:6px;
background:#272727;
}
/* RADIO BUTTONS - Pages:add_edit_user.php
------------------------------------------------------------------------------*/
.custom-radio input[type=radio] {opacity:0}
.custom-radio{
font-size:1.25em;
display:inline-block;
padding:0 0 0 1em;
}
.custom-radio label {position:relative;}
.custom-radio span::before,
.custom-radio span::after {
 content:'';
 position:absolute;
 top:0;
 bottom:0;
 margin:auto;
}
.custom-radio span {
padding-left:30px;
display:inline-block;
}
.custom-radio span.radio:hover {cursor:pointer;}
.custom-radio span.radio::before {
left:0;
width:20px;
height:20px;
background:#fff;
border:1px solid #a9bac4;
border-radius:25px;
}
.custom-radio span.radio::after {
left:4px;
width:12px;
height:12px;
border-radius:25px;
background:#c4c4c4;
}
/* color of the 'checked' answer radio button */
.custom-radio input[type="radio"]:checked + label span.radio::after {
left:4px;
background:var(--wowi-green);
}

/* TABLES, Pages:workshop.php, about/tables/table(#), status_results.php
--------------------------------------------------------------------------------------------------*/
table {
border-collapse:collapse;
width:100%;
}
table td {
padding:.5em;
text-align:left;
font-family: 'Open Sans'; 
font-weight: 400;
}
table th {
text-align: left;
font-size:1.15em;
padding:.5em;
font-family: 'Roboto'; 
font-weight: 400; 
}
table tfoot {
font-size:.9em;
} 
table caption {
font-family: 'Roboto'; 
font-weight: 400; 
} 
/* CREDENTIALS TABLE (Pages: user_maintenance_overview.php & purchase_authority/overview.php)
--------------------------------------------------------------------------------------------------*/
table.credentials {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: .75em;
font-size: .98rem;
}
table.credentials thead, table.credentials tbody {border:none;}

table.credentials th {
padding: .8em .7em;
text-align: left;
font-weight: 500;
color: var(--wowi-blue);
background: #f5f7f8;
border-bottom: 2px solid var(--wowi-blue);
}
table.credentials td {
padding: .65em .7em;
vertical-align: top;
border-bottom: 1px solid #dde5ea;
}
table.credentials tbody tr:nth-child(even) {
background: #fafbfc;
}
table.credentials tbody tr:hover {
background-color: #e8f0f5 !important;
}
table.credentials th img {display:inline; vertical-align: middle; padding-left: 2px;}
.credentials td.trash,
.credentials th.trash {
width: 44px;
min-width: 44px;
text-align: center;
padding-left: 0;
padding-right: 0;
white-space: nowrap;
}
.trash img {
display:inline;
min-width:16px;
vertical-align: middle;
}

/* PRICE LIST TABLE (Page:tools/order_scorings)
--------------------------------------------------------------------------------------------------*/
.price-list {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}
.price-list th,
.price-list td {
padding: 12px 8px;
text-align: left;
border-bottom: 1px solid #e0e8ed;
}
.price-list tr:last-child td {
border-bottom: 0;
}
.price-list th {
font-weight: 700;
color: #34414a;
}
.price-list th:last-child,
.price-list td:last-child {
text-align: right;
}

/* REPORTS TABLE (Page:tools/status_results.php)
--------------------------------------------------------------------------------------------------*/
table.status-results {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
margin-top: .75em;
font-size: .98rem;
}
table.status-results th {
padding: .8em .7em;
text-align: left;
font-weight: 500;
color: var(--wowi-blue);
background: #f5f7f8;
border-bottom: 2px solid var(--wowi-blue);
}
table.status-results td {
padding: .65em .7em;
vertical-align: top;
border-bottom: 1px solid #dde5ea;
}
/* Default columns */
td.reports-columns {
background: #fff;
}
/* Name row */
table.status-results td.reports-columns:nth-child(2) {
font-weight: 600;
color: var(--wowi-blue);
}
/* Login block */
.detail-login {
padding-top: .35em;
font-size: .94rem;
color: #55626b;
line-height: 1.4;
}
/* Client Reports columns */
td.reports-client {
background: #edf3f7;
}
/* Counselor Reports columns */
td.reports-counselor {
background: #eef5ea;
}
/* Client Reports header */
th.reports-client {
background: #eaf1f6;
}
/* Counselor Reports header */
th.reports-counselor {
background: #eaf4e6;
}
table.status-results tbody tr:hover td {
background-color: #f7fafc;
}
table.status-results tbody tr:hover td.reports-client {
background-color: #e7f0f5;
}
table.status-results tbody tr:hover td.reports-counselor {
background-color: #e6f1e0;
}
table.status-results tbody tr:nth-child(2n) td {
font-size: .94rem;
line-height: 1.45;
color: #55626b;
background: #fcfcfc;
}
table.status-results tbody tr:nth-child(2n) td.reports-client {
background: #f4f8fb;
}
table.status-results tbody tr:nth-child(2n) td.reports-counselor {
background: #f3f8ef;
}
table.status-results a {
color: var(--wowi-blue);
text-decoration: underline;
}
table.status-results tbody tr:hover td {
background-color: #e8f0f5 !important;
}
/* Slight tint difference for grouped columns */
table.status-results tbody tr:hover td.reports-client {
background-color: #dfeaf1 !important;
}
table.status-results tbody tr:hover td.reports-counselor {
background-color: #e2eddc !important;
}
td.reports-columns:nth-child(2) {
font-weight: 600;
color: var(--wowi-blue);
}
table.status-results tbody tr:nth-child(4n+1) td.reports-columns {
background: #fbfcfd;
}
table.status-results tr td[colspan="7"] {
height: .8em;
background: transparent;
border-bottom: none;
}

/* PREVIOUS WORKSHOP SPONSORS TABLE (Page: training/sponsors.php)
--------------------------------------------------------------------------------------------------*/
table.calendar-previous {
margin-left:1em;
border:none;
background:#fff;
}
table.calendar-previous caption {text-align:left;} 
table.calendar-previous tbody {border-left:none;border-right:none;}
table.calendar-previous th {
border-bottom:2px solid var(--wowi-blue);
font-family: 'Open Sans'; 
font-weight: 700; 
vertical-align:top;
} 
table.calendar-previous th:nth-child(n+4) {text-align:center;}
table.calendar-previous th:nth-child(4) {white-space: nowrap;}
table.calendar-previous td {
border-bottom:2px solid #ccd6dc;
border-left:none;
border-right:none;
vertical-align:top;
} 
table.calendar-previous tr:hover{background:#fafbfc;}
.wNum {color:#52b300;}
.ratings{
vertical-align:middle;
height:70px;
}
.ratings h2 {
font-size:1.75em;
vertical-align:middle;
text-align:center;
}
.ratings-number {
font-size:1.25em;
color:var(--wowi-green);
font-family: 'Open Sans'; 
font-weight: 700; 
text-align:center;
}
/* TABLE */
table.add-logins{
margin:0 auto;
width:90%;
max-width:550px;
}
table.add-logins th {
padding-left:0;
border-bottom:1px solid #ccd6dc;
}
table.add-logins td {
padding-left:0;
}
table.add-logins td:nth-child(1) {
padding-right:20px;
}
/* TABLE. Page:about/comparisonChart.php
------------------------------------------------------------------------------*/
table.compare {border:none;}
table.compare thead, table.compare tbody {border:none;}
table.compare td {border:none;}
table.compare th {text-transform:none;}

/* NORMS TABLE (Page:about/tables/norms.php)
--------------------------------------------------------------------------------------------------*/
table.norms {border:none; width:100%;}
table.norms thead, table.norms tbody {border:none;}
table.norms td {border:none;}
table.norms thead th {color:var(--wowi-green);}
table.norms tbody th {color:var(--wowi-blue);}

/* VALIDITY TABLE (Page:about/tables/validitytable3.php)
--------------------------------------------------------------------------------------------------*/
table.validity tbody tr td:nth-child(1){width:25%;}
table.validity tbody tr td:nth-child(2), table.validity tbody tr td:nth-child(3), table.validity tbody tr td:nth-child(4){width:15%;}
table.validity tbody tr:hover td {background:#f1f1f1;}

/* SUPPORT TABLE (Page:tools/support/group_help.php)
--------------------------------------------------------------------------------------------------*/
table.support-sections {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 1em;
border: 1px solid #ccd6dc;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
table.support-sections th {
background-color: #e3e9ec;
color: var(--wowi-blue);
padding: .75em .9em;
text-align: left;
font-weight: 600;
border-bottom: 1px solid #ccd6dc;
}
table.support-sections td {
padding: .75em .9em;
vertical-align: top;
border-bottom: 1px solid #e1e6ea;
}
/* Remove bottom border on last row */
table.support-sections tbody tr:last-child td {
border-bottom: none;
}
table.support-sections tbody tr:nth-child(even) {
background-color: #f7f9fb;
}
table.support-sections td:first-child {
font-weight: 600;
color: var(--wowi-blue);
width: 36%;
}

/* RESEARCH TABLE (Page:about/research)
--------------------------------------------------------------------------------------------------*/
table.research-other {
width:100%;
max-width:1200px;
margin-left:auto;
margin-right:auto;
border:1px solid #D6E2E8;
border-collapse:separate;
border-spacing:0;
border-radius:20px;
overflow:hidden;
background:#fff;
}
table.research-other th {
background-color:var(--wowi-blue);
color:#fff;
padding:16px 20px;
text-align:left;
}
table.research-other td {
padding:18px 24px;
border-bottom:1px solid #D6E2E8;
vertical-align:top;
line-height:1.5;
}
table.research-other tr:last-child td {
border-bottom:none;
}
table.research-other tr:nth-child(even) {
background-color:#F2F7FA;
}
table.research-other td:nth-child(1) {
white-space:nowrap;
width:130px;
font-weight:700;
color:var(--wowi-blue);
}
table.research-other a {
color:var(--wowi-blue);
text-decoration:none;
font-weight:600;
}
table.research-other a:hover {
text-decoration:underline;
}

/* RESEARCH TABLE (Page:about/tables/table1-11, about/tables/validitytable1-3, about/tables/workforce_table.php)
--------------------------------------------------------------------------------------------------*/
.table-card {
background: #fff;
border: 1px solid #D9E4EA;
border-radius:20px;
overflow:hidden;
box-shadow: 0 8px 24px rgba(46,72,87,.04);
margin-bottom: 3em;
}
.table-card-simple {
margin-top: 3rem;
}
table.research {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 2em;
}
table.research caption {
caption-side: top;
padding:
1.35rem
1.5rem
1rem;
background: #fff;
font-size: clamp(1.35rem, 2vw, 1.7rem);
font-weight: 700;
line-height: 1.2;
text-align: left;
color: var(--wowi-blue);
}
table.research thead th {
padding: 1rem 1.15rem;
text-align: left;
font-size: .98rem;
line-height: 1.3;
border-bottom: 1px solid #D9E4EA;
}
/* PRIMARY HEADER */
table.research thead tr:first-child th:first-child {
background: #466676;
color: #fff;
font-weight: 700;
}
/* SECOND HEADER */
table.research thead tr:first-child th:not(:first-child) {
background: #EDF3F6;
color: var(--wowi-blue);
font-weight: 700;
}
table.research tbody td {
padding: .9rem 1.15rem;
border-bottom: 1px solid #E7EDF1;
font-size: 1rem;
line-height: 1.45;
}
/* REMOVE LAST BORDER */
table.research tbody tr:last-child td {
border-bottom: none;
}
/* STRIPING */
table.research tbody tr:nth-child(even) {
background: #FAFCFD;
}
table.research tbody tr:hover {
background: #F2F7FA;
}
/* VALUE COLUMN */
table.research tbody td:last-child {
font-weight: 600;
color: var(--wowi-blue);
white-space: nowrap;
}
/* SECTION ROWS */
table.research td[colspan] {
background: #F4F7F9;
font-weight: 600;
color: #48606D;
}
table.research tfoot th,
table.research tfoot td {
padding: 1rem 1.15rem;
border-top: 2px solid #D9E4EA;
background: #F4F7F9;
font-weight: 700;
color: var(--wowi-blue);
text-align: left;
}



/* ALL FORMS 
Pages: sign in on index page, career/login, contact/questions, contact/new_account, career/forgot-password,
tools/add_edit_user, tools/add_batch, tools/order_scorings, tools/exportUserData, 
purchase_authority/pa_order_scorings, purchase_authority/pa-demo/demo-pa-order-scorings, mgt/customers
--------------------------------------------------------------------------------------------------------*/
input,
textarea,
select,
label,
legend,
button {
font-family: 'Open Sans', Arial, sans-serif;
}
form {
box-sizing: border-box;
}
form *,
form *::before,
form *::after {
box-sizing: border-box;
}
form label {
display: block;
color: #263943;
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 6px;
}
/* Shared fields */
form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
width: 100%;
font-size: 1.15rem;
font-weight: 400;
color: #263943;
background: #fff;
border: 1px solid #c9d9e2;
border-radius: 5px;
padding: 8px 10px;
}
/* Single-line fields */
form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form select {
height: 40px;
line-height: normal;
}
/* Textareas */
form textarea {
min-height: 110px;
line-height: 1.4;
resize: vertical;
}
/* Focus */
form input[type="text"]:focus,
form input[type="number"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
background: #f0f4f7;
border-color: #9fb7c6;
outline: 2px solid #ccd6dc;
outline-offset: 1px;
}
/* Disabled / readonly */
form input[readonly],
form textarea[readonly],
form select[disabled],
form input:disabled,
form textarea:disabled {
background: #f8fafb;
color: #66737c;
}

/* FORMS, Pages:tools/add_batch
------------------------------------------------------------------------------*/
.form-add-credentials {
grid-column:1/-1;
box-sizing:border-box;
margin-bottom: 3em;
}
.criteria label {
display: block;
}
.group-fields label {
margin-bottom: 8px;
}
.group-fields input[type=text],
.group-fields input[type=number] {
width: 100%;
}
.group-fields input[type=number] {
max-width: 120px;
}
.group-fields input[type=text] {
width: 100%;
}
.group-fields input[type=number] {
width: 100%;
max-width: 120px;
}
/* Version */
.criteria select {
margin-top: 6px;
margin-bottom: 6px;
width: 100%;
}
.checkbox-item input {
width: 20px;
height: 20px;
accent-color: var(--accent);
flex: 0 0 auto;
}

/* FORMS, Page: 
------------------------------------------------------------------------------*/
ul.pa-list {
padding-left:0;
margin-left:0;
width:90%;
}
.pa-list li {
display:inline-block;
list-style-type:none;
font-size:1.15em;
padding-left:0;
margin-left:0;
padding-right:.5em;
}
/* Page:purchase_authority/pa-demo/monthly-multi-yr.php */
.radio-item {
display:inline-block;
position:relative;
padding:0 6px 0 0;
}
.radio-item input[type='radio'] {
display:none;
}
.radio-item label {
color:#263943;
padding-right:20px;
}
.radio-item label:before {
content:" ";
display:inline-block;
position:relative;
top:5px;
margin:0 5px 0 0;
width:20px;
height:20px;
border-radius:11px;
border:2px solid var(--wowi-blue);
background-color:transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius:11px;
width:12px;
height:12px;
position:absolute;
top:9px;
left:4px;
content:" ";
display:block;
background:var(--wowi-blue);
}

/* FORM - LOGIN, Pages: career/login
--------------------------------------------------------------------------------------------------------*/
.form-login {
margin: 0 auto 1em auto;
background: #fff;
border: 1px solid #ccd6dc;
border-radius: 10px;
padding: 2rem 2.25rem;
max-width: 650px;
}
.form-login h2 {
font-family: Roboto, Arial, sans-serif;
font-weight: 400;
font-size: 1.65rem;
color: var(--wowi-blue);
margin: 0 0 1.25rem;
}
.login-error {
background: #fff4f4;
border-left: 4px solid #d13525;
color: #d13525;
padding: .75rem 1rem;
margin-bottom: 1.25rem;
border-radius: 6px;
line-height: 1.35;
font-size: .98rem;
}
.login-field {
margin-bottom: 1.2rem;
}
.login-field label {
display: block;
font-size: 1rem;
margin-bottom: .35rem;
color: #2f3f4a;
}
.login-field input {
width: 100%;
height: 38px;
border: 1px solid #9fb1bd;
border-radius: 5px;
padding: .45rem .6rem;
font-size: 1rem;
}
.login-note {
font-size: .95rem;
color: #6c7a86;
margin: -.55rem 0 1.35rem;
}
.forgot-help {
margin: 1.55rem 0 0;
font-size: .98rem;
line-height: 1.4;
}
.forgot-help a {
color: var(--wowi-blue);
text-decoration: underline;
}

/* FORM, Pages: contact/questions, contact/new_account
--------------------------------------------------------------------------------------------------------*/
.form-contact {
margin:2em auto;
width:90%;
max-width:640px;
padding:1em 2em;
border:1px solid var(--wowi-green);
border-radius:10px; 
background: #fff;
}
.form-contact label {
margin-bottom: 6px;
padding-top: 1em;
}
/* Remove padding from radio labels */
.form-contact input[type="radio"] + label {
padding-top: 0;
margin-bottom: 0;
}
.form-contact .formCounter {width:100%;}
/* error messages */ 
.form-contact p {
width:100%;
text-align:center;
font-size:1.25em;
padding:0;
}
.form-contact input[type="radio"] {
accent-color: var(--wowi-blue);
}
/* Radio buttons */
form input[type="radio"] {
accent-color: var(--wowi-blue);
margin-right: 6px;
vertical-align: middle;
}
/* Radio labels */
form .radio-option {
display: block;
padding-top: 0; 
margin-bottom: 6px;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 1.15rem;
font-weight: 400;/* lighter than main labels */
}
/* Submit button */
.form-contact input[type=submit] {max-width: 220px;}

.confirmation-message {
margin: 3em auto;
display:block;
max-width: 600px;
padding: 2.5em 2em;
background: #fff;
border: 1px solid #d7dfe3;
border-radius: 8px;
}
.confirmation-message h2 {
text-align: center;
font-size: 2rem;
margin: 0 0 .5em 0;
color: var(--wowi-blue);
}
.confirmation-message p {
font-size: 1.15rem;
line-height: 1.4;
margin: 0;
}

/* FORMS, Pages: mgt/customers
------------------------------------------------------------------------------*/
.mgt-page {
max-width: 1180px;
margin: 2em auto 2em auto;
padding: 0 24px;
}
.mgt-page section {
background: #fff;
border: 1px solid #d8dee6;
border-radius: 14px;
padding: 2em 2em 2em 2em;
margin-bottom: 2em;
}
.mgt-page section ul {
list-style: square;
}
.mgt-page section ul li {
padding:.25em 0;
font-size: 1rem;
}
.mgt-c3 {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 2%;
}
.mgt-col {
padding-top: 1em;
padding-bottom:1em;
}
form.mgt {
margin:0 auto;
background:#fff;
padding:1em;
}
form.mgt fieldset {
margin-top:1em;
padding:.5em 1em 2em 1em;
border:1px solid #a6a6a6;
}
form.mgt legend {
font-size:1.5em;
text-align:left;
padding:0;
}
.labelInput{
display:inline-block;
vertical-align:top;
}
form.mgt label {
padding-top:1em;
}

/* ORDER FORM, PAGES: tools/order_scorings, purchase_authority/pa_order_scorings.php
--------------------------------------------------------------------------------------------------------*/
form.order {
margin: 2em auto 3em auto;
max-width: 620px;
width: 100%;
padding: 2em;
border: 1px solid var(--wowi-green);
border-radius: 10px;
}
/* If using horizontal rows */
form.order p {
display: flex;
align-items: center;
gap: 20px;
margin: 0 0 16px;
}
form.order label {
flex: 0 0 150px;
margin-bottom: 0;
}
form.order input[type="text"],
form.order input[type="password"],
form.order select,
form.order textarea {
flex: 1;
}

#divAuthorizeNetPopup {
box-sizing: border-box;
width: calc(100vw - 32px);
max-width: 760px;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 10%;
transform: translateY(80px);
z-index: 2;
overflow: hidden;
}

/* ----------------------------------------------------------------------------
BUTTONS 
------------------------------------------------------------------------------*/
/* FORM SUBMIT BUTTONS
Pages: 
1. sign in on index page 
2. career/login (form-login )
3. contact/questions (form-contact)
4. contact/new_account (form-contact)
5. career/forgot-password (password-reset-form)
6. tools/add_edit_user (form-add-credentials)
7. tools/add_batch (form-add-credentials)
8. tools/order_scorings
9. tools/exportUserData
10. tools/quickentry.php
11. purchase_authority/pa_order_scorings
12. purchase_authority/pa-demo/demo-pa-order-scorings
13. mgt/many pages (mgt)
--------------------------------------------------------------------------------------------------------*/
/* FORM BUTTONS - Ex. <button type="submit" class="form-btn btn-green">Save</button>
--------------------------------------------------------------------------------------------------------*/
.form-btn {
display: block;
width: 320px;
max-width: 100%;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.02em;
height: 50px;
margin: 2em auto 1em auto;
text-align: center;
text-decoration: none;
border: none;
border-radius: 6px;
cursor: pointer;
-webkit-appearance: none;
opacity: 1;
}

/* overrides form-btn width */
.registration .form-btn {
margin: .5em 0 0 0;
width:200px;
}

/* FORM BUTTON - Green */
.btn-green {
background: var(--wowi-green);
color: #fff;
}
.btn-green:hover,
.btn-green:focus {
background: #a3cc90;
}
.btn-green:focus {
outline: 2px solid #a3cc90;
outline-offset: 2px;
}
/* overrides form-btn to line up on order pages */
form.order .button-row {
display: flex;
align-items: center;
gap: 20px; /* same as form.order p */
margin: 1em 0 0 0;
}
form.order .button-row::before {
content: "";
flex: 0 0 150px; /* same as form.order label */
}
form.order .button-row .form-btn {
flex: 1;
width: auto;
max-width: none;
margin: 0;
}

/* LINK BUTTONS - <a href=" " class="ghost btn-blue">Text</a>
--------------------------------------------------------------------------------------------------------*/
a.ghost, a.ghost-rel, a.opaque, a.opaque-w1, a.opaque-w2 {
border-radius: 5px;
display:block;
padding:.35em 0;
}
a.opaque, a.opaque-w2{
margin-left: auto;
margin-right: auto;
}
a.ghost-rel, a.opaque, a.opaque-w1, a.opaque-w2{
letter-spacing: .1rem;
}
a.ghost, a.ghost-rel, a.opaque-w1, a.opaque {width:220px;}
a.opaque-w2 {width:320px;}

a.ghost, a.opaque, a.opaque-w1, a.opaque-w2,a.ghost-rel {
text-decoration:none;
text-align:center;
font-family: 'Roboto'; 
font-weight: 400; 
}
.ghost, ghost-rel {background-color:transparent; padding:0;}
a.opaque, .opaque-w1, .opaque-w2 {transition-duration:0.4s;}

a.opaque, a.opaque-w1, a.opaque-w2, a.btn-white {color:#fff;}

/* centers button in col */
a.ghost {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
/* Blue buttons (ghost), Pages:research, workshops, support.php, trainer_materials, trainer_materials-l2 */
.btn-blue {
border:2px solid var(--wowi-blue);
margin-left:auto; margin-right: auto;
}
/* Ghost cancel button, ex. <a href="purch_auth_list.php" class="btn-cancel">Cancel</a> */
.btn-cancel {
border:2px solid #8FA8B5;
color: var(--wowi-blue);
border-radius: 5px;
display:block;
padding:.35em 0;
margin-left:auto; 
margin-right: auto;
width:320px;
text-align: center;
}
/* White buttons (ghost), Pages: index, research, trainer_materials */
.btn-white {
border:2px solid #fff;
margin-left:auto; margin-right: auto;
background: linear-gradient(to left, transparent 50%, #fff 50%);
background-size: 200% 100%;
background-position: right bottom;
cursor: pointer;
transition: all ease .3s;
 &:hover {
 background-position: left bottom;
 color: var(--wowi-blue);
 }
}

/* Green buttons (opaque), Pages: histoy.php, assess */
.btn-bg-green {
border:2px solid var(--wowi-green);
margin:1em auto 0 auto;
background-color:var(--wowi-green);
}
a.btn-bg-green:hover {background:#8dc076;}

/* Blue buttons- (opaque - 2 widths), 
Pages: workshops, level1, level2, level3, level4, leaders, sponsors, tools/user_maintenance_overview */
.btn-bg-blue {
border:2px solid var(--wowi-blue);
margin:1em 0 1em 0;
background:var(--wowi-blue);
}
a.btn-bg-blue:hover {
background:#42687d;
}
.btn {
margin-top:1em; margin-bottom:1.5em;
transition-duration:0.4s;
}
.btn a {
display:block;
text-decoration:none;
padding:.5em 0;
text-align:center;
font-size:1.35em;
margin-left:auto;
margin-right:auto;
width:320px;
font-family: 'Roboto'; 
font-weight: 400; 
}
/* Page: new_account */
.btnGreen a {
color:#fff;
background:var(--wowi-green);
border-radius: 2px; 
border:none;
}
.btnGreen a:hover {
background:#8dc076;
}
/* LEARN MORE BUTTONS Pages:index.php */
.btnBlue a {
color:#fff;
background:var(--wowi-blue);
border:3px solid var(--wowi-blue);
border-radius: 5px;
}
.btnBlue a:hover {
background:#fff;
color:var(--wowi-blue);
}
.video-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 1.7rem;
border-radius: 999px;
text-decoration: none;
background: var(--wowi-green);
color: var(--wowi-blue);
font-weight: 800;
font-size: 1rem;
line-height: 1;
box-shadow: 0 6px 18px rgba(46,72,87,.08);
transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease;
}

/* Results footer
------------------------------------------------------------------------------*/
.results-footer {
background: #999;
margin: 0 auto;
width:100%;
padding-top: 3em;
}
.results-footer p {
text-align: center;
width:80%;
margin:0 auto;
}
.results-footer q {
font-family: 'Open Sans'; 
font-weight: 400; 
font-style: italic;
color:#fff;
font-size: 1.25em;
}
.results-footer q:before {
line-height: 1px; 
position: relative; 
bottom: -5px; 
font-size:3em; 
}
.testimonial-quote q:after {quotes: none;}
.results-name {
font-family: 'Open Sans'; 
font-weight: 400;
color:#fff;
font-size: 1em;
padding-top: .5em;
}

/* CTA
------------------------------------------------------------------------------*/
.cta {
background: #f8fbfc;
border-top: 1px solid rgba(46,72,87,.08);
padding: 4rem 5vw 3rem;
text-align: center;
}
.cta-text {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.cta-text h2 {
color: var(--blue);
font-size: clamp(1.9rem, 3vw, 2.5rem);
line-height: 1.15;
margin: 0 0 1rem;
}
.cta-text p {
color: var(--muted);
font-size: 1.08rem;
margin: 0 0 1.6rem;
max-width: 640px;
margin: 0 auto 2rem;
}
.cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 1.6rem;
box-shadow: 0 6px 18px rgba(46,72,87,.08);
border-radius: 999px;
text-decoration: none;
background: var(--wowi-green);
color: var(--wowi-blue);
font-weight: 800;
transition: transform .2s ease, box-shadow .2s ease;
}
.cta-btn:hover {
transform: translateY(-2px);
}

/* SITEMAP
------------------------------------------------------------------------------*/
/* Sitemap */
.sitemap {
display:grid;
grid-column:1/-1;
background: #D3D9DE;
width:100%;
padding-top: 1em;
padding-bottom: 1em;
}
.sitemap-cols {
margin:0;
width:100%;
justify-self: center;
}
.sitemap-col {
padding-top: 0;
padding-bottom:0;
justify-self: center;
}
.sitemap-col p {
font-size:1rem;
font-family: 'Open Sans'; 
font-weight: 600; 
margin-top: 0;
margin-bottom: .5em;
}
.sitemap-col a {
display:block;
font-size:.9rem;
text-align:left;
font-family: 'Open Sans'; 
font-weight: 400;
text-decoration: none;
color: #2f4a5a;
}
.sitemap-col a:hover {
color: #1F3440;
text-decoration: underline;
}
/* FOOTER, Pages:ALL 
------------------------------------------------------------------------------*/
.copytrade, .rights {
font-family: 'Open Sans'; 
font-weight: 400;
text-align:center;
font-size:1rem;
color:#263943;
vertical-align:middle;
}
p.copytrade {margin-bottom: 0; margin-top: 0;}
p.rights {
padding-top: 0;
margin-top: 0;
padding-bottom: 1em;
}
.copytrade2 {display:none;}
.rights a:hover {color:#575755;}

.menu-trigger {display:none;}

#menu-mobile {display:none;}

/* =============================================================================
Nav (logo, NavItems, Sign in) 
================================================================================ */
@media screen {
/* Grid Areas */
#logo {grid-area:logo;}
.navItems {grid-area:menu;}
#logo {
align-self:center;
justify-self:start;
}
nav {
background-color:var(--wowi-blue);
align-items: center;
}
.main-nav-holder {transition: 0.2s;}
.main-nav {
display: flex;
justify-content: center;
}
.main-nav > li {
margin: 0 0.2rem 0 0;
position: relative;
}
.main-nav > li > a,
.main-nav > li > a:link,
.main-nav > li > a:visited,
.main-nav > li.has-submenu > label {
font-family: 'Roboto'; 
font-weight: 400; 
font-size:1.25rem;
}
.main-nav > li > a,
.main-nav > li > a:link,
.main-nav > li > a:visited {
display: block;
}
.main-nav > li.has-submenu > label {
cursor: pointer;
display: block;
position: relative;
}
.main-nav > li.close-nav {display: none;}
.menu-caret {
border-bottom: 0.45rem solid transparent;
border-top: 0.45rem solid transparent;
display: inline-block;
line-height: 0;
position: absolute;
transform-origin: 0.3rem 50%;
transition: 0.2s;
}
.submenu {
display: grid;
padding: .5rem 0;
opacity: 0;
position: absolute;
transition: 0.2s;
visibility: hidden;
transform: translateY(-5rem);
background-color: #fff;
}
.submenu {grid-template-columns: repeat(2, 220px);}

.submenu > li {position: relative;}
.submenu > li > a,
.submenu > li > a:link,
.submenu > li > a:visited {
color: #263943;
display: block;
padding: 0.5rem 1.2rem;
}
.submenu > li > a:hover {color: #336699;}
.submenu > li:last-of-type::after {display: none;}
.check-toggle {display: none;}

.hamburger-menu,
.menu-overlay {
display: none;
}
/* SIGN IN BOX, Note:controlled by 'form' below */
.modalDialog {
border:none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(0,0,0,0.8);
z-index:99999;
opacity:0;
-webkit-transition:opacity 400ms ease-in;
-moz-transition:opacity 400ms ease-in;
transition:opacity 400ms ease-in;
pointer-events:none;
}
.modalDialog:target {
opacity:1;
pointer-events:auto;
}
.modalDialog > div {
width:320px;
position:relative;
margin:10% auto;
padding-bottom:2em;
background:#fff;
}
.modalHeader{
background:var(--wowi-blue);
width:100%;
margin:0;
text-align:center;
}
/* 'Your sign in' */
.modalDialog h2 {
color:#fff;
padding:.75em;
}
.modalDialog label {
font-size:1.25em;
display:block;
margin-left:52px;
margin-bottom:2px;
padding-top:.75em;
padding-left:8px;
}
.modalDialog input[type=text],
.modalDialog input[type=password] {
width:200px;
margin:0 auto 1em auto;
display:block;
} 
.modalDialog button[type=submit] {
width:200px;
max-width:200px;
margin:1.75em auto 0 auto;
}
.modalDialog p {
text-align:center;
padding-bottom:2em;
line-height:1.5;
}
.close {
background:#fff;
color:#000;
line-height:25px;
position:absolute;
right:-12px;
text-align:center;
top:-10px;
width:24px;
text-decoration:none;
}
.close:hover {background:#eaebec;}
p.copytrade {padding-bottom: .25rem;}
}
/* =============================================================================
NAV (Mobile, Small Tablets, and Large Tablet - hamburger menu)
================================================================================ */
@media screen and (max-width:1365px) {
/* NAV */ 
nav {
grid-template-areas:"logo menu";
grid-template-columns:120px 1fr;
height:80px;
align-items: center;
}
#logo img {height:40px; }
/* for phone, the sign-in is in menu */
/* area 'menu' is hamburger on right */
.navItems {justify-self:end;}
.hamburger-menu,
.menu-overlay {
display: block;
}
.menu-overlay {
bottom: 0;
left: 0;
opacity: 0;
position: fixed;
right: 0;
transition: 0.2s;
transform: translateX(30%);
visibility: hidden;
top: 0;
z-index: 2;
}
.hamburger-menu {
background: repeating-linear-gradient(0deg, transparent 0, transparent 0.45em, #fff 0.3em, #fff 0.65em);
cursor: pointer;
display: inline-block;
height: 2.15rem;
width: 2.1rem;
}
.main-nav-holder {
background-color: #fff;
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
transform: translateX(-100%);
width: 100%;
z-index: 3;
}
.main-nav {
bottom: 0;
display: block;
left: 0;
position: absolute;
right: 5rem;
top: 0;
}
.main-nav > li {
border: none;
border-bottom: 0.1rem solid #f2f2f2;
margin: 0;
padding-top: .5rem;
padding-bottom: .5rem;
}
.main-nav > li > a,
.main-nav > li > a:link,
.main-nav > li > a:visited {
color:#263943;
}
.main-nav > li.close-nav {
display: block;
text-align: right;
}
.main-nav > li.close-nav > label {
cursor: pointer;
display: block;
height: 4rem;
position: relative;
}
.main-nav > li.close-nav > label::before, .main-nav > li.close-nav > label::after {
background: #263943;
content: "";
height: 1.8rem;
left: 50%;
position: absolute;
top: 1rem;
transform: translateX(-50%);
width: 0.2rem;
}
.main-nav > li.close-nav > label::before {
transform: rotate(-45deg);
}
.main-nav > li.close-nav > label::after {
transform: rotate(45deg);
}
.main-nav > li.close-nav > label:hover::before, .main-nav > li.close-nav > label:hover::after {
background: #263943;
}
.main-nav > li.has-submenu > label {color: #263943;}
.submenu li::after {display: none;}

.check-toggle:checked ~ .main-nav-holder {
opacity: 1;
transform: translateX(0);
visibility: visible;
}
.check-toggle:checked ~ .menu-overlay {
background: rgba(0, 0, 0, 0.3);
opacity: 1;
transform: translateX(0);
visibility: visible;
}
.check-toggle:checked ~ .submenu {
height: auto;
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: all;
}
.check-toggle:checked ~ i.menu-caret { transform: rotate(90deg); }	
.menu-caret {
border-left: 0.45rem solid #263943;
margin: 0;
right: 1.2rem;
top: .3rem;
}
 .submenu {
display: block;
height: 0;
padding: 0 0 0 1rem;
position: static;
}
.sign-in {display:none;}
/* End NAV */
}
/* =============================================================================
MOBILE and SMALL TABLET
================================================================================ */
@media screen and (max-width:767px) {
p {font-size:1.2rem;}
li {font-size:1.2rem;} 

/* Padding */ 
nav, footer, .headerText, .grid, .c1, .col1, .c2of2, .c1of2Style2, .c2of2Style2, .table-container, .keys, .admin-dashboard, .admin-dash-image, .dash-welcome, .nav-page-text, .compact-hero, .sitemap {padding-left:7%; padding-right:7%;}
/* grid-template-columns */
.c1of2, .c2of2, .c1of2Style2, .c2of2Style2, .c2g, .c3g, .c4, .video-cols {grid-column:1/-1;}
	
footer,
.login-help-actions,
.grid,
.grid-npad,
.c1,
.col1,
.c2,
.c2-col,
.c1of2,
.c2of2,
.c2Style2,
.c1of2Style2,
.c2of2Style2,
.c2-video,
.c2g,
.c3g,
.c4,
.objectives,
.scales
.scales-interp
.quotes,
.resources,
.setting,
.support,
.guide,
.agenda,
.links,
.bio,
.calendar,
.table-container,
.keys,
.info-grid,
.sample-q-block,
.access-intro-grid,
.access-reader-grid,
.access-feature-grid,
.history-grid,
.multid-grid,
.research-intro-grid,
.intro-grid {grid-template-columns: 1fr;} 
	
/* Gaps */ 
.c2g, .c3g, .c4, .scales, .scales-interp, .quotes, .resources, .video-cols {row-gap: 20px;}
.instruct {
grid-template-columns: repeat(2, 1fr); gap: 10px;
grid-template-areas: "video" "questions" "assess";
}
.hideMobile {display:none;}

/* INDEX IMAGES */	
.indexPic1 {
background:url(../Images/index/indexPic1Mobile.png) no-repeat center bottom; 
height:300px;
}
.admin-db-image {
height:300px;
}
.c2image {
margin:1em auto 0 auto;
height:300px;
background-size:contain;
}
/* Images on pages linked on NAV */
.nav-admin, .nav-history, .nav-research, .nav-balance, .nav-interp, .nav-support, .nav-support-credentials, .nav-support-reports, .nav-order, .nav-reviews, .nav-compare, .nav-ordering, .nav-contact, .nav-customers, .nav-measures, .nav-interests, .nav-aptitudes, .nav-work-styles, .nav-custom-error, .nav-accessibility, .nav-assess-time, .pa-dashboard-image, .admin-db-image, .results-dashboard-image, .nav-administration {background-size:contain; height: clamp(220px, 48vw, 300px);}
	
/* INDEX PAGE - Mobile, Page: index
------------------------------------------------------------------------------*/	
.indexText {padding:.5em 30px 0 0;}
.indexText {text-align:left; padding-left:40px;}

.checked-list{
margin:0 auto 2em auto;
max-width: 880px;
}
.checked-list p:before {background-size: 25px;}

/* PAGES NOT linked to NAV - Mobile, Pages: training/level1, etc.
------------------------------------------------------------------------------*/
header {padding-bottom:0;}
.nav-page-text h1, .compact-hero h1 {
	margin-bottom: 0.5em;
	margin-top: 0.5em;}

/* ICONS - Mobile, Pages: career/aptitudes, career/work_styles
------------------------------------------------------------------------------*/
.verbal, .numerical, .abstractions, .spatial, .mech-elec, .org-skill, .versatile, .repetitive, .specific, .dominant, .gregarious, .isolative, .influencing, .controlled, .valuative, .objective, .subjective, .rigorous {background-size:auto 70px; height:80px; margin:0;}

/* STYLES - Mobile
------------------------------------------------------------------------------*/
.c1 h2 {margin-bottom:0;} 
.c1-txt {padding-bottom: 1em;}
.c1Text {margin:1em; padding:1em;} 
.col1-txt {text-align: center;}

/* padding on text - no padding on c2 for images */
.c1of2 h1, .c1of2 h2, .c1of2 h3, .c1of2 p, .c1of2 ul {padding-left:20px;}
.c1of2-text{width:100%;}
.c2of2-text {width:100%;}

.c2Txt p {padding:0;}
.c2Text {width:100%; padding:.5em 1em; margin-bottom:1em;}
.c2-text h3, .c2-text p {width:90%;}
.c2-form select {width:92%;}

.setting-header, .agenda-header, .links-header, .links-footer {width:100%;}
.setting-header p, .support-header p, .agenda-header p, .links-header p, .links-footer p, .calendar-header p, .guide-header p {width:100%;}
.video-gallery {row-gap: 1rem;}
.video-text {padding:0 20px 1em 20px;}
	
.testimonial-quote{padding-top: 1.5em;}

.col img {padding-bottom: 0; height:50px;}
.col p {margin-top: .25em; padding-bottom: 2em;}

.customer-location img {max-height:80px; max-width:80px;}

.review-quote {width:100%;} 
	
/* ADMINISTRATION PAGES - Mobile, Page: career/assess
------------------------------------------------------------------------------*/
.assess-time {grid-template-columns: repeat(1, 1fr);}
.assess-time p.minutes {font-size: 2rem;}
.assess-time p.time-text {font-size: 1.25rem;}
.assess-instructions ul {
list-style-position: inside;
padding-left: 20px;
}
.card__face--front p.example-fractions {
font-size: 1.75rem;
}
.card__face--front img {
width:100%;
}
/* COMMUNITY - Mobile, Pages: about/customers
------------------------------------------------------------------------------*/
.customer-location {width: 50px;} 
.customer-location img {
margin-top: 1em;
max-height:40px;
max-width:40px;
}	
	
/* WORKSHOP PAGES - Mobile, Pages: training/workshops, etc.
------------------------------------------------------------------------------*/
.calendar {
width:100%;
padding-top: 1em;
padding-bottom: 0;
}
.calendar ul {padding-bottom:2em;}
.time-zones {grid-template-columns: repeat(2, 1fr);}
.interp-tip	 {padding-bottom:2em;}	
.interp-tip	h3 {padding-top:0; margin-top: 0;}
.interp-ranges {grid-template-columns: 1fr;}
/* Workshop Objectives */
.objectives {padding: 1em 0 2em 0;}
.wksp-objective	{padding-bottom: 1em;}
.wksp-objective p {width:80%;}
/* Workshop Leaders, Page:training/leaders.php */
.leaders-image img {
height:400px;
margin: 1em;
}
/* Workshop Sponsors, Page:sponsors.php */
.sponsors-list {column-count:1;} 
.wEval, .wNum, .wEval{text-align:left;} 
/* Workshop, Page:trainer_materials.php*/
.trainer-materials {
margin-left:20px;
padding-bottom:5px; 
border-top:1px solid #ccd6dc;
border-bottom:1px solid #ccd6dc;
}
.date-icon {
width:10%;
padding-top:5px;
display:inline-block;
vertical-align:top;
text-align:left;
} 
.date-icon img {
display:block;
width:100%;
max-height:80px;
max-width:80px;
}

/* ADMIN DASHBOARD - Mobile, Page: tools/menu (signed in)
------------------------------------------------------------------------------*/
.admin-dashboard {
grid-template-columns: 1fr;
gap: 0;
padding: 0;
}
.dash-welcome {
background: #355160;
padding-top: 1.5em;
padding-bottom: 1.5em;
}
.dash-grid {
gap: 14px;
}
.dash-card {
padding: 16px;
min-height: 132px;
}
.dash-card p {
font-size: 0.92rem;
line-height: 1.3;
}
.dash-card-icon {
width: 34px;
height: 34px;
margin-bottom: 14px;
}
.dash-card-icon img {
width: 22px;
height: 22px;
}
.interpretation-feature {
grid-template-columns: 1fr;
gap: 18px;
padding: 20px;
}
.feature-main {
grid-template-columns: 54px minmax(0, 1fr);
width: 100%;
}
.feature-badge {
width: 100%;
max-width: none;
margin: 0;
}
.measure-row,
.resource-row,
.info-panel-grid,
.keys-grid {
grid-template-columns: 1fr;
}
.jsi-grid {
grid-template-columns: 1fr;
}
	
/* REPORT SEARCH - Mobile, Page: tools/status_results (signed in)
------------------------------------------------------------------------------*/
/* Stack the search boxes */
.report-search, .credentials-create, .credentials-add, .balance {
grid-template-columns: 1fr;
gap: 12px;
padding: 12px;
}
/* Tighten each card */
.search {
padding: 14px;
}
/* Make inputs full width */
.search input[type="text"] {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Stack label + input */
.search label {
display: block;
margin-bottom: 4px;
}
/* Checkbox spacing */
.ckBox {
margin: 8px 0;
}

/* ORDER - Mobile, Page: tools/menu (signed in)
------------------------------------------------------------------------------*/
#divAuthorizeNetPopup iframe {
min-height:1160px;
}
/* FORM - Mobile
--------------------------------------------------------------------------------------------------*/
form.registration input[type=submit] {
margin:0 auto;
}
.label-input {display:block; margin-bottom:1em; width:95%;}
.report-name {display:block; width:100%;}
/* BUTTONS - Mobile
--------------------------------------------------------------------------------------------------*/
a.ghost, a.ghost-rel, a.opaque, a.opaque-w1, a.opaque-w2{font-size:1.15em;}
/* puts button at bottom of col */
a.ghost {bottom: 1.5em;}
.btn-schedule {width:330px;border-radius:5px;justify-self:center;}
.btn-schedule a {font-size:1.25em;}
.btn-workshop {width:336px;}
.btn-workshop a {font-size:1.25em;}

a.btn-white {font-size:1.15rem;}
	
/* TABLES - not like tables anymore - MOBILE
--------------------------------------------------------------------------------------------------*/
table.mobile-stack,
table.mobile-stack thead,
table.mobile-stack tbody,
table.mobile-stack th,
table.mobile-stack td,
table.mobile-stack tr,
table.mobile-stack tfoot,
table.mobile-stack caption {
display: block;
}
table.mobile-stack thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
table.mobile-stack thead {
color: #272727;
}
table.mobile-stack tbody {
margin: 0 0 1rem 0;
padding: .35rem 0;
background: #f7f8fa;
border: 1px solid #d7dde2;
border-radius: 6px;
}
/* Behave like a "row" */
table.mobile-stack tbody td {
border: none;
position: relative;
padding: .55rem .75rem .55rem 120px;
white-space: normal;
text-align: left;
height: auto;
}
/* Now like a table header */
table.mobile-stack tbody td:before {
position: absolute;
top: 6px;
left: 10px;
width: 100px;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-family: 'Open Sans';
font-weight: 700;
}
table.mobile-stack tbody:nth-child(odd),
table.mobile-stack tbody:nth-child(even) {
background: #f7f8fa;
}
/* Label the data */
table.mobile-stack tbody td:before {content: attr(data-title);}
table.mobile-stack tbody th:before {content: attr(data-title);}
table.mobile-stack {
margin: 0 0 1em 0;
}
table.mobile-stack caption {
padding: 1em 20px .5em 20px;
font-size: 1.25em;
text-align: center;
}
table.mobile-stack td {
font-size: 1em;
}
table.mobile-stack tbody td:first-child {
padding-top: .8rem;
}
table.mobile-stack tbody td:last-child {
padding-bottom: .8rem;
}
/* MOBILE TABLES - no scroll on mobile, users naturally swipe the table itself */
.table-scroll-top {display: none;}
	
/* RESEARCH TABLE (Page:about/tables/table1-11, about/tables/validitytable1-3, about/tables/workforce_table.php)
--------------------------------------------------------------------------------------------------*/
table.norms tbody td {padding-left:250px;}
	
/* COMPARISON TABLE - MOBILE (Page: about/comparison-chart)
--------------------------------------------------------------------------------------------------*/
table.compare tbody td {padding-left:180px; font-family: 'Open Sans'; font-weight: 600; }
table.compare th {font-size:1.15em;}
table.compare td img {
text-align:center;
vertical-align:middle;
margin:auto;
width:25px;
}
table.compare td:nth-child(n+2) {text-align:center;}
table.compare tr td:nth-child(1) {text-align:center;}

/* NORMS TABLE - MOBILE (Page: about/norms.php)
--------------------------------------------------------------------------------------------------*/
table.norms tbody th {background:#336699; color:#fff; font-size: 1.15em;}
table.calendar-previous {margin-left: auto; margin-right: auto;}
	
/* RESULTS - MOBILE, Page: wowi/results.php, spanish (signed in)
------------------------------------------------------------------------------*/
.results-db-text h2 {font-size:1.5em;}

/* SITEMAP - MOBILE (At bottom of pages above footer)
--------------------------------------------------------------------------------------------------*/
.sitemap-youtube-logo img {
margin-left:auto; margin-right:auto;
}
.results-name {display:none;}
.sitemap {display:none;}
.hideMobile {display:none;}

}
/* =============================================================================
TABLET - Large
========================================================================== */
@media print, screen and (min-width:768px) {

p {font-size: 1.3rem; line-height: 1.6;}
li {font-size: 1.3rem; line-height: 1.6;}

.c1 {grid-template-columns:1fr;}

/* Padding */ 
nav, .headerText, .grid, .c1, .col1, .c2Style2, .table-container, .keys, .dash-welcome, .compact-hero, .sitemap {padding-left:5%; padding-right:5%;}

/* grid-template-columns, 1 column */ 
.access-intro-grid {grid-template-columns: 1fr;}

/* grid-template-columns, 2 columns */ 
.c2, .c2-video, .calendar, .setting, .support, .guide, .agenda, .links, .bio {grid-template-columns: repeat(2, 1fr);}
.history-grid {grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);}
.embedded-video-grid {grid-template-columns: minmax(320px, 520px) minmax(0, 1fr);}

/* grid-template-columns */ 
.intro-grid {grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);}
.sample-q-block {grid-template-columns:minmax(0, .95fr) minmax(340px, 1.05fr);}
.c2Style2 {grid-template-columns: repeat(auto-fit, minmax(689px, 1fr)); column-gap: 2%;}
.c2g {grid-template-columns: repeat(2, 1fr); gap: 2%;}
.c3g {grid-template-columns: repeat(2, 1fr); gap: 2%;}
.c4 {grid-template-columns: repeat(2, 1fr); gap: 2%;}
.video-gallery {grid-template-columns:repeat(2, 1fr);column-gap: 2rem;}
.objectives {grid-template-columns: repeat(2, 1fr); column-gap:2%;}
.quotes {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2%;}
.resources {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2%;}
.scales, .scales-interp {grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 30px;}
.keys {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1%;}
.sitemap-cols {grid-template-columns: repeat(5, 1fr); column-gap: 2%;}
.instruct {
grid-template-columns: repeat(3, 1fr); gap: 12px;
grid-template-areas: "video questions assess";
}
.hideMobile {display:none;}
.indexPic1 {
background:url(../Images/index/indexPic1Tablet.png) no-repeat center bottom; 
height:100%;
min-height:330px;
background-size:contain;
} 
/* Images on pages linked on NAV */ 
.nav-admin, .nav-history, .nav-research, .nav-interp, .nav-support, .nav-support-credentials, .nav-support-reports, .nav-order, .nav-reviews, .nav-compare, .nav-customers, .nav-ordering, .nav-contact, .nav-measures, .nav-interests, .nav-aptitudes, .nav-work-styles, .nav-custom-error, .nav-accessibility, .nav-assess-time, .pa-dashboard-image, .admin-db-image, .results-dashboard-image, .nav-administration {background-size:contain; height: clamp(300px, 42vw, 380px);}

.indexText, .nav-page-text {text-align:left; padding-left:40px;}
.c1of2 {align-items: center;}
.c2of2 {align-items: center;}

/* YouTube video */ 
.video-text {padding-top:0; width:90%; margin:0 auto;}
.video-text h2 {margin:0; padding-top: .5em; padding-bottom: .25em;}
.video-text h3 {margin:0; padding-top:0;} 

.customers-image {min-height:240px;}
.admin-dashboard-image {
height:100%;
min-height:330px;
background-size:contain; 
}
.checked-list{
padding-top:1em;
margin:0 auto 2em auto;
}
.checked-list p:before {background-size: 23px;}
.c1 .checked-list p {line-height: 1.35;}
header {padding-bottom:0;}
.testimonial-quote{padding-top: 1em;}
.history-panel {margin-top:2em;}
	
/* STYLES - Tablet
------------------------------------------------------------------------------*/
.c1 {margin-top:0; padding-top:0;}
.c1-txt {
width:100%; 
margin:0 0 2em 0;
display:block;
overflow: hidden;
}
.c1 .c1-txt h2 {
width:60%;
text-align: left;
margin:0;
padding: 1em 0 0 0;
}
.c1 h2 {
width:100%;
margin:0;
padding: 1rem 0 1rem 0;
}
.c1 span {
font-size:.8em;
}
.c1Text {
margin:2em auto;
width:80%;
padding:1em 6em;
}
/* Pages: access.php, training/level1.php, tools/quickentry.php*/
.c1of2-text {width:90%; max-width: 600px;}
.list-h {font-size: 1.5rem; display: block; margin-bottom: .25em;}
/* Workshops, Page:training/level1.php, level2.php */

.col img {
padding-bottom: .75em;
height:60px;
object-fit: contain;
}
.col p {margin-top: .25em; padding-bottom: 3.5em;}
/* needs space for button (ex credentials instructions) */

.c2-txt {padding-top: 2em;}
.support-header, .agenda-header, .links-header, .links-footer, .calendar-header, .workshop-cklist-header, .guide-header {width:80%;}
.setting, .support, .agenda, .links, .guide, .bio {width:80%;}
.setting-header, .agenda-header, .agenda-header {width:80%;}
.setting-header p, .support-header p, .agenda-header p, .links-header p, .links-footer p, .calendar-header p, .guide-header p {width:80%;}
.support-header p, .agenda-header p, .links-header p, .calendar-header p, .guide-header p {line-height: 1.4;}

.etrackers {padding-top: 1.75em;}
.resources {grid-template-columns: repeat(2, 1fr);}
.resource p {height: 7rem;}
.c1of2 h3 {width:75%;}
.c2Text {
width:100%;
padding:1em 2em;
margin-top:3em;
margin-bottom:3em;
} 
.review-quote {width:80%;}
.results-db {min-height:630px;}

.key-number {
display:inline-block;
float:left;
width:50%;
}
.key-text {
display:inline-block;
float:left;
width:50%;
}
	
/* COMMUNITIES - Tablet, Page: about/customers
------------------------------------------------------------------------------*/
.customer-location {max-width: 60px;} 
.customer-location img {
max-height:50px;
max-width:50px;
}

/* ADMINISTRATION PAGES - Tablet, Page: career/assess
------------------------------------------------------------------------------*/
.assess-instructions ul {list-style-position: outside;}
.card__face--front p.example-fractions {
font-size: 2rem;
}
.card__face--front img {
width:60%;
}
.assess-time {grid-template-columns: repeat(3, 1fr);}
.assess-time p.minutes {font-size: 1.5rem;}
.assess-time p.time-text {font-size: 1rem;}
	
.interp {grid-template-columns: repeat(3, 1fr);}
.interp p.minutes {font-size: 1.5rem;}
.interp p.time-text {font-size: 1rem;}
	
/* WORKSHOP PAGES - Tablet, Pages: training/workshops, etc.
------------------------------------------------------------------------------*/
.workshop-contact {
background-color: #eaeef1;
margin: 2em auto;
border-radius: 5px;
padding-top: 2em;
padding-bottom: 1em;
}
.workshop-contact hr {border: 1px solid #999;}
/* Workshop Objectives */
.objectives {padding: 1em 0 2em 0;}
.wksp-objective	{padding-top:.5em; padding-bottom: .5em;}
.wksp-objective p {width:80%;}
/* Workshop Leaders, Page:training/leaders.php */
.leaders-image img {
height:300px;
border:1px solid #fff;
border-radius: 5px;
margin: 1em 0;
}
.calendar {
width:80%;
padding-top: 1em;
padding-bottom: 3em;
}
.time-zones, .interp-ranges {grid-template-columns: 1fr;}
.interp-tip	 {padding-top:2em; padding-bottom:2em;}	
.workshop-text, .c2-text {margin: 0; padding-top: 0; width:100%;} 
.workshop-text h2, .workshop-text h3, .c2-text h2, .c2-text h3 {
width:80%; 
text-align: left;
padding-top: 0;
margin-left:0;
} 
.workshop-text p, .c2-text p {
line-height:1.25;
margin-left:0;
}
/* WORKSHOP SPONSORS */
.sponsors-list {column-count:2; column-gap:10%; padding-left: 40px; padding-right: 40px; }
/* TABLE, Pages:status_results.php */
.reports-client {background:#d8dfe4;} 
.reports-counselor {background:#d0e4c6;}
.reports-columns {background:#f1f1f1;} 
/* padding on text - no padding on c2 for images */
.leaders-image img {float:right;}
.c2image {
margin:0em auto;
padding-top:1em;
height:100%;
min-height:420px;
background-size:contain;
}
.c2Style2 { 
margin-left:auto; margin-right:auto;
padding-bottom: 1em;
}
.c-gap {grid-column-gap:20px; grid-row-gap:20px;}

#video .nav-page-text h1 {font-size: 2em;}
.support-col:last-child {padding-top: 1em;}
	
/* ADMIN DASHBOARD - Tablet, Page: tools/menu (signed in)
------------------------------------------------------------------------------*/
.admin-dashboard {
grid-template-columns: 1fr;
gap: 0;
}
.dash-welcome {
padding-top: 4em;
background: #355160;
}
.dash-intro {
max-width: 620px;
}
.dash-grid {
max-width: 620px;
gap: 18px;
}
.dash-card {
min-height: 150px;
}
.dash-card {
padding: 16px;
min-height: 132px;
}
.dash-card p {
font-size: 0.92rem;
line-height: 1.3;
}
.dash-card-icon {
width: 34px;
height: 34px;
margin-bottom: 14px;
}
.dash-card-icon img {
width: 22px;
height: 22px;
}

.measure-row,
.resource-row {grid-template-columns: repeat(2, minmax(0, 1fr));}
.info-panel-grid {grid-template-columns:1fr 1fr;}
.jsi-grid {grid-template-columns: repeat(2, minmax(0, 1fr));align-items: stretch;}	
.guide-hero,
.keys-grid {
grid-template-columns:1fr 1fr;
}

/* REPORT SEARCH - Page: tools/status_results
------------------------------------------------------------------------------*/
.report-search {
grid-template-columns: repeat(3, 1fr);
}
.credentials-create {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.balance {
grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
}
.credentials-add {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch; /* important */
}

/* ORDER - Tablet, Page: tools/menu (signed in)
------------------------------------------------------------------------------*/
#divAuthorizeNetPopup iframe {
min-height:760px;
}
/* FORMS - Tablet, Page: tools/add_batch
--------------------------------------------------------------------------------------------------*/
.form-right, .form-right-tb {margin-left:3%;}
.label-input{display:inline-block; margin-bottom:0; width:46%;}
.c2-form select {width:97%;}
.report-name {display:inline-block; width:50%;}
	
/* BUTTONS - Tablet
--------------------------------------------------------------------------------------------------*/
.btn {padding-top:1em; padding-bottom:1em;} 
a.ghost, a.ghost-rel, a.opaque, a.opaque-w1, a.opaque-w2{font-size:1.15rem;}
.btn-schedule {width:340px;border-radius:5px;justify-self:center;}
.btn-schedule a {font-size:1.35em;}
.btn-workshop {width:400px;}
.btn-workshop a {font-size:1.35em;}

a.btn-white {font-size:1.15rem;}
	
/* puts button at bottom of col */
a.ghost {bottom: 2.5em;}
	
/* TABLES - Tablet
--------------------------------------------------------------------------------------------------*/
table {margin:0 0 1em 0;} 
table caption {
padding:0 0 .5em 0;
font-size:1.5em;
text-align:left;
} 
table td {font-size:1.15em;}
/* Login Credentials table */ 
table.credentials tbody tr:hover {background:#fafbfc;}
	
/* RESEARCH TABLE (Page:about/tables/table1-11, about/tables/validitytable1-3, about/tables/workforce_table.php)
--------------------------------------------------------------------------------------------------*/
table.research {
width: max-content;
min-width: 100%;
}

table.jobs-mgt {border-style: hidden;}
table.jobs-mgt td {border-bottom:1px solid #e1e7ed;}
table.jobs-mgt td:nth-child(1) {width:10%;} 
table.jobs-mgt td:nth-child(2) {width:6%;} 
table.jobs-mgt td:nth-child(3) {width:45%;} 
table.jobs-mgt td:nth-child(4) {width:10%;}
table.jobs-mgt td:nth-child(4) img {display:inline;} 
table.jobs-mgt td:nth-child(5) {width:7%;} 
table.jobs-mgt td:nth-child(6) {width:7%;} 
table.jobs-mgt td:nth-child(7) {width:5%;} 
table.jobs-mgt td:nth-child(8) {width:10%;} 
table.jobs-mgt tbody tr:hover {background:#fafbfc;}

/* WIDE TABLES - Tablet, Pages:about/tables/table#, about/norms
--------------------------------------------------------------------------------------------------*/
.table-container {
min-width: 0;
margin-top: .5em;
margin-bottom: 2em;
}
/* Top scrollbar */
.table-scroll-top {
overflow-x: auto;
overflow-y: hidden;
height: 16px;
margin-bottom: 0;
-webkit-overflow-scrolling: touch;
}
/* This creates the scrollbar width */
.table-scroll-inner {
height: 1px;
}
/* Table scrollbar */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Keep table width */
.table-scroll table {
width: max-content;
min-width: 100%;
}

table.calendar-previous td:nth-child(1) {width:10%;} 
table.calendar-previous td:nth-child(2) {width:25%;} 
table.calendar-previous td:nth-child(3) {width:45%;} 
table.calendar-previous td:nth-child(4) {width:10%;} 
table.calendar-previous td:nth-child(5) {width:10%;text-align:center;} 
/* # of evaluations */ 
table.calendar-previous .wEval {
display:block;
text-align:center;
font-size:1em;
}
/* Rating */ 
table.calendar-previous .wNum {
display:block;
text-align:center;
font-size:1.1em;
font-family: 'Open Sans'; 
font-weight: 600; 
}
table.time td {
padding-left:0;
}
/* COMPARE TABLE - TABLET (Page: about/comparisonChart.php) */
table.compare {
margin:0 auto;
border:1px solid #dcdcdc;
max-width: 1450px;
}
table.compare thead tr th {
text-align:center;
padding:.75em .5em;
border:1px solid #dcdcdc;
}
table.compare th:nth-child(n+2) {
font-size:1.25em;
}
table.compare th:nth-child(2) {
font-size:1.35em;
font-family: 'Roboto'; 
font-weight: 500; 
color:var(--wowi-blue);
border-top:7px solid var(--wowi-green);
background:#ebf5ea;
}
table.compare td {
border:1px solid #dcdcdc;
vertical-align:middle;
}
table.compare tbody tr th.subhead {
font-family: 'Roboto'; 
font-weight: 500; 
font-size:1.35em;
padding:.75em .5em;
vertical-align:middle;
text-align: left;
}
table.compare td:nth-child(1) {
padding-right:2%;
padding-left:2%;
width:25%;
}
table.compare td:nth-child(n+2) {
text-align:center;
width:14%;
font-size:1.75em;
}
table.compare td img {
text-align:center;
vertical-align:middle;
margin:auto;
width:30px;
}
table.compare tbody:nth-child(odd) tr td {background:#fafbfc;}
	
table.compare tbody:nth-child(odd) tr td:nth-child(2) {background:#DBEDD9;}
table.compare tbody:nth-child(even) tr td:nth-child(2) {background:#ebf5ea;}
table.compare tbody tr:hover td {color:#6cac4f;}
	
/* NORMS TABLE - TABLET (Page: about/norms.php)
--------------------------------------------------------------------------------------------------*/
table.norms thead tr td:nth-child(2n+3),
table.norms tbody tr td:nth-child(odd){
background:#e3e9ec;
width:7.14%;
}
table.norms thead tr td:nth-child(even),
table.norms tbody tr td:nth-child(even) {
background:#fbfbfc;
width:7.14%;
}
table.norms tbody tr:hover td {background:#eff2f4;}
table.norms thead th {
font-family: 'Roboto'; 
font-weight: 400; 
text-align: center;
}
/* RESULTS - TABLET, Page: wowi/results.php, spanish (signed in)
------------------------------------------------------------------------------*/
.results-db-text h2 {font-size:2em;}	

/* =============================================================================
DESKTOP
========================================================================== */ 
/* inherits from tablet except nav */	
@media screen and (min-width:1366px) {
/* Padding */ 
nav, .headerText, .grid, .c1, .col1, .c2Style2, .table-container, .keys, .dash-welcome, .compact-hero, .sitemap {padding-left:7%; padding-right:7%;}

	
/* grid-template-columns */ 
.c3g {grid-template-columns: repeat(3, 1fr); gap: 2%;}
.c4 {grid-template-columns: repeat(4, 1fr); gap: 1%;}
.c2-video {grid-template-columns:35% 65%;}
.quotes {grid-template-columns: repeat(4, 1fr); gap: 30px;}
.resources {grid-template-columns: repeat(4, 1fr); gap: 30px;}
.scales {grid-template-columns: repeat(3, 1fr); gap: 30px;}
.instruct {
grid-template-columns: repeat(3, 1fr); gap: 1%;
grid-template-areas: "video questions assess";
}
.scales {grid-template-columns: repeat(3, minmax(0, 1fr));}
.scales-interp {grid-template-columns: repeat(2, minmax(0, 1fr));}
.access-intro-grid {grid-template-columns: minmax(320px, 36%) minmax(0, 1fr);}
.history-grid {grid-template-columns: minmax(0, 1fr) minmax(340px, 700px);}

/* Padding - inherits from tablet */
	
/* NAV - Desktop 
--------------------------------------------------------------------------------------------------*/
.main-nav > li:nth-last-child(1),
.main-nav > li:nth-child(2) {display: none;}
nav {
grid-template-areas:"logo menu sign-in";
grid-template-columns:150px 1fr 250px;
height:90px;
position:sticky;
top:0;
z-index:20;
}
#logo img {height:50px; padding:0;}
.main-nav > li > a,
.main-nav > li > a:link,
.main-nav > li > a:visited {
color:#fff;
}	
ul.main-nav {margin-left: 0; padding-left:0;}
	
.main-nav > li.has-submenu > label {
color: #fff;
padding: 0.8rem 2rem 0.8rem 1.5rem;
}
.main-nav > li > a,
.main-nav > li > a:link,
.main-nav > li > a:visited {
padding: 0.8rem .7rem;
}
.main-nav > .has-submenu:hover ul {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: all;
}
.submenu {
border-radius: 5px;
border: 1px solid var(--wowi-blue);
}
.has-submenu:hover > i { transform: rotate(90deg) }	
.menu-caret {
border-left: 0.45rem solid #fff;
margin: 0 -0.3rem 0 .75rem;
right: 1.2rem;
top: 1.3rem;
}
.link-heading {
font-size: .98rem; 
font-family: 'Open Sans'; 
font-weight: 600;
}
.link-desc {font-size: .9rem;}	
/* SIGN IN */
.sign-in {
display:grid;
grid-area:sign-in; 
align-self:center;
}
.sign-in ul {
margin:0;
padding-left: 0;
width:100%;
text-align:right;
}
.sign-in ul li {
display:inline-block;
font-size:1em;
text-decoration:none;
list-style:none;
}
.sign-in ul li:nth-child(2) {
padding-left:8px;
} 
.sign-in ul li a {
text-decoration:none;
font-size:1.15em;
font-family: 'Roboto'; 
font-weight: 400; 
}
.sign-in .button a {
display:inline-block;
text-align:center;
border:none;
width:110px;
height:44px;
line-height:44px;
border-radius: 10px;
} 
.sign-in .btn-log-in a,
.sign-in .btn-logout a {
display:inline-block;
color:#fff;
text-align:center;
width:110px;
height:44px;
line-height:44px;
border-radius: 10px;
} 
.sign-in .btn-logout a {background:#808080;} 
.sign-in .btn-log-in a {background:var(--wowi-green);} 
.sign-in .button a {color:#fff; background:var(--wowi-green);}
/* The Spanish nav button needs a longer button, page: Spanish/results */
.sign-in .btn-logout-sp a {
display:inline-block;
color:#fff;
text-align:center;
width:170px;
height:50px;
line-height:50px;
background:#808080;
border-radius: 5px;
} 
/* End NAV */

.embedded-video-grid {max-width: 1180px;}
.assess-instructions {
padding-left:60px;
padding-right:60px;
}

.indexPic1 {
background:url(../Images/index/indexPic1.png) no-repeat center bottom; 
height:100%;
min-height:600px;
}

/* Images on all pages on nav */ 	
.nav-admin, .nav-customers, .nav-history, .nav-research, .nav-balance, .nav-interp, .nav-support, .nav-support-credentials, .nav-support-reports, .nav-order, .nav-reviews, .nav-compare, .nav-ordering, .nav-contact, .nav-measures, .nav-interests, .nav-aptitudes, .nav-work-styles, .nav-custom-error, .nav-accessibility, .nav-assess-time, .pa-dashboard-image, .admin-db-image, .results-dashboard-image, .nav-administration {background-size:contain; height:600px;}

#video .nav-page-text h1 {font-size: 2.6em;}
.checked-list p:before {background-size: 24px;}

/* STYLES - Desktop
------------------------------------------------------------------------------*/
/* extra padding */
.pad1t2b {padding-top:1em; padding-bottom:2em;}
.c1-txt {width:75%;} 
.indexText {padding-top:4em; padding-left:100px;}
.nav-page-text {padding-top:5em; padding-left:100px;}
.compact-hero {padding-top:2em;}
.video-text {width:80%;}
.checked-list{
padding-top:2em;
max-width: 880px;
}
.c2Text {
width:90%;
padding:1em 4em;
}
.second {margin-left:7%;}
.setting-header p {width:50%;}
.history-panel {
margin-top: 4em;
}

/* ADMINISTRATION PAGES - Desktop, Page: career/assess
------------------------------------------------------------------------------*/
.assess-time p.minutes {font-size: 2.25rem;}
.assess-time p.time-text {font-size: 1.35rem;}
	
.interp p.minutes {font-size: 2.25rem;}
.interp p.time-text {font-size: 1.35rem;}
	
/* WORKSHOP PAGES - Desktop, Pages: training/workshops, etc.
------------------------------------------------------------------------------*/
/* Page: training/leaders */
.leader-text{padding-top:3em; width:60%;clear:both;}
.leader-text h2 {font-size:2.5em; text-align:left;}
.leader-text p {font-size:1.5em; text-align:left; line-height: 1.75;} 
/* Workshop Objectives */
.objectives {padding: 1em 3em 3em 3em;}
.wksp-objective p {width:80%;}
.btn-schedule {width:400px;}
.workshop-text h2, .workshop-text h3, .workshop-text p, .c2-text h2, .c2-text h3, .c2-text p {width:80%;} 
.workshop-text p {line-height:1.65;} 
.leaders-image img {height:500px; margin: 4em 0;}
.time-zones, .interp-ranges {grid-template-columns: repeat(4, 1fr);}
	
/* ADMIN DASHBOARD - Desktop, Page: tools/menu (signed in)
------------------------------------------------------------------------------*/
.admin-dashboard {
grid-template-columns: minmax(320px, 50%) minmax(0, 50%);
}
.dash-welcome {
padding-top: 6em;
padding-left:0;
padding-right: 0;
background: var(--wowi-blue);
}
.dash-grid {
gap: 20px;
}
.dash-card {
min-height: 165px;
padding: 18px 18px 16px;
}
.dash-card-icon {
width: 38px;
height: 38px;
}
.dash-card-icon img {
width: 30px;
height: 30px;
}
.measure-row,
.resource-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jsi-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
	
/* BUTTONS - Desktop
--------------------------------------------------------------------------------------------------*/	
a.ghost-rel, a.opaque, a.opaque-w1, a.opaque-w2 {font-size:1.25em;}
a.ghost {font-size:1.15em;}
	
/* TABLES - Desktop
--------------------------------------------------------------------------------------------------*/
table.compare th.subhead {
font-size:1.25em;
padding:.15em .25em .15em 1em;
}
/* =============================================================================
DESKTOP - Large
================================================================================ */ 
@media screen and (min-width:1920px) {
nav {padding-left:5%; padding-right:5%;}	
nav {grid-template-columns:275px 1fr 275px;}
}
/* End Tablet (large) & Desktops (desktop & desktop-large)
--------------------------------------------------------------------------------------------------*/	
}
}
/* =============================================================================
PRINT
================================================================================ */ 
@media print {
h1 {font-size:24pt;}
h2 {font-size:18pt;}
h3 {font-size:14pt;}
h4 {font-size:12pt;}
p, li, ol {font-size:11pt;}
table th {font-size:12pt;}
table td {font-size:11pt;}

.gridContainer {
width:100%;
padding:0;
margin:auto;
background:transparent;
display:block;
position:relative;
}
#logo {grid-area:logo;}
#logo img {height:50px; padding:0;}
.navItems {grid-area:menu;}
#logo {
align-self:center;
justify-self:start;
}
nav {
background-color:var(--wowi-blue);
align-items: center;
grid-template-areas:"logo sign-in";
grid-template-columns:150px 150px;
height:90px;
top:0;
}
/* Screen reader materials do not need to be printed (protects workshop materials) */
.NoPrint {display:none;}

h2, p, li, td, .c2, .col, .video-gallery, .video-cols, .calendar, .calendar-col, .agenda, .links, .setting-col, .customer, .support, .support-col, .guide-col, .bio-col, .col-style2, .quote, table.research-other, .workshop-contact, .c2of2.bg-logo-blue, .c2-form {page-break-inside: avoid;}
h2, caption, .calendar-header p {page-break-after: avoid;}

footer a, .navItems, .sign-in, .modalDialog, #testimonial-filter, #communities-filter, #resource-filter, #guide-filter, .sitemap, .sitemap-cols, .rights, .ghost, .c1-txt a, .card__face--back {display: none!important;}
	
.col {
padding-top: 1em;
padding-bottom:.5em;
}
.col p {padding-bottom: 0;}

a.btn-white, .bg-logo-green h2, h2.font-white, .testimonial-quote, .customers-quote, .font-white a, .bg-logo-blue .font-white, .bg-logo-green .font-white, .highlight-text, .c1 p.video-communities, .assess-instructions {color: #263943;}
	
.btn-white {border: 1px solid #263943;}
.grid.bg-logo-blue-ltr, .c1of2.bgGreyDk {background-color: transparent;}

.bg-logo-green, .c1of2.bg-ctp-green {border: 1px solid var(--wowi-green); background-color: transparent;}
.columns .bg-logo-blue-ltr {border: 1px solid #e3e9ec; background-color: transparent;}

.columns .bg-grey-lt {border: 1px solid #e6e6e6; background-color: transparent;}
.c1.bg-logo-blue, .c2Style2.bg-logo-blue, .c2of2.bg-logo-blue {border: 1px solid var(--wowi-blue); background-color: transparent;}
.workshop-contact {border: 1px solid #eaeef1; background-color: transparent;}
.c1.bg-logo-blue-ltr2 {border: 1px solid #eff2f4; background-color: transparent;}
.c2of2.bg-logo-blue-lt {border: 1px solid #ccd6dc; background-color: transparent;}
.c2of2.bg-logo-blue-ltr {border: 1px solid #e3e9ec; background-color: transparent;}
.bg-logo-blue-ltr2 {border: 1px solid #eff2f4; background-color: transparent;}
.c1of2.bg-jsi-purple {border: 1px solid #5c5176; background-color: transparent;}
.c1of2.bg-cia-blue {border: 1px solid #336699; background-color: transparent;}

footer {
position: relative;
padding-top: 2em;
height: 60px;
background-color: transparent;
}
p.copytrade {padding-bottom: 0;}
}