:root {
    /* Colors */
    --color-blue-100: #f6fcff;
    --color-blue-300: #78d3fa;
    --color-blue-350: #0ea9ff;
    --color-blue-400: #2d9de3;
    --color-blue-500: #1e88e5;
    --color-blue-900: #01314e;
    --color-turquoise-300: #75efde;
    --color-turquoise-500: #00a08a;
    --color-turquoise-700: #0a7969;
    --color-red-300: #fd7273;
    --color-red-500: #b01726;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #f7f7f7;
    --color-gray-200: #e4e7ec;
}

body a {
    color: var(--color-blue-500);
    text-decoration: none;
    transition: color 0.15s ease;
}

body a:hover,
body a:focus-visible {
    color: var(--color-blue-500);
    text-decoration: none;
}

body a:focus {
    outline: none;
}

body a:focus-visible {
    outline: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

header.page-header {
	background-color: #fff;
	padding: 24px 0;
	margin: 0;
	border: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

header.page-header nav ul {
	list-style-type: none;
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 500;
}

header.page-header nav ul li:first-child img {
	max-width: 300px;
}

header.page-header nav ul li:first-child {
	margin-right: auto;
}

.page-banner {
	background-image: url('/Uploads/Images/lcc/backgrounds/Background_Bold-Blue-Gradient-Orbs.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	padding: 12rem 0;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}

.page-banner__title {
	text-transform: uppercase;
	margin: 0;
}

.page-banner__subtitle {
	font-family: harabara;
	font-size: 36px;
	margin: 0;
}

.page-banner__search-bar input[name="search-help"] {
	width: 40vw;
	border: none;
	background-color: transparent;
	padding: 0;
	border-radius: 0;
}

.page-banner__search-bar {
	background-color: #fff;
	border-color: #ddd;
	border-radius: 12px;
	padding: .5em 1.5em;
	margin-top: 24px;
	color: #444;
}

.page-banner__search-bar:after {
	content: '\f002';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

#help-content-container {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 48px;
}

#sidenav_content {
	opacity: 0;
	transition: opacity 200ms ease-in;
	margin-top: 24px;
}

#sidenav_content ul li a {
	color: var(--color-blue-500);
	font-size: 1.1em;
}

#sidenav_content .jsl-collapsed-arrow { /* comon, plus */
	background-image: none;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: var(--color-blue-500);
    mask-image: none;
    mask-size: contain;
	
    position: relative;
    top: 1px;
    left: 3px;
	float: none;
    clear: unset;
    margin-right: 11px;
	
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='7' y='3' width='2' height='10' fill='%23fff'/%3E%3Crect x='3' y='7' width='10' height='2' fill='%23fff'/%3E%3C/svg%3E");
}

#sidenav_content .jsl-open-arrow { /* minus */
	background-image: none;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='2' fill='%23fff'/%3E%3C/svg%3E");
}

#main_content {
    transition: opacity 200ms;
	padding-left: 36px;
	padding-bottom: 48px;
}

#sidenav_content + #main_content {
	border-left: solid 1px var(--color-gray-200);
}

#main_content h1 {
	text-align: center;
}

#main_content h3 {
	color: var(--color-turquoise-500);
}

#main_content h1:not(:has(~ .jumplist)) {
	margin-bottom: 36px;
}

#main_content h1 + .jumplist {
	display: flex;
	flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    font-size: .9em;
	margin-bottom: 36px;
}

#main_content h1 + .jumplist a {
	white-space: nowrap;
}

#help-getting-started .row {
	display: flex;
	flex-wrap: wrap;
}

#help-getting-started .row div[class*="col-"] {
	display: flex;
}

@media (max-width: 991px) {
    #help-getting-started .row div[class*="col-"] {
        width: 100%;
    }
}

#help-getting-started .lcc-card {
	display: flex;
	flex: 1;
}

#help-getting-started .lcc-card ul {
	list-style-type: none;
	margin: 24px 0 0 0 ;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .75em;
}

#help-getting-started .lcc-card ul a {
	display: flex;
	gap: .5em;
	align-items: flex-start;
	line-height: 1.2;
	font-size: .9em;
}

#help-getting-started .lcc-card ul i:is(.far,.fas) {
	position: relative;
	top: 1px;
}

#help-getting-started .lcc-card--with-icon-top-center h2 {
	margin-top: .5em;
}

#help-getting-started .lcc-card h2,
#help-getting-started .lcc-card h2 a {
	font-size: 1.2em;
}

/****************************************
The remaining CSS in this file was copied
from the main sites CSS. This was done to
ease the transition to the new design. We
should consolidate the CSS once the new 
design is rolled out.
****************************************/

:root {
	--lcc-icon-size: 90px;
    --lcc-icon-padding: 0.75rem;
    --lcc-icon-primary-color: #00a08a;
    --lcc-icon-secondary-color: #6f6f6f;

    --color-glow: rgba(100, 220, 220, 0.2);
    --color-clickable: var(--color-blue-500);
    --color-clickable-hover: color-mix(in srgb, var(--color-blue-500) 75%, black);

    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 18px;
}

/****************************************
Cards
****************************************/

.lcc-card {
    position: relative;
    background-color: #ffffff;
    border-radius: var(--radius-medium);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 42px;
    flex: 1;
}

.lcc-card p:first-child {
    margin-top: 0;
}

.lcc-card p:last-child {
    margin-bottom: 0;
}

.lcc-card--quote {
    padding-top: 60px;
}

.lcc-card--quote::before {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    font-family: 'Font Awesome 7 Pro';
    content: '\60\60';
    display: block;
    font-size: 42px;
    line-height: 1;
    color: #2aa99b;
    font-weight: 600;
}

.lcc-card__title {
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 1rem 0 0 0;
    text-transform: uppercase;
}

.lcc-card__text {
    font-size: .9rem;
    line-height: 1.5;
    margin: 1rem 0 0 0;
    font-weight: 500;
}

.lcc-card--glow {
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 0 48px 20px var(--color-glow);
    margin-top: 48px;
    margin-bottom: 48px;
}

.lcc-card--border {
    border: 1px solid var(--color-gray-200);
    box-shadow: none;
}

.lcc-card--pad-less {
    padding: 24px;
}

.lcc-card--turquoise-500 {
    background-color: var(--color-turquoise-500);
    color: var(--color-white);
}

.lcc-card--clickable {
    cursor: pointer;
    transition: background-color 0.5s ease, border-color 0.75s ease;
}

.lcc-card--clickable:hover {
    border: solid 1px var(--color-blue-900);
}

.lcc-card--with-icon-top-center {
    margin-top: calc(var(--lcc-icon-size) / 2);
    padding-top: calc(var(--lcc-icon-size) / 2 + 2rem);
}

.lcc-card--with-icon-top-center>.lcc-icon {
    --lcc-icon-padding: 1rem;

    position: absolute;
    top: calc(var(--lcc-icon-size) / -2);
    left: 50%;
    transform: translateX(-50%);
}

.lcc-card--pin-last-child {
    display: flex;
    flex-direction: column;
}

.lcc-card--pin-last-child>*:last-child {
    margin-top: auto;
}

/****************************************
 * Icons
 *
 * Authored as: <img class="lcc-icon lcc-icon--glow" src="...">
 * Rendered as: <span class="lcc-icon lcc-icon--glow"><img src="..."></span>
 *
 * In the editor, styles apply directly to the img.
 * At runtime, JS wraps the img in a span and moves all classes to the span.
 * The span becomes the visual disc; the img inside is unclipped.
 ****************************************/

/* ---- Editor state (img.lcc-icon) ---- */

img.lcc-icon {
    width: var(--lcc-icon-size);
    height: var(--lcc-icon-size);
    box-sizing: border-box;
    transition: opacity 0.3s ease;
    /* this handles missing images with long alt text */
    max-width: var(--lcc-icon-size);
    max-height: var(--lcc-icon-size);
    color: transparent;
}

img.lcc-icon.lcc-icon--disc {
    border-radius: 50%;
    background: #fff;
    border-radius: 50%;
    padding: var(--lcc-icon-padding);
    overflow: visible; /* this makes sure square icons aren't clipped in the corners */
}

img.lcc-icon.lcc-icon--border {
    border: var(--lcc-icon-border-width, 1px) solid var(--color-gray-200);
}

img.lcc-icon.lcc-icon--glow {
    box-shadow:
        0 6px 22px 2px var(--color-glow),
        0 0 34px 10px var(--color-glow);
}