html, body, div, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
sup {
    vertical-align: super;
    font-size: .75em;
}
sub {
    vertical-align: sub;
    font-size: .75em;
}
button,
input,
textarea {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-variant-numeric: inherit;
	line-height: inherit;
    color: currentColor;
}
button {
	background-color: transparent;
	cursor: pointer;
	&:focus-visible {
        outline-width: var(--focus-outline-width);
        outline-style: var(--focus-outline-style);
        outline-color: var(--focus-outline-color);
        outline-offset: var(--focus-outline-offset);
    }
}
input {
    border-radius: 0;
}
input:focus, select:focus {
	outline:none;
}
[popover] {
	background-color: var(--page-background);
	color: var(--color-text-standard);	
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html, body {
	scrollbar-color: var(--border-medium-color) transparent;
}
html, body, #pageLayout
{
    height: 100%;
}

body {
    padding: 0px;
    background-color: var(--page-background);
    font-variant-numeric: tabular-nums;
    height: auto;
    -webkit-text-size-adjust: 100%;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Non-brandable and other useful CSS vars */

:root,
[data-color-mode="light"] {
    --font-family-fallback: 'Proxima Nova', Sans-Serif;

    --page-width: 1280px;
    --page-horizontal-margin: 20px; /* https://knowledgearchitecture.slack.com/archives/D0F7UUEHZ/p1639588210004300 */

    --mega-menu-spacing: 70px;
    
	--nav-top-height: 80px;
	--nav-bottom-height: 73px;
	--nav-contracted-height: 60px;

    --page-column-gap: 65px;
    
    --page-background-light: #FFFFFF;
    --page-background-dark: #1A1D21;
    --page-background: var(--page-background-light);
    --text-subtle-size: 14px;
    --text-subtle-color: var(--color-text-light);
    --top-bars-background-color: var(--page-background);
    --top-nav-border-color: var(--border-light-color);
    --text-success-color: #007D1B;
    --text-alert-color: #FF0D00;
    --background-alert-color: #FF968D;
    --breadcrumb-color: var(--color-text-light);
    --breadcrumb-hover-color: var(--color-text-dark);
    --background-lighter-color: #FAFAFA;
    --background-light-color: #F2F2F2;
    --background-placeholder-color: var(--background-light-color);
    --border-toc-color: var(--border-light-color);
    --border-medium-color: #979797;
    --border-light-color: #D8D8D8;
    --border-lighter-color: #EFEFEF;
    --overlay-hiddenPage-color: #FFFFFFF2; /* 95% */
    --overlay-visiblePage-color: #FFFFFF80; /* 50% */
    --overlay-toolbar-color: #FFFFFFD9; /* 85% */
    --overlay-dark-color: #00000080; /* 50% */
	--scrollbar-color: #00000033; /* 20% */
    --nav-size-off: 16px;
    --nav-size-on: 18px;
    --block-gap-vertical: 15px;
    --box-border-radius: 20px;
    --menu-border-radius-big: 13px;
    --menu-border-radius: 8px;
    --workspace-padding-top: 50px;
    --workspace-padding-bottom: 80px; /* https://trello.com/c/Fu7RghrK/1521-general-please-add-an-80px-blank-footer-to-the-bottom-of-every-page */
    --pageLayout-padding-top: 30px;
    --top-transition-duration: 0ms; /* https://trello.com/c/POmtBYvY/1520-dynamic-nav-bar-design-updates */
    --indent-padding-increment: 40px;
    --system-normal-text-font-size: 16px;
    --system-normal-text-line-height: 20px;
    --system-color-text-light: #999999;
    --highlight-search-color: #2E71D33C; /*#D0DFF5*/
    --highlight-search-color-active: #78C0423C; /*#E1F1D5*/
	--fill-light-color: var(--page-background);
	--chart-color-1: #4A90E2;
	--chart-color-2: #EC1467;
	--chart-color-3: #54970A;
    --ratings-star-color: #FFCC04;
	--focus-outline-width: 2px;
	--focus-outline-style: solid;
	--focus-outline-color: var(--color-ui-accent);
	--focus-outline-offset: 3px;
	--focus-outline-radius: 0.15em;

    /* The following are only aliases for backward compatability, and may be removed in future. Do not use. */
    --ui-accent-color: var(--color-ui-accent);
    --text-dark-color: var(--color-text-dark);
    --text-standard-color: var(--color-text-standard);
    --text-light-color: var(--color-text-light);
    --text-1-color: var(--color-text-1);
    --text-2-color: var(--color-text-2);
    --text-3-color: var(--color-text-3);
    --text-4-color: var(--color-text-4);
    --text-5-color: var(--color-text-5);
    --highlight-1-color: var(--color-highlight-1);
    --highlight-2-color: var(--color-highlight-2);
    --highlight-3-color: var(--color-highlight-3);
    --highlight-4-color: var(--color-highlight-4);
    --highlight-5-color: var(--color-highlight-5);
    --highlight-6-color: var(--color-highlight-6);
}
@media (max-width: 1380px) {
    :root {
        --mega-menu-spacing: 35px;
    }
}

/* base element styles */

html { 
    background: var(--page-background);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-right: 0;
  }

body {
    font-family: var(--font-family), var(--font-family-fallback);
    font-size: var(--system-normal-text-font-size);
    line-height: var(--system-normal-text-line-height);
    font-weight: var(--normal-text-font-weight);
    color: var(--normal-text-color);
    overflow-wrap: break-word;
    padding: 0;
}

body.modal-open,
body[class^="modal-open"],
body[class*=" modal-open"] {
  height: 100vh;
  overflow-y: hidden;
  padding-right: 15px;
}

/* 
    TODO: Remove this when Safari fixes their :focus-visible
    Ticket: https://trello.com/c/pA2UPdY4/5917-safari-and-ios-focus-visible-bug
    PR: https://github.com/KnowledgeArchitecture/synthesis6/pull/2386
*/
body.hide-focus-visible button:focus-visible {
    outline: none !important;
}

a, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}
a:focus-visible {
	display: inline-block;
}
a:focus-visible,
[role='link']:focus-visible,
[role='button']:focus-visible {
	outline: none;
	position: relative;
	text-decoration: none !important;
	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		outline-color: var(--focus-outline-color);
        outline-offset: var(--focus-outline-offset);
        outline-width: var(--focus-outline-width);
        outline-style: var(--focus-outline-style);
        border-radius: var(--focus-outline-radius);
		pointer-events: none;
	}
}
a:hover, a:hover *,
[role='link']:hover, [role='link']:hover * {
    text-decoration-line: underline;
    text-underline-offset: var(--normal-link-underline-offset);
	text-decoration-thickness: 1px;
}
a.bold, a.bold *,
.bold a, a .bold,
[role='link'].bold, [role='link'].bold *,
.bold [role='link'], [role='link'] .bold {
	text-decoration-thickness: 2px;
	&:hover {
		text-decoration-thickness: 2px;
	}
}
a:has(.field):hover { /* links with inner fields should only underline the content (to prevent double underline) */
	text-decoration-line: none;
}
a:hover {
      cursor: pointer;
}

b, strong {
    font-weight: var(--text-bold-font-weight);
}
b > a, b > a:visited, b > a:active {
    font-weight: inherit !important;
}
b > a:hover {
    font-weight: inherit !important;
}

a.s6-editor-link,
a.s6-editor-link:visited,
.htmlContent a,
.htmlContent a:visited {
	color: var(--normal-link-color); 
	font-weight: var(--normal-link-font-weight);
    line-height: var(--normal-link-line-height);
	text-decoration-line: var(--normal-link-decoration-line);
	text-decoration-thickness: var(--normal-link-underline-weight);
	text-decoration-color: var(--normal-link-underline-color);
    -webkit-text-decoration-line: var(--normal-link-decoration-line);/*iOS*/
    -webkit-text-decoration-color: var(--normal-link-underline-color);/*iOS*/
    text-underline-offset: var(--normal-link-underline-offset);
}
a.s6-editor-link:hover,
.htmlContent a:hover {
	color: var( --normal-link-hover-text-color);
	font-weight: var(--normal-link-hover-font-weight);
	text-decoration-line: var(--normal-link-hover-decoration-line);
	text-decoration-thickness: var(--normal-link-hover-underline-weight);
	text-decoration-color: var(--normal-link-hover-underline-color);
    -webkit-text-decoration-line: var(--normal-link-hover-decoration-line);/*iOS*/
    -webkit-text-decoration-color: var(--normal-link-hover-underline-color);/*iOS*/
	cursor: pointer;
}
/* Disabled Links*/
a:not([href]) {
    cursor: default;
}

h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-font-weight);
    color: var(--h1-color);
    text-transform: var(--h1-text-transform);
}
h1 a, h1 a:visited, h1 a.s6-editor-link, h1 a.s6-editor-link:visited {
	color: var(--h1-link-color);
	font-weight: var(--h1-link-font-weight);
    box-shadow: 0 var(--h1-link-underline-weight) 0 0 var(--h1-link-underline-color);
	text-decoration: none;
}
h1 a:hover, h1 a.s6-editor-link:hover {
    font-weight: var(--h1-hover-font-weight);
    color: var(--h1-hover-text-color);
    box-shadow: 0 var(--h1-hover-underline-weight) 0 0 var(--h1-hover-underline-color);
    text-decoration: none;
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-weight: var(--h2-font-weight);
    color: var(--h2-color);
    text-transform: var(--h2-text-transform);
}

h2 a, h2 a:visited, h2 a.s6-editor-link, h2 a.s6-editor-link:visited {
	color: var(--h2-link-color);
	font-weight: var(--h2-link-font-weight);
    box-shadow: 0 var(--h2-link-underline-weight) 0 0 var(--h2-link-underline-color);
	text-decoration: none;
}

h2 a:hover, h2 a.s6-editor-link:hover {
    font-weight: var(--h2-hover-font-weight);
    color: var(--h2-hover-text-color);
    box-shadow: 0 var(--h2-hover-underline-weight) 0 0 var(--h2-hover-underline-color);
    text-decoration: none;
}

h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-weight: var(--h3-font-weight);
    color: var(--h3-color);
    text-transform: var(--h3-text-transform);
}
h3 a, h3 a:visited, h3 a.s6-editor-link, h3 a.s6-editor-link:visited {
	color: var(--h3-link-color);
	font-weight: var(--h3-link-font-weight);
    box-shadow: 0 var(--h3-link-underline-weight) 0 0 var(--h3-link-underline-color);
	text-decoration: none;
}
h3 a:hover, h3 a.s6-editor-link:hover {
    font-weight: var(--h3-hover-font-weight);
    color: var(--h3-hover-text-color);
    box-shadow: 0 var(--h3-hover-underline-weight) 0 0 var(--h3-hover-underline-color);
    text-decoration: none;
}
.small-text {
    font-size: var(--small-text-font-size);
    line-height: var(--small-text-line-height);
    font-weight: var(--small-text-font-weight);
    color: var(--small-text-color);
}
.small-text a, .small-text a:visited {
	color: var(--small-link-color);
	font-weight: var(--small-link-font-weight);
    text-decoration: var(--small-link-decoration-line) var(--small-link-underline-weight) var(--small-link-underline-color);
}
.small-text a:hover {
    font-weight: var(--small-link-hover-font-weight);
    color: var(--small-link-hover-text-color);
    text-decoration: var(--small-link-hover-decoration-line) var(--small-link-hover-underline-weight) var(--small-link-hover-underline-color);
}
blockquote {
    margin: 10px 75px calc(10px + var(--block-gap-vertical)) min(25%,75px);
    padding-bottom: 0 !important;
    position: relative;
}
blockquote::before {
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    left: -25px;
    height: calc(100% + 10px);
    width: 5px;
    border-radius: 2.5px;
    background-color: var(--border-light-color);
}
/* sibling blockquotes should appear as one */
.PageHtmlBlock:has(blockquote) + .PageHtmlBlock blockquote,
.row_PageHtmlBlock:has(blockquote) + .row_PageHtmlBlock blockquote {
    margin-top: 0;
}
.PageHtmlBlock:has(blockquote) + .PageHtmlBlock blockquote::before,
.row_PageHtmlBlock:has(blockquote) + .row_PageHtmlBlock blockquote::before { 
    top: calc(0px - 10px - var(--block-gap-vertical));
    height: calc(100% + 15px + var(--block-gap-vertical));
}
input, textarea {
    background-color: var(--page-background);
    font-family: var(--font-family);
}
input[type="text"]::placeholder,
textarea::placeholder {
    font-family: var(--font-family);
    color: var(--system-color-text-light);
}

/* s6 custom element styles */

.s6-normal-text {
    font-size: var(--normal-text-font-size);
    line-height: var(--normal-text-line-height);
    font-weight: var(--normal-text-font-weight);
    color: var(--normal-text-color);
}
.s6-normal-text a, .s6-normal-text a:visited {
	color: var(--body-link-color);
	font-weight: var(--body-link-font-weight);
	border-bottom: var(--body-link-underline-weight) solid var(--body-link-underline-color);
	text-decoration: none;
}
.s6-normal-text a:hover {
    font-weight: var(--body-link-hover-font-weight);
    color: var(--body-link-hover-text-color);
    box-shadow: 0 var(--body-link-hover-underline-weight) 0 0 var(--body-link-hover-underline-color);
}

.s6-pagetitle {
    font-size: var(--pagetitle-font-size);
    line-height: var(--pagetitle-line-height);
    font-weight: var(--pagetitle-font-weight);
    color: var(--pagetitle-color);
    text-transform: var(--pagetitle-text-transform);
}
.pageLayoutContainer.editing .s6-pagetitle {
    padding-top: 10px;
}
.s6-pagetitle a, .s6-pagetitle a:visited {
	color: var(--pagetitle-link-color);
	font-weight: var(--pagetitle-link-font-weight);
	border-bottom: var(--pagetitle-link-underline-weight) solid var(--pagetitle-link-underline-color);
	text-decoration: none;
}
.s6-pagetitle a:hover {
    font-weight: var(--pagetitle-hover-font-weight);
    color: var(--pagetitle-hover-text-color);
    box-shadow: 0 var(--pagetitle-hover-underline-weight) 0 0 var(--pagetitle-hover-underline-color);
}

.s6-posttitle,
a.s6-posttitle,
a.s6-posttitle:visited,
a.s6-posttitle:active,
a.s6-posttitle:hover {
    line-height: var(--posttitle-line-height);
    color: var(--posttitle-color);
    text-transform: var(--posttitle-text-transform);
	&.classic {
		font-size: var(--posttitle-font-size-classic);
		font-weight: var(--posttitle-font-weight);
	}
	&.headline {
		font-size: var(--posttitle-font-size);
		font-weight: var(--posttitle-font-weight);
	}
	/* &.grid -- size and weight set in styled component */
}
/* make sure workspace fills the viewport */
#s6-wrapper {
    min-height: calc(100vh + 3px); /*ensure the page is always scrollable (3px is the scroll amount needed to trigger top bar contraction) https://trello.com/c/5NtKltuV/5614-pages-short-pages-bounce-when-scrolling-to-the-end*/
    display: flex;
}
body.phone #s6-wrapper {
	flex-direction: column;
}
#page-content {
    flex-grow: 1;
}
/* base page layout */
.pageLayoutContainer {
    height:100%;
}
.centeredPageSection {
    position: relative;
    transition-property: left;
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.16, 0.68, 0.43, 0.99);
    display: flex;
    justify-content: center;
    padding: 0 var(--page-horizontal-margin);
}
.centeredPageSection > * {
    width: 100%;
    max-width: var(--page-width);
}
#s6-pageLeft > div {
    max-height: 100%;
    display: flex;
    flex-direction: column;
}
#top-sticky-bars {
    position: sticky;
    top: 0;
    z-index: 10;
}
#top-sticky-bars > div:not(:empty) {
	background-color: var(--top-bars-background-color);
	border-bottom: 1px solid var(--top-nav-border-color);
}
#top-sticky-bars > div:nth-child(1) { z-index: 3; }
#top-sticky-bars > div:nth-child(2) { z-index: 2; }
#top-sticky-bars > div:nth-child(3) { z-index: 1; }
#s6-pageToolbar {
    /* position: sticky; */
    width: 100%;
    margin-top:1px;
    z-index: 4;
    background-color: var(--page-background);
    box-shadow: inset 0 -1px 0 var(--top-nav-border-color);
    transition: padding-left 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99), top var(--top-transition-duration);
}
#page-content {
    position: relative;
    padding-top: var(--workspace-padding-top);
    padding-bottom: var(--workspace-padding-bottom);
}
#communityNav {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#top-sticky-bars.contracted #communityNav {
	display: none;
}
/*
the rule below caused this... https://trello.com/c/8a97CHfI/720-dropdowns-odd-amount-of-spacing-at-the-bottom-of-configuration-dropdowns
.macScrollWorkAround > div > *:last-child {
    border-bottom: 20px solid var(--page-background);
}
*/

/* Breadcrumbs */
.breadcrumbs-home g[stroke^='#'] {
    stroke: var(--breadcrumb-color);
}
.breadcrumbs-home:hover g[stroke^='#'] {
    stroke: var(--breadcrumb-hover-color);
}
.s6-breadcrumb, .s6-breadcrumb > a,.s6-breadcrumb > a:active,.s6-breadcrumb > a:visited, .s6-breadcrumb > span {
    color: var(--breadcrumb-color);
    font-size: var(--text-subtle-size);
    line-height: var(--system-normal-text-line-height);
}
.s6-breadcrumb > a:hover{
    color: var(--breadcrumb-hover-color);
}

/* Headings */
.blockContainer > div:not(:first-child) .htmlBlock > h1
{
    padding-top: 20px;
}
.blockContainer > div:not(:first-child) .htmlBlock > h2
{
    padding-top: 10px;
}
.blockContainer > div:not(:first-child) .htmlBlock > h3
{
    padding-top: 5px;
}
/* Top Heading */
.blockContainer > div:nth-child(1 of :not(.topOfTheColumn):not(:has(.hiddenBlock))) .htmlBlock > h1,
.blockContainer > div:nth-child(1 of :not(.topOfTheColumn):not(:has(.hiddenBlock))) .htmlBlock > h2,
.blockContainer > div:nth-child(1 of :not(.topOfTheColumn):not(:has(.hiddenBlock))) .htmlBlock > h3,
.blockContainer > div:not(:first-child) .blockText > h1:first-child,
.blockContainer > div:not(:first-child) .blockText > h2:first-child,
.blockContainer > div:not(:first-child) .blockText > h3:first-child
{
    padding-top: 0;
}

/* We don't want headings in tables to have padding top */
.styledPageTable .blockContainer > div .htmlBlock > h1,
.styledPageTable .blockContainer > div .htmlBlock > h2,
.styledPageTable .blockContainer > div .htmlBlock > h3 {
    padding-top: 0;
}

.htmlBlock > h1,
.htmlBlock > h2,
.htmlBlock > h3,
.blockText h1,
.blockText h2,
.blockText h3
{
    padding-bottom: 10px;
}

@supports not selector(:has(a)) {
    /* Html Blocks - FIREFOX VERSION until they support :has */
    .pageLayoutContainer:not(.editing) .blockContainer > div:not(:last-child) > .htmlBlock > *:not(h1):not(h2):not(h3):not(hr):last-child, /* last node (paragrapgh, ul, ol...) in html block */
    /* the page editor will put the padding on the div inside block dragger so our drop targets register the onDragOver type events in the padding */
    .pageLayoutContainer.editing .blockContainer div.pageRow:not(:last-child).row_PageHtmlBlock .htmlBlock > *:not(h1):not(h2):not(h3):not(hr):last-child, /* paragraphs */
    /* Non-Html Blocks */
    .pageLayoutContainer:not(.editing) .blockContainer > div:not(.PageHtmlBlock):not(.styledPageTable):not(:last-child), /* FIREFOX VERSION - non-html blocks (non-edit mode) */
    /* the page editor will put the padding on the div inside block dragger so our drop targets register the onDragOver type events in the padding */
    .pageLayoutContainer.editing .blockContainer div.pageRow:not(:last-child):not(.row_PageHtmlBlock):not(.pageSection):not(.styledPageTable) > div /* non-html blocks (edit mode) */
    {
        padding-bottom: var(--block-gap-vertical);
    }
}
/* Html Blocks */
.pageLayoutContainer:not(.editing) .blockContainer > div:not(:last-child) > .htmlBlock > *:not(h1):not(h2):not(h3):not(hr):last-child, /* last node (paragrapgh, ul, ol...) in html block */
/* the page editor will put the padding on the div inside block dragger so our drop targets register the onDragOver type events in the padding */
.pageLayoutContainer.editing .blockContainer div.pageRow:not(:last-child).row_PageHtmlBlock .htmlBlock > *:not(h1):not(h2):not(h3):not(hr):last-child, /* paragraphs */
/* Non-Html Blocks */
.pageLayoutContainer:not(.editing) .blockContainer > div:not(.PageHtmlBlock):not(.styledPageTable):not(:has(.hiddenBlock)):not(:nth-last-child(1 of :not(:has(.hiddenBlock)))), /* non-html blocks (non-edit mode) */
/* the page editor will put the padding on the div inside block dragger so our drop targets register the onDragOver type events in the padding */
.pageLayoutContainer.editing .blockContainer div.pageRow:not(:last-child):not(.row_PageHtmlBlock):not(.pageSection):not(.styledPageTable) > div /* non-html blocks (edit mode) */
{
    padding-bottom: var(--block-gap-vertical);
}
.pageLayoutContainer .blockContainer > .topOfTheColumn > div
{
    padding-bottom: var(--block-gap-vertical);
}
.pageLayoutContainer:not(.editing) .blockContainer > div.styledPageTable,
.pageLayoutContainer.editing .blockContainer > div.pageSection,
.pageLayoutContainer.editing .blockContainer > div.styledPageTable
{
    margin-bottom: var(--block-gap-vertical);
}
/* Top Block Title */
.blockContainer > div:nth-child(1 of :not(.topOfTheColumn):not(:has(.hiddenBlock))) .blockTitle
{
    margin-top: 0;
}

.pageLayoutContainer.editing .highlightHtml .blockContainer > div.row_PageHtmlBlock > div {
    background-color: aliceblue;
}
.pageRow > div {
    outline:none;
}

/* PAGE LAYOUT */
#pageLayout {
    height:100%;
}
#pageLayout > .pageLayoutContainer,
#pageLayout > .pageLayoutContainer.editing > .pageEditor {
    justify-content: space-between;
}
#pageLayout > .pageLayoutContainer:not(.editing) > div.pageTitle,
#pageLayout > .pageLayoutContainer > input.s6-pagetitle {
    grid-area: head;
    padding-bottom: var(--pageLayout-padding-top);
}
#pageLayout > .pageLayoutContainer:not(.editing) > div.pageTitle {
    padding-bottom: var(--pageLayout-padding-top);
}
#pageLayout > .pageLayoutContainer.editing > input.s6-pagetitle {
    padding-bottom: calc(var(--pageLayout-padding-top) * 0.5 + 5px);
}
#pageLayout > .pageLayoutContainer.editing > div.s6-pagetitle {
    padding-bottom: calc(var(--pageLayout-padding-top) * 0.5 + 5px);
}
/* div.pageTitle {
    display: flex;
    // TODO: breaking title into 2 divs one for title and its companion pieces which is diplay:flex, and the other for lastUpdated
    // make sure this doesn't break anything else
} */
#pageLayout > .pageLayoutContainer:not(.editing),
#pageLayout > .pageLayoutContainer.editing > .pageEditor,
#pageLayout.Guide > .pageLayoutContainer.editing,
#pageLayout.Course > .pageLayoutContainer.editing,
#pageLayout.LearningPath > .pageLayoutContainer.editing,
#pageLayout.Lesson > .pageLayoutContainer.editing
{
    display: grid;
    height: 100%;
}
#pageLayout:not(.Profile) > .pageLayoutContainer.editing > .pageEditor
{
    border-top:1px dashed var(--color-text-light);
}
#pageLayout > .pageLayoutContainer.editing > .pageEditor > .pageColumn
{
    padding-top: calc(var(--pageLayout-padding-top) * 0.5 + 5px);
}

/*Make sure the columns extend all the way to the bottom of the page in edit mode*/
#pageLayout > .pageLayoutContainer.editing > .pageEditor > .pageColumn
{
    min-height: calc(100vh - 236px - var(--workspace-padding-top) - var(--pageLayout-padding-top));
}

/* One Column */
#pageLayout.OneColumn > .pageLayoutContainer:not(.editing)
{
    grid-template-areas: 'head' 'a' 'line';
    grid-template-columns: 100%;
    grid-template-rows: max-content max-content;
    grid-column-gap: 0px;
}
#pageLayout.OneColumn > .pageLayoutContainer.editing > .pageEditor > .pageColumn.pageColumn.column0
{
    width: var(--page-width);
}

/* Two Column */
#pageLayout.TwoColumn > .pageLayoutContainer:not(.editing) {
    grid-template-areas: 'head head head' 'left line right';
    grid-template-columns: minmax(650px, 750px) 0px minmax(300px, 400px);
    grid-column-gap: 37.5px;
}
#pageLayout.TwoColumn > .pageLayoutContainer.editing > .pageEditor,
#pageLayout.TwoColumn.Guide > .pageLayoutContainer.editing,
#pageLayout.TwoColumn.Course > .pageLayoutContainer.editing,
#pageLayout.TwoColumn.LearningPath > .pageLayoutContainer.editing,
#pageLayout.TwoColumn.Lesson > .pageLayoutContainer.editing {
    grid-template-areas: 'head head head' 'left line right';
    grid-template-columns: 750px 0px 400px;
    grid-column-gap: var(--page-column-gap);
}
#pageLayout.TwoColumn > .pageLayoutContainer:not(.editing),
#pageLayout.TwoColumn.Guide > .pageLayoutContainer.editing,
#pageLayout.TwoColumn.Course > .pageLayoutContainer.editing,
#pageLayout.TwoColumn.LearningPath > .pageLayoutContainer.editing,
#pageLayout.TwoColumn.Lesson > .pageLayoutContainer.editing,
#pageLayout.TwoColumn > .pageLayoutContainer.editing > .pageEditor {
    grid-template-rows: min-content min-content;
}

#pageLayout.TwoColumn > .pageLayoutContainer:not(.editing) > .pageColumn.column0,
#pageLayout.TwoColumn > .pageLayoutContainer.editing > .pageEditor > .pageColumn.column0
{
    grid-area: left;
    width: 100%;
}

#pageLayout.TwoColumn > .pageLayoutContainer:not(.editing) > .pageColumn.column1,
#pageLayout.TwoColumn > .pageLayoutContainer.editing > .pageEditor > .pageColumn.column1
{
    grid-area: right;
    width: 100%;
}

/* Guide and Course */
#pageLayout.Guide > .pageLayoutContainer:not(.editing) > .pageColumn.column0, /* we have to pretend the page editor is column0 in a guide page*/
#pageLayout.Course > .pageLayoutContainer:not(.editing) > .pageColumn.column0,
#pageLayout.LearningPath > .pageLayoutContainer:not(.editing) > .pageColumn.column0,
#pageLayout.Lesson > .pageLayoutContainer:not(.editing) > .pageColumn.column0,
#pageLayout.Guide > .pageLayoutContainer.editing > .pageEditor,
#pageLayout.Course > .pageLayoutContainer.editing > .pageEditor,
#pageLayout.LearningPath > .pageLayoutContainer.editing > .pageEditor,
#pageLayout.Lesson > .pageLayoutContainer.editing > .pageEditor {
    grid-area: left;
    width: 100%;
}
#pageLayout.Guide > .pageLayoutContainer.editing > .pageEditor,
#pageLayout.Course > .pageLayoutContainer.editing > .pageEditor,
#pageLayout.LearningPath > .pageLayoutContainer.editing > .pageEditor,
#pageLayout.Lesson > .pageLayoutContainer.editing > .pageEditor { /* allows dashed border to extend */
    padding-right: 65px;
}
#pageLayout.Guide > .pageLayoutContainer > .pageColumn.column1,
#pageLayout.Course > .pageLayoutContainer > .pageColumn.column1,
#pageLayout.LearningPath > .pageLayoutContainer > .pageColumn.column1,
#pageLayout.Lesson > .pageLayoutContainer > .pageColumn.column1 {/*Column1 is outside the editor on a guide and course*/
    grid-area: right;
    width: 100%;
}

/* Admin page with leftnav */

#pageLayout.Admin {
    grid-template-areas: 'a b';
}

#pageLayout.Admin > .pageColumn:nth-of-type(1) {
    width: 200px;
}

#pageLayout.Admin > .pageColumn:nth-of-type(2) {
    width: 1000px;
}

/* Page Column Content*/
.pageColumnBlocks {
    display: flex;
    flex-direction: column;
}

/* Show Changes Styles */
div.ka_added, div.ka_removed,div.ka_changed {
    min-height:15px;
    padding:5px;
    margin:10px -5px;
	position: relative;
}
div.ka_added
{
    box-shadow: 0px 0px 0px 4px #88FA4E;
}
div.ka_removed
{
    box-shadow: 0px 0px 0px 4px #FF968D;
}

div.ka_removed .htmlBlock
{
    text-decoration: line-through;
}
div.ka_changed
{
    box-shadow: 0px 0px 0px 4px #FDFF00;
}
span.ka_added, span.ka_added div, div.ka_changed ins, .pageTitle ins
{
    text-decoration: none;
    background-color:#88FA4E;
}
span.ka_removed, span.ka_removed div, div.ka_changed del, .pageTitle del
{
    background-color:#FF968D;
    text-decoration: line-through;
}
div.ka_changeIcon
{
    width: 24px;
    height: 24px;
    border-radius: 22px;
    background-color: var(--page-background);
    border-width: 3px;
    border-style: solid;
    right: 10px;
    top: -17px;
    position: absolute;
    z-index: 3;
    align-items: center;
    display: flex;
    justify-content: center;
}
div.ka_changeIcon > svg
{
    max-width:14px;
    max-height:14px;
}
div.ka_removed > div.ka_changeIcon
{
    border-color: #FF968D;
}
div.ka_added > div.ka_changeIcon
{
    border-color: #88FA4E;
}
div.ka_changed > div.ka_changeIcon
{
    border-color: #FDFF00;
}

/* Themeable colors */

span.color-ui-accent,
span.color-ui-accent * {
    color: var(--color-ui-accent) !important;
}
span.color-text-dark,
span.color-text-dark * {
    color: var(--color-text-dark) !important;
}
span.normal-text-color,
span.normal-text-color * {
    color: var(--normal-text-color) !important;
}
span.color-text-light,
span.color-text-light * {
    color: var(--color-text-light) !important;
}

.color-text-1,
.color-text-1 * {
    color: var(--color-text-1) !important;
}
.color-text-2,
.color-text-2 * {
    color: var(--color-text-2) !important;
}
.color-text-3,
.color-text-3 * {
    color: var(--color-text-3) !important;
}
.color-text-4,
.color-text-4 * {
    color: var(--color-text-4) !important;
}
.color-text-5,
.color-text-5 * {
    color: var(--color-text-5) !important;
}

.color-highlight-1 {
    background-color: var(--color-highlight-1);
}
.color-highlight-2 {
    background-color: var(--color-highlight-2);
}
.color-highlight-3 {
    background-color: var(--color-highlight-3);
}
.color-highlight-4 {
    background-color: var(--color-highlight-4);
}
.color-highlight-5 {
    background-color: var(--color-highlight-5);
}
.color-highlight-6 {
    background-color: var(--color-highlight-6);
}

.kaTeamsPresenceIcon{
    width:12px;
    height:12px;
}
/* Print styles */

@media print {

    :root {
        --normal-text-font-size: 20px;
        --normal-text-line-height: 25px;
        --h1-font-size: 36px;
        --h1-line-height: 44px;
        --h2-font-size: 24px;
        --h2-line-height: 30px;
        --pagetitle-font-size: 54px;
        --pagetitle-line-height: 66px;
        --posttitle-font-size: 36px;
        --posttitle-line-height: 44px;
    }

    @page {
        margin: 1in 1in 1in 1in;
    }

    #top-sticky-bars, #s6-breadcrumbs, #s6-pageToolbar, #s6-pageLeft, #s6-guideFooter, #s6-guideOutliner, .ShareSomething, #ka-stream-controls {
        display: none !important;
    }

    #page-content {
        padding: 0;
    }

    html, body, #page-content, #pageLayout 
    {
        width: auto;
    }

    #pageLayout > .pageLayoutContainer:not(.editing),
    #pageLayout:not(.Guide) > .pageLayoutContainer.editing > .pageEditor,
    #pageLayout.Guide > .pageLayoutContainer.editing {
        display: block;
        grid-gap: 0px;
    }

    .pageColumn.column0 {
        width: auto !important;
        padding-right: 0 !important;
    }

    .pageColumn.column1 {
        padding-left: 0 !important;
    }
}
/* UL and OL for page content AND override editors */
.htmlBlock ul,
.htmlBlock ol
{
    padding-inline-start: var(--indent-padding-increment);
}
.htmlBlock li[style*='center'],
.htmlBlock li[style*='right'],
.htmlContent li[style*='center'],
.htmlContent li[style*='right']
{
    list-style-position: inside;
}
.htmlBlock li > *[style*='center'],
.htmlBlock li > *[style*='right']
{
    display: contents;
}
.htmlBlock li.h1::marker,
.htmlContent li.h1::marker
{
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-font-weight);
    color: var(--h1-color);
    text-transform: var(--h1-text-transform);
}
.htmlBlock li.h2::marker,
.htmlContent li.h2::marker
{
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-weight: var(--h2-font-weight);
    color: var(--h2-color);
    text-transform: var(--h2-text-transform);
}
.htmlBlock li.h3::marker,
.htmlContent li.h3::marker
{
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-weight: var(--h3-font-weight);
    color: var(--h3-color);
    text-transform: var(--h3-text-transform);
}
.htmlBlock li:not(:last-of-type),
.htmlContent li:not(:last-of-type)
{
    padding-bottom: 10px;
}
.htmlBlock li > ol,
.htmlBlock li > ul,
.htmlContent li > ol,
.htmlContent li > ul
{
    padding-top: 10px;
}
.htmlBlock ol,
.htmlContent ol,
.htmlBlock ol ol ol ol,
.htmlContent ol ol ol ol,
.htmlBlock ol ol ol ol ol ol ol,
.htmlContent ol ol ol ol ol ol ol
{
    list-style-type: decimal;
}
.htmlBlock ol ol,
.htmlContent ol ol,
.htmlBlock ol ol ol ol ol,
.htmlContent ol ol ol ol ol,
.htmlBlock ol ol ol ol ol ol ol ol,
.htmlContent ol ol ol ol ol ol ol ol
{
    list-style-type: lower-alpha;
}
.htmlBlock ol ol ol,
.htmlContent ol ol ol,
.htmlBlock ol ol ol ol ol ol,
.htmlContent ol ol ol ol ol ol,
.htmlBlock ol ol ol ol ol ol ol ol ol,
.htmlContent ol ol ol ol ol ol ol ol ol
{
    list-style-type: lower-roman;
}
.htmlBlock ul,
.htmlContent ul,
.htmlBlock ul ul ul ul,
.htmlContent ul ul ul ul,
.htmlBlock ul ul ul ul ul ul ul,
.htmlContent ul ul ul ul ul ul ul
{
    list-style-type: disc;
}
.htmlBlock ul ul,
.htmlContent ul ul,
.htmlBlock ul ul ul ul ul,
.htmlContent ul ul ul ul ul,
.htmlBlock ul ul ul ul ul ul ul ul,
.htmlContent ul ul ul ul ul ul ul ul
{
    list-style-type: circle;
}
.htmlBlock ul ul ul,
.htmlContent ul ul ul,
.htmlBlock ul ul ul ul ul ul,
.htmlContent ul ul ul ul ul ul,
.htmlBlock ul ul ul ul ul ul ul ul ul,
.htmlContent ul ul ul ul ul ul ul ul ul
{
    list-style-type: square;
}

.ka_imgUploadProgress {
    position: absolute;
    bottom: -8px;
    height: 3px;
    width: 100%;
}
.ka_imgUploadProgress > div {
    height: 100%;
    background-color: var(--color-ui-accent);
}

.screen-reader-only {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
.pubPrivIndicator > svg {
	overflow: visible;
}