@font-face{
    font-family:"Avenir Bold";
    font-weight: normal;
    src: url("../fonts/AvenirLTW0195Black.woff") format("woff");
}
@font-face{
    font-family:"Avenir";
    font-weight: normal;
    src: url("../fonts/AvenirLTW0165Medium.woff") format("woff");
}
@font-face{
    font-family:"Avenir";
    font-weight: normal;
    font-style: italic;
    src: url("../fonts/AvenirLTW0165MediumObl.woff") format("woff");
}


@font-face{
    font-family:"Frutiger";
    font-weight: 300;
    src: url("../fonts/087d8a95-3f25-4bae-a1d1-db9ddffd72f5.woff2") format("woff2"),
         url("../fonts/ab1bcdf7-9570-4cba-a8e3-3e39ddd861db.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-stretch: condensed;
    font-style: italic;
    font-weight: 300;
    src: url("../fonts/dd14f86b-6832-4698-a69d-50818bb5d389.woff2") format("woff2"),
         url("../fonts/100c0386-b64c-4c85-9172-b79785f4dcd2.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-stretch: condensed;
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/dc3008a2-9cad-48ed-8251-2412ed09086f.woff2") format("woff2"),
         url("../fonts/db967fba-df9a-4509-b1b5-95124c2013ce.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-stretch: condensed;
    font-style: italic;
    font-weight: 800;
    src: url("../fonts/bee16a96-d213-4739-a881-ada9a33f0179.woff2") format("woff2"),
         url("../fonts/314baf77-9c60-45b4-8a51-f2acae7de108.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/ee64ad16-a883-4016-b113-4a759dbbc6a5.woff2") format("woff2"),
         url("../fonts/dd98a3bc-b0ee-4ee8-ab94-59a847a74f57.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-stretch: condensed;
    font-weight: 800;
    src: url("../fonts/034d500f-f636-4795-b000-9127e63a8a7a.woff2") format("woff2"),
         url("../fonts/c7fe41eb-02b2-450d-93c4-56d42ca8b396.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-stretch: condensed;
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/083df068-c6d6-4e0b-98fc-d2407ce790ef.woff2") format("woff2"),
         url("../fonts/03304ed1-4bdf-4a34-82ec-7babad3efcff.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-stretch: condensed;
    font-weight: 700;
    src: url("../fonts/22a92dfa-e44e-42f4-9e96-cc4daf902a9f.woff2") format("woff2"),
         url("../fonts/6926f8fc-e5cd-4b0a-915e-b164f04fc50e.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-weight: 700;
    src: url("../fonts/baf6c073-f399-4537-a60a-8c6bd5e164a7.woff2") format("woff2"),
         url("../fonts/4bf9cd6c-9a0e-47cc-8b5d-623bd466f984.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-weight: 400;
    src: url("../fonts/3b3bb74f-0579-4650-8ad8-71ecd8a005f2.woff2") format("woff2"),
         url("../fonts/a3d2331d-37b1-42d3-8532-b1c75e5251bd.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-stretch: condensed;
    font-style: italic;
    font-weight: 900;
    src: url("../fonts/c7869092-878e-4996-a9ae-aaf3ac942152.woff2") format("woff2"),
         url("../fonts/c6e1b3d0-aab1-4a2c-8d10-ccc8ab37f95c.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-stretch: condensed;
    font-weight: 900;
    src: url("../fonts/4b6f1e6f-4f11-4990-9582-5d2cefd68d1a.woff2") format("woff2"),
         url("../fonts/42f463b3-f7b2-4e22-851c-3a5a2547f76d.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-weight: 800;
    src: url("../fonts/7ed8d637-65a4-490b-ab35-bf2660fbc7d2.woff2") format("woff2"),
         url("../fonts/6d9d1112-41e1-41e2-b5b0-8ee225084d76.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-style: italic;
    font-weight: 800;
    src: url("../fonts/3c11bec5-6b9b-41d2-9265-77d0ca7f28e0.woff2") format("woff2"),
         url("../fonts/56376023-df8a-43ac-a0f5-da7ee22c18d9.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/e091b810-6d68-487e-b0fd-5d14ee033291.woff2") format("woff2"),
         url("../fonts/33123ee9-731f-4a44-ab8b-d672223734b6.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-style: italic;
    font-weight: 300;
    src: url("../fonts/a4d4f442-95cb-447a-b03c-808ba7ad98c1.woff2") format("woff2"),
         url("../fonts/a009f6b8-9ea1-4952-905a-663e7bb8d026.woff") format("woff");
}
@font-face{
    font-family:"Frutiger Ultra Black";
    font-weight: 900;
    src: url("../fonts/c2b235eb-f2a4-4bb2-9a60-9e43de0122d5.woff2") format("woff2"),
         url("../fonts/f8c104e0-3880-4040-b3f9-b85d30fd0d10.woff") format("woff");
}
@font-face{
    font-family:"Frutiger";
    font-stretch: condensed;
    font-weight: 400;
    src: url("../fonts/4c2cde7b-ca8d-43a4-b444-5ef921356dd1.woff2") format("woff2"),
         url("../fonts/cc80bf43-9aae-44c5-95b8-263702de2bca.woff") format("woff");
}
@font-face{
    font-family:"Franklin Gothic";
    font-stretch: condensed;
    src: url("../fonts/0bfefb93-31a8-4bfc-b3c0-4283dbc92f2d.woff2") format("woff2"),
         url("../fonts/8df98e8d-cde9-4e1f-aba8-6513db07b88e.woff") format("woff");
}
@font-face{
    font-family:"Franklin Gothic";
    font-stretch: extra-condensed;
    src: url("../fonts/6232a36a-f96d-4a8d-bd58-6f3decf6e09d.woff2") format("woff2"),
         url("../fonts/b456aa08-2480-4986-87c8-c5a216a62b86.woff") format("woff");
}
@font-face{
    font-family:"Open Sans";
    src: url("../fonts/open-sans-v18-latin-regular.woff2") format("woff2"),
         url("../fonts/open-sans-v18-latin-regular.woff") format("woff");
}


/*
$savvas-blue = #0064AC;
$med-blue = #97BFDE;
$light-blue = #D2EAFC;
$standard = #B4123C;
*/

/* Main blue color */
@property --savvas-blue {
    syntax: "<color>";
    inherits: false;
    initial-value: #0072BC;
}

/* Main dark blue color */
@property --savvas-dark-blue {
    syntax: "<color>";
    inherits: false;
    initial-value: #2150A3;
}

/* Secondary blue color */
@property --light-blue {
    syntax: "<color>";
    inherits: false;
    initial-value: #D2EAFC;
}

/* Links blue color */
@property --link-blue {
    syntax: "<color>";
    inherits: false;
    initial-value: #2150A3;
}

/* Color of the dotted rules */
@property --dotted-rule-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #6599CA;
}

/* Color of the thin rules */
@property --thin-rule-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #6E6E6E;
}

/* Light Grey */
@property --light-grey-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #CACACA;
}

/* Text color of the standards */
@property --standard-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #000000; /*#DA2128;*/ /*#B4123C;*/
}

/* EMPHASIS RED */
@property --emphasis-red {
    syntax: "<color>";
    inherits: false;
    initial-value: #DA2128;
}

/* EMPHASIS GREEN */
@property --emphasis-green {
    syntax: "<color>";
    inherits: false;
    initial-value: #2A7D14; /*#008349*/;
}

/* EMPHASIS BLUE */
@property --emphasis-blue {
    syntax: "<color>";
    inherits: false;
    initial-value: #0072BC ;
}

/* EMPHASIS ORANGE */
@property --emphasis-orange {
    syntax: "<color>";
    inherits: false;
    initial-value: #FF0000 ;
}

@property --hover-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #2150A3 ;
}

@property --nav-link-hover {
    syntax: "<color>";
    inherits: false;
    initial-value: #D6EEFF ;
}

@property --focus-bright-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #2150A3 ;
}
@property --focus-dark-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #CACACA ;
}

@property --white-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #FFFFFF ;
}

html, body {
    display: flex;
    flex-direction: column;
    font-family: "Frutiger", sans-serif;
    font-size: 18px;
    height: 100%;
    margin: 0;
    overflow: hidden auto;
    padding: 0;
}

button {
    background: none;
    border: none;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--link-blue);
    cursor: pointer;
}
a:hover {
    opacity: .85;
    filter: brightness(0.0);
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
}

button {
    font-family: inherit;
}
button:focus-visible {
    outline: 2px var(--focus-bright-color) dotted;
    outline-offset: -5px;
}

/* buttons in the floating Topic/Lesson navigation */
.floating button:focus-visible {
    outline-offset: 2px;
}

.arrow {
    width: 16px;
    height: 16px;

    background-image: url("../images/shared/caret-down.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    transform: rotate(90deg);
    cursor: pointer;
}

.list-item {
    margin-left:  24px;
    text-indent: -16px;
}
.list-item::marker {
    text-indent: 10px;
}

h1, h2, h3 {
    color: var(--savvas-blue) !important;
    font-family: "Franklin Gothic", sans-serif;
    font-weight: normal;
    line-height: 1em;
    /*letter-spacing: 0.75px;*/
    margin: 0;
    text-transform: uppercase;
}

h1 {
    font-size: 48px;
    font-stretch: extra-condensed;
    margin-bottom: 1rem;
}

h2 {
    font-size: 36px;
    font-stretch: extra-condensed;
    margin-bottom: 1rem;
}
h2.subtitle, h3 {
    font-size: 26px;
    font-stretch: condensed;
    font-weight: normal;
    /*letter-spacing: 0.2px;*/
    text-transform: none;
}

h3 {
    margin-bottom: 1rem;
}

h4 {
    font-size: 1rem;
    margin: 1.5rem 0 0;
}

hr {
    display: block;
    border: 0;
    height: 0;
}

.dot-separator,
hr.section-divider {
    border-top: 8px var(--dotted-rule-color) dotted; /*$med-blue*/
    display: block;
    left: -7px;
    margin: 2em 0;
    position: relative;
    width: 707px;
}

hr.subsection-divider {
    border-top: 1px var(--thin-rule-color) solid; /*--light-blue*/
    margin: 1.25em 0;
}

hr.divider {
    margin: 1.25em 0;
}

.hidden {
    display: none;
}

.main {
    position: relative;

    display: flex;
    flex: 1;
    flex-direction: column;
}

.print-container {
    text-align: right;
}


.print {
    text-align: right;
    margin: 20px 50px 0 0;
}
.print:first-child {
    height: 42px;
}

.content {
    line-height: 28px;
    margin: 20px auto;
    position: relative;
    width: 700px;
}

.content img {
    max-height: 450px;
    max-width: 100%;
}

.print-link,
.sections-link {
    color: var(--savvas-blue);
    font-size: 16px;
    font-weight: 600;
    position: relative;
    text-decoration: none;
    white-space: nowrap;

    margin: 5px;
}

.print-link {
    padding-left: 28px;
}
.print-link::before {
    background: url("../images/shared/print.svg") no-repeat center;
    content: "";
    height: 24px;
    left: 0;
    position: absolute;
    top: -3px;
    width: 24px;
}
.print-link:focus-visible {
    outline: 2px var(--focus-bright-color) dotted;
}

.sections-link {
    background: transparent;
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 5px 5px;
}
.sections-link:hover {
    /*opacity: .75;*/
    filter: brightness(0.0);
}
.sections-link:focus-visible {
    outline: 2px var(--focus-bright-color) dotted;
    outline-offset: -2px;
}

.close-strands {
    margin-top: 15px;
    text-align: right;
}

.sections {
    margin-bottom: 10px;
    pointer-events: none;
    position: absolute;
    text-align: right;
    width: 700px
}
.sections > * {
    pointer-events: auto;
}
.sections + div h1 {
    padding-right: 150px;
}


/* Button to jump back to the top of the page */
.back-to-top:focus-visible {
    outline-offset: 2px;
}


/** Top Navigation **/

.top-menu {
    position: relative;
}

.top-nav {
    align-items: center;
    background-color: var(--savvas-dark-blue) /*var(--savvas-blue)*/;
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0 25px;
    position: relative;
}
.top-nav img {
    height: 50px;
    margin: 5px 10px 5px;
}
.top-nav a {
    color: white;
}
.top-nav .left a:hover {
    opacity: 1.0;
    color: var(--nav-link-hover);
    filter: unset;
}
.top-nav .left a:hover > img {
    /* Used https://codepen.io/sosuke/pen/Pjoqqp to generate filters to create a similar color as #D6EEFF */
    filter: brightness(0%) invert(82%) sepia(69%) saturate(528%) hue-rotate(179deg) brightness(109%) contrast(101%);
}

/** The Topic-Lesson navigation page for mobile / small windows **/
.lesson-toggle,
.topic-lesson-nav,
.support-header {
    display: none;
}

/*.collapse-line {*/
/*flex-grow: 1;*/
/*border-top: 2px var(--light-blue) !*$light-blue*! solid;*/
/*margin: 1.25em 1em;*/
/*}*/

.title-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.title-header * {
    margin-bottom: 0;
}
.title-header h1 {
    margin-right: 16px
}

.top-nav .left > a {
    display: flex;
}

.top-nav .support-button > a {
    padding-right: 27px;
    position: relative;
}
.top-nav .support-button > a::after {
    background: url("../images/shared/caret-light.svg") no-repeat center;
    content: "";
    height: 11px;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 18px;
}

.support-button {
    position: relative;
}

/* Dropdown list of topics under "support" button */
.sub-nav {
    /*display: none;*/

    position: absolute;
    left: 0;
    top: calc(45px);
    z-index: 998;

    background: white;
    border: 1px #DAD9D9 solid;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 1.5px 1.5px 0 rgba(0,0,0,.2);
    color: black;

    max-height: 70vh;
    overflow: auto;
}
.sub-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sub-nav ul li {
    cursor: pointer;
    font-size: 16px;
    list-style-type: none;
    margin: 0;
    padding: 8px 10px;
    white-space: normal;
}
.sub-nav ul li:hover {
    background-color: #ECECEC;
}
.sub-nav ul li a {
    text-decoration: none;
}
.sub-nav ul li a:hover {
    opacity: 1;
}

nav .left {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
}

nav .nav-list {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav .nav-list > li {
    margin: 0 15px;
    padding: 0;
    white-space: nowrap;
}

nav .nav-list > li > a {
    align-items: center;
    display: inline-flex;
    height: 100%;
    padding: 0 10px;
    text-decoration: none;
}

nav.top-nav .left a:focus-visible {
    outline: 3px var(--white-color) solid; /*$light-blue*/
    outline-offset: -7px;
    border-radius: 10px;
}

/*nav.top-nav select:focus-within, */
nav.top-nav select:focus-visible {
    outline: 2px var(--white-color) solid;
    outline-offset: 5px;
}

/*
.top-nav *:focus-visible {
    border: 2px var(--emphasis-red) dotted;
}
*/

nav .nav-list > li.active > a {
    font-weight: 600;
    /*letter-spacing: -0.25px;*/
}

.right {
    padding-right: 25px;
    white-space: nowrap;
}
.right label {
    margin-right: 15px;
}
.right select {
    border-radius: 2px;
    border-width: 1px;
    font-size: 16px;
    padding: 8px 8px 9px;
}
.right select:focus-visible {
    box-shadow: inset 0 0 0 1px var(--light-blue);
    outline: 0;
}

.support-header .nav-container {
    display: flex;
    align-items: center;
    border-bottom: 1px var(--light-grey-color) solid;
    border-top: 1px var(--light-grey-color) solid;
    box-shadow: 0px 4px 4px 0px #00000040;

    justify-content: space-between;

    width: 100%;
    height: 45px;
    z-index: 3;
}
.support-header .topic-lesson {
    align-items: center;
    display: flex;
    padding: 0;

    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.support-header .topic-lesson .topic {
    padding: 20px 8px 20px 50px;
}
.support-header .topic-lesson .lesson {
    position: relative;
}
.support-header .topic-lesson .lesson .button {
    cursor: pointer;
    font-weight: 600;
    padding: 20px 30px 20px 8px;
}
.support-header .topic-lesson .lesson .button:hover {
    opacity: .75;
}
.support-header .topic-lesson .lesson .button .icon {
    display: inline-block;
    background: url("../images/shared/caret-dark.svg") no-repeat right;
    width: 18px;
    height: 15px;

}
.support-header .topic-lesson.expanded .lesson .button .icon {
    transform: rotate(-180deg);
}
.support-header .print {
    padding: 0 50px;
}

/* Dropdown list of lessons on support page */
.support-header .lesson-select {
    /*display: none;*/
    border-radius: 0 0 4px 4px;
    border-top: 0;
    left: 90px;
    width: 270px;
    z-index: 1;
}

.standards-table {
    border-collapse: collapse;
    border-spacing: 0;
}
.standards-table .lesson {
    font-weight: bold;
    white-space: nowrap;
    width: 1px;
}
.standards-table .standards a {
    color: var(--standard-color); /*$standard*/ /*#B4123C*/
    display: inline-block;
    font-size: 0.88889em;
    font-weight: bold;
}
.standards-table .standards a span {
    margin-right: .35em;
}
.standards-table .standards a:last-child span {
    display: none;
}
.standards-table tr:nth-child(4n-2) {
    background-color: var(--light-blue); /*$light-blue*/
}
.standards-table tr:nth-child(4n-3) {
    background-color: var(--light-blue); /*$light-blue*/
}
.standards-table td {
    padding: 8px 8px 6px;
    vertical-align: top;
}
.standards-table .standards-sm td {
    padding: 0 8px 8px;
    white-space: normal;
}

.standard-label {
    color: var(--standard-color);
    font-weight: bold;
}

.collapsed {
    display: none;
}

.subsection-content-list {
    list-style-position: inside;
    padding-left: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

.subsection-content {
    margin-top: 18px;
}

.section-header-id,
.subsection-header-id {
    padding-left: 0;
}

.section-header-id::marker,
.subsection-header-id::marker {
    display: inline-block;
    color: var(--savvas-blue);
    font-family: "Frutiger", sans-serif;
    font-size: 18px;
    font-stretch: normal;
    font-weight: 800;
}

.section-header-id li,
.subsection-header-id li {
    list-style-type: disc;
}

.section-header,
.subsection-header {
    display: flex;
    margin-bottom: 0.5rem;
}

li > .section-header,
li > .subsection-header {
    display: inline-block;
}

.section-header *,
.subsection-header * {
    margin-bottom: 0;
}

.content .subsection-content > ul {
    padding-left: 8px;
    margin-top: 18px;
}

.collapse-button {
    border: 0;
    cursor: pointer;

    display: flex;
    flex: 1 1 auto;
    align-items: center;

    margin-left: 10px;
    min-height: 35px;
    min-width: 28px;
}
.collapse-button:hover {
    /*opacity: .75;*/
    filter: brightness(0.0);
}
.collapse-button:focus-visible {
    outline: 2px var(--focus-bright-color) dotted;
    outline-offset: -2px;
}

.collapse-button .collapse-button-line {
    flex-grow: 1;
    height: 2px;
    background-color: #8a8a8a;
}

.collapse-button .collapse-button-icon {
    width: 40px;
    height: 36px;
    background-image: url("../images/shared/collapsible_arrow.svg");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: auto;
    border: 0;
    cursor: pointer;
}
.closed .collapse-button .collapse-button-icon {
    background-image: url("../images/shared/collapsible_arrow-closed.svg");
}


.collapse-strand-button {
    background: url("../images/shared/collapsible_arrow-strand.svg") no-repeat right 10px center;
}
.closed.collapse-strand-button {
    background: url("../images/shared/collapsible_arrow-strand-closed.svg") no-repeat right 10px center;
}
.collapse-std-button {
    background: url("../images/shared/collapsible_arrow-std.svg") no-repeat right 10px center;
}
.closed .collapse-std-button {
    background: url("../images/shared/collapsible_arrow-std-closed.svg") no-repeat right 10px center;
}

.mobile-menu .menu-button {
    background: url("../images/shared/menu-button.svg") no-repeat center;
    border: 0;
    bottom: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
}
.mobile-menu .menu-button:focus-visible {
    outline: 1px var(--light-blue) dotted; /*$light-blue*/
    outline-offset: -10px;
}

.mobile-nav {
    background-color: #F2F2F2;
    bottom: 0;
    box-shadow: 15px 0 20px 10px rgba(0,0,0,.75);
    overflow: auto;
    padding: 0 0 15px 15px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
    width: 270px;
}
.mobile-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.mobile-nav ul li {
    border-bottom: 2px #BBBBBB solid;
}
.mobile-nav ul li a {
    color: #000000;
    display: block;
    font-size: 16px;
    padding: 16px 68px 16px 0;
    text-decoration: none;
}
.mobile-nav ul li.active a {
    font-weight: 600;
    letter-spacing: normal;
}
.mobile-nav .sub-menu li {
    border: 0;
}
.mobile-nav .sub-menu li a {
    font-family: "Open Sans", sans-serif;
    padding: 10px 0;
}
.mobile-nav .support {
    position: relative;
}
.mobile-nav .support::after {
    background: url("../images/shared/caret-right.svg") no-repeat center/40px;
    bottom: 0;
    content: "";
    opacity: .35;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
}
.mobile-nav button:hover {
    opacity: .75;
}
.mobile-nav .header {
    border-bottom: 2px #BBBBBB solid;
    display: flex;
    height: 60px;
    justify-content: space-between;
    padding: 5px 0;
}
.mobile-nav .close {
    background: url("../images/shared/close.svg") no-repeat center/36px;
    border: 0;
    cursor: pointer;
    height: 50px;
    outline: 0;
    width: 50px;
}
.mobile-nav .lang-select {
    padding: 12px 15px 0 0;
}
.mobile-nav .lang-select label {
    display: inline-block;
    font-size: 0.833333rem;
    padding-bottom: 10px;
}
.mobile-nav .lang-select select {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    padding: 8px 8px 9px;
    width: 100%;
}

/* Mobile navigation drawer, main */
.mobile-nav .main-menu {
    /*display: none;*/
}

/* Mobile navigation drawer, sub (list of topics after selecting "support") */
.mobile-nav .sub-menu {
    /*display: none;*/

    margin-top: 5px;
}

/* Mobile navigation drawer, back button (shown only on submenu) */
.mobile-nav .back {
    background: url("../images/shared/caret-left.svg") no-repeat -30%/40px;
    border: 0;
    cursor: pointer;
    font-size: 1.11111rem;
    outline: 0;
    padding-left: 30px;

    /*visibility: hidden;*/
}

/*
Mobile navigation menu button,
alternate welcome page for mobile (phone),
mobile navigation drawer
*/
.mobile-menu, .welcome .mobile-title-card, .mobile-nav {
    display: none;
}

.columns-1 {
    display: block;
}

.columns-2 {
    display: flex;
}
.columns-2 > div {
    width: 50%;
}
.columns-2 > div:first-child {
    padding-right: 10px;
}
.columns-2 > div:last-child {
    padding-left: 10px;
}

@media screen and (max-width: 1400px) {
    .top-nav {
        padding: 0 5px;
    }

    nav .nav-list > li {
        margin: 0 10px 0 0;
    }

    .support-header .topic-lesson .topic {
        padding-left: 30px;
    }
    .print {
        padding-right: 30px;
    }
}

@media screen and (max-width: 1270px) {
    .welcome .space {
        display: none;
    }

    .top-nav .left .nav-list,
    .right,
    .topic-toggle,
    #topic-select {
        display: none !important;
    }

    .lesson-toggle,
    .topic-lesson-nav,
    .support-header {
        display: flex;
    }

    .dot-separator,
    hr.section-divider {
        left: -9px;
        width: auto;
    }

    /*
    Mobile navigation menu button,
    mobile navigation drawer
    */
    .mobile-menu,
    .mobile-nav {
        display: block;
    }

    .print-link {
        display: none;
    }
    .support-header .sub-nav ul li {
        padding: 10px;
    }
    .overview-6-12 .support-header {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .top-nav {
        /*padding-bottom: 12px;*/
        /*padding-left: 20px;*/
        /*padding-top: 12px;*/
    }

    .top-nav img {
        /*height: 36px;*/
        /*margin: 0;*/
    }

    .top-nav .left a {
        outline-offset: 5px;
    }

    .mobile-menu .menu-button {
        width: 60px;
    }

    .support-header {
        border-color: #C1C1C1;
        height: auto;
    }

    .support-header .topic-lesson .topic {
        padding-left: 20px;
    }

    .support-header .topic-lesson .topic,
    .support-header .topic-lesson span,
    .support-header .topic-lesson .lesson .button {
        /*font-size: 16px;*/
        /*padding-bottom: 15px;*/
        /*padding-top: 15px;*/
    }

    .support-header .topic-lesson .lesson .sub-nav {
        max-height: 60vh;
        top: 50px;
        width: 240px;
    }

    .support-header .sub-nav ul li {
        font-size: 0.833333rem;
    }
}

@media screen and (max-width: 800px) {
    .top-nav {
        background-color: var(--savvas-blue);
    }

    .welcome .title-card {
        display: none;
    }

    /* Alternate welcome page for mobile (phone) */
    .welcome .mobile-title-card {
        display: block;
    }

    .main .content {
        margin-bottom: 0;
        margin-left: 1em;
        margin-right: 1em;
        width: auto;
    }

    .main .sections {
        width: 100%;
    }

    h1, .welcome .main h2 {
        font-size: 36px;
    }

    .welcome h1 {
        font-size: 48px;
    }

    h3 {
        font-size: 26px;
    }

    #section1 h3 {
        font-size: 21px;
    }

    .print {
        display: none;
    }

    .content .columns-2 {
        flex-direction: column;
    }

    .content .columns-2 > div:first-child,
    .content .columns-2 > div:last-child {
        padding: 0;
    }

    .content .columns-2 img {
        margin: 0;
        width: auto;
    }

    .resources .icon-row {
        align-items: flex-start;
    }

    .resources .icon-row img {
        width: 60px;
    }

    .collapse-button {
        min-width: 100px;
    }
}

@media print {
    html, body {
        overflow: visible;
    }
    .top-menu,
    .print,
    .sections-link,
    .back-to-top,
    .close,
    .title-card .space {
        display: none !important;
    }
    .hidden, .collapsed {
        display: block !important;
    }
    .collapse-button,
    .collapse-strand-button,
    .collapse-std-button {
        background-image: none !important;
    }
    .title-card {
        background: none !important;
    }
    .title-card .card {
        margin: 0 !important;
        max-width: none !important;
    }
    .content {
        width: auto;
    }
    .support-header .topic-lesson .topic {
        padding-left: 0;
    }
}


/**
=====
Top Navigation Styles
=====
**/
ul#topic-select {
    position: absolute;
    left: 0;
    top: calc(65px + 40px);
    padding-top: 5px;

    outline: none;
    background-color: white;
    border: none;
    box-shadow: none;

    font-size: 14px;

    width: 250px;
    max-height: calc(100vh - (65px + 45px));
    z-index: 1;

    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}
ul#topic-select.hidden {
    display: none;
}

ul#topic-select > .topic-select-row {
    display: grid;
    grid-template-columns: 40px 1fr;
}
ul#topic-select.single-column > .topic-select-row {
    grid-template-columns: 1fr;
}

ul#topic-select > .topic-select-row > * {
    border-right: 1px solid var(--light-grey-color);
    border-bottom: 1px solid var(--light-grey-color);
}

/** Old Div Style **/
div#topic-select {
    position: absolute;
    left: 0;
    top: calc(65px + 40px);
    padding-top: 5px;

    outline: none;
    background-color: white;
    border: none;
    box-shadow: none;

    font-size: 14px;

    width: 250px;
    max-height: calc(100vh - (65px + 45px));
    z-index: 1;

    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;

    display: grid;
    grid-template-columns: 40px 1fr;
}
div#topic-select.hidden {
    display: none;
}
div#topic-select.single-column {
    grid-template-columns: 1fr;
}

div#topic-select > * {
    border-right: 1px solid var(--light-grey-color);
    border-bottom: 1px solid var(--light-grey-color);
}


/** **/
#topic-select button {
    text-align: start;
}

#topic-select .toggle-button {
    display: flex;
    justify-content: center;
    align-items: start;

    background-color: #ffffff;

    padding-top: 7px;
}
#topic-select .toggle-button .arrow {
    transform: rotate(0deg);
}
#topic-select .toggle-button.active .arrow {
    transform: rotate(90deg);
}


#topic-select .topic-content {
    display: block;
    background-color: #ffffff;
    padding-inline-start: 4px;
    padding-inline-end: 4px;
    margin: 0;
}
#topic-select .topic-content > * {
    display: block;
    margin: 7px 0;
}
#topic-select .topic-content a:hover {
    color: var(--hover-color);
    opacity: 1.0;
}

#topic-select a {
    color: #000000;
    font-family: "Open Sans", sans-serif;
}



.hidden {
    display: none;
}
.invisible {
    visibility: hidden;
}

.topic-toggle {
    position: relative;
    height: 45px;
    box-shadow: 0px 4px 4px 0px #00000040;

    border-top: 1px solid #cacaca;
    border-bottom: 1px solid #cacaca;
    z-index: 2;
}
.topic-toggle > button {
    display: flex;

    cursor: pointer;
    background: none;
    border: none;

    color: black;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 30px;
}
.topic-toggle > button .arrow {
    margin-left: 10px;
    transform: rotate(90deg);
}
.topic-toggle.active > button .arrow {
    transform: rotate(-90deg);
}



.lesson-content {
    display: none;
    list-style: unset;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 4px;
    padding-inline-end: 4px;
}
.topic-content.active .lesson-content {
    display: block;
}




/**
=====
Footer Styles
=====
**/
.footer {
    text-align: right;
    width: 100%;
    margin-top: 10px;
}

.back-to-top {
    align-items: center;
    bottom: 0;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    margin-right: 20px;
    margin-bottom: 20px;
    position: fixed;
    right: 20px;
}

.back-to-top #back-to-top-button {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: auto;
    background: #EDEDED;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    height: 40px;
    outline: 0;
    padding: 0;
    width: 40px;
}

.back-to-top #back-to-top-button img {
    width: 20px;
    height: 10px;
}

.back-to-top label {
    cursor: pointer;
    font-size: .67rem;
    font-weight: bold;
    margin-top: 6px;
}

.fade-in {
    animation: fade-in .5s;
}

.fade-out {
    animation: fade-out .15s;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media screen and (max-width: 1000px) {
    .back-to-top {
        position: static;
    }
}


/* ===== Hide Language Select === */

/* === GLOBAL === */
.top-nav .right, .lang-select {
 //   display: none;
}
.mobile-nav ul li:last-child {
    border-bottom-style: none;
}

/* == Grades K-5 == */
:where(.g0k, .g01, .g02, .g03, .g04, .g05) .top-nav .right,
:where(.g0k, .g01, .g02, .g03, .g04, .g05) .lang-select {
    display: block;
}
:where(.g0k, .g01, .g02, .g03, .g04, .g05) .mobile-nav ul li:last-child {
    border-bottom-style: solid; /*solid | none*/
}

 /* === Grades 6-8 === */
:where(.g06, .g07, .g07a, .g08) .top-nav .right,
:where(.g06, .g07, .g07a, .g08) .lang-select {
    display: block;
}
:where(.g06, .g07, .g07a, .g08) .mobile-nav ul  li:last-child {
    border-bottom-style: solid; /*solid | none*/
}

/* === Grades AGA === */
:where(.g09, .g10, .g11) .top-nav .right,
:where(.g09, .g10, .g11) .lang-select {
    display: block;
}
:where(.g09, .g10, .g11) .mobile-nav ul li:last-child {
    border-bottom-style: solid; /*solid | none*/
}

/* === Integrated Math === */
:where(.im1, .im2, .im3) .top-nav .right,
:where(.im1, .im2, .im3) .lang-select {
    display: block;
}
:where(.im1, .im2, .im3) .mobile-nav ul li:last-child {
    border-bottom-style: solid; /*solid | none*/
}