@charset "utf-8";

.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: start;
}

/* TABLES, Pages: workshop, about/tables/table(#), status_results, mgt/activity
--------------------------------------------------------------------------------------------------*/
table {
border-collapse:collapse;
width:100%;
}
table td {
padding:.5em;
text-align:left;
font-family: 'Open Sans', Arial, sans-serif; 
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; 
}

/* LINK BUTTONS - <a href=" " class="ghost btn-blue">Text</a>
--------------------------------------------------------------------------------------------------------*/
a.opaque, a.opaque-w2 {
border-radius: 5px;
display:block;
padding:.35em 0;
margin-left: auto;
margin-right: auto;
letter-spacing: .1rem;
text-decoration:none;
text-align:center;
font-family: 'Roboto'; 
font-weight: 400; 
transition-duration:0.4s;
color:#fff;
}
a.opaque {width:220px;}
a.opaque-w2 {width:320px;}

/* GHOST Blue buttons, Pages:research, workshops, support.php, trainer_materials, trainer_materials-l2 */
.btn-blue {
border:2px solid var(--wowi-blue);
margin-left:auto; margin-right: auto;
}

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

/* Cancel buttons that are links */
.btn-cancel {
background: var(--neutral-mid);
border: 1px solid var(--neutral-mid);
}
.btn-cancel:hover,
.btn-cancel:focus {
background: #6f7f89;
}

/* FORM SUBMIT BUTTONS - Ex. <button type="submit" class="form-btn btn-green">Save</button>
--------------------------------------------------------------------------------------------------------*/
.form-btn {
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;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: none;
border-radius: 6px;
cursor: pointer;
-webkit-appearance: none;
opacity: 1;
}

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

/* overrides form-btn width and left aligns */
.booklet-btn .form-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: .7rem 1rem;
margin: .5rem 0 0;
width: auto;
min-width: 200px;
border: 0;
border-radius: 10px;
font-size: .98rem;
line-height: 1.2;
transition: background .2s ease, transform .15s ease;
}
/* 	Booklet Button - Blue */
.form-blue {
background: var(--wowi-blue);
color: #fff;
}
.booklet-btn .form-blue:hover,
.booklet-btn .form-blue:focus {
background: #42687d;
}

.booklet-btn .form-blue:hover {
transform: translateY(-1px);
}

.booklet-btn .form-blue:focus {
outline: 2px solid #42687d;
outline-offset: 2px;
}

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

/* BUTTON - Ex. button type="button"
--------------------------------------------------------------------------------------------------------*/
.btn-mgt-action,
.btn-team-member-action {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top:.5em;
padding: .7rem 1.4rem;
border: none;
border-radius: 4px;
background: var(--wowi-blue);
color: #fff;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 600;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background .2s ease, transform .2s ease;
}

.btn-mgt-action:hover,
.btn-mgt-action:focus {
background: #243b49;
transform: translateY(-1px);
}
.btn-team-member-action:hover,
.btn-team-member-action:focus {
background: #243b49;
transform: translateY(-1px);
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.82rem 1.45rem;
  border-radius: 10px;
  text-decoration:none;
  font-weight:700;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--wowi-green);
  border: 2px solid var(--wowi-green);
  color:#173447;
}
.btn-secondary {
  background: transparent;
  border: 2px solid rgba(255,255,255,.82);
  color:#fff;
}
.btn-outline {
  background:#fff;
  border:1px solid var(--wowi-blue);
  color:var(--wowi-blue);
}
.btn-soft {
  background:var(--bg-light-blue);
  border:1px solid var(--border-light);
  color:var(--wowi-blue);
}

/* PAGE HEADER
------------------------------------------------------------------------------*/
.headerText {
grid-column:1/-1;
width: 100%;
margin-top:1.5em;
margin-bottom:.75em;
}
.headerText h1 {
max-width: 1350px;
text-align: left;
}
.headerText p {
width:100%;
max-width: 800px;
padding:0;
}

/* PAGE BAN COLORS
------------------------------------------------------------------------------*/
.ban {
margin: 0;
grid-column:1/-1;
width: 100%;
box-sizing: border-box;
padding:
    clamp(.5rem, 1vw, 1rem)
    0
    clamp(2rem, 4vw, 3rem);
}
.ban-mini {
margin: 0;
grid-column:1/-1;
width: 100%;
box-sizing: border-box;
padding: 0 0 clamp(1rem, 4vw, 2rem) 0;
}
.bg-light-blue {
background: var(--bg-light-blue);
}
.bg-soft {
background: var(--bg-soft);
}
.bg-light-green {
  background: var(--bg-light-green);
}
.bg-neutral-lighter {
background: var(--neutral-lighter);
}
.border-green {
border-color: #cfe3c8;
}

/* FILTER, Pages, tools/manual/summary-of-scales, report/support/learningResources
------------------------------------------------------------------------------*/
/* Shared filter layout */
.filter-bar {
  --filter-btn-width: 220px;
  --filter-max-width: 1600px;
  --filter-gap: 10px;

display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--filter-btn-width), 1fr));
gap: 5px var(--filter-gap);
max-width: var(--filter-max-width);
margin: 0 auto;
padding: 1em 0;
justify-items: center;
}
.filter-bar .btn-filter {
width: var(--filter-btn-width);
}
/* Page variations */
.filter-bar.is-wide {
  --filter-btn-width: 270px;
}
.filter-bar.is-tight {
  --filter-btn-width: 200px;
  --filter-max-width: 1200px;
  --filter-gap: 1%;
  justify-items: stretch;
}
/* Buttons */
.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;
}
/* Filtered content */
.filterDiv {
display: none;
}
.show {
display: grid;
}

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

/* ORDER PAGE - Pages:/tools/order_scorings, purchase_authority/pa_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;
}
.order-contact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 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', Arial, sans-serif;
font-weight: 400;
display: block;
color: #66737c;
font-size: 1rem;
margin-bottom: 6px;
}
.contact-item .contact-detail{
font-family: 'Open Sans', Arial, sans-serif;
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;
border: 1px solid var(--border-light);
}
.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-family: 'Open Sans', Arial, sans-serif;
font-size: 0.95rem;
font-weight: 700;
color: var(--wowi-blue);
}
.order-security {
border-top: 6px solid var(--wowi-blue);
border-left: 1px solid var(--border-light);
border-right: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.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;
}

/* ALERT / ERROR BOXES  Page: add_edit_customer
-----------------------------------------------------------------------------*/
.alert-box {
max-width: 900px;
margin: 2rem 0 2rem 0;
padding: .5rem 2rem;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.alert-box h3 {
margin: 0 0 .5rem 0;
font-size: 1.2rem;
line-height: 1.2;
}
.alert-box p {
padding: .5em 0;
font-size: 1.25em;
}
.alert-box p:last-child {
margin-bottom: 0;
}
.alert-success {
border-left: 6px solid var(--wowi-green);
background: #fff;
color: var(--wowi-blue);
}
.alert-error {
border-left: 6px solid #C94B4B;
background: #FFF7F7;
color: #5F2B2B;
}

/* SITEMAP
------------------------------------------------------------------------------*/
.sitemap {
grid-column:1/-1;
background: #D3D9DE;
width:100%;
margin: 0;
padding-top: 1.25em;
padding-bottom: .75em;
}
.sitemap-cols {
display:grid;
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', Arial, sans-serif; 
font-weight: 600; 
margin-top: 0;
margin-bottom: .5em;
}
.sitemap-col a {
display:block;
font-size:.9rem;
text-align:left;
font-family: 'Open Sans', Arial, sans-serif; 
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', Arial, sans-serif; 
font-weight: 400;
text-align:center;
font-size:1rem;
color:#263943;
vertical-align:middle;
}
p.copytrade {
margin: 0 0 .15rem 0;
}

p.rights {
margin: 0;
padding-bottom: 1em;
line-height: 1.45;
}

.copytrade2 {display:none;}


/* =============================================================================
MOBILE and SMALL TABLET
================================================================================ */
@media screen and (max-width:767px) {

/* Buttons */
.form-btn,
.payment-status {
width: 100%;
max-width: 320px;
}

a.opaque,
a.opaque-w2 {
width: 100%;
max-width: 320px;
}

/* Order form button row */
form.order .button-row {
display: block;
}
form.order .button-row::before {
display: none;
}
form.order .button-row .form-btn {
width: 100%;
max-width: 320px;
margin: 1em auto 0;
}

/* Filter buttons */
.filter-bar,
.filter-bar.is-wide,
.filter-bar.is-tight {
--filter-btn-width: 100%;
grid-template-columns: 1fr;
justify-items: stretch;
}

.filter-bar .btn-filter {
width: 100%;
}

/* Learning resources */
resource,
.resource {
min-height: auto;
padding: 1.5rem 1.25rem 5rem;
}

.resource-button {
bottom: 1.5rem;
}

/* Order page */
.order-price-list {
padding: 32px 18px 40px;
}
.order-contact {
padding: 24px 20px;
}
.info-grid {
grid-template-columns: 1fr;
}
.payment-info-inner {
padding: 0 18px;
}
.pricing,
.order-security {
padding: 24px 20px;
}

/* Alerts */
.alert-box {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
}

/* Sitemap */
.sitemap-cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem 1rem;
align-items: start;
}
.sitemap-col {
justify-self: stretch;
padding: 0;
}
.sitemap-col p {
font-size: 1rem;
margin-bottom: .4rem;
}
.sitemap-col a {
font-size: .95rem;
line-height: 1.35;
padding: .1rem 0;
}
.sitemap {
padding: 1.5rem 1rem;
}

/* Footer */
.copytrade,
.rights {
font-size: .9rem;
padding-left: 1rem;
padding-right: 1rem;
}

/* Mobile stacked tables */
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 tbody {
margin: 0 0 1rem 0;
padding: .35rem 0;
background: #f7f8fa;
border: 1px solid #d7dde2;
border-radius: 6px;
}
table.mobile-stack tbody td {
border: none;
position: relative;
padding: .55rem .75rem .55rem 120px;
white-space: normal;
text-align: left;
height: auto;
}
table.mobile-stack tbody td::before {
content: attr(data-title);
position: absolute;
top: 6px;
left: 10px;
width: 100px;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 700;
}
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;
}

}


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

/* Sitemap */
.sitemap-cols {
grid-template-columns: repeat(3, 1fr);
column-gap: 2%;
row-gap: 1.5rem;
}

.info-grid {
grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

/* Filter buttons */
.filter-bar {
justify-items: center;
}

.filter-bar .btn-filter {
width: var(--filter-btn-width);
}

}

/* =============================================================================
DESKTOP
================================================================================ */
/* inherits from tablet */
@media screen and (min-width:1366px) {

/* Sitemap */
.sitemap-cols {
grid-template-columns: repeat(5, 1fr);
column-gap: 2%;
}

/* Order page */
.payment-info-inner {
max-width: 1080px;
}

}

/* =============================================================================
DESKTOP - Large
================================================================================ */
@media screen and (min-width:1920px) {

/* Order page */
.payment-info-inner {
max-width: 1240px;
}

}

/* =============================================================================
PRINT
================================================================================ */
@media print {

* {
box-shadow: none !important;
text-shadow: none !important;
}

body {
background: #fff;
color: #000;
}

a,
a:visited {
color: #000;
text-decoration: underline;
}

/* Hide interactive UI */
button,
.form-btn,
.btn-filter,
.payment-status,
.payment-spinner,
.resource-button,
.booklet-btn,
.sitemap,
footer {
display: none !important;
}

/* Tables */
table {
width: 100%;
border-collapse: collapse;
}

table th,
table td {
border: 1px solid #999;
padding: .35rem;
font-size: 10pt;
color: #000;
}

/* Restore normal table behavior */
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: revert;
}

table.mobile-stack thead tr {
position: static;
}

table.mobile-stack tbody td {
padding: .35rem;
}

table.mobile-stack tbody td::before {
content: none;
}

/* Panels/cards */
.order-contact,
.pricing,
.order-security,
.alert-box,
resource,
.resource,
.contact-item {
background: #fff !important;
border: 1px solid #999 !important;
color: #000 !important;
page-break-inside: avoid;
break-inside: avoid;
}

.contact-grid,
.info-grid {
display: block;
}

.contact-item {
margin-bottom: .5rem;
}

.alert-box {
padding: .75rem 1rem;
}

}